:root {
    --primary-green: #54CE0B;
    --dark-green: #2F7505;
    --soft-green: #E9F8E3;
    --dark-text: #1F2D1F;
    --light-text: #6c757d;
    --white: #FFFFFF;
    --accent-blue: #2BB0ED;
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.5);
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.05);
    --shadow-3d: 0 20px 40px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.05);
    --gradient-primary: linear-gradient(135deg, #54CE0B 0%, #2BB0ED 100%);
    --gradient-dark: linear-gradient(135deg, #1f2d1f 0%, #0f170f 100%);
    --transition-speed: 0.3s;
}

html {
    scroll-behavior: smooth;
    overflow-y: scroll;
    /* Prevents layout shift (shaking) between pages */
}

body {
    font-family: 'Open Sans', sans-serif;
    color: var(--dark-text);
    background-color: #f8f9fa;
    /* Matches standard bootstrap/light theme better */
    overflow-x: hidden;
    line-height: 1.6;
}

/* 3D Icon Utilities */
.icon-3d-wrapper {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: linear-gradient(145deg, #ffffff, #e6e6e6);
    box-shadow: 20px 20px 60px #d9d9d9, -20px -20px 60px #ffffff;
    margin: 0 auto 1.5rem;
    transition: transform 0.4s ease;
    font-size: 2.5rem;
}

.service-card:hover .icon-3d-wrapper {
    transform: translateY(-10px) rotateY(15deg) rotateX(15deg);
}

/* Gradient Text Utility */
.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    /* Standard property */
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* Fallback */
    display: inline-block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
}

.btn-primary {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
}

.btn-primary:hover {
    background-color: #46b009;
    border-color: #46b009;
}

.btn-success {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
}

.btn-success:hover {
    background-color: #46b009;
}

/* Navbar Redesign - Compact Glassmorphism */
.navbar {
    background: rgba(255, 255, 255, 0.7);
    /* Translucent White */
    backdrop-filter: blur(30px);
    /* Heavy Blur for Glass effect */
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    /* Subtle white border */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border-radius: 50px;
    /* Pill shape */
    padding: 0.4rem 1.2rem;
    /* REDUCED Padding for Compactness */
    margin: 15px auto;
    /* Slightly less margin */
    width: 90%;
    max-width: 1100px;
    /* Reduced width max for compact look */
    left: 0;
    right: 0;
    transition: all 0.3s ease;
    z-index: 9999;
}

/* Navbar Logo */
.navbar-brand img {
    height: 75px;
    /* Reduced to fit compact navbar */
    width: auto;
    transition: transform 0.3s ease;
    background: transparent !important;
    border-radius: 0;
    /* No radius needed for transparent logo */
    mix-blend-mode: normal;
    /* Logo is clean PNG */
}

.navbar-brand:hover img {
    transform: scale(1.05);
}

/* Nav Links - Compact & Visible */
.navbar .nav-link {
    font-size: 1rem !important;
    /* Standardized size */
    /* Slightly reduced for compactness */
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #2c3e50;
    /* Dark text for visibility on all pages */
    padding: 8px 18px !important;
    /* Reduced spacing between words */
    border-radius: 25px;
    margin: 0 2px;
    /* Tighter spacing */
    border: 1px solid transparent;
    transition: all 0.3s ease;
    letter-spacing: 0.3px;
    height: 40px;
    /* Compact height */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hover Effect */
.navbar-nav .nav-link:hover {
    color: var(--primary-green) !important;
    background: rgba(84, 206, 11, 0.1);
}

.navbar-brand:hover {
    color: var(--primary-green) !important;
}

/* Active State - Trendy Gradient Pill */
.navbar .nav-link.active {
    background: linear-gradient(135deg, #54CE0B 0%, #3bb307 100%);
    color: white !important;
    font-weight: 600 !important;
    /* Must match normal state */
    box-shadow: 0 4px 15px rgba(84, 206, 11, 0.3);
    border-color: transparent;
    /* Keep border transparent but present in box model */
}

/* Book Pickup Button - Consistent Styling */
/* Book Pickup Button - Dark Pill */
.navbar .btn-book-pickup {
    background-color: #151515 !important;
    /* Dark background */
    color: #ffffff !important;
    padding: 10px 28px !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    margin-left: 15px;
}

.navbar .btn-book-pickup:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}


/* Navbar Adjustments */
.navbar {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

/* Gallery Scroll Alignment Fix */
.gallery-scroll {
    justify-content: flex-start !important;
    /* Ensure first item is visible */
    padding-left: 10%;
    /* Center the content visually but allow scroll from start */
    padding-right: 10%;
}

@media (max-width: 768px) {
    .gallery-scroll {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Hero Section Redesign */
.hero-section {
    min-height: 100vh;
    height: auto;
    padding-top: 120px;
    /* Increased top padding for better spacing */
    padding-bottom: 100px;
    /* Increased bottom padding for dynamic form growth */
    position: relative;
    overflow: visible;
    /* Allow content to overflow if needed, or stick to hidden if background scaling is issue. visible is safer for form */
    margin-bottom: 0;
}

/* Hero Carousel (Background) */
#heroCarousel,
.hero-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-video-bg {
    object-fit: cover;
}

#heroCarousel .carousel-item {
    height: 100%;
    /* Changed from 100vh to 100% to fill parent */
}

#heroCarousel img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Dark Overlay for Readability */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    /* Darken background */
    z-index: 1;
}

/* Feature Pills in Hero */
/* Navbar Adjustments */
.navbar {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

/* Sticky Hero Content */
/* Sticky Hero Content */
.sticky-hero-content {
    position: sticky;
    top: 50vh;
    transform: translateY(-50%);
    z-index: 5;
}

@media (min-width: 992px) {
    .hero-content {
        margin-top: -80px;
        /* Align with form and move up */
    }
}

/* Feature Pills in Hero - White Boxes */
.feature-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    /* Solid White */
    padding: 12px 25px;
    border-radius: 50px;
    border: none;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    font-weight: 700;
    transition: transform 0.3s;
    color: var(--dark-text);
    /* Dark text for contrast */
}

.feature-pill:hover {
    transform: translateY(-3px);
    background: #f8f9fa;
}

.feature-pill i {
    color: var(--primary-green) !important;
}

/* Pickup Section (Separate) */
.pickup-section {
    position: relative;
    padding-bottom: 5rem;
    z-index: 10;
    margin-top: -50px;
    /* Slight overlap visually for connection */
}

/* Floating Form Card */
#pickup-form {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    margin-top: -110px !important;
    /* Moves form upward on desktop - Forced */
    scroll-margin-top: 100px;
    /* Fix for anchor scroll offset */
}

#pickup-form:hover {
    transform: translateY(-5px);
}

.animate-bounce {
    animation: bounce 2s infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .hero-section {
        min-height: auto;
        padding-bottom: 60px;
        text-align: center;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-features {
        justify-content: center;
        flex-wrap: wrap;
    }

    .pickup-section {
        margin-top: 0;
        padding-top: 0;
    }

    #pickup-form {
        margin-top: -20px;
        top: 0 !important;
        margin-bottom: 0 !important;
    }
}


.ripple-btn:active {
    transform: scale(0.95);
}

.glass-btn {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.glass-btn:hover {
    background: white;
    color: var(--primary-green);
    border-color: var(--primary-green);
}

.hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(233, 248, 227, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%);
    z-index: 1;
}

.hero-title {
    opacity: 0;
    transform: translateY(20px);
}

.feature-badge {
    background: white;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Glassmorphism Card */
.glass-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    padding: 30px !important;
    /* Reduced from default */
}

.page-bg-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(135deg, #e9f8e3 0%, #ffffff 50%, #d1f0ff 100%);
}

/* Added Items List Refinement */
.added-items-scroll {
    max-height: 250px;
    overflow-y: auto;
    padding-right: 8px;
}

.added-items-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.added-items-scroll::-webkit-scrollbar-thumb {
    background: #eee;
    border-radius: 10px;
}

.added-item-row {
    background: #fdfdfd;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    margin-bottom: 8px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.added-item-icon {
    width: 40px;
    height: 40px;
    background: rgba(84, 206, 11, 0.08);
    color: var(--primary-green);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.cart-item-img-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.page-bg-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(40px);
    /* Reduced blur for visibility */
    -webkit-backdrop-filter: blur(40px);
}

.bg-blob {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.6;
    z-index: -1;
}

.blob-1 {
    background: #54CE0B;
    top: 10%;
    right: 10%;
    width: 600px;
    height: 600px;
}

.blob-2 {
    background: #2BB0ED;
    bottom: 10%;
    left: 10%;
    width: 600px;
    height: 600px;
}

/* Refined Typography */
body {
    font-size: 0.9rem;
}

.form-step h5,
.form-step h4 {
    font-size: 1.25rem !important;
    margin-bottom: 0.75rem !important;
}

.form-label {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: #555;
}

.form-control,
.form-select {
    font-size: 0.9rem !important;
    padding: 0.6rem 0.75rem !important;
}

.input-group-text {
    font-size: 0.9rem !important;
}

/* Booking Page Specifics */
.booking-section-wrapper {
    min-height: 100vh;
    width: 100%;
    padding-top: 130px;
    /* Clearance for fixed navbar */
    padding-bottom: 50px;
    position: relative;
    z-index: 1;
}

/* Compact Form Tweaks */
.form-step h5,
.form-step h4 {
    margin-bottom: 1rem !important;
}

.form-step .row.g-4 {
    --bs-gutter-y: 1rem;
}

.booking-progress-container {
    margin-bottom: 1.5rem !important;
}

.section-padding {
    padding: 40px 0;
}

/* Horizontal Date Picker Custom Scrollbar */
.date-picker-horizontal::-webkit-scrollbar {
    height: 6px;
}

.date-picker-horizontal::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.date-picker-horizontal::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.date-picker-horizontal::-webkit-scrollbar-thumb:hover {
    background: var(--primary-green, #54CE0B);
}

.pickup-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (min-width: 1200px) {
    .pickup-card:hover {
        transform: translateY(-5px) rotateX(2deg);
        box-shadow: 0 15px 40px rgba(31, 45, 31, 0.15);
    }
}

/* Form Styles */
.form-step {
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* Vertical Category Grid */
.category-scroll-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    max-height: 230px;
    /* Shows ~2 rows before scrolling */
    overflow-y: auto;
    padding: 5px;
    padding-right: 10px;
}

.category-scroll-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.category-scroll-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.category-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.category-card {
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #fdfdfd;
    /* Soft tint */
    border: 1.5px solid #edf2f7;
    border-radius: 12px;
    padding: 15px 10px;
    text-align: center;
}

.category-card:hover {
    transform: translateY(-5px);
    background: #ffffff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.category-card.selected {
    background: #ffffff;
    border-color: var(--primary-green) !important;
    box-shadow: 0 10px 25px rgba(84, 206, 11, 0.15);
}

.category-card i,
.category-card img.category-img-icon {
    width: 100px !important;
    height: 100px !important;
    max-width: 100px !important;
    max-height: 100px !important;
    object-fit: contain;
    margin: 0 auto 10px;
    display: block;
}

.category-card i {
    font-size: 1rem !important;
    color: var(--primary-green) !important;
    line-height: 1;
}

.category-card .category-name {
    font-weight: 600;
    font-size: 0.8rem;
    color: #444;
}

.addr-type-card {
    cursor: pointer;
    transition: all 0.2s;
    background: #fdfdfd;
    border: 1.5px solid #edf2f7;
    border-radius: 10px;
    padding: 10px !important;
    /* Compact padding */
}

.addr-type-card i {
    font-size: 1.2rem !important;
    /* Smaller icons */
    margin-bottom: 5px !important;
}

.addr-type-card .small {
    font-size: 0.75rem !important;
}

.addr-type-card:hover,
.addr-type-card.active {
    background: white;
    border-color: var(--primary-green) !important;
    box-shadow: 0 4px 15px rgba(84, 206, 11, 0.1);
    transform: translateY(-2px);
}

.addr-type-card i {
    color: var(--primary-green) !important;
}

/* Responsive height tweaks */
@media (max-width: 768px) {
    .section-padding {
        padding: 40px 0;
    }

    .glass-card {
        padding: 25px 15px !important;
    }
}

/* Success Checkmark Animation */
.success-checkmark {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

.check-icon {
    width: 80px;
    height: 80px;
    position: relative;
    border-radius: 50%;
    box-sizing: content-box;
    border: 4px solid #4CAF50;
}

.check-icon::before {
    top: 3px;
    left: -2px;
    width: 30px;
    transform-origin: 100% 50%;
    border-radius: 100px 0 0 100px;
}

.check-icon::after {
    top: 0;
    left: 30px;
    width: 60px;
    transform-origin: 0 50%;
    border-radius: 0 100px 100px 0;
    animation: rotate-circle 4.25s ease-in;
}

/* Time Slot Selection */
.time-slot-card {
    transition: all 0.2s;
    background: rgba(255, 255, 255, 0.6);
}

.time-slot-card:hover,
.time-slot-card.selected {
    background: white;
    border-color: var(--primary-green) !important;
    box-shadow: 0 4px 10px rgba(31, 45, 31, 0.1);
    transform: translateY(-2px);
}

.time-slot-card.selected {
    background: var(--primary-green) !important;
    color: white !important;
}

.icon-line {
    height: 5px;
    background-color: #4CAF50;
    display: block;
    border-radius: 2px;
    position: absolute;
    z-index: 10;
}

.icon-line.line-tip {
    top: 46px;
    left: 14px;
    width: 25px;
    transform: rotate(45deg);
    animation: icon-line-tip 0.75s;
}

.icon-line.line-long {
    top: 38px;
    right: 8px;
    width: 47px;
    transform: rotate(-45deg);
    animation: icon-line-long 0.75s;
}

.icon-circle {
    top: -4px;
    left: -4px;
    z-index: 10;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: absolute;
    box-sizing: content-box;
    border: 4px solid rgba(76, 175, 80, .5);
}

.icon-fix {
    top: 8px;
    width: 5px;
    left: 26px;
    z-index: 1;
    height: 85px;
    position: absolute;
    transform: rotate(-45deg);
    background-color: transparent;
}

@keyframes icon-line-tip {
    0% {
        width: 0;
        left: 1px;
        top: 19px;
    }

    54% {
        width: 0;
        left: 1px;
        top: 19px;
    }

    70% {
        width: 50px;
        left: -8px;
        top: 37px;
    }

    84% {
        width: 17px;
        left: 21px;
        top: 48px;
    }

    100% {
        width: 25px;
        left: 14px;
        top: 46px;
    }
}

@keyframes icon-line-long {
    0% {
        width: 0;
        right: 46px;
        top: 54px;
    }

    65% {
        width: 0;
        right: 46px;
        top: 54px;
    }

    84% {
        width: 55px;
        right: 0px;
        top: 35px;
    }

    100% {
        width: 47px;
        right: 8px;
        top: 38px;
    }
}

.animate-pop {
    animation: pop 0.5s ease-out;
}

@keyframes pop {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* How It Works - Horizontal Scroll */
.how-it-works-section {
    width: 100%;
    /* height set dynamically via JS usually, but we start with auto */
    background-color: #f8f9fa;
    margin-top: 50px;
    /* Added spacing from hero section */
}

.scrolling-wrapper {
    width: 600%;
    /* 6 panels */
    height: 100vh;
    display: flex;
    flex-wrap: nowrap;
}

.scroll-panel {
    width: 100vw;
    height: 100vh;
    flex-shrink: 0;
}

.step-icon i {
    transition: transform 0.3s ease;
}

.step-panel:hover .step-icon i {
    transform: scale(1.2) rotate(10deg);
}

.animated-arrow {
    animation: bounceRight 2s infinite;
}

@keyframes bounceRight {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(0);
    }

    40% {
        transform: translateX(10px);
    }

    60% {
        transform: translateX(5px);
    }
}

/* Mobile Fallback: Disable horizontal layout on small screens if we want pure vertical, 
   but for GSAP ScrollTrigger we often handle this via matchMedia logic in JS. 
   However, for basic styling let's keep it horizontal for the trigger to pin. */

@media (max-width: 767px) {
    .scrolling-wrapper {
        width: 100%;
        height: auto;
        flex-direction: column;
    }

    .scroll-panel {
        width: 100%;
        height: auto;
        padding: 60px 20px;
    }

    .how-it-works-section {
        height: auto;
    }
}

/* Services / Features Styles */
.service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid transparent;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    background: white !important;
    border-color: var(--soft-green);
}

.service-card .icon-wrapper {
    transition: transform 0.3s ease;
}

.service-card:hover .icon-wrapper {
    transform: scale(1.1) rotateY(360deg);
}

/* Map Pins */
.map-pin {
    position: absolute;
    transform: translate(-50%, -100%);
    cursor: pointer;
    transition: transform 0.2s;
}

.map-pin:hover {
    transform: translate(-50%, -110%) scale(1.2);
}

.pin-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: rgba(220, 53, 69, 0.4);
    border-radius: 50%;
    animation: pulse 2s infinite;
    z-index: -1;
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}

/* Gallery Scroll */
.gallery-scroll::-webkit-scrollbar {
    height: 6px;
}

.gallery-scroll::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.gallery-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Footer */
/* Vision Section */
.vision-card {
    transition: all 0.3s ease;
}

.vision-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

.vision-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.vision-card.expanded .vision-content {
    max-height: 100px;
}

.toggle-icon {
    transition: transform 0.3s ease;
}

.vision-card.expanded .toggle-icon {
    transform: rotate(45deg);
}

/* Eco Borders for Service Cards */
.border-eco {
    border: 1px solid var(--soft-green) !important;
}

.border-eco:hover {
    border-color: var(--primary-green) !important;
}

/* Gallery Enhanced */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.gallery-card {
    transition: all 0.3s ease;
}

.gallery-card-overlay {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    /* Ensure content is strictly constrained */
    height: 300px;
    /* Fixed height for consistency */
    flex-shrink: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.gallery-card-overlay:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.gallery-card-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-card-overlay:hover img {
    transform: scale(1.1);
}

.half-gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 60%, transparent 100%);
    padding: 20px;
    color: white;
    z-index: 2;
    /* Ensure visibility of all content including read more */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    text-align: left;
    min-height: 60%;
    /* Ensure gradient covers enough */
}

