@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&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');

* {
     box-sizing: border-box;
     font-family: "Poppins", sans-serif;
}

body {
     margin: 0;
     padding: 0;
     overflow-x: hidden;
}

/* ========== ANIMATIONS ========== */
@keyframes fadeInUp {
     from {
          opacity: 0;
          transform: translateY(30px);
     }

     to {
          opacity: 1;
          transform: translateY(0);
     }
}

@keyframes fadeIn {
     from {
          opacity: 0;
     }

     to {
          opacity: 1;
     }
}

@keyframes slideInLeft {
     from {
          opacity: 0;
          transform: translateX(-50px);
     }

     to {
          opacity: 1;
          transform: translateX(0);
     }
}

@keyframes slideInRight {
     from {
          opacity: 0;
          transform: translateX(50px);
     }

     to {
          opacity: 1;
          transform: translateX(0);
     }
}

@keyframes scaleIn {
     from {
          opacity: 0;
          transform: scale(0.9);
     }

     to {
          opacity: 1;
          transform: scale(1);
     }
}

/* Apply animations on page load */
.siteBanner {
     animation: fadeIn 1s ease-out;
}

.bannerDiscription p {
     animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.bannerDiscription h1 {
     animation: fadeInUp 1s ease-out 0.4s backwards;
}

.bannerDiscription button {
     animation: fadeInUp 0.8s ease-out 0.6s backwards;
}

.sectionDetail {
     animation: fadeInUp 0.8s ease-out;
}

.peaceCard {
     animation: fadeInUp 0.8s ease-out;
}

.peaceCard:nth-child(1) {
     animation-delay: 0.1s;
}

.peaceCard:nth-child(2) {
     animation-delay: 0.2s;
}

.peaceCard:nth-child(3) {
     animation-delay: 0.3s;
}

.peaceCard:nth-child(4) {
     animation-delay: 0.4s;
}

.catCard {
     animation: scaleIn 0.6s ease-out;
}

.bg-white.rounded-4 {
     animation: fadeInUp 0.8s ease-out;
}

/* ========== SITE HEADER ========== */
header {
     position: absolute;
     top: 0;
     width: 100%;
     left: 0;
     right: 0;
     z-index: 9999;
     backdrop-filter: blur(15px);
     padding: 0;
     border-bottom: 2px solid #ffffff73;
     animation: slideInLeft 0.8s ease-out;
}

.navbar .navbar-nav .nav-item {
     padding: 0 20px;
}

.navbar .navbar-nav .nav-item .nav-link {
     font-size: 15px;
     font-weight: 400;
     color: #fff;
     transition: color 0.3s ease;
}

.navbar .navbar-nav .nav-item .nav-link:hover {
     color: #FC6839;
}

.navbar-brand {
     font-size: 40px;
     line-height: 40px;
     color: #fff;
     font-weight: 700;
     transition: color 0.3s ease;
}

.navbar-brand div {
     font-size: 23px;
     border-top: 1px solid #fff;
     padding-top: 10px;
     margin-top: 3px;
     line-height: 15px;
     color: #FC6839;
     font-weight: 400;
     transition: color 0.3s ease;
}

.navbar-brand:hover {
     color: #FC6839;
}

/* ========== MOBILE MENU TOGGLE BUTTON ========== */
.navbar-toggler {
     border: 2px solid #FC6839;
     border-radius: 8px;
     padding: 8px 12px;
     background-color: rgba(252, 104, 57, 0.1);
     transition: all 0.3s ease;
     box-shadow: 0 2px 8px rgba(252, 104, 57, 0.3);
}

.navbar-toggler:hover {
     background-color: #FC6839;
     transform: scale(1.05);
     box-shadow: 0 4px 12px rgba(252, 104, 57, 0.5);
}

.navbar-toggler:focus {
     box-shadow: 0 0 0 0.25rem rgba(252, 104, 57, 0.4);
}

.navbar-toggler-icon {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
     width: 24px;
     height: 24px;
}

.navbar-toggler:hover .navbar-toggler-icon {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ========== BUTTONS ========== */
.btn {
     transition: all 0.3s ease;
}

.btn-outline-success {
     border-radius: 50px;
     font-size: 15px;
     padding: 13px 30px;
     font-weight: 400;
     color: #000;
     background-color: #fff;
     border: 1px solid #8DA075;
     outline: none;
     box-shadow: none;
}

.btn.btn-outline-success:hover,
.btn.btn-outline-success:active,
.btn.btn-outline-success:focus {
     color: #fff;
     background-color: #8DA075;
     border: 1px solid #8DA075;
     transform: translateY(-2px);
     box-shadow: 0 4px 8px rgba(141, 160, 117, 0.3);
}

.btn-success {
     border-radius: 50px;
     font-size: 15px;
     padding: 13px 30px;
     font-weight: 400;
     color: #fff;
     background-color: #8DA075;
     border: 1px solid #8DA075;
     outline: none;
     box-shadow: none;
}

.btn.btn-success:hover,
.btn.btn-success:active,
.btn.btn-success:focus {
     color: #000;
     background-color: #fff;
     border: 1px solid #8DA075;
     transform: translateY(-2px);
     box-shadow: 0 4px 8px rgba(141, 160, 117, 0.3);
}

.btn.btn-primary {
     border-radius: 50px;
     font-size: 15px;
     padding: 13px 30px;
     font-weight: 400;
     background-color: #FC6839;
     border: 1px solid #FC6839;
     outline: none;
     box-shadow: none;
     color: #fff;
}

.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary:focus {
     background-color: transparent;
     color: #fff;
     border: 1px solid #fff;
     transform: translateY(-2px);
     box-shadow: 0 4px 8px rgba(252, 104, 57, 0.3);
}

.lightBg.btn.btn-primary:hover,
.lightBg.btn.btn-primary:active,
.lightBg.btn.btn-primary:focus {
     background-color: transparent;
     color: #FC6839;
     border: 1px solid #FC6839;
}

/* ========== SITE BANNER ========== */
.siteBanner {
     min-height: 100vh;
     padding: 400px 0 80px 0;
     position: relative;
     background-image: url(../images/banner.jpg);
     background-position: center;
     background-size: cover;
}

.bannerDiscription p {
     font-size: 18px;
     line-height: 32px;
     font-weight: 400;
     color: #fff;
}

.bannerDiscription h1 {
     font-size: clamp(2rem, 15cqw, 15rem);
     color: #fff;
     font-weight: 500;
     filter: blur(0px);
     margin: 0;
     font-family: "Playfair Display", serif;
}

/* ========== SECTIONS ========== */
.lightBg {
     background-color: #FFFAEE;
     padding: 80px 0;
}

.darkColor {
     padding: 80px 0;
     background-color: #8CA473;
}

.sectionDetail h3 {
     font-size: 51px;
     font-family: "Playfair Display", serif;
     line-height: 72px;
     color: #FC6839;
}

.sectionDetail p {
     font-size: 16px;
     line-height: 28px;
}

.sectionDetail a {
     color: #FC6839;
     font-size: 17px;
     text-transform: uppercase;
     text-decoration: none;
     transition: color 0.3s ease;
}

.sectionDetail a:hover {
     color: #8DA075;
}

/* ========== PEACE CARDS ========== */
.peaceCard {
     position: relative;
     transition: transform 0.3s ease;
}

.peaceCard:hover {
     transform: translateY(-5px);
}

.peaceCard img {
     min-height: 480px;
     object-fit: cover;
     border-radius: 10px;
     width: 100%;
     transition: transform 0.3s ease;
}

.peaceCard:hover img {
     transform: scale(1.05);
}

.peaceCardInner {
     position: absolute;
     bottom: 10px;
     right: 10px;
     left: 10px;
     width: calc(100% - 20px);
     padding: 15px;
     background-color: #fff;
     border-radius: 10px;
}

.peaceCardInner h3 {
     font-size: 22px;
     font-weight: 400;
     color: #000;
}

.peaceCardInner p {
     font-size: 14px;
     font-weight: 400;
     color: #000;
}

.peaceCardInner a {
     font-size: 16px;
     font-weight: 400;
     color: #59bf00;
     text-decoration: none;
     text-transform: uppercase;
     letter-spacing: 0.2px;
     transition: color 0.3s ease;
}

.peaceCardInner a:hover {
     color: #FC6839;
}

/* ========== CAT CARDS ========== */
.catCard {
     transition: transform 0.3s ease;
}

.catCard:hover {
     transform: translateY(-5px);
}

.catCard p {
     font-size: 14px;
     font-weight: 400;
     color: #000;
     line-height: 28px;
}

.catCard h3 {
     font-size: 34px;
     font-weight: 400;
     font-family: "Playfair Display", serif;
     color: #FC6839;
     line-height: 42px;
}

.catCard img {
     transition: transform 0.3s ease;
}

.catCard:hover img {
     transform: rotate(10deg) scale(1.1);
}

/* ========== SPA ABOUT CARD ========== */
.spaAboutCard {
     background-image: url(../images/7526.jpg);
     background-size: cover;
     background-repeat: no-repeat;
     height: 100%;
     background-position: center;
     padding: 40px;
     min-height: 320px;
     border-radius: 15px;
     transition: transform 0.3s ease;
}

.spaAboutCard:hover {
     transform: scale(1.02);
}

/* ========== ULTIMATE CARDS ========== */
.ulitimateCard p {
     font-size: 15px;
     font-weight: 400;
     color: #57534E;
     line-height: 28px;
}

.ulitimateCard h4 {
     font-size: 20px;
     font-weight: 400;
     color: #000;
}

/* ========== ADVANTAGE SECTION ========== */
.advatage {
     position: relative;
     height: 100vh;
     background-image: url(../images/BENEFITS.jpg);
     background-size: cover;
     background-repeat: no-repeat;
     padding: 40px 0;
     background-position: top;
}

/* WhatsApp Floating Button */
.whatsapp-float {
     position: fixed;
     width: 60px;
     height: 60px;
     bottom: 40px;
     right: 40px;
     background-color: #25d366;
     color: #FFF;
     border-radius: 50px;
     text-align: center;
     font-size: 30px;
     box-shadow: 0 4px 12px rgba(37, 211, 102, 0.5);
     z-index: 100;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s ease;
     animation: pulse 2s infinite;
     text-decoration: none;
}

@keyframes pulse {
     0% {
          box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
     }

     70% {
          box-shadow: 0 0 0 20px rgba(37, 211, 102, 0);
     }

     100% {
          box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
     }
}

.whatsapp-float:hover {
     background-color: #128C7E;
     transform: scale(1.05);
     animation: none;
     color: #FFF;
}

.phone-float {
     position: fixed;
     width: 60px;
     height: 60px;
     bottom: 120px;
     right: 40px;
     background-color: #007bff;
     color: #FFF;
     border-radius: 50px;
     text-align: center;
     font-size: 30px;
     box-shadow: 0 4px 12px rgba(0, 123, 255, 0.5);
     z-index: 100;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s ease;
     animation: ppulse 2s infinite;
     text-decoration: none;
}

@keyframes ppulse {
     0% {
          box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
     }

     70% {
          box-shadow: 0 0 0 20px rgba(0, 123, 255, 0);
     }

     100% {
          box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
     }
}

.phone-float:hover {
     background-color: #007bff;
     transform: scale(1.05);
     animation: none;
     color: #FFF;
}

.advantageCard {
     background: #ffffff4d;
     border-radius: 15px;
     backdrop-filter: blur(10px);
     transition: all 0.3s ease;
}

.advantageCard:hover {
     background: #ffffffa6;
     transform: translateY(-5px);
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.advantageCard .catCard h3 {
     font-size: 44px;
     font-weight: 400;
     font-family: "Playfair Display", serif;
     line-height: 55px;
}

/* ========== GREEN CARD ========== */
.greenCard {
     background-image: url(../images/herblOil.jpg);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     min-height: 80vh;
     padding: 90px 60px 90px;
     height: 100%;
     position: relative;
}

.greenCard:after {
     position: absolute;
     content: "";
     width: 100%;
     height: 100%;
     background-color: #8CA473;
     opacity: 0.7;
     top: 0;
     bottom: 0;
     right: 0;
     left: 0;
}

.greenCard h3 {
     font-size: 60px;
     font-family: "Playfair Display", serif;
}

.greenCard h4 {
     font-size: 20px;
     line-height: 35px;
     font-weight: 400;
     color: #fff;
}

/* ========== FORM CARD ========== */
.formCard {
     padding: 90px 60px 40px 60px;
     background-color: #FFFAEE;
     min-height: 80vh;
     height: 100%;
}

.contactForm input,
.contactForm textarea {
     border: none;
     background-color: transparent;
     border-bottom: 1px solid #C0C0B5;
     color: #000;
     font-size: 15px;
     font-weight: 500;
     width: 100%;
     outline: none;
     box-shadow: none;
     padding: 12px 0;
     transition: border-color 0.3s ease;
}

.contactForm input:focus,
.contactForm textarea:focus {
     border-bottom-color: #FC6839;
}

.contactForm input::placeholder,
.contactForm textarea::placeholder {
     color: #C0C0B5;
     font-size: 15px;
     font-weight: 500;
     width: 100%;
}

/* ========== FOOTER ========== */
.footerMenu {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     flex-wrap: wrap;
     gap: 30px;
     list-style-type: none;
     margin: 0;
     padding: 0;
}

.footerMenu li {
     list-style-type: none;
     margin: 0;
     padding: 0;
}

.footerMenu li a,
.copyrigh p a {
     font-size: 15px;
     color: #FC6839;
     text-transform: capitalize;
     text-decoration: none;
     transition: color 0.3s ease;
}

.footerMenu li a:hover,
.copyrigh p a:hover {
     color: #8DA075;
}

.copyrigh p {
     font-size: 15px;
     font-weight: 400;
     color: #000;
}

/* ========== CONTAINER RESPONSIVENESS ========== */
@media (min-width: 1400px) {

     .container,
     .container-lg,
     .container-md,
     .container-sm,
     .container-xl,
     .container-xxl {
          max-width: 1740px;
     }
}

/* ========== TABLETS (max-width: 992px) ========== */
@media (max-width: 992px) {
     .navbar-brand {
          font-size: 32px;
     }

     .navbar .navbar-nav .nav-item {
          padding: 10px 0;
     }

     .navbar-collapse {
          background-color: #8ca47394;
          padding: 20px;
          border-radius: 10px;
          margin-top: 15px;
     }

     .siteBanner {
          padding: 250px 0 60px 0;
     }

     .bannerDiscription h1 {
          font-size: clamp(2rem, 12vw, 10rem);
     }

     .bannerDiscription p {
          font-size: 16px;
          line-height: 28px;
     }

     .lightBg,
     .darkColor {
          padding: 60px 0;
     }

     .sectionDetail h3 {
          font-size: 38px;
          line-height: 52px;
     }

     .peaceCard {
          margin-bottom: 20px;
     }

     .peaceCard img {
          min-height: 380px;
     }

     .peaceCardInner h3 {
          font-size: 20px;
     }

     .peaceCardInner p {
          font-size: 13px;
     }

     .catCard h3 {
          font-size: 28px;
          line-height: 38px;
     }

     .catCard p {
          font-size: 13px;
          line-height: 24px;
     }

     .spaAboutCard {
          min-height: 280px;
          padding: 30px;
          margin-bottom: 30px;
     }

     .ulitimateCard h4 {
          font-size: 18px;
     }

     .ulitimateCard p {
          font-size: 14px;
          line-height: 24px;
     }

     .advantageCard .catCard h3 {
          font-size: 36px;
          line-height: 46px;
     }

     .advatage {
          height: auto;
          min-height: 60vh;
          padding: 60px 0;
     }

     .greenCard,
     .formCard {
          padding: 60px 40px;
     }
}

/* ========== MOBILE LANDSCAPE (max-width: 768px) ========== */
@media (max-width: 768px) {
     header {
          padding: 10px 0;
     }

     .navbar-brand {
          font-size: 28px;
     }

     .navbar .navbar-nav .nav-item .nav-link {
          font-size: 14px;
     }

     .btn.btn-primary,
     .btn-outline-success,
     .btn-success {
          font-size: 14px;
          padding: 12px 25px;
     }

     .siteBanner {
          padding: 200px 0 50px 0;
          min-height: 80vh;
     }

     .bannerDiscription h1 {
          font-size: clamp(1.8rem, 10vw, 8rem);
          margin-top: 30px;
     }

     .bannerDiscription p {
          font-size: 15px;
          line-height: 26px;
     }

     .lightBg,
     .darkColor {
          padding: 50px 0;
     }

     .sectionDetail h3 {
          font-size: 32px;
          line-height: 44px;
     }

     .sectionDetail a {
          font-size: 15px;
     }

     .sectionDetail p {
          font-size: 14px;
          line-height: 26px;
     }

     .peaceCard img {
          min-height: 320px;
     }

     .peaceCardInner {
          padding: 12px;
     }

     .peaceCardInner h3 {
          font-size: 18px;
          margin-bottom: 10px;
     }

     .peaceCardInner p {
          font-size: 12px;
          margin-bottom: 10px;
     }

     .peaceCardInner a {
          font-size: 14px;
     }

     .catCard h3 {
          font-size: 24px;
          line-height: 34px;
          margin: 20px 0 15px;
     }

     .catCard p {
          font-size: 13px;
          line-height: 22px;
     }

     .catCard img {
          width: 70px !important;
          height: 70px !important;
     }

     .spaAboutCard {
          min-height: 250px;
          padding: 25px;
     }

     .bg-white.rounded-4 {
          padding: 20px !important;
     }

     .ulitimateCard h4 {
          font-size: 16px;
     }

     .ulitimateCard p {
          font-size: 13px;
          line-height: 22px;
     }

     .advantageCard {
          padding: 20px !important;
     }

     .advantageCard .catCard h3 {
          font-size: 28px;
          line-height: 38px;
          margin-bottom: 15px;
     }

     .advantageCard .catCard p {
          font-size: 13px;
     }

     .advatage {
          min-height: 50vh;
          padding: 50px 0;
     }

     .greenCard,
     .formCard {
          padding: 50px 30px;
     }

     .position-relative .position-absolute {
          padding: 20px !important;
     }

     .position-relative .catCard h3 {
          font-size: 22px;
          line-height: 32px;
     }

     .position-relative .ulitimateCard h4 {
          font-size: 18px !important;
     }

     section[style*="min-height: 100vh"] {
          min-height: auto !important;
          padding: 60px 0 !important;
     }

     section[style*="min-height: 100vh"] img[style*="position: absolute"] {
          display: none !important;
     }

     section[style*="min-height: 100vh"] .sectionDetail h3 {
          font-size: 28px;
          line-height: 38px;
     }

     section[style*="min-height: 100vh"] .sectionDetail p {
          font-size: 14px;
     }
}

/* ========== MOBILE PORTRAIT (max-width: 576px) ========== */
@media (max-width: 576px) {
     header {
          padding: 8px 0;
     }

     .navbar-brand {
          font-size: 24px;
     }

     .navbar .navbar-nav .nav-item .nav-link {
          font-size: 13px;
     }

     .navbar-toggler {
          padding: 6px 10px;
     }

     .navbar-toggler-icon {
          width: 20px;
          height: 20px;
     }

     .btn.btn-primary,
     .btn-outline-success,
     .btn-success {
          font-size: 13px;
          padding: 10px 20px;
     }

     .siteBanner {
          padding: 180px 0 40px 0;
          min-height: 70vh;
     }

     .bannerDiscription h1 {
          font-size: clamp(1.5rem, 9vw, 6rem);
          margin-top: 20px;
     }

     .bannerDiscription p {
          font-size: 14px;
          line-height: 24px;
     }

     .lightBg,
     .darkColor {
          padding: 40px 0;
     }

     .sectionDetail h3 {
          font-size: 26px;
          line-height: 36px;
     }

     .sectionDetail a {
          font-size: 14px;
     }

     .sectionDetail p {
          font-size: 13px;
          line-height: 24px;
     }

     .peaceCard img {
          min-height: 280px;
     }

     .peaceCardInner {
          padding: 10px;
     }

     .peaceCardInner h3 {
          font-size: 16px;
          margin-bottom: 8px;
     }

     .peaceCardInner p {
          font-size: 11px;
          margin-bottom: 8px;
     }

     .peaceCardInner a {
          font-size: 12px;
     }

     .catCard h3 {
          font-size: 20px;
          line-height: 28px;
          margin: 15px 0 10px;
     }

     .catCard p {
          font-size: 12px;
          line-height: 20px;
     }

     .catCard img {
          width: 60px !important;
          height: 60px !important;
     }

     .spaAboutCard {
          min-height: 220px;
          padding: 20px;
     }

     .bg-white.rounded-4 {
          padding: 20px !important;
     }

     .ulitimateCard h4 {
          font-size: 15px;
     }

     .ulitimateCard p {
          font-size: 12px;
          line-height: 20px;
     }

     .advantageCard {
          padding: 15px !important;
     }

     .advantageCard .catCard h3 {
          font-size: 22px;
          line-height: 32px;
          margin-bottom: 12px;
     }

     .advantageCard .catCard p {
          font-size: 12px;
          line-height: 20px;
     }

     .advatage {
          min-height: 40vh;
          padding: 40px 0;
     }

     .greenCard {
          padding: 40px 25px;
          min-height: 60vh;
     }

     .greenCard h3 {
          font-size: 40px;
     }

     .greenCard h4 {
          font-size: 16px;
          line-height: 28px;
     }

     .formCard {
          padding: 40px 25px;
          min-height: 60vh;
     }

     .position-relative .position-absolute {
          padding: 15px !important;
     }

     .position-relative .catCard h3 {
          font-size: 18px;
          line-height: 26px;
     }

     .position-relative .d-flex span {
          font-size: 12px;
     }

     .position-relative .ulitimateCard h4 {
          font-size: 16px !important;
          line-height: 22px;
     }

     .position-relative img[style*="width: 250px"] {
          width: 180px !important;
          height: 120px !important;
     }

     .w-100.rounded-4 {
          margin-bottom: 15px;
     }

     section[style*="min-height: 100vh"] .sectionDetail h3 {
          font-size: 24px;
          line-height: 34px;
     }

     section[style*="min-height: 100vh"] .sectionDetail p {
          font-size: 13px;
          line-height: 22px;
     }

     section img[style*="height: 450px"] {
          height: 250px !important;
     }
}

/* ========== EXTRA SMALL MOBILE (max-width: 400px) ========== */
@media (max-width: 400px) {
     .navbar-brand {
          font-size: 20px;
     }

     .siteBanner {
          padding: 160px 0 30px 0;
     }

     .bannerDiscription h1 {
          font-size: clamp(1.3rem, 8vw, 5rem);
     }

     .sectionDetail h3 {
          font-size: 22px;
          line-height: 32px;
     }

     .peaceCard img {
          min-height: 250px;
     }

     .catCard h3 {
          font-size: 18px;
          line-height: 26px;
     }

     .spaAboutCard {
          min-height: 200px;
     }

     .advantageCard .catCard h3 {
          font-size: 20px;
          line-height: 28px;
     }

     .position-relative .catCard h3 {
          font-size: 16px;
          line-height: 24px;
     }

     section[style*="min-height: 100vh"] .sectionDetail h3 {
          font-size: 20px;
          line-height: 30px;
     }

     .greenCard h3 {
          font-size: 32px;
     }
}

/* ========== SMOOTH SCROLLING ========== */
html {
     scroll-behavior: smooth;
}

/* ========== IMAGE OPTIMIZATION ========== */
img {
     max-width: 100%;
     height: auto;
}

/* ========== UTILITY CLASSES ========== */
.overflow-hidden {
     overflow: hidden !important;
}

.position-relative {
     position: relative;
}

.position-absolute {
     position: absolute;
}

/* ========== HOVER EFFECTS ========== */
.w-100.rounded-4 {
     transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.w-100.rounded-4:hover {
     transform: scale(1.02);
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}