: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;
}

.fa-mirror {
    transform: scaleX(-1);
    display: inline-block;
}

@media (min-width: 992px) {
    .h-lg-100 {
        height: 100% !important;
    }
}


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.8);
    /* 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.2rem 1rem;
    /* REDUCED Padding for Compactness */
    margin: 8px 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;
}

@media (max-width: 991px) {
    .navbar {
        width: 95% !important;
        background: rgba(255, 255, 255, 0.95) !important;
        /* More solid on mobile to prevent merging */
        margin: 10px auto !important;
        border-radius: 20px !important;
        padding: 0.5rem 1rem !important;
    }
}

@media (max-width: 768px) {
    .navbar {
        width: 95% !important;
        margin: 0 auto !important;
        top: 8px !important;
        padding: 0.25rem 0.75rem !important;
        background: rgba(255, 255, 255, 0.98) !important;
        border-radius: 20px !important;
    }
    
    .navbar-brand img {
        height: 35px !important; /* Smaller logo for mobile efficiency */
    }

    /* Universal Font Reduction for Pickup screen on Mobile */
    .pickup-card {
        font-size: 0.82rem !important;
        padding: 18px !important;
    }
    
    .pickup-card h4, 
    .pickup-card h5 {
        font-size: 1.05rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .pickup-card h6 {
        font-size: 0.72rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .form-label {
        font-size: 0.72rem !important;
        margin-bottom: 0.15rem !important;
        font-weight: 700 !important;
    }
    
    .form-control, 
    .form-select, 
    .input-group-text {
        font-size: 0.82rem !important;
        padding: 0.4rem 0.6rem !important;
        min-height: 40px !important;
    }

    .form-step .row {
        --bs-gutter-y: 0.5rem !important; /* Low gap between fields */
    }
}

@media (max-width: 991px) {
    .navbar-brand img {
        height: 45px;
    }
}

.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: 160px;
    /* Increased top padding for better vertical position and navbar clearance */
    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 */
}

/* About Us Hero Clearance */
.about-hero {
    padding-top: 140px;
    background: #fff;
    position: relative;
    overflow: hidden;
}

#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: 20px;
        /* Adjusted for proper spacing from the navbar */
    }
}

/* 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: 130px !important;
    /* Clearance for fixed navbar */
}

#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-top: 70px;
        /* Reduced from 120px for mobile */
        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: 60px !important;
        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;
}




.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;
    pointer-events: none;
}

.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;
}

.item-qty-input::placeholder,
#itemWeightInput::placeholder {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #000000 !important;
    opacity: 1 !important;
}

/* Premium Hero Buttons */
.btn-premium-book {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white !important;
    border: none;
    font-weight: 800;
    letter-spacing: 0.5px;
    box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.4), 
                0 0 15px rgba(16, 185, 129, 0.2);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-premium-book:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 20px 35px -10px rgba(16, 185, 129, 0.5), 
                0 0 25px rgba(16, 185, 129, 0.3);
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.btn-premium-book i {
    transition: transform 0.3s ease;
}

.btn-premium-book:hover i {
    transform: translateX(5px);
}

.btn-glass-rates {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.4);
    color: white !important;
    font-weight: 700;
    transition: all 0.4s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-glass-rates:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.btn-glass-rates i {
    transition: transform 0.3s ease;
}

.btn-glass-rates:hover i {
    transform: rotate(15deg) scale(1.1);
}

@keyframes pulse-glow {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.btn-premium-book.pulse {
    animation: pulse-glow 2s infinite;
}

/* Booking Page Specifics */
.booking-section-wrapper {
    align-items: start !important;
    min-height: 100vh;
    width: 100%;
    padding-top: 160px;
    /* Default desktop clearance */
    padding-bottom: 50px;
    position: relative;
    z-index: 50; /* Higher priority than background elements */
}

@media (max-width: 991px) {
    .booking-section-wrapper {
        padding-top: 110px !important; /* Raised for safer navbar clearance */
        padding-bottom: 20px !important;
    }
    
    #pickup-form {
        margin-top: 4px !important;
        /* Snugly align card with progress bar */
    }
}