.zoom-img {
    transition: transform 0.5s ease;
}

.gallery-card:hover .zoom-img {
    transform: scale(1.1);
}

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

/* Footer Enhancements */
.filter-white {
    filter: brightness(0) invert(1);
}

.hover-white:hover {
    color: white !important;
}

.social-icon {
    transition: transform 0.2s;
}

.social-icon:hover {
    transform: translateY(-3px);

    /* Badges and Spacing */
    .letter-spacing-2 {
        letter-spacing: 2px;
    }

    .step-badge {
        text-transform: uppercase;
        font-size: 0.8rem;
        letter-spacing: 1px;
    }

    /* Ensure images cover panel */
    .object-fit-cover {
        object-fit: cover;
    }
}

/* Mobile responsive adjustments for panels */
@media (max-width: 768px) {
    .scrolling-wrapper {
        flex-direction: column;
        width: 100%;
        overflow-y: auto;
    }

    .scroll-panel {
        width: 100vw !important;
        /* Force full width on mobile */
        height: auto !important;
        /* Allow height to grow */
        min-height: 100vh;
        /* Minimum full screen per step on mobile */
    }

    /* Fix sticky behaviour if needed or disable hijack on mobile */
}

/* =========================================
   REDESIGN EXTENSIONS (Antigravity Style)
   ========================================= */

