@font-face {
    font-family: Fragolino;  
    src: url('../fonts/Fragolino/FragolinoBook.ttf');  
}

@font-face {
    font-family: FragolinoBold;  
    src: url('../fonts/Fragolino/FragolinoBold.ttf');  
}

@font-face {
    font-family: RobotoBold;  
    src: url('../fonts/Roboto/Roboto-Bold.ttf');  
}

body{
	font-family: Fragolino;
	background-repeat: no-repeat; 
}

a{
	color: #fff;
	text-decoration: none;
	border: 0;
	position: relative;
}

a:hover, a:active, a:visited, a:focus{
	color: #fff;
	text-decoration: none;
	position: relative;
	border: 0;
	outline: 0;
}

a.active-nav:after{
	position: absolute;
    bottom: -7px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #fff;
    content: "";
    width: 100%;
}

nav a:not(.active-nav):hover:after{
	position: absolute;
    bottom: -7px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #fff;
    content: "";
    animation: headerBorderBottom 0.4s;
}

h1, h2, h3{
	margin: 0;
	padding: 0;
}

h2{
	font-family: 'FragolinoBold';
}

img{
	width: 100%;
}

video{
	outline: none;
}

ul{
	padding: 0;
	margin: 0;
}

li{
	list-style: none;
}

button{
	background: transparent;
    border: 0;
	outline: none;
    padding: 0;
}

button:active{
	border: 0;
	outline: none;
}

@-webkit-keyframes headerBorderBottom {

  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}


.animated-logo{
	position: fixed!important;
}

/* ======== main ============ */

.main-demo-wrap{
	height: 100vh;
	position: relative;
	width: 100%;
	overflow: hidden;
}

section#main{
	height: 100vh;
	position: absolute;
	z-index: 36;
	background: url("../img/Apt_5p_v2.webp");
	background-position: top;
	background-size: cover;
	width: 100%;
	padding: 0 48px 35px 48px;
	color: #fff;
	--animate-duration: 2s;
}


section#demo{
	height: 100vh;
	position: absolute;
	z-index: 2;
    background: url(../img/demo.webp);
    background-position: center;
    background-size: 100%;
    width: 100%;
    overflow: hidden;
    padding: 0 48px 35px 48px;
}

section#demo a{
	color: #000;
}

section#demo header.hide{
	display: none!important;
}

section#demo a:after{
	background: #000;
}


section#main header,
section#demo header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 45px;
}

section#main header .left,
section#demo header .left{
	display: flex;
	align-items: center;
}

section#main .left .nav-btn,
section#demo .left .nav-btn{
	margin-right: 8px;
}

section#main .left a,
section#demo .left a{
	margin-left: 20px;
}

section#main header a,
section#demo header a{
	font-weight: bold;
	font-size: 14px;
	line-height: 18px;
	text-transform: uppercase;
}

section#main .dark-wrap{
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.66);
	top: 0;
	left: 0;
	z-index: 1;
}

section#main .main-content{
	position: relative;
	z-index: 5;
	height: 100%;
}

section#main .logo-block{
	position: absolute;
    top: calc(28% + 70px);
    left: 0;
    width: 100%;
}

section#main .logo-block img{
	height: 100px;
    max-width: 900px;
}


section#main .bottom {
	display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 90%;
    margin: 0 auto;
}

section#main .bottom .left{
	padding-bottom: 15px;
}

section#main .bottom .solution{
	font-weight: bold;
    font-size: 48px;
	line-height: 52px;
}

section#main .bottom .arrow-down{
	margin-top: 40px;
}

@-webkit-keyframes downarrow {
  0% { -webkit-transform: translateY(0); opacity: 0.4 }
  100% { -webkit-transform: translateY(0.4em); opacity: 0.9 }
}

#main-arrow {
  -webkit-animation: downarrow 0.6s infinite alternate;
  display: inline-block;
}


section#main .bottom nav li:not(:last-child){
	margin-bottom: 24px;
}

