/* =====================================================
   ACCESSIBILITY
===================================================== */

/* Screen Reader Text - Visually hidden but accessible to screen readers */
.screen-reader-text,
.skip-link {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
    word-break: normal !important;
}

/* Show skip link when focused (keyboard navigation) */
.screen-reader-text:focus,
.skip-link:focus {
    background-color: #f4f3ef;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip-path: none;
    color: #111111;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* =====================================================
   ROOT
===================================================== */

:root {

    --dark: #111111;
    --cream: #f4f3ef;
    --lime: #d7ff00;
    --gray: #686868;

    --border-dark: rgba(17,17,17,.12);
    --border-light: rgba(255,255,255,.18);

}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    font-family: "Manrope", sans-serif;
    font-weight: 400;

    overflow-x: hidden;

}


body.menu-open {
    overflow: hidden;
}


img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}


a {
    text-decoration: none;
    color: inherit;
}


button {
    font-family: inherit;
}

.dark-text-color .enhanced-category-description {
    --tw-bg-opacity: 1;
    color: rgb(17 17 17 / var(--tw-bg-opacity, 1));
}
/* =====================================================
   LOADER
===================================================== */

#page-loader {

    position: fixed;

    inset: 0;

    z-index: 999999;

    background: var(--dark);

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

}


.loader-inner {

    width: min(500px, 80%);

}


.loader-logo {

    display: block;

    font-size: 18px;
    font-weight: 600;

    letter-spacing: .25em;

    margin-bottom: 30px;

}


.loader-line {

    height: 1px;

    background: rgba(255,255,255,.2);

    overflow: hidden;

}


.loader-line span {

    display: block;

    height: 100%;

    width: 0;

    background: white;

}


.loader-number {

    display: block;

    font-size: 11px;
    font-weight: 500;

    margin-top: 12px;

    text-align: right;

}


/* =====================================================
   CURSOR
===================================================== */

.cursor-dot {

    position: fixed;

    width: 7px;
    height: 7px;

    background: white;

    border-radius: 50%;

    pointer-events: none;

    z-index: 99999;

    transform: translate(-50%, -50%);

    mix-blend-mode: difference;

}


.cursor-ring {

    position: fixed;

    width: 36px;
    height: 36px;

    border: 1px solid white;

    border-radius: 50%;

    pointer-events: none;

    z-index: 99998;

    transform: translate(-50%, -50%);

    mix-blend-mode: difference;

}


@media(max-width: 768px) {

    .cursor-dot,
    .cursor-ring {

        display: none;

    }

}


/* =====================================================
   NAVIGATION
===================================================== */

#site-header {

    /* background: rgba(17,17,17,.85); */
    background-color: rgba(112, 112, 112, 0.1);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 10px;

    margin: 10px auto 0;

    max-width: 1300px;

    left: 50%;

    right: auto;

    transform: translateX(-50%);

    width: calc(100% - 20px);

    transition:
        transform .6s cubic-bezier(.77,0,.18,1),
        background .4s ease,
        border-color .4s ease,
        margin .4s ease;

}


#site-header.scrolled {
/* 
    background: rgba(17,17,17,.95);

    backdrop-filter: blur(25px);

    -webkit-backdrop-filter: blur(25px);

    border-color: rgba(255,255,255,.12); */

    margin-top: 10px;

}


/* When header is hidden on scroll down */
#site-header[style*="translateY(-100%)"] {

    transform: translateX(-50%) translateY(-130%) !important;

}


.logo {

    font-size: 21px;

    font-weight: 700;

    letter-spacing: -.04em;

    color: white;

    display: flex;

    align-items: center;

}


.logo-image {

    height: 55px;

    width: auto;

    object-fit: contain;

    display: block;

    max-width: 100%;

}


/* Responsive logo sizes */
@media (max-width: 1024px) {

    .logo-image {

        height: 48px;

    }

}


@media (max-width: 768px) {

    .logo-image {

        height: 42px;

    }

}


@media (max-width: 480px) {

    .logo-image {

        height: 38px;

    }

}


.nav-link {

    position: relative;

    font-size: 13px;

    font-weight: 500;

    color: white;

}


.nav-link::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -5px;

    width: 0;

    height: 1px;

    background: currentColor;

    transition: width .4s ease;

}


.nav-link:hover::after {

    width: 100%;

}


/* Current/Active page highlighting */
.nav-link.current-menu-item,
.nav-link.current-menu-ancestor {

    color: var(--lime);

}


.nav-link.current-menu-item::after,
.nav-link.current-menu-ancestor::after {

    width: 100%;

    background: var(--lime);

}


.nav-country {

    font-size: 10px;
    font-weight: 500;

    letter-spacing: .1em;

}


.menu-button {

    width: 42px;
    height: 42px;

    border: 1px solid rgba(255,255,255,.5);

    border-radius: 50%;

    background: transparent;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 5px;

    cursor: pointer;

    color: white;

    transition: all .3s ease;

}


.menu-button:hover {

    background: rgba(255,255,255,.1);

    border-color: white;

}


/* Hide menu button on desktop (lg and above) */
@media (min-width: 1024px) {
    .menu-button {
        display: none !important;
    }
}


.menu-button span {

    width: 14px;

    height: 1px;

    background: white;

    transition: .4s ease;

}


.menu-button.active span:first-child {

    transform:
        translateY(3px)
        rotate(45deg);

}


.menu-button.active span:last-child {

    transform:
        translateY(-3px)
        rotate(-45deg);

}


/* =====================================================
   SEARCH BUTTON
===================================================== */

.search-button {

    width: 42px;
    height: 42px;

    border: 1px solid rgba(255,255,255,.5);

    border-radius: 50%;

    background: transparent;

    display: flex;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    transition: all .3s ease;

    color: white;

}


.search-button svg {

    stroke: white;

    transition: stroke .3s ease;

}


.search-button:hover {

    background: rgba(255,255,255,.95);

    border-color: white;

}


.search-button:hover svg {

    stroke: var(--dark);

}
/* =====================================================
   NAVIGATION DROPDOWN
===================================================== */

.nav-dropdown-container {
    position: relative;
}

.nav-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.dropdown-arrow {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    stroke: currentColor;
}

.nav-dropdown-container:hover .dropdown-arrow {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 20px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 880px;
    background-color: rgba(0, 0, 0, 0.779);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 32px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-10px);
    transition: 
        opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.4s;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    z-index: 1000;
}

.nav-dropdown-container:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
}

.dropdown-section {
    display: flex;
    flex-direction: column;
}

.dropdown-section-heading {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--lime);
    text-transform: uppercase;
    margin-bottom: 24px;
    padding-bottom: 0;
    border-bottom: none;
}

.dropdown-section-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.dropdown-column {
    display: flex;
    flex-direction: column;
}

.dropdown-section-heading {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--lime);
    text-transform: uppercase;
    margin-bottom: 24px;
    padding-bottom: 0;
    border-bottom: none;
}

/* Legacy heading support - kept for backwards compatibility */
.dropdown-heading {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--lime);
    text-transform: uppercase;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dropdown-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dropdown-item {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: white;
    transform: translateX(4px);
}

