@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
*{
    margin:0px;
    padding:0px;
    box-sizing:border-box;
}
body{
    font-family: "Montserrat", sans-serif;
line-height: 1.7;;
}

html{
    /* 10px */
    font-size: 62.5%;
}
ul li{
    list-style:none;
    
}
a{
    font-size:1.6rem;
    text-decoration: none;
    
}
p,li{
    font-size: 1.6rem;
    margin-bottom:0.5em;
     word-spacing: 0.4rem;; 
    
}
h1,h2,h3{
    margin-bottom: 0.5em;
    letter-spacing: 0.15em;
    font-weight: 500;
}





/* #############  .....Header Styling ...################## */
.header{
    height:100vh;
    background: linear-gradient(rgb( 0, 0,0,0.5),rgba(0,0,0,0.5)), url('../Image/header-image.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin:0px;
    position:relative;
}
.navbar{
    
    padding:1rem;
}

.navbar .logo {
    float:left;
    font-size: 3.5rem;
}
.navbar .nav-items{

    float:right;
    margin-top: 1rem;

}

.navbar a:link,
.navbar a:visited{
    color:#f4f4f4;
}
.navbar a{
    padding-bottom: 0.3rem;
}
.navbar a:hover{
    border-bottom:1px solid #fff;

}
.navbar::after{
    content:"";
   display:block;
    clear:both;
}
 .navbar .nav-item{
display:inline-block;
padding: 1rem;
text-transform: uppercase;
}
/* ################################################################################################### */




/* utility classes  ....................... */
.text-unique{
     background: linear-gradient(25deg,#2e5b5e,#285a56 50%);
}
.containner{
    max-width:1200px;
    width:80%;
    margin:0 auto;
    
    
}
.lg-heading{
    font-size:3.5rem;
}
.md-heading{
    font-size:2.2rem ;
}
.text-red{
    color:#e63946;
}
.text-light{
    color:#f4f4f4;
}
.text-black{
    color:rgb(34, 31, 31)
}
.text-gray{
    color:#368285;
}

.header-content{
  
  text-align: center;
  top:50%;
  left:50%;
  position: absolute;
  transform: translate(-50%,-50%);
  background: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2));
}
.header-content h1{
   text-transform: uppercase;
   font-weight: 700;
}
.btn{
    display:inline-block;
    padding:0.5em;
    font-weight: 500;
    text-transform:uppercase;
    margin:0.5em 0;
}
.btn-primary{
    background-color: white;
    border-radius: 10em;
}
/* ................................................................. */




/*........................... showcase section styling.......................................... */
.showcase{
    background-color: #ddd;
    padding :10rem 0;
}
.row{
    height:350px;
    
    background-color: #fff;
 box-shadow: 0px 0px 20px  #0000;
   margin-bottom: 10rem;;
    
}
.row1 .img-box ,
     .row2 .text-box{
float:left;
width:50%;
     }
.row2 .img-box ,
     .row1 .text-box{
float:right;
width:50%;
}


.row .img-box{
    
    height:100%;
}
.row .text-box{
    
    padding:3rem;
}

.row .img-box img{
    display: inline-block;
    width:100%;
    height:100%;
    object-fit:cover;
}
.btn-secondary{
    border:2px solid #e63946;
    border-radius: 1.5em;
    color:#e63946;
    background-color: #f4f4f4;
}
.btn-primary:hover{
    background-color: #ddd;
}
.bg-dark{
    background-color: black;
}
.btn-secondary:hover{
    background-color: #fcf3f2;
}
.row::after{
    content: "";
    display:block;
    clear:both;
}
.shadow{
    border:auto;
    box-shadow: 5px 5px 10px  darkgrey;
}
/* ......................................................................................................................... */




