@font-face {
    font-family: 'Cerost';
    src: url('../fonts/cerost.otf') format('truetype'); /* update path if needed */
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'Denton Test';
  src: url('../fonts/denton-font/Denton Test Bold 700.otf') format('woff2'),
       url('../fonts/denton-font/Denton Test Bold 700.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
  /* font-display: swap; */
}

@font-face {
  font-family: 'Denton Test';
  src: url('../fonts/denton-font/Denton Test Regular 400.otf') format('woff2'),
       url('../fonts/denton-font/Denton Test Regular 400.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
  /* font-display: swap; */
}


.about-lifestyle {
  /* background: url("../Images/home/about-bg.jpg") no-repeat center center; */
    background-size: cover;
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    color: #000;

    /* Add space inside section */
    /* padding: 60px; */
    /* makes text visible on background */
    /* padding: 40px 40px; */
    /* spacing for smaller screens */
}

.about-lifestyle h2 {
    font-family: 'Denton Test';
    font-weight: 420;
    font-size: 48px;
    line-height: 1.2;
    /* text-transform: uppercase; */
    margin-bottom: 20px;
    margin-top: 40px;
      gap: 20px; /* space between line and text */
  color: #000; /* change as needed */
  position: relative;
   display: flex;
   align-items: center;
     justify-content: center;
     white-space: nowrap;
}
.about-lifestyle h2::before,
.about-lifestyle h2::after {
  content: "";
  /* position: absolute; */
  top: 50%;
 width: 100px; 
  margin: 0 15px;  
   
  border-bottom: 2px solid #70724F;  /* solid line style */
  transform: translateY(-50%);
}
.about-lifestyle h3 {
    font-family: 'Denton Test';
    font-weight: 700;
    font-style: bold;
    font-size: 36px;
    line-height: 1.4;
    /* text-transform: uppercase; */
    margin-bottom: 20px;
    color: #363636;

}

.about-scape {
    height: 400px;
    /* max-width: 900px; */
    /* limit width for readability */
    margin: 0 auto;
}

.about-lifestyle p {
    font-family: 'DM Sans';
    font-weight: 400;
    font-style: normal;
    font-size: 17px;
    line-height: 37px;
    margin: 0 12px;
    word-wrap: break-word;
    overflow-wrap: break-word;
     white-space: normal;
     max-width: 1200px;
}


/* Text animation: move from top to normal and fade in */
/* Default state - no animation */
/* Default state - no animation */
.about-lifestyle,
.about-lifestyle h2,
.about-lifestyle h3,
.about-lifestyle p {
  opacity: 0;
  transform: translateY(-50px);
}

/* Animation triggers only when .animate is added */
.about-lifestyle.animate {
  animation: slideDownFadeIn 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}
.about-lifestyle.animate h2 {
  animation: slideDownFadeIn 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  animation-delay: 0.2s;
}
.about-lifestyle.animate h3 {
  animation: slideDownFadeIn 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  animation-delay: 0.4s;
}
.about-lifestyle.animate p {
  animation: slideDownFadeIn 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  animation-delay: 0.6s;
}

/* ===================== */
/* .scape-images children */
/* Default state: hidden, no animation */
.scape-images > div {
  opacity: 0;
  transform: translateY(50px);
  /* remove animation here! */
}

/* Animate only when parent section has .animate */
.about-lifestyle.animate .scape-images > div {
  animation: slideUpFadeIn 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.about-lifestyle.animate .scape-images > div:nth-child(1) { animation-delay: 0.9s; }
.about-lifestyle.animate .scape-images > div:nth-child(2) { animation-delay: 1.0s; }
.about-lifestyle.animate .scape-images > div:nth-child(3) { animation-delay: 1.1s; }

/* Keyframes */
@keyframes slideDownFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUpFadeIn {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


.scape-images {
    width: 100%;
    /* padding-top: 10px; */
    /* height: 559px; */
    /* top: 375px; */
    /* left: 3px; */
    opacity: 1;
    gap: 28px;
    display: flex; justify-content: center;
    padding:20px;
    /* justify-content: center; */
    /* padding: 20px; */
    /* margin: 40px 40px 0 40px; */
     /* animation: slideUpFadeIn 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards; */
  /* opacity: 0;
  transform: translateY(50px); /* start 50px below */
  /* animation-delay: 0.8s; start after text */ 
}

.sea {
    width: 437.20px;
    height: 450px;
    left: 0px;
    opacity: 1;
    border-top-left-radius: 272.68px;
    border-top-right-radius: 272.68px;
    overflow: hidden;
    position: relative; 
    background: linear-gradient(180deg, rgba(40,130,150,0.7) 0%, rgba(40,130,150,0) 70%);;
    background-size: cover;
    z-index: 0;
}

.sea::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-top-left-radius: 272.68px;
  border-top-right-radius: 272.68px;
  background: linear-gradient(
    180deg, 
    rgba(40, 130, 150, 0.85) 50%,   /* more opaque blue at top */
    rgba(40, 130, 150, 0.15) 70%,  /* less opaque fading out */
    rgba(40, 130, 150, 0) 100%     /* completely transparent near bottom */
  );
  pointer-events: none;
  z-index: 1;
}

.forest {
    width: 437.20px;
    height: 450px;
    left: -0px;
    opacity: 1;
    border-top-left-radius: 272.68px;
    border-top-right-radius: 272.68px;
    background: linear-gradient(180deg, #525B31 0%, #4F5C38 26.12%, #4A5736 46.82%);
    overflow: hidden;
     position: relative; 

}

.forest::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-top-left-radius: 272.68px;
  border-top-right-radius: 272.68px;
  background: linear-gradient(
    180deg,
    rgba(30, 40, 20, 0.75) 50%,    /* darker green shadow */
    rgba(30, 40, 20, 0.35) 65%,   /* fade */
    rgba(30, 40, 20, 0) 100%      /* transparent */
  );
  pointer-events: none;
  z-index: 1;
}

.land {
    width: 438px;
        height: 450px;
    left: -0.4px;
    opacity: 1;
    border-top-left-radius: 272.68px;
    border-top-right-radius: 272.68px;
    background: linear-gradient(180deg, #945E17 0%, #B57E38 29.39%, #BA8745 52.55%);
    overflow: hidden;
     position: relative; 

}

.land::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-top-left-radius: 272.68px;
  border-top-right-radius: 272.68px;
  background: linear-gradient(
    180deg,
    rgba(89, 49, 4, 0.75) 50%,    /* dark brown tone */
    rgba(89, 49, 4, 0.3) 60%,    /* fading */
    rgba(89, 49, 4, 0) 100%      /* transparent */
  );
  pointer-events: none;
  z-index: 1;
}

.scape-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  border: 25px solid #fff; /* white border */
  border-radius: 50px;     /* rounded corners */
  box-sizing: border-box;  
}

.video-desc {
     position: absolute; 
     top: 100px;  
     /* left: 20px; */
    /* width: 367.21px;
    height: 128.53px; */
    /* top: 128px;
    left: 35.45px; */
    opacity: 1;
    gap: 9.09px;
    align-items: center;
    justify-content: center;
    justify-items: center;
     z-index: 2;
}


.video-desc h3 {
  /* padding-left: 10%; */
    /* width: 367.213px;
    height: 45.44px; */
    opacity: 1;
    font-family: 'Denton Test';
    font-weight: 420;
    font-style: normal;
    font-size: 30px;
    line-height: 43px;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    overflow: hidden;
    z-index: 2;
    text-transform: uppercase;
}

.video-desc p {
    width: 80%;
    height: 74px;
    opacity: 1;
    /* padding-left: 10%; */
    font-family: 'DM Sans', sans-serif;
    font-weight: 400px;
    font-style: normal;
    font-size: 13.33px;
    line-height: 24.66px;
    letter-spacing: 0%;
    text-align: center;
    color: #FFFFFF;
     z-index: 2;
     margin-left: auto; margin-right: auto;
}


about-lifestyle.animate .scape-images > div {
  animation: slideUpFadeIn 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* Delays increased to start after text animation */
.about-lifestyle.animate .scape-images > div:nth-child(1) { animation-delay: 1.2s; }
.about-lifestyle.animate .scape-images > div:nth-child(2) { animation-delay: 1.4s; }
.about-lifestyle.animate .scape-images > div:nth-child(3) { animation-delay: 1.6s; }


/* Keyframes */
@keyframes slideDownFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUpFadeIn {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* mobile reactive css */


@media (max-width: 992px) {
  .about-lifestyle {
    padding: 40px 20px;
  }
  .about-lifestyle h2::before,
  .about-lifestyle h2::after {
    width: 60px; /* shorter line */
    margin: 0 8px; /* tighter spacing */
  }
  .about-lifestyle h2 {
    font-size: 36px;
    line-height: 40px;
  }

  .about-lifestyle h3 {
    font-size: 26px;
    line-height: 34px;
  }

  .about-lifestyle p {
    font-size: 15px;
    line-height: 26px;
    padding: 0 10px;
  }
.scape-images {
  position: relative;      /* make it a positioning context */
  display: flex;
  gap: 28px;
  padding: 20px;
  width: 100%;
  opacity: 1;
}
  .video-desc {
  position: absolute;       /* position relative to .scape-images */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* perfectly center */
  display: flex;
  justify-content: center;
  align-items: center;
}


  .video-desc h3 {
  writing-mode: vertical-rl;  /* text flows vertically, top → bottom */
  transform: rotate(180deg);  /* flip to make it bottom → top */
  text-align: center;
}

.video-desc p{
  display: none;
}
}

@media(max-width:575px){
  .scape-video { min-height:266px; border:20px solid #fff; }
}

@media(max-width:768px){
  .about-lifestyle h2 { font-size:28px; }
}

@media(max-width:767px){
  .about-lifestyle p { padding:0px; margin-left:0px; margin-right:0px; font-size:14px; }
}

@media (max-width: 480px) {
  .about-lifestyle h2 {
    font-size: 24px;
    line-height: 30px;
  }

   .about-lifestyle h2::before,
  .about-lifestyle h2::after {
       width: 20px; /* shorter line */
    margin: 0 6px; /* tighter spacing */
  }

  .about-lifestyle h3 {
    font-size: 20px;
    line-height: 26px;
  }
  .scape-images {
  position: relative;      /* make it a positioning context */
  display: flex;
  gap: 28px;
  padding: 20px;
  width: 100%;
  opacity: 1;
}
.video-desc {
  position: absolute;       /* position relative to .scape-images */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* perfectly center */
  display: flex;
  justify-content: center;
  align-items: center;
}

  .video-desc h3 {
  writing-mode: vertical-rl;  /* text flows vertically, top → bottom */
  transform: rotate(180deg);  /* flip to make it bottom → top */
  text-align: center;
}

.video-desc p{
  display: none;
}
}