@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap');

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:active,
:hover,
:focus {
  outline: 0 !important;
  outline-offset: 0;
}


a,
a:hover {
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
}


/*===== Variable Define =====*/
:root {
  --primary-color: #96b1a8;
  --third-color: #21333e;
  --four-color: #b7b4ad;
  --five-color:  #93cfbf;
  --six-color: #eeebe4;
  --gray-color: #e2e2e2;
  --white-color: #fff;
  --primary-font: 'Montserrat', sans-serif;
  --secondry-font: 'Poppins', sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--secondry-font);
  font-size: 100%;
  font-weight: 400;
  overflow-x: hidden;
}


/*
==========================================
   Custom CSS Design
==========================================
*/
section{
  overflow: hidden;
}

h1 {
  font-size: 4.5rem;
  font-weight: 900;
  margin-bottom: 2rem;
  color: var(--six-color);
  text-transform: capitalize;
}

h1 span {
  color: var(--five-color);
}

h2 {
  font-weight: 900;
  padding: 1rem 0;
  font-size: 3rem;
  line-height: 1.2;
  text-transform: capitalize;
  color: var(--third-color);
}
h4 {
  font-weight: 800;
  padding: 1rem 0;
  font-size: 1.3rem;
  line-height: 1.2;
  text-transform: capitalize;
  color: var(--third-color);
}