@media (max-width: 576px) {
    .booking-section-wrapper {
        padding-top: 80px !important;
    }
}

#pickup-form {
    z-index: 100;
    position: relative;
}

.booking-progress-container {
    margin-top: -10px !important; /* Shifting up even more */
    margin-bottom: 0.2rem !important;
    padding-top: 0 !important;
}

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

@media (max-width: 768px) {
    .added-item-row {
        padding: 12px !important;
        margin-bottom: 8px !important;
        background: #fdfdfd;
        border: 1px solid #f0f0f0;
        border-radius: 12px;
    }

    .bottom-action-bar {
        padding: 15px !important;
        background: #fff;
        border-radius: 20px 20px 0 0;
        margin-top: 20px !important;
    }

    .est-value-box .fs-3 {
        font-size: 1.5rem !important;
    }
}

#categoryDropdownTrigger,
#itemDropdownTrigger {
    position: relative;
    cursor: pointer;
    z-index: 1050;
    pointer-events: auto !important;
    display: flex !important;
}

#categoryDropdownTrigger *,
#itemDropdownTrigger * {
    pointer-events: none !important;
}

/* Re-enable clicks on the dropdown menu and its items */
.category-dropdown-container .dropdown-menu-custom,
.category-dropdown-container .dropdown-menu-custom *,
.item-dropdown-container .dropdown-menu-custom,
.item-dropdown-container .dropdown-menu-custom * {
    pointer-events: auto !important;
}

.category-dropdown-container .dropdown-menu-custom,
.item-dropdown-container .dropdown-menu-custom {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 9995;
    max-height: 350px;
    overflow-y: auto;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
    border-radius: 12px !important;
    padding: 6px;
    transition: all 0.2s ease-out;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.99);
}

.category-dropdown-container .dropdown-menu-custom.show,
.item-dropdown-container .dropdown-menu-custom.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    display: block !important;
}

.selection-box-premium {
    background: rgba(84, 206, 11, 0.02);
    border: 1px solid rgba(84, 206, 11, 0.1);
    padding: 12px;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.bottom-action-bar-compact {
    position: sticky;
    bottom: 0;
    background: #fff;
    margin-left: -15px;
    margin-right: -15px;
    padding: 12px 15px;
    z-index: 10;
}

.est-value-box-compact {
    min-width: 80px;
}

.icon-box-xs {
    background: #f8fdf4;
    border: 1px solid rgba(84, 206, 11, 0.1);
}

.added-item-row {
    padding: 8px 12px !important;
    margin-bottom: 6px !important;
    border-radius: 12px !important;
}

.added-item-icon {
    width: 32px !important;
    height: 32px !important;
}


.selection-box-premium:focus-within {
    background: rgba(84, 206, 11, 0.05);
    border-color: rgba(84, 206, 11, 0.6);
}

#categoryDropdownTrigger.active>div,
#itemDropdownTrigger.active>div {
    border-color: var(--primary-green) !important;
    box-shadow: 0 0 0 4px rgba(84, 206, 11, 0.1) !important;
}

.dropdown-item-custom {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
    color: #444;
}

.dropdown-item-custom:hover {
    background: #f8fdf4;
    border-color: rgba(84, 206, 11, 0.1);
}

.dropdown-item-custom.active {
    background: #f0f7ea;
    border-color: rgba(84, 206, 11, 0.2);
    font-weight: 700;
    color: var(--primary-green);
}

.cat-item-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.btn-ghost {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    line-height: 1;
}

/* 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 !important;
        flex-direction: column !important;
        display: block !important;
    }

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

    .how-it-works-section {
        height: auto !important;
        overflow: visible !important;
    }

    /* Target columns that previously had h-lg-100 */
    .scroll-panel .h-lg-100 {
        height: auto !important;
        min-height: 300px;
    }

    .scroll-panel img {
        height: 300px !important;
        object-fit: cover !important;
    }
}

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