.dropdown-item-title {
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.dropdown-item:hover .dropdown-item-title {
    color: white;
}


/* Dropdown item active/current state */
.dropdown-item.current-menu-item,
.dropdown-item.current_page_item {

    background: rgba(215, 255, 0, 0.1);

    color: var(--lime);

    border-left: 2px solid var(--lime);

}


.dropdown-item.current-menu-item .dropdown-item-title,
.dropdown-item.current_page_item .dropdown-item-title {

    color: var(--lime);

}


/* Dropdown Animation Stagger */
.nav-dropdown-container:hover .dropdown-item {
    animation: dropdownItemFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.nav-dropdown-container:hover .dropdown-item:nth-child(1) { animation-delay: 0.05s; }
.nav-dropdown-container:hover .dropdown-item:nth-child(2) { animation-delay: 0.08s; }
.nav-dropdown-container:hover .dropdown-item:nth-child(3) { animation-delay: 0.11s; }
.nav-dropdown-container:hover .dropdown-item:nth-child(4) { animation-delay: 0.14s; }
.nav-dropdown-container:hover .dropdown-item:nth-child(5) { animation-delay: 0.17s; }
.nav-dropdown-container:hover .dropdown-item:nth-child(6) { animation-delay: 0.20s; }
.nav-dropdown-container:hover .dropdown-item:nth-child(7) { animation-delay: 0.23s; }
.nav-dropdown-container:hover .dropdown-item:nth-child(8) { animation-delay: 0.26s; }

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

/* Responsive Adjustments */
@media (max-width: 1440px) {
    .nav-dropdown-menu {
        min-width: 820px;
        padding: 28px;
    }
    
    .dropdown-content {
        gap: 28px;
    }
}

@media (max-width: 1280px) {
    .nav-dropdown-menu {
        min-width: 760px;
        padding: 26px;
    }
    
    .dropdown-content {
        gap: 24px;
    }
    
    .dropdown-item-title {
        font-size: 13px;
    }
}

@media (max-width: 1024px) {
    .nav-dropdown-menu {
        display: none;
    }
}


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

#mobile-menu {
    visibility: hidden;
    transform: translateX(100%);
    overflow-y: auto;
    overflow-x: hidden;
    
    /* Hide scrollbar but keep functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
#mobile-menu::-webkit-scrollbar {
    display: none;
}

/* Mobile menu inner container */
#mobile-menu > div {
    min-height: 100vh;
    padding-top: 100px;
    padding-bottom: 80px;
    justify-content: flex-start !important;
}


.menu-label {

    font-size: 10px;
    font-weight: 600;

    letter-spacing: .2em;

    color: rgba(255,255,255,.5);

    margin-bottom: 30px;

}


.menu-links {

    display: flex;

    flex-direction: column;

}


.menu-links > a {

    font-size: clamp(50px, 8vw, 120px);

    line-height: .95;

    font-weight: 500;

    letter-spacing: -.06em;

    transition: color .3s ease;

}


.menu-links > a:hover {

    color: var(--lime);

}


/* Mobile menu active/current page styles */
.menu-links > a.current-menu-item,
.menu-links > a.mobile-menu-link.current-menu-item,
.menu-links > a.current-menu-ancestor,
.menu-links > a.mobile-menu-link.current-menu-ancestor {

    color: var(--lime);

}


.mobile-submenu-trigger.current-menu-item,
.mobile-submenu-trigger.current-menu-ancestor {

    color: var(--lime);

}


/* =====================================================
   MOBILE SUBMENU
===================================================== */

.mobile-submenu-container {
    display: flex;
    flex-direction: column;
}

.mobile-submenu-trigger {
    background: none;
    border: none;
    color: white;
    font-size: clamp(50px, 8vw, 120px);
    line-height: .95;
    font-weight: 500;
    letter-spacing: -.06em;
    text-align: left;
    cursor: pointer;
    transition: color .3s ease;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0;
}

.mobile-submenu-trigger:hover {
    color: var(--lime);
}

.mobile-dropdown-arrow {
    stroke: currentColor;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.mobile-submenu-trigger.active .mobile-dropdown-arrow {
    transform: rotate(180deg);
}

.mobile-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 0;
}

.mobile-submenu.active {
    max-height: 2000px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.mobile-submenu-section {
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-submenu-section:last-child {
    border-bottom: none;
}

.mobile-submenu-heading {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--lime);
    text-transform: uppercase;
    margin-bottom: 18px;
    padding-left: 20px;
}

.mobile-submenu a {
    display: block;
    padding: 12px 20px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -.02em;
    color: rgba(255, 255, 255, 0.75);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 2px solid transparent;
    margin: 4px 0;
}

.mobile-submenu a:hover {
    color: white;
    background: rgba(255, 255, 255, 0.05);
    border-left-color: var(--lime);
    padding-left: 28px;
}


/* Mobile submenu active/current page state */
.mobile-submenu a.current-menu-item,
.mobile-submenu a.current_page_item {

    color: var(--lime);

    background: rgba(215, 255, 0, 0.08);

    border-left-color: var(--lime);

    border-left-width: 3px;

}


/* Animation for submenu items */
.mobile-submenu.active a {
    animation: mobileSubmenuFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.mobile-submenu.active a:nth-child(1) { animation-delay: 0.1s; }
.mobile-submenu.active a:nth-child(2) { animation-delay: 0.12s; }
.mobile-submenu.active a:nth-child(3) { animation-delay: 0.14s; }
.mobile-submenu.active a:nth-child(4) { animation-delay: 0.16s; }
.mobile-submenu.active a:nth-child(5) { animation-delay: 0.18s; }
.mobile-submenu.active a:nth-child(6) { animation-delay: 0.20s; }
.mobile-submenu.active a:nth-child(7) { animation-delay: 0.22s; }
.mobile-submenu.active a:nth-child(8) { animation-delay: 0.24s; }
.mobile-submenu.active a:nth-child(9) { animation-delay: 0.26s; }
.mobile-submenu.active a:nth-child(10) { animation-delay: 0.28s; }
.mobile-submenu.active a:nth-child(11) { animation-delay: 0.30s; }
.mobile-submenu.active a:nth-child(12) { animation-delay: 0.32s; }
.mobile-submenu.active a:nth-child(13) { animation-delay: 0.34s; }
.mobile-submenu.active a:nth-child(14) { animation-delay: 0.36s; }
.mobile-submenu.active a:nth-child(15) { animation-delay: 0.38s; }
.mobile-submenu.active a:nth-child(16) { animation-delay: 0.40s; }
.mobile-submenu.active a:nth-child(17) { animation-delay: 0.42s; }
.mobile-submenu.active a:nth-child(18) { animation-delay: 0.44s; }
.mobile-submenu.active a:nth-child(19) { animation-delay: 0.46s; }
.mobile-submenu.active a:nth-child(20) { animation-delay: 0.48s; }
.mobile-submenu.active a:nth-child(21) { animation-delay: 0.50s; }
.mobile-submenu.active a:nth-child(22) { animation-delay: 0.52s; }
.mobile-submenu.active a:nth-child(23) { animation-delay: 0.54s; }
.mobile-submenu.active a:nth-child(24) { animation-delay: 0.56s; }
.mobile-submenu.active a:nth-child(25) { animation-delay: 0.58s; }
.mobile-submenu.active a:nth-child(26) { animation-delay: 0.60s; }
.mobile-submenu.active a:nth-child(27) { animation-delay: 0.62s; }
.mobile-submenu.active a:nth-child(28) { animation-delay: 0.64s; }
.mobile-submenu.active a:nth-child(29) { animation-delay: 0.66s; }
.mobile-submenu.active a:nth-child(30) { animation-delay: 0.68s; }

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


.menu-footer {
    position: relative;
    margin-top: 60px;
    padding-top: 40px;
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 500;
    color: rgba(255,255,255,.5);
}


/* =====================================================
   FULLSCREEN SEARCH
===================================================== */

#search-overlay {

    visibility: hidden;
    transform: translateY(-100%);

}


body.search-open {
    overflow: hidden;
}


.search-close-button {

    position: absolute;

    top: 32px;

    right: 40px;

    width: 42px;
    height: 42px;

    border: 1px solid rgba(255,255,255,.4);

    border-radius: 50%;

    background: transparent;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    z-index: 10;

}


.search-close-button span {

    position: absolute;

    width: 14px;

    height: 1px;

    background: white;

}


.search-close-button span:first-child {

    transform: rotate(45deg);

}


.search-close-button span:last-child {

    transform: rotate(-45deg);

}


.search-close-button:hover {

    background: white;

}


.search-close-button:hover span {

    background: var(--dark);

}


.search-label {

    font-size: 10px;
    font-weight: 600;

    letter-spacing: .2em;

    color: rgba(255,255,255,.5);

    margin-bottom: 35px;

}


.search-input-wrapper {

    margin-bottom: 60px;

}


.search-input {

    width: 100%;

    background: transparent;

    border: none;

    border-bottom: 1px solid rgba(255,255,255,.2);

    padding: 20px 0;

    font-size: clamp(35px, 6vw, 70px);

    font-weight: 500;

    letter-spacing: -.04em;

    color: white;

    outline: none;

    transition: border-color .3s ease;

}


.search-input::placeholder {

    color: rgba(255,255,255,.25);

}


.search-input:focus {

    border-bottom-color: rgba(255,255,255,.5);

}


.search-suggestions {

    max-width: 900px;

}


.search-suggestions-label {

    display: block;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: .15em;

    color: rgba(255,255,255,.4);

    margin-bottom: 20px;

}


.search-suggestions-items {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

}


.search-suggestion-item {

    padding: 12px 20px;

    background: transparent;

    border: 1px solid rgba(255,255,255,.2);

    color: rgba(255,255,255,.7);

    font-size: 13px;

    cursor: pointer;

    transition: all .3s ease;

}


.search-suggestion-item:hover {

    background: white;

    color: var(--dark);

    border-color: white;

}


/* =====================================================
   LIVE SEARCH RESULTS
===================================================== */

.live-search-results {
    position: absolute;
    top: calc(100% + 20px);
    left: 0;
    right: 0;
    max-width: 1000px;
    max-height: 600px;
    overflow-y: auto;
    background: rgba(17, 17, 17, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    z-index: 10;
    animation: slideDown 0.3s ease-out;
}

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

.live-search-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 16px;
    color: rgba(255, 255, 255, 0.7);
}

.loader-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--lime);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.live-search-results-wrapper {
    padding: 16px;
}

.live-search-group {
    margin-bottom: 24px;
}

.live-search-group:last-child {
    margin-bottom: 0;
}

.live-search-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 12px;
    color: white;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.live-search-group-header svg {
    color: var(--lime);
}

.live-search-count {
    margin-left: auto;
    background: rgba(215, 255, 0, 0.2);
    color: var(--lime);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}

.live-search-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.live-search-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.live-search-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(215, 255, 0, 0.4);
    transform: translateX(4px);
}

.live-search-item-image {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
}

.live-search-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.live-search-item-content {
    flex: 1;
    min-width: 0;
}

.live-search-item-title {
    font-size: 16px;
    font-weight: 600;
    color: white;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-search-item-excerpt {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /* -webkit-line-clamp: 2; */
    -webkit-box-orient: vertical;
    line-height: 1.4;
}

.live-search-item-meta {
    font-size: 12px;
    color: var(--lime);
    font-weight: 500;
}

.live-search-item-arrow {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.live-search-item:hover .live-search-item-arrow {
    color: var(--lime);
    transform: translateX(4px);
}

.live-search-item-no-link {
    cursor: default;
}

.live-search-item-no-link:hover {
    transform: translateX(0);
    border-color: rgba(255, 255, 255, 0.08);
}

.live-search-item-info-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.4);
}

.search-highlight {
    background: rgba(215, 255, 0, 0.3);
    color: var(--lime);
    font-weight: 600;
    padding: 2px 4px;
    border-radius: 3px;
}

.live-search-footer {
    padding: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 16px;
}

.live-search-view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 24px;
    background: rgba(215, 255, 0, 0.1);
    border: 1px solid rgba(215, 255, 0, 0.3);
    border-radius: 10px;
    color: var(--lime);
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
}

.live-search-view-all:hover {
    background: var(--lime);
    color: var(--dark);
    border-color: var(--lime);
}

.live-search-view-all svg {
    width: 16px;
    height: 16px;
}

.live-search-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.live-search-error {
    padding: 30px 20px;
    text-align: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .live-search-results {
        max-height: 500px;
        border-radius: 12px;
    }
    
    .live-search-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .live-search-item-image {
        width: 100%;
        height: 120px;
    }
    
    .live-search-item-title {
        white-space: normal;
    }
}


/* =====================================================
   HERO SLIDER
===================================================== */

.hero-slider {

    width: 100%;
    height: 100%;

    opacity: 0;

    transition: opacity .8s ease;

}


.hero-slider.swiper-loaded {

    opacity: 1;

}


.hero-slide {

    position: relative;

    width: 100%;
    height: 100%;

}


.hero-slide-image {

    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center;

    transform: scale(1.08);

    transition: transform 2.5s cubic-bezier(.2,.7,.2,1);

}


.swiper-slide-active .hero-slide-image {

    transform: scale(1);

}


.hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.12),
            rgba(0,0,0,.78)
        );

    z-index: 1;

}


.hero-slide-content {

    position: relative;

    z-index: 2;

    height: 100%;

    max-width: 1600px;

    margin: auto;

    padding: 0 40px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding-bottom: 80px;

    opacity: 0;

    transform: translateY(40px);

    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.2,.7,.2,1);

}


.hero-slide-content.slide-animate {

    opacity: 1;

    transform: translateY(0);

}


.swiper-slide-active .hero-slide-content {

    opacity: 1;

    transform: translateY(0);

}


.hero-eyebrow {

    font-size: 10px;
    font-weight: 600;

    letter-spacing: .18em;

    margin-bottom: 25px;

    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity .7s ease .3s,
        transform .7s ease .3s;

}


.swiper-slide-active .hero-eyebrow {

    opacity: 1;

    transform: translateY(0);

}


.hero-title {

    font-size: clamp(60px, 9vw, 150px);

    line-height: .88;

    letter-spacing: -.075em;

    font-weight: 500;

    opacity: 0;

    transform: translateY(30px);

    transition:
        opacity .8s ease .5s,
        transform .8s ease .5s;

}


.swiper-slide-active .hero-title {

    opacity: 1;

    transform: translateY(0);

}


.hero-title span {

    color: rgba(255,255,255,.5);

}


.hero-description {

    max-width: 360px;

    margin-top: 30px;

}


.hero-description p {

    font-size: 15px;

    line-height: 1.7;

    color: rgba(255,255,255,.7);

    margin-bottom: 30px;

    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity .7s ease .7s,
        transform .7s ease .7s;

}


.swiper-slide-active .hero-description p {

    opacity: 1;

    transform: translateY(0);

}


.hero-button {

    display: inline-flex;

    align-items: center;

    gap: 30px;

    padding: 15px 20px;

    border: 1px solid rgba(255,255,255,.4);

    font-size: 12px;

    transition: all .4s ease;

    opacity: 0;

    transform: translateY(20px);

}


.swiper-slide-active .hero-button {

    opacity: 1;

    transform: translateY(0);

    transition:
        opacity .7s ease .9s,
        transform .7s ease .9s,
        background .4s ease,
        color .4s ease;

}


.hero-button:hover {

    background: white;

    color: black;

}


.arrow {

    font-size: 18px;

}


.hero-bottom {

    margin-top: 70px;

    padding-top: 18px;

    border-top: 1px solid rgba(255,255,255,.25);

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 9px;
    font-weight: 500;

    letter-spacing: .1em;

    color: rgba(255,255,255,.6);

}


/* Swiper Navigation Buttons */

