html, body{ overflow-x: hidden;}

img{ max-width: 100%; height: auto;}
.image img{ height: 300px;}

body{font-family: 'Raleway', sans-serif !important;}

#site-header{padding: 20px 0; position: absolute; left: 0; top: 0; width: 100%; z-index: 999;}

.site-container{padding: 0 20px;}

.logo{width: 200px;}

#nav ul{ margin: 0; padding: 0; list-style: none;}
#nav ul li{ display: inline-block; position: relative; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; margin-left: 25px; vertical-align:top;}
#nav ul li:first-child{ margin-left: 0;}
#nav ul li a{ color: inherit; display: block; padding: 5px 0; text-decoration: none !important;}
#nav ul li a:hover{ color: #fff;}

#nav ul li > a:after{ height: 1px; left: 0; width: 0; transition: 0.3s; bottom: 0; content: ''; position: absolute; background-color: #fff;}
#nav ul li:hover > a:after,
#nav ul li > a.active:after{ width: 30px;}


body.navactive,
html.navactive{ overflow: hidden;}

.close-menu{width: 18px; background-color: transparent; padding: 0; border: 0; display: none; outline: 0 !important; position: absolute; right: 20px; top: 25px; z-index: 3;}
.hambuger{ width: 24px; background-color: transparent; padding: 0; border: 0; display: none; outline: 0 !important;}

.content-section{ padding: 100px 0;}

.heading{font-size: 45px; margin: 0; text-transform: uppercase; letter-spacing: 2px; line-height: 1.2; font-weight: bold;}

.sub-heading{ letter-spacing: 4px; opacity: 0.65; text-transform: uppercase;}

.weight-light{ font-weight: 200 !important;}

.pos-rel{ position: relative;}

