/* Prevent Overflow Issues */
html, body {
    overflow-x: hidden; /* Prevents horizontal scrolling */
    width:100%;
    scroll-behavior: smooth;
}
/* Ensure all elements do not exceed viewport */
* {
    max-width: 100vw;
    box-sizing: border-box; /* Prevents elements from expanding beyond their container */
}
/* === BRAND COLOURS === */
:root {
    --brand-main: #00453D;
    --brand-secondary: #D5C9B6;
    --brand-accent-1: #6C1363;
    --brand-accent-2: #004D7E;
    --brand-accent-3: #D5C9B6;
    --white: #ffffff;
    --black: #212121;
}
/* Brand Secondary Color for Text */
.text-brand-secondary {
    color: var(--brand-secondary) !important;
}
/* Force correct font weights instead of Tailwind - font paid 130326 myfonts.com #7222260 */
.font-medium {
    font-family: "UniformMedium", sans-serif !important;
    font-weight: normal !important; /* Prevent Tailwind override */
}

.font-bold {
    font-family: "UniformBold", sans-serif !important;
    font-weight: normal !important; /* Prevent Tailwind override */
}
.text-green {color: var(--brand-main);}

/* Apply Uniform Regular as the default font for the entire site */
/* === GENERAL STYLES === */
body {
    font-family: "UniformRegular", sans-serif;
    background-color: #F7EFE9; /* Set background */
    color: var(--black); /* Default text color */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}


/* === HEADINGS & TEXT === */
h1, h2, h3, h4, h5 {
    font-family: "UniformMedium", sans-serif;
    color: var(--brand-main); /* Dark green main brand color */
}

/* === LINKS === */
a {
    color: var(--brand-accent-2); /* Blue accent */
    text-decoration: none;
}

a:hover {
    color: var(--brand-accent-3); /* Teal accent */
}

/* Use Uniform Bold for strong emphasis */
strong, .bold-text {
      font-family: "UniformBold", sans-serif !important;
    font-weight: normal !important; /* Prevent Tailwind override */
}

/* Use Uniform Medium for buttons */
/* === BUTTONS === */
button, .btn {
    font-family: "UniformMedium", sans-serif;
    background-color: var(--brand-main);
    color: var(--white);
    padding: 12px 20px;
    border-radius: 6px;
    transition: background-color 0.3s ease-in-out;
}

button:hover, .btn:hover {
    background-color: var(--brand-secondary); /* Purple accent */
}

/* ====== */
/* === HEADER & LOGO SECTION === */
/* ====================================================== */

/* Logo Scaling - Keeps Aspect Ratio */
.logo {
    width: 100%; /* Make it responsive */
    max-width: 200px; /* Maximum size for desktop */
    height: auto; /* Maintain aspect ratio */
    margin-left: 0; /* Forces it to stick to the left */
}
/* Extra spacing control for large screens */
@media (min-width: 1024px) {
    .logo {
        margin-left: 20px;
    }
}
/* Mobile Optimization */
@media (max-width: 768px) {
    .logo {
        margin-left: 30px;
        max-width: 150px; /* Keep it smaller on mobile */
    }
}
/* 🔥 Animate Logo & Menu Button on Page Load */
.logo, .menu-button {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 🔥 Fade & Slide Down Effect When Page Loads */
.animate-header .logo, 
.animate-header .menu-button {
    opacity: 1;
    transform: translateY(0);
}


/* Ensure smooth mobile menu transition */
[x-cloak] { display: none !important; }

/* Style the mobile menu background */
nav.fixed {
    background: var(--brand-main); /* Use your brand color */
    color: var(--white);
}


/* Make header transparent */
header {
    position: absolute;
    /* Ensure it sits over the hero section */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    /* Ensure it stays on top */
    background: transparent;
}

.logo-main {
    margin-left: 5.5%;
    margin-right: 5.5%
}

@media (max-width: 768px) {
    .logo-main {
        margin: auto
    }
}

/* ====== */
/* === HERO SECTION === */
/* ====================================================== */

/* Full-width hero section */

#hero-text-main-section {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    /* 🔥 Preloaded Background */
    background: url('/images/hero-bg.jpg') no-repeat center center;
    background-size: cover;
    background-color: #D5C9B6; /* Fallback */
}
/* ✅ Move Background Left by 50px on Mobile */
@media (max-width: 768px) {
    #hero-text-main-section {
        background-position: calc(50% - 100px) center;
    }
}
/* Hero Text Positioning */
#hero-text-main {
    max-width: 700px;
    margin-left: 5%; /* Keep text aligned to the left */
}