section#main .bottom nav a{
	font-weight: bold;
	font-size: 20px;
	line-height: 26px;
	letter-spacing: 0.02em;
}


/* ======== main ============ */





/* ======== what-is-dreams ============ */

section#what-is-dreams{
	height: 100vh;
    width: 100%;
    background: #000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    color: #fff;
    justify-content: center;
    align-items: center;
}

section#what-is-dreams .text-block{
	max-width: 600px;
	margin: 0 auto;
	width: 100%;
}

section#what-is-dreams .title{
	margin-bottom: 35px;
}

section#what-is-dreams h2{
	font-weight: bold;
	font-size: 48px;
	line-height: 52px;
	text-align: center;
}


section#what-is-dreams .description p{
	font-size: 16px;
	line-height: 21px;
	text-align: center;
	letter-spacing: 0.1em;
	margin: 0;
}

section#what-is-dreams .video-block{
	text-align: center;
	width: 100%;
}

section#what-is-dreams .video-block video{
	width: auto;
	height: 50vh;
	margin: 0 auto;
}

/* ======== what-is-dreams ============ */



/* ======== features ============ */
section#features{
	background: #000; 
    color: #fff;
    padding: 48px 0 48px 0;
}

section#features .feature-block{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 0 112px;
}

section#features .block-one{
	margin: 0 0 112px 0;
}

section#features .feature-block .left,
section#features .feature-block .right{
	width: 45%;
}

section#features .text-block{
	max-width: 528px;
}

section#features .feature-block h2{
	font-weight: bold;
	font-size: 48px;
	line-height: 52px;	
	margin-bottom: 52px;
}


section#features .description p{
	font-size: 16px;
	line-height: 21px;
	letter-spacing: 0.1em;
	margin-bottom: 25px;
}

section#features #hand-holding{
    transform: translateX(112px);
}

/* ======== features ============ */


/* ======== devices ============ */

section#devices{
	background: #000;
} 

section#devices .content{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 50px 0;
}

section#devices .content .item{
	width: 25%;
	text-align: center;
	padding: 20px;
}

section#devices .content .item .title{
	font-weight: bold;
	font-size: 20px;
	line-height: 26px;
	text-align: center;
	letter-spacing: 0.02em;
	color: #fff;
	margin-bottom: 35px;
}

section#devices .content .item img{
	width: 84px;
}
/* ======== devices ============ */



/* ======== features-2 ============ */
section#realview{
	background: #000;
}

section#realview .content{
	 background-image: url(../img/realview.webp);
	 background-size: cover;
	 background-position: bottom;
	 width: 100%;
	 height: 100vh;
	 position: relative;
	 padding: 0 48px;
}

section#realview .content .bottom{
	position: absolute;
	bottom: 0;
	left: 48px;
}

section#realview .content .bottom .title{
	font-weight: bold;
    font-size: 200px;
    line-height: 140px;
    color: #000000;
    font-family: RobotoBold;  
}

section#realview .content .bottom .desc{
	font-weight: bold;
	font-size: 14px;
	line-height: 18px;
	text-transform: uppercase;
	color: #000000;
	padding-left: 13px;
    margin-bottom: 25px;
}

/* ======== features-2 ============ */



/* ======== features-2 ============ */

section#features-2{
	background: #000;
} 

section#features-2 .content{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 100px 48px;
}

section#features-2 .content .item{
	width: 33%;
	text-align: left;
	padding: 7px 64px;
}

section#features-2 .content .item .title{
	font-weight: bold;
	font-size: 24px;
	line-height: 31px;
	letter-spacing: 0.03em;
	color: #fff;
	margin-bottom: 24px;
}

section#features-2 .content .item .text{
	font-weight: normal;
	font-size: 16px;
	line-height: 21px;
	letter-spacing: 0.1em;
	color: #FFFFFF;
}
/* ======== features-2 ============ */


/* ======== testimonials ============ */

section#testimonials{
	background: #fff;  
	width: 100%;
    overflow: hidden;
}