h5 {
  color: var(--six-color);
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

p {
  font-size: 1rem;
  color: var(--gray-color);
  font-family: var(--primary-font);
  font-weight: 500;
  line-height: 1.6;
  margin-top: 1rem;
}

.main-btn {
  position: relative;
  z-index: 2;
  padding: 0.625rem 1.563rem;
  background-color: var(--six-color);
  border-radius: 0.25rem;
  border: 0.063rem solid;
  border-color: var(--six-color);
  color: var(--third-color);
  font-weight: 500;
  -webkit-transition: all .4s ease-out 0s;
  -o-transition: all .4s ease-out 0s;
  -moz-transition: all .4s ease-out 0s;
  transition: all .4s ease-out 0s;
}

.main-btn:hover {
  background-color: var(--five-color);
  color: var(--white-color);
  border-color: var(--five-color);

}

.heading h5{
  color: var(--five-color);
}

/*
==========================================
   Header Design
==========================================
*/

/* Top Header */
.navbar.top{
  position:relative;
  z-index: 5;
  height:3.125rem;
  padding:0rem;
  background:var(--third-color);
}
.navbar.top ul li a{
  font-size: 0.85rem;
  font-weight: 400;
  color:var(--six-color);
  font-family: var(--primary-font);
}
.navbar.top ul li a:hover{
  color:var(--four-color);
} 

/* main Navigation */
.navigation-wrap{
  position:fixed;
  padding:1rem 0;
  width:100%;
  top:3.125rem;
  left:0;
  z-index:1000;
  -webkit-transition:all 0.3s ease-out;
  transition:all 0.3s ease-out;
}
.navigation-wrap .nav-item{
  transition:all 200ms linear;
  padding:0 0.4375rem;
} 
.navigation-wrap .nav-link{
  font-size: 1rem;
  font-weight: 500;
  padding-top:1rem;
  font-family: var(--primary-font);
  text-transform: capitalize;
  color:var(--white-color);
}
.navigation-wrap .nav-link.active,
.navigation-wrap .nav-link:hover{
  color:var(--five-color);
}

/* Change navbar styling on scroll */
.navigation-wrap.scroll-on{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background:var(--third-color);
  box-shadow: 0 0.125rem 1.75rem 0 rgba(0,0,0,0.09);
  transition:all .15s ease-in-out 0s; 
}

/*
==========================================
   Top Section Design
==========================================
*/
.top-wrapper{
  background-image:url('../images/bg-img/bg-1.png');
  width:100%;
  height:100%;
  background-size: cover;
  background-position: center center;
  opacity:1;
  overflow: hidden;
}
.top-wrapper .left-wrapper{
  padding-top:7.25rem;
}
.top-wrapper .left-wrapper h1{
  width:79%;
}
.top-wrapper .right-wrapper{
  padding-top:5rem;
}
.top-wrapper .right-wrapper img{
  width:20rem;
  height:auto;
}

 /*
==========================================
  about Section Design
==========================================
*/
.wrapper{
  padding:5rem 0;
}
.about .about-img::before{
  position:absolute;
  content:'';
  top:0;
  left:0;
  width:1.5rem;
  height:27.5rem;
  background:var(--five-color);
}
.about .about-img{
  position: relative;
  width:100%;
  height:auto;
  padding-left:4rem;
}
.about .right-wrapper{
  padding-left:4rem;
}
.about .right-wrapper h5{
  color:var(--primary-color);
}
.about .right-wrapper p{
  color:var(--third-color);
}
.about .right-wrapper .main-btn{
  color:var(--white-color);
  background:var(--five-color);
  border-color: var(--five-color);
}
.about .right-wrapper .main-btn:hover{
  color:var(--white-color);
  background-color: var(--primary-color);
  border-color:var(--primary-color);
}

/*
==========================================
   our approach Section Design
==========================================
*/
.approach{
  background-color:var(--six-color);
}
.approach-cards{
  padding-top:3.125rem;
}
.approach-cards .card{
  display:inline-block;
  position:relative;
  width:100%;
  margin:1.875rem 0;
  border-radius: 0.375rem;
  background:var(--white-color);
  border:none;
  box-shadow: -0.2349rem 1.6711rem 2.6875rem 0 rgb(42 57 63 / 15%);
  transition:all .3s ease;
} 
.approach-cards .card:hover{
  -webkit-transform:translateY(-1.25rem);
  transform:translateY(-1.25rem);
  -ms-box-shadow:0rem 0rem 2.4375rem 0.125 rgba(236,236,236,1);
  -o-box-shadow:0rem 0rem 2.4375rem 0.125 rgba(236,236,236,1);
}
.approach-cards .card .card-image{
  height:50%;
  position:relative;
  overflow:hidden;
  margin-left:0.9375rem;
  margin-right:0.9375rem;
  margin-top:-1.875rem;
  border-radius: 0.375rem;
  box-shadow: 0 0.5625rem 1.875rem -0.625rem rgba(221,218,218,0.5);
}
.approach-cards .card .content{
  padding:0.9375rem 1rem;
  text-align: center;
}
.approach-cards .card-description{
  color:var(--third-color);
  text-align: center;
}
/*
==========================================
  blog Section Design
==========================================
*/
.blog{
  background:var(--white-color);
  box-shadow: 0 0 2.4375rem 0.125rem rgba(236,236,236,1);
}
.slider-wrapper{
  background:var(--six-color);
}
.blog .slider-wrapper .left-wrapper{
  padding:2rem;
  text-align: right;
}
.blog .slider-wrapper .left-wrapper h5{
  color:var(--five-color);
}
.blog .slider-wrapper .left-wrapper p{
  color:var(--four-color);
}
.blog .slider-wrapper .left-wrapper .main-btn{
  background:var(--five-color);
  color:var(--white-color);
}
.blog-img{
  overflow:hidden;
}
.blog-img img{
  width:50rem;
  height:31.25rem;
  object-fit: cover;
  overflow:hidden;
}
.slider-wrapper .common{
  width:calc(100% / 2 - 1.25rem);
  height:auto;
}

/*
==========================================
   contact Section Design
==========================================
*/
.contact{
  background:var(--six-color);
}
.contact .our-con-info li i{
  color:var(--third-color);
  font-size: 2rem;
}
.contact .our-con-info li p a{
  color:var(--third-color);
  font-size: 1rem;
}
.contact .form-control{
  height:3.75rem;
  padding:0.375rem 1.1875rem;
  border:none;
  font-size:1.1875rem;
  box-shadow: 0 0.1875rem 1.25rem 0 rgb(0 0 0 / 12%);
}
.contact .textarea{
  width:100%;
  border-radius: 0.25rem;
  padding:0.75rem 1.1875rem;
  border:none;
  font-size: 1.1875rem;
  margin-top:0.3125rem;
  box-shadow: 0 0.1875rem 1.25rem 0 rgb(0 0 0 / 12%);
}
.contact .main-btn{
  background:var(--five-color);
  padding:1rem;
}
 

/*
==========================================
   Footer Section Design
==========================================
*/
 
.copyright{
  background:var(--third-color);
}
.copyright p{
  color:var(--four-color);
}
.copyright a{
  color:var(--five-color);
}


/*=================
Responsiv Design
================*/



@media (max-width:1030px) {

    /* top header */
    .navbar.top ul li a{
        font-size: 0.7rem;
    }
    .main-btn{
        position:relative;
        z-index: 2;
        padding:0.525rem 1rem;
        background:var(--primary-color);
        font-weight: 500;
        font-size: 0.875rem;
    } 
    
    /* top banner */
    .top-wrapper .left-wrapper{
        padding-top:6rem;
    }
    .top-wrapper .left-wrapper h1{
        width:100%;
    }
     

    /* about section */
    .about .about-img::before{
        height:22.8125rem;
    }
    .about .right-wrapper{
        padding-left:1rem;
    } 
    h2{
        font-size: 2.9rem;
    }

    /* our approach */
     
}

@media (max-width: 991px) {

    /* navigation */
    .navigation-wrap .navbar-toggler{
        margin-right:35px; 
    }
    .navbar-toggler-icon{
        color:var(--white-color);
    }

    /* top top-wrapper */
    .top-wrapper{
        text-align: center;
    }
    .top-wrapper .right-wrapper img{
        width:15rem;
    }
    h1{
        font-size: 2.8rem;
    }
     

    /* about section */
    .about .about-img::before{
        height:30.5rem;
    }
     

    /* blog section */
    .slider-wrapper .common{
        width:100%;
    }
    .slider-wrapper{
        flex-direction: column-reverse;
    }
    .blog-img img{
        height:25rem;
    }
     


}

@media (max-width: 767px) {

    /* Custom CSS */
    .mob-pb-0{
        padding-bottom:0px !important;
    }
    .mob-pt-0{
        padding-top:0px !important;
    }

    /* navigation */ 
    .navbar-collapse{
        text-align: center;
    }
    .navigation-wrap .nav-item{
        padding-top:1.25rem;
    }
    .navigation-wrap .nav-link{
        font-size: 1rem;
        font-weight: 700;
        justify-content: center;
    }
    .navigation-wrap .navbar-toggler{
        margin-right:10px;
        padding:0;
    }
    .navigation-wrap .navbar-brand img{
        max-width:75%;
    }
    .navigation-wrap{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        padding:0.7rem;
        -webkit-transition:all .15s ease-in-out 0s !important;
        transition:all .15s ease-in-out 0s !important; 
    }

    /* top top-wrapper */
    .top-wrapper .right-wrapper{
        text-align: center;
    }
    .top-wrapper .right-wrapper img{
        width:50%;
        margin:auto;
    }

    /* btn design */
    .main-btn,
    .btn-2{
        min-width:11.25rem !important;
        padding:0.725rem 2rem !important;
        font-size: 0.85rem;
        margin-left:0 !important;
        margin-top:2rem;
        text-align: center;
        align-items: center;
    }
     

    /* top banner */
    .top-wrapper .left-wrapper{
        padding-top:6.25rem;
        text-align: center;
    }
    h1{
        font-size: 2.5rem !important;
    }
    h2{
        font-size: 2rem;
    }


    /* about section */
    .about .about-img{
        padding-left:3rem;
        padding-bottom: 3rem;
    }
    .about .about-img::before{
        height:15.5rem;
    }
     

    /* our approach */
     

    /*== Blog == */
    .blog .slider-wrapper .left-wrapper{
        text-align: center;
    }
     
}