@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap');
/*font-family: 'Inter', sans-serif;*/
 
:root{
	--font1:'Inter', sans-serif; 
	--primary: #01D4FE;
    --secondary: #123668; 
    --greencolor: #B3D401; 
    --textColor: #555555;
    --textDarkColor:#07070A;
    --black:#000; 
    --white:#fff;
    --lightColor:#BFBFBF; 
    --bordercolor:rgba(0,0,0,.1);
    --lightbg:#F6F7F8;
}


*{ 
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0; 
    scroll-behavior: smooth; 
    font-size: 16px;
    line-height: 28px;
    color: var(--textColor);
    font-family: var(--font1);
}
.container{
    max-width: 1290px;
    margin: 0 auto;
}
h1,h2,h3,h4,h5,h6{ 
    font-family: var(--font1); 
    font-weight: 700;
}
p{
	margin:0 0 24px;
}
img,svg{
    width: 100%;
}
.clear{
    clear: both;
}
.clear:after{
    position: relative;
    content: "";
    clear: both;
    display: table;
    width: 100%;
}

::-ms-input-placeholder {  
  color: #fff;
}
::placeholder {
  color: #fff;
}
::-webkit-placeholder {
  color: #fff;
}
 
ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
a{
    transition: .5s;
    text-decoration: none;
}
a:hover{
	text-decoration: none;
}
.lightbg{background: var(--lightbg);} 

section{
    padding: 50px 0;
    position: relative; 
}


.cmnbtn{ 
    background: var(--secondary);
    padding: 12px 20px;
    display: inline-flex;
    align-items: center;
    text-transform: capitalize;
    justify-content: center; 
    font-size: 17px;
    line-height: 20px; 
    position: relative; 
    color: var(--white); 
    font-weight: 500;
} 
.cmnbtn1{
    background: var(--white);
    color: var(--secondary);
}
.cmnbtn:hover{background: var(--primary); color: var(--white);} 
  


.tophd{margin: 0 0 45px;}
.tophd-center{text-align: center;}
h2.title{font-size: 32px; line-height: 42px; font-weight: bold;
    margin: 0 0 10px; color: var(--black); text-transform: uppercase;
    position: relative; padding: 0 0 20px;
}
h2.title:before{
    position: absolute;
    content: "";
    background: var(--primary);
    left: 0;
    bottom: 0; 
    width: 50px;
    height: 3px;
}
.tophd-center h2.title:before{
      left: 50%;
    bottom: 0;
    transform: translate(-50%,0);
}
h2.title span{color: var(--primary); display: inline-block;}
.subtitle{display: inline-block; color: var(--textColor); text-transform: uppercase;
    font-size: 20px; line-height: 30px; margin: 0 0 5px;  
} 
.tophd.tophd-center p{ margin: 0 auto;}

.dotbg{
    background: url(../images/dot.png) repeat 0 0 ;
}
.lightbg{
    background: var(--lightbg);
}
/**common**/
 

/**header**/

.partnerHeader{
    padding: 20px 0;
}
.headerHold{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logoHolder{
    display: flex;
    gap:60px;
    align-items: center;
}
.logoHolder .logo{
    display: inline-block;
}
.logoHolder .logo img{}

.headtagline{
    font-size: 24px;
    line-height: 34px;
    font-weight: bold;
    color: var(--black);
    position: relative;
    display: flex;
    align-items: center;
    gap:15px;
}
.headtagline:before{
    position: relative;
    content: "";
    width: 60px;
    height: 2px;
    background: var(--primary);
    display: inline-flex;
    align-items: center;
}



.banner{
    position: relative;
    padding: 100px 0;
    background: url(../images/banner.jpg) no-repeat 0 0;
    background-size: cover;
    background-attachment: fixed;
}
.bannerContent{
    display: inline-block;
    background: var(--white);
    padding: 50px;
    color: var(--textDarkColor);
    max-width: 700px;
    margin-left: 50px;
}
.bannerContent h1{color: var(--black); font-size: 24px; line-height: 34px; 
    padding: 0 0 20px; margin: 0 0 20px; position: relative;
}
.bannerContent h1:before{
    position: absolute;
    content: "";
    width: 60px;
    height: 2px;
    background: var(--primary);
    left: 0;
    bottom: 0;
}
.bannerContent h1 span{display: inline-block; color: var(--primary);}
.bannerContent p{}



/**why_sec**/
.why_sec{}
.why_sec .row >div{margin: 0 0 25px;}
.whydiv{padding: 35px; box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .2); border-radius: 5px;
    height: 100%;
}
.whydiv .ico{display: inline-block; width: 60px; margin: 0 0 15px;}
.whydiv .ico img{}
.whydiv h3{font-size: 35px; line-height: 40px; margin: 0 0 15px; color: var(--black);}
.whydiv p{margin: 0;}

