@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
body{margin:0px; padding:0px; font-size:14px; background-color: #37414B; color:#222222;font-family: "Roboto", sans-serif;  }
h1,h2,h3,h4,h5,h6,p,ul,li,div,ol,span,input,textarea,div,class,select,section,header,footer,img{margin:0px; padding:0px;  box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}

#container{width:100%;}
.full_width{width:100%;}
.page_width{width:100%; padding: 0px 50px; margin: auto; text-align:left;}
.left{float:left;}
.right{float:right;}
.left_side{float:left;}
.right_side{float:right;}
.col{float:left;}
.clearfix{clear:both;}
a img{border:0px;}
img{max-width:100%;}
a{ text-decoration:none;}
.hide{ display:none;}

.txt_align_left{ text-align:left;}
.txt_align_center{ text-align:center;}
.txt_align_right{ text-align:right;}
.position_relative{ position:relative;}
p{ font-size:15px; color:#848484; text-align:left; font-weight:400; line-height:26px; margin-bottom:10px;}
h1{ font-size:28px; color:#000; text-align:left; font-weight:normal; margin-bottom:15px;}
h2{ font-size:22px; color:#000; text-align:left; font-weight:normal; margin-bottom:15px;}
h3{ font-size:20px; color:#000; text-align:left; font-weight:normal; margin-bottom:15px;}
a{ color:#222222;}


/*GERENRIC_SECTION_START*/
.gerenric-padding{padding: 80px 0px;}
.gerernic-button{display: inline-flex; align-items: center; border-radius: 10px; justify-content: center; min-width: 220px; background-color: #112236; border: 0px; cursor: pointer; padding: 8px 20px; height: 65px;font-size: 20px; font-weight: 400; color: #fff; }
.gerernic-button:hover{background-color: #0b1727; }
.gerernic-input{width: 100%; border-radius: 10px; font-size: 20px; color: #000; font-weight: 400; background-color: rgba(110,120,133,0.60); height: 65px; padding: 19px 20px; border: 1px solid  rgba(62,92,128,0.60);}
.gerernic-input:focus{outline: none;}
.gerernic-input.sm-text-ft{color: #fff; font-size: 14px;}
.gerenric-form{width: 100%;}
.gerenric-form ul li{ list-style-type: none; margin-bottom: 25px; font-size: 20px; font-weight: 400; color: #fff;}
.gerenric-form ul li:last-child{margin-bottom: 0px;}
.gerenric-form ul li .form-row{width: 100%; display: flex; flex-wrap: wrap;}
.gerenric-form ul li .form-label{width: 100%; margin-bottom: 8px;}
.gerenric-form ul li .form-field{width: 100%;}
.gerenric-form ul li .form-left{width: 50%; padding-right: 10px;}
.gerenric-form ul li .form-right{width: 50%; padding-left: 10px;}
.gerenric-form ul li a{color: #fff; text-decoration: underline;}
.gerenric-content{width: 100%;}
.gerenric-content.max-500{max-width: 500px; margin: auto;}
.gerenric-content .content-inner{ margin: 0px -15px; display: flex; flex-wrap: wrap;}
.gerenric-content .content-col{width: 50%; padding: 15px;}
.gerenric-content .content-card{width: 100%; overflow: hidden; height: 100%; min-height: 350px; background-color:rgba(255,255,255,0.20);border-radius:15px;}
.gerenric-content .content-heading{width: 100%; position: relative; z-index: 0; height: 80px; display: flex; align-items: center; justify-content: space-between; padding: 8px 30px; background-color: #112236; border-radius: 15px 15px 0px 0px;}
.gerenric-content .content-heading h2{font-size: 22px; color: #FFFFFF; font-weight: 600; margin-bottom: 0px;}
.gerenric-content .content-detail{width: 100%;padding: 30px; height: 100%; position: relative; }
.gerenric-content .content-detail.pdg-0{padding: 0px !important;}
.social-media{display: inline-flex; align-items: center; border-radius: 10px; background-color: #29384A; padding: 10px 20px;}
.social-media .social-div{margin: 0px 3px; font-size: 16px; color: #fff;}
.social-media .social-div img{opacity: 0.5;}
.social-media .social-div:hover img{opacity: 1;}
.inner-heading{font-size: 35px; color: #fff; font-weight: bold; margin-bottom: 40px; text-align: center;}
.gerenric-project{width: 100%;}
.gerenric-project .project-inner{margin: 0px -15px; display: flex;justify-content: center; flex-wrap: wrap;}
.gerenric-project .project-col{width: 33.333%; padding: 15px;}
.gerenric-project .project-card{width: 100%; position: relative; }
.gerenric-project .project-card img{width: 100%; border-radius: 15px; height: 500px; object-fit: cover; border: 4px solid rgba(255,255,255,0.40);}
.gerenric-project .project-card .project-overlay{position: absolute; bottom: 20px; border-radius: 0px 0px 10px 10px; padding: 5px 15px; height: 70px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 600; color: #fff; background-color:rgba(17,34,54,0.80); width: calc(100% - 20px); left: 10px;}
.gerenric-project .project-card:hover img{border: 4px solid rgba(255,255,255,0.70);}
.gerenric-project .project-card:hover .project-overlay{background-color:rgba(17,34,54,0.90);}
/*GERENRIC_SECTION_END*/

/*HEADER_SECTION_START*/
#header-secton{width: 100%; height: 80px;  background-color:#112236; padding: 15px 0px;}
#header-secton .header-inner{width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;}
#logo image{display: block;}
#header-secton .header-title{display: flex; align-items: center;}
#header-secton .header-title .eastern-logo{margin-right: 10px;}
#header-secton .header-title h1{font-size: 35px; text-align: left; margin-bottom: 0px; line-height: 64%;font-weight: bold; color: #fff;}
#header-secton .header-title h1 span{font-size: 14px;  font-weight: 500;}
#header-secton .header-account{display: flex; position: relative;}
#header-secton .header-account .header-website-link{color: #fff; font-weight: bold; font-size: 16px;}
#header-secton .header-account .header-website-link a{color: #fff;}
#header-secton .header-account .menu-icon{width: 25px; cursor:pointer; margin-left: 10px;}
#header-secton .header-account .account-dropdown{width: 200px; display: none; background-color: #29384A; overflow: hidden; border-radius: 0px 0px 10px 10px; position: absolute;z-index: 999; right: 0px; top: 50px;}
#header-secton .header-account .account-dropdown ul li{list-style-type: none;color: #fff; font-weight: 500; font-size: 15px;}
#header-secton .header-account .account-dropdown ul li a{color: #fff; padding:16px 20px; display: block; border-bottom: 1px solid rgba(255,255,255,0.10);}
#header-secton .header-account .account-dropdown ul li:last-child a{border-bottom: 0px;}
#header-secton .header-account .account-dropdown ul li a:hover{background-color:  rgba(255,255,255,0.10);}
/*HEADER_SECTION_END*/

/*NAVIGATION_SECTION_START*/
#navigation-bottom{width: 100%; position: sticky;padding: 0px 50px;  top: 0px; left: 0px; z-index: 9999; display: flex; align-items: center; justify-content:space-between; background-color: #112236;}
.nav-icon{background-color: rgba(255,255,255,0.10);}
.nav-icon ul{display: inline-flex; }
.nav-icon ul li{list-style-type: none;}
.nav-icon ul li a{padding: 20px 25px; display: block; height: 100%;box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
.nav-icon ul li a img{width: 25px;display: block; opacity: 0.6;}
.nav-icon ul li a:hover{box-shadow:inset 0px 5px 0px #118BE1;}
.nav-icon ul li a:hover img{opacity: 1;}
.nav-icon ul li a.active img{opacity: 1;}
.nav-icon ul li a.active{box-shadow:inset 0px 5px 0px #118BE1;}
.nav-icon ul li a img.icon_2{display: none;}
.nav-icon ul li a:hover img.icon_1{display: none;}
.nav-icon ul li a:hover img.icon_2{display: block;}
.nav-icon ul li a.active img.icon_1{display: none;}
.nav-icon ul li a.active img.icon_2{display: block;}
.select-project{display: inline-flex; position: relative; align-items: center; font-size: 15px; color: #fff; font-weight: 500;}
.select-project .select-text{margin-right: 10px;}
.select-project .select-box .select-dropdown::-ms-expand {display: none;}
.select-project .select-box:after {width: 13px; height: 13px; background: url(../images/down_arrow.svg)0px 0px no-repeat; content: ''; position: absolute; right: 10px; top: 18px; pointer-events: none;}
.select-project .select-box .select-dropdown {-webkit-appearance: none;-moz-appearance: none;appearance: none;display: block;width: 100%;min-width: 210px;height:45px;padding: 0px 15px;font-size: 15px;color: #fff;background-color: #29384A;background-image: none;border: 0px; border-radius: 4px;  -ms-word-break: normal;word-break: normal; position: relative;}
.select-project .select-box .select-dropdown:focus{outline: none;}
.select-box .select-dropdown {-webkit-appearance: none;-moz-appearance: none;appearance: none;display: block;width: 100%;min-width: 210px;height:65px;padding: 0px 15px;font-size: 15px;color: #fff;background-color: rgba(110,120,133,0.60);background-image: none; border: 1px solid  rgba(62,92,128,0.60); border-radius: 10px;  -ms-word-break: normal;word-break: normal; position: relative;}

.select-box .select-dropdown:focus{outline: none;}

.image-form{display: inline-flex; font-size: 15px; color: #fff; font-weight: 500;}
.image-form .image-text{ margin-right: 10px;}
.image-form .imagetime-text{text-align: left;}
.image-form img{margin-right: 10px;}
.image-form .weather-text{font-weight: bold; margin-top: 5px; display: inline-flex; align-items: center;}
/*NAVIGATION_SECTION_END*/

/*BANNER_SECTION_START*/
#banner-section{width: 100%;}
#banner-section img{width: 100%; height: 100%; object-fit: cover;}
#leftImg {height: 100%;position: absolute;overflow: hidden;left: 0px;}
#rightImg {height: 100%;position: absolute;overflow: hidden;right: 0px;z-index: 10;}
#dragbar {position: absolute;top: 0;bottom: 0;width: 8px;cursor: col-resize;background-color: rgba(255,255,255,.8);left: 100%;z-index: 20;}
#dragCircle {width: 14px;height: 70px;position: absolute;left: -3px;top: 45%;background-color:#118BE1;z-index: 50;border-radius: 3px;}
#lineDash {position: absolute;width: 8px;height: 8px;color: white;font-size: 18px;text-align: center;text-decoration: bold;z-index: 100;line-height: 5px;margin-top: 30px;left: 1px;}
.map-show-first{display: block !important;}
/*BANNER_SECTION_END*/

/*CONTENT_SECTION_START*/
#content-section{width: 100%; min-height: 500px;}
.weather-block{width: 100%; height: 100%; position: relative; padding: 30px; background: rgb(0, 0, 0) url(../images/weather_bg.jpg) 0px 0px no-repeat}
.weather-block .weather-location-title{font-size: 20px; margin-bottom: 20px; text-align: center; color: #fff; font-weight: 400;}
.weather-block .weather-centi-degree{width: 100%; display: flex; justify-content: space-between;}
.weather-block .weather-centi-text{font-size: 40px; text-align: left; color: #fff; font-weight: bold;}
.weather-block .weather-cloud{font-size: 17px; text-align: center; color: #fff; font-weight: 400;}
.weather-block .now-div{width: 100%; position: absolute; bottom: 110px; left: 30px; }
.weather-block .now-div .now-text{font-size: 17px; font-weight: bold; text-align: left; color: #fff; }
.weather-block .now-div .weather-cloud-sm {font-size: 14px; color: #fff;}
.weather-block .now-div .weather-cloud-sm .weather-cloud-image{margin-left: -4px;}
.weather-block .now-div .weather-cloud-sm .weather-cloud-image img{display: block;}
.weather-block .now-div .weather-cloud-sm .weather-centi-title{font-size: 17px; text-align: left; color: #fff; }
.map-section{width: 100%;}
.map-section iframe{width: 100%; border: 0px; margin-bottom: 0px; display: block; height: 550px;}
.project-page{width: 100%;}
.time-lapse-range-slider{width: 100%; padding-bottom: 30px; margin-bottom: 20px; position: relative;}
.time-lapse-range-slider input[type="range"] {width: 100%;height: 8px;-webkit-appearance: none;appearance: none;border-radius: 5px;outline: none;background: linear-gradient(to right, #112236 var(--progress, 50%), #D9D9D9 var(--progress, 50%));transition: background 0.3s ease-in-out;}
.time-lapse-range-slider input[type="range"]::-webkit-slider-runnable-track {height: 16px;border-radius:16px;background: linear-gradient(to right, #112236 var(--progress, 50%), #D9D9D9 var(--progress, 50%));}
.time-lapse-range-slider input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none;appearance: none;width: 26px;height: 26px;background: #112236;border: 3px solid #fff; box-shadow: 0px 0px 10px rgba(0,0,0,0.30);border-radius: 50%;cursor: pointer;position: relative; top: -5px;}
.range-slider{position: absolute; bottom: 0px;}
.login-page{width: 100%;}
/*CONTENT_SECTION_END*/

/*FOOTER_SECTION_START*/
#footer-section{width: 100%;padding: 30px 0px;  background-color: #112236;color: #fff; font-weight: 400; font-size: 16px; text-align: center;}
#footer-section .page_width{text-align: center;}
/*FOOTER_SECTION_END*/