/* Custom Styles for Enhanced Sections and Product Cards */
/* Updated: Navigation and Feefo reviews fixes applied */

/* Custom Scrollbar - DISABLED - Using default browser scrollbar */
::-webkit-scrollbar {
    width: 15px;
    background: transparent !important;
}

::-webkit-scrollbar-track {
    background: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border: none !important;
    -webkit-appearance: none !important;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3) !important;
}

::-webkit-scrollbar-corner {
    background: transparent !important;
}

/* Firefox scrollbar - reset to default */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* Apply Inter font to body */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

html {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* Remove any right-side shadows from body/html */
body::after,
html::after,
body::before,
html::before {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    background: none !important;
    display: none !important;
}

/* Ensure no shadow on scrollbar track */
::-webkit-scrollbar-track {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    background: transparent !important;
}

/* Remove any background gradients or shadows on right side - but preserve body background */
body > * {
    box-shadow: none !important;
}

/* Specifically target any element on the right side */
[style*="right"],
.position-right,
.align-right {
    box-shadow: none !important;
}

/* Remove any gradient backgrounds that might create shadow effect */
body,
html {
    background-image: none !important;
}

/* Logo-style font for h1 headings */
h1, .h1 {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    text-transform: none !important;
}

/* Fancy Preloader */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent !important;
    z-index: 999999;
    display: flex !important;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
    visibility: visible !important;
    opacity: 1 !important;
}

#preloader.fade-out {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.preloader-content {
    text-align: center;
}

.preloader-logo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.preloader-logo-img {
    width: 400px !important;
    max-width: 400px !important;
    height: auto;
    margin-bottom: 30px;
    animation: fadeInScale 1s ease-out;
    filter: brightness(0) invert(1) drop-shadow(0 4px 15px rgba(0, 0, 0, 0.3)) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 1;
}

.preloader-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

.preloader-dots span {
    width: 12px;
    height: 12px;
    background: #19B2EB !important;
    border-radius: 50%;
    animation: bounce 1.4s ease-in-out infinite both;
    box-shadow: 0 2px 8px rgba(25, 178, 235, 0.3);
}

.preloader-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.preloader-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

.preloader-dots span:nth-child(3) {
    animation-delay: 0s;
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Mobile Preloader */
@media (max-width: 767px) {
    .preloader-logo-img {
        width: 280px !important;
        max-width: 280px !important;
    }
    
    .preloader-dots span {
        width: 10px;
        height: 10px;
    }
}

/* Hero Section Glass Buttons */
.header-section .buttons {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.header-section .buttons li {
    margin: 0;
    flex: 0 0 auto;
}

.header-section .button {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 12px !important;
    padding: 14px 24px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    line-height: normal !important;
    min-width: 200px;
    width: 100%;
    max-width: 220px;
    text-align: center;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
}

.header-section .button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    transition: left 0.5s ease;
    z-index: 1;
}

.header-section .button:hover::before {
    left: 100%;
}

.header-section .button:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    color: #fff !important;
    text-decoration: none !important;
}

.header-section .button * {
    position: relative;
    z-index: 2;
}

/* Hero Feefo Badge */
.hero-feefo-badge {
    margin-top: 30px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    gap: 12px;
    animation: fadeInUp 0.8s ease-out 0.4s both;
    opacity: 0;
}

.hero-feefo-link {
    display: flex;
    width: auto;
    max-width: 250px;
    margin: 0;
    text-decoration: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    text-align: left;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
}

.hero-feefo-link:hover {
    transform: scale(1.02);
    opacity: 0.9;
}

.hero-feefo-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
}

.feefo-badge-widget {
    display: flex;
    width: auto;
    min-height: 30px;
    margin: 0;
    text-align: left;
    justify-content: flex-start;
    align-items: center;
}

.feefo-badge-widget img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
}

/* Feefo Product Stars Widget */
.feefo-product-stars {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Feefo Fallback Badge with Stars */
.feefo-fallback-badge {
    display: block;
    width: auto;
    max-width: 100%;
    margin: 0;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    padding: 6px 12px;
    transition: all 0.3s ease;
    text-align: left;
}

.feefo-fallback-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.feefo-stars {
    display: flex;
    gap: 2px;
    margin: 0;
    align-items: center;
}

.feefo-star {
    color: #FFD700;
    font-size: 14px;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.feefo-rating-text {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    margin: 0;
    line-height: 1;
}

.feefo-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.feefo-logo-text {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    font-family: 'Inter', sans-serif;
    line-height: 1;
}

.feefo-reviews-text {
    color: #fff;
    font-size: 9px;
    text-decoration: underline;
    opacity: 0.95;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.2px;
    line-height: 1;
    white-space: nowrap;
}

.feefo-logo-img {
    height: 7px;
    width: auto;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.hero-feefo-logo-below {
    margin-top: 0;
    text-align: left;
    width: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-self: center;
    flex-shrink: 0;
}

.feefo-logo-below-img {
    height: 16px;
    width: auto;
    display: inline-block;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.hero-feefo-link:hover .feefo-fallback-badge {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}

/* Desktop - Make Feefo badge bigger */
@media (min-width: 768px) {
    .feefo-fallback-badge {
        padding: 10px 18px;
        border-radius: 8px;
    }
    
    .feefo-star {
        font-size: 18px;
    }
    
    .feefo-rating-text {
        font-size: 16px;
    }
    
    .feefo-reviews-text {
        font-size: 11px;
    }
    
    .feefo-fallback-content {
        gap: 8px;
    }
    
    .feefo-stars {
        gap: 3px;
    }
    
    .feefo-logo-below-img {
        height: 20px;
    }
    
    .hero-feefo-link {
        max-width: 300px;
    }
}

@media (max-width: 767px) {
    .hero-feefo-badge {
        justify-content: center;
    }
    
    .hero-feefo-img,
    .feefo-badge-widget img {
        max-width: 100%;
        width: 100%;
    }
}

.header-section .button img {
    max-height: 40px;
    width: auto;
    height: auto;
    display: block;
    filter: brightness(0) invert(1);
    transition: all 0.3s ease;
    margin: 0 auto;
}

.header-section .button:hover img {
    transform: scale(1.05);
}

/* Center buttons on mobile/tablet */
@media (max-width: 991px) {
    .header-section .buttons {
        justify-content: center;
    }
    
    .header-section .button {
        min-width: 180px;
        max-width: 200px;
    }
}

/* Logo z-index fix and remove white space */
.navbar-brand {
    position: relative;
    z-index: 99999999999 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 15px !important;
    height: auto;
    transform: translateZ(0);
    will-change: transform;
}

/* Ensure hero content starts below logo */
.header-section {
    padding-top: 0;
    margin-top: 0;
}

.navbar-brand .logo {
    position: relative;
    z-index: 99999999999 !important;
    margin-top: 10px;
    margin-bottom: 10px;
    transform: translateZ(0);
    will-change: transform;
}

/* Desktop logo size - 5% bigger and positioned top-left */
@media (min-width: 768px) {
    .navbar-brand {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        padding: 15px 20px !important;
        z-index: 99999999999 !important;
    }
    
    .navbar-brand .logo,
    .navbar-brand img {
        max-height: 116px !important;
        width: auto !important;
        height: auto !important;
    }
}

.logo.logo-light {
    margin-top: 10px;
    margin-bottom: 8px;
}

.navigation {
    position: fixed !important;
    z-index: 999999999 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding-top: 0 !important;
    transition: all 0.3s ease;
    transform: translateZ(0);
    will-change: transform;
}

/* Mobile navigation - ensure it's on top */
@media (max-width: 767px) {
    .navigation {
        z-index: 99999999999 !important;
    }
    
    .navbar {
        z-index: 99999999999 !important;
    }
    
    .navbar-header {
        z-index: 99999999999 !important;
    }
}

/* Navigation visible on blog pages */
.blog-section .navigation,
.blog-post-section .navigation {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999999 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Logo positioning on blog pages */
@media (min-width: 768px) {
    .blog-section .navigation .navbar-brand,
    .blog-post-section .navigation .navbar-brand {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        padding: 15px 20px !important;
        z-index: 99999999999 !important;
    }
    
    .blog-section .navigation .navbar-brand .logo,
    .blog-section .navigation .navbar-brand img,
    .blog-post-section .navigation .navbar-brand .logo,
    .blog-post-section .navigation .navbar-brand img {
        max-height: 116px !important;
        width: auto !important;
        height: auto !important;
    }
    
    /* Show colored logo on blog pages (white background) */
    .blog-section .navigation .navbar-brand .logo-light,
    .blog-post-section .navigation .navbar-brand .logo-light {
        display: none !important;
    }
    
    .blog-section .navigation .navbar-brand .logo-color,
    .blog-post-section .navigation .navbar-brand .logo-color {
        display: block !important;
    }
    
    .blog-section .navigation .desktop-menu-toggle,
    .blog-post-section .navigation .desktop-menu-toggle {
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
        transform: none !important;
        margin-left: 0 !important;
    }
}

.blog-section .navigation .navbar,
.blog-post-section .navigation .navbar {
    margin-bottom: 0 !important;
    border: none !important;
    min-height: 80px !important;
}

.blog-section .navigation .container,
.blog-post-section .navigation .container {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    min-height: 80px !important;
}

.blog-section .navigation .navbar-collapse,
.blog-post-section .navigation .navbar-collapse {
    background: transparent !important;
}

.blog-section .navigation.is-sticky,
.blog-post-section .navigation.is-sticky,
.blog-section .navigation.affix,
.blog-post-section .navigation.affix {
    position: fixed !important;
    top: 0 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* Ensure logo stays within navigation on blog pages */
@media (min-width: 768px) {
    .blog-section .navigation .navbar-brand,
    .blog-post-section .navigation .navbar-brand {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 99999999999 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        padding: 15px 20px !important;
        float: none !important;
    }

    .blog-section .navigation .navbar-brand .logo,
    .blog-post-section .navigation .navbar-brand .logo,
    .blog-section .navigation .navbar-brand img,
    .blog-post-section .navigation .navbar-brand img {
        position: relative !important;
        z-index: 99999999999 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        max-height: 116px !important;
        width: auto !important;
    }
    
    /* Show colored logo on blog pages (white background) */
    .blog-section .navigation .navbar-brand .logo-light,
    .blog-post-section .navigation .navbar-brand .logo-light {
        display: none !important;
    }
    
    .blog-section .navigation .navbar-brand .logo-color,
    .blog-post-section .navigation .navbar-brand .logo-color {
        display: block !important;
    }
}

@media (max-width: 767px) {
    .blog-section .navigation .navbar-brand,
    .blog-post-section .navigation .navbar-brand {
        position: relative !important;
        z-index: 99999999999 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        float: left !important;
    }

    .blog-section .navigation .navbar-brand .logo,
    .blog-post-section .navigation .navbar-brand .logo,
    .blog-section .navigation .navbar-brand img,
    .blog-post-section .navigation .navbar-brand img {
        position: relative !important;
        z-index: 99999999999 !important;
        margin-top: 10px !important;
        margin-bottom: 8px !important;
        max-height: 80px !important;
        width: auto !important;
        height: auto !important;
    }
    
    /* Show colored logo on blog pages (white background) - mobile */
    .blog-section .navigation .navbar-brand .logo-light,
    .blog-post-section .navigation .navbar-brand .logo-light {
        display: none !important;
    }
    
    .blog-section .navigation .navbar-brand .logo-color,
    .blog-post-section .navigation .navbar-brand .logo-color {
        display: block !important;
    }
}

/* Fix hamburger positioning on blog pages */
.blog-section .navigation .navbar-header,
.blog-post-section .navigation .navbar-header {
    position: relative !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 80px !important;
}

.blog-section .navigation .desktop-menu-toggle,
.blog-post-section .navigation .desktop-menu-toggle {
    position: absolute !important;
    top: 50% !important;
    right: 20px !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
    z-index: 99999999999 !important;
}

/* Ensure desktop hamburger works on blog pages */
@media (min-width: 768px) {
    .blog-section .navbar-collapse,
    .blog-post-section .navbar-collapse {
        display: none !important;
        visibility: hidden !important;
    }
    
    .blog-section .navbar-nav,
    .blog-post-section .navbar-nav {
        display: none !important;
        visibility: hidden !important;
    }
    
    .blog-section .desktop-menu-toggle,
    .blog-post-section .desktop-menu-toggle {
        display: block !important;
        visibility: visible !important;
    }
}

/* Desktop Navigation - Hide menu links, show hamburger */
@media (min-width: 768px) {
    /* Hide navbar-collapse and nav links on desktop */
    .navbar-collapse {
        display: none !important;
        visibility: hidden !important;
    }
    
    .navbar-nav {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Hide mobile navbar-toggle on desktop */
    .navigation .navbar-toggle,
    .navbar-header .navbar-toggle,
    .navbar-toggle {
        display: none !important;
    }
    
    /* Desktop Hamburger Button */
    .desktop-menu-toggle {
        display: block !important;
        visibility: visible !important;
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
        transform: none !important;
        width: 50px;
        height: 50px;
        background: #ffffff;
        border: none;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        z-index: 9999999999 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        padding: 0;
        outline: none;
        -webkit-tap-highlight-color: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        margin-left: 0 !important;
    }
    
    .desktop-menu-toggle:hover {
        background: #f8f9fa;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        transform: scale(1.05) !important;
    }
    
    .desktop-menu-toggle:focus {
        outline: 2px solid #19B2EB;
        outline-offset: 2px;
    }
    
    .desktop-menu-toggle span {
        display: block;
        position: absolute;
        height: 3px;
        width: 24px;
        background: #333;
        border-radius: 3px;
        opacity: 1;
        left: 50%;
        transform: translateX(-50%) rotate(0deg);
        transition: all 0.3s ease;
    }
    
    .navigation.scrolled .desktop-menu-toggle span {
        background: #333;
    }
    
    /* Ensure navbar-header allows absolute positioning */
    .navbar-header {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    
    /* Align logo to left */
    .navbar-brand {
        margin-left: 0 !important;
        margin-right: auto;
        float: none !important;
    }
    
    /* Make sure hamburger is always visible */
    .navbar-header .desktop-menu-toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-left: 0 !important;
    }
    
    .desktop-menu-toggle span:nth-child(1) {
        top: 16px;
    }
    
    .desktop-menu-toggle span:nth-child(2) {
        top: 24px;
    }
    
    .desktop-menu-toggle span:nth-child(3) {
        top: 32px;
    }
    
    .desktop-menu-toggle.active span:nth-child(1) {
        top: 24px;
        transform: translateX(-50%) rotate(135deg);
    }
    
    .desktop-menu-toggle.active span:nth-child(2) {
        opacity: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .desktop-menu-toggle.active span:nth-child(3) {
        top: 24px;
        transform: translateX(-50%) rotate(-135deg);
    }
    
    /* Slide-Out Menu */
    .desktop-slide-menu {
        position: fixed;
        top: 0;
        right: -400px;
        width: 400px;
        height: 100vh;
        background: #ffffff;
        box-shadow: -5px 0 50px rgba(0, 0, 0, 0.3);
        z-index: 9999999999;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        pointer-events: auto !important;
    }
    
    .desktop-slide-menu.active {
        right: 0;
    }
    
    .desktop-slide-menu-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.6) !important;
        z-index: 9999999998 !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.4s ease, visibility 0.4s ease;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    
    .desktop-slide-menu-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        display: block !important;
    }
    
    .desktop-slide-menu-content {
        position: relative;
        padding: 80px 40px 40px;
        height: 100%;
        background: #ffffff;
        pointer-events: auto !important;
    }
    
    .desktop-slide-menu-close {
        position: absolute;
        top: 30px;
        right: 30px;
        width: 30px;
        height: 30px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 10;
        padding: 0;
        pointer-events: auto !important;
    }
    
    .desktop-slide-menu-close span {
        display: block;
        position: absolute;
        width: 100%;
        height: 3px;
        background: #333;
        top: 50%;
        left: 0;
        border-radius: 2px;
        transition: all 0.3s ease;
    }
    
    .desktop-slide-menu-close:hover span {
        background: #19B2EB;
    }
    
    .desktop-slide-menu-close span:nth-child(1) {
        transform: rotate(45deg);
    }
    
    .desktop-slide-menu-close span:nth-child(2) {
        transform: rotate(-45deg);
    }
    
    .desktop-slide-menu-nav {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .desktop-slide-menu-nav li {
        margin-bottom: 8px;
    }
    
    .desktop-slide-menu-nav li a {
        display: block;
        padding: 18px 25px;
        color: #333;
        font-size: 18px;
        font-weight: 600;
        border-radius: 12px;
        transition: all 0.3s ease;
        background: #f8f9fa;
        border: 1px solid rgba(0, 0, 0, 0.08);
        position: relative;
        pointer-events: auto !important;
        cursor: pointer;
    }
    
    .desktop-slide-menu-nav li a:hover,
    .desktop-slide-menu-nav li a.active {
        background: linear-gradient(135deg, #70D969 0%, #19B2EB 100%);
        color: #fff;
        transform: translateX(8px);
    }
    
    .desktop-slide-menu-nav li.desktop-menu-divider {
        margin: 20px 25px;
        padding: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }
    
    .desktop-slide-menu-nav li.desktop-menu-divider span {
        display: none;
    }
    
    .desktop-slide-menu-nav li.desktop-menu-store-links {
        display: flex;
        gap: 15px;
        padding: 0 25px;
        margin-bottom: 0;
    }
    
    .desktop-slide-menu-nav li.desktop-menu-store-links .store-link {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px;
        background: #f8f9fa;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 12px;
        transition: all 0.3s ease;
    }
    
    .desktop-slide-menu-nav li.desktop-menu-store-links .store-link img {
        max-width: 100%;
        max-height: 40px;
        width: auto;
        height: auto;
        object-fit: contain;
    }
    
    .desktop-slide-menu-nav li.desktop-menu-store-links .store-link:hover {
        background: linear-gradient(135deg, #70D969 0%, #19B2EB 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(25, 178, 235, 0.3);
        border-color: transparent;
    }
    
    .desktop-slide-menu-nav li.desktop-menu-store-links .store-link:hover img {
        filter: brightness(0) invert(1);
    }
    
    .navigation.scrolled {
        padding-bottom: 0;
        background: transparent !important;
    }
}

.navbar {
    position: relative;
    z-index: 999999999 !important;
}

.navbar-header {
    position: relative;
    z-index: 999999999 !important;
}

/* Ensure desktop hamburger is visible and nav links are hidden */
@media (min-width: 768px) {
    .navigation .container {
        position: relative !important;
    }
    
    .navbar-header {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        position: relative;
    }
    
    /* Logo is now absolutely positioned top-left via the rule above */
    
    /* Position hamburger to right - already absolutely positioned above */
    .desktop-menu-toggle {
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
        margin-left: 0 !important;
    }
}

.navbar-default {
    z-index: 999999999 !important;
}

/* Fix hero section position on scroll */
.header-section {
    position: relative;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Enhanced Hero Content - Background preserved from original theme */
.header-section {
    position: relative;
    overflow: hidden;
}

.header-section.header-curbed {
    position: relative !important;
    overflow: hidden !important;
    padding-bottom: 150px !important;
}

.half-header.header-curbed {
    position: relative !important;
    overflow: hidden !important;
    padding-bottom: 150px !important;
}

/* Hero Bottom Divider - ensure it's not cut off */
/* Old hero-bottom-divider definition removed - see line 3316 for current definition */

.hero-bottom-divider svg {
    width: 100%;
    height: 100%;
    display: block;
}

.header-texts {
    position: relative;
    z-index: 6;
    padding: 40px 0;
}

.header-texts h2 {
    font-size: 56px;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 30px;
    color: #fff;
}

.hero-title-gradient {
    font-family: 'Josefin Sans', sans-serif !important;
    background: linear-gradient(90deg, #ffffff 0%, #e8e8e8 50%, #ffffff 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
    letter-spacing: 1px;
    position: relative;
    animation: fadeInDown 0.8s ease-out, gradientShift 3s ease-in-out infinite;
    overflow: hidden;
    font-weight: 600;
}

.hero-title-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transform: skewX(-20deg);
    animation: shine 4s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes shine {
    0% {
        left: -100%;
    }
    50% {
        left: 150%;
    }
    100% {
        left: 150%;
    }
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.header-texts h2::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 80px;
    height: 4px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 2px;
    animation: expandWidth 1s ease-out 0.5s forwards;
    width: 0;
}

@keyframes expandWidth {
    to {
        width: 80px;
    }
}

.header-texts .lead {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 18px;
    color: rgba(255, 255, 255, 0.98);
    font-weight: 400;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.header-texts p.lead:last-of-type {
    margin-bottom: 0;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    animation: fadeInUp 0.8s ease-out 0.3s both;
}

.header-texts h3 {
    font-size: 20px;
    font-weight: 600;
    margin-top: 35px;
    margin-bottom: 25px;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 16px;
    animation: fadeInUp 0.8s ease-out 0.4s both;
}

/* Hero Badge */
.hero-badge {
    display: inline-block;
    margin-top: 100px;
    margin-bottom: 20px;
    padding: 12px 28px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.95);
    animation: fadeInUp 0.6s ease-out;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    width: auto;
    min-width: auto;
}

.hero-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.5),
        transparent
    );
    transform: skewX(-20deg);
    animation: badgeShine 3s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

.hero-badge span {
    position: relative;
    z-index: 2;
}

@keyframes badgeShine {
    0% {
        left: -100%;
    }
    50% {
        left: 150%;
    }
    100% {
        left: 150%;
    }
}

.hero-badge span {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    width: 100%;
}

/* Removed static star - using Font Awesome icon instead */

/* Enhanced hero description */
.hero-description {
    font-size: 22px !important;
    line-height: 1.8 !important;
    margin-bottom: 25px !important;
    color: rgba(255, 255, 255, 0.98) !important;
    font-weight: 400 !important;
}

.hero-description strong {
    color: #fff;
    font-weight: 700;
    position: relative;
}

.hero-description strong::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 1px;
}

/* Hero sizes section */
.hero-sizes {
    margin: 30px 0;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Hero image mobile placeholder - hidden on desktop, shown on mobile */
.hero-image-mobile-placeholder {
    display: none;
}

/* Desktop: Ensure hero image column is visible and positioned correctly */
@media (min-width: 768px) {
    .hero-image-column {
        display: block !important;
    }
    
    .hero-image-mobile-placeholder {
        display: none !important;
    }
}

.size-label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    text-align: left;
    width: 100%;
}

.size-badges {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

.size-badge {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    transition: all 0.3s ease;
    cursor: pointer;
}

.size-badge:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Hero CTA heading */
.hero-cta {
    font-size: 18px !important;
    font-weight: 500 !important;
    margin-top: 30px !important;
    margin-bottom: 25px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    letter-spacing: 0.3px;
    text-align: left;
}

.header-content {
    position: relative;
    z-index: 5;
    padding: 180px 0 60px 0;
}

.header-content .container {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.header-section .col-md-5 {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-section .col-md-5 {
    padding-top: 100px;
}

.header-section .col-md-5 img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.3));
    animation: float 4s ease-in-out infinite, flowerBloom 1.5s ease-out 0.5s both;
    transform-origin: center;
    transition: transform 0.3s ease;
}

.header-section .col-md-5:hover img {
    transform: scale(1.05);
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-15px) rotate(1deg);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes flowerBloom {
    0% {
        opacity: 0;
        transform: translateX(80px) scale(0.3) rotate(-15deg);
        filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.3)) brightness(0.5) saturate(0.3);
    }
    25% {
        opacity: 0.4;
        transform: translateX(50px) scale(0.5) rotate(-8deg);
        filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.3)) brightness(0.7) saturate(0.6);
    }
    50% {
        opacity: 0.7;
        transform: translateX(20px) scale(0.75) rotate(5deg);
        filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.3)) brightness(0.9) saturate(0.9);
    }
    75% {
        opacity: 0.9;
        transform: translateX(-5px) scale(0.95) rotate(-2deg);
        filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.3)) brightness(1) saturate(1.1);
    }
    90% {
        opacity: 1;
        transform: translateX(2px) scale(1.02) rotate(1deg);
        filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.3)) brightness(1.05) saturate(1.2);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1) rotate(0deg);
        filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.3));
    }
}