.swiper-button-prev,
.swiper-button-next {

    position: absolute;

    top: 50%;

    z-index: 10;

    width: 50px;
    height: 50px;

    margin-top: -25px;

    border: 1px solid rgba(255,255,255,.35);

    border-radius: 50%;

    background: rgba(0,0,0,.2);

    backdrop-filter: blur(10px);

    cursor: pointer;

    transition: all .4s ease;

}


.swiper-button-prev:hover,
.swiper-button-next:hover {

    background: rgba(255,255,255,.95);

    border-color: rgba(255,255,255,.95);

}


.swiper-button-prev::after,
.swiper-button-next::after {

    font-size: 16px;

    font-weight: 700;

    color: white;

    transition: color .4s ease;

}


.swiper-button-prev:hover::after,
.swiper-button-next:hover::after {

    color: #111;

}


.swiper-button-prev {

    left: 40px;

}


.swiper-button-next {

    right: 40px;

}


.swiper-button-disabled {

    opacity: .4;

    cursor: not-allowed;

}


/* Swiper Pagination */

.swiper-pagination {

    position: absolute;

    bottom: 40px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 10;

    display: flex;

    gap: 12px;

}


.swiper-pagination-bullet {

    width: 40px;
    height: 2px;

    background: rgba(255,255,255,.3);

    border-radius: 0;

    opacity: 1;

    cursor: pointer;

    transition: all .4s ease;

    position: relative;

    overflow: hidden;

}


.swiper-pagination-bullet::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 100%;

    background: white;

    transition: width .4s ease;

}


.swiper-pagination-bullet-active::before {

    width: 100%;

}


.swiper-pagination-bullet:hover {

    background: rgba(255,255,255,.5);

}


/* Counter */

.hero-counter {

    display: flex;

    align-items: center;

    gap: 8px;

}


.hero-counter-current {

    font-size: 11px;

}


.hero-counter-separator {

    font-size: 8px;

    opacity: .5;

}


.hero-counter-total {

    font-size: 9px;

    opacity: .6;

}


/* Progress Bar (Not Currently Used) */


/* =====================================================
   SECTION LABELS
===================================================== */

.section-number {

    display: block;

    font-size: 10px;
    font-weight: 500;

    color: var(--gray);

    margin-bottom: 8px;

}


.section-number.light {

    color: rgba(255,255,255,.5);

}


.section-label {

    font-size: 10px;
    font-weight: 600;

    letter-spacing: .15em;

    color: var(--gray);

}


.section-label.light {

    color: rgba(255,255,255,.5);

}


/* =====================================================
   INTRO
===================================================== */

.intro-heading {

    font-size: clamp(45px, 6vw, 90px);

    line-height: .98;

    letter-spacing: -.065em;

    font-weight: 500;

}


.intro-heading span {

    color: #aaa;

}


.body-text {

    font-size: 16px;

    line-height: 1.8;

    color: #666;

}


/* =====================================================
   SECTION HEADINGS
===================================================== */

.section-heading {

    margin-top: 35px;

    font-size: clamp(60px, 8vw, 120px);

    line-height: .88;

    letter-spacing: -.07em;

    font-weight: 500;

}


.section-heading span {

    color: rgba(255,255,255,.35);

}


.section-heading.dark span {

    color: #aaa;

}


/* =====================================================
   CATEGORY (Legacy - Removed, using Enhanced Cards)
===================================================== */


/* =====================================================
   OUTLINE BUTTON
===================================================== */

.outline-button {

    display: inline-flex;

    align-items: center;

    gap: 25px;

    padding: 15px 20px;

    border: 1px solid rgba(255,255,255,.3);

    font-size: 12px;

    transition: .4s ease;

}


.outline-button:hover {

    background: white;

    color: black;

}


/* =====================================================
   PRODUCTS (Legacy - Removed, using Enhanced Cards)
===================================================== */


/* =====================================================
   PROJECT
===================================================== */

.project-section {

    position: relative;

    height: 100vh;

    min-height: 700px;

    color: white;

    overflow: hidden;

}


.project-image {

    position: absolute;

    inset: 0;

}


.project-image img {

    transform: scale(1.1);

}


.project-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.1),
            rgba(0,0,0,.75)
        );

}


.project-content {

    position: relative;

    z-index: 2;

    height: 100%;

    max-width: 1600px;

    margin: auto;

    padding:
        70px 40px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}


.project-location {

    display: block;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: .15em;

    margin-bottom: 20px;

}


.project-content h2 {

    font-size: clamp(60px, 9vw, 150px);

    line-height: .85;

    letter-spacing: -.075em;

    font-weight: 500;

}


.project-link {

    display: inline-flex;

    gap: 25px;

    margin-top: 35px;

    padding-bottom: 10px;

    border-bottom: 1px solid rgba(255,255,255,.5);

    font-size: 12px;

}


.project-counter {

    position: absolute;

    z-index: 3;

    bottom: 40px;

    right: 40px;

    font-size: 10px;
    font-weight: 500;

}


/* =====================================================
   COMPANY
===================================================== */

.company-heading {

    font-size: clamp(60px, 8vw, 130px);

    line-height: .9;

    letter-spacing: -.07em;

    font-weight: 500;

}


.company-heading span {

    color: #aaa;

}


.stat-number {

    display: block;

    font-size: clamp(60px, 7vw, 100px);

    letter-spacing: -.07em;

    font-weight: 500;

}


.stat-label {

    margin-top: 8px;

    font-size: 9px;
    font-weight: 500;

    letter-spacing: .1em;

    color: #777;

}


.dark-button {

    display: inline-flex;

    gap: 30px;

    align-items: center;

    background: var(--dark);

    color: white;

    padding: 17px 22px;

    font-size: 12px;

    transition: .4s ease;

}


.dark-button:hover {

    background: var(--lime);

    color: black;

}


/* =====================================================
   CTA
===================================================== */

.cta-section {

    position: relative;

    min-height: 80vh;

    display: flex;

    align-items: center;

    color: white;

    background: #111;

    overflow: hidden;

}


.cta-background {

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 70% 40%,
            rgba(215,255,0,.18),
            transparent 35%
        );

}


.cta-section h2 {

    margin-top: 30px;

    font-size: clamp(65px, 10vw, 160px);

    line-height: .85;

    letter-spacing: -.08em;

    font-weight: 500;

}


.cta-section h2 span {

    color: rgba(255,255,255,.3);

}


.cta-button {

    display: inline-flex;

    align-items: center;

    gap: 30px;

    margin-top: 60px;

    padding: 20px 25px;

    background: var(--lime);

    color: black;

    font-size: 13px;

    transition: .4s ease;

}


.cta-button:hover {

    transform: translateY(-5px);

}


/* =====================================================
   FOOTER
===================================================== */

/* Modern Footer Container */
.footer-modern {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.footer-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #D7FF00, transparent);
    opacity: 0.3;
}

/* Modern Logo */
.footer-logo-modern {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -.05em;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #fff 0%, #D7FF00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Modern Tagline */
.footer-tagline {
    font-size: 15px;
    line-height: 1.8;
    color: #999;
    margin-bottom: 30px;
    font-weight: 300;
}

/* Modern Social Icons */
.social-icons-modern {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.social-icon-item {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
    text-decoration: none;
    opacity: 1;
    visibility: visible;
}

.social-icon-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #D7FF00 0%, #fff 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 50%;
}

.social-icon-item svg {
    position: relative;
    z-index: 1;
    transition: all 0.4s ease;
}

.social-icon-item:hover {
    border-color: #D7FF00;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(215, 255, 0, 0.2);
}

.social-icon-item:hover::before {
    opacity: 1;
}

.social-icon-item:hover svg {
    stroke: #111;
    transform: scale(1.1) rotate(5deg);
}

/* Modern Footer Heading */
.footer-heading-modern {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #D7FF00;
    margin-bottom: 24px;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 12px;
}

.footer-heading-modern::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #D7FF00, transparent);
}

/* Modern Navigation */
.footer-nav-modern {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: #bbb;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    padding-left: 0;
}

.footer-nav-link .link-arrow {
    display: inline-block;
    color: #D7FF00;
    font-size: 18px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}

.footer-nav-link:hover {
    color: #fff;
    padding-left: 10px;
}

.footer-nav-link:hover .link-arrow {
    opacity: 1;
    transform: translateX(-10px);
}

/* Modern Contact */
.footer-contact-modern {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-item-modern {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.contact-item-modern:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(215, 255, 0, 0.3);
    transform: translateX(5px);
}

.contact-icon-modern {
    width: 44px;
    height: 44px;
    min-width: 44px;
    background: linear-gradient(135deg, rgba(215, 255, 0, 0.1) 0%, rgba(215, 255, 0, 0.05) 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D7FF00;
}

.contact-link-modern {
    font-size: 14px;
    line-height: 1.7;
    color: #ccc;
    transition: color 0.3s ease;
}

.contact-link-modern:hover {
    color: #D7FF00;
}

/* Footer Bottom Modern */
.footer-bottom-modern {
    margin-top: 80px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.copyright-text {
    font-size: 13px;
    color: #777;
    letter-spacing: 0.05em;
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: #777;
}

.footer-bottom-link {
    color: #999;
    transition: color 0.3s ease;
}

.footer-bottom-link:hover {
    color: #D7FF00;
}

.divider {
    color: #444;
}

/* Legacy Footer Styles (Removed - Using Modern Footer Only) */





/* =====================================================
   ENHANCED CATEGORY CARDS
===================================================== */

.enhanced-category-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 30px;

}


.enhanced-category-grid-two {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 40px;

}


.enhanced-category-card {

    position: relative;

    background: rgba(255,255,255,.03);

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 12px;

    overflow: hidden;

    transition: all .5s cubic-bezier(.2,.7,.2,1);

}

.enhanced-category-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.enhanced-category-card-link:hover {
    text-decoration: none;
}


.enhanced-category-card:hover {

    background: rgba(255,255,255,.06);

    border-color: rgba(255,255,255,.15);

    transform: translateY(-8px);

}


.enhanced-category-image-wrapper {

    position: relative;

    height: 400px;

    overflow: hidden;

}


.enhanced-category-image {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .7s cubic-bezier(.2,.7,.2,1);

}


.enhanced-category-card:hover .enhanced-category-image {

    transform: scale(1.1);

}


.enhanced-category-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0,0,0,.3) 100%
    );

}


.enhanced-category-content {

    padding: 35px 30px;

}


.enhanced-category-header {

    padding-bottom: 25px;

    border-bottom: 1px solid rgba(255,255,255,.08);

}


.enhanced-category-number {

    display: inline-block;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: .1em;

    color: rgba(255,255,255,.4);

    margin-bottom: 12px;

}


.enhanced-category-title {

    font-size: 36px;

    font-weight: 500;

    letter-spacing: -.03em;

    color: white;

    margin-bottom: 15px;

}


.enhanced-category-description {

    font-size: 15px;

    line-height: 1.6;

    color: rgba(255,255,255,.65);

}


.enhanced-category-products {

    padding: 25px 0;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 14px;

}


.enhanced-product-type {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 14px;

    color: rgba(255,255,255,.7);

    transition: color .3s ease;

}


.enhanced-category-card:hover .enhanced-product-type {

    color: rgba(255,255,255,.9);

}


.enhanced-product-icon {

    font-size: 8px;

    color: var(--lime);

}


.enhanced-product-count {

    margin-left: auto;

    font-size: 12px;
    font-weight: 500;

    color: rgba(255,255,255,.4);

}