.txt-clr-orange{ color: #054772;}
.txt-clr-white{ color: #fff;}

.para-txt{ line-height: 1.5;}
.para-txt.txt-large{ font-size:115%; line-height: 1.6;}
.para-txt.txt-small{ font-size:85%;}

.button {background: #054772; background: -moz-linear-gradient(90deg, #054772 0%, #054772 100%); background: -webkit-linear-gradient(90deg, #054772 0%, #054772 100%); background: linear-gradient(90deg, #054772 0%, #054772 100%); border: 0; outline: 0; color: #fff; font-weight: 600; text-decoration: none !important; display: inline-block; padding:12px 24px; min-width: 180px; text-align: center; border-radius: 35px;}
.button:hover{ color: #fff; background: #054772;}

.lightbg{ background-color: #f5f5f6;}

.herosection .banner-slide{ position: relative;}
.herosection .banner-slide .banner-image:after{ left: 0; top: 0; width: 100%; height: 100%; position: absolute; background-color: #000; opacity: 0.5; content: '';}
.herosection .banner-slide .banner-midcontent{ position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 15;}
.herosection .banner-image{ position: relative; overflow: hidden; padding-bottom: 50%;}
.herosection .banner-image img{ position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}

.page-banner{ position: relative;}
.page-banner .banner-image:after{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.5; content: '';}
.page-banner .page-banner-content{ position: absolute; top: 66.67%; transform: translateY(-50%); left: 0; right: 0; z-index: 1;}
.page-banner .banner-image{ position: relative; overflow: hidden; padding-bottom: 25%;}
.page-banner .banner-image img{ position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}

.company-established{ position: relative;}
.company-established .since{ position: absolute; bottom: -30px; left: -30px; text-align: center; padding:30px 15px; background-color: #054772; color: #fff;}

.project-block{ position: relative;}
.project-block .project-meta{ padding:25px; position: absolute; bottom: 0; left: 0; width: 60%; background-color: #fff;}
.project-block .project-location{ font-size: 12px; font-weight: 500;}

.project-block.style-1 .project-meta{ position: static; padding: 20px; width: 100%;}
.project-block.style-1{ margin-bottom: 30px;}
.project-block.style-1 .project-title{ font-weight: bold;}

.h4-style{ font-weight: bold;}

ul.slick-dots{ margin:0; padding: 0; list-style: none; text-align: center; position: absolute; bottom: 50px; left: 0; right: 0;}
ul.slick-dots li{ display: inline-block; vertical-align: middle; margin: 10px; margin-bottom: 0;}
ul.slick-dots li button{ font-size: 0; cursor: pointer; text-indent: -9999999px; border: 0; outline: 0 !important; background-color: #054772; padding: 0; width: 10px; height: 10px; display: block; border-radius: 50%; opacity: 0.3;}
ul.slick-dots li.slick-active button{ opacity: 1;}

.client-section ul.slick-dots{margin:0 0 15px 0; bottom: auto; top: -20px; position:relative;}

.clients-container .client-block{ background-color: #fff; width: 25%; text-align: center; margin: 10px;}
.client-block img{ height: 150px;}

.slick-arrow{width: 48px; height: 48px; font-size: 0; display: block; background-color:#054772; color: #fff; line-height: 42px; position: absolute; top: 0; right: 50px; z-index: 55; border: 0; outline: 0 !important; cursor: pointer;}
.slick-arrow.slick-next{ right: 0;}
.slick-arrow:before{ content: '<'; font-size: 24px; color: #fff;}
.slick-arrow.slick-next:before{ content: '>';}

.service-block{ position: relative; padding-left: 70px; margin-bottom: 50px;}
.service-block .icon{ position: absolute; left: 0; top: 0; width: 52px;}

.white-block{ margin-bottom: 30px; padding: 30px; background-color: #fff; box-shadow: 0 3px 21px rgba(0,0,0,0.1);}

.counter-block .heading span{ font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing:6px; margin-top: 15px; display: block;}
.counter-block{ color: #fff; position: relative; z-index: 11;}
.counter-section:after{ left: 0; top: 0; width: 100%; height: 100%; position: absolute; background-color: #000; opacity: 0.5; content: '';}

.frm-holder .form-control{font-weight: 500; border-radius: 6px; border:1px solid #eee; font-size: 14px; padding: 3px 20px; height: 48px;}
.frm-holder textarea.form-control{ resize: none; height:120px;}

img.embed-responsive-item{ object-fit: cover;}

.gallery-block{ margin-bottom: 30px;}

#site-footer{ background:url(../images/bg-1.jpg) no-repeat; background-size: cover; padding: 100px 0;}
#site-footer .footer-logo{ width: 200px; max-width: 100%;}
#site-footer .footer-bio-txt{ width: 340px; max-width: 100%; font-weight: 500;}
#site-footer .footer-links ul{ margin: 0; padding: 0; list-style: none;}
#site-footer .footer-links ul li{margin-bottom: 10px; color: #fff; display: inline-block; vertical-align: top; margin-right: -4px; width: 50%; padding-right: 15px;}
#site-footer .footer-links ul li a{ color: inherit;}
#site-footer .newsletter-frm{ position: relative;}
#site-footer .newsletter-frm input[type="email"]{ width: 100%; border-radius: 0; max-width: 200px; color: #fff; padding: 5px 0; background-color: transparent; outline: 0; border: 0; border-bottom: 2px solid rgba(255,255,255,0.6); font-size: 16px;}

.social-network a{margin-right:15px; background-color: #054772; text-align: center; line-height: 36px; width: 36px; height: 36px; border-radius: 50%; color:#fff; display: inline-block; vertical-align: top; font-size: 24px;}
.social-network a:hover{color: #222;}

::placeholder { color: inherit; opacity: 0.6;}
:-ms-input-placeholder {color: inherit;opacity: 0.6;}
::-ms-input-placeholder {color: inherit;opacity: 0.6;}

.listul-style{ margin: 0; padding: 0; list-style: none;}
.listul-style li{ margin-bottom: 12px; position: relative; padding-left: 24px;}
.listul-style li:before{ content: '>'; position: absolute; left: 0; top: 3px; background: #054772; color: #222; width: 16px; height: 16px; text-align: center; border-radius: 50%; line-height: 15px; font-weight: 600; font-size: 11px;}

.contact-info ul{ margin: 0; padding: 0; list-style: none;}
.contact-info ul li{ margin: 0 0 30px 0; position: relative; padding-left: 50px;}
.contact-info ul li:last-child{ margin-bottom: 0;}
.contact-info ul li a{ color: inherit;}
.contact-info ul li small{ display: block; text-transform: uppercase; letter-spacing: 1px; opacity: 0.7;}
.contact-info ul li i{ font-size: 32px; left: 0; top: 0; color: #054772; position: absolute;}

.testimonial-block{ padding: 30px; background-color: #fff;}
.testimonial-block .avatar{ width: 25%; position: relative;}
.testimonial-block .testimonial-meta{ width: 75%;}
.testimonial-block .avatar:before{ width: 63px; height: 51px; background: url(../images/icons/testimonial-icon.png) no-repeat center; background-size: 80%; position: absolute; content: ''; left:-25px; top: -25px;}

.breadcrumbs{padding: 15px 0; margin-bottom: 5px;}
.breadcrumbs ul{ margin: 0; padding: 0; list-style: none;}
.breadcrumbs ul li{ display: inline-block; font-size: 13px; color: #222; font-weight: 600;}
.breadcrumbs ul li + li:before{ content: '/'; color: #848484; display: inline-block; margin: 0 10px;}
.breadcrumbs ul li a{ color: inherit;}

.fulllink{ text-decoration: none !important; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
span.has-error {font-size: 12px; padding-left: 5px; color: #f30707;}

@media screen and (min-width:1280px){
    .site-container{padding: 0 70px;}
}

@media screen and (max-width:1199px){
    body{ font-size: 13px !important;}
    .content-section{ padding: 70px 0;}
    .company-established .since{ left: 0; bottom: 0;}
    .heading{ font-size: 36px;}
    ul.slick-dots{ bottom: 30px;}
    .herosection .banner-slide .banner-midcontent{ top: 60%;}
    .page-banner .banner-image{ padding-bottom: 33.33%;}

    #site-footer{ padding: 70px 0;}
}
@media screen and (max-width:991px){
    .tab-top-spacing{ margin-top: 3rem;}
    .heading{ font-size: 32px;}
       
}
@media screen and (max-width:767px){
    .content-section{ padding: 3rem 0;}
    .clients-container .client-block{ width: calc(50% - 20px);}
    .gallery-block{ margin-bottom: 15px;}
    .project-block .project-meta{ padding: 20px; box-shadow: 0 3px 21px rgba(0,0,0,0.05);}
    .project-block .project-meta{ position: static; width: 100%;}
    .counter-block{ margin: 20px 0;}
    .service-block{ margin-bottom: 35px;}
    .testimonial-block{ padding: 20px;}
    .testimonial-block .testimonial-meta{ padding-left: 20px !important; padding-top:20px;}
    .slick-arrow{ width: 38px; height: 38px; line-height: 32px; right: 40px;}
    .slick-arrow:before{ font-size: 18px;}

    .page-banner .banner-image{ padding-bottom: 66.67%;}
    .herosection .banner-image{ padding-bottom: 120%;}
    .heading{ font-size: 28px;}
    .h4-style{ font-size: 19px;}
    .hambuger{ display:block; margin-left: auto;}
    #nav .close-menu{display: block;}
    #nav{ position: fixed; opacity: 0; visibility: hidden; background-color: rgba(0,0,0,0.4); width: 100%; top: 0; height: 100%; right:0;}
    #nav ul{padding: 70px 0; overflow: auto; background-color: #282828; width: 280px; position: absolute; right: -280px; top: 0; height: 100%; transition: 0.3s;}
    #nav ul li{ color: #fff; display: block; margin-left: 0; border-top: 1px solid rgba(255,255,255,0.05); border-radius: 0;}
    #nav ul li a{ padding: 15px 25px;}
    
    #nav ul li > a:after,
    #nav ul li > a:hover:after,
    #nav ul li > a.active:after{ display: none;}
  
    #nav.active{opacity: 1; visibility: visible;}
    #nav.active ul{ right: 0;}

    #site-footer{ padding: 3rem 0; text-align: center;}
    #site-footer .footer-logo{ margin: auto;}
    #site-footer .footer-links{ margin-bottom: 30px;}
    #site-footer .footer-links ul li{ display: block; padding-right: 0; margin-right: 0; width: 100%;}
    
}