/* Centered Hero Layout */
.hero-content.text-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.hero-subtitle {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
}

.btn-book-now-hero {
    background-color: var(--primary-green);
    color: white !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 18px 45px !important;
    font-size: 1.2rem !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: none;
}

.btn-book-now-hero:hover {
    background-color: #46b009;
    color: white !important;
    transform: scale(1.08) translateY(-8px);
    box-shadow: 0 20px 40px rgba(84, 206, 11, 0.4);
}

.hero-action-area {
    margin-top: 3rem;
    animation: fadeIn 1s ease-out 0.5s both;
}

/* Feature Pill Refinement for Center Align */
.hero-features {
    animation: fadeIn 1s ease-out 0.3s both;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* New Impact Section Styles */
.impact-hero-section {
    position: relative;
    background: var(--gradient-dark);
    color: white;
    overflow: hidden;
    padding: 100px 0;
}

.impact-bg-abstract {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.impact-stat-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 2rem;
    transition: transform 0.3s ease, background 0.3s ease;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.impact-stat-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(84, 206, 11, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.impact-stat-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.1);
}

.impact-stat-card:hover::before {
    opacity: 1;
}

.stat-number {
    font-size: 3.5rem;
    font-weight: 800;
    background: linear-gradient(to right, #ffffff, #54CE0B);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem;
}

/* Mission & Vision Split Layout */
.mv-split-section {
    display: flex;
    flex-wrap: wrap;
    min-height: 650px;
    /* Increased slightly for better spacing */
}

.mv-side {
    flex: 1;
    min-width: 350px;
    /* Ensure decent width on mobile wrap */
    position: relative;
    display: flex;
    /* Make content stretch */
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.mv-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform 0.8s ease;
    z-index: 1;
}

.mv-side:hover .mv-bg {
    transform: scale(1.05);
    /* Subtle zoom effect */
}

.mv-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Stronger gradient for readability: Dark at bottom/center */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3));
    z-index: 2;
    transition: background 0.3s ease;
}