section#testimonials .carousel-wrapp{
	width: 394px;
	margin: 140px auto 96px auto;
	text-align: center;
}

#testimonialCarousel .carousel-indicators{
	position: relative!important;
    bottom: auto!important;
    left: auto!important;
    margin: 100px auto 0 auto !important;
}


#testimonialCarousel .carousel-indicators li {
	background: #000000;
    opacity: 0.25;
    height: 8px;
    width: 8px;
    margin: 0;
}

#testimonialCarousel .carousel-indicators li.active{
	opacity: 1;
}

#testimonialCarousel .carousel-indicators li:not(:last-child){
	margin-right: 16px;
}

#testimonialCarousel .item-top{
	margin-bottom: 40px;
}

#testimonialCarousel .item-text{
	font-weight: bold;
	font-size: 24px;
	line-height: 31px;
	text-align: center;
	letter-spacing: 0.03em;
	color: #000000;
	margin-bottom: 36px;
}

#testimonialCarousel .testimonial-author{
	font-weight: bold;
	font-size: 14px;
	line-height: 18px;
	text-align: center;
	text-transform: uppercase;
	color: #000000;
	margin-bottom: 8px;
}

#testimonialCarousel .testimonial-position{
	font-weight: normal;
	font-size: 14px;
	line-height: 18px;
	text-align: center;
	letter-spacing: 0.03em;
	color: #000000;
}
	

/* ======== testimonials ============ */


/* ======== project-display ============ */
section#project-display{
	background: #fff;
	height: 100vh;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 64px 48px 64px 163px;
}

section#project-display .left{
	width: 528px;
	position: relative;
}

section#project-display .left .content{
	position: absolute;
	top: 0;
	left: 0;
}

section#project-display .right{
	width: calc(100% - 540px);
    height: calc(100vh - 128px);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100%;
    background-repeat: no-repeat; 
    background-image: url(../img/project-display-1.webp);
}

section#project-display .project-menu li span{
	font-weight: bold;
	font-size: 24px;
	line-height: 31px;
	letter-spacing: 0.03em;
	color: #000000;
	position: relative;
	padding-left: 36px;
}

section#project-display .project-menu li:not(:last-child){
	margin-bottom: 15px;
}

section#project-display .project-menu li span:before{
	background: url(../img/plus.svg);
    background-size: cover;
    content: '';
    height: 14px;
    width: 14px;
    position: absolute;
    top: 10px;
    left: 0;
    opacity: 0;
}

section#project-display li.active-project-menu span:before{
	opacity: 1;
}


section#project-display  h2{
	font-weight: bold;
	font-size: 48px;
	line-height: 52px;
	color: #000000;
	margin-bottom: 63px;
	font-family: 'FragolinoBold';
}

/* ======== project-display ============ */




/* ======== apartment-display ============ */

section#apartment-display{
	height: 100vh;
	background: #fff;
	padding: 64px 48px;
}

section#apartment-display .top{
	display: flex;
    justify-content: space-between;
    height: 15vh;
}

section#apartment-display .top h2{
	font-weight: bold;
	font-size: 5vh;
	line-height: 5vh;
	color: #000000;	
	margin: 5px 0 0 125px;
}
 
section#apartment-display .bottom{
	background: url(../img/apartment-1.webp);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    height: calc(85vh - 128px);
}

section#apartment-display .top .title{
	font-weight: bold;
	font-size: 15vh;
	line-height: 10vh;
	text-transform: uppercase;
	color: #000000;
	font-family: FragolinoBold;  
}


@media screen and (max-width: 1200px) {

	
}


/* ======== apartment-display ============ */




/* ======== live-projects ============ */

section#live-projects{
	background: #000;
	padding: 64px 64px;
	height: 100vh;
}

section#live-projects h2{
	margin: 0 0 64px 48px;
	font-weight: bold;
	font-size: 48px;
	line-height: 48px;
	color: #fff;
	font-family: 'FragolinoBold';
}