/* --- Premium Step 1 Interactivity --- */
.form-floating>.form-control {
    height: 50px !important;
    font-size: 0.88rem !important;
    padding-left: 50px !important;
}

.form-floating>label {
    padding-left: 50px !important;
    font-size: 0.78rem !important;
    padding-top: 15px !important;
    color: #888 !important;
    transition: all 0.2s ease-in-out;
}

.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label {
    transform: scale(0.75) translateY(-0.85rem) translateX(0.15rem);
    background: transparent !important;
    height: auto !important;
    padding-top: 20px !important;
    opacity: 1 !important;
}

.form-floating>.form-control:focus~div.translate-middle-y,
.form-floating>.form-control:not(:placeholder-shown)~div.translate-middle-y,
.position-absolute.translate-middle-y {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.8rem;
}

#areaHeader {
    min-height: 50px !important;
    padding: 0.5rem 1rem !important;
}

#areaHeader .icon-box-sm {
    width: 32px !important;
    height: 32px !important;
}

#areaHeader .selected-text {
    font-size: 0.85rem !important;
}

.form-floating>.form-control:focus {
    border-color: var(--primary-green) !important;
    box-shadow: 0 0 0 4px rgba(84, 206, 11, 0.1) !important;
}

.form-floating>.form-control:focus~div.translate-middle-y {
    background: var(--primary-green) !important;
    color: white !important;
    box-shadow: 0 4px 10px rgba(84, 206, 11, 0.3);
}

.border-dashed {
    border-style: dashed !important;
}

#areaList {
    background: white;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    max-height: 250px;
    overflow-y: auto;
}

#areaList::-webkit-scrollbar {
    width: 4px;
}

#areaList::-webkit-scrollbar-thumb {
    background: #e0e0e0;
    border-radius: 10px;
}

#btnStep1:not(:disabled) {
    animation: pulse-green 2s infinite;
}

/* Hide placeholder on focus for cleaner interaction */
input:focus::placeholder,
textarea:focus::placeholder {
    color: transparent !important;
    transition: color 0.2s ease;
}

/* Specific focus state for floating labels in Step 1 */
.form-floating>.form-control:focus::placeholder {
    color: transparent !important;
}

@keyframes pulse-green {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(84, 206, 11, 0.4); }
    70% { transform: scale(1.02); box-shadow: 0 0 0 15px rgba(84, 206, 11, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(84, 206, 11, 0); }
}

.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 */
}

@media (max-width: 768px) {
    .mv-feature-card {
        min-width: 100%;
        margin-bottom: 1rem;
        padding: 1.25rem;
    }
}

/* 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;
}

/* Terms & Conditions Styling */
.tc-content {
    scrollbar-width: thin;
    scrollbar-color: #54CE0B #f1f1f1;
    font-size: 0.7rem !important;
    background: #fbfbfb !important;
    border: 1px solid #edf2f7 !important;
    color: #6c757d !important;
}

.tc-content::-webkit-scrollbar {
    width: 4px;
}

.tc-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.tc-content::-webkit-scrollbar-thumb {
    background: #54CE0B;
    border-radius: 10px;
}

.form-check-input:checked {
    background-color: #54CE0B !important;
    border-color: #54CE0B !important;
}

.form-check-input {
    width: 1.1em !important;
    height: 1.1em !important;
    margin-top: 0.2em !important;
    cursor: pointer;
    border-color: #ced4da;
    box-shadow: none !important;
}

.form-check-label {
    padding-left: 0.25rem;
    color: #4a5568 !important;
    user-select: none;
    cursor: pointer;
}

.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;
}