.mv-side:hover .mv-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.4));
}

.mv-content {
    position: relative;
    z-index: 3;
    padding: 6rem 4rem 4rem;
    /* Increased top padding for "upper side" but balanced look */
    color: white;
    max-width: 650px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Aligned to top as requested */
    /* User requested "background light gradient" for text visibility.
       Adding a subtle glass/gradient backing to the content area itself to unify the look. */
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.2), transparent);
    backdrop-filter: blur(2px);
}

/* Feature Cards for Mission */
.mv-feature-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    flex: 1;
    transition: transform 0.3s ease, background 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Center text inside the card */
    align-items: flex-start;
    min-width: 200px;
    /* Prevent squishing */
}

/* Ensure equal height behavior and alignment */
.mv-side h5 {
    display: inline-block;
    padding-bottom: 5px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    margin-bottom: 1.5rem !important;
}

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

/* Why Choose Us - Antigravity Float */
.floating-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    padding: 2rem 0;
}

/* Map & Stats Redesign */
.map-section {
    perspective: 1000px;
}

.map-container {
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: var(--shadow-3d);
    position: relative;
    overflow: hidden;
    background: #eef2f3;
}

.map-overlay-bottom {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    /* Light green gradient as requested to differentiate from map */
    background: linear-gradient(135deg, rgba(240, 253, 244, 0.95), rgba(220, 252, 231, 0.9));
    backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 1.5rem;
    z-index: 1000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-around;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.stat-item-3d {
    text-align: center;
    transition: transform 0.3s ease;
}

.stat-item-3d:hover {
    transform: translateY(-5px);
}

.stat-icon-3d {
    font-size: 2.2rem !important;
    background: linear-gradient(135deg, #e0f7fa 0%, #ffffff 100%);
    width: 80px !important;
    height: 80px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto 12px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1), -5px -5px 15px rgba(255, 255, 255, 0.8);
    color: var(--primary-green);
}

/* Custom 3D Pin for Map */
.pin-3d {
    width: 30px;
    height: 30px;
    background: radial-gradient(circle at 30% 30%, #ff5f6d, #ffc371);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    border: 2px solid white;
    animation: bouncePin 2s infinite;
}

.pin-3d::after {
    content: '';
    width: 14px;
    height: 14px;
    margin: 6px 0 0 6px;
    background: rgba(255, 255, 255, 0.8);
    position: absolute;
    border-radius: 50%;
}

@keyframes bouncePin {

    0%,
    100% {
        transform: translateY(0) rotate(-45deg);
    }

    50% {
        transform: translateY(-10px) rotate(-45deg);
    }
}

/* Gallery Overlay Style */
.gallery-card-overlay {
    height: 400px;
    /* Taller for drama */
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    flex-shrink: 0;
}

.gallery-card-overlay:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.gallery-card-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.gallery-card-overlay:hover img {
    transform: scale(1.15);
}

.half-gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    /* Left alignment */
    text-align: left;
    /* Left text */
    padding: 2rem;
    color: white;
    transition: padding-bottom 0.3s ease;
}

.gallery-card-overlay:hover .half-gradient-overlay {
    padding-bottom: 2.5rem;
}

/* Visible Scrollbar for Horizontal Scroll */
.gallery-scroll {
    padding-bottom: 20px;
}

.gallery-scroll::-webkit-scrollbar {
    height: 8px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

.gallery-scroll::-webkit-scrollbar-thumb {
    background: var(--primary-green);
    border-radius: 10px;
}

/* ... previous scrollbar styles ... */

/* Gallery Navigation Buttons */
.gallery-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    border: none;
}

.gallery-nav-btn:hover {
    transform: translateY(-50%) scale(1.1);
}

.gallery-nav-btn i {
    font-size: 1.2rem;
}

.prev-btn {
    left: -25px;
}

.next-btn {
    right: -25px;
}

/* Hide buttons on mobile if touch scroll is easier, or keep them */
@media (max-width: 768px) {
    .gallery-nav-btn {
        display: none;
    }
}

/* Footer Redesign - Stylish & Separated */
/* Footer Modernization */
.footer-light {
    position: relative;
    padding: 60px 0 30px;
    /* More compact */
    margin-top: 100px;
    /* Significant separation from impact section */
    background: linear-gradient(180deg, #f0fff4 0%, #dcfce7 100%);
    /* Slightly richer light green gradient */
    /* Physical separation from previous section */
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

/* Texture Background */
.footer-light::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../assets/images/footer-texture.png');
    background-size: 400px;
    opacity: 0.1;
    /* Increased opacity for better visibility */
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
}

.footer-light .container {
    position: relative;
    z-index: 1;
}

.footer-light h5 {
    color: var(--dark-green);
    letter-spacing: 0.5px;
    margin-bottom: 1.5rem;
    /* Tighter spacing */
    font-weight: 700;
}

.footer-light p,
.footer-light li,
.footer-light span {
    color: #555;
    line-height: 1.6;
}

.footer-light a {
    color: #666;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-block;
}

.footer-light a:hover {
    color: var(--primary-green);
    transform: translateX(5px);
    text-shadow: 0 2px 4px rgba(84, 206, 11, 0.1);
}

/* Interactive Contact Items */
.contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.8);
    /* Glassy feel */
    backdrop-filter: blur(5px);
    padding: 12px 20px;
    /* Compact padding */
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.contact-item:hover {
    transform: translateY(-3px) scale(1.02);
    background: white;
    box-shadow: 0 8px 15px rgba(84, 206, 11, 0.1);
    border-color: var(--primary-green);
}

.contact-icon-box {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #e6f4ea, #ffffff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-green);
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.contact-item:hover .contact-icon-box {
    transform: rotate(15deg);
    background: var(--primary-green);
    color: white;
}

/* Social Buttons */
.footer-light .social-icon-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    color: var(--primary-green);
    transition: all 0.3s ease;
}

.footer-light .social-icon-btn:hover {
    background: var(--primary-green);
    color: white;
    transform: translateY(-3px) rotate(10deg);
    box-shadow: 0 8px 20px rgba(84, 206, 11, 0.25);
}

/* 3D Category Card Enhancements */
.category-card {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
    box-shadow: 5px 5px 10px #d9d9d9, -5px -5px 10px #ffffff;
    border: 1px solid transparent;
    border-radius: 16px;
    height: 100%;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 8px 8px 15px #d1d1d1, -8px -8px 15px #ffffff;
}

.category-card.selected {
    border-color: var(--primary-green) !important;
    background: #f0fff4;
    /* Very light green */
    transform: scale(0.98);
    box-shadow: inset 3px 3px 6px #d1e8d1, inset -3px -3px 6px #ffffff;
}

.category-card .icon-3d {
    transition: transform 0.3s ease;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.2));
}

