/* Import the font */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Outfit:wght@100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
  font-family: 'avenir'; /* Custom name for the font */
  src: url('../fonts//avenir-font/AvenirLTStd-Medium.otf') format('truetype'); /* Path to the font file */
}

@font-face {
  font-family: 'avenirlite'; /* Custom name for the font */
  src: url('../fonts//avenir-font/AvenirLTStd-Light.otf') format('truetype'); /* Path to the font file */
}


*{
    padding: 0;
    margin: 0;
}

html,body{
    width: 100%;
    height: 100%;
    font-family: avenir;
}

.header{
width: 100%;
height: 500px;
background-image: url('../images/Rectangle\ 3.svg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

.header .con{
    width: 100%;
    margin: auto;
}

.header .con .left{
    width: 51%;
height: 500px;
border-radius: 0px 0px 200px 0px;
background: #04204A;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 4.7rem;

}

.header .con h4{
    width:90%;
height: 140px;
top: 183.59px;
left: 100px;
gap: 0px;
padding-left: 50px;
opacity: 0px;
font-family: Avenir;
font-size: 55px;
font-weight: 800;
text-align: left;
padding-right: 10px;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: #FFFFFF;
}



.header .con p{
    width: 90%;
height: 80px;
top: 454.07px;
left: 100px;
gap: 0px;
opacity: 0px;
font-family: Avenirlite;
font-size: 20px;
font-weight: 400;
line-height: 40px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: #FFFFFF;
padding-left: 50px;
padding-right: 10px;
}


.section-1{
    
width: 100%;
height: 1448.45px;
background: #F8F8F8;
display: flex;
justify-content: center;
align-items: center;


}

.section-1-con{
    width: 80%;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}


.section-1-con .top{
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.section-1-con .top h2{ 

    font-family: Avenir;
font-size: 50px;
font-weight: 800;
line-height: 60px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: #1C1C1C;

}

.section-1-con .top p{
    font-family: Avenirlite;
font-size: 20px;
font-weight: 400;
line-height: 40px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: #1C1C1C;
color: #1C1C1C;

}


.section-1-con .bottom{
    display: flex;
    flex-direction: column;
    gap: 4rem;

}


.section-1-con .bottom h2{
    font-family: Avenir;
font-size: 45px;
font-weight: 800;
line-height: 30px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: #1C1C1C;

}


.section-1-con .bottom #zip{
    width: 100%;
height: 70px;
border-radius: 10px;
border: 1px solid #00000040;
text-indent: 2rem;
font-family: Avenir;
font-size: 20px;
line-height: 30px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: #000000;

}

 #sec1-cards-con{
    display: flex;
    justify-content: space-between;
    gap: 9px;
 }


#sec1-cards-con .card{
    width: 32%;
height: 430.87px;
border-radius: 10px;
border: 1px solid #1E9948;
background: #FFFFFF;
 display: flex;
  flex-direction: column; /* Vertical layout */
  gap: 2rem;
  align-items: center; /* Center items horizontally */
  
  border: 1px solid #ccc; /* Visualize container */
box-sizing: border-box;
padding: 2rem 1rem;
border: 1px solid #1E9948;
box-sizing: border-box;
}

.card input::placeholder {
  font-size: 20px;
  font-weight: 500;
  font-family: Avenir;
}

#sec1-cards-con .card h4{
    font-family: Avenir;
font-size: 45px;
font-weight: 800;
line-height: 50px;
text-align: center;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: #1C1C1C;
width: 80%;
height: 50%;

}

#sec1-cards-con .card input{
    width: 80%;
height: 70px;

border-radius: 10px;
border: 1px solid #00000040;
text-indent: 15px;
}

#sec1-cards-con .card button{
    width:80%;
height:69px;
padding: 15px 35px 15px 35px;
background-color: #1E9948;
color: #FFFFFF;
outline: none;
border: none;
border-radius: 10px;
font-family: Avenir;
font-size: 25px;
font-weight: 500;
line-height: 38.75px;
transition: all 0.3s ease-in-out;
cursor: pointer;

}


/* section 2  start*/


#section-2{
width:100%;
height:1400px;
display: flex;
align-items: center;
justify-content: center;

}

#sec-2-con{

width: 80%;
height: 1280.92px;
display: flex;
flex-direction: column;
gap: 4rem;

}

#sec-2-con #sec-2-heading{ 
font-family: Avenir;
font-size: 50px;
font-weight: 800;
line-height: 60px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: #1C1C1C;
margin-top: 40px;
}



#sec-2-con #sec-2-p{
    font-family: Avenirlite;
font-size: 20px;
font-weight: 400;
line-height: 40px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: #1C1C1C;
}


 #sec-2-card-con{
    display: flex;
    flex-wrap: wrap;
    gap: 3rem 15px;
 }

#sec-2-card-con #sec-2-card {
    width: 30%;
height: 87.14px;
border-radius: 10px;
border: 1px solid #1E9948;
display: flex;
align-items: center;
gap: 20px;
padding-left: 20px;
}