/**about_sec**/
.about_sec{}
.about_sec .cmnbtn{
    margin: 0 0 20px;
}
.aboutImg{
    position: relative;
    padding: 0 0 70px 70px;
}
.aboutImg:before{
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 85%;
    height: 85%;
    background: transparent;
    border: 20px solid var(--bordercolor);
}
.aboutImg img{position: relative; z-index: 1;}

/**service_sec**/
.service_sec{}
.serviceDiv{
    position: relative;
}
.serviceImg{
    width: 50%;
}
.serviceImg img{
    width: 100%;
}
.serviceContent{
    padding: 30px;
    box-shadow: 0 10px 40px 0 rgba(0, 0, 0, .1);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0,-50%);
    width: 70%;
    background: var(--white);
}
.serviceContent h3{font-size: 22px; line-height: 32px; color: var(--black);
    font-weight: 500; margin: 0 0 14px;
}
.serviceContent p{margin: 0;}
.serviceHolder .row >div{
    margin: 0 0 25px;
}


/**testimonial_sec**/
.testDiv{ 
    display: inline-block;
}
.testimg{
    display: inline-block;
    width: 80px;
    height: 80px; 
    position: relative;
}
.testimg:before{
    position: absolute;
    content: "";
    width: 30px;
    height: 30px;
    border-style: solid;
    border-color: var(--black);
    border-width: 3px 0 0 3px;
}
.testimg img{}
.testContent{color: var(--black);
    box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, .10);
    padding: 30px;
}
.testContent .name{display: block; font-weight: 600; text-transform: uppercase;
    color: var(--secondary);
}
.testContent .desig{display: block; font-size: 12px; line-height: 16px;
    margin: 0 0 20px;
}
.testContent p{
    position: relative;
    padding: 15px 0 0 0;
    margin: 0;
}
.testContent p:before{
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    background: url(../images/invert.svg) no-repeat 0 0;
    left: 0;
    top: 0;
}

.testSlider .owl-stage-outer{
    padding: 0 0 20px;
}

.testSlider .owl-dots{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0 0 0;
}
.testSlider .owl-dots .owl-dot{
    width: 20px;
    height: 10px;
    display: inline-block;
    margin: 0 4px;
    background: transparent;
    border: 1px solid var(--black);
}
.testSlider .owl-dots .owl-dot.active{
    background: var(--black);
}


/**hossier-Homes**/
.hossier-Homes{
    background: url(../images/fullbg.jpg) no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    color: var(--white);
    text-align: center;
}
.hossier-Homes h2{
    text-transform: uppercase;
    color: var(--white);
    font-size: 40px;
    line-height: 50px;
    margin: 0 0 25px;
    font-weight: 600;
}
.hossier-hm-holder{
    max-width: 80%;
    margin: 0 auto;
}
.btnholder{
    gap:10px 20px ;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/**about_sec1**/
.about_sec1 h6{
    font-size: 20px;
    line-height: 34px;
    color: var(--black);
    margin: 0 0 20px;
}
.about_sec ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.about_sec ul li{
    padding: 0 0 0 25px;
    margin: 0 0 15px;
    background: url(../images/bedico.svg) no-repeat 0 6px;
    background-size: 20px;
}
.about_sec1 p{
    font-size: 20px;
    line-height: 26px;
    color: var(--textDarkColor);
}
.about_sec1 .aboutImg{
    position: relative;
   margin-left: 50px;
}
.about_sec1 .aboutImg .aboutImg1{
    position: absolute;
    left: -50px;
    bottom: -100px;
}


/**contact_sec**/
.contact_sec{}
.contactHolder{
    display: flex;
}
.contactDiv{
    width: 50%;
    padding: 0 50px;
    border-right: 1px solid var(--black);
}
.contactDiv:last-child{
    border: none;
}
.ftrlogo{display: inline-block; margin: 0 0 20px;}
.ftrlogo img{
    height: 100px; object-fit: contain;
}
.contactDiv h3{font-size: 24px; line-height: 34px; padding: 0 0 5px; margin: 0 0 20px;
    color: var(--black); position: relative;
}
.contactDiv h3:before{
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    background: var(--primary);
    width: 50px;
    height: 3px;
}
.contactDiv li{
    margin: 0 0 10px;
}
.contactDiv li address,
.contactDiv li a{
    padding: 0 0 0 25px;
    color: var(--textDarkColor);
}
.contactDiv li address{background: url(../images/addressico.svg) no-repeat 0 0;}
.contactDiv li a.call{background: url(../images/callico.svg) no-repeat 0 0;}
.contactDiv li a.mail{background: url(../images/mailico.svg) no-repeat 0 0;}

.socialDiv{
    display: flex;
    align-items: center;
    gap: 20px;
}
.socialDiv ul{
    list-style: none;
    margin: 0 ;
    padding: 0;
}
.socialDiv ul li{display: inline-block; margin: 0 3px;}
.socialDiv ul li a{color: var(--textColor); padding: 0;}
.socialDiv ul li a:hover{color: var(--primary);}

/**footer**/
.partnerFooter{
    padding: 30px 0;
}
.footerHolder{
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--black);
}
.footerHolder p{margin: 0;}
.footerHolder ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.footerHolder ul li{display: inline-block; padding: 0 10px;
  position: relative;
}
.footerHolder ul li:after{
    position: absolute;
    content: "";
    right: 0;
    top: 50%;
    transform: translate(0,-50%);
    height: 15px;
    width: 1px;
    background: var(--black);
}
.footerHolder ul li:last-child:after{display: none;}
.footerHolder ul li a{color: var(--black);}
.footerHolder ul li a:hover{color: var(--primary);}

