body{
   
 margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
 position: relative;
   background: url(img/bkk.jpg) no-repeat center top;
  background-size: cover;
 background-color: #F8FAE5;
}
a { 
    list-style-type: none;
      text-decoration: none;
}
.header-box {
  width: 100%;
  height: 150px;
  background: #43766C;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 214px;
      box-sizing: border-box;
    background: url(img/Rectangle10.png) no-repeat center top;
  background-size: cover;   
}
.logo {
color: #F8FAE5;
font-family: "Pirata One";
font-size: 66.667px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.nav-box {
  display: flex;
  gap: 30px; 
 
}
.nav-link {

width: auto;
color: #F8FAE5;
font-family: "Alan Sans";
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-decoration: none;
text-decoration-thickness: 10%; 
text-underline-offset: 15px;  transition: 0.3s ease-in-out;
}
.nav-link:hover {text-decoration: underline;}
.hero {

 width: 1464px;
  margin: 0 auto;
  padding-top: 94px;
  margin-bottom: 188px;
height: 750px;
display: flex;
justify-content: space-evenly;
align-items: flex-start;
flex-direction: column;
}



.hero-title {
width: 877.333px;
height: 244px;
color: #76453B;
font-family: "Pirata One";
font-size: 106.667px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin: 0;
}

.hero-paragraph {
width: 1461.333px;
color: #303030;
font-family: "Alan Sans";
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin: 0;
}

.cta {
    width: 300.804px;
height: 80px;
border-radius: 66.667px;
background: #43766C;
color: #F8FAE5;
font-family: "Alan Sans";
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: normal;
cursor: pointer;
margin: 0;
  border: none;
text-decoration: none;
text-decoration-thickness: 10%;  
text-underline-offset: 10px;
 transition: 0.3s ease-in-out;
}
.cta:hover {text-decoration: underline;}
.butterfly{
    display: flex
;
    width: 1238px;
    transform: rotate(0);
    align-items: flex-start;
    position: absolute;
    top: 0px;
    right: 0;
    z-index: -2;
}
.why {
  width: 100%;
  max-width: 1504px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
    margin-bottom: 188px;
}

.why-inner {
  text-align: center;
}

.why-title {
  color: #76453B;
  font-family: "Pirata One";
  font-size: 106.667px;
  font-weight: 400;

}
.why-row {
  display: flex;
  justify-content: center;
  align-items: center; 
  gap: 140px;
}

.why-item {
  display: flex;
  flex-direction: column;
  align-items: center;

  min-height: 400px; 
}

.why-img,
.why-img1,
.why-img2 {
  max-height: 250px; 
  object-fit: contain;
  margin-bottom: 20px;
}


.cta2 {
  display: inline-block;
  width: 300px;
  height: 80px;
  border-radius: 66.667px;
  background: #43766C;
  color: #F8FAE5;
  font-family: "Alan Sans";
  font-size: 32px;
  font-weight: 400;
  cursor: pointer;
  border: none;
text-decoration: none;
text-decoration-thickness: 10%; 
text-underline-offset: 10px;  transition: 0.3s ease-in-out;
}
.cta2:hover {text-decoration: underline;}
.arrow-btn {
  width: 94px;
  height: 94px;
  border: none;
  background: transparent;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}


.left-arrow {
  background-image: url(img/ei_arrow-up1.png); 
  
  transition: 0.3s ease-in-out;
}

.left-arrow:hover {
  background-image: url(img/Variant4.png); 
}


.right-arrow {
  background-image: url(img/ei_arrow-up.png);
  
  transition: 0.3s ease-in-out;
}

.right-arrow:hover {
  background-image: url(img/Variant3.png);
}
.section2 { 
    width: 100%;
 height: 832px;
 margin: 0 auto;
position: relative;
  margin-bottom: 140px; } 

 .section2-image {
     width: 100%;
 height: 832px;; 
background:url(img/Group34.png) no-repeat center/cover;
 position: relative; }

 .section2-brown-squ { 
   width: 964px;
height: 832px;
background: rgba(74 , 45 , 38 ,0.9);
 position: absolute; 
 right: 0; 
  top: 0; 
  padding: 60px;
 box-sizing: border-box;

 } 

 .section2-text {
width: 680px;
height: 115.718px;
color: #FFECD3;
font-family: "Pirata One";
font-size: 93.333px;
font-style: normal;
font-weight: 400;
line-height: normal; 
margin: 83px 0 0 0;} 

.section2-subtext { 
    width: 665.333px;
height: 317.859px;
flex-shrink: 0; 
color: #FFECD3;
font-family: "Alan Sans";
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: normal;}

.sec3{
    width: 100%;
height: 636px;
display: flex;
justify-content:center;
align-items: center;
gap: 40px;

flex-direction: column;
    background: url(img/Rectangle8.png) no-repeat center top;
  background-size: cover;   
}
.sec3-text{
    width: 942px;
height: 136px;
color: #F8FAE5;
font-family: "Pirata One";
font-size: 106.667px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin: 0;

}
.sec3-subtext{
   width: 1325px;
   color: #F8FAE5;
text-align: center;
font-family: "Alan Sans";
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: normal; 
margin: 0;
}
.site-footer {
  height: 300px;
  width: 100%;
  background: url(img/Group48.png) no-repeat center top;
  background-size: cover;
}

.footer-inner {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 60px 214px 0;
}

.footer-logo {
  color: #F8FAE5;
  font-family: "Pirata One";
  font-size: 66.667px;
  font-weight: 400;
}

.footer-heading {
  color: #F8FAE5;
  font-family: "Alan Sans";
  font-size: 32px;
  font-weight: 600;

}

.footer-line {
  color: #F8FAE5;
  font-family: "Alan Sans";
  font-size: 32px;
  font-weight: 400;
text-decoration: none;
  margin-bottom: 15px;
    margin-top: 15px;
text-decoration-thickness: 10%; 
text-underline-offset: 15px;  }
.footer-line:hover {text-decoration: underline;}

.footer-icons {
  display: flex;
  gap: 20px;
  margin-top: 10px;
  margin-bottom: 40px;
      justify-content: flex-start;
    align-items: center;
}


.footer-icon {
  display: inline-block;
  width: 30px;
  height:30px;
  background-size: contain;
  background-repeat: no-repeat;
  transition: 0.3s ease-in-out;
}
.footer-icon2 {
  display: inline-block;
  width: 40px;
  height:40px;
  background-size: contain;
  background-repeat: no-repeat;
  transition: 0.3s ease-in-out;
}
.footer-icon2.fb {
  background-image:url(img/proicons_facebook.png);
}
.footer-icon2.fb:hover {
  background-image:url(img/proicons_facebook-1.png);
}

.footer-icon.sc {
  background-image: url(img/bi_snapchat.png);
}
.footer-icon.sc:hover {
  background-image: url(img/bi_snapchat-1.png);
}

.footer-icon.pi {
  background-image: url(img/icomoon-free_pinterest2.png);
}
.footer-icon.pi:hover {
  background-image: url(img/icomoon-free_pinterest2-1.png);
}

.footer-icon2.ig {
  background-image:url(img/iconoir_instagram.png);
}
.footer-icon2.ig:hover {
  background-image: url(img/iconoir_instagram-1.png);
}


.footer-links {
  margin-top: 20px;
  font-family: "Alan Sans";
  font-size: 18px;
  color: #F8FAE5;
}

.footer-links a {
  color: #F8FAE5;

  transition: 0.3s ease-in-out;
text-decoration: none;
text-decoration-thickness: 10%; 
text-underline-offset: 15px;  }
.footer-links a:hover {text-decoration: underline;}