.enhanced-category-link {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 25px;

    border-top: 1px solid rgba(255,255,255,.08);

    font-size: 14px;
    font-weight: 500;

    color: white;

    transition: all .3s ease;
    
    text-decoration: none;

}

.enhanced-category-link-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 25px;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: 14px;
    font-weight: 500;
    color: white;
    transition: all .3s ease;
    width: 100%;
    pointer-events: none;
}


.enhanced-category-card:hover .enhanced-category-link {

    color: var(--lime);

}

.enhanced-category-card-link:hover .enhanced-category-link-text {
    color: var(--lime);
}


.enhanced-category-arrow {

    font-size: 20px;

    transition: transform .3s ease;

}


.enhanced-category-card:hover .enhanced-category-arrow {

    transform: translateX(5px);

}


/* =====================================================
   APPLICATIONS SECTION
===================================================== */

.applications-section {

    margin-top: 100px;

}


.applications-header {

    text-align: center;

    margin-bottom: 60px;

}


.applications-title {

    font-size: clamp(40px, 5vw, 70px);

    line-height: .9;

    letter-spacing: -.05em;

    font-weight: 500;

    color: white;

    margin-bottom: 20px;

}


.applications-subtitle {

    font-size: 16px;

    color: rgba(255,255,255,.5);

}


.applications-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 25px;

}


.application-card {

    position: relative;

    padding: 35px 25px;

    background: rgba(255,255,255,.02);

    border: 1px solid rgba(255,255,255,.06);

    border-radius: 8px;

    text-align: center;

    transition: all .4s cubic-bezier(.2,.7,.2,1);

}


.application-card:hover {

    background: rgba(255,255,255,.04);

    border-color: var(--lime);

    transform: translateY(-5px);

}


.application-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 60px;
    height: 60px;

    margin-bottom: 20px;

    border: 1px solid rgba(255,255,255,.15);

    border-radius: 50%;

    color: rgba(255,255,255,.6);

    transition: all .4s ease;

}

.application-icon img {

    width: 32px;
    height: 32px;

    object-fit: contain;

    filter: brightness(0) invert(1) opacity(0.6);

    transition: filter .4s ease;

}


.application-card:hover .application-icon {

    border-color: var(--lime);

    color: var(--lime);

    transform: scale(1.1);

}

.application-card:hover .application-icon img {

    filter: brightness(0) saturate(100%) invert(85%) sepia(32%) saturate(1214%) hue-rotate(17deg) brightness(102%) contrast(101%);

}


.application-name {

    font-size: 18px;

    font-weight: 500;

    letter-spacing: -.02em;

    color: white;

    margin-bottom: 8px;

}


.application-desc {

    font-size: 13px;

    color: rgba(255,255,255,.5);

}


/* =====================================================
   ENHANCED PRODUCT CARDS
===================================================== */

.product-grid-enhanced {

    display: grid;

    /* Always show 4 columns, even with fewer products */
    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

    margin-bottom: 80px;

}


.product-card-enhanced {

    position: relative;

    background: white;

    border: 1px solid #e8e8e8;

    border-radius: 10px;

    overflow: hidden;

    transition: all .5s cubic-bezier(.2,.7,.2,1);

}


.product-card-enhanced:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 60px rgba(0,0,0,.12);

    border-color: #d0d0d0;

}


.product-image-enhanced {

    position: relative;

    aspect-ratio: 1 / .8;

    overflow: hidden;

    background: #f5f5f5;

}


.product-image-enhanced img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .7s cubic-bezier(.2,.7,.2,1);

}


.product-card-enhanced:hover .product-image-enhanced img {

    transform: scale(1.08);

}


.product-badge {

    position: absolute;

    top: 15px;

    left: 15px;

    padding: 6px 14px;

    background: var(--lime);

    color: black;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .08em;

    border-radius: 20px;

    z-index: 2;

}


.product-badge.badge-popular {

    background: #111;

    color: white;

}


.product-number-enhanced {

    position: absolute;

    top: 15px;

    right: 15px;

    padding: 8px 12px;

    background: rgba(255,255,255,.95);

    backdrop-filter: blur(10px);

    color: black;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: .05em;

    border-radius: 4px;

}


.product-quick-specs {

    position: absolute;

    bottom: 15px;

    left: 15px;
    right: 15px;

    display: flex;

    gap: 8px;

    opacity: 0;

    transform: translateY(10px);

    transition: all .4s ease;

}


.product-card-enhanced:hover .product-quick-specs {

    opacity: 1;

    transform: translateY(0);

}


.spec-item {

    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

    padding: 8px 6px;

    background: rgba(255,255,255,.95);

    backdrop-filter: blur(10px);

    border-radius: 6px;

}


.spec-icon {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;

}


.spec-icon svg {

    width: 16px;
    height: 16px;
    color: #d7ff00; /* valux-lime */
    stroke: currentColor;

}


.spec-text {

    font-size: 10px;
    font-weight: 600;

    color: #333;

}


.product-content-enhanced {

    padding: 25px;

}


.product-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 12px;

}


.product-category {

    display: block;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: .12em;

    color: #999;

    margin-bottom: 8px;

}


.product-title {

    font-size: 32px;

    font-weight: 500;

    letter-spacing: -.04em;

    color: #111;

}


.product-arrow-enhanced {

    font-size: 24px;

    color: #999;

    transition: all .3s ease;

}


.product-card-enhanced:hover .product-arrow-enhanced {

    color: #111;

    transform: translate(3px, -3px);

}


.product-description {

    font-size: 14px;

    line-height: 1.6;

    color: #666;

    margin-bottom: 18px;

}


.product-features {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}


.feature-tag {

    padding: 6px 12px;

    background: #f5f5f5;

    border: 1px solid #e8e8e8;

    color: #666;

    font-size: 11px;
    font-weight: 500;

    border-radius: 4px;

    transition: all .3s ease;

}


.product-card-enhanced:hover .feature-tag {

    background: #111;

    border-color: #111;

    color: white;

}


/* =====================================================
   TECHNOLOGY SECTION
===================================================== */

.technology-section {

    margin-top: 100px;

    padding-top: 80px;

    border-top: 1px solid #e8e8e8;

}


.technology-header {

    text-align: center;

    margin-bottom: 60px;

}


.technology-title {

    font-size: clamp(40px, 5vw, 70px);

    line-height: .9;

    letter-spacing: -.05em;

    font-weight: 500;

    color: #111;

    margin-bottom: 15px;

}


.technology-subtitle {

    font-size: 16px;

    color: #666;

}


.technology-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 35px;

}


.tech-feature {

    text-align: center;

    padding: 40px 30px;

    background: #f9f9f9;

    border: 1px solid #e8e8e8;

    border-radius: 10px;

    transition: all .4s cubic-bezier(.2,.7,.2,1);

}


.tech-feature:hover {

    background: white;

    transform: translateY(-5px);

    box-shadow: 0 15px 40px rgba(0,0,0,.08);

}


.tech-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 80px;
    height: 80px;

    margin-bottom: 25px;

    border: 2px solid #e8e8e8;

    border-radius: 50%;

    color: #666;

    transition: all .4s ease;

}

.tech-icon img {

    width: 40px;
    height: 40px;

    object-fit: contain;

    filter: grayscale(100%) brightness(0.4);

    transition: filter .4s ease;

}


.tech-feature:hover .tech-icon {

    border-color: var(--lime);

    color: #111;

    transform: scale(1.1);

}

.tech-feature:hover .tech-icon img {

    filter: grayscale(0%) brightness(1);

}


.tech-title {

    font-size: 20px;

    font-weight: 600;

    letter-spacing: -.02em;

    color: #111;

    margin-bottom: 10px;

}