/* Chrome Web View (Desktop) Spacing Adjustments */
@media (min-width: 992px) {
    #mainNav {
        padding: 0.3rem 1.5rem !important;
        margin-top: 12px !important;
        border-radius: 40px !important;
    }

    #siteLogo {
        height: 48px !important; /* Slimmer logo */
    }

    .navbar .nav-link {
        font-size: 0.95rem !important;
        height: 36px !important;
    }

    .navbar .btn-book-pickup {
        padding: 8px 24px !important;
        font-size: 0.95rem !important;
    }

    .booking-section-wrapper {
        padding-top: 50px !important; /* More space from slim navbar */
    }

    #pickup-form {
        margin-top: -30px !important; /* Pull up less to leave more gap */
    }
}

/* Dynamic Input Field Aesthetics (Step 1) */
.form-floating .position-absolute {
    transition: all 0.3s ease-in-out !important;
}

/* When field is focused OR has data */
.form-floating:focus-within .position-absolute,
.form-floating input:not(:placeholder-shown) ~ .position-absolute {
    transform: translateY(-8px) scale(0.75) !important;
    top: 50% !important;
    opacity: 1;
}

/* Ensure floating labels and icons are perfectly centered when inactive */
.form-floating > .form-control {
    padding-top: 2rem !important; /* Spacing for the floating label */
    padding-bottom: 0.6rem !important;
    height: 60px !important;
    line-height: 1 !important;
}

.form-floating > label {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    transform-origin: 0 0 !important;
    transition: all 0.2s ease-in-out !important;
    pointer-events: none;
    top: 0 !important;
}

/* Floating State Animation */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    height: auto !important;
    padding-top: 0.5rem !important;
    transform: scale(0.8) translateY(-1.1rem) !important;
    font-weight: 700 !important;
    color: var(--primary-green) !important;
    opacity: 1 !important;
}

/* Perfect Center for the fixed icons */
.form-floating .position-absolute.translate-middle-y {
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
    z-index: 10 !important;
}

/* Icon scale transition when field is active */
.form-floating:focus-within .position-absolute,
.form-floating input:not(:placeholder-shown) ~ .position-absolute {
    transform: translateY(-50%) scale(0.8) !important; /* Scaled down but still centered */
    opacity: 1 !important;
}

/* Unified Placeholder Styling (Moved logic to later in file) */
/* The transparent override was causing visibility issues on the contact form */

/* Premium Input Group - Step 1 Redesign */
.premium-input-group {
    position: relative;
    margin-bottom: 0.85rem;
}

.premium-input-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--primary-green);
    margin-bottom: 2px;
    margin-left: 4px;
    text-transform: none;
}

.premium-input-label .optional-text {
    color: red;
    font-weight: 700;
}

.premium-input-box {
    position: relative;
    display: flex;
    align-items: center;
}

.form-control.premium-input-field {
    height: 52px !important;
    padding-left: 55px !important;
    padding-right: 45px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    border: 1.5px solid #edf2f7 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #1a202c !important;
    transition: all 0.3s ease !important;
}

.premium-input-field:focus {
    border-color: var(--primary-green) !important;
    box-shadow: 0 6px 15px rgba(84, 206, 11, 0.08) !important;
    background: #fff !important;
}

.premium-input-field::placeholder {
    color: #cbd5e1 !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
}

.input-icon-left {
    position: absolute;
    left: 12px;
    width: 32px;
    height: 32px;
    background: #f8fafc;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    z-index: 5;
}

.premium-input-field:focus + .input-icon-left {
    background: var(--soft-green);
    color: var(--primary-green);
}

.valid-check-icon {
    position: absolute;
    right: 15px;
    color: var(--primary-green);
    font-size: 1rem;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 5;
}

.premium-input-field.is-valid + .valid-check-icon {
    opacity: 1;
    transform: scale(1);
}

/* Selection Box Premium - Select Scrap Step Improvements */
.selection-box-premium {
    background: #ffffff;
    border-radius: 20px;
    padding: 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
}

.custom-dropdown {
    transition: all 0.3s ease !important;
}

.custom-dropdown:hover {
    border-color: var(--primary-green) !important;
    background: #fcfdfc !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.item-qty-input {
    border: 1.5px solid #edf2f7 !important;
    transition: all 0.3s ease !important;
    font-size: 1.1rem !important;
}