/**shadowTxtDiv**/
.shadowTxtDiv{
   
    padding: 0 20px;
    border-left: 10px solid var(--greencolor);

}
.shtxrgt{
     text-align: right;
     border-right: 10px solid var(--greencolor);
}
.shadowTxtDiv h2{
    text-transform: uppercase;
    color: var(--bordercolor);
    font-size: 80px;
    line-height: 80px;
    font-weight: bold;
}
.shadowTxtDiv h2 span{
    display: block;
    font-size: 24px;
    line-height: 24px;
    color: var(--black);
    font-weight: 400;
}

@media (max-width:1199px){
    .container{
        max-width: 1000px;
    }
    .logoHolder .logo{
        width: 100px;
    }
    .headtagline{
        font-size: 20px;
        line-height: 30px;
    }
}
@media (max-width:1024px){
    .container{
        max-width: inherit;
        padding: 0 25px;
    }
    .logoHolder{gap: 20px;}
    .headtagline:before{
        width: 35px;
    }
    .headtagline{font-size: 16px; line-height: 26px;}
    .bannerContent{
        margin: 0;
        padding: 30px;
        max-width: 70%;
    }
    .whydiv h3{
        font-size: 25px;
        line-height: 35px;
    }
    h2.title{
        font-size: 25px;
        line-height: 35px;
    }
    .tophd{margin: 0 0 25px;}
    .shadowTxtDiv h2{font-size: 50px; line-height: 50px;}
    .aboutImg{
        padding: 0 0 30px 30px;
    }
    .aboutImg:before{
        border: 15px solid var(--bordercolor);
    }
    p{
        margin: 0 0 18px;
    }

    .about_sec1 h6{
        font-size: 17px;
        line-height: 24px;
    }
    .about_sec1 p{
        font-size: 17px;
        line-height: 24px;
    }

    .footerHolder{
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
    }
}

@media (max-width:767px){
    .headerHold{flex-wrap: wrap; justify-content: center; gap: 15px;}
    .headtagline:before{display: none;}
    .headtagline{background: var(--primary); padding: 3px 10px; border-radius: 5px;
        font-size: 15px;
    }
    .bannerContent{
        max-width: inherit;
    }
    .banner{
        padding: 60px 0;
    }
    .about_sec .row{
        flex-direction: column-reverse;
        gap: 40px;
    }
    .shadowTxtDiv h2{
        font-size: 40px;
        line-height: 40px;
    }
    .shadowTxtDiv{
        padding: 0 10px;
    }
    .serviceContent{
        padding: 15px;
    }
    .serviceContent h3{
        font-size: 18px;
        line-height: 26px;
        margin: 0 0 10px;
    }
    .hossier-Homes h2{
        font-size: 30px;
        line-height: 40px;
    }
    .about_sec1 .aboutImg .aboutImg1{
        position: relative;
        left: auto;
        bottom: auto;
    }
    .about_sec1 .aboutImg{
        margin: 0;
    }
    .contactHolder{
        flex-wrap: wrap;
    }
    .contactDiv{
        width: 100%;
        padding: 20px 0;
        border-bottom: 1px solid var(--black);
        border-right: none;
    }
    .footerHolder{
        gap: 10px;
    }
    .contactDiv:last-child{ border-bottom:none; }
}

@media (max-width:479px){
    .hossier-hm-holder{
        max-width: 100%;
    }
    .footerHolder{
        text-align: center;
    }
    .cmnbtn{
        padding: 10px 12px;
        font-size: 15px;
        line-height: 18px;
    }
    .serviceImg{
        width: 100%;
    }
    .serviceContent{
        position: relative;
        width: 100%;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        transform: translate(0,0);
    }
}