.tech-desc {

    font-size: 14px;

    line-height: 1.6;

    color: #666;

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width: 900px) {

    .enhanced-category-grid,
    .enhanced-category-grid-two {

        grid-template-columns: 1fr;

        gap: 25px;

    }


    .enhanced-category-image-wrapper {

        height: 330px;

    }


    .enhanced-category-content {

        padding: 28px 24px;

    }


    .enhanced-category-title {

        font-size: 32px;

    }


    .applications-grid {

        grid-template-columns: repeat(2, 1fr);

    }


    /* Tablet: 2 columns for featured products */
    .product-grid-enhanced {

        grid-template-columns: repeat(2, 1fr);

        gap: 18px;

    }


    .technology-grid {

        grid-template-columns: repeat(2, 1fr);

    }


    .hero-title {

        font-size: clamp(55px, 14vw, 100px);

    }


    .hero-slide-content {

        padding: 0 24px 60px;

    }


    .hero-bottom {

        margin-top: 50px;

    }


    .swiper-button-prev {

        left: 20px;

    }


    .swiper-button-next {

        right: 20px;

    }


    .swiper-pagination {

        bottom: 30px;

    }


    .project-content {

        padding: 40px 24px;

    }


    .project-counter {

        right: 24px;

    }

    /* Modern Footer Responsive */
    .footer-bottom-modern {
        margin-top: 50px;
    }

    .footer-bottom-content {
        flex-direction: column;
        text-align: left;
        gap: 15px;
        align-items: flex-start;
    }

    .footer-bottom-links {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .divider {
        display: none;
    }

    /* .social-icons-modern {
        justify-content: center;
    } */

    .social-icon-item {
        width: 44px;
        height: 44px;
    }

    .footer-modern .grid {
        grid-template-columns: 1fr !important;
        gap: 40px;
    }
    .footer-contact-modern {
        max-width: 500px;
    }

    .contact-item-modern {
        flex-direction: row;
        text-align: left;
        gap: 12px;
    }

    .contact-icon-modern {
        margin: 0;
    }

    /* .footer-tagline {
        text-align: center;
    } */

    /* .footer-logo-modern {
        text-align: center;
    } */

}


@media(max-width: 600px) {

    .enhanced-category-grid,
    .enhanced-category-grid-two {

        grid-template-columns: 1fr;

    }


    .enhanced-category-card {

        margin-bottom: 10px;

    }


    .enhanced-category-image-wrapper {

        height: 290px;

    }


    .enhanced-category-content {

        padding: 25px 20px;

    }


    .enhanced-category-title {

        font-size: 28px;

    }


    .enhanced-category-products {

        grid-template-columns: 1fr;

    }


    .applications-section {

        margin-top: 70px;

    }


    .applications-grid {

        grid-template-columns: 1fr;

        gap: 20px;

    }


    .application-card {

        padding: 30px 20px;

    }


    .technology-grid {

        grid-template-columns: 1fr;

    }


    .product-grid-enhanced {

        grid-template-columns: 1fr;

        gap: 15px;

    }

    .product-card-enhanced {
        border-radius: 8px;
    }

    .product-content-enhanced {
        padding: 20px;
    }

    .product-title {
        font-size: 28px;
    }

    .product-description {
        font-size: 13px;
    }


    .hero-description {

        max-width: 280px;

    }


    .hero-description p {

        font-size: 13px;

    }


    .hero-slide-content {

        padding: 0 20px 50px;

    }


    .hero-bottom {

        flex-wrap: wrap;

        gap: 12px;

        margin-top: 40px;

    }


    .swiper-button-prev,
    .swiper-button-next {

        width: 42px;
        height: 42px;

        margin-top: -21px;

    }


    .swiper-button-prev {

        left: 15px;

    }


    .swiper-button-next {

        right: 15px;

    }


    .swiper-button-prev::after,
    .swiper-button-next::after {

        font-size: 14px;

    }


    .swiper-pagination {

        bottom: 25px;

        gap: 10px;

    }


    .swiper-pagination-bullet {

        width: 30px;

    }


    .intro-heading {

        font-size: 45px;

    }


    .section-heading {

        font-size: 60px;

    }


    .company-heading {

        font-size: 60px;

    }

    .applications-title {
        font-size: 50px;
    }

    .technology-title {
        font-size: 50px;
    }


    .menu-footer {

        left: 24px;

        right: 24px;

    }


    .search-close-button {

        top: 24px;

        right: 24px;

    }


    .search-input {

        font-size: clamp(28px, 8vw, 45px);

        padding: 15px 0;

    }


    .search-suggestions-items {

        gap: 10px;

    }


    .search-suggestion-item {

        padding: 10px 16px;

        font-size: 12px;

    }

}


/* =====================================================
   TESTIMONIALS SLIDER
===================================================== */
.testimonials-redesign-section {
            position: relative;
            padding: 120px 40px;
            background: linear-gradient(180deg, #0a0a0a 0%, #0f0f0f 50%, #0a0a0a 100%);
            overflow: hidden;
        }

        .testimonials-redesign-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 800px;
            height: 800px;
            background: radial-gradient(circle, var(--lime-glow) 0%, transparent 70%);
            pointer-events: none;
            opacity: 0.3;
        }

        .testimonials-container {
            max-width: 1400px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }

        /* Header */
        .testimonials-header {
            text-align: center;
            margin-bottom: 80px;
        }

        .testimonials-label {
            display: inline-block;
            font-size: 12px;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--lime);
            margin-bottom: 20px;
            font-weight: 600;
        }

        .testimonials-title {
            font-size: clamp(40px, 6vw, 72px);
            font-weight: 700;
            line-height: 1.1;
            margin-bottom: 20px;
            background: linear-gradient(135deg, #ffffff 0%, #a0a0a0 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .testimonials-subtitle {
            font-size: 18px;
            color: rgba(255, 255, 255, 0.6);
            max-width: 600px;
            margin: 0 auto;
        }

        /* Slider Container */
        .testimonials-redesign-slider {
            position: relative;
            padding: 40px 0 0px;
            margin: 0 -20px;
        }

        .testimonials-redesign-slider .swiper {
            overflow: visible;
            padding: 0 20px;
        }

        /* Slide spacing */
        .testimonials-redesign-slider .swiper-slide {
            height: auto;
            display: flex;
        }

        /* Prevent overflow on mobile */
        @media (max-width: 768px) {
            .testimonials-redesign-slider {
                margin: 0 -10px;
            }
        }

        @media (max-width: 480px) {
            .testimonials-redesign-slider {
                margin: 0;
            }
        }

        /* Testimonial Card - Glassmorphism Design */
        .testimonial-redesign-card {
            position: relative;
            background: rgba(255, 255, 255, 0.02);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 24px;
            padding: 50px 40px;
            min-height: 420px;
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
            overflow: hidden;
            box-shadow: 
                0 20px 60px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

        .testimonial-redesign-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--lime), transparent);
            opacity: 0;
            transition: opacity 0.6s ease;
        }

        .testimonial-redesign-card:hover {
            transform: translateY(-10px);
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(212, 255, 0, 0.3);
            box-shadow: 
                0 30px 80px rgba(0, 0, 0, 0.6),
                0 0 40px var(--lime-glow),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
        }

        .testimonial-redesign-card:hover::before {
            opacity: 1;
        }

        /* Quote Icon - Redesigned */
        .testimonial-redesign-quote {
            position: relative;
            margin-bottom: 30px;
        }

        .testimonial-redesign-quote svg {
            width: 64px;
            height: 64px;
            opacity: 0.15;
            transition: all 0.6s ease;
        }

        .testimonial-redesign-card:hover .testimonial-redesign-quote svg {
            opacity: 0.25;
            transform: scale(1.1);
            color: var(--lime);
        }

        /* Content */
        .testimonial-redesign-content {
            flex: 1;
            margin-bottom: 40px;
        }

        .testimonial-redesign-text {
            font-size: 17px;
            line-height: 1.7;
            color: rgba(255, 255, 255, 0.9);
            font-weight: 300;
            letter-spacing: 0.3px;
            position: relative;
        }

        /* Author Section - Redesigned */
        .testimonial-redesign-author {
            display: flex;
            align-items: center;
            gap: 20px;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }

        .testimonial-redesign-avatar {
            position: relative;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--lime) 0%, #a0d000 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: 700;
            color: var(--valux-dark);
            flex-shrink: 0;
            box-shadow: 0 8px 20px rgba(212, 255, 0, 0.3);
            transition: all 0.4s ease;
        }

        .testimonial-redesign-card:hover .testimonial-redesign-avatar {
            transform: scale(1.05);
            box-shadow: 0 12px 30px rgba(212, 255, 0, 0.5);
        }

        .testimonial-redesign-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

        .testimonial-redesign-author-info {
            flex: 1;
        }

        .testimonial-redesign-name {
            font-size: 16px;
            font-weight: 600;
            color: #ffffff;
            margin-bottom: 4px;
            letter-spacing: 0.3px;
        }

        .testimonial-redesign-role {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.5);
            font-weight: 400;
        }

        /* Rating - Redesigned */
        .testimonial-redesign-rating {
            display: flex;
            gap: 3px;
            margin-left: auto;
        }

        .testimonial-redesign-rating svg {
            width: 16px;
            height: 16px;
            fill: var(--lime);
            filter: drop-shadow(0 2px 4px var(--lime-glow));
            transition: transform 0.3s ease;
        }

        .testimonial-redesign-card:hover .testimonial-redesign-rating svg {
            transform: scale(1.1);
        }

        /* Navigation - Modern Progress Bar Style */
        .testimonials-redesign-navigation {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 30px;
            margin-top: 60px;
        }

        .testimonials-redesign-button {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            color: #ffffff;
            backdrop-filter: blur(10px);
        }

        .testimonials-redesign-button:hover {
            background: var(--lime);
            border-color: var(--lime);
            color: var(--valux-dark);
            transform: scale(1.05);
            box-shadow: 0 8px 20px var(--lime-glow);
        }

        .testimonials-redesign-button.swiper-button-disabled {
            opacity: 0.3;
            cursor: not-allowed;
            pointer-events: none;
        }

        .testimonials-redesign-button svg {
            width: 24px;
            height: 24px;
        }

        /* Custom Progress Bar */
        .testimonials-progress-bar {
            flex: 1;
            max-width: 400px;
            height: 4px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            overflow: hidden;
            position: relative;
        }

        .testimonials-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--lime) 0%, #a0d000 100%);
            border-radius: 10px;
            transition: width 0.3s ease;
            box-shadow: 0 0 20px var(--lime-glow);
        }

        /* Slide Counter */
        .testimonials-counter {
            font-size: 16px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.7);
            letter-spacing: 2px;
            min-width: 80px;
            text-align: center;
        }

        .testimonials-counter-current {
            color: var(--lime);
            font-size: 20px;
        }

        /* Responsive Design */
        
        /* Large Desktop (1440px+) */
        @media (min-width: 1440px) {
            .testimonials-container {
                max-width: 1600px;
            }
            
            .testimonial-redesign-card {
                padding: 50px 45px;
            }
        }

        /* Desktop (1024px - 1439px) */
        @media (max-width: 1439px) {
            .testimonials-container {
                max-width: 1200px;
            }
        }

        /* Tablet and Below */
        @media (max-width: 1024px) {
            .testimonials-redesign-section {
                padding: 80px 30px;
            }

            .testimonial-redesign-card {
                padding: 40px 35px;
                min-height: 400px;
            }

            .testimonial-redesign-text {
                font-size: 16px;
            }

            .testimonial-redesign-quote svg {
                width: 52px;
                height: 52px;
            }

            .testimonials-redesign-slider .swiper {
                padding: 0 15px;
            }
        }

        /* Small Tablet (768px - 899px) */
        @media (max-width: 899px) {
            .testimonial-redesign-card {
                padding: 38px 32px;
                min-height: 420px;
            }

            .testimonial-redesign-text {
                font-size: 15.5px;
                line-height: 1.65;
            }
        }

        /* Mobile and Small Tablet */
        @media (max-width: 768px) {
            .testimonials-redesign-section {
                padding: 60px 20px;
            }

            .testimonials-header {
                margin-bottom: 50px;
            }

            .testimonials-title {
                font-size: 36px;
            }

            .testimonials-subtitle {
                font-size: 16px;
            }

            .testimonial-redesign-card {
                padding: 35px 28px;
                min-height: 400px;
            }

            .testimonial-redesign-text {
                font-size: 15px;
                line-height: 1.6;
            }

            .testimonial-redesign-avatar {
                width: 50px;
                height: 50px;
                font-size: 16px;
            }

            .testimonial-redesign-name {
                font-size: 15px;
            }

            .testimonial-redesign-role {
                font-size: 12px;
            }

            .testimonials-redesign-navigation {
                gap: 20px;
                margin-top: 40px;
                flex-wrap: wrap;
            }

            .testimonials-redesign-button {
                width: 48px;
                height: 48px;
            }

            .testimonials-redesign-button svg {
                width: 20px;
                height: 20px;
            }

            .testimonials-progress-bar {
                max-width: 180px;
            }

            .testimonials-redesign-slider .swiper {
                padding: 0 10px;
            }
        }

        /* Large Mobile (480px - 639px) */
        @media (max-width: 639px) {
            .testimonial-redesign-card {
                padding: 32px 26px;
                min-height: 420px;
            }

            .testimonial-redesign-quote {
                margin-bottom: 24px;
            }

            .testimonial-redesign-quote svg {
                width: 48px;
                height: 48px;
            }

            .testimonial-redesign-content {
                margin-bottom: 32px;
            }
        }

        /* Small Mobile (320px - 479px) */
        @media (max-width: 480px) {
            .testimonials-redesign-section {
                padding: 50px 16px;
            }

            .testimonials-header {
                margin-bottom: 40px;
            }

            .testimonials-label {
                font-size: 11px;
                letter-spacing: 2.5px;
                margin-bottom: 16px;
            }

            .testimonials-title {
                font-size: 32px;
            }

            .testimonials-subtitle {
                font-size: 15px;
            }

            .testimonials-redesign-slider {
                padding: 20px 0 0px;
            }

            .testimonial-redesign-card {
                padding: 30px 24px;
                min-height: auto;
            }

            .testimonial-redesign-quote {
                margin-bottom: 20px;
            }

            .testimonial-redesign-quote svg {
                width: 44px;
                height: 44px;
            }

            .testimonial-redesign-content {
                margin-bottom: 28px;
            }

            .testimonial-redesign-text {
                font-size: 14.5px;
                line-height: 1.6;
            }

            .testimonial-redesign-author {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
                padding-top: 24px;
            }

            .testimonial-redesign-avatar {
                width: 48px;
                height: 48px;
                font-size: 15px;
            }

            .testimonial-redesign-name {
                font-size: 14.5px;
            }

            .testimonial-redesign-role {
                font-size: 11.5px;
            }

            .testimonial-redesign-rating {
                margin-left: 0;
                gap: 2px;
            }

            .testimonial-redesign-rating svg {
                width: 14px;
                height: 14px;
            }

            .testimonials-redesign-navigation {
                gap: 16px;
                margin-top: 36px;
            }

            .testimonials-redesign-button {
                width: 44px;
                height: 44px;
            }

            .testimonials-redesign-button svg {
                width: 18px;
                height: 18px;
            }

            .testimonials-counter {
                font-size: 13px;
                min-width: 70px;
            }

            .testimonials-counter-current {
                font-size: 17px;
            }

            .testimonials-progress-bar {
                max-width: 120px;
                order: 4;
                width: 100%;
                margin-top: 12px;
            }

            .testimonials-redesign-slider .swiper {
                padding: 0;
            }
        }

        /* Extra Small Mobile (320px and below) */
        @media (max-width: 360px) {
            .testimonials-redesign-section {
                padding: 40px 12px;
            }

            .testimonials-title {
                font-size: 28px;
            }

            .testimonial-redesign-card {
                padding: 26px 20px;
            }

            .testimonial-redesign-text {
                font-size: 14px;
            }

            .testimonials-redesign-button {
                width: 42px;
                height: 42px;
            }
        }