.category-card:hover .icon-3d,
.category-card.selected .icon-3d {
    transform: scale(1.1) rotate(5deg);
    color: var(--primary-green) !important;
}

/* Selection Badge */
.selection-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--primary-green);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    animation: popBadge 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
}

@keyframes popBadge {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    80% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Selected Category Bar (Step 4) */
.cat-pill {
    padding: 8px 16px;
    border-radius: 50px;
    background: white;
    border: 1px solid #e0e0e0;
    color: #666;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.cat-pill:hover {
    background: #fafafa;
    transform: translateY(-1px);
}

.cat-pill.active {
    background: var(--primary-green);
    color: white;
    border-color: var(--primary-green);
    box-shadow: 0 4px 10px rgba(84, 206, 11, 0.3);
}

.cat-pill .pill-badge {
    background: rgba(255, 255, 255, 0.3);
    color: inherit;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cat-pill.active .pill-badge {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Hero Animations & Floating Elements */
.hero-animated-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 0;
}

.gradient-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.6;
    animation: blobFloat 10s infinite alternate;
}

.blob-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(84, 206, 11, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
    top: -100px;
    left: -100px;
    animation-duration: 15s;
}

.blob-2 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(43, 176, 237, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
    bottom: -50px;
    right: -50px;
    animation-delay: -5s;
}

.blob-3 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(233, 248, 227, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-duration: 20s;
}

@keyframes blobFloat {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(30px, -30px) scale(1.1);
    }
}

.hero-floating-icons {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
}

.float-item {
    position: absolute;
    color: rgba(47, 117, 5, 0.1);
    font-size: 2rem;
    animation: floatIcon 6s ease-in-out infinite;
}

.float-item-1 {
    top: 15%;
    left: 10%;
    animation-delay: 0s;
    font-size: 3rem;
}

.float-item-2 {
    top: 20%;
    right: 15%;
    animation-delay: 2s;
    font-size: 2.5rem;
}

.float-item-3 {
    bottom: 15%;
    left: 20%;
    animation-delay: 4s;
}

.float-item-4 {
    bottom: 25%;
    right: 10%;
    animation-delay: 1s;
    font-size: 3.5rem;
}

@keyframes floatIcon {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(10deg);
    }
}

/* =========================================
   About Us Page Styles
   ========================================= */

/* Hero Slider */
.about-hero {
    height: 60vh;
    /* Reduced height */
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-top: 0;
    /* Removed gap as requested */
}

/* Fix for double layer/overlay issue */
.about-hero::after {
    display: none;
}

/* Ensure full height propagation */
.about-hero .carousel,
.about-hero .carousel-inner,
.about-hero .carousel-item {
    height: 100%;
}

.about-hero .carousel-caption {
    position: absolute;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
    z-index: 2;
}

.overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
    z-index: 1;
}

/* Section Spacing */
.section-padding {
    padding-top: 100px;
    padding-bottom: 100px;
}

/* Animations */
.animate-slide-up {
    animation: slideUpFade 1s ease forwards;
    opacity: 0;
    transform: translateY(30px);
}

.delay-100 {
    animation-delay: 0.2s;
}

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

/* Company Story Timeline */
.story-timeline {
    position: relative;
    padding-left: 2rem;
    border-left: 3px solid var(--primary-green);
    margin-left: 1rem;
}

.story-item {
    position: relative;
    padding-bottom: 3rem;
}

.story-item:last-child {
    border-left-color: transparent;
}

.story-icon {
    position: absolute;
    left: -2.9rem;
    top: 0;
    width: 60px;
    height: 60px;
    background: white;
    border: 3px solid var(--primary-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-green);
    font-size: 1.5rem;
    z-index: 2;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.story-item:hover .story-icon {
    background: var(--primary-green);
    color: white;
    transform: scale(1.1);
}

/* Value Cards */
.value-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(84, 206, 11, 0.2);
}

.value-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-green);
}

.border-eco {
    border-color: rgba(84, 206, 11, 0.3) !important;
}

/* Founder Section */
/* Founder Section Enhanced */
.founder-card-glass {
    background: white;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    height: 100%;
}

.founder-card-glass:hover {
    transform: translateY(-5px);
}

.founder-img-container {
    height: 400px;
    overflow: hidden;
    position: relative;
}

.founder-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.founder-card-glass:hover .founder-img-container img {
    transform: scale(1.05);
}

.founder-info-overlay {
    background: white;
    padding: 1.5rem;
    position: relative;
    z-index: 2;
    margin-top: -20px;
    border-radius: 20px 20px 0 0;
    text-align: center;
}

.founder-quote-modern {
    background: #f8fff9;
    border-left: 5px solid var(--primary-green);
    padding: 2rem;
    border-radius: 0 20px 20px 0;
    position: relative;
}

.founder-quote-modern i.fa-quote-left {
    opacity: 0.1;
    font-size: 4rem;
    position: absolute;
    top: 10px;
    left: 10px;
}

/* Certificate Modal */
.image-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-modal.show {
    display: flex;
    opacity: 1;
}

.modal-content-img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.image-modal.show .modal-content-img {
    transform: scale(1);
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    background: rgba(255, 255, 255, 0.1);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.close-modal:hover,
.close-modal:focus {
    color: white;
    background: rgba(255, 255, 255, 0.3);
    text-decoration: none;
    cursor: pointer;
}

/* Horizontal Scroll for Partners */
.partners-scroll-wrapper {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-green) #e0e0e0;
}

.partners-scroll-wrapper::-webkit-scrollbar {
    height: 8px;
}

.partners-scroll-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.partners-scroll-wrapper::-webkit-scrollbar-thumb {
    background: var(--primary-green);
    border-radius: 10px;
}

.partner-logo-item {
    display: inline-block;
    margin-right: 2rem;
    vertical-align: middle;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.partner-logo-item:hover {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.1);
}

/* Premium Feature Card (Why Scrap n Cash) */
.feature-card-premium {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    height: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.feature-card-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary-green);
    transform: scaleY(0);
    transition: transform 0.4s ease;
}

.feature-card-premium:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.feature-card-premium:hover::before {
    transform: scaleY(1);
}

.feature-icon-premium {
    width: 70px;
    height: 70px;
    background: #f8fff9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-green);
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    transition: all 0.4s ease;
}

.feature-card-premium:hover .feature-icon-premium {
    background: var(--primary-green);
    color: white;
    transform: rotateY(360deg);
}

