@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800;900&display=swap');

body {font-family: Inter}

.bg-white {background: #fff}

.container-fluid {padding: 0px;margin: 0px;}

#top-header .logo {display:inline-block;width:288px;height:72px;background:url('../images/construct/sprite.png') no-repeat 0 0;margin:20px 0px 30px 0px;cursor: pointer}

#top-header .info {padding-top:35px;}

#top-header .info .row .row .col-md-auto:first-child {padding-right:0px}

#top-header .info .row .row .col-md-auto:last-child {padding-left:5px}

#top-header .info h3{font-size: 14px;font-weight: 700;text-align: left;margin: 0px}

#top-header .info label{font-size: 12px;font-weight: 400;text-align: left}

#top-header .info .icon{width:40px;height: 40px;}

#top-header .info .icon1{background: url('../images/construct/sprite.png') no-repeat -597px 0px;}

#top-header .info .icon2{background: url('../images/construct/sprite.png') no-repeat -552px 0px;}

#top-header .info .icon3{background: url('../images/construct/sprite.png') no-repeat -642px 0px;}



.navigation,.navbar {background: #46afdc !important;padding: 0px;}

.navigation {position: relative;}

.nav-item {padding:14px 0px}

.nav-item:hover {background: #5cc1ec}

.nav-item:hover .nav-link {color: #fff;box-shadow:unset}

.nav-link {font-size: 16px;color: #fff;padding: 8px 27px !important;cursor: pointer;}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {color: #fff}



.dropdown-menu {border-radius: 0px;background: #46afdc;color: #fff;padding: 0px;margin: 0px;border-color: #46afdc}

.dropdown-item {padding: 15px;color: #fff;}

.dropdown-item.active, .dropdown-item:active, .dropdown-item:focus, .dropdown-item:hover {background: #5cc1ec;color: #fff;}



.whatsapp-btn {position: absolute;top:0px;right:0px;height: 100%;background: url('../images/construct/sprite.png') no-repeat -290px 0px;padding:15px 84px;display:block;font-size: 15px;cursor: pointer;text-decoration: none;font-size: 16px;color: #fff;}

.whatsapp-btn small {font-size: 12px;position: absolute;top: 35px;}



.header {background: url('../images/bg/bg1.png') no-repeat center center /auto 100% ;width: 100%;height: 675px;}

.section50 .row{margin:0px}

.section50 .col{padding:0px;margin:0px;background: #46afdc;color:#fff;position: relative;overflow: hidden;}

.section50 .text{padding:120px 110px;}

.section50 .text h2{font-size: 36px;font-weight: 700;margin-bottom: 35px;}

.section50 .text2{padding:120px 130px;}

.section50 .col img{width: 100%}

.section50 .bg-white {font-size: 20px;color:#000}

.section50 .bg-white h2{font-size: 36px;font-weight:700;margin-bottom: 35px;}

.section50 .bg-white .blue{color: #46AFDC}

.section50 .float-title-btn {position: relative}

.section50 .float-title-btn h2 , .section50 .float-title-btn .btn {position: absolute;}

.section50 .float-title-btn h2 {font-size: 36px;font-weight: 700;width: 100%;text-align:center;top:50px;}

.section50 .float-title-btn .btn {background: #46afdc;color: #fff;bottom: 75px;padding: 15px 60px;font-size: 20px;font-weight: 500;border-radius: 35px;left: 50%;margin-left: -115px;}

p {font-size: 20px}

.section50 .img , .service-page .desc .img {background: no-repeat center center /cover;}

#viewport {width: 100%;height: 100px;border: 1px solid red;position: fixed;top: 50vh;z-index: 1;}





.project-references {background: #46afdc; color: #FFF;}

.project-references .row{margin: 0px;padding: 0px}

.project-references .col{margin: 0px;padding: 0px}

.project-references .text {max-width: 40%;font-size: 20px;color:#fff}

.project-references .text div{padding:80px 85px 0px 106px;}

.project-references .text h2{font-size: 48px;font-weight:700;color: #fff;margin-bottom: 35px}

.project-references .images .item{overflow: hidden;padding: 0px;position: relative;height: 234px;}

.project-references .images .item img{width:100%;transition: all .2s ease-in-out;}

.project-references .images .item:hover img {-webkit-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);}

.project-references .images .overlay{text-transform:uppercase;position: absolute;top:0px;left: 0px;width: 100%;height: 100%;background: rgba(0,0,0,0.6);display: flex;justify-content: center;align-items: center;font-size: 24px;padding: 0px 100px;text-align: center;cursor: pointer;opacity: 0;transition: all .2s ease-in-out;z-index: 2}

.project-references .images .item:hover .overlay {opacity: 1}
.project-references .images .item .img {min-height: 100%;background: no-repeat center center /cover;}


.location h2{font-size: 48px;font-weight:700;color: #46AFDC;margin-top: 75px;margin-bottom: 40px}

.location iframe {border: 0;padding: 0;margin: 0px;width: 100%;height: 376px;display: block;}

footer {font-size: 14px;color:#fff;text-align: center;padding: 55px 0 ;background: #5cc1ec}



.navbar-toggler {color: #fff;border-color: #fff;padding: 5px 7px;margin: 10px 0px;}



.hiddenImage {opacity: 0}

.fadeInImage {-webkit-transition: opacity 0.5s ease-in-out;-moz-transition: opacity 0.5s ease-in-out;transition: opacity 0.5s ease-in-out;opacity: 1}



@keyframes fadeInLeft {

    0%   { opacity: 0;-webkit-transform: translateX(-20px);-ms-transform: translateX(-20px);transform: translateX(-20px); }

    100% { opacity: 1;-webkit-transform: translateX(0px);-ms-transform: translateX(0px);transform: translateX(0px);  }

}

@keyframes fadeInRight {

    0%   { opacity: 0;-webkit-transform: translateX(20px);-ms-transform: translateX(20px);transform: translateX(20px); }

    100% { opacity: 1;-webkit-transform: translateX(0px);-ms-transform: translateX(0px);transform: translateX(0px);  }

}

.fadeInLeft {

    -webkit-animation-name: fadeInLeft;

    animation-name: fadeInLeft;

    animation-duration: 2s;

}

.fadeInRight {

    -webkit-animation-name: fadeInRight;

    animation-name: fadeInRight;

    animation-duration: 2s;

}

.youtube {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* about us */

.about-page .section50 .bg-white h2 {color: #000}

.about-page .section50 .bg-white h2 ,.about-page .section50 .text h2 {margin-bottom: 50px}

.page-header {height: 346px;background: no-repeat center center;background-size: cover;}

.page-header h2 {width: 100%;text-align: center;color: #fff;font-size: 48px;font-weight: 700;padding-top: 140px;}

.mission {background: #2790CB;;color: #fff;padding: 50px}

.mission .col {padding: 0px 100px}

.mission .col h2 {text-align: center;font-size: 36px;font-weight: 700;margin-bottom: 50px}

.mission .col p {text-align: center}

/* about us */



/* product */

.dl1 {width: 255px; height: 56px;display: inline-block;background: -698px 0px url("../images/construct/sprite.png") no-repeat;padding: 13px 25px;font-size: 20px;color: #000;text-decoration: none;font-weight: 700;}

.dl2 {width: 255px; height: 56px;display: inline-block;background: -975px 0px url("../images/construct/sprite.png") no-repeat;padding: 13px 25px;font-size: 20px;color: #000;text-decoration: none;font-weight: 700;}

/* product */



/* service */

.service-page .mrdh, .gallery-wrapper .mrdh {text-align: center;padding: 50px 70px}

.service-page .mrdh h2 ,.service-page .desc h2 , .gallery-wrapper .mrdh h2{font-size: 32px;font-weight: 700;margin-bottom: 35px;}

.service-page .desc {background: #2790CB;color: #fff;overflow:hidden;}

.service-page .desc img {width: 100%}

.service-page .desc .text {padding:100px}

.service-page .hspd .text {padding:50px 100px}

/* service */



/* project page */

.projects-page .details  {padding:110px 50px}

.projects-page .details .table {margin:0 auto;}

.projects-page .details .table thead th {background: #46AFDC;color: #fff;font-weight: 700;font-size: 20px;padding: 18px 20px}

.projects-page .details .table th:not(:first-child), .projects-page .details .table td:not(:first-child) {border-left:1px solid #fff }

.projects-page .details .table tbody {border:1px solid #F5F5F5;font-size: 16px}

.projects-page .details .content {-webkit-transition: max-height 1s; -moz-transition: max-height 1s; -ms-transition: max-height 1s; -o-transition: max-height 1s;transition: max-height 1s; background: #e5feff;overflow: hidden;max-height: 0;}

.projects-page .details .active {max-height: 2500px;}

.projects-page .details .btn {font-size: 20px;font-weight: 700;background:#D7DADB;padding: 12px 90px}

/* project page */













@media (max-width: 575px) { 

	p {font-size: 14px}

	.container {margin: 0px;padding: 0px;}

	#top-header {overflow: hidden;}

	#top-header .logo{margin:10px auto;scale: 0.6}

	#top-header .info {display: none}

	#top-header .col {padding: 0px;}

	.header {height: 205px}

	.section50 .col {flex: none;min-height: 230px}

	.navbar-toggler {margin: 10px;}

	.dropdown-menu {position: relative !important;top: 15px !important;}

	.dropdown-item {padding-left: 50px}

	.whatsapp-btn {background-position:  -222px 0px;padding:10px 40px 10px 70px;background-size: 1475px auto;font-size: 13px;height: 70px;}

	.whatsapp-btn small {top:27px;font-size: 10px}

	.section50 .text {padding:30px}

	.section50 .text2 {padding: 50px 40px}

	.project-references .col {flex: unset;max-width: 100%;}

	.project-references .text div {padding: 30px 50px}

	.location h2,.section50 .bg-white h2,.section50 .text h2,.project-references .text h2 {font-size: 25px;}

	.project-references .images .item {height: 200px;width: 100%}

	.project-references .images .overlay {font-size: 16px;}

	.location h2 {margin-top: 40px}

	footer{padding:15px 65px}

	.mission .col {padding: 30px 15px}

	.section50 .float-title-btn h2 {padding: 0px 50px;top:20px}

	.section50 .float-title-btn .btn {font-size: 18px;padding: 10px 40px;margin-left: -89px;bottom: 50px}

	.service-page .mrdh {padding: 50px 30px}

	.service-page .desc .row > div {flex: none;min-height: 400px;width: 100%}

	.service-page .desc .text {padding: 50px}

	.service-page .section50 .row .col .row .col {flex: 1 0 0%}

	.projects-page .details {padding: 110px 20px}

	.projects-page .details th{font-size: 14px !important;vertical-align: top;}

	.projects-page .details td{font-size: 12px !important}

	.projects-page .details .btn {font-size: 16px;}

	.page-header h2 {padding-top: 100px}

}





@media (min-width:576px) and (max-width: 991px) { 

	.container {margin: 0px;padding: 0px;max-width: unset}

	p {font-size: 14px}

	#top-header {overflow: hidden;}

	#top-header .logo{margin:10px auto;scale: 0.8}

	#top-header .info {display: none}

	#top-header .col {padding: 0px;}

	.header {height: 300px}

	.navbar-toggler {margin: 10px}

	.dropdown-menu {position: relative !important;top: 15px !important;}

	.dropdown-item {padding-left: 50px}

	.whatsapp-btn {background-position:  -222px 0px;padding:10px 40px 10px 70px;background-size: 1475px auto;font-size: 13px;height: 70px;}

	.whatsapp-btn small {top:27px;font-size: 10px}

	.section50 .col {overflow: hidden}

	.section50 .text {padding:30px}

	.section50 .row:first-child .col img{width: 120%;}

	.section50 .text2 {padding: 50px;}

	.section50 .text h2,.section50 .float-title-btn h2,.section50 .bg-white h2,.location h2, .project-references .text h2 {font-size:30px}

	.section50 .float-title-btn .btn {margin-left:-88px;padding: 12px 50px;font-size: 14px;}

	.project-references .text , .project-references .images {flex:unset;max-width: 100%}

	.project-references .text div {display: flex}

	.project-references .text div {padding-top: 50px}

	.project-references .text div p {padding-top: 10px}

}



@media (min-width:992px) and (max-width:1199px) {

	#top-header {overflow: hidden;}

	#top-header .logo{margin:10px auto;scale: 0.6}

	.section50 .text {padding: 45px 60px;}

	.section50 .text2 {padding: 90px 60px;}

	.project-references .images .item {height: 220px}

	.whatsapp-btn {right: -170px;-webkit-transition: right 1s; -moz-transition: right 1s; -ms-transition: right 1s; -o-transition: right 1s;transition: right 1s;}

	.whatsapp-btn:hover {right:0px}

}	

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

	#top-header {overflow: hidden;}

	.section50 .text {padding: 75px 120px }

	.section50 .text2 {padding: 100px 130px}

	.product-page .section50 h2 {font-size: 35px;margin-bottom: 30px;}

	.projects-page .section50 .text {padding: 75px 45px}

	.projects-page .section50 .text2 {padding: 100px 70px}

}

/*

@media (min-width:1400px) {

	.project-references .text {max-width: 33%}

	.project-references .images .item {height: 420px}

	.project-references .images .overlay {font-size: 40px}

	.project-references .text div {padding-top: 285px}

	.location iframe {height:500px}

	.section50 .float-title-btn h2 {font-size: 55px;top:90px}

} 

*/

/* gallery */
.gallery-wrapper .h50 {height: 50vh}
.gallery-wrapper .h25 {height: 25vh}
.gallery-wrapper .y80 {background-position: 50% 80% !important}
.gallery-wrapper .item {background-size: cover;background-position: 50%;position: relative;cursor: pointer;}
.gallery-wrapper .hide-img .item::before{
	content:"";
	transition: all 0.5s ease;
	width: 100%;
	height: 100%;
	background: #FFFFFF;
	position: absolute;
    top: 0px;
    left: 0px;
    opacity: 1;
}
.gallery-wrapper .item::before {content:"";
	transition: all 0.5s ease;
	width: 0%;
	height: 100%;
	background: #FFFFFF;
	position: absolute;
    top: 0px;
    left: 0px;
    opacity: 1;
}
.gallery-wrapper .item::after{
	content : "\f52a";
	font-family: bootstrap-icons !important;
	font-size: 30px;
	color:#FFFFFF;
	position: absolute;
	top:0px;
	left:0px;
	height: 100%;
	width: 100%;
	background: rgba(0,0,0,0.8);
    text-align: center;
    opacity: 0;
    transition: 0.3s;
}
.gallery-wrapper .h25::after{padding-top:10vh}
.gallery-wrapper .h50::after{padding-top:22vh}
.gallery-wrapper .item:hover::after{
    opacity: 1;
}
.gallery-wrapper .item img {display: none}
/* gallery */