/* Responsive Fix: Center text on mobile */
@media (max-width: 768px) {
    #hero-text-main-section {
        justify-content: center; /* Center content */
        text-align: center;
    }

    #hero-text-main {
        margin-left: 0;
        max-width: 90%;
    }
}
main {
    max-width: 1200px; /* Set proper max width for the main content */
    margin: 0 auto;
    padding-top: 80px; /* Adjust for header */
}

/* ====== */
/* === 🍂 Floating Leaf Animation  === */
/* ====================================================== */
/* 🍂 Wrapper to handle focus */
#leaf-wrapper {
    position: fixed;
    right: 5%;
    bottom: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* 🌿 Natural Falling Effect (Fades In, Sways, and Stops) */
@keyframes fallLeaf {
    0% { 
        top: -100px;
        opacity: 0;
        transform: translateX(0) rotate(0deg);
    }
    10% { opacity: 0.1; }
    25% { opacity: 0.2; transform: translateX(30px) rotate(15deg); }
    40% { opacity: 0.4; transform: translateX(-30px) rotate(-15deg); }
    55% { opacity: 0.6; transform: translateX(25px) rotate(10deg); }
    70% { opacity: 0.8; transform: translateX(-25px) rotate(-10deg); }
    85% { opacity: 1; transform: translateX(15px) rotate(5deg); }
    100% { 
        top: calc(100vh - 150px);
        opacity: 1;
        transform: translateX(0) rotate(0deg);
    }
}

/* 🍃 Gentle Pulse Once Leaf Stops */
@keyframes leafPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); } 
    100% { transform: scale(1); }
}

/* 🌿 Floating Leaf */
#falling-leaf {
    position: fixed;
    top: -100px;
    right: 5%;
    width: 50px;
    opacity: 0;
    animation: fallLeaf 10s ease-in-out forwards, leafPulse 2s infinite ease-in-out 10s;
    cursor: pointer; /* Makes it clickable */
}

/* 🔥 Hidden Button (Initially) */
#leaf-button {
    position: fixed;
    top: calc(100vh - 127px); /* Match final leaf position */
    right: 5%;
    background: var(--brand-accent-3);
    color:var(--brand-main);
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 1rem;
    opacity: 0; /* Initially hidden */
    transform: translateX(30px); /* Hidden behind the leaf */
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
/* ✅ Desktop: Show on Hover */
@media (min-width: 769px) {
    #falling-leaf:hover + #leaf-button {
        opacity: 1;
        transform: translateX(-60px);
    }
}

/* ✅ Mobile: Fade in near bottom instead of falling */
@media (max-width: 768px) {
    @keyframes fallLeafMobile {
        0% { 
            top: 70vh;  /* Start lower */
            opacity: 0; 
            transform: translateX(0) rotate(0deg);
        }
        100% { 
            top: calc(100vh - 160px); /* Stop just above the bottom */
            opacity: 1;
            transform: translateX(0) rotate(0deg);
        }
    }

    #falling-leaf {
        animation: fallLeafMobile 3s ease-out forwards;
    }
    #leaf-button {
        top: calc(100vh - 137px); /* Match final leaf position */
    }
}


/* 🔥 When Leaf is Interacted With (Show Button) */
#falling-leaf:hover + #leaf-button,
#falling-leaf:focus + #leaf-button,
#leaf-button:hover {
    opacity: 1;
    transform: translateX(-60px); /* Slide out from behind the leaf */
}