/* Eco Impact Alternate Style */
.eco-impact-alt {
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
    /* Dark Teal Gradient */
    color: white;
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

.eco-stat-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 5px solid rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    position: relative;
    transition: all 0.3s ease;
}

.eco-stat-circle:hover {
    border-color: var(--primary-green);
    box-shadow: 0 0 30px rgba(46, 204, 113, 0.4);
    transform: scale(1.05);
}

.eco-stat-circle i {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.grayscale-hover i {
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.grayscale-hover:hover i {
    filter: none;
    opacity: 1;
    color: var(--primary-green);
}

/* Why Choose Us Hover */
.feature-card-hover {
    transition: all 0.3s ease;
    border-color: #eee;
}

.feature-card-hover:hover {
    box-shadow: 0 10px 20px rgba(84, 206, 11, 0.15);
    border-color: var(--primary-green);
    background: linear-gradient(145deg, #ffffff 0%, #f0fff4 100%);
}

.icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

/* Counter card icon badge - no border, clean soft background circle */
.counter-icon-badge {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    border: none !important;
    position: relative !important;
    box-sizing: border-box;
    flex-shrink: 0;
}

.bg-soft-green {
    background: rgba(84, 206, 11, 0.1);
}

.bg-soft-blue {
    background: rgba(54, 162, 235, 0.1);
}

.bg-soft-warning {
    background: rgba(255, 206, 86, 0.1);
}

/* Environment Stats */
.env-stat h2 {
    font-size: 3rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .about-hero {
        height: 60vh;
    }

    .about-hero .carousel-caption {
        padding-left: 0;
        text-align: center;
    }
}



.recognitions-scroll-wrapper {
    display: flex;
    overflow-x: auto;
    gap: 1.5rem;
    padding-bottom: 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-green) #f1f1f1;
    -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
}

.recognitions-scroll-wrapper::-webkit-scrollbar {
    height: 6px;
}

.recognitions-scroll-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.recognitions-scroll-wrapper::-webkit-scrollbar-thumb {
    background: var(--primary-green);
    border-radius: 10px;
}

.recognition-item {
    flex: 0 0 320px; /* Fixed width for the cards in row */
}

@media (max-width: 576px) {
    .recognition-item {
        flex: 0 0 260px;
    }
}

/* =========================================
   NEW PREMIUM CERTIFICATIONS (REDESIGN)
   ========================================= */

.cert-card-premium {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: white;
}

.cert-card-premium:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}

/* Blurred Background Layer */
.cert-bg-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 110%;
    /* Slight oversize for movement */
    height: 110%;
    background-size: cover;
    background-position: center;
    filter: blur(20px) brightness(0.9);
    z-index: 0;
    transition: transform 0.6s ease;
    margin: -5%;
    /* Offset the oversize */
}

.cert-card-premium:hover .cert-bg-blur {
    transform: scale(1.1);
}

/* Main Image (Contained) */
.cert-img-front {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    /* Ensures full image visibility */
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding: 20px;
    /* Spacing from edges */
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
    /* Shadow for the image itself */
}

.cert-card-premium:hover .cert-img-front {
    transform: scale(1.05) translateY(-5px);
}

.cert-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 50%, transparent 100%);
    color: white;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;
}

.cert-card-premium:hover .cert-overlay {
    opacity: 1;
    transform: translateY(0);
}

.cert-overlay h6 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.cert-overlay small {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Updated Numbers Card to match Premium Aesthetic */
.stat-card-premium {
    background: white;
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    height: 100%;
    transition: transform 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.stat-card-premium:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(84, 206, 11, 0.15);
    border-color: var(--primary-green);
}

.stat-card-premium .icon-box {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

/* =========================================
   TRACK STATUS PAGE STYLES
   ========================================= */

/* Top Summary Card */
.summary-card-lg {
    border-left: 5px solid var(--primary-green);
}

/* Horizontal Status Tracker */
.track-status-container {
    padding: 30px 0;
    position: relative;
    overflow-x: auto;
}

.step-wizard {
    display: flex;
    justify-content: space-between;
    position: relative;
    min-width: 600px;
    /* Ensure it doesn't break on small screens */
}

/* Gray Line Background */
.step-wizard::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    height: 4px;
    background: #e9ecef;
    z-index: 0;
    border-radius: 10px;
}

/* Green Progress Line */
.step-wizard-progress {
    position: absolute;
    top: 20px;
    left: 0;
    height: 4px;
    background: var(--primary-green);
    z-index: 1;
    width: 0%;
    /* Dynamic */
    transition: width 1s ease-in-out;
    border-radius: 10px;
}

.step-item {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 14%;
    /* Roughly 100/7 steps */
}

.step-circle {
    width: 40px;
    height: 40px;
    background: #fff;
    border: 3px solid #e9ecef;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    color: #ccc;
    font-weight: bold;
    transition: all 0.3s ease;
}

.step-label {
    font-size: 0.85rem;
    color: #999;
    font-weight: 600;
    transition: all 0.3s;
}

/* Active & Completed States */
.step-item.active .step-circle {
    border-color: var(--primary-green);
    background: #fff;
    color: var(--primary-green);
    box-shadow: 0 0 0 5px rgba(84, 206, 11, 0.2);
    animation: pulse-green 2s infinite;
}

.step-item.completed .step-circle {
    background: var(--primary-green);
    border-color: var(--primary-green);
    color: #fff;
}

.step-item.active .step-label,
.step-item.completed .step-label {
    color: var(--dark-text);
}

/* Live Progress Bar (Truck) */
.live-progress-container {
    background: #f8f9fa;
    border-radius: 15px;
    padding: 25px;
    position: relative;
    margin-bottom: 2rem;
}

.live-track-line {
    height: 8px;
    background: #e0e0e0;
    border-radius: 10px;
    position: relative;
    margin: 30px 0 10px;
}

.live-fill {
    height: 100%;
    background: repeating-linear-gradient(45deg,
            var(--primary-green),
            var(--primary-green) 10px,
            #46b009 10px,
            #46b009 20px);
    border-radius: 10px;
    width: 0%;
    transition: width 1.5s ease-out;
    position: relative;
}

/* Truck Icon Moving */
.moving-truck {
    position: absolute;
    right: -20px;
    top: -28px;
    font-size: 1.5rem;
    color: var(--primary-green);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
    transition: transform 0.3s;
}

.live-status-text {
    font-weight: 700;
    color: var(--primary-green);
    animation: fadeInOut 2s infinite alternate;
}

/* Executive Card */
.exec-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--soft-green);
}

.contact-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.contact-btn:hover {
    transform: scale(1.1);
}

/* Vertical Timeline */
.timeline-vertical {
    position: relative;
    padding-left: 30px;
    border-left: 2px solid #e9ecef;
    margin-left: 10px;
}

.timeline-item {
    position: relative;
    margin-bottom: 25px;
}

.timeline-dot {
    position: absolute;
    left: -36px;
    top: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e9ecef;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #e9ecef;
}

.timeline-item.completed .timeline-dot {
    background: var(--primary-green);
    box-shadow: 0 0 0 2px var(--primary-green);
}