.last-card{
  margin-bottom: 0px !important;
}

#sec-2-card-con #sec-2-card p{
    font-family: Avenir;
font-size: 20px;
font-weight: 400;
line-height: 30px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;

}

#sec-2-card-con #sec-2-card img{
    width: 27.64px;
height: 27.64px;

}


#sec-2-con p{
        font-family: Avenirlite;
font-size: 20px;
font-weight: 400;
line-height: 40px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: #1C1C1C;
}

#sec-2-con button{
    width:219px;
height:69px;
top: 3152.06px;
left: 235px;
padding: 15px 35px 15px 35px;
outline: none;
border: none;
border-radius: 10px;
background: #1E9948;
font-family: Avenir;
font-size: 25px;
font-weight: 500;
line-height: 38.75px;
color: #FFFFFF;
transition: all 0.3s ease-in-out;
cursor: pointer;
}

#sec-2-con button:hover {
  background: #18853c; /* Slightly darker green */
  transform: scale(1.05); /* Slight zoom effect */
  box-shadow: 0 8px 15px rgba(30, 153, 72, 0.3); /* Glow effect */
}

.card button:hover {
  background: #157434; /* Slightly darker green */
  transform: scale(1.05); /* Slight zoom effect */
  box-shadow: 0 8px 15px rgba(30, 153, 72, 0.3); /* Glow effect */
}


/* footer  */

#footer{
    width:100%;
height: 689.72px;
background: #04204A;

}

#footer-con{
    width: 80%;
    height: 85%;
    margin: auto;
}

#f-top{
    width: 75%;
    display: flex;
    justify-content: space-between;
    height: 90%;
    align-items: center;
}


#f-top .quick{
    display: flex;
    flex-direction: column;
    gap: 4rem;
    height: 60%;
}

#f-top .quick p{
    font-family: Inter;
font-size: 20px;
font-weight: 400;
line-height: 24.2px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color:#1E9948;

}

#f-top .quick .links{
    display: flex;
    flex-direction: column;
    gap: 2rem;

}

#f-top .quick .links a{
    font-family: Inter;
font-size: 18px;
font-weight: 200;
line-height: 24.2px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color:#ffffffb2;
text-decoration: none;

}



#f-top .social{
    display: flex;
    flex-direction: column;
    gap: 4rem;
        height: 60%;
}

#f-top .social p{
    font-family: Inter;
font-size: 20px;
font-weight: 400;
line-height: 24.2px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color:#1E9948;

}

#f-top .social .links{
    display: flex;
    gap: 1rem;

}

#f-top .quick .links a{
    font-family: Inter;
font-size: 18px;
font-weight: 100;
line-height: 24.2px;
text-align: left;
color:#FFFFFF;
text-decoration: none;

}








#f-b{
    border-top: 1px solid #FFFFFF;
   display: flex;
   align-items: center;
height: 15%;
}

#f-b #f-b-con{
    width: 80%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

#f-b .left{
    font-family: Inter;
font-size: 16px;
font-weight: 200;
line-height: 19.36px;

color: #FFFFFF;
}

#f-b-con .right{
    display: flex;
    gap: 20px;
}

#f-b-con .right a{
    text-decoration: none;
    color: #FFFFFF;
    font-family: Inter;
font-size: 16px;
font-weight: 200;
line-height: 19.36px;

}










/* Base Styles (remains the same as provided) */

/* Add Media Queries for Responsiveness */
@media screen and (max-width: 1200px) {
  /* Adjust for large tablets or smaller desktops */
  .header{
    background: #CFD4D8;
height: 100vh;
background-image: url('../images/Rectangle\ 3\ \(1\).svg');
background-repeat: no-repeat;
background-size: 99vw 60vh;
background-position: 10px 620px;

  }
  .header .con{
    width: 100%;
    height: 100%;
    
       }
       
   .header .con .left {
    width: 95%;
    height: 41%;
    gap: 10px;

  } 

  .header .con h4 {
    font-size: 50px;
    line-height: 60px;
  }

  .header .con p {
    font-size: 20px;
    line-height: 30px;
  }

.section-1{
height: 2700px;
}
  .section-1-con {
    flex-direction: column;
    gap: 4rem;
   }

  #sec1-cards-con {
    flex-wrap: wrap;
    gap: 2rem;
  }

  #sec1-cards-con .card {
    width: 100%;
  }

#section-2{
    height: 2200px;
    align-items: start;
}
  #sec-2-card-con #sec-2-card {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {

  .header{
    background: #CFD4D8;
height: 100vh;
background-image: url('../images/Rectangle\ 3\ \(1\).svg');
background-repeat: no-repeat;
background-size: 99vw 60vh;
background-position: 10px 450px;

  }
  .header .con{
    width: 100%;
    height: 100%;
    
       }
       
   .header .con .left {
    width: 100%;
    height: 20%;
    box-sizing: border-box;
    justify-content:start;
  } 

  .header .con h4 {
font-size: 40px;
font-weight: 800;
line-height: 50px;
padding-left: 10px;
height: auto;
margin-top: 30px;
  }

  .header .con p {
    font-size: 16px;
    line-height: 25px;
    padding-left: 10px;
  }