/* === PRIMARY BUTTON STYLE === */
.btn-primary {
    display: inline-block;
    font-family: "UniformMedium", sans-serif;
    background-color: var(--brand-secondary); /* Teal */
    color: var(--brand-main);
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 1.125rem; /* lg */
    font-weight: bold;
    text-align: center;
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* Hover & Focus Effects */
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--brand-main); /* Purple */
    transform: translateY(-2px);
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.15);
}

/* Click Effect */
.btn-primary:active {
    transform: translateY(1px);
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .btn-primary {
        width: 100%;
        padding: 14px 20px;
        font-size: 1rem;
    }
}

/* ====== */
/* === Watermark Leaf After Header === */
/* ====================================================== */

/* 🌿 Watermark Leaf */
.watermark-leaf {
    position: absolute;
    left: 1%; /* Slightly off-screen for better placement */
    top: 110%; /* Center vertically */
    width: 331px; /* Adjust size */
    height: 365px;
    background-image: url('/images/leaf.svg'); /* Make sure this path is correct */
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.25; /* 🔥 Subtle Watermark Effect */
    transform: translateY(-50%) rotate(10deg); /* Slight tilt */
    pointer-events: none; /* Prevents interaction */
    z-index: 1; /* Keep it behind content */
}

/* 🌿 Responsive Adjustments */
@media (max-width: 1024px) {
    .watermark-leaf {
        width: 250px; /* Smaller for tablets */
        left: 1%;
    }
}

@media (max-width: 768px) {
    .watermark-leaf {
        width: 150px; /* Smaller for mobile */
        left: 1%;
    }
}

/* ====== */
/* === MENU === */
/* ==================================== */

.social-icons {margin-top:50px!important}


/* ====== */
/* === Bullet Leafs === */
/* ==================================== */

.leaf-bullet {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #00453D; /* Your Brand Color */
    mask-image: url('/images/leaf.svg');
    -webkit-mask-image: url('/images/leaf.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
}
.bullets-neo.grid div {
    padding: 0 !important;
}
/* ====== */
/* === Service cards === */

.service-card svg {
  transition: transform 0.4s ease;
  transform-origin: center;
}

.service-card:hover svg {
  transform: scale(1.05) rotate(-19deg);
}

/* ====== */
/* === SPECIAL IMAGE MOVE AND TEXT APPEAR SECTION === */
/* ======================================================================== */

/* Video Section */
#hero-section {
    height: 70vh;
    color: var(--white);
}

#video-container {
    position: absolute;
    max-width: 100vw; /* Ensures it never overflows */
    width: 100%;
    height: 70vh; /* Adjust height for mobile */
    height: calc(100vh - 10em);
    top: 0;
    left: 0;
    transition: all 0.7s ease-in-out;
}

/* Default (Desktop) - Text is to the right */
#hero-text {
    position: absolute;
    opacity: 0;
    /* background-color: var(--black); Dark text box */
    color: var(--black);
    width: 45%;
    max-width: 700px;
    right: -50%;
    top: 50%;
    transform: translateY(-50%);
    padding: 20px;
    transition: opacity 0.3s ease, right 1.5s ease;
}

/* Adjust for Small Screens */
/* Mobile: Text should be BELOW video */
@media (max-width: 768px) {
    #hero-section {
        height: auto !important;  /* Remove forced height */
    min-height: 100vh;  /* Only keep min-height */
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: 30px;
    }

    #video-container {
        position: relative;
        width: 100%;
        height: 50vh;
        transition: height 0.7s ease-in-out;
    }

    #hero-text {
        position: relative !important; /* Ensure text is placed below */
        width: 90%;
        max-width: 100%;
        margin-top: 20px; /* Space between video and text */
        right: 0 !important; /* Remove right positioning */
        transform: none !important; /* Prevent any shifting */
        opacity: 1;
        padding: 15px;
    }
}
@media (min-width: 769px) {
    #video-container {
        margin-left: -50px;
        /* Move it left */
        width: calc(100% + 50px);
        /* Extend width to avoid cropping */
    }
}
/* === GRID & SECTIONS === */
/* .grid div {
    color: var(--brand-main);
    padding: 20px;
} */
/* Better */
.grid > .grid-item {
  color: var(--brand-main); 
  padding: 20px; 
}
.bg-gray-100 {
    background-color: #F7EFE9; /* Override Tailwind */
}