.timeline-content h6 {
    margin-bottom: 2px;
    font-weight: 600;
}

.timeline-time {
    font-size: 0.75rem;
    color: #adb5bd;
}

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(84, 206, 11, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(84, 206, 11, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(84, 206, 11, 0);
    }
}

@keyframes fadeInOut {
    0% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .step-wizard {
        flex-direction: column;
        min-width: auto;
        padding-left: 20px;
    }

    .step-wizard::before {
        width: 4px;
        height: 100%;
        left: 39px;
        top: 0;
    }

    .step-wizard-progress {
        width: 4px !important;
        height: 0%;
        /* Vertical progress */
        left: 39px;
        top: 0;
        transition: height 1s ease;
    }

    .step-item {
        width: 100%;
        display: flex;
        align-items: center;
        text-align: left;
        margin-bottom: 20px;
        gap: 15px;
    }

    .step-circle {
        margin: 0;
    }
}

/* Interactivity Updates */
.step-item {
    cursor: default;
}

.step-item:hover .step-circle {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(84, 206, 11, 0.3);
    border-color: var(--primary-green);
}

.step-item:hover .step-label {
    color: var(--primary-green);
}

/* Contact Button Pulse */
.contact-btn {
    width: 50px;
    /* Slightly larger */
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: #4cd137;
    /* Bright Green */
    color: white;
    border: none;
    text-decoration: none;
    font-size: 1.2rem;
    animation: btnGlow 2s infinite;
}

@keyframes btnGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(76, 209, 55, 0.7);
    }

    50% {
        box-shadow: 0 0 0 15px rgba(76, 209, 55, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(76, 209, 55, 0);
    }
}

.contact-btn:hover {
    transform: scale(1.1) rotate(10deg);
    box-shadow: 0 10px 20px rgba(76, 209, 55, 0.4);
    color: white;
}

.contact-btn:active {
    transform: scale(0.95);
}

/* Live Badge Pulse */
.live-badge-pulse {
    animation: livePulse 2s infinite;
}

@keyframes livePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

/* Clickable Items Area */
.items-clickable {
    cursor: pointer;
    transition: background-color 0.2s;
    border-radius: 10px;
    padding: 10px;
    margin: -10px;
    position: relative;
}

.items-clickable:hover {
    background-color: rgba(84, 206, 11, 0.1);
}

.items-clickable:hover h5 {
    color: var(--primary-green) !important;
    text-decoration: underline;
}

/* Modal Styling */
.modal-content {
    border-radius: 20px;
    border: none;
    overflow: hidden;
}

.modal-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;
}

.modal-footer {
    border-top: none;
    background: #f8f9fa;
}

.exec-details-card {
    border: 1px solid var(--soft-green);
    background: linear-gradient(to bottom right, #ffffff, #f9fff6);
}

/* =========================================
   Redesigned Premium Footer (Light & Trendy)
   ========================================= */
.footer-light {
    background: linear-gradient(180deg, #ffffff 0%, #e8fce8 100%);
    /* Soft White to Mint Gradient */
    color: #2c3e50;
    padding-top: 80px;
    padding-bottom: 30px;
    position: relative;
    border-top-left-radius: 60px;
    /* Modern curved structure */
    border-top-right-radius: 60px;
    margin-top: 50px;
    overflow: hidden;
    box-shadow: 0 -10px 40px rgba(84, 206, 11, 0.05);
    /* Subtle green glow shadow */
    border-top: 1px solid rgba(84, 206, 11, 0.1);
}

/* Texture Pattern Overlay (Subtle dots) */
.footer-light::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(#54CE0B 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.05;
    pointer-events: none;
}

/* Footer Typography & Elements */
.footer-light h5 {
    color: #1a3c25;
    /* Dark Green Heading */
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 25px;
}

.footer-light p {
    color: #5a6a70;
    line-height: 1.6;
    font-weight: 500;
}

.footer-light a {
    color: #5a6a70;
    transition: all 0.3s ease;
    text-decoration: none;
    font-weight: 500;
}

.footer-light a:hover {
    color: var(--primary-green) !important;
    padding-left: 5px;
}

/* Social Icons */
.footer-light .social-icon-btn {
    width: 45px;
    height: 45px;
    background: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--primary-green);
    font-size: 1.2rem;
    transition: all 0.3s ease;
    border: 1px solid rgba(84, 206, 11, 0.1);
}

.footer-light .social-icon-btn:hover {
    background: var(--primary-green);
    color: white !important;
    /* Force white icon */
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(84, 206, 11, 0.25);
    border-color: transparent;
}

/* Contact Items */
.contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.contact-icon-box {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #e8fce8 0%, #d4f8d4 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #54CE0B;
    box-shadow: 0 2px 10px rgba(84, 206, 11, 0.1);
}

.footer-light hr {
    background: rgba(84, 206, 11, 0.2);
    opacity: 1;
}

/* Logo Adjustment for Light Background */
/* Restore original colors (remove invert filter) */
.footer-light img {
    filter: none;
    /* Reset filter for light bg */
    opacity: 1;
}

.footer-light img:hover {
    opacity: 1;
}

/* Standardized Inner Page Hero */
.inner-page-hero {
    height: 60vh;
    /* Standard height */
    min-height: 400px;
    position: relative;
    padding: 0 !important;
    overflow: hidden;
}

.inner-page-hero .carousel,
.inner-page-hero .carousel-inner,
.inner-page-hero .carousel-item {
    height: 100%;
}

.inner-page-hero .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dark Overlay (No Green) */
.hero-overlay-dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    /* Neutral dark overlay */
    z-index: 1;
}

.inner-page-hero .container {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* Let clicks pass through if needed, though caption usually blocks */
}

/* Match About Hero Caption Style */
.inner-page-hero .carousel-caption {
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
    /* Slight dim for readability */
    z-index: 2;
    padding-bottom: 0 !important;
}

/* =========================================
   Responsive Adjustments (Mobile/Tablet)
   ========================================= */

@media (max-width: 991px) {

    /* Typography Scaling */
    h1.display-3,
    h1.display-4 {
        font-size: 2.5rem !important;
    }

    h2.display-3,
    h2.display-4 {
        font-size: 2rem !important;
    }

    .lead {
        font-size: 1.1rem !important;
    }

    /* Navbar Mobile View */
    .navbar-collapse {
        background: rgba(255, 255, 255, 0.98);
        border-radius: 20px;
        padding: 20px;
        margin-top: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        text-align: center;
    }

    .navbar-nav .nav-item {
        margin-bottom: 10px;
    }

    .btn-book-pickup {
        margin-left: 0 !important;
        margin-top: 15px;
        width: 100%;
        display: block;
    }

    /* Hero Section Mobile */
    .hero-section {
        min-height: auto !important;
        padding-top: 120px !important;
        padding-bottom: 60px !important;
    }

    .inner-page-hero {
        height: 50vh !important;
        min-height: 350px !important;
    }

    .carousel-caption {
        bottom: 20px !important;
        padding-bottom: 0 !important;
    }

    .carousel-caption h1 {
        font-size: 2rem !important;
        margin-bottom: 0.5rem !important;
    }

    .carousel-caption p {
        font-size: 1rem !important;
        margin-bottom: 0 !important;
    }
}

