html .w-100 {
  width: auto !important;
} 

header {
  display: flex;
  justify-content: space-between;
  background-image: linear-gradient(to bottom right, #e6f6f0, #b5d2fa);
  padding: 10px 15px;
  position: sticky;
  top: 0px;
  z-index: 10;
}
.menu-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.menu-list span a {
  text-decoration: none;
  color: #484848;
  font-size: 16px;
  font-family: "Poppins", serif;
  font-weight: 500;
  font-style: normal;
}
.menu-list span:hover a {
  color: #106eef;
  cursor: pointer;
}
.btnSigncont {
  display: flex;
  justify-content: center;
  align-items: center;
}
.btnSign {
  font-size: 14px;
  border: none;
  background-color: #106eef;
  padding: 8px 15px;
  border-radius: 20px;
  font-family: "Poppins", serif;
  font-weight: 500;
  font-style: normal;
}
.btnSign a {
  text-decoration: none;
  color: #fefefe;
}
.btnSign:hover {
  background-color: #0b4eaa;
}
.mobile-menuList {
  padding: 30px 0px;
}
.mobile-menuList div {
  margin-bottom: 20px;
}
.mobile-menuList div a {
  text-decoration: none;
  color: #484848;
  font-size: 16px;
  font-family: "Poppins", serif;
  font-weight: 500;
  font-style: normal;
}
.btnSignMobile {
  font-size: 14px;
  border: none;
  background-color: #106eef;
  padding: 8px 15px;
  border-radius: 20px;
  font-family: "Poppins", serif;
  font-weight: 500;
  font-style: normal;
  width: 100%;
}
.btnSignMobile a {
  text-decoration: none;
  color: #fefefe !important;
}
.bi-justify {
display: none;
}
@media screen and (max-width: 992px) {

  header {
    display: flex;
    flex-direction: row; 
    justify-content: space-between;
  }
  
  header div:first-child {
    order: 2; 
  }
  
  header div:last-child {
    order: 1; 
  }
  
  .bi-justify {
    display: inline;
    font-size: 20px;
  }
  .menu-list {
    display: none;
  }
  .btnSigncont {
    display: none;
  }
}
/* Banner section */
.carousel-caption {
  top: 50%;
  transform: translateY(-50%);
  bottom: auto;
}
.banner-title {
  color: #fefefe;
  font-size: 64px;
  font-weight: 700;
  font-family: "Poppins", serif;
  font-style: normal;
}
.banner-subtitle {
  font-size: 20px;
  color: #fefefe;
  font-weight: 700;
  font-family: "Cabin", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.btnBanner {
  background-image: linear-gradient(to bottom right, #02955f, #083778);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  font-family: "Poppins", serif;
  font-style: normal;
}

.btnBanner:hover {
  background-image: linear-gradient(to bottom right, #083778, #02955f);
}
@media screen and (max-width:992px){
    .banner-title {
      
        font-size: 40px;
        
      }
      .banner-subtitle {
        font-size: 20px;
    
      }
}
@media screen and (max-width:776px){
    .banner-title {
      
        font-size: 35px;
        
      }
      .banner-subtitle {
        font-size: 20px;
    
      }
      .btnBanner {
      
        font-size: 16px;
       
        padding: 10px 10px;
        border-radius: 20px;
       
      }
      .contact-subtitle,.contact-title,.form-subtitle,.know-title,.client-title{
        font-size:25px !important
      }
     
}
@media screen and (max-width:576px){
    .banner-title {
        font-size: 25px;
      }
      .banner-subtitle {
        font-size: 18px;
      }
      .btnBanner {
        font-size: 14px;
        padding: 10px 10px;
        border-radius: 20px;
             }
}
@media screen and (max-width:456px){
    .banner-title {
       font-size: 20px  
      }
      .banner-subtitle {
        font-size: 16px;
      }
      .btnBanner {
      
        font-size: 14px;
       
        padding: 10px 10px;
        border-radius: 20px;
       
      }
}

/* modal get in touch */
.modal-dialog {
  max-width: 90% !important;
}
/* .modal-content {
    max-height: 90vh; 
    overflow-y: auto; 
  } */
.modal-header {
  border-bottom: none !important;
}
.contact-container {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: 20px;
  padding: 10px 50px !important;
}
.contact-left div {
  margin-bottom: 20px;
}
.contact-title {
  color: #1a1a1a;
  font-size: 40px;
  font-weight: 600;
  font-family: "Poppins", serif;
  font-style: normal;
}
.contact-subtitle {
  color: #02a66a;
  font-size: 32px;
  font-weight: 500;
  font-family: "Poppins", serif;
  font-style: normal;
}
.contact-desc {
  color: #666666;
  font-size: 20px;
  font-weight: 400;
  font-family: "Cabin", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.contact-mail {
  color: #666666;
  font-size: 20px;
  font-weight: 500;
  font-family: "Cabin", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.contact-mobile {
  color: #666666;
  font-size: 20px;
  font-weight: 500;
  font-family: "Cabin", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.contact-right div {
  margin-bottom: 20px;
}
.form-title {
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 600;
  font-family: "Poppins", serif;
  font-style: normal;
}
.form-subtitle {
  color: #02a66a;
  font-weight: 500;
  font-size: 32px;
  font-family: "Poppins", serif;
  font-style: normal;
}
label {
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 10px;
  font-family: "Cabin", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.bi-person {
  position: absolute;
  left: 5px;
  color: #969696;
  margin-top: 5px;
}
.bi-chat-left-text {
  position: absolute;
  left: 5px;
  color: #969696;
  margin-top: 8px;
}
.bi-envelope {
  position: absolute;
  left: 5px;
  color: #969696;
  justify-content: center;
  margin-top: 5px;
}
.inputField {
  position: relative;
}
.inputField input {
  width: 100%;
  background-color: #f7f7f7;
  padding: 10px;
  border: none;
  border-radius: 10px;
}
textarea {
  resize: none;
  width: 100%;
  background-color: #f7f7f7;
  padding: 10px;
  border: none;
  border-radius: 10px;
}
.inputField input:focus {
  outline: none;
}
textarea:focus {
  outline: none;
}
textarea::placeholder {
  position: absolute;
  left: 25px;
  color: #969696;
  font-size: 14px;
  font-weight: 400;
  font-family: "Cabin", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  justify-content: center;
}
.inputField input::placeholder {
  position: absolute;
  left: 25px;
  color: #969696;
  font-size: 14px;
  font-weight: 400;
  font-family: "Cabin", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  justify-content: center;
}
.btnSignin {
  background-image: linear-gradient(to bottom right, #02955f, #083778);
  border: none;
  width: 100%;
  color: #ffffff;
  padding: 10px;
  border-radius: 10px;
  font-size: 16px;
  font-family: "Poppins", serif;
  font-weight: 500;
  font-style: normal;
}
.btnSignin:hover {
  background-image: linear-gradient(to bottom right, #083778, #02955f);
}
.userName {
  color: #02a66a;
  font-size: 32px;
  font-family: "Poppins", serif;
  font-weight: 500;
  font-style: normal;
}
.signinText {
  color: #1a1a1a;
  font-size: 16px;
  font-family: "Poppins", serif;
  font-weight: 500;
  font-style: normal;
}
.inputField label {
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 400;
  font-family: "Cabin", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
/* about section */
.about-container {
  padding: 50px;
}
.about-subcontainer {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: 30px;
}
.about-content div {
  margin-bottom: 10px;
}
.about-title {
  color: #1a1a1a;
  font-size: 40px;
  font-weight: 600;
  font-family: "Poppins", serif;
  font-style: normal;
}
.about-subtitle {
  color: #02a66a;
  font-size: 32px;
  font-weight: 500;
  font-family: "Poppins", serif;
  font-style: normal;
}
.about-desc {
  color: #666666;
  font-size: 20px;
  font-weight: 400;
  font-family: "Cabin", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.btnGet {
  background-image: linear-gradient(to bottom right, #02955f, #083778);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  font-family: "Poppins", serif;
  font-style: normal;
}
.btnGet:hover {
  background-image: linear-gradient(to bottom right, #083778, #02955f);
}
.aboutImg {
  position: relative;
  width: 100%;
  height: 100%;
}
.front {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.front img {
  position: absolute;
  object-fit: cover;
  max-width: 100%;
  height: auto;
  left:90px;
  top:10px
  /* display: block; */
}
.back {
  position: absolute;
  right: 0;
  transition: transform 0.5s ease-in-out, opacity 0.3s ease-in-out;
  z-index: 0;
  opacity: 0;
}

.aboutImg:hover .back {
  transform: translate(40px, -70px);
  opacity: 1;
}
@media screen and (max-width: 1024px) {
  .back img {
    opacity: 0;
  }
}
@media screen and (max-width: 876px) {
  .about-subcontainer {
    display: grid;
    grid-template-columns: 12fr;
  }
  .aboutImg {
    position: static;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
  }
  .front {
    position: static;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: center;
  }
  .front img {
    position: static;
    object-fit: cover;
    max-width: 100%;
    height: auto;
  }
  .back {
    position: static;
    right: 0;
    transition: transform 0.5s ease-in-out, opacity 0.3s ease-in-out;
    z-index: 0;
    opacity: 0;
  }
  .btnGetCont{
    display: flex;
    justify-content: center;
  }

}

/* know more about us */
.know-contaner {
  padding: 50px;
}
.know-title {
  color: #1a1a1a;
  font-size: 40px;
  font-weight: 600;
  font-family: "Poppins", serif;
  font-style: normal;
}
.know-cards-part {
  display: grid;
  grid-template-columns: repeat(4, 3fr);
  gap: 20px;
  margin-top: 30px;
}
.know-card1 {
  background: url("/media/home/team.png");
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 20px;
  width: auto;
  height: 300px;
  position: relative;
  overflow: hidden;
}
.know-card2 {
  background: url("/media/home/vision.png");
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 20px;
  width: auto;
  height: 300px;
  position: relative;
  overflow: hidden;
}
.know-card3 {
  background: url("/media/home/mission.png");
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 20px;
  width: auto;
  height: 300px;
  position: relative;
  overflow: hidden;
}
.know-card4 {
  background: url("/media/home/goal.png");
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 20px;
  width: auto;
  height: 300px;
  position: relative;
  overflow: hidden;
}
.know-card-title {
  position: absolute;
  bottom: 10px;
  left: 30%;
  color: #fefefe;
  font-size: 20px;
  font-weight: 600;
  font-family: "Poppins", serif;
  font-style: normal;
}
.know-hover {
  border-radius: 20px;
  background-color: #b1e3d1;
  position: absolute;
  top: -100%;
  left: 5%;
  width: 90%;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
  font-weight: bold;
  transition: top 0.4s ease-in-out;
}

.know-card1:hover .know-hover {
  top: 15px;
}
.know-card1:hover .know-card-title {
  opacity: 0;
}
.know-card2:hover .know-hover {
  top: 15px;
}
.know-card2:hover .know-card-title {
  opacity: 0;
}
.know-card3:hover .know-hover {
  top: 15px;
}
.know-card3:hover .know-card-title {
  opacity: 0;
}
.know-card4:hover .know-hover {
  top: 15px;
}
.know-card4:hover .know-card-title {
  opacity: 0;
}
.know-hover-content div {
  margin-bottom: 10px;
  text-align: center;
}
.hover-title {
  color: #1a1a1a;
  font-size: 20px;
  font-weight: 600;
  font-family: "Poppins", serif;
  font-style: normal;
}
.hover-subtitle {
  font-size: 16px;
  font-weight: 400;
  color: #666666;
  font-family: "Cabin", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
@media screen and (max-width:992px){
    .know-cards-part {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: 20px;
  margin-top: 30px;
}
}
@media screen and (max-width:756px){
    .know-cards-part {
  display: grid;
  grid-template-columns: 12fr;
  gap: 30px;
  margin-top: 30px;
}
.why-grid{
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr;
  margin:30px
}
}
@media screen and (max-width:456px){
    .know-contaner {
        padding: 20px;
      }

}
/* services section */
.service-container {
  padding: 50px;
}
.service-title {
  color: #1a1a1a;
  font-size: 40px;
  font-weight: 600;
  font-family: "Poppins", serif;
  font-style: normal;
}
.service-subtitle {
  color: #02a66a;
  font-size: 32px;
  font-weight: 500;
  font-family: "Poppins", serif;
  font-style: normal;
}
.service-viewall a {
  text-decoration: none;
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 500;
  font-family: "Poppins", serif;
  font-style: normal;
}
.service-viewall:hover a {
  color: #106eef;
  text-decoration: underline;
}
.service-card-part {
  display: grid;
  grid-template-columns: repeat(3, 4fr);
  gap: 20px;
  margin-top: 20px;
}
.service-card {
  display: grid;
  grid-template-columns: 6fr 6fr;
  background-color: #e7f1fd;
  border-radius: 20px;
  

 
}
.service-card-content {
  padding: 10px;
}
.service-card-content div {
  margin-bottom: 10px;
}
.service-card-title {
  color: #1a1a1a;
  font-size: 20px;
  font-weight: 600;
  font-family: "Poppins", serif;
  font-style: normal;
}
.service-card-subtitle {
  color: #666666;
  font-size: 16px;
  font-weight: 400;
  font-family: "Cabin", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.service-card-read a {
  text-decoration: none;
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 500;
  font-family: "Poppins", serif;
  font-style: normal;
}
.service-card-read:hover {
  color: #106eef;
  text-decoration: underline;
  cursor: pointer;
}
.service-card-read:hover a {
  color: #106eef;
}
.serviceImg {
  width: 100%;
  height: 100%;
}
.serviceImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
 
}
@media screen and (max-width:992px){
    .service-card-part {
        display: grid;
        grid-template-columns: 6fr 6fr;
        gap: 20px;
        margin-top: 20px;
      }
}
@media screen and (max-width:756px){
    .service-card-part {
        display: grid;
        grid-template-columns: 12fr;
        gap: 20px;
        margin-top: 20px;
      }
      .service-card {
        display: grid;
        grid-template-columns: 12fr;
        background-color: #e7f1fd;
        border-radius: 20px;
        width: 100%;
        
      
       
      }
    .serviceImg{
        display: none;
    }
    .why-subgrid-title{
      font-size:38px !important
    }
}
@media screen and (max-width:576px){
    .service-container {
        padding: 30px;
      }
  
}
@media screen and (max-width:456px){
    .service-container {
        padding: 20px;
      }
  
}
/* take the first step */
.take-container {
  margin-top: 50px;
  background-image: url("/media/home/takeImg.png");
}
.take-subcontainer {
  display: grid;
  grid-template-columns: 6fr 6fr;
  padding: 50px;
}
.take-title {
  color: #fefefe;
  font-size: 32px;
  font-weight: 600;
  font-family: "Poppins", serif;
  font-style: normal;
}

.take-content div {
  margin-bottom: 20px;
}
@media screen and (max-width:992px){
    .take-subcontainer {
        display: grid;
        grid-template-columns: 12fr;
        padding: 50px;
        
      }
}
/* why container */
.why-container {
  padding: 50px;
}
.why-subcontainer {
  display: grid;
  grid-template-columns: 6fr 6fr;
}
.why-content div {
  margin-bottom: 20px;
}
.why-title {
  color: #1a1a1a;
  font-size: 40px;
  font-weight: 600;
  font-family: "Poppins", serif;
  font-style: normal;
}
.why-subtitle {
  color: #02a66a;
  font-size: 32px;
  font-weight: 500;
  font-family: "Poppins", serif;
  font-style: normal;
}
.why-desc {
  font-size: 20px;
  font-weight: 400;
  font-family: "Cabin", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.why-grid {
  display: grid;
  grid-template-columns: 6fr 6fr;
  margin-top: 20px;
}
.why-subgrid-title {
  color: #1a1a1a;
  font-size: 48px;
  font-weight: 600;
  font-family: "Poppins", serif;
  font-style: normal;
}
.why-subgrid-desc {
  color: #666666;
  font-size: 24px;
  font-weight: 500;
  font-family: "Cabin", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
/* .whyImg{
    width: 100%;
    height: 100%;
}
.whyImg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
} */
 @media screen and (max-width:876px){
    .why-subcontainer {
        display: grid;
        grid-template-columns: 12fr;
      }

 }
/* client section */
.client-container {
  background-image: url("../images/home/client-bg.png");
  background-size: cover;
  padding: 50px;
  margin-bottom: 50px;
}
.client-title {
  color: #000000;
  font-size: 40px;
  font-weight: 600;
  font-family: "Poppins", serif;
  font-style: normal;
  text-align: center;
  margin-bottom: 30px;
}
.client-list {
  display: grid;
  grid-template-columns: repeat(4, 3fr);
  gap: 40px;
  justify-content: center;
  align-items: center;
  justify-items: center;
}
.clientImg{
    width: 70%;
    height: 100%;
    
  }
  .clientImg img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

@media screen and (max-width:756px){
    .client-list {
        display: grid;
        grid-template-columns: repeat(3,4fr);
        gap: 40px;
        justify-content: center;
        align-items: center;
        justify-items: center;
      }
}
@media screen and (max-width:656px){
    .client-list {
        display: grid;
        grid-template-columns: repeat(3,4fr);
        gap: 40px;
        justify-content: center;
        align-items: center;
        justify-items: center;
      }
      .clientImg{
        width: 80%;
        height: 100%;
      }
      .clientImg img{
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
}
@media screen and (max-width:456px){
    .client-list {
        display: grid;
        grid-template-columns: repeat(2,6fr);
        gap: 40px;
        justify-content: center;
        align-items: center;
        justify-items: center;
      }
    .clientImg{
        width: 100%;
        height: 100%;
      }
      .clientImg img{
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

}
/* contact section */
.contact-container {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 30px;
  padding: 50px;
}
.contact-left div {
  margin-bottom: 20px;
}
.contact-title {
  color: #1a1a1a;
  font-size: 40px;
  font-weight: 600;
  font-family: "Poppins", serif;
  font-style: normal;
}
.contact-subtitle {
  color: #02a66a;
  font-size: 32px;
  font-weight: 500;
  font-family: "Poppins", serif;
  font-style: normal;
}
.contact-desc {
  color: #666666;
  font-size: 20px;
  font-weight: 400;
  font-family: "Cabin", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.contact-mail {
  color: #666666;
  font-size: 20px;
  font-weight: 500;
  font-family: "Cabin", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.contact-mobile {
  color: #666666;
  font-size: 20px;
  font-weight: 500;
  font-family: "Cabin", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.contact-right div {
  margin-bottom: 15px;
}
.form-title {
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 600;
  font-family: "Poppins", serif;
  font-style: normal;
}
.form-subtitle {
  color: #02a66a;
  font-weight: 500;
  font-size: 32px;
  font-family: "Poppins", serif;
  font-style: normal;
}
label {
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 10px;
  font-family: "Cabin", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.bi-person {
  position: absolute;
  left: 5px;
  color: #969696;
  margin-top: 5px;
}
.bi-chat-left-text {
  position: absolute;
  left: 5px;
  color: #969696;
  margin-top: 8px;
}
.bi-envelope {
  position: absolute;
  left: 5px;
  color: #969696;
  justify-content: center;
  margin-top: 5px;
}
.inputField {
  position: relative;
}
.inputField input {
  width: 100%;
  background-color: #f7f7f7;
  padding: 10px;
  border: none;
  border-radius: 10px;
}
textarea {
  resize: none;
  width: 100%;
  background-color: #f7f7f7;
  padding: 10px;
  border: none;
  border-radius: 10px;
}
.inputField input:focus {
  outline: none;
}
textarea:focus {
  outline: none;
}
textarea::placeholder {
  position: absolute;
  left: 25px;
  color: #969696;
  font-size: 14px;
  font-weight: 400;
  font-family: "Cabin", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  justify-content: center;
}
.inputField input::placeholder {
  position: absolute;
  left: 25px;
  color: #969696;
  font-size: 14px;
  font-weight: 400;
  font-family: "Cabin", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  justify-content: center;
}
.btnSignin {
  background-image: linear-gradient(to bottom right, #02955f, #083778);
  border: none;
  width: 100%;
  color: #ffffff;
  padding: 10px;
  border-radius: 10px;
  font-size: 16px;
  font-family: "Poppins", serif;
  font-weight: 500;
  font-style: normal;
}
.btnSignin:hover {
  background-image: linear-gradient(to bottom right, #083778, #02955f);
}
.userName {
  color: #02a66a;
  font-size: 32px;
  font-family: "Poppins", serif;
  font-weight: 500;
  font-style: normal;
}
.signinText {
  color: #1a1a1a;
  font-size: 16px;
  font-family: "Poppins", serif;
  font-weight: 500;
  font-style: normal;
}
.inputField label {
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 400;
  font-family: "Cabin", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}


/* footer section */
.footer-container {
  background-color: #e6f6f0;
  padding: 50px;
}
.footer-subcontainer {
  display: grid;
  grid-template-columns: repeat(4, 3fr);
  gap: 20px;
  justify-content: center;
  align-items: left;
  justify-items: center;
}
.col-title {
  color: #1a1a1a !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  font-family: "Poppins", serif;
  font-style: normal;
}

.col-desc {
  color: #666666 !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  font-family: "Cabin", serif !important;
  font-optical-sizing: auto !important;
  font-style: normal !important;
  font-variation-settings: "wdth" 100 !important;
  cursor: default !important;
}
.col div {
  margin-bottom: 15px;
  color: #666666;
  font-size: 16px;
  font-weight: 500;
  font-family: "Poppins", serif;
  font-style: normal;
}
.col div:hover {
  color: #000000;
  cursor: pointer;
}
.col-icons span {
  margin-right: 15px;
  color: #ffffff;
  background-color: #106eef;
  padding: 5px 8px;
  border-radius: 15px;
  cursor: pointer;
}
.footerEmail input {
  padding: 8px 15px;
  border-radius: 10px;
  background-color: transparent;
  border: 1px solid #02a66a;
}
.footerEmail input:focus {
  outline: none;
}
.footerEmail input::placeholder {
  color: #969696;
  font-size: 14px;
  font-weight: 400;
  font-family: "Cabin", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.btnSubscribe {
  background-image: linear-gradient(to bottom right, #02955f, #083778);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  border: none;
  padding: 8px 20px;
  border-radius: 10px;
  font-family: "Poppins", serif;
  font-style: normal;
  width: 100%;
}
.btnSubscribe:hover {
  background-image: linear-gradient(to bottom right, #083778, #02955f);
}
@media screen and (max-width:856px){
    .footer-subcontainer {
        display: grid;
        grid-template-columns: repeat(2,6fr);
        gap: 20px;
        justify-content: left;
        align-items: left;
        justify-items: left;
      }
      .contact-container {
        display: grid;
        grid-template-columns: 12fr;
        gap: 30px;
        padding: 50px;
      }
    .front img{
      left:0
    }
}
@media screen and (max-width:576px){
    .footer-subcontainer {
        display: grid;
        grid-template-columns: 12fr;
        gap: 20px;
        justify-content: left;
        align-items: left;
        justify-items: left;
      }
    
}