/* ✅ Service Card Styling */
.service-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

/* ✅ Hover Effect (Subtle Apple-style lift) */
.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

/* ✅ Service Icon */
.service-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    object-fit: cover;
    border-radius: 50%;
}

/* ✅ Title */
.service-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--brand-main);
}

/* ✅ Text */
.service-text {
    color: #666;
    font-size: 1rem;
    margin-top: 0.5rem;
}


/* === FOOTER (If needed) === */
footer {
    background-color: var(--brand-main);
    color: var(--white);
    padding: 20px;
    text-align: center;
}
footer a {
    color: var(--white);
}


footer p {
    color: var(--white);
    text-align: left;
}

@media (max-width: 768px) {
    footer p {
   
        text-align: center;
    }

}

.envelope {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  perspective: 1000px;
}

.envelope__flap {
  z-index: 3;
  position: absolute;
  height: 300px;
  width: 300px;
  overflow: hidden;
  transform-style: preserve-3d;
  transform-origin: top;
  transition: all 0.5s linear;
  animation: openEnvelope 9s 4s infinite;
}

.envelope__flap::before {
  content: '';
  position: absolute;
  top: -205px;
  background-color: #fff;
  height: 100%;
  width: 100%;
  display: block;
  transform: rotate(45deg);
  border-radius: 8px;
}

.envelope__inside {
  z-index: 2;
  position: absolute;
  height: 300px;
  width: 300px;
  overflow: hidden;
}

.envelope__inside::before {
  content: '';
  position: absolute;
  top: -210px;
  background-color: #00453D;
  box-shadow: inset 0 0 30px rgba(32, 171, 174, 0.25);
  height: 100%;
  width: 100%;
  display: block;
  transform: rotate(45deg);
  border-radius: 8px;
}

.envelope__body {
  z-index: 1;
  background-color: #6D8B75;
  width: 300px;
  height: 200px;
  border-radius: 0 0 8px 8px;
  position: absolute;
  top: 1px;
}

@keyframes openEnvelope {
  0% { transform: rotateX(0); }
  25% { transform: rotateX(180deg); }
  90% { transform: rotateX(0); }
}
/* ✨ Animation wrapper for grow-in / fade-out */
.envelope-animate {
  animation: envelopeReveal 6s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes envelopeReveal {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  10% {
    transform: scale(1);
    opacity: 1;
  }
  75% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}






.envelope__letter {
  position: absolute;
  width: 180px;
  height: 120px;
  background-color: white;
  top: 40px;
  left: 62px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  opacity: 0;
  animation: dropLetter 9s 2.2s infinite;
  z-index: 2;
  overflow: hidden;
}

/* Writing lines */
.envelope__letter::before,
.envelope__letter::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  height: 2px;
  background-color: #00453D; /* dark green writing */
  border-radius: 2px;
  opacity: 0.6;
}

.envelope__letter::before {
  top: 30px;
}

.envelope__letter::after {
  top: 50px;
}
.envelope__letter::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 15px;
  right: 15px;
  height: 2px;
  background-color: #00453D;
  opacity: 0.6;
  border-radius: 2px;
  box-shadow:
    0 10px 0 #00453D,
    0 20px 0 #00453D,
    0 30px 0 #00453D,
    0 40px 0 #00453D;
}


@keyframes dropLetter {
  0%, 20% {
    transform: translateY(0);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  45% {
    transform: translateY(80px); /* slide downward */
    opacity: 1;
  }
  75% {
    transform: translateY(80px);
    opacity: 1;
  }
  90%, 100% {
    transform: translateY(80px);
    opacity: 0;
  }
}
.letter-image {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 40px;
  height: 40px;
  background-color: #d5c9b6; /* Nutrio light beige */
  border-radius: 4px;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.15);
}

/* custom.css */

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

.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}

.fade-in-up.visible {
  animation: fadeInUp 0.8s ease-out forwards;
}