@media (max-width: 768px) {

    /* Further reductions for phones */
    h1.display-3,
    h1.display-4 {
        font-size: 2rem !important;
    }

    .section-padding {
        padding: 40px 0 !important;
    }

    /* Gallery Adjustments */
    .gallery-card-overlay {
        width: 280px !important;
        /* Slightly smaller cards */
    }

    /* Footer Center Align */
    .footer-light {
        text-align: center;
    }

    .footer-light .contact-item {
        justify-content: center;
    }

    .footer-light .social-icon-btn {
        margin: 0 auto;
    }

    .footer-light .d-flex.gap-2 {
        justify-content: center;
    }
}



/* GSAP Reveal Helper */
.gsap-reveal {
    visibility: hidden;
    /* GSAP will handle visibility and opacity */
}

/* Structured Blog Section Styles */
.blog-section-heading {
    color: var(--dark-text);
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    position: relative;
    padding-left: 20px;
    border-left: 5px solid var(--primary-green);
    letter-spacing: -0.5px;
}

.blog-section-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #4a5568 !important;
}

#blog-main-image {
    border-radius: 20px;
    box-shadow: var(--shadow-3d);
    margin-bottom: 2.5rem;
    width: 100%;
    object-fit: cover;
    max-height: 500px;
}

/* Horizontal Date Picker Styles */
.date-picker-horizontal {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 15px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.date-picker-horizontal::-webkit-scrollbar {
    display: none;
}

.date-card {
    min-width: 80px;
    height: 100px;
    background: white;
    border: 1.5px solid #eee;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

.date-card:hover {
    border-color: var(--primary-green);
    transform: translateY(-4px);
    background: #f8fff9;
    box-shadow: 0 8px 15px rgba(84, 206, 11, 0.1);
}

.date-card.selected {
    background: var(--primary-green) !important;
    color: white !important;
    border-color: var(--primary-green);
    transform: translateY(-6px);
    box-shadow: 0 10px 20px rgba(84, 206, 11, 0.3);
}

.date-card.selected .text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
}

.date-card.disabled {
    opacity: 0.4;
    background: #f1f1f1;
    cursor: not-allowed !important;
    border-style: dashed;
    filter: grayscale(1);
    pointer-events: none;
}

.time-slot-card {
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1.5px solid #eee;
    background: white;
}

.time-slot-card:hover {
    border-color: var(--primary-green);
    background: #f8fff9;
    transform: translateY(-2px);
}

.time-slot-card.selected {
    background: var(--primary-green) !important;
    color: white !important;
    border-color: var(--primary-green);
    box-shadow: 0 4px 15px rgba(84, 206, 11, 0.25);
}

/* Custom Toast Notification */
.custom-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    padding: 15px 25px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 15px;
    transform: translateX(120%);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    border-left: 5px solid #54CE0B;
    min-width: 300px;
}

.custom-toast.show {
    transform: translateX(0);
}

.custom-toast.error {
    border-left-color: #dc3545;
}

.custom-toast i {
    font-size: 1.5rem;
}

.custom-toast.success i {
    color: #54CE0B;
}

.custom-toast.error i {
    color: #dc3545;
}

.custom-toast h6 {
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.custom-toast small {
    font-size: 0.85rem;
    color: #6c757d;
}

/* =========================================
   Enhanced Item Adder UI (Step 3)
   ========================================= */

.adding-item-box {
    background: linear-gradient(135deg, #f0fff4 0%, #ffffff 100%);
    box-shadow: 0 10px 30px rgba(84, 206, 11, 0.15);
    border: 1px solid rgba(84, 206, 11, 0.3) !important;
    border-left: 5px solid var(--primary-green) !important;
    animation: slideUpFade 0.4s ease-out;
    padding: 24px !important;
}

.adding-item-box h5 {
    color: #2c3e50;
    letter-spacing: 0.5px;
}

.adding-item-box .form-select,
.adding-item-box .form-control,
.adding-item-box .input-group-text {
    border-color: #e2e8f0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
}

.adding-item-box .form-select:focus,
.adding-item-box .form-control:focus {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 4px rgba(84, 206, 11, 0.1);
}

/* Specific styling for the ADD button to make it pop */
#addItemBtn {
    background: linear-gradient(45deg, var(--primary-green), #46b009);
    border: none;
    box-shadow: 0 4px 15px rgba(84, 206, 11, 0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    letter-spacing: 1px;
}

#addItemBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(84, 206, 11, 0.4);
    background: linear-gradient(45deg, #46b009, var(--primary-green));
}

#addItemBtn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 10px rgba(84, 206, 11, 0.3);
}

/* Rate Label Styling */
#itemRateLabel {
    background: rgba(84, 206, 11, 0.1);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    display: inline-block;
    color: var(--primary-green) !important;
    font-weight: 700 !important;
    border: 1px solid rgba(84, 206, 11, 0.2);
}

/* Highlight the item input group */
.adding-item-box .input-group-text {
    background-color: #f8fafc !important;
    color: #64748b !important;
    font-weight: 600;
}

#itemWeightInput::placeholder {
    font-size: 0.75rem;
    opacity: 0.6 !important;
}
/* Custom Dropdown for Areas */
.custom-dropdown { 
    position: relative !important; 
    width: 100%; 
    cursor: pointer; 
    z-index: 1050;
}
.dropdown-header { 
    display: flex; 
    align-items: center; 
    padding: 0.75rem 1rem; 
    background-color: #f8f9fa; 
    border: 1px solid #dee2e6; 
    border-radius: 0.5rem; 
    font-size: 1rem; 
    color: #212529; 
    transition: all 0.2s ease-in-out; 
    min-height: 50px;
}
.dropdown-header:hover { border-color: #198754; }
.dropdown-header.active { 
    border-color: #198754; 
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25); 
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.dropdown-list { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    right: 0; 
    background: #fff; 
    border: 1px solid #dee2e6; 
    border-top: none;
    border-bottom-left-radius: 0.5rem; 
    border-bottom-right-radius: 0.5rem; 
    max-height: 210px; 
    overflow-y: auto; 
    z-index: 1100; 
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); 
}
.dropdown-item { padding: 0.75rem 1rem; font-size: 0.95rem; color: #495057; transition: background-color 0.2s; }
.dropdown-item:hover { background-color: #f1f3f5; color: #198754; }
.dropdown-item.active { background-color: #e9ecef; color: #198754; font-weight: 600; }
.dropdown-list::-webkit-scrollbar { width: 6px; }
.dropdown-list::-webkit-scrollbar-track { background: transparent; }
.dropdown-list::-webkit-scrollbar-thumb { background: #adb5bd; border-radius: 10px; }
.dropdown-list::-webkit-scrollbar-thumb:hover { background: #6c757d; }