:root{
  --green:#6BA42D;
  --white:#fff;
  --black:#1E1E1E;
  --white1:#fffe;
  --navy:#1A1D25;
  --green1:#3F6614;
  --shadow:0 7px 13.3px 0 #000;
  --bk:rgba(0,0,0,0.6);
}
.dark{
  
  --black:#fffe;
  --white1:#1A1D25;
 
}
*{
  box-sizing: border-box;
padding: 0;
margin: 0;}

    html {
      scroll-behavior: smooth;
    }
    a , li{
      text-decoration: none;
      color: inherit;

  list-style-type: none;
  text-decoration: none;
}
body{
  width: 1270px;
  position: relative;
  background-color: var(--white1);
  margin: 0 auto;
  overflow-x: hidden;
}
.nav{
  width: 1270px;
  padding: 0 100px;
  display: flex;
  align-items: center;
  height: 80px;
  background-color: var(--green);
  justify-content: space-between;
position: fixed;
z-index: 999;
}
.nav-box{
  width: auto;
  height: auto;
  display: flex;
gap: 10px;
align-items: center;
}
.logo{
 width: 40px;
height: auto;
margin: 0; 
}
.logo-text{
  color: var(--white);

font-family: Anton;
font-size: 36px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.nav-link {
  color: var(--white);
  font-family: Jost;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin: 0 10px;
  position: relative;
  display: inline-block;
  transition: transform 0.3s ease, color 0.3s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  top: 25px;
  width: 0%;
  height: 2px;
  background: var(--white);
  transition: width 0.4s ease;
}

.nav-link:hover::after {
  width: 100%;
}




.nav-img{
   width: 40px;
height: auto;
margin: 0; 
}
.nav-img:hover{
  opacity: 0.9;}
.section1{
width: 1270px;
    height: 638px;
    background: url(img/bk.png);
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 100px;
    position: relative;
    top: 80px;
}
.section1-box{
    width: 500px;
    height: 444px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
}
.section1-title{
  color: var(--white);
font-family: Anton;
font-size: 46px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.section1-text{
  color: var(--white);
font-family: Jost;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.cta1{
  width: 153px;
height: 54px;
border-radius: 25px;
background:var(--white);
color: var(--green1);
font-family: Jost;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
display: flex;
justify-content: center;
align-items:center ;
margin-top: 60px;
}
.cta1:hover{
  background-color: var(--white1);
}

.section1-img {
  width: 464px;
  height: 443px;
  margin: 0;
  margin-bottom: 100px;
  animation: shake 2s infinite;
}

@keyframes shake {
  0%, 20%, 100% {
    transform: rotate(0deg);
  }
  5%, 15% {
    transform: rotate(3deg);
  }
  10% {
    transform: rotate(-3deg);
  }
  25% {
    transform: rotate(0deg);
  }
  50%, 70% {
    transform: rotate(0deg);
  }
  55%, 65% {
    transform: rotate(2deg);
  }
  60% {
    transform: rotate(-2deg);
  }
}

.section2{
  width: 1270px;
height: auto;
padding: 150px 100px;

}

.section2-box{
width: 1086px;
height: 324px;
border-radius: 30px;
border: 5px solid var(--green);
box-shadow: var(--shadow);
display: flex;
padding: 0 60px;
justify-content: center;
align-items: flex-start;
flex-direction: column;
gap: 20px;
}
.section2-title{
  color: var(--black);
font-family: Anton;
font-size: 40px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.section2-text{
  color: var(--black);
font-family: Jost;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.section2-box1{
  width: 799px;
height: 60px;
border-radius: 86px;
border: 3px solid var(--black);
display: flex;
background-color: none;
align-items: center;
}

.cta{
  width: 153px;
height: 54px;
border-radius: 25px;
background: var(--green);
color: var(--white);
font-family: Jost;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
display: flex;
justify-content: center;
align-items: center;
}

.pl{
  width: 799px;
height: 60px;
border-radius: 86px;
border: 3px solid var(--black);
font-family: Jost;
font-size: 18px;
font-style: normal;
font-weight: 200;
line-height: normal; 
padding-left: 20px;
background: none;
}
.cta:hover{
  background-color: var(--green1);
}
.section3{
  width: 1270px;
height: auto;
display: flex;
justify-content: flex-start;
align-items: flex-start;
gap: 30px;
padding: 0 100px;
flex-direction: column;
}
.section3-box{
  width: 1080px;
  height:auto ;
  display: flex;
  justify-content: space-between;
  align-items: center;
 
}
.section3-title{
color: var(--black);
font-family: Anton;
font-size: 40px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.cta2{
  color: var(--black);
font-family: Jost;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 140%; /* 33.6px */
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: 15%; /* 3.6px */
text-underline-offset: 25%; /* 6px */
text-underline-position: from-font;
}
.cta2:hover{
color: var(--green1);
}
.Ccard{
 width: 346.286px;
height: 414px;
border-radius: 30px;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
background: var(--green);
}
.Ccard-img{
  width: 346.286px;
height: 309px;
margin-bottom: 30px;

}
.Ccard-text{
  color: var(--white);
font-family: Jost;
font-size: 36px;
font-style: normal;
font-weight: 400;
line-height: normal;

  position: relative;
  display: inline-block;
  transition: transform 0.3s ease, color 0.3s ease;
}

.Ccard-text::after {
  content: "";
  position: absolute;
  left: 0;
bottom: 0;
  width: 0%;
  height: 4px;
  background: var(--white);
  transition: width 0.4s ease;
}

.Ccard-text:hover::after {
  width: 100%;
}
.section4{
  width: 1280px;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  padding: 150px 100px;
  position: relative;
}
.section4-text{
  color: var(--black);
font-family: Jost;
font-size: 18px;
width: 760px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-bottom: 50px
}
.img{
  width: 400px;
  height: auto;
  position: absolute;
  top: 140px;
  right: 0;

  transform-origin: center bottom;
  animation: sway 2s ease-in-out infinite;
}

@keyframes sway {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}



.card{
  width: 529px;
height: 570px;
border-radius: 28.421px;
border: 7.579px dashed var(--green);
justify-content: flex-start;
display: flex;
flex-direction: column; margin-bottom: 150px;
}
.card-img{
    width: 530px;
    height: 291.789px;
    margin: 0;
    border-radius: 40px;
    border: 7.579px solid var(--green);
    position: relative;
    top: -15px;
    left: -8px;
    display: flex
;
    justify-content: center;
    align-items: center;
}
.card-title{
  color: var(--green);
font-family: Jost;
font-size: 34.105px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin: 10px 20px;
}
.card-text{
color: var(--black);
font-family: Jost;
font-size: 22.737px;
font-style: normal;
font-weight: 400;
margin: 10px 20px;
}
.circB{
  width: 45.949px;
height: 45.949px;
display: flex;
align-items: center;
color: var(--white);
background-color: var(--green);
font-family: fantasy;
font-size: 45.949px;

font-weight: 900;
cursor: pointer;
border-radius: 50px;
justify-content: center;

}
.circB:hover{
background-color: var(--green1);}
.num{
color: var(--black);

font-family: Jost;
font-size: 40px;
font-style: normal;
font-weight: 900;
line-height: normal;  
}
.csr-box{
  width: auto;
  height: auto;
  display: flex;
gap: 150px;
align-items: center;

}
.ctaa{
  width: 153px;
height: 54px;
border-radius: 25px;
background: var(--green);
color: var(--white);
font-family: Jost;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
display: flex;
justify-content: center;
align-items: center;
margin: 15px ;
}
.ctaa:hover{
  background-color: var(--green1);
}

.footer{
  width: 1270px;
height: 356px;
background-color: var(--green);
display: flex;
align-items: flex-start;
padding: 100px;
justify-content: space-between;
}
.footer-box{
  width:220px ;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.footer-title{
 color: var(--white);
font-family: Anton;
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: normal; 
}
.footer-text{
 color: var(--white);
width: auto;
font-family: Jost;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;

  position: relative;
  display: inline-block;
  transition: transform 0.3s ease, color 0.3s ease;
}

.footer-text::after {
  content: "";
  position: absolute;
  left: 0;
bottom: -5px;
  width: 0%;
  height: 4px;
  background: var(--white);
  transition: width 0.4s ease;
}

.footer-text:hover::after {
  width: 100%;
}
.footer-img{
  width: 160px;
  height: auto;
  cursor: pointer;
}
.footer2{
  width: 1270px;
  height: 64.938px;
  display:flex ;
  justify-content: space-between;
  align-items: center;
  background-color: var(--green1);
  padding: 0 100px;
}
.l{
  width: 84px;
height: 84px;
}
.footer-text1{
 color: var(--white);

font-family: Jost;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bk);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup-content {
  width: 450px;
  background: var(--green);
  border-radius: 15px;
  text-align: center;
  padding: 20px;
  position: relative;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 20px;
  cursor: pointer;
  font-family: cursive;
  font-weight: 400;
  color: var(--white);
}

.popup-img {
  width: 300px;
  border-radius: 10px;
  margin-bottom: 10px;
}

.popup-title {
  font-family: Anton;
  font-size: 24px;
  margin-bottom: 10px;
  color: var(--white);
}

.popup-text {
  font-family: Jost;
  font-size: 16px;
  margin-bottom: 15px;
    color: var(--white);
}

.popup-cta {
  background: var(--white);
  color: var(--green);
  padding: 10px 20px;
  border-radius: 20px;
  font-family: Jost;
  font-size: 16px;
  cursor: pointer;
}
.popup-cta:hover {
    opacity: 0.9;}