/* =====================================================
   PRODUCT DETAIL PAGE RESPONSIVE
===================================================== */

@media(max-width: 640px) {
    /* Better thumbnail grid on mobile */
    .thumbnail-btn {
        border-width: 1.5px !important;
    }
}

@media(max-width: 480px) {
    /* Thumbnail grid becomes 3 columns on very small screens */
    .grid-cols-4 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    /* Hide 4th thumbnail or adjust as needed */
    .thumbnail-btn:nth-child(4) {
        display: none;
    }
    
    /* Better product title sizing on mobile */
    .product-detail h1 {
        font-size: 1.875rem !important;
        line-height: 1.2;
    }
    
    /* Improved quick specs grid on mobile */
    .grid-cols-2 {
        gap: 0.75rem !important;
    }
    
    /* Better related products card padding */
    article .p-5 {
        padding: 1rem !important;
    }
}


/* =====================================================
   BREADCRUMB RESPONSIVE IMPROVEMENTS
===================================================== */

@media(max-width: 640px) {
    /* Ensure breadcrumb doesn't break awkwardly */
    .breadcrumb-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .breadcrumb-wrapper::-webkit-scrollbar {
        display: none;
    }
}


/* =====================================================
   INNER PAGE HERO - GLOBAL CLASS
===================================================== */

/* Global Inner Page Hero Section 
   Use this class for all inner pages (About, Projects, Downloads, Contact, etc.)
   This provides consistent hero section styling across all inner pages
*/
.inner-page-hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--dark) 0%, #1a1a1a 100%);
    overflow: hidden;
    color: white;
    padding-top: 60px;
}

.inner-page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1px, transparent 0);
    background-size: 40px 40px;
    opacity: 0.5;
    z-index: 0;
}

.inner-page-hero > div {
    position: relative;
    z-index: 1;
}

/* =====================================================
   PROJECTS PAGE
===================================================== */

/* Projects Hero */
.projects-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--dark) 0%, #1a1a1a 100%);
    overflow: hidden;
    color: white;
    padding-top: 120px;
}

.projects-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1px, transparent 0);
    background-size: 40px 40px;
    opacity: 0.5;
    z-index: 0;
}

.projects-hero > div {
    position: relative;
    z-index: 1;
}

.projects-hero-title {
    margin-top: 35px;
    font-size: clamp(60px, 8vw, 120px);
    line-height: 0.88;
    letter-spacing: -0.07em;
    font-weight: 500;
    color: white;
}

.projects-hero-title span {
    color: rgba(255, 255, 255, 0.35);
}

.projects-hero-description {
    margin-top: 2rem;
    font-size: 1.125rem;
    line-height: 1.75;
    max-width: 42rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Project Filters */
.project-filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

.filter-btn {
    padding: 12px 24px;
    background: transparent;
    border: 1px solid rgba(17, 17, 17, 0.2);
    color: var(--gray);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
}

.filter-btn:hover {
    border-color: var(--dark);
    color: var(--dark);
    background: rgba(17, 17, 17, 0.03);
}

.filter-btn.active {
    background: var(--dark);
    color: white;
    border-color: var(--dark);
}

/* Projects Masonry Grid */
.projects-masonry {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 30px;
    margin-bottom: 80px;
}

.project-item {
    position: relative;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.project-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.project-image-wrapper {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #f5f5f5;
}

.project-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-item:hover .project-image-wrapper img {
    transform: scale(1.1);
}

.project-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.project-item:hover .project-overlay {
    opacity: 1;
}

.project-category-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 20px;
    z-index: 2;
}

.project-info {
    padding: 28px;
}

.project-title {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--dark);
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.project-item:hover .project-title {
    color: var(--lime);
}

.project-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: var(--gray);
}

.project-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.project-meta-icon {
    width: 16px;
    height: 16px;
    color: var(--gray);
}

/* Projects Videos Section */
.projects-videos {
    background: var(--dark);
    color: white;
    padding: 100px 0;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 60px;
}

.video-card {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.video-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(215, 255, 0, 0.3);
    transform: translateY(-8px);
}

.video-thumbnail {
    position: relative;
    aspect-ratio: 16/9;
    background: #000;
    overflow: hidden;
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
    transition: all 0.5s ease;
}

.video-card:hover .video-thumbnail img {
    opacity: 0.9;
    transform: scale(1.05);
}

.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: rgba(215, 255, 0, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.video-play-btn svg {
    width: 28px;
    height: 28px;
    fill: var(--dark);
    margin-left: 4px;
}

.video-card:hover .video-play-btn {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 10px 40px rgba(215, 255, 0, 0.4);
}

.video-info {
    padding: 24px;
}

.video-title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: white;
    margin-bottom: 8px;
}

.video-description {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
}

/* Projects Page Responsive */
@media(max-width: 1024px) {
    .projects-masonry {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 25px;
    }
    
    .video-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

@media(max-width: 768px) {
    .inner-page-hero {
        padding-top: 50px;
    }

    .projects-hero-title {
        font-size: clamp(50px, 10vw, 80px);
    }

    .projects-hero-description {
        font-size: 1rem;
        margin-top: 1.5rem;
    }

    .projects-masonry {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .video-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .project-filters {
        gap: 10px;
    }

    .filter-btn {
        padding: 10px 18px;
        font-size: 12px;
    }

    .projects-videos {
        padding: 70px 0;
    }
}

@media(max-width: 480px) {
    .inner-page-hero {
        padding-top: 50px;
    }

    .projects-hero-title {
        font-size: clamp(45px, 12vw, 70px);
    }
}


/* =====================================================
   HEADER RESPONSIVE
===================================================== */

@media(max-width: 768px) {

    #site-header {

        width: calc(100% - 16px);

        margin: 8px auto 0;

        border-radius: 8px;

    }


    #site-header.scrolled {

        margin-top: 8px;

    }

}


@media(max-width: 480px) {

    #site-header {

        width: calc(100% - 12px);

        margin: 6px auto 0;

        border-radius: 8px;

    }


    #site-header.scrolled {

        margin-top: 6px;

    }


    #site-header nav {

        padding: 12px 16px !important;

    }


    .logo-image {

        height: 42px;

    }


    .search-button,
    .menu-button {

        width: 38px;
        height: 38px;

    }

    .search-button svg {
        width: 16px;
        height: 16px;
    }

    .menu-button span {
        width: 12px;
    }

    /* Better pagination spacing on mobile */
    .swiper-pagination {
        bottom: 20px;
        gap: 8px;
    }

    .swiper-pagination-bullet {
        width: 28px;
    }

    /* Improve hero text on very small screens */
    .hero-title {
        font-size: clamp(45px, 12vw, 90px) !important;
    }

    .hero-eyebrow {
        font-size: 9px;
        margin-bottom: 20px;
    }

    .hero-description p {
        font-size: 14px;
    }
    
    /* Improve touch targets for buttons and links */
    .search-button,
    .menu-button {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Better footer spacing on mobile */
    .footer-modern .grid {
        gap: 2rem !important;
    }

}


/* =====================================================
   DOWNLOADS PAGE
===================================================== */

.downloads-hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--dark) 0%, #1a1a1a 100%);
    overflow: hidden;
    color: white;
    padding-top: 120px;
}

.downloads-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1px, transparent 0);
    background-size: 40px 40px;
    opacity: 0.5;
}

.download-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--border-dark);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.download-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
    border-color: rgba(215,255,0,0.3);
}

.download-card-header {
    padding: 32px;
    background: linear-gradient(135deg, #f8f8f8 0%, #ffffff 100%);
    border-bottom: 1px solid var(--border-dark);
    flex-shrink: 0;
}

.download-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(215,255,0,0.15) 0%, rgba(215,255,0,0.05) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}


.download-icon svg {
    width: 28px;
    height: 28px;
    color: var(--dark);
}

.download-title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--dark);
    margin-bottom: 8px;
}

.download-type {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray);
}

.download-card-body {
    padding: 32px;
    flex-grow: 1;
}

.download-description {
    font-size: 15px;
    line-height: 1.7;
    color: var(--gray);
    margin-bottom: 24px;
}

.download-meta {
    display: flex;
    gap: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-dark);
}

.download-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--gray);
}

.download-meta-icon {
    width: 16px;
    height: 16px;
}

.download-card-footer {
    padding: 24px 32px;
    background: #fafafa;
    border-top: 1px solid var(--border-dark);
}


.download-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    background: var(--dark);
    color: white;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 1px solid var(--dark);
    width: 100%;
    justify-content: center;
}

.download-btn:hover {
    background: var(--lime);
    color: var(--dark);
    border-color: var(--lime);
    transform: translateX(4px);
}

.download-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.download-btn:hover svg {
    transform: translateX(4px);
}

.coming-soon-badge {
    display: inline-block;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--lime) 0%, #b8d600 100%);
    color: var(--dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    border-radius: 20px;
    text-transform: uppercase;
}

.downloads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 32px;
    margin-top: 60px;
}

.category-section {
    margin-bottom: 80px;
}

.category-header {
    margin-bottom: 40px;
}


.category-title {
    font-size: 42px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--dark);
    margin-bottom: 12px;
}

.category-description {
    font-size: 16px;
    color: var(--gray);
    line-height: 1.7;
}

/* Responsive */
@media(max-width: 768px) {
    .inner-page-hero {
        padding-top: 60px;
    }

    .downloads-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .category-title {
        font-size: 32px;
    }
}


/* =====================================================
   CONTACT PAGE STYLES
===================================================== */

/* Contact Information Items */
.contact-info-item {
    padding: 24px 0;
    border-bottom: 1px solid rgba(17,17,17,0.08);
}

.contact-info-item:last-child {
    border-bottom: none;
}

.contact-icon-wrapper {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dark);
    border-radius: 12px;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-info-item:hover .contact-icon-wrapper {
    background: var(--lime);
    transform: scale(1.05);
}

.contact-info-item:hover .contact-icon-wrapper svg {
    color: var(--dark) !important;
}

/* Social Links on Contact Page */
.social-link-contact {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(17,17,17,0.15);
    border-radius: 12px;
    color: var(--dark);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.social-link-contact:hover {
    background: var(--dark);
    border-color: var(--dark);
    color: white;
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(17,17,17,0.15);
}

/* =====================================================
   CONTACT FORM STYLES
===================================================== */

.contact-form {
    width: 100%;
}

/* Form Group */
.form-group {
    position: relative;
    width: 100%;
}

/* Form Label */
.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 10px;
    letter-spacing: 0.02em;
    transition: color 0.3s ease;
}