.item-qty-input:focus {
    border-color: var(--primary-green) !important;
    box-shadow: 0 0 0 4px rgba(84, 206, 11, 0.1) !important;
    background: #fff !important;
}

.input-group-text-premium {
    background: #f8fafc !important;
    border: 1.5px solid #edf2f7 !important;
    border-left: none !important;
    color: #64748b !important;
    font-size: 0.9rem !important;
    display: flex;
    align-items: center;
    padding: 0 15px;
}

#addItemBtn {
    background: linear-gradient(135deg, #54CE0B 0%, #45b106 100%) !important;
    border: none !important;
    border-radius: 16px !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 54px !important;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

#addItemBtn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 25px rgba(84, 206, 11, 0.4) !important;
    background: linear-gradient(135deg, #5de60c 0%, #54CE0B 100%) !important;
}

#addItemBtn:active {
    transform: scale(0.96);
}

.rate-badge-premium {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: #f0fdf4;
    color: #16a34a;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 800;
    border: 1.5px solid #dcfce7;
    box-shadow: 0 2px 5px rgba(22, 163, 74, 0.05);
}

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

.custom-dropdown:hover .icon-box-xs {
    transform: scale(1.1);
}
/* Multiple Item Selection Styles */
.dropdown-item-custom.active {
    background: rgba(84, 206, 11, 0.1);
    border-color: var(--primary-green) !important;
}
.item-checkbox {
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0;
    cursor: pointer;
}
.dropdown-item-custom:hover {
    background: #f8f9fa;
}

/* Items Dropdown UI/UX Improvements */
.dropdown-menu-custom {
    padding: 10px;
    border-radius: 18px;
    border: 1px solid rgba(84, 206, 11, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-height: 350px;
    overflow-y: auto;
}
.dropdown-item-custom {
    padding: 12px 16px;
    border-radius: 14px;
    margin-bottom: 5px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dropdown-item-custom:hover {
    background: #f8fcf5;
    border-color: rgba(84, 206, 11, 0.1);
    transform: translateX(3px);
}
.dropdown-item-custom.active {
    background: rgba(84, 206, 11, 0.08);
    border-color: rgba(84, 206, 11, 0.3);
}
.item-name-premium {
    font-weight: 700;
    font-size: 0.95rem;
    color: #334155;
    line-height:1.3;
}
.weight-badge-premium {
    background: rgba(13, 148, 136, 0.08) !important;
    color: #0d9488 !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(13, 148, 136, 0.1) !important;
}
.item-checkbox-premium {
    width: 1.3rem !important;
    height: 1.3rem !important;
    border: 2px solid #cbd5e1;
    border-radius: 6px !important;
    margin-top: 0 !important;
    cursor: pointer;
}
.item-checkbox-premium:checked {
    background-color: var(--primary-green) !important;
    border-color: var(--primary-green) !important;
}

.form-label-premium {
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    color: #64748b;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    display: block;
}

/* Custom overrides for form fields visibility */
.form-control, .form-select { 
    font-size: 0.9rem !important; 
    padding: 0.75rem 1rem !important; 
    border: 1.5px solid #e2e8f0 !important; 
    border-radius: 12px !important; 
    transition: all 0.3s ease !important; 
    color: #1a202c !important; 
    background-color: #ffffff !important; 
}

.form-control:focus, .form-select:focus { 
    border-color: #54CE0B !important; 
    box-shadow: 0 0 0 4px rgba(84, 206, 11, 0.1) !important; 
    outline: none !important; 
}

::placeholder,
.form-control::placeholder,
.form-select::placeholder,
.flatpickr-input::placeholder { 
    color: #9ea3a8 !important; 
    opacity: 1 !important; 
}

#pickupDate {
    text-align: left !important;
    font-size: 0.95rem !important;
}

.highlight-date-picker {
    border: 1.5px solid #FFC00D !important;
    box-shadow: 0 0 12px rgba(255, 192, 13, 0.8) !important;
    transition: all 0.3s ease-in-out;
}