section#live-projects .project-img{
	width: 100px;
}

section#live-projects .block-title{
	font-weight: bold;
	font-size: 20px;
	line-height: 26px;
	text-align: center;
	letter-spacing: 0.02em;	
	color: #fff;
	margin-top: 32px;
}


section#live-projects .block-on-hover{
	background: url(../img/gindi-tower.png);
    background-size: 100% 100%;
    height: calc(100vh - 240px);
    opacity: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 328px;
    max-height: 653px;
    margin: 0 auto;
    position: absolute;
    width: 100%;
    overflow: hidden;
    left: 0;
    top: -203px;
}



section#live-projects .block-hover-btns{
	margin-top: 32px;
}

section#live-projects .block-hover-btns a{
	display: block;
}

section#live-projects .block-hover-btns a:not(:last-child){
	margin-bottom: 16px;
}

section#live-projects .block-on-hover img{
	width: 122px;
}

section#live-projects .block-hover-title{
	font-weight: bold;
	font-size: 20px;
	line-height: 26px;
	color: #fff;
	text-align: center;
	letter-spacing: 0.02em;
	opacity: 0;
}

section#live-projects .block-hover-btns a{
	display: none;
}

section#live-projects .cards{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	height: calc(100vh - 240px);
}

section#live-projects .cards .block{
	width: 25%;
	text-align: center;
	position: relative;
}

/* ======== live-projects ============ */



/* ======== crm-connection ============ */

section#crm-connection{
	background: #000;
}

section#crm-connection .crm-content{
	display: flex;
	justify-content: center;
	padding: 96px 48px 128px 48px;
}

section#crm-connection .crm-content .left{
	max-width: 420px;
	margin-right: 300px;
}

section#crm-connection .crm-content .left .title{
	font-weight: bold;
	font-size: 14px;
	line-height: 18px;
	text-transform: uppercase;
	color: #FFFFFF;
	margin-bottom: 10px;
}

section#crm-connection .crm-content .left h2{
	font-weight: bold;
	font-size: 48px;
	line-height: 52px;
	color: #FFFFFF;
	margin-bottom: 35px;
}

section#crm-connection .crm-content .left .text{
	font-size: 16px;
	line-height: 21px;
	letter-spacing: 0.1em;
	color: #FFFFFF;
	margin-bottom: 45px;
}

section#crm-connection .crm-content .left .more button{
	border: 1px solid #FFFFFF; 
	box-sizing: border-box;
	font-weight: bold;
	font-size: 14px;
	line-height: 18px;
	text-align: center;
	text-transform: uppercase;
	width: 220px;
	height: 40px;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}

section#crm-connection .crm-content .left .more button img{
	width: 6px;
    margin-top: 2px;
}

section#crm-connection .crm-content .left .more button span{
	margin-right: 10px;
}

section#crm-connection .crm-content .right img{
	width: 64px;
}

section#crm-connection .crm-content .right .item{
	display: flex;
}

section#crm-connection .crm-content .right .item:not(:last-child){
	margin-bottom: 70px;
}

section#crm-connection .crm-content .right .item-icon{
	margin-right: 40px;
}

section#crm-connection .crm-content .right .item-title{
	font-weight: bold;
	font-size: 20px;
	line-height: 26px;
	letter-spacing: 0.02em;
	margin-bottom: 12px;
	color: #fff;
}

section#crm-connection .crm-content .right .item-text{
	font-size: 16px;
	line-height: 21px;
	letter-spacing: 0.1em;
	color: #FFFFFF;
	opacity: 0.8;
	max-width: 356px;
}

/* ======== crm-connection ============ */


/* ======== sales-strategy ============ */

section#sales-strategy{
	background: #000;
	color: #fff;
}

section#sales-strategy .wrap{
	width: 100%;
	margin: 0 auto;
	max-width: 1114px;
	padding: 96px 0 90px 0;
}

section#sales-strategy .wrap .top{
	width: 100%;
	margin: 0 auto 95px auto;
	max-width: 600px;
	text-align: center;
}