/* Form Input, Select, Textarea */
.form-input {
    width: 100%;
    padding: 14px 18px;
    font-size: 15px;
    font-family: inherit;
    font-weight: 400;
    color: var(--dark);
    background: var(--cream);
    border: 1px solid rgba(17,17,17,0.12);
    border-radius: 10px;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    appearance: none;
}

.form-input::placeholder {
    color: rgba(17,17,17,0.35);
}

.form-input:hover {
    border-color: rgba(17,17,17,0.25);
    background: #f9f8f5;
}

.form-input:focus {
    border-color: var(--lime);
    background: white;
    box-shadow: 0 0 0 3px rgba(215, 255, 0, 0.1);
}

.form-input:focus + .form-label,
.form-input:not(:placeholder-shown) + .form-label {
    color: var(--lime);
}

/* Textarea Specific */
textarea.form-input {
    resize: vertical;
    min-height: 150px;
    line-height: 1.6;
}

/* Select Dropdown */
select.form-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    padding-right: 45px;
    cursor: pointer;
}

select.form-input:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23D7FF00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Checkbox Styling */
.form-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(17,17,17,0.2);
    border-radius: 5px;
    background: var(--cream);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    flex-shrink: 0;
}

.form-checkbox:hover {
    border-color: var(--lime);
    background: #f9f8f5;
}

.form-checkbox:checked {
    background: var(--lime);
    border-color: var(--lime);
}

.form-checkbox:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid var(--dark);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.form-checkbox:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(215, 255, 0, 0.2);
}

/* Filled Button (Submit) */
.filled-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 16px 32px;
    background: var(--dark);
    color: white;
    /* border: 1px solid red; */
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    outline: none;
    border: none !important;
}

.filled-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--lime);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

.filled-button:hover::before {
    width: 100%;
}

.filled-button:hover {
    border-color: var(--lime);
}

.filled-button span {
    position: relative;
    z-index: 1;
    transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.filled-button:hover span {
    color: var(--dark);
}

.filled-button .arrow {
    font-size: 18px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.filled-button:hover .arrow {
    transform: translateX(4px);
}

.filled-button:active {
    transform: scale(0.98);
}

.filled-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Form Messages */
#form-messages {
    padding: 16px 20px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.6;
}

#form-messages.success {
    display: block;
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

#form-messages.error {
    display: block;
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Input Focus States */
.form-group:focus-within .form-label {
    color: var(--lime);
}

/* Input Validation States */
.form-input:invalid:not(:placeholder-shown):not(:focus) {
    border-color: #ef4444;
}

.form-input:valid:not(:placeholder-shown):not(:focus) {
    border-color: #22c55e;
}

/* Loading State for Form */
.contact-form.loading .filled-button {
    pointer-events: none;
    opacity: 0.7;
}

.contact-form.loading .filled-button::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-left: 12px;
}
.form-group br {
    display: none !important;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


.wpcf7-not-valid-tip {
    font-size: .9rem;
    margin-top: 5px;
}


/* =====================================================
   RESPONSIVE - CONTACT FORM
===================================================== */

@media (max-width: 768px) {
    .contact-info-item {
        padding: 20px 0;
    }

    .contact-icon-wrapper {
        width: 44px;
        height: 44px;
    }

    .contact-icon-wrapper svg {
        width: 20px;
        height: 20px;
    }

    .form-input {
        padding: 12px 16px;
        font-size: 14px;
    }

    textarea.form-input {
        min-height: 120px;
    }

    .filled-button {
        width: 100%;
        padding: 14px 28px;
        font-size: 12px;
    }

    .social-link-contact {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 480px) {
    .form-label {
        font-size: 12px;
        margin-bottom: 8px;
    }

    .form-input {
        padding: 11px 14px;
        font-size: 13px;
        border-radius: 8px;
    }

    .form-checkbox {
        width: 18px;
        height: 18px;
    }

    .filled-button {
        padding: 13px 24px;
        gap: 16px;
    }
}


/* =====================================================
   FOOTER MENU - WordPress Menu Support
===================================================== */

/* WordPress menu list styling for footer */
.footer-nav-modern ul,
.footer-nav-modern .footer-menu-list,
.footer-nav-modern .footer-categories-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-nav-modern li,
.footer-nav-modern .menu-item {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    list-style-type: none !important;
}

/* Remove default list bullets forcefully */
.footer-nav-modern li::before,
.footer-nav-modern li::marker,
.footer-nav-modern .menu-item::before,
.footer-nav-modern .menu-item::marker {
    content: none !important;
    display: none !important;
}

/* WordPress menu item links - Base state */
.footer-nav-modern ul a,
.footer-nav-modern .footer-menu-list a,
.footer-nav-modern .footer-categories-list a {
    display: flex !important;
    align-items: center;
    /* gap: 12px; */
    font-size: 15px;
    color: #bbb;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    padding-left: 0;
}

/* Arrow styling - HIDDEN by default */
.footer-nav-modern ul a .link-arrow,
.footer-nav-modern .footer-menu-list a .link-arrow,
.footer-nav-modern .footer-categories-list a .link-arrow {
    display: inline-block;
    color: #D7FF00;
    font-size: 18px;
    font-weight: normal;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0 !important;  /* Hidden by default */
    transform: translateX(0);
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    order: 1; /* Arrow appears after text */
}

/* Text wrapper in menu items */
.footer-nav-modern ul a .link-text,
.footer-nav-modern .footer-menu-list a .link-text,
.footer-nav-modern .footer-categories-list a .link-text {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover effect - Show arrow and animate */
.footer-nav-modern ul a:hover,
.footer-nav-modern .footer-menu-list a:hover,
.footer-nav-modern .footer-categories-list a:hover {
    color: #fff;
    padding-right: 10px;
}

.footer-nav-modern ul a:hover .link-arrow,
.footer-nav-modern .footer-menu-list a:hover .link-arrow,
.footer-nav-modern .footer-categories-list a:hover .link-arrow {
    opacity: 1 !important;  /* Show on hover */
    transform: translateX(10px);
}

/* Active/Current menu item */
.footer-nav-modern .current-menu-item > a,
.footer-nav-modern .current_page_item > a,
.footer-nav-modern .current-menu-ancestor > a {
    color: #D7FF00;
}

.footer-nav-modern .current-menu-item > a .link-arrow,
.footer-nav-modern .current_page_item > a .link-arrow,
.footer-nav-modern .current-menu-ancestor > a .link-arrow {
    opacity: 0.7 !important;
    padding-left: 10px;
}

/* Sub-menu items (if used) */
.footer-nav-modern ul ul,
.footer-nav-modern .sub-menu {
    padding-left: 20px !important;
    margin-top: 8px;
    list-style: none !important;
}

.footer-nav-modern ul ul a,
.footer-nav-modern .sub-menu a {
    font-size: 14px;
}

/* Focus state for accessibility */
.footer-nav-modern a:focus {
    outline: 2px solid #D7FF00;
    outline-offset: 4px;
    border-radius: 4px;
}

/* Mobile responsiveness for footer menu */
@media (max-width: 768px) {
    .footer-nav-modern ul a,
    .footer-nav-modern .footer-menu-list a,
    .footer-nav-modern .footer-categories-list a {
        font-size: 14px;
    }
    
    .footer-nav-modern ul a .link-arrow,
    .footer-nav-modern .footer-menu-list a .link-arrow,
    .footer-nav-modern .footer-categories-list a .link-arrow {
        font-size: 16px;
    }
}


/* =====================================================
   BACK TO TOP BUTTON - VERTICAL SCROLL BAR DESIGN
===================================================== */

.back-to-top-btn {
    position: fixed;
    right: 0;
    bottom: 15px;
    width: 50px;
    height: 150px;
    background: var(--lime);
    border: none;
    cursor: pointer;
    z-index: 9999;
    
    /* Hidden by default - slides from right with fade */
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    
    /* Smooth transitions for entry animation */
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Remove default button styles */
    outline: none;
    padding: 0;
    
    /* Flex for vertical layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    
    /* Shadow */
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.3);
}

/* Show button when visible - smooth slide in from right */
.back-to-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-15px);
}

/* Arrow icon */
.arrow-icon {
    width: 22px;
    height: 22px;
    color: var(--dark);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* SCROLL text - vertical, rotated 180deg for correct reading */
.scroll-text {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--dark);
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(180deg);
    transition: all 0.4s ease;
}

/* Decorative line */
.scroll-line {
    width: 2px;
    height: 25px;
    background: var(--dark);
    opacity: 0.6;
    transition: all 0.4s ease;
}

/* HOVER EFFECTS */
.back-to-top-btn:hover {
    background: var(--dark);
    box-shadow: -8px 0 35px rgba(215, 255, 0, 0.4);
}

.back-to-top-btn:hover .arrow-icon {
    color: var(--lime);
    transform: translateY(-2px);
    filter: drop-shadow(0 0 10px rgba(215, 255, 0, 0.8));
}

.back-to-top-btn:hover .scroll-text {
    color: var(--lime);
    letter-spacing: 1.5px;
}

.back-to-top-btn:hover .scroll-line {
    background: var(--lime);
    opacity: 1;
    height: 28px;
    box-shadow: 0 0 10px rgba(215, 255, 0, 0.6);
}

/* Active/Click state */
.back-to-top-btn:active {
    transform: translateX(-15px) scale(0.98);
}

/* Responsive adjustments - TABLET */
@media (max-width: 768px) {
    .back-to-top-btn {
        width: 45px;
        height: 140px;
        gap: 10px;
        bottom: 15px;
    }
    
    .back-to-top-btn.visible {
        transform: translateX(-15px);
    }
    
    .arrow-icon {
        width: 20px;
        height: 20px;
    }
    
    .scroll-text {
        font-size: 11px;
        letter-spacing: 1px;
    }
    
    .scroll-line {
        height: 22px;
    }
    
    .back-to-top-btn:hover .scroll-line {
        height: 26px;
    }
}

/* Responsive adjustments - MOBILE */
@media (max-width: 480px) {
    .back-to-top-btn {
        width: 40px;
        height: 120px;
        gap: 8px;
        bottom: 10px;
    }
    
    .back-to-top-btn.visible {
        transform: translateX(-10px);
    }
    
    .arrow-icon {
        width: 18px;
        height: 18px;
    }
    
    .scroll-text {
        font-size: 10px;
        letter-spacing: 0.5px;
    }
    
    .scroll-line {
        height: 20px;
    }
    
    .back-to-top-btn:hover .scroll-line {
        height: 24px;
    }
}

/* Landscape mobile - shorter button */
@media (max-height: 600px) and (orientation: landscape) {
    .back-to-top-btn {
        height: 100px;
        gap: 6px;
    }
    
    .scroll-text {
        font-size: 9px;
    }
    
    .scroll-line {
        height: 18px;
    }
}

/* Focus state for accessibility */
.back-to-top-btn:focus {
    outline: 3px solid var(--dark);
    outline-offset: -3px;
}

.back-to-top-btn:focus-visible {
    outline: 3px solid var(--dark);
    outline-offset: -3px;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .back-to-top-btn {
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    .arrow-icon,
    .scroll-text,
    .scroll-line {
        transition: color 0.2s ease, background 0.2s ease;
    }
    
    .back-to-top-btn:hover .arrow-icon {
        transform: none;
    }
    
    .back-to-top-btn.visible {
        transform: translateX(-15px);
    }
    
    .back-to-top-btn:active {
        transform: translateX(-15px);
    }
}


/* =========================================
   LIGHTBOX MODAL STYLES
   Fixed positioning overlay for project images
========================================== */

.lightbox-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(17, 17, 17, 0.95);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    overflow: hidden;
    padding: 20px;
}