/*.......................... feature styling............................... */
.feature{
    padding:10rem 0;
    
}
.box{
    width:33.33333%;
    float:left;
    margin: top 0;
    text-align: center;
    padding:2rem;
}
.box-wrapper{
    box-shadow: 5px,5px,20px  gray;
    float:left;
    margin-bottom: 10rem;;
    margin-top:3rem;
}
.box1,
.box3{
    background-color:#c8d6c2;
}
.box2{
    background: linear-gradient(25deg,#76b4af,#90bba2 50%);
}
.box-wrapper::after{
    content:"";
    display:block;
    clear:both;
}
/* ................................................................................................................. */


/*.................................................. footer decoration.......................................... */
 .footer{
    background-color: rgb(76, 114, 106);
    color:#f4f4f4;
    padding:2rem;
    text-align: center;
    clear:both;

}
.socialmedia-link{
margin:2rem;
}

/* ........................................................................................................................ */

/*...........................................about page styling.................................... */
.about{
    padding:5rem 0;
}

/* .about-heading{
  border-bottom:6px solid #e63946;
} */
  .about-heading::after{
  content:"";
  color:#e63946;
  display:block;
  border:3px solid #e63946;
  width:100%;

}  
.about-wrapper{
    
    text-align: center;
    margin-top: 2rem;
}
.about-wrapper::after{
    content:"";
    display:block;
    clear:both;
    
}
.about-wrapper .left{
     
float:left;
width:50%;
    
}

.about-wrapper .right{
     
float:right;
width:50%;
    
}
.about-wrapper li::before{
    content:'\2713';
    color:#e63946;
    font-weight: bold;
    padding-right:1rem;

}

/*....................................................................................................... */


/*............................  count styling ..........................*/

.counts{

    margin-top:3rem;
}
.count-item{
    
    float:left;
    width:25%;
    text-align: center;
}
.counts::after{
    content:"";
    display:block;
    clear :both;

}
.count-item span{
    font-size:3rem;
    font-weight: 700;
    color: #e63946;
}
.count-item p{
    font-weight:700;
    color:#362f2f;
    font-size:1.8rem;
}

/*................................. cta banner........................ */
.cta-banner{
   background: linear-gradient(25deg,#2e5b5e,#285a56 50%);
   color:#c2b6b8;
   padding :1rem;
   box-shadow:5px 5px 10px #362f2f;
   margin-top:3rem;
}
.cta-banner-left{
    width:60%;
    float:left
}
.cta-banner-right{
    width:40%;
    float:right;
    text-align: right;
}
.cta-banner::after{
    content:"";
    display:block;
    clear:both;
}
.cta-line{
    font-weight:700;
    font-size:2rem;
    margin-top:1.5rem;
}
.btn-cta{
    text-align: center;
    display:inline-block;
    font-weight: 700;
    font-size: 3rem;
    text-transform: uppercase;
     border: 4px solid rgb(209, 198, 198); 
    padding:0.3rem 2.5em;
    letter-spacing: 0.5rem;
    color: #d1caca;

} 

/*....................................... contact page styling.................................................. */

.contact-form{
    padding:5rem 0;
    background-color: #f7f7f7;

/* height:830px;  <--- NO.................. */ 

}
.form-wrapper .company-address i{
 display:inline-block;
 margin-right:1rem;
 
}

.form-wrapper .company-address h2{
 display:inline-block;
 margin-right:1rem;
text-transform:uppercase;
}
.form-wrapper ::after{
   content:"";
   display:block;
   clear:both;
}
 .form-wrapper .company-address{
    height:760px;
    width:49%;
    float:left;
background-color: #fff;

padding:1rem;


}

/* ##form styling ## */
.form-wrapper .form{
    height:760px;
    font-size:1.6rem;
  background-color: #fff;
  width:49%;
  float:right;

  padding:1rem;
  
}

.form-wrapper .address-group{
   margin-bottom:3rem;
}
.form-wrapper .company-address img{
   max-width:90%;
    min-height: 40rem;
    object-fit:cover;
    object-position: right;
}
.form h1::after{
    content:"";
    display:block;
    border:3px solid #285a56;
    width:100%;
}
.form-wrapper  .form label{
    display:block;
}
.form-wrapper .form input{
    padding:0.5rem;
    width:100%;
}
.form-wrapper .form .form-group{
    margin-bottom:1.2rem;
}

.form-wrapper .form::after{
    content:"";
    color:#e63946;
}
.form-wrapper .form textarea{
  width:100%;
  height:300px;
  padding:1rem;
}

.form-btn{
    display:block;
    margin:0 auto;
    padding:0.5rem 3rem;
    font-size:1.8rem;
    text-transform:uppercase ;
    background-color: #285a56;
    color:#fff;
    outline:none;
    border:none;
    cursor:pointer;

}






/*.............................................. #Responsive Part#..................................................... */
/*.................................................. media Query............................................................................................ */

@media (max-width:500px){
    html{
        font-size: 50%px;
    }

    .navbar .nav-items,.navbar .logo{
        float:none;
        display:block;
        width:100%;
        text-align: center;
    }

    .header-content .main-heading{
        display:none;
    }

    .row{
        height:auto;
        width:100%;
    }
    .row .img-box,
    .row .text-box
    {
 float:none;
 width:100%;
 text-align: center;
    }

    .feature .box{
        float:none;
        width:100%;
        text-align: center;
        box-shadow:5px 5px 10px rgba(102,102,102,0.521) ;
    }
.feature .box2,
.feature .box3{
    margin-top:7rem;
}
.box-wrapper{
    box-shadow:none;
}

.cta-banner-left,
.cta-banner-right{
    float:none;
    width:100%;
    text-align: center;
}

.form-wrapper .company-address{
    float:none;
    width:100%;
    height:auto;
    margin-bottom:5rem;
}
.form-wrapper .form{
    float:none;
    width:100%;
    height:auto;
}

.form-wrapper::after{
    margin-top: auto;
    background-color: rgb(76, 114, 106);
    color:#f4f4f4;
    padding:2rem;
    text-align: center;
    clear:both;

}
.socialmedia-link{
margin:2rem;
}

}

@media(min-width:501px) and (max-width:768px){
    html{
        font-size: 50%px;
    }

    .navbar .nav-items,.navbar .logo{
        float:none;
        display:block;
        width:100%;
        text-align: center;
    }

    /* .header-content .main-heading{
        display:none;
    } */
p{
    font-size: 1.8rem;
}
    .row{
        height:auto;
        width:100%;
    }
    .row .img-box,
    .row .text-box
    {
 float:none;
 width:100%;
 text-align: center;
    }

    .feature .box{
        float:none;
        width:100%;
        text-align: center;
        box-shadow:5px 5px 10px rgba(102,102,102,0.521) ;
    }
.feature .box2,
.feature .box3{
    margin-top:7rem;
}
.box-wrapper{
    box-shadow:none;
}

.cta-banner-left,
.cta-banner-right{
    float:none;
    width:100%;
    text-align: center;
}

.form-wrapper .company-address{
    float:none;
    width:100%;
    height:auto;
    margin-bottom:5rem;
}
.form-wrapper .form{
    float:none;
    width:100%;
    height:auto;
}

}
@media(min-width:769px) and (max-width:1200px){
    html{
        font-size: 56.25%;
    }

    .row .text-box h2{
        font-size: 2.2rem;
        font-weight:500 ;
    }
}

@media(orientation :landscape) and (max-height:500px){
.header{
    height:90vmax;
}
}