section#sales-strategy .wrap .top h2{
	font-weight: bold;
	font-size: 48px;
	line-height: 52px;
	text-align: center;
	color: #FFFFFF;
	margin-bottom: 36px;
	font-family: 'FragolinoBold';
}


section#sales-strategy .wrap .top .text{
	font-weight: normal;
	font-size: 16px;
	line-height: 21px;
	text-align: center;
	letter-spacing: 0.1em;
	color: #FFFFFF;
}

section#sales-strategy .bottom-items{
	display: flex;
	justify-content: space-between;
}

section#sales-strategy .bottom-item{
	width: 33%;
	text-align: center;
}

section#sales-strategy .percent-block{
	text-align: center;
	margin-bottom: 36px;
}

section#sales-strategy .percent-block button{
	position: relative;
	width: 150px;
	height: 150px;
}

section#sales-strategy .percent-block button .progressbar-text{
	  font-weight: bold;
	  font-size: 48px;
}

section#sales-strategy .item .text-block{
	font-weight: bold;
	font-size: 20px;
	line-height: 26px;
	text-align: center;
	letter-spacing: 0.02em;
	max-width: 320px;
	margin: 0 auto;
}


/* ======== sales-strategy ============ */



/* ======== contacts-form============ */

section#contacts-form{
	color: #fff;
	background: #000;
	height: 100vh;
	display: flex;
	align-items: center;
}

section#contacts-form .wrap{
	display: flex;
	justify-content: space-between;
	width: 100%;
    margin: 0px auto;
    max-width: 1114px;
}

section#contacts-form .wrap .left img{
	max-width: 400px;
}

section#contacts-form .right{
	text-align: center;
	margin-bottom: 58px;
	max-width: 528px;
}

section#contacts-form .right .top{
	margin-bottom: 58px;
}

section#contacts-form .right h2{
	font-weight: bold;
	font-size: 48px;
	line-height: 48px;
	margin-bottom: 36px;
	font-family: 'FragolinoBold';
}

section#contacts-form .right .text{
	font-size: 16px;
	line-height: 21px;
	letter-spacing: 0.1em;
}

section#contacts-form .right .text p{
	margin-bottom: 0;
}

section#contacts-form .right form{
	max-width: 320px;
	margin: 0 auto;
}

section#contacts-form .right .form-group:not(:last-child){
	margin-bottom: 24px;
}
section#contacts-form .right input{
	border-radius: 0;
	height: 40px;
	font-weight: normal;
	font-size: 13px; 
	line-height: 17px;
	text-align: center;
	color: #000000;
}

section#contacts-form .right #sendContactInfo{
	width: 220px;
	height: 40px;
	margin: 0 auto;
	background: #E0B128;
	font-weight: bold;
	font-size: 14px;
	line-height: 18px;
	text-align: center;
	text-transform: uppercase;
	color: #000000;
}

/* ======== contacts-form ============ */



/* ======== footer ============ */

footer{
	background: #242424;
}

footer .content{
	display: flex;
	justify-content: space-between;
	padding: 75px 64px 50px 64px;
}


footer .logo-block #bmby-logo{
	width: 181px;
}

footer .menu-block{
	display: flex;
	justify-content: space-between;
}


footer .menu-block .block:not(:last-child){
	margin-right: 60px;
}


footer .menu-block a{
	font-size: 14px;
	line-height: 18px;
	text-transform: uppercase;
}

footer .menu-block a:hover{
	font-weight: bold;
}


footer .block li:not(:last-child),
footer .contacts-block p:not(:last-child){
	margin-bottom: 12px;
}

footer .contacts-block p{
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0.03em;
	color: #FFFFFF;
}

footer .copyright{
	font-weight: 300;
	font-size: 11px;
	line-height: 14px;
	text-align: center;
	color: #FFFFFF;
	opacity: 0.6;
	background: #000;
	padding: 5px 64px;
}


/* ======== footer ============ */