.lightbox-modal.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lightboxZoomIn 0.3s ease;
}

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

.lightbox-content img {
    max-width: 100%;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10000;
    backdrop-filter: blur(10px);
}

.lightbox-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.lightbox-close svg {
    width: 24px;
    height: 24px;
    color: #ffffff;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .lightbox-modal {
        padding: 10px;
    }
    
    .lightbox-content {
        max-width: 95vw;
        max-height: 85vh;
    }
    
    .lightbox-content img {
        max-height: 85vh;
    }
    
    .lightbox-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
    }
    
    .lightbox-close svg {
        width: 20px;
        height: 20px;
    }
}

/* Prevent body scroll when lightbox is open */
body.lightbox-open {
    overflow: hidden;
}

/* Loading state */
.lightbox-content img {
    background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 100%);
    background-size: 200% 100%;
    animation: lightboxLoading 1.5s ease-in-out infinite;
}

@keyframes lightboxLoading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Remove loading animation once image is loaded */
.lightbox-content img.loaded {
    animation: none;
    background: none;
}


/* ============================================
   PROJECTS PAGE - LOADING & EMPTY STATES
   ============================================ */

/* Loading State */
.projects-loading {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    gap: 24px;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(17, 17, 17, 0.1);
    border-top-color: var(--dark);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.projects-loading p {
    font-size: 16px;
    color: var(--gray);
    font-weight: 500;
}

/* Empty State */
.projects-empty,
.videos-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.projects-empty svg,
.videos-empty svg {
    color: rgba(17, 17, 17, 0.2);
    margin-bottom: 24px;
}

.projects-empty h3,
.videos-empty h3 {
    font-size: 24px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 12px;
}

.projects-empty p,
.videos-empty p {
    font-size: 16px;
    color: var(--gray);
    max-width: 400px;
}

/* Error State */
.projects-error {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.projects-error svg {
    color: #e74c3c;
    margin-bottom: 24px;
}

.projects-error p {
    font-size: 16px;
    color: var(--gray);
    max-width: 400px;
}


/* ============================================
   INFINITE SCROLL INDICATOR
   ============================================ */

.infinite-scroll-indicator {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
}

.scroll-loading-text {
    font-size: 14px;
    color: var(--gray);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.infinite-scroll-indicator .loading-spinner {
    width: 32px;
    height: 32px;
    border: 2px solid rgba(17, 17, 17, 0.1);
    border-top-color: var(--dark);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}


/* ============================================
   VIDEO MODAL STYLES
   Modal for displaying project videos
   ============================================ */

.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(17, 17, 17, 0.95);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    overflow: hidden;
    padding: 20px;
}

.video-modal.active {
    opacity: 1;
    visibility: visible;
}

.video-modal-content {
    position: relative;
    width: 100%;
    max-width: 1200px;
    animation: videoModalZoomIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes videoModalZoomIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.video-modal-title {
    font-size: 24px;
    font-weight: 600;
    color: white;
    margin-bottom: 20px;
    text-align: center;
    letter-spacing: -0.02em;
}

.video-modal-player {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.video-modal-player iframe,
.video-modal-player video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.video-modal-player video {
    object-fit: contain;
}

.video-modal-close {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10000;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.video-modal-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.video-modal-close svg {
    width: 24px;
    height: 24px;
    color: #ffffff;
}

/* Video Fallback */
.video-fallback {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 40px;
    color: white;
}

.video-fallback p {
    margin-bottom: 24px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
}

/* Prevent body scroll when video modal is open */
body.video-modal-open {
    overflow: hidden;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .video-modal {
        padding: 10px;
    }
    
    .video-modal-content {
        max-width: 100%;
    }
    
    .video-modal-title {
        font-size: 18px;
        margin-bottom: 16px;
    }
    
    .video-modal-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
    }
    
    .video-modal-close svg {
        width: 20px;
        height: 20px;
    }
}


/* ============================================
   BROCHURE REQUEST MODAL STYLES
   Responsive modal popup with secure animations
   ============================================ */

/* Modal Overlay */
.brochure-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    /* Security: Prevent content escape */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.brochure-modal.hidden {
    display: none;
}

.brochure-modal.brochure-modal-active {
    opacity: 1;
}

/* Modal Backdrop */
.brochure-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1;
}

/* Modal Container */
.brochure-modal-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 900px; /* Increased from 600px to 900px */
    margin: auto;
}

/* Modal Content */
.brochure-modal-content {
    background: #ffffff;
    border-radius: 1.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    position: relative;
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Security: Ensure proper stacking */
    z-index: 3;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.brochure-modal-active .brochure-modal-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Close Button */
.brochure-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
    color: #6b7280;
}

.brochure-modal-close:hover {
    background: #e5e7eb;
    color: #1a1a1a;
    transform: rotate(90deg);
}

.brochure-modal-close:focus {
    outline: 2px solid #c9e265;
    outline-offset: 2px;
}

/* Modal Header */
.brochure-modal-header {
    padding: 2rem 2rem 1.5rem; /* Reduced top padding, removed icon */
    text-align: center;
    border-bottom: 1px solid #f3f4f6;
}

/* Modal Body */
.brochure-modal-body {
    padding: 2rem;
    overflow-y: auto;
    flex: 1;
    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #c9e265 #f3f4f6;
}

.brochure-modal-body::-webkit-scrollbar {
    width: 6px;
}

.brochure-modal-body::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 3px;
}

.brochure-modal-body::-webkit-scrollbar-thumb {
    background: #c9e265;
    border-radius: 3px;
}

.brochure-modal-body::-webkit-scrollbar-thumb:hover {
    background: #b8d155;
}

/* Modal Footer */
.brochure-modal-footer {
    padding: 1rem 2rem 1.5rem;
    text-align: center;
    background: #f9fafb;
    border-top: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Modal Form Wrapper */
.brochure-modal-form {
    width: 100%;
    max-width: none;
}

.brochure-modal-form .sbr-wrapper {
    max-width: none;
}

/* Modal Specific Form Adjustments */
.brochure-modal-body .sbr-message {
    margin-bottom: 1rem;
}

/* 2-column grid layout for form fields */
.brochure-modal-body .sbr-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

/* Make submit button and message full width */
.brochure-modal-body .sbr-form p:last-of-type,
.brochure-modal-body .sbr-form > div[style*="position:absolute"] {
    grid-column: 1 / -1;
}

.brochure-modal-body .sbr-form p {
    margin-bottom: 0;
}

.brochure-modal-body .sbr-form label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

.brochure-modal-body .sbr-form input {
    font-size: 0.9375rem;
    width: 100%;
}

.brochure-modal-body .sbr-form button[type="submit"] {
    font-size: 1rem;
    padding: 1rem 2rem;
    width: auto;
    min-width: 200px;
}

/* Pending request message styles */
.brochure-request-pending {
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 0.75rem;
    padding: 1.5rem;
    text-align: center;
}

.brochure-request-pending p:last-child {
    margin-top: 0.75rem;
    margin-bottom: 0;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    /* Stack form fields on tablets and below */
    .brochure-modal-body .sbr-form {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .brochure-modal-container {
        max-width: 600px;
    }
}

@media (max-width: 640px) {
    .brochure-modal {
        padding: 0.5rem;
        align-items: flex-start;
    }
    
    .brochure-modal-container {
        margin-top: 1rem;
        margin-bottom: 1rem;
        max-width: 100%;
    }
    
    .brochure-modal-content {
        border-radius: 1rem;
        max-height: 95vh;
    }
    
    .brochure-modal-header {
        padding: 2rem 1.5rem 1rem;
    }
    
    .brochure-modal-header h2 {
        font-size: 1.5rem;
    }
    
    .brochure-modal-header p {
        font-size: 0.875rem;
    }
    
    .brochure-modal-body {
        padding: 1.5rem;
    }
    
    .brochure-modal-footer {
        padding: 0.75rem 1.5rem 1rem;
        font-size: 0.75rem;
    }
    
    .brochure-modal-close {
        width: 2rem;
        height: 2rem;
        top: 0.75rem;
        right: 0.75rem;
    }
}

@media (max-width: 380px) {
    .brochure-modal-header h2 {
        font-size: 1.25rem;
    }
}

/* Animation for modal entrance */
@keyframes modalSlideIn {
    from {
        transform: scale(0.8) translateY(40px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden;
}

/* ============================================
   LEGACY FORM STYLES (Keep for compatibility)
   ============================================ */

/* Brochure Request Section Container */
.brochure-request-section {
    padding: 2rem;
    background: #f9fafb;
    border-radius: 1rem;
    margin: 2rem 0;
    /* Security: Prevent content overflow */
    overflow: hidden;
    position: relative;
}

/* Form Wrapper */
.sbr-wrapper {
    max-width: 500px;
    width: 100%;
    /* Security: Ensure proper stacking context */
    position: relative;
    z-index: 1;
}

/* Form Messages */
.sbr-message {
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.sbr-success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #10b981;
}

.sbr-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #ef4444;
}

/* Form Elements */
.sbr-form {
    width: 100%;
}

.sbr-form p {
    margin-bottom: 1.25rem;
}

.sbr-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #1a1a1a;
    font-size: 0.95rem;
}

.sbr-form input[type="text"],
.sbr-form input[type="email"] {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-family: 'Manrope', sans-serif;
    transition: all 0.2s ease;
    background: #ffffff;
}

.sbr-form input[type="text"]:focus,
.sbr-form input[type="email"]:focus {
    outline: none;
    border-color: #c9e265;
    box-shadow: 0 0 0 3px rgba(201, 226, 101, 0.1);
}

.sbr-form input[type="text"]:hover,
.sbr-form input[type="email"]:hover {
    border-color: #d1d5db;
}

/* Submit Button */
.sbr-form button[type="submit"] {
    width: 100%;
    background: #1a1a1a;
    color: #ffffff;
    padding: 1rem 1.5rem;
    border: none;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Manrope', sans-serif;
    margin-top: 0.5rem;
    /* Security: Prevent click-jacking */
    position: relative;
    z-index: 1;
}

.sbr-form button[type="submit"]:hover {
    background: #c9e265;
    color: #1a1a1a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sbr-form button[type="submit"]:active {
    transform: translateY(0);
}

.sbr-form button[type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Approved User Download Section */
.brochure-download-approved {
    padding: 1.5rem;
    background: #ffffff;
    border: 2px solid #10b981;
    border-radius: 0.75rem;
}

.brochure-download-approved p {
    display: flex;
    align-items: center;
}

/* Responsive Design */
@media (max-width: 640px) {
    .brochure-request-section {
        padding: 1.5rem;
        border-radius: 0.75rem;
    }
    
    .sbr-form input[type="text"],
    .sbr-form input[type="email"] {
        padding: 0.75rem 0.875rem;
        font-size: 0.95rem;
    }
    
    .sbr-form button[type="submit"] {
        padding: 0.875rem 1.25rem;
        font-size: 0.95rem;
    }
}

/* Animation for form appearance */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sbr-wrapper {
    animation: fadeInUp 0.4s ease-out;
}

/* Loading State (optional enhancement) */
.sbr-form.loading button[type="submit"] {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

.sbr-form.loading button[type="submit"]:after {
    content: '...';
    animation: loading 1s infinite;
}

@keyframes loading {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}