/* Hero Badge/Highlight */
.header-texts::before {
    display: none;
}

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

/* Better spacing for hero content */
.header-content .row {
    align-items: center;
    min-height: 600px;
    position: relative;
}

/* Hero decorative elements - removed to preserve original background */

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.3;
    }
}

/* Enhanced hero buttons container */
.header-section .buttons {
    animation: fadeInUp 0.8s ease-out 0.6s both;
}

/* Responsive hero typography */
@media (max-width: 991px) {
    .header-content {
        padding: 120px 0 40px 0;
    }
    
    .header-texts h2 {
        font-size: 42px;
        margin-bottom: 20px;
        line-height: 1.2;
    }
    
    .hero-title-gradient {
        font-size: 42px !important;
    }
    
    .header-texts .lead {
        font-size: 18px;
    }
    
    .hero-description {
        font-size: 20px !important;
    }
    
    .header-texts h3 {
        font-size: 16px;
        margin-top: 25px;
    }
    
    .header-content .row {
        min-height: auto;
        padding: 40px 0;
    }
    
    .header-section .col-md-5 {
        padding-top: 40px;
    }
}

@media (max-width: 767px) {
    .header-content {
        padding: 100px 0 30px 0;
    }
    
    .header-texts {
        padding: 15px 0;
        text-align: center;
        max-width: 100%;
        width: 100%;
    }
    
    .hero-content-mobile {
        max-width: 100%;
        width: 100%;
    }
    
    .header-texts h2 {
        font-size: 32px;
        line-height: 1.2;
        margin-bottom: 15px;
    }
    
    .hero-title-gradient {
        font-size: 34px !important; /* Increased from 32px by 2px */
        line-height: 1.2 !important;
    }
    
    .header-texts .lead {
        font-size: 16px;
        line-height: 1.6;
    }
    
    .hero-description {
        font-size: 20px !important; /* Increased from 18px by 2px */
        line-height: 1.6 !important;
    }
    
    .header-section .col-md-5 {
        margin-top: 30px;
        padding-top: 0;
    }
    
    .header-section .col-md-5 img {
        max-width: 70%;
        margin: 0 auto;
        display: block;
    }
    
    .header-content .row {
        min-height: auto;
        padding: 20px 0;
        display: flex;
        flex-direction: column;
    }
    
    /* Mobile hero layout - reorder elements */
    .hero-text-column {
        order: 1;
    }
    
    .hero-image-column {
        display: none !important; /* Hide desktop image column on mobile */
    }
    
    /* Show mobile placeholder image */
    .hero-image-mobile-placeholder {
        display: block !important;
        order: 4;
        margin: 30px 0;
        text-align: center;
    }
    
    .hero-image-mobile-placeholder img,
    .hero-image-mobile-placeholder picture {
        max-width: 100%;
        height: auto;
    }
    
    /* Mobile hero layout - reorder badge above title */
    .hero-content-mobile {
        display: flex;
        flex-direction: column;
    }
    
    .hero-content-mobile .hero-badge {
        order: 1;
        margin-top: 0 !important;
        margin-bottom: 15px;
        font-size: 14px; /* Increased from 11px */
        padding: 8px 16px; /* Increased from 6px 12px */
        display: inline-block;
        width: auto;
        max-width: fit-content;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-content-mobile .hero-title-gradient {
        order: 2;
        margin-top: 0 !important;
    }
    
    .hero-content-mobile .hero-description {
        order: 3;
    }
    
    /* Image appears after description (order 4) */
    
    .hero-content-mobile .hero-sizes {
        order: 5;
    }
    
    .hero-content-mobile .hero-cta {
        order: 6;
    }
    
    .hero-content-mobile .buttons {
        order: 7;
    }
    
    .hero-content-mobile .hero-feefo-badge {
        order: 8;
        margin-top: 20px;
    }
    
    .hero-badge {
        font-size: 14px; /* Increased from 11px */
        padding: 8px 16px; /* Increased from 6px 12px */
        margin-bottom: 15px;
        display: inline-block;
        width: auto;
        max-width: fit-content;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-description {
        font-size: 20px !important; /* Increased from 18px by 2px */
    }
    
    .hero-sizes {
        margin: 20px 0;
        padding: 15px 0;
    }
    
    .size-label {
        font-size: 15px; /* Increased from 13px by 2px */
        margin-bottom: 10px;
    }
    
    .size-badge {
        padding: 12px 20px !important; /* Match button padding */
        font-size: 15px; /* Increased from 13px by 2px */
        min-width: 150px !important; /* Match button min-width */
        max-width: 180px !important; /* Match button max-width */
        width: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .hero-cta {
        font-size: 17px !important; /* Increased from 15px by 2px */
        margin-top: 20px !important;
        text-align: center !important; /* Center align on mobile */
    }
    
    .header-section .buttons {
        justify-content: center;
        gap: 12px;
    }
    
    .header-section .button {
        min-width: 150px;
        max-width: 180px;
        padding: 12px 20px !important;
    }
    
    .size-badges {
        flex-wrap: wrap !important; /* Allow wrapping for 2+1 layout */
        flex-direction: row !important; /* Ensure horizontal layout */
        gap: 8px;
        justify-content: center;
        display: flex !important;
        align-items: center;
        width: 100% !important;
    }
    
    .size-badge {
        white-space: nowrap !important; /* Prevent text wrapping inside badges */
        box-sizing: border-box !important;
    }
    
    /* First two badges (1.25kg and 500g) on top row - each takes ~50% */
    .size-badge:nth-child(1),
    .size-badge:nth-child(2) {
        flex: 0 0 calc(50% - 4px) !important; /* Each takes 50% minus half the gap */
        max-width: calc(50% - 4px) !important;
        min-width: 0 !important;
    }
    
    /* Third badge (50g Trial) wraps to second row - centered */
    .size-badge:nth-child(3) {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 auto !important; /* Center the badge on second row */
    }
    
    .size-label {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }
    
    .hero-feefo-badge {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .hero-feefo-link {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Make reviews badge same size as buttons on mobile - improved spacing */
    .hero-feefo-link {
        min-width: 150px !important;
        max-width: 180px !important;
        width: auto !important;
    }
    
    .hero-feefo-link .feefo-fallback-badge {
        min-width: 150px !important;
        max-width: 180px !important;
        width: 100% !important;
        padding: 12px 16px !important; /* Increased padding for better spacing */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
    
    /* Adjust text sizes and layout to fit better in badge on mobile */
    .hero-feefo-link .feefo-fallback-content {
        flex-wrap: nowrap !important; /* Keep content in one line */
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important; /* Increased gap for better spacing */
        white-space: nowrap !important;
    }
    
    .hero-feefo-link .feefo-stars {
        font-size: 14px !important; /* Slightly larger stars */
        gap: 2px !important;
        flex-shrink: 0 !important;
    }
    
    .hero-feefo-link .feefo-star {
        font-size: 14px !important;
    }
    
    .hero-feefo-link .feefo-rating-text {
        font-size: 13px !important; /* Slightly larger rating */
        flex-shrink: 0 !important;
    }
    
    .hero-feefo-link .feefo-reviews-text {
        font-size: 9px !important; /* Slightly larger text */
        white-space: nowrap !important;
        flex-shrink: 1 !important; /* Allow to shrink if needed */
    }
    
    .hero-feefo-link .feefo-text {
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 4px !important;
    }
}

@media (max-width: 480px) {
    .header-content {
        padding: 80px 0 20px 0;
    }
    
    .header-texts h2 {
        font-size: 28px;
    }
    
    .hero-title-gradient {
        font-size: 30px !important; /* Increased from 28px by 2px */
    }
    
    .hero-description {
        font-size: 18px !important; /* Increased from 16px by 2px */
    }
    
    .header-section .col-md-5 img {
        max-width: 60%;
    }
    
    .hero-image-column {
        display: none !important;
    }
    
    .hero-image-mobile-placeholder {
        display: block !important;
    }
    
    .header-section .button {
        min-width: 140px;
        max-width: 160px;
        padding: 10px 16px !important;
    }
    
    .size-badge {
        padding: 10px 16px !important; /* Match button padding */
        font-size: 14px; /* Increased from 12px by 2px */
        min-width: 140px !important; /* Match button min-width */
        max-width: 160px !important; /* Match button max-width */
        width: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .hero-cta {
        font-size: 16px !important; /* Increased from 14px by 2px */
        text-align: center !important; /* Center align on mobile */
    }
    
    /* Make reviews badge same size as buttons on smaller mobile - improved spacing */
    .hero-feefo-link {
        min-width: 140px !important;
        max-width: 160px !important;
        width: auto !important;
    }
    
    .hero-feefo-link .feefo-fallback-badge {
        min-width: 140px !important;
        max-width: 160px !important;
        width: 100% !important;
        padding: 10px 12px !important; /* Increased padding for better spacing */
        box-sizing: border-box !important;
    }
    
    /* Adjust text sizes and layout to fit better in badge on smaller mobile */
    .hero-feefo-link .feefo-fallback-content {
        flex-wrap: nowrap !important; /* Keep content in one line */
        justify-content: center !important;
        align-items: center !important;
        gap: 5px !important; /* Increased gap for better spacing */
        white-space: nowrap !important;
    }
    
    .hero-feefo-link .feefo-stars {
        font-size: 12px !important;
        gap: 1px !important;
        flex-shrink: 0 !important;
    }
    
    .hero-feefo-link .feefo-star {
        font-size: 12px !important;
    }
    
    .hero-feefo-link .feefo-rating-text {
        font-size: 11px !important;
        flex-shrink: 0 !important;
    }
    
    .hero-feefo-link .feefo-reviews-text {
        font-size: 8px !important; /* Slightly larger text */
        white-space: nowrap !important;
        flex-shrink: 1 !important; /* Allow to shrink if needed */
    }
    
    .hero-feefo-link .feefo-text {
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 3px !important;
    }
}

/* Product Cards */
.products-content .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.products-content .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
    padding-left: 15px;
    padding-right: 15px;
}

.product-card {
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid rgba(25, 178, 235, 0.1);
    position: relative;
}

/* Hide any data attributes that might display as text */
.product-card[data-product-reviews],
.product-card[data-product-videos],
.product-card[data-product-delivery],
.product-card[data-product-full-description] {
    font-size: 0;
    line-height: 0;
}

.product-card::after {
    content: '';
    display: none;
}

/* Clickable product cards */
.product-card-clickable {
    cursor: pointer;
}

.product-card-clickable:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 12px 40px rgba(25, 178, 235, 0.25);
    border-color: rgba(25, 178, 235, 0.3);
}

.product-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 12px 40px rgba(25, 178, 235, 0.25);
    border-color: rgba(25, 178, 235, 0.3);
}

.product-image {
    height: 250px;
    min-height: 250px;
    max-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    padding: 20px;
    overflow: hidden;
    position: relative;
    border-radius: 20px 20px 0 0;
    flex-shrink: 0;
    transition: all 0.4s ease;
}

/* Quick View Icon Overlay */
.product-quick-view-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
    border-radius: 20px 20px 0 0;
    z-index: 10;
    pointer-events: none;
}

.product-card:hover .product-quick-view-overlay {
    pointer-events: none;
    background: rgba(0, 0, 0, 0.5);
    opacity: 1;
}

/* Always allow clicks on the button itself */
.product-quick-view-overlay .product-quick-view-btn {
    pointer-events: auto !important;
    z-index: 11;
}

.product-quick-view-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #70D969 0%, #19B2EB 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 24px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    transform: scale(0.8);
    pointer-events: auto !important;
    cursor: pointer;
    z-index: 11;
    position: relative;
}

.product-card:hover .product-quick-view-btn {
    transform: scale(1);
}

.product-quick-view-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    color: #fff;
    text-decoration: none;
}

.product-card:hover .product-image {
    background: linear-gradient(135deg, rgba(25, 178, 235, 0.05) 0%, rgba(112, 217, 105, 0.05) 100%);
}

.product-image img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    cursor: pointer;
}

.product-card-clickable .product-image {
    cursor: pointer;
}

/* Hide empty product cards or cards with missing content */
.product-card:empty {
    display: none !important;
}

/* Ensure product card has minimum content */
.product-card {
    min-height: 400px;
}

/* Hide product cards that don't have proper structure */
.products-content .row > [class*="col-"]:empty {
    display: none !important;
}

/* Ensure images are properly displayed */
.product-image img {
    display: block;
    visibility: visible;
}

/* Hide broken or missing images gracefully */
.product-image:not(:has(img)) {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><rect fill="%23e9ecef" width="200" height="200"/><text fill="%23999" x="50%25" y="50%25" text-anchor="middle" dy=".3em" font-family="Arial" font-size="14">No Image</text></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.product-details {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.product-title {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin-bottom: 12px;
    transition: color 0.3s ease;
    font-family: 'Montserrat', sans-serif;
}

.product-card:hover .product-title {
    color: #19B2EB;
}

.product-description {
    color: #666;
    font-size: 18px;
    line-height: 1.6;
    flex: 1 1 auto;
    min-height: 60px;
}

.product-specs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.product-specs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
}

.product-specs .badge {
    display: inline-block;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(25, 178, 235, 0.1) 0%, rgba(112, 217, 105, 0.1) 100%);
    color: #19B2EB;
    border: 1px solid rgba(25, 178, 235, 0.2);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.4;
    transition: all 0.3s ease;
    width: auto;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    flex: 0 0 auto;
    text-transform: uppercase;
}

.product-card:hover .product-specs .badge {
    background: linear-gradient(135deg, rgba(25, 178, 235, 0.15) 0%, rgba(112, 217, 105, 0.15) 100%);
    border-color: rgba(25, 178, 235, 0.4);
    transform: translateY(-2px);
}

/* Product Card Buttons */
.product-buttons {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: auto;
    flex-shrink: 0;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: auto;
}

.product-buttons li {
    margin: 0;
    flex: 0 0 auto;
}