.section-1{
height: 2750px;
}
  .section-1-con {
    flex-direction: column;
    gap: 4rem;
   }
.section-1-con .top h2 {
    font-size: 30px;
    width: 100%;
}

.section-1-con .bottom h2 {
    font-size: 30px;}

  #sec1-cards-con {
    flex-wrap: wrap;
    gap: 2rem;
  }

  #sec1-cards-con .card {
    width: 100%;
  }

  #sec1-cards-con .card h2 {
    font-size: 22px;
  }

#section-2{
    height: 2400px;
    align-items: start;
}

#section-2 #sec-2-heading{
    font-size: 36px;

}
  #sec-2-card-con #sec-2-card {
    width: 100%;
  }



#f-top{
    width: 100%;
    flex-wrap: wrap;
    gap: 1rem;
}


#f-top .quick{
width: 45%;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 15px;
    height: auto !important;
}

#f-top .quick p{
font-size: 16px;

}

#f-top .quick .links{
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

#f-top .quick .links a{
font-size: 14px !important;
font-weight: 200;

}



#f-top .social{
    display: flex;
    flex-direction: column;
    gap: 3rem;
    height: auto !important;
}

#f-top .social p{
font-size: 16px;

}

#f-top .social .links{
    display: flex;
    gap: 1rem;

}

#f-top .social .links a img{
width: 20px !important;
}

#sec-2-con button{
padding: 6px 15px 6px 15px;
font-size: 18px;
width: 50%;
}






#f-b{
    border-top: 1px solid #FFFFFF;
   display: flex;
   align-items: center;
height: 15%;
}

#f-b #f-b-con{
    width: 80%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    gap: 10px;

}

#f-b .left{
font-size: 14px;
font-weight: 200;

}

#f-b-con .right{
    display: flex;
    gap: 20px;
}

#f-b-con .right a{
font-size: 12px;
font-weight: 200;
line-height: 19.36px;

}





}

@media screen and (max-width: 480px) {
    .header{
    background: #CFD4D8;
height: 100vh;
background-image: url('../images/Rectangle\ 3\ \(1\).svg');
background-repeat: no-repeat;
background-size: 99vw 99vh;
background-position: 0px 250px;

  }
  .header .con{
    width: 100%;
    height: 100%;
    
       }
       
   .header .con .left {
    width: 100%;
    height: 60%;
    box-sizing: border-box;

  } 

  .header .con h4 {
font-size: 35px;
font-weight: 1000;
line-height: 50px;
height: auto;
  }

  .header .con p {
    font-size: 16px;
    line-height: 25px;
  }

.section-1{
height: 2250px;
}
  .section-1-con {
    flex-direction: column;
    gap: 4rem;
   }
.section-1-con .top h2 {
    font-size: 20px;
    width: 100%;
    font-weight: 800;
}


.section-1-con .top p {
    font-size: 18px;
}

.section-1-con .bottom h2 {
    font-size: 22px;}

  #sec1-cards-con {
    flex-wrap: wrap;
    gap: 2rem;
  }

  #sec1-cards-con .card {
    height: 340px;
    width: 100%;
  }

  #sec1-cards-con .card h4 {
    font-size: 22px;
    height: auto !important;
    line-height: 28px;    
  }
   #sec1-cards-con .card button{
    width: 80%;
   }

#section-2{
    align-items: start;
    height:2300px;
}

#section-2 #sec-2-heading{
    font-size: 28px;
    line-height: 22px;

}
#section-2 #sec-2-p{
    font-size: 18px;
}
  #sec-2-card-con #sec-2-card {
    width: 100%;
  }

  #sec-2-card-con #sec-2-card p{
    font-size: 16px;
  }


#f-top{
    width: 100%;
    flex-wrap: wrap;
    gap: 1rem;
}


#f-top .quick{
width: 45%;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 15px;
place-self: start;
padding-top: 30px;
}

#f-top .quick p{
font-size: 16px;

}

#sec-2-con button{
  font-size: 12px;
  }

#f-top .quick .links{
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

#f-top .quick .links a{
font-size: 14px !important;
font-weight: 200;

}



#f-top .social{
    display: flex;
    flex-direction: column;
    gap: 3rem;
    place-self: start;
    padding-top: 30px;
}

#f-top .social p{
font-size: 16px;

}

#f-top .social .links{
    display: flex;
    gap: 1rem;

}

#f-top .social .links a img{
width: 20px !important;
}








#f-b{
    border-top: 1px solid #FFFFFF;
   display: flex;
   align-items: center;
height: 15%;
}

#f-b #f-b-con{
    width: 80%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    gap: 10px;

}

#f-b .left{
font-size: 14px;
font-weight: 200;

}

#f-b-con .right{
    display: flex;
    gap: 10px;
}

#f-b-con .right a{
font-size: 9px;
font-weight: 200;
}

  
}