.product-button {
    background: rgba(25, 178, 235, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(25, 178, 235, 0.3);
    border-radius: 12px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-decoration: none !important;
    min-width: 120px;
    max-width: 140px;
    width: 100%;
}

.product-button:hover {
    background: rgba(25, 178, 235, 0.2);
    border-color: rgba(25, 178, 235, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(25, 178, 235, 0.2);
    text-decoration: none !important;
}

.product-button img {
    max-height: 30px;
    width: auto;
    height: auto;
    display: block;
    transition: all 0.3s ease;
    margin: 0 auto;
}

.product-button:hover img {
    transform: scale(1.05);
}

@media (max-width: 767px) {
    .product-button {
        min-width: 100px;
        max-width: 120px;
        padding: 8px 12px;
    }
    
    .product-button img {
        max-height: 28px;
    }
}

/* Enhanced Section Styling */
.section {
    position: relative;
}

.section-head {
    margin-bottom: 60px;
}

.section-head h2,
.section-head .heading,
h2.heading {
    font-family: 'Josefin Sans', sans-serif !important;
    font-size: 42px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 20px;
    position: relative;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.section-head h2 span {
    background: linear-gradient(135deg, #70D969 0%, #19B2EB 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    position: relative;
    font-weight: 700;
}

.section-head .lead {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 15px;
    font-weight: 400;
}

/* About Section Enhancements */
.about-section {
    background: #ffffff;
    position: relative;
    overflow: visible;
    padding-top: 80px;
    padding-bottom: 0;
    z-index: 1;
    animation: fadeInUp 1s ease-out;
}

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

.about-section .section-head {
    animation: fadeInUp 1s ease-out 0.2s both;
    margin-bottom: 40px;
}

.about-section .section-head h2 {
    margin-bottom: 25px;
    font-size: 42px;
    font-weight: 800;
}

.about-section .section-head h2 span {
    background: linear-gradient(135deg, #70D969 0%, #19B2EB 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.about-section .section-head .lead {
    font-size: 20px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 30px;
    font-weight: 400;
}

.about-section .txt-entry {
    animation: fadeInUp 1s ease-out 0.4s both;
}

/* About section video animation is handled by .about-section-video class */

.about-section-video {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.about-section-video.animate-in {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.about-section .container {
    position: relative;
    z-index: 10;
}

.about-section .txt-entry {
    position: relative;
    z-index: 10;
}

.about-section .video {
    position: relative;
    z-index: 10;
}

.about-section .about-buttons {
    position: relative;
    z-index: 10;
}

/* Customer Reviews Section */
.customer-reviews-section {
    position: relative;
    background: #ffffff;
    overflow: visible;
    animation: fadeInUp 1s ease-out;
    padding-bottom: 140px !important;
    z-index: 1;
}

.customer-reviews-section .section-head {
    animation: fadeInUp 1s ease-out 0.2s both;
}

.customer-reviews-section #customer-reviews-widget {
    animation: fadeInUp 1s ease-out 0.4s both;
}

/* Feefo Widget in Testimonials Section */
.feefo-widget-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.feefo-reviews-widget {
    width: 100%;
    min-height: 600px;
}

.feefo-reviews-widget iframe {
    width: 100%;
    min-height: 600px;
    border: none;
    border-radius: 12px;
}

/* Feefo Badge in Testimonials Section (Fallback) */
.feefo-badge-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px 0;
}

.feefo-badge-wrapper {
    display: inline-block;
}

.feefo-badge-link {
    display: inline-block;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.feefo-badge-link:hover {
    transform: scale(1.05);
}

.feefo-badge-img {
    max-width: 200px;
    height: auto;
    display: block;
    border: none;
}

.customer-reviews-curved-top::before {
    display: block !important;
    content: '';
    height: 200px;
    width: 100%;
    background: url(../images/carb.png) top no-repeat;
    background-size: cover;
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1 !important;
    pointer-events: none;
}

.customer-reviews-curved-bottom::after {
    display: block !important;
    content: '';
    height: 200px;
    width: 100%;
    background: url(../images/carb.png) bottom no-repeat;
    background-size: cover;
    background-color: transparent;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    pointer-events: none;
    transform: rotate(180deg);
}

.customer-reviews-content {
    padding: 40px 0;
    text-align: left;
}

.customer-reviews-content h2,
.customer-reviews-content h3 {
    font-size: 36px;
    font-weight: 600;
    color: #333;
    margin-bottom: 40px;
    text-align: center;
}

.customer-reviews-content h3 span {
    color: #19B2EB;
}

/* Feefo Reviews Widget - Ensure visibility */
#customer-reviews-widget,
.customer-reviews-section #customer-reviews-widget {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Feefo Widgets - Desktop/Mobile Visibility */
.feefo-desktop-widget {
    display: block;
}

.feefo-mobile-widget {
    display: none;
}

/* Mobile: Hide desktop widget, hide mobile widget */
@media (max-width: 767px) {
    .feefo-desktop-widget {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Hide feefo-mobile-widget on mobile */
    .feefo-mobile-widget {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    
    .feefo-mobile-widget .feefo-review-widget-product {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Hide customer reviews section mobile widget */
    #customer-reviews .feefo-mobile-widget {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    #customer-reviews .feefo-mobile-widget .feefo-review-widget-product {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Hide Feefo product review widget on mobile */
    #feefo-product-review-widgetId,
    .feefo-review-widget-product#feefo-product-review-widgetId {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Override inline styles for feefo-mobile-widget */
    .feefo-mobile-widget[style*="display: block"],
    .feefo-mobile-widget[style*="display:block"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Hide product review badges on mobile */
    .product-review-badge-desktop {
        display: none !important;
    }
}

/* Product Review Badge on Desktop */
.product-review-badge-desktop {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-review-badge-desktop .feefo-review-badge-wrapper-product {
    display: inline-block;
}

/* Reviews Section (YouGarden Style) */
.reviews-section-container {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
}

.reviews-section-header {
    border-bottom: 1px solid #e0e0e0;
}

.reviews-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #f8f9fa;
    color: #333;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.reviews-toggle:hover,
.reviews-toggle:focus {
    background: #e9ecef;
    color: #333;
    text-decoration: none;
}

.reviews-toggle[aria-expanded="true"] {
    background: #e9ecef;
}

.reviews-toggle i {
    margin-left: 10px;
    transition: transform 0.3s ease;
    font-size: 14px;
}

.reviews-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.reviews-content {
    padding: 30px;
}

/* Average Rating Section */
.average-rating-section {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 30px;
}

.rating-display {
    flex: 1;
}

.rating-stars-text {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.rating-label {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.rating-value {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.rating-number {
    font-size: 32px;
    font-weight: 700;
    color: #333;
}

.rating-separator {
    font-size: 20px;
    color: #666;
}

.rating-total {
    font-size: 20px;
    color: #666;
}

.rating-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 10px;
}

.rating-stars i {
    color: #FFD700;
    font-size: 20px;
}

.rating-source {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.feefo-brand {
    font-weight: 600;
    color: #333;
}

.review-count {
    font-weight: 500;
}

.read-all-reviews-link {
    color: #19B2EB;
    text-decoration: underline;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.read-all-reviews-link:hover {
    color: #70D969;
    text-decoration: underline;
}

.feefo-badge-container {
    flex-shrink: 0;
}

/* Responsive Styles for Reviews Section */
@media (max-width: 768px) {
    .average-rating-section {
        flex-direction: column;
        gap: 20px;
    }
    
    .rating-stars-text {
        flex-wrap: wrap;
    }
    
    .rating-number {
        font-size: 28px;
    }
    
    .reviews-content {
        padding: 20px;
    }
}

/* Testimonials Carousel */
.testimonials-carousel {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0;
    position: relative;
    overflow: visible;
    z-index: 1;
}

.testimonials-carousel .carousel-inner.testimonials-carousel-inner {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    width: 100%;
    padding-bottom: 30px;
}

.testimonials-carousel .item {
    padding: 0 15px;
    width: 33.333%;
    flex: 0 0 33.333%;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.5;
    transform: scale(0.9);
    position: relative;
    display: flex;
    align-items: center;
}

.testimonials-carousel .item.active {
    opacity: 1;
    transform: scale(1);
    z-index: 3;
}

.testimonials-carousel .item.prev {
    opacity: 0.5;
    transform: scale(0.9);
    z-index: 1;
}

.testimonials-carousel .item.next {
    opacity: 0.5;
    transform: scale(0.9);
    z-index: 1;
}

.testimonials-carousel .testimonial-card {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 20px;
    padding: 40px;
    padding-bottom: 50px;
    height: 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

.testimonials-carousel .item.active .testimonial-card {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.testimonials-carousel .carousel-control {
    display: none !important;
}

.testimonials-carousel .carousel-indicators {
    bottom: -40px;
    margin-bottom: 0;
    margin-top: 20px;
}

.testimonials-carousel .carousel-indicators li {
    background-color: #19B2EB;
    border: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 5px;
}

.testimonials-carousel .carousel-indicators .active {
    background-color: #0D8CC0;
    width: 14px;
    height: 14px;
}

@media (max-width: 991px) {
    .testimonials-carousel .item {
        width: 50%;
        flex: 0 0 50%;
    }
    
    .testimonials-carousel .item.prev,
    .testimonials-carousel .item.next {
        opacity: 0.3;
    }
}

@media (max-width: 767px) {
    .customer-reviews-section {
        padding-top: 40px !important;
        padding-bottom: 60px !important;
    }
    
    .customer-reviews-curved-top::before,
    .customer-reviews-curved-bottom::after {
        display: none !important;
    }
    
    /* Show Feefo badge in customer reviews section on mobile */
    .customer-reviews-feefo-badge-mobile {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .customer-reviews-feefo-badge-mobile .feefo-fallback-badge {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 12px;
        padding: 15px 20px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
    
    .customer-reviews-feefo-badge-mobile .feefo-fallback-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    
    .customer-reviews-feefo-badge-mobile .feefo-stars {
        display: flex;
        gap: 4px;
    }
    
    .customer-reviews-feefo-badge-mobile .feefo-star {
        color: #FFB800;
        font-size: 20px;
    }
    
    .customer-reviews-feefo-badge-mobile .feefo-rating-text {
        font-size: 24px;
        font-weight: 700;
        color: #333;
    }
    
    .customer-reviews-feefo-badge-mobile .feefo-reviews-text {
        font-size: 14px;
        color: #666;
        font-weight: 500;
    }
    
    /* Hide Feefo logo in customer reviews section on mobile */
    .customer-reviews-feefo-badge-mobile img[alt="Feefo"],
    .customer-reviews-feefo-badge-mobile > div:last-child {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    .customer-reviews-content {
        padding: 30px 15px;
    }
    
    .customer-reviews-content h2,
    .customer-reviews-content h3 {
        font-size: 38px !important; /* Same size as 'Our Complete Product Range' heading */
        margin-bottom: 30px;
        padding-top: 0;
    }
    
    /* Hide feefo-mobile-widget on mobile */
    .feefo-mobile-widget {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    
    /* Hide feefo-mobile-widget child elements */
    .feefo-mobile-widget #feefo-product-review-widgetId,
    .feefo-mobile-widget .feefo-review-widget-product {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    #feefo-product-review-widgetId {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .testimonials-carousel {
        padding: 0 15px;
        max-width: 100%;
        overflow: hidden;
        margin-top: 20px;
    }
    
    .testimonials-carousel .carousel-inner.testimonials-carousel-inner {
        min-height: auto;
        overflow: hidden;
        display: block;
    }
    
    .testimonials-carousel .item {
        width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0;
        opacity: 0 !important;
        transform: none !important;
        display: none !important;
    }
    
    .testimonials-carousel .item.active {
        opacity: 1 !important;
        transform: none !important;
        display: block !important;
    }
    
    .testimonials-carousel .item.prev,
    .testimonials-carousel .item.next {
        display: none !important;
    }
    
    .testimonials-carousel .testimonial-card {
        padding: 30px 25px;
        margin: 0 auto;
        max-width: 100%;
        margin-bottom: 20px;
    }
    
    .testimonials-carousel .testimonial-text {
        font-size: 18px;
        line-height: 1.7;
        margin-bottom: 15px;
    }
    
    .testimonials-carousel .testimonial-author {
        font-size: 14px;
        margin-top: 15px;
        font-weight: 600;
    }
    
    .testimonials-carousel .testimonial-rating {
        font-size: 16px;
        margin-bottom: 15px;
    }
    
    .testimonials-carousel .carousel-indicators {
        bottom: -30px;
        position: relative;
        margin-top: 20px;
        margin-bottom: 0;
    }
}

/* Add carb pattern to top of about section */
.about-section-top-curved::before {
    display: block !important;
    content: '';
    height: 150px;
    width: 100%;
    background: url(../images/carb.png) top no-repeat;
    background-size: cover;
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1 !important;
    pointer-events: none;
}

/* Add carb pattern to bottom of about section */
.about-section-bottom-curved::after {
    display: none !important;
}

/* Section Divider Wave */
/* Curved divider for features section */
.section-divider-wave {
    position: relative;
    width: 100%;
    height: 80px;
    margin: 0;
    padding: 0;
    z-index: 0;
    overflow: hidden;
    display: block !important;
    background: transparent;
    animation: none !important;
    line-height: 0;
    font-size: 0;
}

/* Remove gap between divider and footer in Safari */
.section-divider-wave + .footer-section {
    margin-top: -1px !important;
    padding-top: 80px !important;
    background-color: #404040 !important;
    background-image: none !important;
}

/* Ensure footer background extends to top to cover any gap */
.section-divider-wave + .footer-section::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #404040 !important;
    z-index: 1;
}

#divider-products {
    margin-top: 0;
    margin-bottom: 0;
}

.section-divider-wave-bottom {
    transform: scaleY(-1);
}

/* Blur divider to eliminate visible line */
.features-section + .section-divider-wave-bottom {
    filter: blur(0.5px);
    margin-top: -1px;
}

.section-divider-wave-footer {
    background: #404040;
    position: relative;
    margin-top: 0;
    margin-bottom: 0;
    overflow: visible;
    z-index: 0;
    animation: none !important;
}

.section-divider-wave svg {
    display: block !important;
    width: 100%;
    height: 100%;
    position: relative;
    vertical-align: top;
    overflow: hidden;
    z-index: 0;
    animation: none !important;
    margin: 0;
    padding: 0;
    line-height: 0;
}

/* Animated line at top of features section */
.features-section {
    position: relative;
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    overflow: visible !important;
}

/* Ensure divider wave is not cut off */
.section-divider-wave {
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
}

.features-section.gradiant-background {
    background-color: #537550 !important;
    background-image: linear-gradient(90deg, #537550 0%, #713841 100%) !important;
    position: relative;
    overflow: hidden;
    padding-top: 0 !important;
}

/* Ensure features section matches hero darkness - remove any lightening effects */
.features-section.gradiant-background .features-content::before {
    display: none !important;
}

/* Confetti Animation - Flower Shapes */
.confetti-section {
    position: relative;
    overflow: visible;
}

.confetti-section::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 200%;
    top: -100%;
    left: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    /* Flower shapes using radial gradients - logo colors: pink, orange, blue, green, purple */
    /* Creating flower shapes with 5 petals around a center */
    background-image: 
        /* Pink flowers */
        radial-gradient(circle at 50% 50%, #FFB6C1 3px, transparent 3px),
        radial-gradient(circle at 0% 50%, #FF6B9D 6px, transparent 6px),
        radial-gradient(circle at 100% 50%, #FF6B9D 6px, transparent 6px),
        radial-gradient(circle at 50% 0%, #FF6B9D 6px, transparent 6px),
        radial-gradient(circle at 50% 100%, #FF6B9D 6px, transparent 6px),
        /* Orange flowers */
        radial-gradient(circle at 50% 50%, #FFD700 3px, transparent 3px),
        radial-gradient(circle at 0% 50%, #FFA500 6px, transparent 6px),
        radial-gradient(circle at 100% 50%, #FFA500 6px, transparent 6px),
        radial-gradient(circle at 50% 0%, #FFA500 6px, transparent 6px),
        radial-gradient(circle at 50% 100%, #FFA500 6px, transparent 6px),
        /* Blue flowers */
        radial-gradient(circle at 50% 50%, #87CEEB 3px, transparent 3px),
        radial-gradient(circle at 0% 50%, #4ECDC4 6px, transparent 6px),
        radial-gradient(circle at 100% 50%, #4ECDC4 6px, transparent 6px),
        radial-gradient(circle at 50% 0%, #4ECDC4 6px, transparent 6px),
        radial-gradient(circle at 50% 100%, #4ECDC4 6px, transparent 6px),
        /* Green flowers */
        radial-gradient(circle at 50% 50%, #90EE90 3px, transparent 3px),
        radial-gradient(circle at 0% 50%, #98D8C8 6px, transparent 6px),
        radial-gradient(circle at 100% 50%, #98D8C8 6px, transparent 6px),
        radial-gradient(circle at 50% 0%, #98D8C8 6px, transparent 6px),
        radial-gradient(circle at 50% 100%, #98D8C8 6px, transparent 6px),
        /* Purple flowers */
        radial-gradient(circle at 50% 50%, #DDA0DD 3px, transparent 3px),
        radial-gradient(circle at 0% 50%, #BB8FCE 6px, transparent 6px),
        radial-gradient(circle at 100% 50%, #BB8FCE 6px, transparent 6px),
        radial-gradient(circle at 50% 0%, #BB8FCE 6px, transparent 6px),
        radial-gradient(circle at 50% 100%, #BB8FCE 6px, transparent 6px);
    background-size: 
        60px 60px, 60px 60px, 60px 60px, 60px 60px, 60px 60px,
        60px 60px, 60px 60px, 60px 60px, 60px 60px, 60px 60px,
        60px 60px, 60px 60px, 60px 60px, 60px 60px, 60px 60px,
        60px 60px, 60px 60px, 60px 60px, 60px 60px, 60px 60px,
        60px 60px, 60px 60px, 60px 60px, 60px 60px, 60px 60px;
    background-position: 
        10% 0%, 10% 0%, 10% 0%, 10% 0%, 10% 0%,
        30% 0%, 30% 0%, 30% 0%, 30% 0%, 30% 0%,
        50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%,
        70% 0%, 70% 0%, 70% 0%, 70% 0%, 70% 0%,
        90% 0%, 90% 0%, 90% 0%, 90% 0%, 90% 0%,
        5% 15%, 5% 15%, 5% 15%, 5% 15%, 5% 15%,
        25% 15%, 25% 15%, 25% 15%, 25% 15%, 25% 15%,
        45% 15%, 45% 15%, 45% 15%, 45% 15%, 45% 15%,
        65% 15%, 65% 15%, 65% 15%, 65% 15%, 65% 15%,
        85% 15%, 85% 15%, 85% 15%, 85% 15%, 85% 15%,
        15% 30%, 15% 30%, 15% 30%, 15% 30%, 15% 30%,
        35% 30%, 35% 30%, 35% 30%, 35% 30%, 35% 30%,
        55% 30%, 55% 30%, 55% 30%, 55% 30%, 55% 30%,
        75% 30%, 75% 30%, 75% 30%, 75% 30%, 75% 30%,
        95% 30%, 95% 30%, 95% 30%, 95% 30%, 95% 30%,
        10% 45%, 10% 45%, 10% 45%, 10% 45%, 10% 45%,
        30% 45%, 30% 45%, 30% 45%, 30% 45%, 30% 45%,
        50% 45%, 50% 45%, 50% 45%, 50% 45%, 50% 45%,
        70% 45%, 70% 45%, 70% 45%, 70% 45%, 70% 45%,
        90% 45%, 90% 45%, 90% 45%, 90% 45%, 90% 45%,
        5% 60%, 5% 60%, 5% 60%, 5% 60%, 5% 60%,
        25% 60%, 25% 60%, 25% 60%, 25% 60%, 25% 60%,
        45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%,
        65% 60%, 65% 60%, 65% 60%, 65% 60%, 65% 60%,
        85% 60%, 85% 60%, 85% 60%, 85% 60%, 85% 60%,
        15% 75%, 15% 75%, 15% 75%, 15% 75%, 15% 75%,
        35% 75%, 35% 75%, 35% 75%, 35% 75%, 35% 75%,
        55% 75%, 55% 75%, 55% 75%, 55% 75%, 55% 75%,
        75% 75%, 75% 75%, 75% 75%, 75% 75%, 75% 75%,
        95% 75%, 95% 75%, 95% 75%, 95% 75%, 95% 75%,
        10% 90%, 10% 90%, 10% 90%, 10% 90%, 10% 90%,
        30% 90%, 30% 90%, 30% 90%, 30% 90%, 30% 90%,
        50% 90%, 50% 90%, 50% 90%, 50% 90%, 50% 90%,
        70% 90%, 70% 90%, 70% 90%, 70% 90%, 70% 90%,
        90% 90%, 90% 90%, 90% 90%, 90% 90%, 90% 90%,
        5% 105%, 5% 105%, 5% 105%, 5% 105%, 5% 105%,
        25% 105%, 25% 105%, 25% 105%, 25% 105%, 25% 105%,
        45% 105%, 45% 105%, 45% 105%, 45% 105%, 45% 105%,
        65% 105%, 65% 105%, 65% 105%, 65% 105%, 65% 105%,
        85% 105%, 85% 105%, 85% 105%, 85% 105%, 85% 105%;
    animation: confettiFall 8s linear;
    animation-iteration-count: 1;
}

.confetti-section.confetti-active::after {
    opacity: 1;
    animation: confettiFall 8s linear;
}

@keyframes confettiFall {
    0% {
        transform: translateY(-100%);
        opacity: 1;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

/* Ensure content stays above confetti */
.features-section .container,
.features-section .section-head,
.features-section .features-content {
    position: relative;
    z-index: 2;
}

/* Ensure hero content stays above confetti */
.header-section .container,
.header-section .header-content,
.header-section .header-texts {
    position: relative;
    z-index: 2;
}

/* Confetti Burst on Hover - Logo and Hero Image */
.confetti-burst-trigger {
    position: relative;
    overflow: visible;
    cursor: pointer;
}

.confetti-particle {
    position: fixed;
    pointer-events: none;
    z-index: 10000;
}

/* Hero Star Icon Animation */
.hero-star-icon {
    display: inline-block;
    margin-right: 8px;
    color: #FFD700;
    animation: starTwinkle 2s ease-in-out infinite;
}

@keyframes starTwinkle {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.2) rotate(180deg);
        opacity: 0.8;
    }
}

.hero-badge:hover .hero-star-icon {
    animation: starTwinkle 0.5s ease-in-out infinite;
    color: #FFA500;
}

/* Feefo Stars Animation */
.feefo-star {
    display: inline-block;
    color: #FFD700;
    font-size: 18px;
    animation: starPulse 2s ease-in-out infinite;
    margin: 0 2px;
}

.feefo-star:nth-child(1) { animation-delay: 0s; }
.feefo-star:nth-child(2) { animation-delay: 0.2s; }
.feefo-star:nth-child(3) { animation-delay: 0.4s; }
.feefo-star:nth-child(4) { animation-delay: 0.6s; }
.feefo-star:nth-child(5) { animation-delay: 0.8s; }

@keyframes starPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.9;
    }
}

.hero-feefo-badge:hover .feefo-star {
    animation: starPulse 0.6s ease-in-out infinite;
    color: #FFA500;
}

/* Hero Bottom Divider */
#divider-hero-bottom {
    position: absolute !important;
    bottom: 0;
    left: 50% !important;
    transform: translateX(-50%) rotate(90deg) !important;
    transform-origin: center bottom !important;
    margin-top: 0;
    margin-bottom: 0;
    z-index: 100;
    display: block !important;
    visibility: visible !important;
    width: 100vh !important;
    height: 80px !important;
    overflow: visible !important;
}

/* Override the scaleY transform from section-divider-wave-bottom */
#divider-hero-bottom.section-divider-wave-bottom {
    transform: translateX(-50%) rotate(90deg) !important;
}

/* Add carb pattern to bottom of header section */
/* Note: The carb.png divider is now handled by .hero-bottom-divider element, not ::after pseudo-element */
/* This rule is kept for backwards compatibility but should not conflict with spotlight animation */
#home.header-section.half-header.header-curbed::after,
.header-section.half-header.header-curbed::after,
.header-curbed::after {
    display: none !important;
}

/* Ensure header section doesn't clip the carb */
.header-section.header-curbed,
.half-header.header-curbed,
.header-section.half-header.header-curbed,
#home.header-section.half-header.header-curbed {
    overflow: hidden !important;
    position: relative !important;
    padding-bottom: 150px !important;
    border: none !important;
    outline: none !important;
    margin-bottom: 0 !important;
}

/* Hero Bottom Divider */
.hero-bottom-divider {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 300px !important;
    width: 100% !important;
    /* z-index: 1 !important; */
    pointer-events: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    /* background-color: #537550 !important; */
    /* background-image: linear-gradient(90deg, #537550 0%, #713841 100%) !important; */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Enhanced hero bottom divider with animated gradient - same as hero */
.hero-bottom-divider::before {
    display: none !important;
}

/* Subtle light rays effect - same as hero */
.hero-bottom-divider::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 70%
    );
    animation: heroLightRotate 20s linear infinite;
    z-index: 0;
    pointer-events: none;
}

.hero-bottom-divider img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: fill !important;
    object-position: bottom center !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1 !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: bottom !important;
    line-height: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Override to disable gradient background rule from theme-blue-green.css and style.css */
/* Commented out to allow gradient backgrounds */
.gradiant-background,
.bg-gradiant.mfp-bg,
.box-icon,
.team-member .team-photo:after {
    background-color: #404040 !important;
    background-image: none !important;
}

/* Hero section background - match product image colors (green packaging to pink/red product) */
.header-section.gradiant-background,
.header-section.half-header.gradiant-background {
    background-color: #537550 !important;
    background-image: linear-gradient(90deg, #537550 0%, #713841 100%) !important;
    position: relative;
    overflow: visible;
}

/* Enhanced hero background with animated gradient */
.header-section.gradiant-background::before,
.header-section.half-header.gradiant-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(83, 117, 80, 0.8) 0%,
        rgba(113, 56, 65, 0.8) 50%,
        rgba(83, 117, 80, 0.8) 100%
    );
    background-size: 200% 100% !important;
    -webkit-animation: heroGradientShift 8s ease-in-out infinite !important;
    animation: heroGradientShift 8s ease-in-out infinite !important;
    z-index: 0 !important;
    opacity: 0.6 !important;
}

/* Animated gradient shift */
@keyframes heroGradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Subtle light rays effect - Spotlight animation */
#home.header-section.gradiant-background::after,
#home.header-section.half-header.gradiant-background::after,
.header-section.gradiant-background::after,
.header-section.half-header.gradiant-background::after {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background-image: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.08) 30%,
        transparent 70%
    ) !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: 200% 200% !important;
    background-color: transparent !important;
    animation: heroLightRotate 20s linear infinite !important;
    z-index: 1 !important;
    pointer-events: none !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform-origin: center center !important;
    margin: 0 !important;
    padding: 0 !important;
    bottom: auto !important;
}

/* Rotating light effect */
@keyframes heroLightRotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* Webkit keyframes for Safari/Chrome compatibility */
@-webkit-keyframes heroLightRotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* Hero Spotlight Animation - Unique ID to avoid conflicts */
#hero-spotlight-animation.hero-spotlight-bg {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background-image: -webkit-radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.08) 30%,
        transparent 70%
    ) !important;
    background-image: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.08) 30%,
        transparent 70%
    ) !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: 200% 200% !important;
    background-color: transparent !important;
    -webkit-animation: heroLightRotate 20s linear infinite !important;
    animation: heroLightRotate 20s linear infinite !important;
    z-index: 1 !important;
    pointer-events: none !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-transform-origin: center center !important;
    transform-origin: center center !important;
    margin: 0 !important;
    padding: 0 !important;
    bottom: auto !important;
    right: auto !important;
}

/* Ensure gradient overlay is on top of background effects */
.header-section .gradiant-overlay {
    z-index: 2 !important;
    position: relative;
}

/* Animated gold/yellow line at top - ensure it's visible */
.features-section.gradiant-background::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 5px !important;
    background: linear-gradient(90deg, transparent, #FFD700, #FFA500, #FFD700, transparent) !important;
    z-index: 9999 !important;
    animation: animatedLine 3s ease-in-out infinite !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 0 0 30px rgba(255, 165, 0, 0.4) !important;
    display: block !important;
    pointer-events: none !important;
}

@keyframes animatedLine {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Accessibility: Skip to content link */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: #537550;
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 10000;
    border-radius: 0 0 4px 0;
}

.skip-to-content:focus {
    top: 0;
    outline: 3px solid #ffd700;
    outline-offset: 2px;
}

/* Legal Pages Styling */
.legal-content {
    line-height: 1.8;
    color: #333;
}

.legal-content h2 {
    font-size: 24px;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 20px;
    color: #537550;
}

.legal-content h2:first-of-type {
    margin-top: 0;
}

.legal-content p {
    margin-bottom: 20px;
    font-size: 16px;
}

.legal-content ul {
    margin-bottom: 20px;
    padding-left: 30px;
}

.legal-content li {
    margin-bottom: 10px;
    font-size: 16px;
}

.legal-content strong {
    font-weight: 600;
    color: #333;
}

@media (max-width: 767px) {
    .legal-content h2 {
        font-size: 20px;
        margin-top: 30px;
    }
    
    .legal-content p,
    .legal-content li {
        font-size: 15px;
    }
}

/* Background flash animation with white gradients */
@keyframes bgFlash {
    0%, 100% {
        background: linear-gradient(293deg, #70D969 0%, #19B2EB 100%);
    }
    25% {
        background: linear-gradient(293deg, rgba(112, 217, 105, 0.9) 0%, rgba(25, 178, 235, 0.9) 100%),
                    linear-gradient(293deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%);
    }
    50% {
        background: linear-gradient(293deg, rgba(112, 217, 105, 0.95) 0%, rgba(25, 178, 235, 0.95) 100%),
                    linear-gradient(293deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);
    }
    75% {
        background: linear-gradient(293deg, rgba(112, 217, 105, 0.9) 0%, rgba(25, 178, 235, 0.9) 100%),
                    linear-gradient(293deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%);
    }
}

.features-section::after {
    display: none !important;
    border-top: none !important;
}

/* About section spacing */
.about-section.about-section-bottom-curved {
    margin-bottom: 0;
    padding-bottom: 90px;
}

.features-section {
    margin-top: 0;
}

.about-section-bottom-curved::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    width: 100%;
    background: linear-gradient(293deg, #70D969 0%, #19B2EB 100%);
    z-index: 0;
    pointer-events: none;
}

.about-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(25, 178, 235, 0.3), transparent);
}

.about-section .section-head ul {
    list-style: none;
    padding: 0;
    margin: 50px 0 0 0;
    text-align: left;
    display: grid;
    gap: 15px;
}

.about-section .section-head ul li {
    padding: 0;
    font-size: 18px;
    line-height: 1.8;
    color: #444;
    position: relative;
    background: transparent;
    border-radius: 0;
    border: none;
    transition: none;
    animation: none;
    box-shadow: none;
}

.about-section .section-head ul li:hover {
    transform: none;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    border: none;
    transition: none;
}

.about-section .section-head ul li::before {
    content: '';
    display: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(25, 178, 235, 0.1);
    border-radius: 50%;
    flex-shrink: 0;
}

.about-section .section-head ul li span {
    font-weight: 800;
    background: linear-gradient(135deg, #70D969 0%, #19B2EB 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1.5px;
    display: inline-block;
    margin-right: 8px;
    position: relative;
    padding-right: 12px;
}

.about-section .section-head ul li span::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 3px;
    background: linear-gradient(135deg, #70D969 0%, #19B2EB 100%);
    border-radius: 50%;
    margin-right: 6px;
}

.about-section .txt-entry {
    padding: 30px 0;
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.about-section .txt-entry::before {
    display: none;
}

.about-section .txt-entry p {
    margin-bottom: 20px;
    line-height: 1.9;
    font-size: 18px;
    color: #666;
    position: relative;
}

.about-section .txt-entry .lead {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    line-height: 1.9;
    position: relative;
    padding-left: 0;
    margin-bottom: 25px;
}

.about-section .txt-entry .lead::before {
    display: none;
}

.about-section .video {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    max-width: 800px;
    margin: 0 auto;
}

.about-section .video:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.about-section .video img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

.about-section .video:hover img {
    transform: scale(1.05);
}

/* Features Section Enhancements */
.features-section {
    position: relative;
    overflow: visible;
    animation: fadeInUp 1s ease-out;
    padding-top: 40px !important;
}

.features-section .section-head {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.features-section .section-head.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.features-section .section-head h2 {
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.3);
    font-weight: 800;
    animation: fadeInUp 1s ease-out 0.2s both;
    padding-top: 20px;
    margin-top: 0;
    border-bottom: none !important;
}

.features-section .section-head h2::after {
    display: none !important;
    content: none !important;
}

.features-section .single-features {
    animation: fadeInUp 0.8s ease-out both;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    transform: translateY(30px);
}

.features-section .single-features:nth-child(1) {
    animation-delay: 0.2s;
}

.features-section .single-features:nth-child(2) {
    animation-delay: 0.3s;
}

.features-section .single-features:nth-child(3) {
    animation-delay: 0.4s;
}

.features-section .single-features:nth-child(4) {
    animation-delay: 0.5s;
}

.features-section .single-features:nth-child(5) {
    animation-delay: 0.6s;
}

.features-section .single-features:nth-child(6) {
    animation-delay: 0.7s;
}

.features-section .single-features:nth-child(7) {
    animation-delay: 0.8s;
}

.features-section .single-features:nth-child(8) {
    animation-delay: 0.9s;
}

.features-section .single-features:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.95) !important;
}

.features-section .single-features .ti,
.features-section .single-features .fa {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.features-section .single-features:hover .ti,
.features-section .single-features:hover .fa {
    transform: scale(1.15) rotate(5deg);
    box-shadow: 0 8px 20px rgba(25, 178, 235, 0.4);
}

/* Add carb pattern to bottom of features section - matching gradient background */
.features-section-bottom-curved::after {
    display: block !important;
    content: '';
    height: 150px;
    width: 100%;
    background: url(../images/carb.png) bottom no-repeat;
    background-size: cover;
    background-color: transparent;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    pointer-events: none;
    transform: rotate(180deg);
}

/* Ensure features section uses same gradient background as hero and products */
.features-section.gradiant-background {
    background-color: #537550 !important;
    background-image: linear-gradient(90deg, #537550 0%, #713841 100%) !important;
    position: relative;
    overflow: hidden;
    padding-top: 0 !important;
}

/* Ensure features section matches hero darkness - remove any lightening effects */
.features-section.gradiant-background .features-content::before {
    display: none !important;
}

/* Removed radial gradient overlay to match hero section background */

/* New Feature Cards with Handwriting Font and Arrows */
/* Enhanced Features Layout with Center Image */
.features-layout-wrapper {
    display: grid;
    grid-template-columns: 1.5fr auto 1.5fr;
    gap: 40px;
    align-items: center;
    margin-top: 70px;
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 40px;
    position: relative;
    z-index: 1;
    user-select: text;
    -webkit-user-select: text;
}

.features-cards-column {
    display: flex;
    flex-direction: column;
    gap: 18px;
    justify-content: center;
    min-width: 300px;
    max-width: 400px;
}

.features-product-center {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    position: relative;
}

.features-product-image {
    position: relative;
    max-width: 850px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.2));
    z-index: 5;
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out, all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.features-product-image.animate-in {
    opacity: 1;
    transform: scale(1) translateY(0);
    animation: float 3s ease-in-out infinite 0.8s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.features-layout-wrapper:hover .features-product-image {
    transform: scale(1.05) translateY(-5px);
    filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.25));
}

.features-product-image img {
    width: 100%;
    height: auto;
    display: block;
    max-width: 850px;
    transition: transform 0.3s ease;
}

.feature-nutrient-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 20px 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    pointer-events: auto;
    cursor: text;
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(10px);
}

.feature-nutrient-card.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.features-cards-left .feature-nutrient-card:nth-child(1),
.features-cards-right .feature-nutrient-card:nth-child(1) {
    transition-delay: 0s;
}

.features-cards-left .feature-nutrient-card:nth-child(2),
.features-cards-right .feature-nutrient-card:nth-child(2) {
    transition-delay: 0.1s;
}

.features-cards-left .feature-nutrient-card:nth-child(3),
.features-cards-right .feature-nutrient-card:nth-child(3) {
    transition-delay: 0.2s;
}

.features-cards-left .feature-nutrient-card:nth-child(4),
.features-cards-right .feature-nutrient-card:nth-child(4) {
    transition-delay: 0.3s;
}

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

.feature-nutrient-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg, #70D969 0%, #19B2EB 100%);
    opacity: 0.6;
    transition: opacity 0.3s ease, width 0.3s ease;
    pointer-events: none;
    z-index: 0;
    border-radius: 14px 0 0 14px;
}

.feature-nutrient-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(25, 178, 235, 0.15), 0 0 0 1px rgba(25, 178, 235, 0.2);
    border-color: rgba(25, 178, 235, 0.3);
    z-index: 10;
    background: #ffffff;
}

.feature-nutrient-card:active {
    transform: translateY(-4px) scale(1.01);
    transition: all 0.15s ease;
}

.feature-nutrient-card:hover::before {
    opacity: 1;
    width: 6px;
    box-shadow: 0 0 10px rgba(25, 178, 235, 0.4);
}

.feature-nutrient-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(25, 178, 235, 0.1) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    pointer-events: none !important;
    z-index: 0;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.feature-nutrient-card:hover::after {
    width: 200px;
    height: 200px;
}

.feature-nutrient-card i {
    color: #70D969;
    font-size: 24px;
    line-height: 1;
    margin-top: 2px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 6px rgba(112, 217, 105, 0.4));
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    position: relative;
    z-index: 2;
    pointer-events: auto;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: scale(1) rotate(0deg);
    background: linear-gradient(135deg, rgba(112, 217, 105, 0.1) 0%, rgba(25, 178, 235, 0.1) 100%);
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
}

.feature-nutrient-card:hover i {
    transform: scale(1.15) rotate(5deg);
    color: #19B2EB;
    filter: drop-shadow(0 4px 12px rgba(25, 178, 235, 0.5));
    background: linear-gradient(135deg, rgba(112, 217, 105, 0.2) 0%, rgba(25, 178, 235, 0.2) 100%);
}

/* Fallback for checkmark if icon font doesn't load */
/* Font Awesome check-circle icon styling - no fallback needed */
.feature-nutrient-card i.fa-check-circle {
    color: #70D969;
    font-size: 24px;
}

.feature-nutrient-content {
    flex: 1;
    position: relative;
    z-index: 2;
    pointer-events: auto;
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    cursor: text;
}

.feature-nutrient-content h4 {
    color: #1a1a1a;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 6px 0;
    line-height: 1.4;
    letter-spacing: -0.2px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    user-select: text !important;
    -webkit-user-select: text !important;
    cursor: text;
}

.feature-nutrient-card:hover .feature-nutrient-content h4 {
    color: #19B2EB;
    transform: translateX(4px);
}

.feature-nutrient-content p {
    color: #4a4a4a;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    user-select: text !important;
    -webkit-user-select: text !important;
    cursor: text;
}

.feature-nutrient-card:hover .feature-nutrient-content p {
    color: #333;
    transform: translateX(4px);
}

/* Desktop - Large screens */
@media (min-width: 1201px) {
    .features-product-image {
        max-width: 850px !important;
        min-width: auto;
    }
    
    .features-product-image img {
        max-width: 850px !important;
        min-width: auto;
    }
    
    .features-product-center {
        min-width: auto;
        max-width: 850px;
    }
}

/* Responsive */
@media (max-width: 1200px) {
    .features-layout-wrapper {
        gap: 40px;
        padding: 0 20px;
    }
    
    .features-product-image {
        max-width: 650px !important;
        min-width: auto;
    }
    
    .features-product-image img {
        max-width: 650px !important;
        min-width: auto;
    }
    
    .features-product-center {
        min-width: auto;
        max-width: 650px;
    }
}

@media (max-width: 992px) {
    .features-layout-wrapper {
        grid-template-columns: 1fr;
        gap: 50px;
        padding: 0 20px;
    }
    
    .features-product-center {
        order: -1;
        padding: 0;
    }
    
    .features-product-image {
        max-width: 500px;
    margin: 0 auto;
    }
    
    .features-product-image img {
        max-width: 500px;
    }
    
    .features-cards-left,
    .features-cards-right {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .features-layout-wrapper {
        gap: 40px;
        margin-top: 40px;
        padding: 0 15px;
    }
    
    .features-cards-left,
    .features-cards-right {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .feature-nutrient-card {
        padding: 20px 22px;
    }
    
    .feature-nutrient-card i {
        font-size: 22px;
    }
    
    .feature-nutrient-content h4 {
        font-size: 17px;
        margin-bottom: 6px;
    }
    
    .feature-nutrient-content p {
        font-size: 14px;
        line-height: 1.6;
    }
    
    .features-product-image {
        max-width: 450px;
    }
    
    .features-product-image img {
        max-width: 450px;
    }
}

.features-product-wrapper {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
}

.features-product-image img {
    width: 100%;
    height: auto;
    display: block;
}

.feature-card {
    position: absolute;
    font-family: 'Shadows Into Light', cursive;
    font-size: 32px;
    font-weight: 600;
    color: #ffffff;
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
    z-index: 2;
    transition: all 0.3s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0;
}

.feature-card:hover {
    transform: scale(1.05);
}

.feature-card-text {
    position: relative;
    z-index: 3;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Curvy Arrow styling using SVG - Hidden */
.feature-card-arrow {
    display: none !important;
}

.feature-card-left .feature-card-arrow-left {
    order: 2;
}

.feature-card-right .feature-card-arrow-right {
    order: 0;
}

.feature-card-arrow-left::before,
.feature-card-arrow-right::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath d='M 0 20 Q 20 10, 30 20 T 60 20' stroke='%23ffffff' stroke-width='3' fill='none' stroke-linecap='round'%3E%3C/path%3E%3Cpath d='M 50 15 L 60 20 L 50 25' stroke='%23ffffff' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.feature-card-arrow-right::before {
    transform: scaleX(-1);
}

/* Left side cards positioning */
.feature-card-left {
    right: calc(50% + 250px);
    text-align: right;
}

.feature-card-left.feature-card-1 {
    top: 10%;
}

.feature-card-left.feature-card-2 {
    top: 25%;
}

.feature-card-left.feature-card-3 {
    top: 50%;
}

.feature-card-left.feature-card-4 {
    top: 75%;
}

/* Right side cards positioning */
.feature-card-right {
    left: calc(50% + 250px);
    text-align: left;
}

.feature-card-right.feature-card-5 {
    top: 10%;
}

.feature-card-right.feature-card-6 {
    top: 25%;
}

.feature-card-right.feature-card-7 {
    top: 50%;
}

.feature-card-right.feature-card-8 {
    top: 75%;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .feature-card-left {
        right: calc(50% + 200px);
    }
    
    .feature-card-right {
        left: calc(50% + 200px);
    }
    
    .feature-card {
        font-size: 28px;
        padding: 0;
    }
}

@media (max-width: 992px) {
    .features-product-wrapper {
        min-height: 500px;
        padding: 60px 20px;
    }
    
    .features-product-image {
        max-width: 300px;
    }
    
    .feature-card-left {
        right: calc(50% + 180px);
    }
    
    .feature-card-right {
        left: calc(50% + 180px);
    }
    
    .feature-card {
        font-size: 24px;
        padding: 0;
    }
}

@media (max-width: 768px) {
    .features-product-wrapper {
        min-height: auto;
        padding: 40px 15px;
        flex-direction: column;
    }
    
    .features-product-image {
        max-width: 250px;
        margin-bottom: 40px;
    }
    
    .feature-card {
        position: static;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px auto;
        width: 90%;
        max-width: 300px;
        text-align: center !important;
        font-size: 22px;
        padding: 0;
    }
    
    .feature-card-arrow {
        display: block;
    }
    
    .feature-card-left,
    .feature-card-right {
        left: auto;
        right: auto;
    }
}

/* Add curved top pattern matching hero bottom */
.features-curved-top::before {
    display: none !important;
    content: '';
    height: 150px;
    width: 100%;
    background: url(../images/carb.png) bottom no-repeat;
    background-size: 100% 100%;
    background-color: transparent;
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    z-index: 2;
    pointer-events: none;
    transform: rotate(180deg);
}

/* Ensure animated line shows even with features-curved-top class */
.features-section.features-curved-top.gradiant-background::before {
    display: block !important;
    content: '';
    height: 5px !important;
    background: linear-gradient(90deg, transparent, #FFD700, #FFA500, #FFD700, transparent) !important;
    background-size: 200% 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    z-index: 100 !important;
    animation: animatedLine 3s ease-in-out infinite !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 0 0 30px rgba(255, 165, 0, 0.4) !important;
    transform: none !important;
    pointer-events: none !important;
}

/* Ensure features section has no top border - consolidated above */

.features-section .section-head .lead {
    color: rgba(255, 255, 255, 0.95);
    font-size: 18px;
}

.features-section .section-head p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 18px;
    line-height: 1.8;
}

.features-section .features-content {
    position: relative;
    z-index: 1;
    padding-bottom: 150px;
}

.features-section .container {
    position: relative;
    z-index: 1;
}

.features-section .single-features {
    position: relative;
    z-index: 1;
}

.features-section img {
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.2));
    transition: transform 0.3s ease;
}

.features-section img:hover {
    transform: scale(1.02);
}

/* Products Section Enhancements */
.products-section {
    position: relative;
    overflow: visible;
    z-index: 0;
    margin-top: 0;
    padding-top: 120px;
    animation: fadeInUp 1s ease-out;
}

.products-section .section-head {
    padding-top: 0;
    animation: fadeInUp 1s ease-out 0.2s both;
}

.products-section .product-card {
    animation: fadeInUp 1s ease-out both;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.products-section .product-card:nth-child(1) {
    animation-delay: 0.3s;
}

.products-section .product-card:nth-child(2) {
    animation-delay: 0.4s;
}

.products-section .product-card:nth-child(3) {
    animation-delay: 0.5s;
}

.products-section .product-card:nth-child(4) {
    animation-delay: 0.6s;
}

.products-section .product-card:nth-child(5) {
    animation-delay: 0.7s;
}

.products-section .product-card:nth-child(6) {
    animation-delay: 0.8s;
}

.products-section .product-card:nth-child(7) {
    animation-delay: 0.9s;
}

.products-section .product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.products-section.gradiant-background {
    background-color: #537550 !important;
    background-image: linear-gradient(90deg, #537550 0%, #713841 100%) !important;
}

/* Add curved top pattern matching hero bottom */
.products-curved-top::before {
    display: block !important;
    content: '';
    height: 150px;
    width: 100%;
    background: url(../images/carb.png) bottom no-repeat;
    background-size: 100% 100%;
    background-color: transparent;
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    z-index: 1 !important;
    pointer-events: none;
    transform: rotate(180deg);
}

/* Aggressive fix: Ensure products section doesn't create stacking context above nav */
.products-section.products-curved-top {
    position: relative;
    z-index: 0 !important;
    overflow: visible;
}

/* Ensure navigation is always above products section carb */
.products-section .section-head .lead {
    color: rgba(255, 255, 255, 0.95);
    font-size: 18px;
}

.products-section .section-head {
    margin-bottom: 50px;
    position: relative;
    z-index: 2;
}

.products-section .section-head h2 {
    font-size: 42px;
    font-weight: 800;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.3);
}

.products-section .container {
    position: relative;
    z-index: 2;
}

.products-section .product-card {
    position: relative;
    z-index: 2;
}

.products-section .product-card.white-bg {
    background: #ffffff;
}

.products-section .product-card .product-details {
    background: #ffffff;
}

/* Add carb pattern to bottom of products section */
.products-section-bottom-curved::after {
    display: block;
    content: '';
    height: 200px;
    width: 100%;
    background: linear-gradient(90deg, #537450 0%, #68333c 100%);
    -webkit-mask-image: url(../images/carb.png);
    -webkit-mask-position: bottom center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: url(../images/carb.png);
    mask-position: bottom center;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    z-index: -1 !important;
    pointer-events: none;
}

/* Videos Section Enhancements */
.videos-section {
    position: relative;
    background: #ffffff;
    overflow: visible;
    animation: fadeInUp 1s ease-out;
}

.videos-section .section-head {
    animation: fadeInUp 1s ease-out 0.2s both;
}

.videos-section .video-card {
    animation: fadeInUp 1s ease-out both;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.videos-section .video-card:nth-child(1) {
    animation-delay: 0.3s;
}

.videos-section .video-card:nth-child(2) {
    animation-delay: 0.4s;
}

.videos-section .video-card:nth-child(3) {
    animation-delay: 0.5s;
}

.videos-section .video-card:nth-child(4) {
    animation-delay: 0.6s;
}

.videos-section .video-card:nth-child(5) {
    animation-delay: 0.7s;
}

.videos-section .video-card:nth-child(6) {
    animation-delay: 0.8s;
}

.videos-section .video-card:nth-child(7) {
    animation-delay: 0.9s;
}

.videos-section .video-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

/* Add curved top pattern for videos section */
.videos-curved-top::before {
    display: block;
    content: '';
    height: 150px;
    width: 100%;
    background: url(../images/carb.png) bottom no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    z-index: 1;
    transform: scaleY(-1);
    pointer-events: none;
}

.video-card {
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 450px;
}

.video-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.video-thumbnail {
    position: relative;
    height: 250px;
    min-height: 250px;
    max-height: 250px;
    overflow: hidden;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.video-card:hover .video-thumbnail img {
    transform: scale(1.1);
}

.video-thumbnail .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-card:hover .video-thumbnail .video-overlay {
    opacity: 0.8;
}

.video-thumbnail .video-play {
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #19B2EB;
    font-size: 24px;
    text-decoration: none;
    transition: all 0.3s ease;
    z-index: 1 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    margin: 0;
}

.video-thumbnail .video-play:hover {
    background: #19B2EB;
    color: #fff;
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(25, 178, 235, 0.4);
}

.video-details {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 200px;
}

.video-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.video-description {
    color: #666;
    font-size: 18px;
    line-height: 1.6;
    flex: 1;
}

/* Videos Section - Ensure equal height cards */
.videos-content .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.videos-content .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
    padding-left: 15px;
    padding-right: 15px;
}

.videos-content .video-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.video-details {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Add carb pattern to bottom of videos section */
.videos-section-bottom-curved::after {
    display: none !important;
}

/* Responsive Video Cards - All Breakpoints */
/* Extra Small Devices (phones, less than 576px) */
@media (max-width: 575px) {
    .videos-content .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 30px;
    }
    
    .video-card {
        min-height: 400px;
    }
    
    .video-thumbnail {
        height: 200px;
        min-height: 200px;
        max-height: 200px;
    }
    
    .video-title {
        font-size: 18px;
    }
    
    .video-description {
        font-size: 16px;
    }
}

/* Small Devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767px) {
    .videos-content .row > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .video-card {
        min-height: 420px;
    }
    
    .video-thumbnail {
        height: 220px;
        min-height: 220px;
        max-height: 220px;
    }
}

/* Medium Devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {
    .videos-content .row > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .video-card {
        min-height: 450px;
    }
    
    .video-thumbnail {
        height: 240px;
        min-height: 240px;
        max-height: 240px;
    }
}

/* Large Devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) {
    .videos-content .row > [class*="col-"] {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    
    .video-card {
        min-height: 450px;
    }
    
    .video-thumbnail {
        height: 250px;
        min-height: 250px;
        max-height: 250px;
    }
}

/* Extra Large Devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .videos-content .row > [class*="col-"] {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    
    .video-card {
        min-height: 480px;
    }
    
    .video-thumbnail {
        height: 280px;
        min-height: 280px;
        max-height: 280px;
    }
    
    .video-title {
        font-size: 22px;
    }
    
    .video-description {
        font-size: 18px;
    }
}

/* FAQ Section Enhancements */
.faq-section {
    position: relative;
    background: #f8f9fa !important;
    z-index: 1;
    overflow: hidden;
}

.faq-section.white-bg {
    background: #ffffff !important;
}

.faq-section .faq-alt {
    width: 100%;
}

.faq-section .faq-alt .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-items: flex-start;
}

.faq-section .faq-alt .row.tab-fix {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.faq-section .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* FAQ Image Sidebar */
.faq-section .faq-image-sidebar {
    padding: 20px 20px 20px 0;
    text-align: center;
    position: sticky;
    top: 120px;
}

.faq-section .faq-image-sidebar img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    object-fit: cover;
    max-height: 700px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.faq-section .faq-image-sidebar img:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

/* FAQ Content - Right Column */
.faq-section .faq-alt .col-md-8 {
    padding-left: 40px;
    padding-right: 15px;
}

/* Remove tab-fix constraints for 2-column layout */
.faq-section .faq-alt .row:not(.tab-fix) {
    margin-left: 0;
    margin-right: 0;
}

.faq-section .faq-alt .row.tab-fix {
    max-width: 100% !important;
    width: 100% !important;
}

.faq-image {
    text-align: center;
    padding: 20px 0;
}

.faq-image img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Add curved top pattern matching hero bottom */
.faq-curved-top::before {
    display: block !important;
    content: '';
    height: 200px;
    width: 100%;
    background: url(../images/carb.png) top no-repeat;
    background-size: cover;
    background-color: #ffffff;
    filter: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    pointer-events: none;
}

.faq-section::before {
    display: none;
}

.faq-section .container {
    position: relative;
    z-index: 1;
    padding-left: 15px !important;
    padding-right: 15px !important;
    max-width: 100% !important;
    width: 100% !important;
}

.faq-section .section-head {
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 50px;
}

.faq-section .section-head h2 {
    margin-bottom: 20px;
}

.faq-section .section-head .lead {
    font-size: 18px;
    color: #666;
    max-width: 700px;
    margin: 0 auto;
}

/* Additional Section Enhancements */
.section {
    padding: 80px 0;
}

.section-head {
    position: relative;
    padding-bottom: 30px;
}

.section-head::after {
    content: '';
    display: none;
}

.white-bg .section-head::after {
    background: linear-gradient(90deg, #19B2EB, #70D969);
}

.gradiant-background .section-head::after {
    background: rgba(255, 255, 255, 0.5);
}

.features-section.gradiant-background .section-head::after {
    display: none !important;
    content: none !important;
}

/* Enhanced About Section List Items */
.about-section .section-head ul li {
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    padding-left: 25px;
}

.about-section .section-head ul li:hover {
    border: none;
    padding-left: 0;
    transform: none;
}

/* Enhanced Video Play Button */
.about-section .video-play {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #19B2EB;
    font-size: 24px;
    text-decoration: none;
    transition: all 0.3s ease;
    z-index: 1 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    margin: 0;
}

.about-section .video:hover .video-play {
    transform: translate(-50%, -50%) scale(1.1);
    background: #19B2EB;
    color: #fff;
    box-shadow: 0 6px 20px rgba(25, 178, 235, 0.4);
}

/* Enhanced Product Cards */
.product-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.product-card:hover {
    transform: translateY(-15px) scale(1.02);
}

.product-image {
    transition: all 0.3s ease;
    overflow: hidden;
}

.product-card:hover .product-image {
    transform: scale(1.05);
}

.product-image img {
    transition: transform 0.3s ease;
    max-width: 100%;
    max-height: 100%;
}

.product-card:hover .product-image img {
    transform: scale(1.1);
}

.product-title {
    transition: color 0.3s ease;
}

.product-card:hover .product-title {
    color: #19B2EB;
}

/* Enhanced Features Icons */
.single-features .ti,
.single-features .fa {
    transition: all 0.3s ease;
}

.single-features:hover .ti,
.single-features:hover .fa {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 5px 15px rgba(25, 178, 235, 0.3);
}

/* Enhanced Section Transitions */
.section {
    opacity: 1;
    animation: fadeInUp 0.6s ease-out;
}

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

/* Enhanced Button Primary */
.button-primary {
    position: relative;
    overflow: hidden;
}

.button-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.button-primary:hover::before {
    width: 300px;
    height: 300px;
}

.button-primary span {
    position: relative;
    z-index: 1;
}

/* Enhanced FAQ Accordion */
.faq-section .panel-title a {
    position: relative;
    padding-right: 50px;
}

.faq-section .panel-title a::after {
    content: '';
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 2px;
    background: #19B2EB;
    transition: width 0.3s ease;
}

.faq-section .panel-title a:hover::after {
    width: 20px;
}

/* Enhanced Footer Links */
.footer-links-list a {
    position: relative;
    padding-left: 0;
    transition: padding-left 0.3s ease;
}

.footer-links-list a::before {
    content: '→';
    position: absolute;
    left: -20px;
    opacity: 0;
    transition: all 0.3s ease;
    color: #ffffff;
}

.footer-links-list a:hover::before {
    left: -15px;
    opacity: 1;
}

.footer-links-list a:hover {
    padding-left: 10px;
}

/* Enhanced Social Icons */
.social-links a {
    position: relative;
    overflow: hidden;
}

.social-links a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s;
}

.social-links a:hover::before {
    width: 100px;
    height: 100px;
}

.social-links a i {
    position: relative;
    z-index: 1;
}

/* Enhanced Product Specs Badges */
.product-specs .badge {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.product-specs .badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.product-card:hover .product-specs .badge::before {
    left: 100%;
}

.product-card:hover .product-specs .badge {
    background: #19B2EB;
    color: white;
    transform: translateY(-2px);
}

/* Enhanced Section Headings */
.section-head h2 {
    position: relative;
    display: inline-block;
}

.section-head h2::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #19B2EB, #70D969);
    transition: width 0.5s ease;
}

.section-head:hover h2::before {
    width: 100%;
}

/* Additional Content Enhancements */

/* About Section - Enhanced List Items - Cleaner Design */
.about-section .section-head ul li:hover {
    background: transparent;
    box-shadow: none;
    transform: none;
    border: none;
}

.about-section .section-head ul li:hover::before {
    display: none;
}

/* Enhanced Video Container */
.about-section .video {
    position: relative;
    cursor: pointer;
}

.about-section .video-overlay {
    transition: opacity 0.3s ease;
}

.about-section .video:hover .video-overlay {
    opacity: 0.8;
}

/* Removed duplicate - using the one above with proper centering */

/* Enhanced Features Section */
.features-section .features-content {
    position: relative;
}

.features-section .features-content::before {
    display: none !important;
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.features-section .single-features {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.features-section .single-features:hover {
    background: #ffffff;
    border-color: rgba(25, 178, 235, 0.2);
    transform: translateX(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.features-section .features-list {
    position: relative;
    z-index: 1;
}

.features-section img {
    position: relative;
    z-index: 1;
    transition: all 0.4s ease;
}

.features-section:hover img {
    transform: scale(1.05) rotate(2deg);
}

/* Enhanced Product Cards */
.product-card {
    position: relative;
    overflow: hidden;
}

.product-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #19B2EB, #70D969);
    border-radius: 22px;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.product-card:hover::before {
    opacity: 0.3;
}

.product-image {
    position: relative;
    overflow: hidden;
}

.product-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent, rgba(25, 178, 235, 0.05));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-card:hover .product-image::after {
    opacity: 1;
}

.product-title {
    position: relative;
    transition: all 0.3s ease;
}

.product-card:hover .product-title::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #19B2EB, #70D969);
    border-radius: 2px;
}

/* Enhanced FAQ Section */
.faq-section .panel {
    position: relative;
    overflow: hidden;
}

.faq-section .panel::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(180deg, #19B2EB, #70D969);
    transition: width 0.3s ease;
}

.faq-section .panel:hover::before {
    width: 4px;
}

.faq-section .panel-title a[aria-expanded="true"] {
    background: linear-gradient(90deg, rgba(25, 178, 235, 0.05), transparent);
}

.faq-section .panel-body {
    position: relative;
}

.faq-section .panel-body::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #19B2EB;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.faq-section .panel-collapse.in .panel-body::before {
    opacity: 1;
}

/* Enhanced Footer */
.footer-section {
    position: relative;
    overflow: visible !important;
    background-color: #404040 !important;
}

/* White gradient circle animation at bottom left */
.footer-section.gradiant-background::before,
.footer-section::before {
    content: '';
    position: absolute;
    bottom: -100px !important;
    top: auto !important;
    left: -100px !important;
    right: auto !important;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%) !important;
    border-radius: 50%;
    pointer-events: none;
    animation: pulse 6s ease-in-out infinite;
    z-index: 1;
}

.footer-section.gradiant-background::after,
.footer-section::after {
    content: '';
    position: absolute;
    bottom: -100px !important;
    top: auto !important;
    /* right: -100px !important; */
    left: auto !important;
    /* width: 400px; */
    height: 400px;
    /* background: radial-gradient(circle, rgba(237, 53, 91, 0.3) 0%, transparent 70%) !important; */
    border-radius: 50%;
    pointer-events: none;
    animation: pulse 6s ease-in-out infinite;
    z-index: 1;
}

.footer-brand {
    position: relative;
    z-index: 1 !important;
}

.footer-section h5 {
    position: relative;
    padding-bottom: 15px;
}

.footer-section h5::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 1px;
}

/* Enhanced Section Dividers */
.section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(25, 178, 235, 0.3), transparent);
    opacity: 0.5;
}

.gradiant-background.section::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

/* Remove top border from products section so divider fits nicely */
.products-section.section::before {
    display: none;
}

/* Remove top border from guides section so divider fits nicely */
.guides-section.section::before {
    display: none;
}

/* Remove top border from customer reviews section so divider fits nicely */
.customer-reviews-section.section::before {
    display: none;
}

/* Enhanced Button Primary in About Section */
.about-section .button-primary {
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(25, 178, 235, 0.3);
}

.about-section .button-primary::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.about-section .button-primary:hover::after {
    width: 400px;
    height: 400px;
}

.about-section .button-primary span {
    position: relative;
    z-index: 1;
}

/* Enhanced Product Buttons */
.product-button {
    position: relative;
    overflow: hidden;
}

.product-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(25, 178, 235, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
    z-index: 0;
}

.product-button:hover::after {
    width: 300px;
    height: 300px;
}

.product-button img {
    position: relative;
    z-index: 1;
}

.product-button * {
    position: relative;
    z-index: 1;
}

/* Enhanced Text Entry */
.about-section .txt-entry {
    position: relative;
}

.about-section .txt-entry::before {
    content: '"';
    position: absolute;
    top: -20px;
    left: -30px;
    font-size: 80px;
    color: rgba(25, 178, 235, 0.1);
    font-family: Georgia, serif;
    line-height: 1;
    font-weight: bold;
}

/* Enhanced Section Headings with Icons */
.section-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 15px;
}

.section-head h2::before {
    content: '';
    width: 50px;
    height: 4px;
    background: linear-gradient(90deg, #19B2EB, #70D969);
    border-radius: 2px;
    display: inline-block;
}

.white-bg .section-head h2::before {
    background: linear-gradient(90deg, #19B2EB, #70D969);
}

.gradiant-background .section-head h2::before {
    background: rgba(255, 255, 255, 0.5);
}

/* Responsive Enhancements */
@media (max-width: 991px) {
    .section {
        padding: 60px 0;
    }
    
    .section-head h2 {
        font-size: 36px; /* Increased from 32px by 4px */
    }
    
    .section-head .lead {
        font-size: 18px;
    }
    
    .about-section .section-head ul {
        padding: 20px;
    }
    
    .features-section .single-features {
        padding: 15px;
    }
}

@media (max-width: 767px) {
    .section {
        padding: 40px 0;
    }
    
    .section-head h2 {
        font-size: 32px; /* Increased from 28px by 4px */
    }
    
    .about-buttons {
        flex-direction: column;
        gap: 12px;
    }
    
    .about-buttons .button-primary,
    .about-buttons .button-secondary {
        width: 100%;
        text-align: center;
    }
    
    .about-section .txt-entry::before {
        display: none;
    }
    
    .about-section .txt-entry .lead::before {
        display: none;
    }
    
    .about-section .txt-entry .lead {
        padding-left: 0;
    }
    
    .section-head::after {
        width: 40px;
        height: 3px;
    }
    
    .about-section .txt-entry::before {
        display: none;
    }
    
    .section-head h2::before {
        width: 30px;
        height: 3px;
    }
}

/* Products Section - already enhanced above */

/* Button Enhancements */
.button-primary {
    background: #19B2EB;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 12px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.button-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(25, 178, 235, 0.4);
    background: #00cbff;
    color: white;
    text-decoration: none;
}

.button-secondary {
    background: #70D969;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 12px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.button-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(112, 217, 105, 0.4);
    background: #5BC653;
    color: white;
    text-decoration: none;
}

.button-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left 0.5s ease;
    z-index: 1;
}

.button-secondary:hover::before {
    left: 100%;
}

.button-secondary * {
    position: relative;
    z-index: 2;
}

/* About Section Buttons Container */
.about-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}

.about-buttons .button {
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.about-buttons .button-primary::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
    z-index: 0;
}

.about-buttons .button-primary:hover::after {
    width: 400px;
    height: 400px;
}

.about-buttons .button span,
.about-buttons .button {
    position: relative;
    z-index: 1;
}

.mt-30 {
    margin-top: 30px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-15 {
    margin-bottom: 15px;
}

.p-30 {
    padding: 30px;
}

.pt-60 {
    padding-top: 60px;
}

.pt-120 {
    padding-top: 120px;
}

.pb-120 {
    padding-bottom: 120px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .product-card {
        margin-bottom: 30px;
    }
    
    .product-image {
        height: 200px;
    }
}

/* Enhanced FAQ Section */
.faq-section {
    background: #f8f9fa;
    animation: fadeInUp 1s ease-out;
}

.faq-section .section-head {
    animation: fadeInUp 1s ease-out 0.2s both;
}

.faq-section .panel {
    animation: fadeInUp 1s ease-out both;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.faq-section .panel:nth-child(1) {
    animation-delay: 0.3s;
}

.faq-section .panel:nth-child(2) {
    animation-delay: 0.4s;
}

.faq-section .panel:nth-child(3) {
    animation-delay: 0.5s;
}

.faq-section .panel:nth-child(4) {
    animation-delay: 0.6s;
}

.faq-section .panel:nth-child(5) {
    animation-delay: 0.7s;
}

.faq-section .panel:nth-child(6) {
    animation-delay: 0.8s;
}

.faq-section .panel:nth-child(7) {
    animation-delay: 0.9s;
}

.faq-section .panel:nth-child(8) {
    animation-delay: 1s;
}

.faq-section .panel:nth-child(9) {
    animation-delay: 1.1s;
}

.faq-section .section-head {
    margin-bottom: 60px;
}

.faq-section .section-head h2 {
    font-size: 36px;
    margin-bottom: 15px;
}

.faq-section .panel-group {
    margin-bottom: 0;
}

.faq-section .panel {
    border: none;
    border-radius: 12px;
    margin-bottom: 18px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    background: white;
    overflow: hidden;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}

.faq-section .panel:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    border-left-color: #19B2EB;
    transform: translateX(5px);
}

.faq-section .panel-heading {
    background: white;
    border: none;
    padding: 0;
    border-radius: 8px 8px 0 0;
}

.faq-section .panel-title a {
    display: block;
    padding: 22px 25px;
    color: #333;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease;
    line-height: 1.5;
}

.faq-section .panel-title a:hover,
.faq-section .panel-title a:focus {
    color: #19B2EB;
    text-decoration: none;
}

.faq-section .panel-title a[aria-expanded="true"] {
    color: #19B2EB;
    background: #f0f9ff;
}

.faq-section .panel-body {
    padding: 20px 25px;
    color: #666;
    line-height: 1.8;
    background: white;
    border-top: 1px solid #f0f0f0;
}

.faq-section .panel-body p {
    margin-bottom: 0;
    font-size: 18px;
}

.faq-section .plus-minus {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-section .plus-minus span {
    display: block;
    width: 16px;
    height: 2px;
    background: #19B2EB;
    position: relative;
    transition: all 0.3s ease;
}

.faq-section .plus-minus span:after {
    content: '';
    position: absolute;
    width: 16px;
    height: 2px;
    background: #19B2EB;
    transform: rotate(90deg);
    transition: all 0.3s ease;
}

.faq-section .panel-title a[aria-expanded="true"] .plus-minus span:after {
    transform: rotate(0deg);
}

/* Enhanced Features Section */
.single-features {
    padding: 15px 0;
    transition: all 0.3s ease;
    min-height: 70px;
}

.single-features:hover {
    transform: translateX(5px);
}

.single-features h4 {
    font-size: 18px;
    margin-bottom: 8px;
    margin-top: 0;
    line-height: 1.3;
    color: #333;
}

.single-features p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 0;
    color: #666;
}

/* Fix icon size and alignment - Consistent top-left positioning for all cards */
.single-features {
    padding: 20px !important;
    padding-left: 70px !important;
    position: relative;
    min-height: 100px;
}

.single-features .ti,
.single-features .fa {
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    font-size: 1.3em !important;
    border-radius: 6px;
    text-align: center;
    position: absolute;
    top: 15px !important;
    left: 15px !important;
    right: auto !important;
    background: #ffffff !important;
    color: #19B2EB !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.icon-right .ti,
.icon-right .fa {
    top: 15px !important;
    left: 15px !important;
    right: auto !important;
}

/* Ensure text aligns properly */
.single-features h4,
.single-features p {
    text-align: left;
    padding-right: 0;
}

.icon-right h4,
.icon-right p {
    text-align: left;
    padding-right: 0;
}

@media (max-width: 991px) {
    .single-features {
        padding-left: 70px !important;
    }
    
    .single-features h4,
    .single-features p {
        text-align: left;
        padding-right: 0;
    }
}

/* Footer Top Divider */
.footer-top-divider {
    position: relative;
    width: 100%;
    height: auto;
    background: linear-gradient(293deg, #19B2EB 0%, #70D969 100%);
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.footer-divider-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

/* Products Section Top Divider */
.products-top-divider {
    position: relative;
    width: 100%;
    height: auto;
    background: linear-gradient(293deg, #19B2EB 0%, #70D969 100%);
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.products-divider-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}


/* Enhanced Footer Section */
.footer-section {
    /* Uses original gradiant-background class from theme */
    position: relative;
    margin-top: 0 !important;
    padding-top: 0 !important;
    background-color: #404040 !important;
}

.footer-section::before {
    display: none;
}

.footer-brand p {
    font-size: 14px;
    line-height: 1.8;
    opacity: 0.9;
    margin-top: 15px;
}

.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links-list li {
    margin-bottom: 12px;
}

.footer-links-list a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-links-list a:hover {
    color: white;
    padding-left: 5px;
    text-decoration: none;
}

.footer-section h5 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    color: white;
}

.footer-social {
    margin-top: 30px;
}

.social-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 15px;
}

.social-links li {
    margin: 0;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 18px;
}

.social-links a:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
    color: white;
    text-decoration: none;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 30px;
    margin-top: 40px;
}

.border-top-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 200px;
    filter: brightness(0) invert(1) !important;
    position: relative;
    z-index: 1 !important;
}

.footer-logo img,
.footer-logo picture,
.footer-logo picture img,
.footer-logo picture source + img {
    display: block;
    width: auto;
    height: auto;
    max-width: 200px;
    object-fit: contain;
    filter: brightness(0) invert(1) !important;
    opacity: 0.95;
    position: relative;
    z-index: 1 !important;
}

.footer-logo picture {
    filter: brightness(0) invert(1) !important;
    display: block;
}

.pt-80 {
    padding-top: 80px;
}

.pb-40 {
    padding-bottom: 40px;
}

.mb-60 {
    margin-bottom: 60px;
}

/* Smooth scroll for anchor links */
html {
    scroll-behavior: smooth;
}

/* Responsive Footer */
@media (max-width: 768px) {
    .footer-section .col-md-4,
    .footer-section .col-md-3,
    .footer-section .col-md-2 {
        margin-bottom: 40px;
    }
    
    .footer-section h5 {
        font-size: 16px;
    }
    
    .faq-section .section-head h2 {
        font-size: 38px !important; /* Same size as 'What's in our Superior Plant Food' heading */
    }
    
    .faq-section .panel-title a {
        padding: 15px 60px 15px 20px !important; /* Extra right padding for icon */
        font-size: 15px;
        position: relative !important;
        display: block !important;
    }
    
    .faq-section .panel-body {
        padding: 15px 20px;
    }
    
    /* FAQ Image Sidebar Mobile */
    .faq-section .faq-image-sidebar {
        margin-bottom: 30px;
        padding: 0;
    }
    
    /* FAQ Accordion Mobile - Ensure toggle icons at end */
    .faq-section .panel-title a .plus-minus {
        position: absolute !important;
        right: 20px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 24px !important;
        height: 24px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }
    
    .faq-section .faq-alt .col-md-8 {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Comprehensive Mobile Optimizations */
@media (max-width: 767px) {
    /* Hero Section Mobile */
    .header-content {
        padding: 60px 0 40px 0;
    }
    
    .header-texts {
        padding: 20px 0;
    }
    
    /* Mobile hero layout - reorder badge above title */
    .hero-content-mobile {
        display: flex;
        flex-direction: column;
    }
    
    .hero-content-mobile .hero-badge {
        order: 1;
        margin-top: 0 !important;
        margin-bottom: 15px;
        font-size: 14px; /* Increased from 11px */
        padding: 8px 16px; /* Increased from 6px 12px */
        display: inline-block;
        width: auto;
        max-width: fit-content;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-content-mobile .hero-title-gradient {
        order: 2;
        margin-top: 0 !important;
    }
    
    .hero-content-mobile .hero-description {
        order: 3;
    }
    
    .hero-content-mobile .hero-sizes {
        order: 4;
    }
    
    .hero-content-mobile .hero-cta {
        order: 5;
    }
    
    .hero-content-mobile .buttons {
        order: 6;
    }
    
    .hero-content-mobile .hero-feefo-badge {
        order: 7;
        margin-top: 20px;
    }
    
    /* Hero buttons horizontal on mobile */
    .header-section .buttons,
    .header-section .hero-content-mobile .buttons,
    .header-texts .buttons {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 15px !important;
        display: flex !important;
    }
    
    .header-section .buttons li {
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0 !important;
    }
    
    .header-section .button {
        flex: 0 1 auto !important;
        min-width: 140px !important;
        max-width: 180px !important;
        width: auto !important;
        display: flex !important;
    }
    
    /* Size badges horizontal on mobile */
    .size-badges {
        flex-direction: row !important;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .size-badge {
        width: auto;
        flex: 0 1 auto;
        justify-content: center;
    }
    
    /* About Section Mobile */
    .about-section .section-head h2 {
        font-size: 38px !important; /* Increased for mobile - bigger than default 32px */
    }
    
    .about-section .section-head ul {
        padding: 0;
    }
    
    .about-section .section-head ul li {
        padding: 12px 15px;
        font-size: 14px;
    }
    
    /* Features Section Mobile */
    .features-section .section-head h2 {
        font-size: 38px !important; /* Increased for mobile - bigger than default 32px */
    }
    
    .features-section .features-content {
        padding-bottom: 60px;
    }
    
    .features-section .single-features {
        padding: 15px;
        margin-bottom: 15px;
    }
    
    .features-section .single-features h4 {
        font-size: 16px;
    }
    
    .features-section .single-features p {
        font-size: 18px;
    }
    
    /* Products Section Mobile */
    .products-section {
        padding-top: 80px !important;
        margin-top: 0 !important;
    }
    
    .products-section .section-head {
        margin-bottom: 30px;
        padding-top: 0 !important;
    }
    
    .products-section .section-head h2 {
        font-size: 38px !important; /* Same size as 'What's in our Superior Plant Food' heading */
        line-height: 1.3;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }
    
    .products-section .section-head .lead {
        font-size: 16px;
    }
    
    /* Videos Section Mobile */
    .videos-section .section-head h2 {
        font-size: 38px !important; /* Same size as 'What's in our Superior Plant Food' heading */
    }
    
    /* Guides Section Mobile */
    .guides-section .section-head h2 {
        font-size: 38px !important; /* Same size as 'What's in our Superior Plant Food' heading */
    }
    
    .products-content .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 30px;
    }
    
    .product-card {
        margin-bottom: 0;
        min-height: auto;
    }
    
    .product-image {
        height: 220px;
        min-height: 220px;
        max-height: 220px;
        padding: 15px;
    }
    
    .product-details {
        padding: 20px !important;
    }
    
    .product-title {
        font-size: 22px;
        margin-bottom: 12px;
    }
    
    .product-description {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 15px;
        min-height: auto;
    }
    
    .product-specs {
        margin-bottom: 20px;
        gap: 10px;
        display: none !important;
    }
    
    .product-specs .badge {
        display: none !important;
    }
    
    .product-buttons:not(.product-modal-buttons .product-buttons) {
        flex-direction: row;
        gap: 12px;
        justify-content: center;
        margin-top: 20px;
    }
    
    .product-button:not(.product-modal-buttons .product-button) {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex: 1 1 50%;
        padding: 12px 16px;
    }
    
    .product-button:not(.product-modal-buttons .product-button) img {
        max-height: 32px;
    }
    
    .product-button:hover::after {
        width: 400px;
        height: 400px;
    }
    
    /* Curved patterns adjust on mobile */
    .features-curved-top::before,
    .faq-curved-top::before,
    .videos-curved-top::before,
    .customer-reviews-curved-top::before,
    .about-section-top-curved::before {
        height: 80px !important;
        background-size: cover !important;
        z-index: 0 !important;
    }
    
    /* Hide products carb on mobile */
    .products-curved-top::before {
        display: none !important;
    }
    
    .features-section-bottom-curved::after,
    .products-section-bottom-curved::after,
    .videos-section-bottom-curved::after,
    .customer-reviews-curved-bottom::after,
    .about-section-bottom-curved::after {
        height: 80px !important;
        background-size: cover !important;
        z-index: 0 !important;
    }
    
    /* Ensure content stays above carb dividers on mobile */
    .features-section .container,
    .features-section .features-content,
    .features-section .single-features {
        position: relative;
        z-index: 1 !important;
    }
    
    .features-section::before,
    .products-section::before {
        height: 80px;
    }
    
    /* Responsive Grid Alignment - Small Tablets */
    @media (min-width: 576px) and (max-width: 767px) {
        .products-content .row > [class*="col-"],
        .videos-content .row > [class*="col-"] {
            flex: 0 0 50%;
            max-width: 50%;
        }
    }
    
    /* Responsive Grid Alignment - Tablets */
    @media (min-width: 768px) and (max-width: 991px) {
        .products-content .row > [class*="col-md-4"],
        .videos-content .row > [class*="col-md-4"] {
            flex: 0 0 50%;
            max-width: 50%;
        }
    }
    
    /* Responsive Grid Alignment - Desktop */
    @media (min-width: 992px) {
        .products-content .row > [class*="col-md-4"],
        .videos-content .row > [class*="col-md-4"] {
            flex: 0 0 33.333333%;
            max-width: 33.333333%;
        }
    }
    
    /* Footer Mobile */
    .footer-section {
        padding: 60px 0 30px 0;
    }
    
    .footer-links-list {
        margin-bottom: 20px;
    }
    
    /* Ensure images are responsive */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Better spacing for sections */
    .section {
        padding: 40px 0 !important;
    }
    
    .pt-120 {
        padding-top: 40px !important;
    }
    
    .pb-120 {
        padding-bottom: 40px !important;
    }
    
    /* Navigation mobile */
    .navbar-brand {
        padding: 10px 15px;
    }
    
    .navbar-brand .logo {
        max-height: 90px !important;
        width: auto !important;
        height: auto !important;
    }
    
    .navbar-brand img {
        max-height: 90px !important;
        width: auto !important;
    }
}

/* Mobile navbar logo size */
@media (max-width: 767px) {
    .navbar-brand .logo {
        max-height: 90px !important;
        width: auto !important;
        height: auto !important;
    }
    
    .navbar-brand img {
        max-height: 90px !important;
        width: auto !important;
    }
    
    /* Hamburger menu styling - Use desktop styling (white bg, curved borders) */
    .navbar-toggle {
        width: 50px !important;
        height: 50px !important;
        background: #ffffff !important;
        border: none !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
        padding: 0 !important;
        margin-top: 20px !important; /* Increased from 8px to bring down slightly */
        margin-right: 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.3s ease !important;
    }
    
    .navbar-toggle .icon-bar {
        background-color: #333 !important;
        width: 24px !important;
        height: 3px !important;
        border-radius: 3px !important;
        display: block !important;
        margin: 4px 0 !important;
        transition: all 0.3s ease !important;
    }
    
    .navbar-toggle:hover,
    .navbar-toggle:focus {
        background: #f8f9fa !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
        transform: scale(1.05) !important;
    }
    
    /* Mobile navigation - show hamburger, hide desktop menu */
    .desktop-menu-toggle {
        display: none !important;
    }
    
    .desktop-slide-menu {
        display: none !important;
    }
    
    .desktop-slide-menu-overlay {
        display: none !important;
    }
    
    /* Show mobile navbar-toggle */
    .navbar-toggle {
        display: block !important;
    }
    
    /* Mobile navigation menu - Full screen popup */
    .navbar-collapse {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        padding: 80px 30px 30px 30px !important;
        background: #ffffff !important; /* Changed from rgba to solid white */
        backdrop-filter: none !important; /* Removed blur for solid white */
        -webkit-backdrop-filter: none !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        z-index: 99999999999 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
    }
    
    .navbar-collapse.collapse {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    .navbar-collapse.in,
    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Mobile menu overlay background - removed dark overlay, using white background */
    .navbar-collapse.in::before,
    .navbar-collapse.show::before {
        display: none !important; /* Remove dark overlay */
    }
    
    /* Mobile menu navigation links */
    .navbar-collapse .navbar-nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: calc(100vh - 150px) !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
    
    .navbar-collapse .navbar-nav > li {
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    }
    
    .navbar-collapse .navbar-nav > li:last-child {
        border-bottom: none !important;
    }
    
    .navbar-collapse .navbar-nav > li > a {
        display: block !important;
        padding: 20px 25px !important;
        font-size: 20px !important;
        font-weight: 600 !important;
        color: #333 !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        border-radius: 0 !important;
        margin: 0 !important;
        min-height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .navbar-collapse .navbar-nav > li > a:hover,
    .navbar-collapse .navbar-nav > li > a:focus {
        background: linear-gradient(135deg, #19B2EB 0%, #0D8CC0 100%) !important;
        color: #fff !important;
        transform: none !important;
        box-shadow: none !important;
    }
    
    /* Close button for mobile menu - real button element */
    .mobile-menu-close-btn {
        position: fixed !important;
        top: 25px !important;
        right: 25px !important;
        width: 50px !important;
        height: 50px !important;
        background: #ffffff !important;
        border: none !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 28px !important;
        color: #333 !important;
        cursor: pointer !important;
        z-index: 100000000000 !important;
        font-weight: 300 !important;
        line-height: 1 !important;
        transition: all 0.3s ease !important;
        padding: 0 !important;
        margin: 0 !important;
        outline: none !important;
        display: none !important; /* Hidden by default */
    }
    
    /* Show close button when menu is open */
    .navbar-collapse.in .mobile-menu-close-btn,
    .navbar-collapse.show .mobile-menu-close-btn,
    .navbar-collapse.collapsing .mobile-menu-close-btn,
    .mobile-menu-close-btn[style*="display: flex"],
    .mobile-menu-close-btn[style*="display: block"] {
        display: flex !important;
    }
    
    .mobile-menu-close-btn:hover,
    .mobile-menu-close-btn:focus {
        background: #f8f9fa !important;
        transform: scale(1.05) !important;
        color: #333 !important;
    }
    
    .mobile-menu-close-btn span {
        display: block !important;
        line-height: 1 !important;
    }
    
    /* Prevent body scroll when menu is open */
    body.mobile-menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }
    
    .navbar-nav {
        margin: 0;
    }
    
    .navbar-nav > li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
    
    .navbar-nav > li:last-child {
        border-bottom: none;
    }
    
    .navbar-nav > li > a {
        color: #333 !important;
        padding: 15px 20px !important;
        text-align: left !important;
        font-size: 16px;
        font-weight: 500;
        transition: all 0.3s ease;
        border-radius: 4px;
        margin: 2px 0;
    }
    
    .navbar-nav > li > a:hover,
    .navbar-nav > li > a:focus {
        background: linear-gradient(135deg, #70D969 0%, #19B2EB 100%) !important;
        color: #fff !important;
        transform: translateX(5px);
        box-shadow: 0 4px 12px rgba(112, 217, 105, 0.3);
    }
    
    .navbar-nav > li.active > a {
        background: linear-gradient(135deg, #70D969 0%, #19B2EB 100%) !important;
        color: #fff !important;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .header-texts h2 {
        font-size: 30px;
    }
    
    .hero-title-gradient {
        font-size: 32px !important; /* Increased from 30px by 2px */
    }
    
    .hero-description {
        font-size: 18px !important; /* Increased from 16px by 2px */
    }
    
    .section-head h2 {
        font-size: 28px; /* Increased from 24px by 4px */
    }
    
    .section-head .lead {
        font-size: 16px;
    }
    
    .product-card {
        margin-bottom: 25px;
    }
    
    .product-image {
        height: 180px;
    }
    
    .features-section .single-features {
        padding: 12px;
    }
    
    .features-section .single-features h4 {
        font-size: 15px;
    }
    
    .features-section .single-features p {
        font-size: 18px;
    }
}

/* Product Modal Styles */
#productModal .modal-dialog {
    max-width: 900px;
    margin: 30px auto;
}

#productModal .modal-content {
    border-radius: 16px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    background: #ffffff;
}

#productModal .modal-header {
    border-bottom: 1px solid #e5e5e5;
    padding: 20px 30px;
    background: #f8f9fa;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#productModal .modal-title {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin: 0;
    letter-spacing: -0.3px;
    text-align: left;
    flex: 1;
}

#productModal .close {
    font-size: 28px;
    font-weight: 300;
    color: #666;
    opacity: 0.8;
    transition: all 0.3s ease;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    order: 2;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    line-height: 1;
}

#productModal .close:hover,
#productModal .close:focus {
    opacity: 1;
    color: #333;
    background: rgba(0, 0, 0, 0.05);
    outline: none;
}

#productModal .modal-body {
    padding: 30px;
    background: #ffffff;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.product-modal-carousel {
    margin-bottom: 30px;
    max-width: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.product-modal-carousel .carousel-inner {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
    height: 450px;
    position: relative;
    background: #f8f9fa;
}

.product-modal-carousel .item {
    text-align: center;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    position: relative;
    cursor: pointer;
    width: 100%;
    float: left;
    margin-right: -100%;
}

.product-modal-carousel .item.active {
    position: relative;
    display: flex;
}

/* Video items should not use flex layout */
.product-modal-carousel .item.video-item,
.product-modal-carousel .item.video-item.active {
    display: block !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 400px;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

.product-modal-carousel .item:not(.active) {
    display: none;
}

.product-modal-carousel .item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    transition: transform 0.3s ease;
}

.product-modal-carousel .item:hover img {
    transform: scale(1.02);
}

/* Zoom icon overlay */
.product-modal-carousel .item::after {
    content: '🔍';
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(25, 178, 235, 0.9);
    color: #ffffff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: none !important;
    content: none !important;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 10;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    line-height: 1;
}

.product-modal-carousel .item:hover::after {
    display: none !important;
}

/* Zoomed image overlay */
.product-image-zoom-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    cursor: zoom-out;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.product-image-zoom-overlay.active {
    display: flex;
}

.product-image-zoom-overlay img {
    max-width: 90%;
    max-height: 90%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.product-image-zoom-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #ffffff;
    font-size: 40px;
    font-weight: 300;
    cursor: pointer;
    z-index: 10001;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.product-image-zoom-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.product-modal-carousel .embed-responsive {
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    margin: 0 auto;
    max-width: 100%;
}

.product-modal-carousel .embed-responsive .embed-responsive-item,
.product-modal-carousel .embed-responsive iframe,
.product-modal-carousel .embed-responsive embed,
.product-modal-carousel .embed-responsive object,
.product-modal-carousel .embed-responsive video {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    display: block !important;
    z-index: 1;
    background: #000;
}

/* Video items should not use flex layout */
.product-modal-carousel .item.video-item,
.product-modal-carousel .item.video-item.active {
    display: block !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 400px;
    align-items: stretch !important;
    justify-content: flex-start !important;
    text-align: center;
}

.product-modal-carousel .item.video-item .embed-responsive {
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
}

.product-modal-carousel .carousel-control {
    background: rgba(255, 255, 255, 0.95);
    width: 44px;
    height: 44px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    opacity: 0.9;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
}

.product-modal-carousel .carousel-control:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    background: #ffffff;
}

.product-modal-carousel .carousel-control.left {
    left: 15px;
}

.product-modal-carousel .carousel-control.right {
    right: 15px;
}

.product-modal-carousel .carousel-control .glyphicon {
    font-size: 16px;
    margin-top: -8px;
    color: #333;
}

.product-modal-carousel .carousel-indicators {
    bottom: -35px;
    margin-bottom: 0;
}

.product-modal-carousel .carousel-indicators li {
    background-color: #ccc;
    border: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 4px;
}

.product-modal-carousel .carousel-indicators .active {
    background-color: #19B2EB;
    width: 10px;
    height: 10px;
}

.product-modal-title {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.3;
}

.product-modal-description {
    font-size: 16px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 20px;
}

/* Enhanced Collapsible Tabs Styling */
/* Enhanced Product Modal Collapsible Sections */
#productModalAccordion .panel {
    margin-bottom: 12px;
    border: none;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    background: #fff;
}

#productModalAccordion .panel:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.product-modal-full-description,
.product-modal-videos,
.product-modal-delivery,
#modalProductFeaturesSection,
#modalProductApplicationSection {
    margin-bottom: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}


.product-modal-full-description:hover,
.product-modal-videos:hover,
.product-modal-delivery:hover,
#modalProductFeaturesSection:hover,
#modalProductApplicationSection:hover {
    box-shadow: 0 4px 12px rgba(25, 178, 235, 0.15);
    border-color: #19B2EB;
}

/* Enhanced Panel Headings */
#productModalAccordion .panel-heading {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: none;
    padding: 0;
    border-radius: 10px 10px 0 0;
    transition: all 0.3s ease;
}

#productModalAccordion .panel-heading:hover {
    background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);
}

#productModalAccordion .panel-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

#productModalAccordion .panel-title a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    background: transparent;
}

#productModalAccordion .panel-title a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #19B2EB 0%, #70D969 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

#productModalAccordion .panel-title a:hover {
    background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);
    color: #19B2EB;
    padding-left: 24px;
}

#productModalAccordion .panel-title a:hover::before {
    opacity: 1;
}

#productModalAccordion .panel-title a[aria-expanded="true"] {
    background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%);
    color: #19B2EB;
    padding-left: 24px;
    font-weight: 700;
}

#productModalAccordion .panel-title a[aria-expanded="true"]::before {
    opacity: 1;
}

#productModalAccordion .panel-title a i {
    margin-left: 10px;
    transition: transform 0.3s ease, color 0.3s ease;
    font-size: 14px;
    color: #999;
    flex-shrink: 0;
}

#productModalAccordion .panel-title a:hover i {
    color: #19B2EB;
}

#productModalAccordion .panel-title a[aria-expanded="true"] i {
    transform: rotate(180deg);
    color: #19B2EB;
}

/* Enhanced Panel Body */
#productModalAccordion .panel-body {
    padding: 20px;
    background: #ffffff;
    border-top: 1px solid #e9ecef;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#productModalAccordion .panel-collapse {
    transition: height 0.35s ease;
}

#productModalAccordion .panel-collapse.collapse {
    display: none;
}

#productModalAccordion .panel-collapse.collapse.in {
    display: block;
}

.product-modal-full-description a,
.product-modal-videos a,
.product-modal-delivery a {
    color: #333;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #f8f9fa;
    transition: all 0.3s ease;
    font-weight: 600;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* Enhanced Features List */
#modalProductFeaturesList,
.product-features-list {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

#modalProductFeaturesList li,
.product-features-list li {
    list-style: none !important;
    list-style-type: none !important;
    padding: 12px 0 12px 35px !important;
    position: relative;
    color: #555;
    line-height: 1.6;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s ease;
}

.product-features-list li:last-child {
    border-bottom: none;
}

#modalProductFeaturesList li::before,
#productModalAccordion #modalProductFeaturesList li::before,
.panel-body .product-features-list li::before,
.product-features-list li::before {
    content: '✓' !important;
    position: absolute !important;
    left: 0 !important;
    top: 12px !important;
    width: 22px !important;
    height: 22px !important;
    background: #ffffff !important;
    background-image: none !important;
    background-color: #ffffff !important;
    color: #19B2EB !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    border: 2px solid #19B2EB !important;
    z-index: 1;
}

.product-features-list li:hover {
    padding-left: 35px;
    color: #333;
    background: #f8f9fa;
    margin-left: -5px;
    margin-right: -5px;
    padding-right: 5px;
    border-radius: 5px;
}

.product-modal-full-description .well,
.product-modal-videos .well,
.product-modal-reviews .well,
.product-modal-delivery .well {
    margin-top: 0;
    background: #fff;
    border: none;
    border-top: 1px solid #e0e0e0;
    border-radius: 0;
    padding: 20px;
    font-size: 15px;
    line-height: 1.8;
    color: #555;
}

.product-modal-videos .embed-responsive {
    margin-top: 10px;
}

.product-modal-reviews .review-item {
    padding: 15px 0;
    border-bottom: 1px solid #e0e0e0;
}

.product-modal-reviews .review-item:last-child {
    border-bottom: none;
}

.product-modal-reviews .review-rating {
    color: #FFD700;
    margin-bottom: 8px;
}

.product-modal-reviews .review-author {
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.product-modal-reviews .review-date {
    font-size: 13px;
    color: #999;
    margin-bottom: 8px;
}

.product-modal-reviews .review-text {
    color: #555;
    line-height: 1.6;
}

/* Product Modal Section Titles and Content */
.product-modal-section-title {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e0e0e0;
}

.product-modal-content-text {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
}

.product-modal-content-text p {
    margin-bottom: 15px;
}

.product-modal-content-text ul,
.product-modal-content-text ol {
    margin: 15px 0;
    padding-left: 30px;
}

.product-modal-content-text li {
    margin-bottom: 8px;
}

.product-modal-details {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid #e0e0e0;
}

.product-detail-item {
    font-size: 15px;
    line-height: 1.7;
    color: #555;
}

.product-detail-item strong {
    color: #333;
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}

.product-features-list {
    list-style: none;
    padding-left: 0;
    margin: 10px 0 0 0;
}

.product-features-list li {
    padding: 12px 0 12px 35px;
    position: relative;
    color: #555;
    line-height: 1.6;
    display: block;
    margin-bottom: 4px;
    border-bottom: 1px solid #f0f0f0;
}

.product-features-list li:last-child {
    border-bottom: none;
}

#modalProductFeaturesList li:before,
#productModalAccordion #modalProductFeaturesList li:before,
.panel-body .product-features-list li:before,
.product-features-list li:before {
    content: '✓' !important;
    position: absolute !important;
    left: 0 !important;
    top: 12px !important;
    width: 22px !important;
    height: 22px !important;
    background: #ffffff !important;
    background-image: none !important;
    background-color: #ffffff !important;
    color: #19B2EB !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    border: 2px solid #19B2EB !important;
    z-index: 1;
}

#modalProductApplicationText {
    color: #555;
    line-height: 1.7;
    margin-top: 8px;
}

.product-modal-specs {
    margin-bottom: 25px;
}

.product-modal-buttons {
    margin-top: 30px;
}

.product-modal-buttons-top {
    margin-top: 20px;
    margin-bottom: 40px;
}

.product-modal-buttons .product-buttons,
.product-modal-buttons-top .product-buttons {
    justify-content: stretch;
    width: 100%;
    flex-direction: row !important;
    display: flex !important;
    flex-wrap: nowrap !important;
}

.product-modal-buttons .product-buttons li,
.product-modal-buttons-top .product-buttons li {
    flex: 1 1 50%;
    margin: 0;
}

.product-modal-buttons .product-button,
.product-modal-buttons-top .product-button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

@media (max-width: 767px) {
    #productModal .modal-dialog {
        margin: 10px;
    }
    
    #productModal .modal-body {
        padding: 20px;
    }
    
    .product-modal-title {
        font-size: 22px;
    }
    
    .product-modal-description {
        font-size: 14px;
    }
    
    .product-modal-buttons .product-buttons,
    .product-modal-buttons-top .product-buttons {
        flex-direction: row !important;
        gap: 10px;
        flex-wrap: nowrap !important;
    }
    
    .product-modal-buttons .product-buttons li,
    .product-modal-buttons-top .product-buttons li {
        flex: 1 1 50% !important;
    }
    
    .product-modal-buttons .product-button,
    .product-modal-buttons-top .product-button {
        width: 100%;
        max-width: 100%;
    }
}


/* Blog Section Styles */
.blog-section {
    background: #ffffff;
    padding: 80px 0;
}

.blog-card {
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 500px;
}

/* Ensure all blog cards have equal height */
.guides-section .row,
.blog-section .row {
    display: flex;
    flex-wrap: wrap;
}

.guides-section .col-md-4,
.blog-section .col-md-4 {
    display: flex;
}

.guides-section .blog-card,
.blog-section .blog-card {
    width: 100%;
    height: 100%;
    min-height: 500px;
}

.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.blog-image {
    position: relative;
    overflow: hidden;
    height: 250px;
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-card:hover .blog-image img {
    transform: scale(1.1);
}

.blog-category {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, #70D969 0%, #19B2EB 100%);
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blog-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 250px;
}

.blog-meta {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}

.blog-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.blog-meta i {
    color: #19B2EB;
}

.blog-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.3;
}

.blog-title a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-title a:hover {
    color: #19B2EB;
}

/* Blog Category Filters */
.blog-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 40px;
    width: 100%;
    max-width: 100%;
    overflow: visible;
}

.blog-filter-btn {
    display: inline-block;
    padding: 12px 24px;
    background: #f8f9fa;
    color: #333;
    text-decoration: none;
    border-radius: 25px;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: fit-content;
}

.blog-filter-btn:hover {
    background: #e9ecef;
    color: #19B2EB;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.blog-filter-btn.active {
    background: linear-gradient(135deg, #19B2EB 0%, #70D969 100%);
    color: #fff;
    border-color: #19B2EB;
    box-shadow: 0 4px 12px rgba(25, 178, 235, 0.3);
}

/* Blog Pagination */
.blog-pagination {
    margin-top: 60px;
}

.blog-pagination .pagination {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    gap: 10px;
}

.blog-pagination .pagination > li {
    display: inline-block;
}

.blog-pagination .pagination > li > a,
.blog-pagination .pagination > li > span {
    display: inline-block;
    padding: 12px 18px;
    background: #f8f9fa;
    color: #333;
    text-decoration: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    min-width: 45px;
    text-align: center;
}

.blog-pagination .pagination > li > a:hover {
    background: #e9ecef;
    color: #19B2EB;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.blog-pagination .pagination > .active > a,
.blog-pagination .pagination > .active > span {
    background: linear-gradient(135deg, #19B2EB 0%, #70D969 100%);
    color: #fff;
    border-color: #19B2EB;
    box-shadow: 0 4px 12px rgba(25, 178, 235, 0.3);
    cursor: default;
}

.blog-pagination .pagination > .disabled > a,
.blog-pagination .pagination > .disabled > span {
    background: #f8f9fa;
    color: #999;
    cursor: not-allowed;
    opacity: 0.6;
}

.blog-pagination .pagination > .disabled > a:hover {
    transform: none;
    box-shadow: none;
}

@media (max-width: 767px) {
    .blog-filters {
        gap: 10px;
    }
    
    .blog-filter-btn {
        padding: 10px 18px;
        font-size: 14px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .blog-pagination .pagination > li > a,
    .blog-pagination .pagination > li > span {
        padding: 10px 14px;
        font-size: 14px;
        min-width: 40px;
    }
}

.blog-excerpt {
    color: #666;
    font-size: 16px;
    line-height: 1.7;
    flex: 1 1 auto;
    margin-bottom: 20px;
    min-height: 60px;
}

/* Blog Post Styles */
.blog-post-section {
    background: #ffffff;
    padding: 80px 0;
    padding-top: 180px !important;
}

.blog-post-header {
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 30px;
}

.blog-category-badge {
    display: inline-block;
    background: linear-gradient(135deg, #70D969 0%, #19B2EB 100%);
    color: #fff;
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 15px;
}

.blog-post-title {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    color: #333;
    margin-top: 20px;
    letter-spacing: -0.5px;
}

.blog-featured-image {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    max-width: 900px;
    margin: 0 auto;
}

.blog-featured-image img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 500px;
    object-fit: cover;
}

.blog-post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 30px 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.blog-post-content {
    font-size: 18px;
    line-height: 1.9;
    color: #444;
    max-width: 100%;
}

.blog-post-content h2 {
    font-size: 32px;
    font-weight: 700;
    color: #333;
    margin-top: 50px;
    margin-bottom: 20px;
    padding-top: 20px;
    border-top: 2px solid #f0f0f0;
    scroll-margin-top: 100px;
}

.blog-post-content h2:first-of-type {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}

.blog-post-content h3 {
    font-size: 26px;
    font-weight: 600;
    color: #444;
    margin-top: 35px;
    margin-bottom: 15px;
    scroll-margin-top: 100px;
}

.blog-post-content p {
    margin-bottom: 20px;
}

.blog-post-content .lead {
    font-size: 22px;
    line-height: 1.8;
    color: #555;
    font-weight: 400;
    margin-bottom: 30px;
}

.blog-post-content ul,
.blog-post-content ol {
    margin: 20px 0;
    padding-left: 30px;
}

.blog-post-content li {
    margin-bottom: 10px;
    line-height: 1.8;
}

.blog-post-content strong {
    font-weight: 700;
    color: #333;
}

/* Reading Progress Bar */
.reading-progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 0, 0.1);
    z-index: 9999;
}

.reading-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #70D969 0%, #19B2EB 100%);
    width: 0%;
    transition: width 0.1s ease;
}

/* Share Buttons */
.blog-share-section {
    border-top: 1px solid #e0e0e0;
    margin-bottom: 40px;
    padding-bottom: 40px;
}

.border-top-light {
    border-top: 1px solid #e0e0e0;
}

/* Blog social links - same as footer */
.blog-share-section .social-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 15px;
}

.blog-share-section .social-links li {
    margin: 0;
}

.blog-share-section .social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(25, 178, 235, 0.1);
    color: #19B2EB;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 18px;
}

.blog-share-section .social-links a:hover {
    background: linear-gradient(135deg, #70D969 0%, #19B2EB 100%);
    transform: translateY(-3px);
    color: white;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(25, 178, 235, 0.3);
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    color: #fff;
}

.share-facebook {
    background: #1877f2;
}

.share-facebook:hover {
    background: #166fe5;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3);
    color: #fff;
}

.share-twitter {
    background: #1da1f2;
}

.share-twitter:hover {
    background: #1a91da;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(29, 161, 242, 0.3);
    color: #fff;
}

.share-linkedin {
    background: #0077b5;
}

.share-linkedin:hover {
    background: #006399;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 119, 181, 0.3);
    color: #fff;
}

.share-email {
    background: #6c757d;
}

.share-email:hover {
    background: #5a6268;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
    color: #fff;
}

/* Related Articles */
.related-articles-section {
    border-top: 1px solid #e0e0e0;
}

.related-articles-section .row {
    display: flex;
    flex-wrap: wrap;
}

.related-articles-section .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

.related-article-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.related-article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.related-article-image {
    height: 200px;
    min-height: 200px;
    max-height: 200px;
    overflow: hidden;
    flex-shrink: 0;
}

.related-article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.related-article-card:hover .related-article-image img {
    transform: scale(1.1);
}

.related-article-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 24px !important;
    min-height: 200px;
}

.related-article-category {
    display: inline-block;
    background: linear-gradient(135deg, #70D969 0%, #19B2EB 100%);
    color: #fff;
    padding: 6px 14px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
    align-self: flex-start;
    flex-shrink: 0;
}

.related-article-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    margin-top: 0;
    line-height: 1.4;
    flex: 1 1 auto;
    min-height: 50px;
    display: flex;
    align-items: flex-start;
}

.related-article-title a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.related-article-title a:hover {
    color: #19B2EB;
}

.related-article-meta {
    display: flex;
    gap: 15px;
    font-size: 12px;
    color: #666;
    margin-top: auto;
    padding-top: 15px;
    flex-shrink: 0;
}

.related-article-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.related-article-meta i {
    color: #19B2EB;
    font-size: 11px;
}

/* Reading Progress Bar */
.reading-progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 0, 0.05);
    z-index: 999999999;
}

.reading-progress-bar {
    height: 100%;
    background: linear-gradient(135deg, #70D969 0%, #19B2EB 100%);
    width: 0%;
    transition: width 0.1s ease-out;
    box-shadow: 0 2px 8px rgba(112, 217, 105, 0.4);
}

/* Table of Contents */
.toc-widget {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 25px;
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
    transition: top 0.3s ease;
}

/* Custom scrollbar for TOC with gradient */
.toc-widget::-webkit-scrollbar {
    width: 8px;
}

.toc-widget::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.toc-widget::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #70D969 0%, #19B2EB 100%);
    border-radius: 10px;
}

.toc-widget::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #5fc55a 0%, #1599d1 100%);
}

/* Firefox scrollbar */
.toc-widget {
    scrollbar-width: thin;
    scrollbar-color: #19B2EB #f1f1f1;
}

.toc-title {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e0e0e0;
}

.toc-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-nav li {
    margin-bottom: 10px;
    line-height: 1.6;
}

.toc-nav a {
    color: #666;
    text-decoration: none;
    font-size: 15px;
    transition: all 0.3s ease;
    display: block;
    padding: 5px 0;
    border-left: 3px solid transparent;
    padding-left: 12px;
}

.toc-nav a:hover,
.toc-nav a.active {
    color: #19B2EB;
    border-left-color: #19B2EB;
    padding-left: 15px;
    font-weight: 600;
}

.toc-level-2 {
    font-weight: 600;
}

.toc-level-3 {
    padding-left: 20px;
    font-size: 14px;
}

.blog-cta-widget {
    background: linear-gradient(135deg, #70D969 0%, #19B2EB 100%);
    border-radius: 12px;
    padding: 25px;
    color: #fff;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-top: 30px;
}

.blog-cta-widget h4 {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

.blog-cta-widget p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    margin-bottom: 20px;
}

.blog-cta-widget .button {
    background: #fff;
    color: #19B2EB;
    border: none;
}

.blog-cta-widget .button:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

/* Blog Mobile Styles */
@media (max-width: 767px) {
    .blog-post-title {
        font-size: 28px;
    }
    
    /* Blog post section - push content below logo on mobile */
    .blog-post-section {
        padding-top: 200px !important; /* Increased to push breadcrumbs and content below fixed navigation logo */
        margin-top: 0 !important;
    }
    
    /* Ensure breadcrumbs start below logo on mobile */
    .blog-post-header {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    .blog-post-header .breadcrumb,
    .blog-post-header nav[aria-label="breadcrumb"],
    nav[aria-label="breadcrumb"] .breadcrumb {
        margin-top: 100px !important; /* Push breadcrumbs below fixed navigation logo */
        padding-top: 0 !important;
        margin-bottom: 20px !important;
    }
    
    /* Ensure container starts below navigation */
    .blog-post-section .container {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    .blog-post-content {
        font-size: 16px;
    }
    
    .blog-post-content h2 {
        font-size: 24px;
        margin-top: 30px;
    }
    
    .blog-post-content h3 {
        font-size: 20px;
        margin-top: 25px;
    }
    
    .toc-widget {
        position: relative;
        top: 0;
        margin-bottom: 30px;
    }
    
    .blog-card {
        margin-bottom: 30px;
    }
}

/* Guides Section Styles */
.guides-section {
    background: #ffffff;
    padding: 80px 0;
}

.guides-section .blog-card {
    height: 100%;
}

.guides-section .blog-title {
    font-size: 20px;
}

@media (max-width: 767px) {
    .guides-section {
        padding: 60px 0;
    }
    
    .guides-section .blog-card {
        margin-bottom: 30px;
    }
}

/* Best Seller Badge */
.best-seller-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, #FF6B6B 0%, #EE5A6F 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(238, 90, 111, 0.4);
    line-height: 1.4;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(238, 90, 111, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 16px rgba(238, 90, 111, 0.6);
    }
}

/* Testimonial Cards */
.testimonials-placeholder {
    margin-top: 40px;
}

.testimonial-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 30px;
    height: 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.testimonial-rating {
    color: #FFD700;
    font-size: 16px;
    margin-bottom: 15px;
}

.testimonial-rating .fa-star {
    margin-right: 2px;
}

.testimonial-text {
    font-size: 18px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 20px;
    font-style: italic;
}

.testimonial-author {
    font-size: 14px;
    font-weight: 600;
    color: #19B2EB;
    text-align: right;
}

@media (max-width: 767px) {
    .testimonial-card {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .testimonial-text {
        font-size: 16px;
    }
    
    .best-seller-badge {
        top: 10px;
        right: 10px;
        padding: 7px 14px;
        font-size: 11px;
    }
}

/* About Section Stacked Animation */
/* Clean About Features Layout */
.about-features-stacked {
    list-style: none;
    padding: 0;
    margin: 40px 0 0 0;
    width: 100%;
    display: grid;
    gap: 30px;
}

.about-feature-stacked-item {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: none;
    box-shadow: none;
    position: relative;
    overflow: visible;
    box-sizing: border-box;
    margin: 0;
}

.about-feature-stacked-item.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile-only animations */
@media (max-width: 767px) {
    .about-feature-stacked-item {
        opacity: 0;
        transform: translateY(30px);
    }

    .about-feature-stacked-item.animate-in {
        opacity: 1;
        transform: translateY(0);
    }
}

.about-feature-stacked-item::after,
.about-feature-stacked-item::before {
    display: none;
}

/* Completely remove all hover effects */
.about-feature-stacked-item {
    cursor: default !important;
}

/* No hover effects - completely removed */
.about-feature-stacked-item:hover,
.about-feature-stacked-item:focus,
.about-feature-stacked-item:active {
    transform: translateX(0) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: default !important;
}

.about-feature-stacked-item:hover .about-feature-title,
.about-feature-stacked-item:hover .about-feature-content,
.about-feature-stacked-item:hover .about-feature-title strong {
    transform: none !important;
    color: inherit !important;
}

.about-feature-title {
    margin-bottom: 10px;
}

.about-feature-title strong {
    color: #19B2EB;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 0.5px;
    display: block;
    text-transform: uppercase;
    line-height: 1.3;
    margin-bottom: 6px;
}

.about-feature-content {
    color: #444;
    font-size: 16px;
    line-height: 1.7;
    display: block;
}

/* Desktop: 2x2 grid layout */
@media (min-width: 992px) {
    .about-features-stacked {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 50px;
        margin-top: 50px;
    }
    
    .about-feature-stacked-item {
        padding: 0;
    }
    
    .about-feature-title strong {
        font-size: 24px;
    }
    
    .about-feature-content {
        font-size: 17px;
    }
    
    /* All items in 2x2 grid - remove special styling for last item */
    .about-feature-stacked-item:last-child {
        grid-column: auto;
        text-align: left;
        max-width: none;
        margin: 0;
        transform: none;
    }
    
    .about-feature-stacked-item:last-child.animate-in {
        transform: none;
    }
    
    .about-feature-stacked-item:last-child .about-feature-title,
    .about-feature-stacked-item:last-child .about-feature-content {
        text-align: left;
    }
}

/* Tablet: 2x2 grid with less gap */
@media (min-width: 768px) and (max-width: 991px) {
    .about-features-stacked {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 40px;
    }
    
    /* All items in 2x2 grid on tablet */
    .about-feature-stacked-item:last-child {
        grid-column: auto;
        text-align: left;
        max-width: none;
        margin: 0;
        transform: none;
    }
    
    .about-feature-stacked-item:last-child.animate-in {
        transform: none;
    }
    
    .about-feature-stacked-item:last-child .about-feature-title,
    .about-feature-stacked-item:last-child .about-feature-content {
        text-align: left;
    }
}

/* Mobile: Single column */
@media (max-width: 767px) {
    .about-features-stacked {
        display: block;
        gap: 0;
        margin-top: 30px;
    }
    
    .about-feature-stacked-item {
        margin-bottom: 25px;
        padding: 0;
    }
    
    .about-feature-title strong {
        font-size: 20px;
    }
    
    .about-feature-content {
        font-size: 15px;
    }
}

/* ============================================
   ENHANCEMENTS - Keeping Theme Consistent
   ============================================ */

/* Enhanced Product Card Top Border on Hover */
.product-card {
    position: relative;
}

.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #70D969 0%, #19B2EB 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    border-radius: 16px 16px 0 0;
}

.product-card:hover::before {
    opacity: 1;
}

/* Enhanced Product Button Hover Effects */
.product-button {
    position: relative;
    overflow: hidden;
}

.product-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
    z-index: 1;
}

.product-button:hover::before {
    left: 100%;
}

.product-button:hover {
    background: linear-gradient(135deg, rgba(25, 178, 235, 0.2) 0%, rgba(112, 217, 105, 0.2) 100%);
    border-color: rgba(25, 178, 235, 0.6);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 20px rgba(25, 178, 235, 0.4);
}

.product-button * {
    position: relative;
    z-index: 2;
}

/* Enhanced Hero Badge Hover */
.hero-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Enhanced Footer Links */
.footer-links-list a {
    padding: 4px 0;
    transition: all 0.3s ease;
}

.footer-links-list a:hover {
    color: #ffffff;
    transform: translateX(5px);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Enhanced Footer Section */
.footer-section {
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

/* Enhanced Section Headings with Gradient Text */
.section-head h2 span {
    background: linear-gradient(135deg, #70D969 0%, #19B2EB 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 700;
}

/* Enhanced Product Specs Badge Hover */
.product-specs .badge:hover {
    background: linear-gradient(135deg, rgba(25, 178, 235, 0.2) 0%, rgba(112, 217, 105, 0.2) 100%);
    border-color: rgba(25, 178, 235, 0.4);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(25, 178, 235, 0.3);
}

/* Newsletter Section */
.newsletter-section {
    background: #ffffff;
}

.newsletter-section .heading {
    color: #404040 !important;
}

.newsletter-section .lead {
    color: #404040 !important;
}

.newsletter-form {
    max-width: 600px;
    margin: 0 auto;
}

.newsletter-form-group {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
}

.newsletter-input {
    flex: 1;
    height: 50px;
    border-radius: 25px 0 0 25px;
    border: 2px solid #e0e0e0;
    border-right: none;
    background: #ffffff;
    font-size: 16px;
    padding: 12px 20px;
    margin: 0;
    vertical-align: top;
}

.newsletter-input:focus {
    border-color: #537550;
    outline: none;
    box-shadow: 0 0 0 3px rgba(83, 117, 80, 0.1);
    z-index: 1;
    position: relative;
}

.newsletter-btn {
    height: 50px;
    min-width: 140px;
    border-radius: 0 25px 25px 0;
    background: #70D969;
    border: 2px solid #70D969;
    border-left: none;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    color: white;
    padding: 12px 24px;
    margin: 0;
    vertical-align: top;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.newsletter-btn:hover {
    background: #5BC653;
    border-color: #5BC653;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(112, 217, 105, 0.4);
    color: white;
}

.newsletter-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left 0.5s ease;
    z-index: 1;
}

.newsletter-btn:hover::before {
    left: 100%;
}

.newsletter-btn * {
    position: relative;
    z-index: 2;
}

.newsletter-message {
    padding: 15px;
    border-radius: 4px;
    text-align: center;
    font-weight: 500;
}

.newsletter-message.success {
    background: rgba(112, 217, 105, 0.2);
    color: #70D969;
    border: 2px solid #70D969;
}

.newsletter-message.error {
    background: rgba(255, 0, 0, 0.1);
    color: #ff6b6b;
    border: 2px solid #ff6b6b;
}

/* Exit Intent Popup - Enhanced Design */
.exit-intent-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.exit-intent-popup.active {
    display: flex;
}

.exit-intent-popup-content {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 20px;
    padding: 0;
    max-width: 550px;
    width: 100%;
    position: relative;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
    animation: popupSlideIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    overflow: hidden;
    border: 3px solid #537550;
}

@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: translateY(-100px) scale(0.8) rotate(-5deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

.exit-intent-popup-header {
    background: linear-gradient(135deg, #537550 0%, #713841 100%);
    padding: 40px 40px 30px;
    text-align: center;
    color: white;
    position: relative;
}

.exit-intent-popup-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: white;
    border-radius: 20px 20px 0 0;
}

.exit-intent-icon {
    font-size: 60px;
    margin-bottom: 15px;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.exit-intent-popup-header h2 {
    margin: 0 0 10px 0;
    font-size: 28px;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.exit-intent-subtitle {
    margin: 0;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.6;
}

.exit-intent-benefits {
    padding: 30px 40px 20px;
    background: white;
}

.exit-intent-benefit-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 15px;
    color: #333;
}

.exit-intent-benefit-item i {
    color: #70D969;
    font-size: 20px;
    margin-right: 12px;
    flex-shrink: 0;
}

.exit-intent-benefit-item span {
    color: #555;
}

.exit-intent-form {
    padding: 0 40px 30px;
    background: white;
}

.exit-intent-input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.exit-intent-input {
    flex: 1;
    height: 50px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 18px;
    font-size: 16px;
    transition: all 0.3s ease;
}

.exit-intent-input:focus {
    border-color: #537550;
    outline: none;
    box-shadow: 0 0 0 3px rgba(83, 117, 80, 0.1);
}

.exit-intent-submit-btn {
    height: 50px;
    padding: 0 30px;
    background: linear-gradient(135deg, #537550 0%, #713841 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.exit-intent-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(83, 117, 80, 0.4);
    background: linear-gradient(135deg, #5BC653 0%, #8B4A5A 100%);
}

.exit-intent-privacy {
    font-size: 12px;
    color: #999;
    text-align: center;
    margin: 0;
}

.exit-intent-message {
    padding: 15px;
    margin: 0 40px 30px;
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
}

.exit-intent-message.success {
    background: rgba(112, 217, 105, 0.15);
    color: #5BC653;
    border: 2px solid #70D969;
}

.exit-intent-message.error {
    background: rgba(255, 107, 107, 0.15);
    color: #ff6b6b;
    border: 2px solid #ff6b6b;
}

.exit-intent-popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    font-size: 24px;
    cursor: pointer;
    color: white;
    width: 40px;
    height: 40px;
    line-height: 36px;
    text-align: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 10;
    font-weight: 300;
}

.exit-intent-popup-close:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: rotate(90deg);
}

@media (max-width: 767px) {
    .exit-intent-popup-content {
        max-width: 100%;
        margin: 20px;
    }
    
    .exit-intent-popup-header {
        padding: 30px 25px 25px;
    }
    
    .exit-intent-popup-header h2 {
        font-size: 24px;
    }
    
    .exit-intent-benefits,
    .exit-intent-form {
        padding: 25px;
    }
    
    .exit-intent-input-group {
        flex-direction: column;
    }
    
    .exit-intent-submit-btn {
        width: 100%;
    }
}

/* Breadcrumb Navigation */
.breadcrumb-section {
    border-bottom: 1px solid #e0e0e0;
}

.breadcrumb {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    align-items: center;
    line-height: 1.5;
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    padding: 0 10px;
    color: #999;
    font-weight: 300;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.breadcrumb-item a {
    color: #537550;
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 1.5;
}

.breadcrumb-item a:hover {
    color: #70D969;
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: #666;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 1.5;
}

.breadcrumb-item span {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 1.5;
}

/* Blog Search */
.blog-search-form {
    margin-bottom: 30px;
}

.blog-search-form .input-group {
    display: flex;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 25px;
    overflow: hidden;
    background: #fff;
    position: relative;
}

.blog-search-input {
    height: 50px;
    border-radius: 25px 0 0 25px;
    border: 2px solid #e0e0e0;
    border-right: none;
    padding: 12px 20px;
    padding-left: 50px;
    font-size: 16px;
    flex: 1;
    transition: all 0.3s ease;
    font-family: inherit;
    position: relative;
}

.blog-search-input:focus {
    border-color: #70D969;
    outline: none;
    box-shadow: none;
}

.blog-search-form .input-group::before {
    content: '\f002';
    font-family: 'FontAwesome';
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 16px;
    z-index: 3;
    pointer-events: none;
    transition: color 0.3s ease;
}

.blog-search-form .input-group:focus-within::before {
    color: #70D969;
}

.blog-search-form .input-group-btn {
    display: flex;
    flex-shrink: 0;
}

.blog-search-form .btn-primary {
    height: 50px;
    border-radius: 0 12px 12px 0;
    border: none;
    border-left: none;
    background: #70D969;
    color: #fff;
    padding: 0;
    margin: 0;
    font-weight: 500;
    font-size: 16px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    width: 60px;
    max-width: 60px;
    position: relative;
    overflow: hidden;
    line-height: 1;
    vertical-align: top;
    text-decoration: none;
}

.blog-search-form .btn-primary i {
    font-size: 18px;
    position: relative;
    z-index: 2;
}

.blog-search-form .btn-primary:hover {
    background: #5BC653;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(112, 217, 105, 0.4);
    color: #fff;
    text-decoration: none;
}

.blog-search-form .btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left 0.5s ease;
    z-index: 1;
}

.blog-search-form .btn-primary:hover::before {
    left: 100%;
}

.blog-search-form .btn-default {
    height: 50px;
    border-radius: 25px;
    border: 2px solid #e0e0e0;
    background: #fff;
    color: #666;
    padding: 12px 20px;
    font-weight: 600;
    font-size: 16px;
    margin-left: 10px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.blog-search-form .btn-default:hover {
    background: #f8f9fa;
    border-color: #537550;
    color: #537550;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Enhanced Product CTAs */
.product-card-clickable {
    transition: all 0.3s ease;
    cursor: pointer;
}

.product-card-clickable:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.product-button {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.product-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.product-button .btn-text {
    font-size: 14px;
    font-weight: 600;
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease;
    white-space: nowrap;
}

.product-button:hover .btn-text {
    opacity: 1;
}

.product-button img {
    transition: transform 0.3s ease;
}

.product-button:hover img {
    transform: scale(1.1);
}

/* Smooth Scroll Enhancement */
html {
    scroll-behavior: smooth;
}

/* Enhanced Social Icons in Footer */
.social-links a {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.social-links a:hover {
    transform: translateY(-3px) scale(1.1);
    color: #ffffff !important;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Font Display Optimization */
@font-face {
    font-family: 'FontAwesome';
    font-display: swap;
}

/* Hide carb images on mobile */
@media (max-width: 767px) {
    .carb-image-mobile-hide {
        display: none !important;
    }
    
    .section-divider-mobile-hide {
        display: none !important;
    }
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #537550 0%, #713841 100%);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    z-index: 999;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

.back-to-top.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.back-to-top:hover {
    background: linear-gradient(135deg, #5BC653 0%, #8B4A5A 100%);
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(83, 117, 80, 0.4);
}

.back-to-top:active {
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
}

/* ============================================
   COMPREHENSIVE MOBILE OPTIMIZATION
   ============================================ */

/* Touch-Friendly Targets - Minimum 44x44px for all interactive elements */
@media (max-width: 767px) {
    /* Hide Hero Bottom Divider on Mobile */
    .hero-bottom-divider {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
    }
    
    /* Hide Hero Spotlight Animation on Mobile */
    #hero-spotlight-animation.hero-spotlight-bg,
    .hero-spotlight-bg {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Hide Hero Spotlight ::after Pseudo-element on Mobile */
    #home.header-section.gradiant-background::after,
    #home.header-section.half-header.gradiant-background::after,
    .header-section.gradiant-background::after,
    .header-section.half-header.gradiant-background::after {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        content: none !important;
    }
    
    /* Hide White Section Dividers on Mobile */
    .section-divider-wave-bottom,
    #divider-faq-bottom,
    .section-divider-wave.section-divider-wave-bottom {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* FAQ Accordion Mobile - Ensure toggle icons at end */
    .faq-section .panel-title a {
        padding-right: 60px !important; /* Make room for icon */
        position: relative !important;
        display: block !important;
    }
    
    .faq-section .panel-title a .plus-minus {
        position: absolute !important;
        right: 20px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 24px !important;
        height: 24px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }
    
    /* Buttons - Ensure minimum touch target size */
    .button,
    .button-primary,
    .button-secondary,
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-default,
    a.button,
    button.button {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 12px 20px !important;
        font-size: 16px !important; /* Prevent iOS zoom on focus */
        line-height: 1.5 !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(25, 178, 235, 0.2);
    }
    
    /* Links - Ensure minimum touch target */
    a:not(.button):not(.btn) {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 8px 4px;
    }
    
    /* Form Inputs - Mobile Optimized */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="password"],
    input[type="url"],
    textarea,
    select {
        min-height: 44px !important;
        font-size: 16px !important; /* Prevent iOS zoom on focus */
        padding: 12px 16px !important;
        border-radius: 8px !important;
        -webkit-appearance: none;
        appearance: none;
        touch-action: manipulation;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Blog Search Input */
    .blog-search-input {
        height: 50px !important;
        min-height: 50px !important;
        font-size: 16px !important;
        padding: 12px 20px !important;
        padding-left: 50px !important;
        border-radius: 25px 0 0 25px !important;
        border: 2px solid #e0e0e0 !important;
        border-right: none !important;
    }
    
    /* Blog Search Button */
    .blog-search-form .btn-primary {
        height: 50px !important;
        min-height: 50px !important;
        min-width: 50px !important;
        width: 50px !important;
        max-width: 50px !important;
        padding: 0 !important;
        border-radius: 0 25px 25px 0 !important;
        background: #70D969 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .blog-search-form .btn-primary i {
        font-size: 18px !important;
        color: #fff !important;
    }
    
    /* Newsletter Input */
    .newsletter-input,
    input[name="email"] {
        min-height: 44px !important;
        font-size: 16px !important;
        padding: 12px 16px !important;
    }
    
    /* Newsletter Button */
    .newsletter-btn,
    button[type="submit"] {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
    }
    
    /* Navigation Menu Items */
    .navbar-nav > li > a,
    .nav-item,
    .desktop-slide-menu-nav a {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
    }
    
    /* Hamburger Menu Button */
    .navbar-toggle,
    .desktop-menu-toggle {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 10px !important;
    }
    
    /* Product Quick View Button */
    .product-quick-view-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 10px !important;
    }
    
    /* Product Buttons */
    .product-button {
        min-height: 44px !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
    }
    
    /* Blog Filter Buttons */
    .blog-filter-btn {
        min-height: 44px !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
    }
    
    /* Pagination Links */
    .pagination > li > a,
    .pagination > li > span {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 12px 14px !important;
        font-size: 16px !important;
    }
    
    /* Modal Close Buttons */
    .close,
    .modal-header .close,
    button.close {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 10px !important;
        font-size: 24px !important;
    }
    
    /* Social Media Links */
    .social-links a,
    .footer-social a {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Center footer social icons on mobile */
    .footer-social {
        text-align: center !important;
    }
    
    .footer-social .social-links {
        justify-content: center !important;
        display: flex !important;
    }
    
    .footer-social p {
        text-align: center !important;
    }
    
    /* Footer Links */
    .footer-links-list a,
    .footer-links a {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        padding: 8px 0 !important;
    }
    
    /* Improved Typography for Mobile */
    body {
        font-size: 16px !important;
        line-height: 1.6 !important;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }
    
    h1 {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }
    
    h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }
    
    h3 {
        font-size: 20px !important;
        line-height: 1.4 !important;
    }
    
    h4 {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }
    
    p, .lead {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }
    
    /* Blog Article Typography */
    .blog-article-content {
        font-size: 16px !important;
        line-height: 1.7 !important;
    }
    
    .blog-article-content h2 {
        font-size: 24px !important;
        margin-top: 30px !important;
        margin-bottom: 15px !important;
    }
    
    .blog-article-content h3 {
        font-size: 20px !important;
        margin-top: 25px !important;
        margin-bottom: 12px !important;
    }
    
    .blog-article-content p {
        font-size: 16px !important;
        line-height: 1.7 !important;
        margin-bottom: 16px !important;
    }
    
    /* Improved Spacing for Mobile */
    .section {
        padding: 40px 0 !important;
    }
    
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Product Cards Mobile Optimization */
    .product-card,
    .blog-card {
        margin-bottom: 30px !important;
    }
    
    /* Blog Cards Mobile */
    .blog-card {
        min-height: auto !important;
    }
    
    .blog-image {
        height: 200px !important;
    }
    
    /* Prevent Text Selection on Buttons (Better Touch) */
    .button,
    .btn,
    button,
    .product-button,
    .blog-filter-btn {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }
    
    /* Improved Touch Feedback */
    .button:active,
    .btn:active,
    button:active,
    .product-button:active,
    .blog-filter-btn:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
    
    /* Better Scroll Behavior */
    html {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    
    /* Prevent Horizontal Scroll */
    body,
    html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        position: relative;
    }
    
    * {
        max-width: 100%;
    }
    
    img, video, iframe {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Table Responsive */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
    
    /* Improved Modal on Mobile */
    .modal-dialog {
        margin: 10px !important;
        max-width: calc(100% - 20px) !important;
    }
    
    .modal-content {
        border-radius: 12px !important;
    }
    
    /* Better Form Layout */
    .form-group,
    .form-group-admin {
        margin-bottom: 20px !important;
    }
    
    /* Improved Footer on Mobile */
    .footer-section {
        padding: 40px 0 20px 0 !important;
        text-align: center;
    }
    
    .footer-links-list {
        margin-bottom: 25px !important;
        text-align: center !important; /* Center align footer links on mobile */
    }
    
    .footer-links-list li {
        text-align: center !important;
    }
    
    .footer-links-list a {
        text-align: center !important;
        display: inline-block !important;
    }
    
    /* Footer logo slightly smaller on mobile */
    .footer-logo,
    .footer-logo img,
    .footer-logo picture,
    .footer-logo picture img,
    .footer-logo picture source + img {
        max-width: 160px !important; /* Reduced from 200px */
    }
    
    /* Center footer brand on mobile */
    .footer-brand {
        text-align: center !important;
    }
    
    /* Center footer h5 headings and their separator lines on mobile */
    .footer-section h5 {
        text-align: center !important;
    }
    
    .footer-section h5::after {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    /* Newsletter Form Mobile */
    .newsletter-form {
        width: 100% !important;
    }
    
    /* Blog Search Form - Keep inline layout on mobile */
    .blog-search-form .input-group {
        flex-direction: row !important;
        width: 100%;
    }
    
    .blog-search-form .input-group .form-control {
        width: auto !important;
        flex: 1 !important;
        margin-bottom: 0 !important;
    }
    
    .blog-search-form .input-group-btn {
        width: auto !important;
        flex-shrink: 0 !important;
    }
    
    /* Other input groups - stack on mobile */
    .input-group:not(.blog-search-form .input-group) {
        flex-direction: column;
        width: 100%;
    }
    
    .input-group:not(.blog-search-form .input-group) .form-control {
        width: 100% !important;
        margin-bottom: 10px;
    }
    
    .input-group-btn:not(.blog-search-form .input-group-btn),
    .input-group-append:not(.blog-search-form .input-group-append) {
        width: 100% !important;
    }
    
    .input-group-btn:not(.blog-search-form .input-group-btn) .btn,
    .input-group-append:not(.blog-search-form .input-group-append) .btn {
        width: 100% !important;
    }
}

/* Extra Small Devices (phones, less than 480px) */
@media (max-width: 480px) {
    /* Even smaller font sizes for very small screens */
    h1 {
        font-size: 24px !important;
    }
    
    h2 {
        font-size: 20px !important;
    }
    
    h3 {
        font-size: 18px !important;
    }
    
    /* Tighter spacing */
    .section {
        padding: 30px 0 !important;
    }
    
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    /* Smaller buttons but still touch-friendly */
    .button,
    .btn {
        padding: 10px 16px !important;
        font-size: 15px !important;
    }
}

/* Landscape Mobile Optimization */
@media (max-width: 767px) and (orientation: landscape) {
    .header-content {
        padding: 40px 0 20px 0 !important;
    }
    
    .section {
        padding: 30px 0 !important;
    }
}

/* Prevent iOS Safari Address Bar Issues */
@supports (-webkit-touch-callout: none) {
    .header-section {
        min-height: -webkit-fill-available;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ensure crisp rendering on retina displays */
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}