/* =======================================
   ANIMATED SECTION TEXT CONTAINER
======================================= */
.text-container-s {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    gap: 20px;
    z-index: 10;
}

.shortcode-ph {
    font-family: var(--font-heading-tech2, 'Rajdhani', sans-serif);
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    text-transform: uppercase;
    color: var(--ast-global-color-0, #9C0002);
    margin-bottom: 5px;
}

.shortcode-pt {
    font-family: 'Noto Serif', serif;
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    color: var(--color-black, #333);
    line-height: 1.6;
    text-align: justify;
}

@media (max-width: 1024px) {
    .text-container-s {
        width: 100%;
        padding: 4vw 0;
    }
}

@media (max-width: 767px) {
    .text-container-s {
        align-items: center;
        text-align: center;
    }

    .shortcode-ph,
    .shortcode-pt {
        text-align: center;
    }
}

/* =======================================
   CUSTOM BUTTON (.esp-btn)
======================================= */
a.esp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    background-color: var(--ast-global-color-0, #9C0002);
    color: #ffffff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 1;
    width: fit-content;
}

a.esp-btn i {
    margin-left: 12px;
    font-size: 14px;
    z-index: 2;
    position: relative;
    transition: transform 0.3s ease;
}

a.esp-btn span {
    z-index: 2;
    position: relative;
    text-decoration: none !important;
    border-bottom: none !important;
}

a.esp-btn::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background-color: var(--ast-global-color-1, #D00000);
    transition: height 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    z-index: 0;
}

a.esp-btn:hover,
a.esp-btn:focus {
    text-decoration: none !important;
    color: #ffffff;
}

/* =======================================
   HOME HERO VIDEO SECTION
======================================= */
/* ---------- Spiral Grid ---------- */
.spiral-grid {
    display: grid;
    position: absolute;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2%;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    z-index: 20;
    box-sizing: border-box;
}

/* ---------- Video Container ---------- */
.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 0;
    padding: 0;
    margin: 0;
}

.video-container * {
    pointer-events: none !important;
}

/* ---------- Video Background Gradient ---------- */
.video-bg-gradient {
    z-index: -1;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(90deg,
            #450000,
            #600000,
            #8B0000,
            #A52A2A,
            #8B0000,
            #600000,
            #450000);
    background-size: 400% 400%;
    animation: strongPulse 5s ease-in-out infinite;
    position: absolute;
    top: 0;
    left: 0;
}

/* Animation keyframes */
@keyframes strongPulse {

    0%,
    100% {
        background-position: 0% 50%;
        filter: brightness(1.2);
    }

    50% {
        background-position: 100% 50%;
        filter: brightness(1);
    }
}

/* ---------- Video Overlay ---------- */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: radial-gradient(circle at 25% 50%,
            rgba(0, 0, 0, 0.5) 5%,
            rgba(90, 50, 50, 0.2) 95%);
    box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.7);
    mix-blend-mode: multiply;
    pointer-events: none !important;
}

/* ---------- Video Element ---------- */
.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover;
}

/* ---------- Animation Stop Class ---------- */
.video-loaded .video-bg-gradient {
    animation: none;
    background: #450000;
    filter: brightness(1);
}

/* ---------- Responsive Design ---------- */
@media screen and (max-width: 768px) {
    .video-bg-gradient {
        background-size: 300% 300%;
        animation-duration: 4s;
    }

    .video-overlay {
        background: radial-gradient(circle at 25% 50%,
                rgba(0, 0, 0, 0.7) 10%,
                rgba(180, 100, 100, 0.3) 100%);
        box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.8);
        pointer-events: none !important;
    }
}

@media screen and (max-width: 480px) {
    .video-bg-gradient {
        background-size: 200% 200%;
        animation-duration: 3s;
    }

    .video-overlay {
        background: radial-gradient(circle at 25% 50%,
                rgba(0, 0, 0, 0.8) 10%,
                rgba(180, 100, 100, 0.2) 100%);
        box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.9);
    }

    .video-loaded .video-bg-gradient {
        animation: none;
        background: #450000;
        filter: brightness(1);
    }
}

a.esp-btn:hover::before {
    height: 100%;
}

a.esp-btn:hover i {
    transform: translateX(4px);
}

/* =======================================
   RESPONSIVE GRID LAYOUT (Icon Buttons)
======================================= */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 0.5vw;
    box-sizing: border-box;
    align-items: stretch;
    width: 100%;
    z-index: 10;
}

@media (max-width: 1024px) {
    .responsive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .responsive-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(8px, 2vw, 10px);
    }
}

a.custom-icon-button {
    display: inline-flex !important;
    box-sizing: border-box;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    padding: clamp(20px, 3vw, 40px);
    background-color: var(--icon-btn-bg);
    border-width: var(--icon-btn-border-width);
    border-style: solid;
    border-color: var(--icon-btn-border);
    border-radius: 0;
    cursor: pointer;
    text-align: left !important;
    font-family: var(--font-heading-tech2, 'Rajdhani', sans-serif);
    text-decoration: none !important;
    border-bottom: none !important;
    color: inherit;
    position: relative;
    overflow: hidden;
    transition: opacity 0.8s ease,
        transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.3s ease,
        box-shadow 0.3s ease;
    z-index: 1;
}

a.custom-icon-button:hover,
a.custom-icon-button:focus {
    text-decoration: none !important;
    border-bottom: none !important;
}

a.custom-icon-button svg,
a.custom-icon-button span {
    position: relative;
    z-index: 2;
}

a.custom-icon-button span {
    word-break: break-word;
    white-space: normal;
    line-height: 1.3;
    text-align: center;
}

a.custom-icon-button svg {
    height: auto;
    fill: var(--icon-btn-icon-color);
    margin-bottom: 0.5vh;
    transition: fill 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

a.custom-icon-button span {
    font-weight: 600;
    color: var(--icon-btn-text-color);
    text-transform: uppercase;
    transition: color 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Desktop Hover Animations */
@media (min-width: 1025px) {
    .responsive-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    a.custom-icon-button:hover {
        border-color: #9C0002;
        transform: translateY(-4px);
        box-shadow: 0 15px 30px rgba(156, 0, 2, 0.15);
    }

    a.custom-icon-button:hover::before {
        height: 100%;
    }

    a.custom-icon-button {
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        padding: clamp(15px, 1.5vw, 25px) !important;
    }

    a.custom-icon-button svg {
        width: clamp(35px, 3.5vw, 50px) !important;
        flex-shrink: 0;
        margin: 0 !important;
    }

    a.custom-icon-button span {
        font-size: clamp(12px, 0.9vw, 15px) !important;
        margin: 0 !important;
        text-align: center !important;
    }

    a.custom-icon-button:hover svg {
        transform: translateY(-2px);
    }

    a.custom-icon-button:hover span {
        transform: translateY(2px);
    }
}

/* Mobile Styles */
@media (max-width: 767px) {
    .responsive-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-rows: 1fr !important;
        height: 85svh !important;
        width: 100% !important;
        gap: clamp(10px, 2vw, 15px) !important;
    }

    a.custom-icon-button {
        aspect-ratio: auto !important;
        height: 100% !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding: clamp(15px, 4vw, 25px) !important;
        gap: 15px !important;
    }

    a.custom-icon-button svg {
        width: 40% !important;
        margin: 0 auto !important;
    }

    a.custom-icon-button span {
        font-size: clamp(12px, 3.5vw, 16px) !important;
        width: 100% !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        text-align: center !important;

    }

    /* On mobile, the image container becomes full-width (handled by max-width:1024 rule below),
       so this override adds natural spacing around it */
    .esp-inner-row .main-container-s {
        margin: 20px auto 40px auto !important;
    }
}

/* Close Mobile Media Query */

/* =========================================
   GENERAL ARCHITECTURE FOR ANIMATED SECTIONS (ALL DEVICES)
   ========================================= */
.main-container-s {
    /* New main-container system uses --offset (not legacy --Offcet). */
    --offset: clamp(15px, 2vw, 25px);
    --size: calc(100% - var(--offset));
    /* NOTE: position/aspect-ratio/display are re-declared in .esp-inner-cell.main-container-s */
    /* but kept here as fallback for standalone usage outside .esp-inner-row */
    position: relative;
    aspect-ratio: 1 / 1;
    display: block;
}

/* 1. Fixed Square Size for all containers */
.main-container-s .layer-back-s,
.main-container-s .layer-middle-s,
.main-container-s .animated-border-s {
    position: absolute !important;
    width: var(--size) !important;
    height: var(--size) !important;
    margin: 0 !important;
    transform: none !important;
    /* Remove any previous manual transforms */
}

.main-container-s .layer-back-s {
    z-index: 1 !important;
    background-color: var(--esp-bg-color, rgba(156, 0, 2, 0.06)) !important;
    /* Start invisible — revealed by scroll-animate */
    opacity: 0;
    transition: opacity 0.8s ease 0.3s;
}

/* Layer and image revealed on scroll */
.main-container-s.scroll-animate .layer-back-s {
    opacity: 1 !important;
}

.main-container-s .layer-middle-s {
    object-fit: cover !important;
    z-index: 2 !important;
    opacity: 0;
    transition: opacity 0.9s ease 0.6s;
}

.main-container-s.scroll-animate .layer-middle-s {
    opacity: 1 !important;
}

/* 2. Position the Image, Background, and Borders based on Modifier Classes */

/* Core setup for the two animated lines */
.main-container-s .animated-border-s::before,
.main-container-s .animated-border-s::after {
    content: '' !important;
    position: absolute !important;
    /* Thicker, semi-transparent border */
    background-color: var(--esp-border-color, rgba(156, 0, 2, 0.75)) !important;
    /* Start at size 0 — animation only fires after scroll-animate is added */
    width: 0;
    height: 0;
    z-index: 3 !important;
}

/* Modifier: Image at Top-Left (Default for normal shortcodes) */
/* Use class: .esp-anim-img-tl */
.main-container-s.esp-anim-img-tl .layer-middle-s {
    top: 0 !important;
    left: 0 !important;
    bottom: auto !important;
    right: auto !important;
}

.main-container-s.esp-anim-img-tl .layer-back-s,
.main-container-s.esp-anim-img-tl .animated-border-s {
    bottom: 0 !important;
    right: 0 !important;
    top: auto !important;
    left: auto !important;
}

/* Modifier: Image at Bottom-Left */
/* Use class: .esp-anim-img-bl */
.main-container-s.esp-anim-img-bl .layer-middle-s {
    bottom: 0 !important;
    left: 0 !important;
    top: auto !important;
    right: auto !important;
}

.main-container-s.esp-anim-img-bl .layer-back-s,
.main-container-s.esp-anim-img-bl .animated-border-s {
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
}

/* Modifier: Image at Top-Right */
/* Use class: .esp-anim-img-tr */
.main-container-s.esp-anim-img-tr .layer-middle-s {
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
}

.main-container-s.esp-anim-img-tr .layer-back-s,
.main-container-s.esp-anim-img-tr .animated-border-s {
    bottom: 0 !important;
    left: 0 !important;
    top: auto !important;
    right: auto !important;
}

/* Modifier: Image at Bottom-Right */
/* Use class: .esp-anim-img-br */
.main-container-s.esp-anim-img-br .layer-middle-s {
    bottom: 0 !important;
    right: 0 !important;
    top: auto !important;
    left: auto !important;
}

.main-container-s.esp-anim-img-br .layer-back-s,
.main-container-s.esp-anim-img-br .animated-border-s {
    top: 0 !important;
    left: 0 !important;
    bottom: auto !important;
    right: auto !important;
}

/* =========================================
       BORDER POSITION MODIFIERS
       ========================================= */

/* esp-border-pos-br: Bottom & Right (Top-Right vertical → Bottom horizontal going left) */
/* Triggered ONLY when scroll-animate class is present */
.main-container-s.esp-border-pos-br.scroll-animate .animated-border-s::before {
    top: 0 !important;
    right: 0 !important;
    width: var(--esp-border-width, 8px) !important;
    animation: drawVertical var(--esp-anim-time, 0.9s) ease-in-out forwards !important;
    animation-delay: 0.4s !important;
}

.main-container-s.esp-border-pos-br.scroll-animate .animated-border-s::after {
    bottom: 0 !important;
    right: 0 !important;
    height: var(--esp-border-width, 8px) !important;
    animation: drawHorizontal var(--esp-anim-time, 0.9s) ease-in-out forwards !important;
    animation-delay: calc(var(--esp-anim-time, 0.9s) + 0.4s) !important;
}

/* esp-border-pos-tr: Top & Right (Top-Left horizontal → Right vertical going down) */
.main-container-s.esp-border-pos-tr.scroll-animate .animated-border-s::before {
    top: 0 !important;
    left: 0 !important;
    height: var(--esp-border-width, 8px) !important;
    animation: drawHorizontal var(--esp-anim-time, 0.9s) ease-in-out forwards !important;
    animation-delay: 0.4s !important;
}

.main-container-s.esp-border-pos-tr.scroll-animate .animated-border-s::after {
    top: 0 !important;
    right: 0 !important;
    width: var(--esp-border-width, 8px) !important;
    animation: drawVertical var(--esp-anim-time, 0.9s) ease-in-out forwards !important;
    animation-delay: calc(var(--esp-anim-time, 0.9s) + 0.4s) !important;
}

/* esp-border-pos-tl: Top & Left (Top-Right horizontal → Left vertical going down) */
.main-container-s.esp-border-pos-tl.scroll-animate .animated-border-s::before {
    top: 0 !important;
    right: 0 !important;
    height: var(--esp-border-width, 8px) !important;
    animation: drawHorizontalReverse var(--esp-anim-time, 0.9s) ease-in-out forwards !important;
    animation-delay: 0.4s !important;
}

.main-container-s.esp-border-pos-tl.scroll-animate .animated-border-s::after {
    top: 0 !important;
    left: 0 !important;
    width: var(--esp-border-width, 8px) !important;
    animation: drawVertical var(--esp-anim-time, 0.9s) ease-in-out forwards !important;
    animation-delay: calc(var(--esp-anim-time, 0.9s) + 0.4s) !important;
}

/* esp-border-pos-bl: Bottom & Left (Bottom-Right horizontal → Left vertical going up) */
.main-container-s.esp-border-pos-bl.scroll-animate .animated-border-s::before {
    bottom: 0 !important;
    right: 0 !important;
    height: var(--esp-border-width, 8px) !important;
    animation: drawHorizontalReverse var(--esp-anim-time, 0.9s) ease-in-out forwards !important;
    animation-delay: 0.4s !important;
}

.main-container-s.esp-border-pos-bl.scroll-animate .animated-border-s::after {
    bottom: 0 !important;
    left: 0 !important;
    width: var(--esp-border-width, 8px) !important;
    animation: drawVerticalReverse var(--esp-anim-time, 0.9s) ease-in-out forwards !important;
    animation-delay: calc(var(--esp-anim-time, 0.9s) + 0.4s) !important;
}

/* Keyframes */
@keyframes drawHorizontal {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes drawHorizontalReverse {
    from {
        width: 0;
        right: 0;
    }

    to {
        width: 100%;
        right: 0;
    }
}

@keyframes drawVertical {
    from {
        height: 0;
    }

    to {
        height: 100%;
    }
}

@keyframes drawVerticalReverse {
    from {
        height: 0;
        bottom: 0;
    }

    to {
        height: 100%;
        bottom: 0;
    }
}

/* Tablet Styles */
@media (min-width: 768px) and (max-width: 1024px) {
    .responsive-grid {
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
    }

    .custom-icon-button svg {
        width: 18%;
    }

    .custom-icon-button span {
        font-size: 1.2vw;
    }
}



/* =======================================
   MINIMAL BUTTON (.minimal-btn)
======================================= */
a.minimal-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: clamp(6px, 0.5vw, 10px) clamp(12px, 1.5vw, 18px);
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    background: transparent;
    color: white;
    font-family: 'Roboto Slab', serif;
    font-style: italic;
    font-size: clamp(12px, 1.2vw, 18px);
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 1px;
    cursor: pointer;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

a.minimal-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    padding-left: clamp(20px, 2.5vw, 28px);
}

a.minimal-btn+a.minimal-btn {
    border-top: none;
}

/*The above content does NOT show the entire file contents. If you need to view any lines of the file which were not shown to complete your task,
call this tool again to view those lines.*/

/* ---------- Buttons Container ---------- */
.But-Con {
    width: clamp(470px, 35vw, 800px);
}

.cb .uc_button_wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0px;
}

.cb .uc_button_wrapper span {
    font-family: 'Rajdhani', sans-serif;
    text-transform: uppercase !important;
    font-weight: 700;
    text-decoration: none !important;
    font-size: clamp(16px, 1.8vw, 22px);
    letter-spacing: 1.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cb .uc_button_wrapper i {
    font-size: clamp(10px, 3vw, 14px);
    margin: 3px 10px 5px 0px;
    transition: all 0.3s ease;
}

.cb,
.ucaddon_creative_buttons,
.uc_button_wrapper {
    pointer-events: auto !important;
    position: relative !important;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (max-width: 767px) {
    .But-Con {
        display: flex;
        justify-content: center;
        width: clamp(200px, 100%, 400px);
        padding: 5%;
    }

    .cb .uc_button_wrapper {
        gap: 8px;
        margin: 0;
        font-family: 'Rajdhani', sans-serif;
        font-weight: 550;
        font-size: 14px;
        padding: 5px;
    }

    .cb .uc_button_wrapper i {
        font-size: 12px;
        margin: 2px 10px 3px 0px;
        transition: all 0.3s ease;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .But-Con {
        max-width: clamp(360px, 15vw, 380px);
    }

    .cb .uc_button_wrapper {
        gap: clamp(4px, 1vw, 8px);
        font-weight: 550;
        font-size: clamp(10px, 1.5vw, 12px);
        margin: 6px 0 6px 2px;
    }

    .cb .uc_button_wrapper span {
        font-size: clamp(12px, 1vw, 16px);
    }

    .cb .uc_button_wrapper i {
        font-size: clamp(10px, 1vw, 16px);
        margin: 2px 10px 3px 0px;
    }
}

.hero-btn {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: white !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
    position: relative;
    overflow: hidden;
}

.hero-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: all 0.6s ease;
}

.hero-btn:hover::before {
    left: 100%;
}

.hero-btn:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #111 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    border-color: transparent !important;
}

.hero-btn:hover span {
    color: #111 !important;
}

/* ---------- Scroll Guide ---------- */
.scroll-guide {
    position: absolute;
    top: 0;
    pointer-events: none !important;
    margin-left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}

.scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 24px;
    opacity: 0.9;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.1));
}

.scroll-hint span {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-size: 16px;
    color: #fff;
    letter-spacing: 1px;
}

.arrow {
    width: 10px;
    height: 10px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transform: rotate(45deg);
    animation: bounce 1.6s ease-in-out infinite;
}

@keyframes bounce {

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

    50% {
        transform: translateY(6px) rotate(45deg);
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .scroll-hint {
        bottom: 30px;
        gap: 20px;
    }

    .scroll-hint span {
        font-size: 14px;
    }

    .arrow {
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 480px) {
    .scroll-hint {
        bottom: 25px;
        gap: 16px;
    }

    .scroll-hint span {
        font-size: 12px;
    }

    .arrow {
        width: 8px;
        height: 8px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .arrow {
        animation: none;
    }
}

/* ---------- Cover Pin Container ---------- */
.cover-pin-container {
    pointer-events: none !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
}

.cover-layer {
    position: absolute;
    top: 0;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background: #9C0002 !important;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(100vw);
    z-index: 2;
    transition: none;
    will-change: transform;
    contain: layout paint;
    overflow-x: hidden;
}

@media (min-width:768px) and (max-width:10234px) {
    .cover-layer {
        min-height: calc(100vh + 150px);
        z-index: 2;
    }
}

@media (max-width:767px) {
    .cover-layer {
        min-height: calc(100vh + 150px);
        z-index: 3;
    }
}

/* ---------- Spiral Grid ---------- */
.spiral-grid {
    display: grid;
    position: absolute;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    z-index: 20;
    box-sizing: border-box;
}

.spiral-grid .cell {
    aspect-ratio: 1;
    background-size: cover;
    background-position: left;
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background-repeat: no-repeat;
    overflow: hidden;
    transform: scale(0.8);
    filter: brightness(0.9);

    /* بهینه‌سازی کیفیت تصویر - تنظیمات اصلی */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
    transform-style: preserve-3d;

    /* جلوگیری از تار شدن */
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
}

.spiral-grid .cell.visible {
    opacity: 1;
    transform: scale(1);
}

/* Merged vertical cell - cells 4 and 7 combined */
.spiral-grid .merged-cell {
    grid-row: 2 / span 2;
    grid-column: 1;
    aspect-ratio: unset;
    height: 100%;
}

/* ================= DESKTOP STYLES (1025px and above) ================= */
@media (min-width: 1025px) {
    .spiral-grid {
        top: 46%;
        left: 75%;
        transform: translate(-50%, -50%);
        width: clamp(220px, 45vw, 600px);
        height: auto;
    }

    .spiral-grid .cell {
        /* بهبود کیفیت در دسکتاپ */
        image-rendering: auto;
        -webkit-font-smoothing: subpixel-antialiased;
    }
}

/* ================= RESPONSIVE DESIGN ================= */
@media (max-width: 767px) {
    .spiral-grid {
        width: 48vw;
        height: auto;
        margin: 0;
        transform: translate(-50%, -50%);
        top: 46%;
        left: 75%;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .spiral-grid {
        top: 46%;
        left: 75%;
        transform: translate(-50%, -50%);
        width: 45vw;
        height: auto;
    }
}

/* ================= QUALITY OPTIMIZATIONS ================= */
.spiral-grid.optimized-quality .cell {
    /* بهینه‌سازی نهایی برای کیفیت WebP */
    image-rendering: optimizeQuality;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    transform: translateZ(0);
}

/* رفع مشکل کیفیت تصاویر WebP با حفظ تنظیمات اصلی */
.spiral-grid .cell {
    /* حفظ تنظیمات کیفیت اصلی */
    will-change: transform;
    transform: translateZ(0);
}

/* ---------- Buttons Container ---------- */
.But-Con {
    width: clamp(470px, 35vw, 800px);
}

.cb .uc_button_wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0px;
}

.cb .uc_button_wrapper span {
    font-family: 'Rajdhani', sans-serif;
    text-transform: uppercase !important;
    font-weight: 700;
    text-decoration: none !important;
    font-size: clamp(14px, 1.5vw, 18px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cb .uc_button_wrapper i {
    font-size: clamp(10px, 3vw, 14px);
    margin: 3px 10px 5px 0px;
    transition: all 0.3s ease;
}

.cb,
.ucaddon_creative_buttons,
.uc_button_wrapper {
    pointer-events: auto !important;
    position: relative !important;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (max-width: 767px) {
    .But-Con {
        display: flex;
        justify-content: center;
        width: clamp(200px, 100%, 400px);
        padding: 5%;
    }

    .cb .uc_button_wrapper {
        gap: 8px;
        margin: 0;
        font-family: 'Rajdhani', sans-serif;
        font-weight: 550;
        font-size: 14px;
        padding: 5px;
    }

    .cb .uc_button_wrapper i {
        font-size: 12px;
        margin: 2px 10px 3px 0px;
        transition: all 0.3s ease;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .But-Con {
        max-width: clamp(360px, 15vw, 380px);
    }

    .cb .uc_button_wrapper {
        gap: clamp(4px, 1vw, 8px);
        font-weight: 550;
        font-size: clamp(10px, 1.5vw, 12px);
        margin: 6px 0 6px 2px;
    }

    .cb .uc_button_wrapper span {
        font-size: clamp(12px, 1vw, 16px);
    }

    .cb .uc_button_wrapper i {
        font-size: clamp(10px, 1vw, 16px);
        margin: 2px 10px 3px 0px;
    }
}

.custom-icon-button {
    --bg-color: rgba(156, 0, 2, 0.04);
    --border-color: transparent;
    --border-width: 0px;
    --icon-color: #9C0002;
    --text-color: #111;

    display: inline-flex !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    aspect-ratio: 2 / 1 !important;
    background-color: var(--bg-color) !important;
    border-width: var(--border-width) !important;
    border-style: solid !important;
    border-color: var(--border-color) !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    text-align: center !important;
    font-family: var(--font-heading-tech2, 'Rajdhani', sans-serif) !important;
    text-decoration: none !important;
    color: inherit !important;
    position: relative !important;
    overflow: hidden !important;
    will-change: transform, border-color, box-shadow !important;
    transition: opacity 0.8s ease,
        transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.3s ease,
        box-shadow 0.3s ease !important;
    z-index: 1 !important;
}

.custom-icon-button svg,
.custom-icon-button span {
    position: relative !important;
    z-index: 2 !important;
    will-change: transform, fill, color !important;
}

.custom-icon-button svg {
    height: auto !important;
    fill: var(--icon-color) !important;
    margin-bottom: 0.5vh !important;
    transition: fill 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.custom-icon-button span {
    font-weight: 600 !important;
    color: var(--text-color) !important;
    text-transform: uppercase !important;
    text-align: center !important;
    transition: color 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* Desktop Hover Animations */
@media (min-width: 1025px) {
    .responsive-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .custom-icon-button:hover {
        border-color: #9C0002 !important;
        transform: translateY(-4px) !important;
        box-shadow: 0 15px 30px rgba(156, 0, 2, 0.15) !important;
    }

    .custom-icon-button svg {
        width: 20% !important;
    }

    .custom-icon-button span {
        font-size: 1vw !important;
    }

    .custom-icon-button:hover svg {
        transform: translateY(-2px) !important;
    }

    .custom-icon-button:hover span {
        transform: translateY(2px) !important;
    }
}

/* Mobile Styles */
@media (max-width: 767px) {
    .responsive-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .custom-icon-button {
        aspect-ratio: 4 / 1 !important;
        flex-direction: row !important;
        gap: 15px !important;
    }

    .custom-icon-button svg {
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 0 !important;
    }

    .custom-icon-button span {
        font-size: 16px !important;
    }
}

/* Tablet Styles */
@media (min-width: 768px) and (max-width: 1024px) {
    .responsive-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        width: 100% !important;
        gap: 15px !important;
    }

    .custom-icon-button svg {
        width: 25% !important;
    }

    .custom-icon-button span {
        font-size: 1.8vw !important;
    }
}



/* =========================================================
   RESPONSIVE OVERRIDES FOR ALL CUSTOM SECTIONS 
   ========================================================= */

.layer-middle-s,
.layer-middle-s3,
.layer-middle-s4,
.layer-middle-s5 {
    object-fit: cover !important;
    object-position: center !important;
}

/* Desktop: Side by side */
@media (min-width: 1025px) {
    .esp-inner-row {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }

    .esp-inner-row.esp-row-reverse {
        flex-direction: row-reverse !important;
    }

    /* Exception: Top Border shoots from outside the screen on desktop */
    .main-container-s.esp-border-offscreen.esp-border-pos-tr .animated-border-s::before,
    .main-container-s.esp-border-offscreen.esp-border-pos-tl .animated-border-s::before {
        animation: drawFromOutsideHorizontal var(--esp-anim-time, 0.5s) ease-in-out forwards !important;
    }

    /* Image on Right (Contact Us): Top border starts from LEFT screen edge, shoots RIGHT */
    .main-container-s.esp-border-offscreen.esp-border-pos-tr .animated-border-s::before {
        right: auto !important;
        left: -100vw !important;
    }

    /* Image on Left: Top border starts from RIGHT screen edge, shoots LEFT */
    .main-container-s.esp-border-offscreen.esp-border-pos-tl .animated-border-s::before {
        left: auto !important;
        right: -100vw !important;
    }

    @keyframes drawFromOutsideHorizontal {
        0% {
            width: 0;
        }

        100% {
            width: calc(100% + 100vw);
        }
    }
}

/* Mobile: Stack vertically and use 100% width */
@media (max-width: 767px) {
    .esp-inner-row {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 30px !important;
        margin-top: 30px !important;
    }

    /* Force all child containers to take 100% width on tablet/mobile */
    .esp-inner-row>div,
    .esp-inner-row>.main-container-s,
    .esp-inner-row>.text-container-s,
    .esp-inner-row>.responsive-grid,
    .esp-inner-row>.square-grid {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }

    .esp-inner-row .main-container-s {
        min-height: 40vh !important;
    }
}

/* =========================================================
   ELEMENTOR CONTAINER WRAPPER UTILITIES FOR ESP SHORTCODES
   ========================================================= */

/* 1. Universal Container (.esp-container-full) */
.esp-container-full {
    width: 100%;
    max-width: var(--site-max-width, 1400px);
    margin: 0 auto;
    overflow-x: clip;
    overflow-y: visible;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

/* When the container is explicitly set to "Full Width" in Elementor */
.esp-container-full.e-con-full {
    max-width: 100% !important;
}

/* Specific component overrides */
.esp-container-full:has(.hero-sticky-wrapper) {
    margin-top: -55px;
}

@media (max-width: 1024px) {
    .esp-container-full:has(.hero-sticky-wrapper) {
        margin-top: -94px;
    }
}

/* Internal Row class used by shortcodes instead of Elementor's e-con */

/*
 * Only the immediate .elementor-shortcode wrapper needs to be transparent.
 * Broader :has() selectors caused side-effects on filter/listing containers
 * that also contain .esp-inner-row deep inside their children.
 */
.elementor-shortcode:has(> .esp-inner-row) {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
}

.esp-inner-row {
    display: flex !important;
    justify-content: space-between;
    width: 100% !important;
    max-width: var(--site-max-width, 1400px) !important;
    /* Padding keeps content away from edges; margin: auto centers the row */
    padding: clamp(10px, 2vw, 25px) 40px !important;
    margin: 0 auto !important;
    gap: clamp(30px, 6vw, 100px) !important;
    box-sizing: border-box !important;
}

/* Base Internal Cell class for shortcodes */
.esp-inner-cell {
    box-sizing: border-box !important;
}

/* Image container: flex-item sizing on desktop */
.esp-inner-cell.main-container-s {
    --esp-anim-time: 0.9s;
    /* flex shorthand sets the basis; width/max-width should NOT contradict it */
    flex: 1 1 clamp(200px, 25vw, 380px) !important;
    max-width: clamp(200px, 25vw, 380px) !important;
    aspect-ratio: 1 / 1;
    /* Remove conflicting width:100% — flex-basis handles width in a flex row */
    position: relative !important;
    display: block !important;
    align-self: center;
}

.text-container-s .child-container,
.main-container-s .child-container {
    width: 100% !important;
}

/* Text container takes 55% on desktop */
.esp-inner-cell.text-container-s {
    flex: 1 1 65% !important;
    max-width: 65% !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .esp-inner-cell.text-container-s {
        flex: 1 1 50% !important;
        max-width: 50% !important;
    }
}

@media (max-width: 1300px) {
    .esp-inner-row {
        max-width: 95% !important;
    }
}

@media (max-width: 767px) {
    .esp-inner-row {
        max-width: 100% !important;
        padding: 0 15px !important;
        gap: 30px !important;
    }

    .esp-btn,
    .minimal-btn {
        width: 100% !important;
        display: flex !important;
        padding: clamp(15px, 4vw, 25px) !important;
        box-sizing: border-box !important;
    }



    .text-container-s .child-container {
        width: 100% !important;
    }
}

/* 2. Boxed Container (For standard width content) */
.esp-container-boxed {
    width: 100% !important;
    max-width: 1600px !important;
    padding: 0 20px !important;
    margin: 0 auto !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    box-sizing: border-box !important;
}

/* =========================================
   HEADER INNER CONTENT WIDTH FIX
   ========================================= */
#stickyheader .t-header-inner,
#stickyheader .b-header-inner {
    max-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

/* Remove default padding from the first and last child of the inner header so it perfectly aligns with the 20px edge */
#stickyheader .t-header-inner>.e-con:first-child,
#stickyheader .b-header-inner>.e-con:first-child,
#stickyheader .t-header-inner>.elementor-widget:first-child,
#stickyheader .b-header-inner>.elementor-widget:first-child {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

#stickyheader .t-header-inner>.e-con:last-child,
#stickyheader .b-header-inner>.e-con:last-child,
#stickyheader .t-header-inner>.elementor-widget:last-child,
#stickyheader .b-header-inner>.elementor-widget:last-child {
    padding-right: 0 !important;
    margin-right: 0 !important;
}

#stickyheader .logo-holder img,
#stickyheader .theme-site-logo img {
    width: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
}

/* =========================================
   STICKY HEADER EFFECTS (BLUR & SHADOW)
   ========================================= */

/* The main wrapper must always be transparent so inner elements can blur the page */
body #stickyheader,
body #stickyheader.sticky-header,
body #stickyheader.elementor-sticky--active,
body #stickyheader.header-hidden,
body #stickyheader.is-sticky,
body #stickyheader.ast-header-sticked {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* Default state: Both inner bars are solid white */
#stickyheader .site-header-top,
#stickyheader .site-header-bottom {
    background-color: #ffffff !important;
    transition: background-color 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease !important;
}

/* Sticky state: Make the bottom bar translucent and blurred */
#stickyheader.header-hidden .site-header-bottom,
#stickyheader.elementor-sticky--active .site-header-bottom,
#stickyheader.elementor-sticky--effects .site-header-bottom,
#stickyheader.ast-header-sticked .site-header-bottom,
#stickyheader.is-sticky .site-header-bottom,
#stickyheader.sticky-header.header-hidden .site-header-bottom,
#stickyheader.sticky-header.elementor-sticky--active .site-header-bottom,
#stickyheader.sticky-header.elementor-sticky--effects .site-header-bottom,
#stickyheader.sticky-header.is-sticky .site-header-bottom,
#stickyheader.sticky-header.ast-header-sticked .site-header-bottom,
#stickyheader.header-hidden .elementor-element.site-header-bottom {
    background: rgba(255, 255, 255, 0.6) !important;
    background-color: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1) !important;
}

/* =========================================
   MEGA MENU / HOVER OVERRIDE
   Force the header to expand and become solid white when hovered
   so the mega menu is legible and the top bar returns.
   ========================================= */
body #stickyheader:hover .site-header-top {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    max-height: 500px !important;
    transform: none !important;
}

body #stickyheader:hover .site-header-bottom {
    background: #ffffff !important;
    background-color: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Allow offscreen borders to escape the boxed container boundaries */
.esp-container-boxed:has(.esp-border-offscreen),
.elementor-section:has(.esp-border-offscreen),
.elementor-container:has(.esp-border-offscreen),
.e-con:has(.esp-border-offscreen),
.e-con-inner:has(.esp-border-offscreen) {
    overflow: visible !important;
    overflow-x: visible !important;
}

/* =========================================
   FOOTER SHORTCODE STYLES
   ========================================= */
.esp-footer-container {
    width: 100%;
    background-image: linear-gradient(180deg, var(--ast-global-color-0, #9C0002) 0%, #5E0002 100%) !important;
    color: #FFFFFF;
    padding-top: clamp(20px, 4vw, 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 99;
    text-align: left;
}

/* =========================================
   FOOTER NEW PREMIUM GRID LAYOUT
   ========================================= */
.footer-top-row {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto 40px auto;
    padding: 0 10px;
    display: flex;
    justify-content: center;
}

.footer-main-logo {
    max-width: 320px !important;
    width: 320px !important;
    height: auto !important;
}

@media (min-width: 768px) {
    .footer-top-row {
        justify-content: flex-start;
    }
}

.footer-main-grid {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 10px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .footer-main-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1025px) {
    .footer-main-grid {
        grid-template-columns: 0.8fr 2fr 2fr;
        gap: 50px;
    }

    .footer-top-row,
    .footer-main-grid,
    .footer-copyright-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 1024px) {
    .links-widget {
        display: none !important;
    }
}

.widget-title {
    color: #FFFFFF;
    font-family: 'Rajdhani', sans-serif;
    font-size: 22px;
    font-weight: 500;
    text-transform: capitalize;
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #FFFFFF;
    letter-spacing: 0.5px;
}

.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 6px;
}

.footer-list a {
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: capitalize;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 15px;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

.footer-list a i {
    font-size: 14px;
    width: 22px;
    text-align: center;
    margin-right: 8px;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
}

.footer-list a:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
}

.footer-list a:hover i {
    color: #FFFFFF;
}

.contact-widget {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.contact-widget p {
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 1.6;
    margin: 0 0 10px 0;
    text-align: left;
}

.contact-widget p.address-box {
    background: rgba(255, 255, 255, 0.06);
    border-left: 3px solid rgba(255, 255, 255, 0.5);
    padding: 12px 15px;
    border-radius: 0 6px 6px 0;
    margin-bottom: 15px;
}

.contact-widget p.email-links {
    margin-bottom: 25px;
}

.contact-widget p.email-links a {
    color: #FFFFFF;
    text-decoration: none;
    transition: color 0.3s;
}

.contact-widget p.email-links a:hover {
    color: #CFB1B1;
}

.contact-widget p.email-links i {
    margin-right: 5px;
    font-size: 14px;
}

.contact-widget a.tel {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s;
}

.contact-widget a.tel:hover {
    color: #CFB1B1;
}

.footer-map {
    width: 100%;
    max-width: 450px;
    height: 140px;
    border: none;
    border-radius: 0;
    margin-top: auto !important;
    margin-bottom: 5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    opacity: 0.6;
    transition: opacity 0.3s, transform 0.3s;
}

.footer-map:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.footer-socials-bottom {
    display: flex;
    gap: 20px;
    width: 100%;
    justify-content: center;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .footer-socials-bottom {
        justify-content: flex-end;
    }
}

.footer-socials-bottom a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 22px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0;
    transition: all 0.3s;
    text-decoration: none;
}

.footer-socials-bottom a:hover {
    color: #FFFFFF;
    background: transparent;
    border-color: transparent;
}

.footer-copyright-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 10px 20px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 768px) {
    .footer-copyright-container {
        align-items: flex-start;
    }
}

.footer-divider {
    width: 100%;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin: 15px 0 30px 0;
}

.copyright-text {
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin: 0;
    text-align: center;
}

@media (min-width: 768px) {
    .copyright-text {
        text-align: left;
    }
}

.copyright-text a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: underline;
}

.footer-bottom-links a {
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-bottom-links a:hover {
    color: #FFFFFF;
}

.footer-bottom-row {
    flex-direction: column !important;
    gap: 15px;
}

@media (min-width: 768px) {
    .footer-bottom-row {
        flex-direction: row !important;
        gap: 0;
    }
}

.pipe {
    margin: 0 5px;
    opacity: 0.5;
}

/* =========================================
   BILINGUAL PAGES & SHABNAM FONT
   ========================================= */
@font-face {
    font-family: 'Shabnam';
    src: url('https://cdn.jsdelivr.net/gh/rastikerdar/shabnam-font@v5.0.1/dist/Shabnam.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Shabnam';
    src: url('https://cdn.jsdelivr.net/gh/rastikerdar/shabnam-font@v5.0.1/dist/Shabnam-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

.bilingual-wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.bilingual-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px 0 50px 0;
    gap: 15px;
}

.lang-btn {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.6);
    padding: 10px 25px;
    border-radius: 30px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.lang-btn.lang-fa-btn {
    font-family: 'Shabnam', sans-serif;
}

.lang-btn:hover {
    color: #000000;
    border-color: rgba(0, 0, 0, 0.5);
}

.lang-btn.active {
    background: rgba(0, 0, 0, 0.05);
    color: #000000;
    border-color: #000000;
}

.bilingual-content {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
}

.bilingual-content.active {
    display: block;
}

.lang-fa {
    direction: rtl;
    text-align: right;
    font-family: 'Shabnam', sans-serif !important;
}

.lang-en {
    direction: ltr;
    text-align: left;
    font-family: 'Rajdhani', sans-serif;
}

.doc-section {
    margin-bottom: 40px;
    background: #fdfdfd;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #eaeaea;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.doc-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #222222;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 10px;
}

.lang-fa .doc-title {
    font-family: 'Shabnam', sans-serif;
}

.doc-text {
    font-size: 17px;
    line-height: 1.8;
    color: #444444;
    margin-bottom: 15px;
}

.doc-list {
    margin: 15px 0;
    padding-left: 20px;
    list-style-type: disc;
    color: #444444;
}

.lang-fa .doc-list {
    padding-left: 0;
    padding-right: 20px;
}

.doc-list li {
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 10px;
}

.filter-con {
    display: flex;
    flex-direction: column;
    margin: 2% 0;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding: clamp(20px, 4vw, 40px) max(15px, calc(50vw - 700px)) !important;
    background: linear-gradient(180deg, #E8E8ED, transparent);
    
    /* Animation baseline */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.filter-con.animated {
    opacity: 1;
    transform: translateY(0);
}

/* ===== SEARCH FILTER STYLES ===== */
.jet-search-filter__input {
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 500 !important;
    padding-left: 10px !important;
    border-radius: 0 !important;
    font-size: 18px !important;
    color: #666 !important;
    transition: all 0.3s ease;
}

.jet-search-filter__input:hover {
    border: 1px solid #969AB0 !important;
}

.jet-search-filter__input:focus {
    border: 1px solid #9C0002 !important;
    outline: none !important;
}

.jet-search-filter__input-clear {
    background: none;
    border: none;
    font-size: 18px;
    color: #9C0002;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.jet-search-filter__input-clear:hover {
    opacity: 1;
}

.jet-search-filter__input-clear svg {
    display: none;
}

.jet-search-filter__input-clear::before {
    content: '×';
    position: relative;
    font-size: 45px !important;
    font-weight: 400 !important;
    color: #9C0002;
    top: -144% !important;
}

/* ===== LOADING ANIMATION ===== */
.jet-search-filter__input-loading {
    width: 16px;
    height: 16px;
    border: 2px solid #9C0002 !important;
    border-top: 2px solid transparent !important;
    border-radius: 50%;
    animation: simpleSpin 0.8s linear infinite;
    margin-right: 5px;
    display: inline-block;
}

@keyframes simpleSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ===== FILTERS GROUP LAYOUT ===== */
.jet-filters-group {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    align-items: end !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    .jet-filters-group {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .jet-filters-group > .elementor-widget-jet-smart-filters-search,
    .jet-filters-group > .elementor-widget:first-child {
        grid-column: 1 / -1 !important;
    }
}

/* Desktop Small */
@media (min-width: 1025px) and (max-width: 1439px) {
    .jet-filters-group {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 10px !important;
    }
}

/* Desktop Medium & Large */
@media (min-width: 1440px) {
    .jet-filters-group {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px !important;
    }
}

/* Desktop Extra Large */
@media (min-width: 1920px) {
    .jet-filters-group {
        gap: 35px !important;
        max-width: 1400px !important;
    }
}

/* ===== SELECT FILTER STYLES ===== */
.jet-select {
    width: 100% !important;
    position: relative !important;
    display: block !important;
    min-height: 1px !important;
    padding: 10px 0 !important;
    margin: 0 !important;
}

.jet-select__control {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 18px;
    padding: 0 8px;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 500 !important;
    border-radius: 0 !important;
    background-color: #fff;
    color: #666;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: smoothAppear 0.3s ease;
    box-sizing: border-box !important;
}

.jet-select__control:hover {
    border-color: #969AB0;
}

.jet-select__control:focus {
    border-color: #9C0002 !important;
    outline: none !important;
}

/* ===== FILTER LABEL ===== */
.jet-filter-label {
    display: block !important;
    margin-bottom: 5px !important;
    font-weight: 600 !important;
    color: #101010 !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    text-transform: uppercase;
    font-family: 'Rajdhani', sans-serif;
}

/* ===== SELECT OPTION STYLES ===== */
.jet-select__control option {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    padding: 18px 15px !important;
    background-color: #ffffff !important;
    color: #303030 !important;
    transition: all 0.3s ease;
}

.jet-select__control option:hover,
.jet-select__control option:focus {
    background-color: #9C0002 !important;
    color: #ffffff !important;
    outline: none;
}

.jet-select__control option:checked {
    background-color: #edf2fb !important;
    color: #202020 !important;
}

.jet-select__control option:active {
    background-color: #7a0001 !important;
    color: #ffffff !important;
}

/* ===== ANIMATIONS ===== */
@keyframes smoothAppear {
    from {
        opacity: 0.8;
        transform: translateY(2px);
    }

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

/* ===== TABLET STYLES (768px - 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {

    .jet-select__control,
    .jet-select__control option,
    .jet-filter-label,
    .jet-search-filter__input {
        font-size: 16px !important;
    }

    .jet-select__control {
        padding: 0 0 0 10px !important;
    }

    .jet-select::after {
        right: 10px;
        top: 82% !important;
        font-size: 20px;
    }

    .jet-search-filter__input-clear::before {
        font-size: 20px;
    }

    .jet-select__control option {
        padding: 10px 12px !important;
    }

    .jet-filter-label {
        letter-spacing: 0.5px;
    }
}

/* ===== MOBILE STYLES (up to 768px) ===== */
@media (max-width: 768px) {

    .filter-con {

        margin: 0 !important;
        padding: 5% 2%;

    }

    .jet-select__control,
    .jet-select__control option,
    .jet-filter-label,
    .jet-search-filter__input {
        font-size: 16px !important;
    }

    .jet-select__control {
        padding: 0 0 0 10px !important;
    }

    .jet-select::after {
        right: 10px;
        top: 80% !important;
        font-size: 20px;
    }

    .jet-search-filter__input-clear::before {
        font-size: 20px;
    }

    .jet-select__control option {
        padding: 10px 12px !important;
    }

    .jet-filter-label {
        letter-spacing: 0.5px;
    }
}

/* ===== SMALL MOBILE STYLES (up to 375px) ===== */
@media (max-width: 375px) {
    .jet-filters-group {
        gap: 14px !important;
    }
}

/* ===== ELEMENTOR COMPATIBILITY ===== */
.elementor-widget-jet-smart-filters-select,
.jet-smart-filter-content-position-column {
    width: 100% !important;
}

/* ===== FILTER GRID (Custom Grid Max Width & Flex Column) ===== */
/*
 * For Elementor Boxed containers, the outer .e-con always spans 100% of
 * the viewport — Elementor applies width constraints via the --content-width
 * CSS variable on .e-con-inner. We override both the variable AND .e-con-inner
 * directly to ensure our site max-width is respected.
 */
.filter-grid,
.filter-con {
    /* Override Elementor's internal content-width variable */
    --content-width: var(--site-max-width, 1400px) !important;
    width: 100%;
    min-width: 200px;
    /* max-width on the outer .e-con is ignored by Elementor boxed layout */
}

/* Target the actual constraining element inside Elementor boxed containers */
.filter-con>.e-con-inner,
.filter-grid>.e-con-inner {
    max-width: var(--site-max-width, 1400px) !important;
    width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

.filter-grid {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: max-content !important;
    overflow: visible !important;
    
    /* Animation baseline */
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.filter-grid.animated {
    opacity: 1;
    transform: translateY(0);
}

.filter-grid>.e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    align-items: center !important;
    height: auto !important;
    min-height: max-content !important;
    overflow: visible !important;
}

/* ===== FILTER GRID FIXES (Modern CSS Grid for Equal Width & Gap) ===== */
.filter-grid .jet-listing-grid__items {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
}

@media (max-width: 1024px) {
    .filter-grid .jet-listing-grid__items {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }
}

@media (max-width: 850px) {
    .filter-grid .jet-listing-grid__items {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

@media (max-width: 600px) {
    .filter-grid .jet-listing-grid__items {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 10px !important;
    }
}

.filter-grid .jet-listing-grid__item {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
}

/* Force all nested Elementor containers inside the grid item to stretch to 100% height */
.filter-grid .jet-listing-grid__item .elementor,
.filter-grid .jet-listing-grid__item .elementor-element.e-con,
.filter-grid .jet-listing-grid__item .e-con-inner,
.filter-grid .jet-listing-grid__item .elementor-widget-shortcode,
.filter-grid .jet-listing-grid__item .elementor-widget-container,
.filter-grid .jet-listing-grid__item .elementor-shortcode {
    height: 100% !important;
    width: 100% !important;
}

.filter-grid .animate-on-hover {
    height: 100% !important;
    width: 100% !important;
}

/* ===== PAGINATION STYLES ===== */
.filter-grid .elementor-widget-jet-smart-filters-pagination {
    margin-top: 40px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    position: relative !important;
    z-index: 10 !important;
    display: flex !important;
    justify-content: center !important;
}

.jet-filters-pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.jet-filters-pagination__item {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-width: 40px !important;
    height: 40px !important;
    border: 1px solid #DFE9F0 !important;
    border-radius: 0 !important;
    background-color: #fff !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    padding: 0 !important;
    margin: 0 !important;
}

.jet-filters-pagination__link {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #37383F !important;
    text-decoration: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 12px !important;
}

.jet-filters-pagination__item:hover {
    border-color: #9C0002 !important;
    background-color: #f8f9fa !important;
}

.jet-filters-pagination__item:hover .jet-filters-pagination__link {
    color: #9C0002 !important;
}

/* Current Page */
.jet-filters-pagination__current {
    background-color: #9C0002 !important;
    border-color: #9C0002 !important;
}

.jet-filters-pagination__current .jet-filters-pagination__link {
    color: #fff !important;
}

/* Dots (Items without data-value attribute) */
.jet-filters-pagination__item:not([data-value]) {
    border: none !important;
    background: transparent !important;
    cursor: default !important;
}

.jet-filters-pagination__item:not([data-value]):hover {
    background: transparent !important;
    border: none !important;
}

.jet-filters-pagination__dots {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 20px !important;
    color: #37383F !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
}

/* =======================================
   ESP ISOLATED STICKY SCROLL SECTION
======================================= */

/* CSS-powered sticky: browser always uses correct viewport dimensions,
   no GSAP pixel caching → works perfectly across monitors */
.esp-scroll-track {
    position: relative;
    width: 100%;
    z-index: 10;
}

.esp-sticky-viewport {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.esp-white-fade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #ffffff;
    opacity: 0;
    z-index: 1000;
    pointer-events: none;
}

.esp-virtual-panel {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
}

#esp-vpanel-1 {
    z-index: 1;
    background: transparent;
}

#esp-vpanel-2 {
    z-index: 2;
    /* transform managed entirely by GSAP */
}

#esp-vpanel-3 {
    z-index: 3;
    /* transform managed entirely by GSAP */
}

.esp-panel-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    z-index: 1;
}

.esp-panel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.6) 30%, rgba(0, 0, 0, 0.1) 100%);
    z-index: 2;
}

.esp-panel-content {
    position: relative;
    width: 80%;
    margin: 0 auto;
    min-height: 40vh;
    padding: 2rem 6rem; /* Increased horizontal padding */
    background: transparent;
    color: #fff;
    text-align: center;
    z-index: 10;
    font-family: "Roboto Slab", serif;
    text-shadow: 0 5px 10px rgba(0, 0, 0, 0.8);
}

.esp-panel-content h2 {
    font-family: "Roboto Slab", Sans-Serif;
    font-size: clamp(2rem, 5vw, 3.2rem);
    margin-bottom: 1.5rem;
    line-height: 1.2;
    color: #fff;
    text-align: center;
}

.esp-panel-content p {
    font-family: "Roboto Slab", Sans-Serif;
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    max-width: 100%;
    line-height: 1.6;
    text-align: center;
    color: #fff;
}

@media (max-width: 1024px) {
    .esp-panel-content { width: 75%; padding: 1.5rem 2rem; }
    .esp-panel-content h2 { font-size: clamp(1.5rem, 3.2vw, 2.8rem); margin-bottom: 1rem; }
    .esp-panel-content p  { font-size: clamp(0.9rem, 1.5vw, 1.1rem); line-height: 1.5; }
}

@media (max-width: 767px) {
    .esp-panel-content { width: 85%; padding: 1rem 1rem; text-align: center; }
    .esp-panel-content h2 { font-size: clamp(1.5rem, 6vw, 2.2rem); margin-bottom: 0.8rem; line-height: 1.3; }
    .esp-panel-content p  { font-size: clamp(0.8rem, 3vw, 1rem); line-height: 1.4; }
}

@media (max-width: 480px) {
    .esp-panel-content { width: 90%; padding: 0.8rem 1rem; }
    .esp-panel-content h2 { font-size: clamp(1.3rem, 7vw, 1.8rem); margin-bottom: 0.6rem; }
    .esp-panel-content p  { font-size: clamp(0.7rem, 3.5vw, 0.9rem); line-height: 1.3; }
}

@media (min-width: 1440px) {
    .esp-panel-content { width: 70%; padding: 3rem 6rem; }
    .esp-panel-content h2 { font-size: clamp(2.5rem, 4vw, 4rem); }
    .esp-panel-content p  { font-size: clamp(1.1rem, 1.5vw, 1.4rem); max-width: 700px; margin: 0 auto; }
}

/* Navigator Sidebar */
.esp-sticky-nav {
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    filter: blur(10px);
    transition: opacity 0.6s ease, filter 0.6s ease;
    padding: 110px 12px;
    background: rgba(255, 255, 255, 0.0);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
}

.esp-sticky-nav.visible {
    opacity: 1;
    filter: blur(0px);
    pointer-events: auto;
}

.esp-nav-dots-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 50vh;
    justify-content: space-between;
}

.esp-nav-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 100%;
    background: #ddd;
    z-index: 0;
}

.esp-nav-line-fill {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    background: rgba(255, 255, 255, 0.5);
    z-index: 1;
    top: 0;
    height: 0%;
    transition: height 0.3s ease, background 0.3s ease;
}

.esp-nav-line-fill.active-last {
    background: #9C0002 !important;
}

.esp-dot {
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 1);
    cursor: pointer;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    font-family: 'Rajdhani', sans-serif;
    font-weight: bold;
    font-size: 16px;
    border-radius: 0;
    transition: all 0.2s ease, background 0.3s ease, color 0.3s ease;
}

.esp-dot.active,
.esp-dot.active-last {
    background: #9C0002;
    color: #fff;
    transform: scale(1.1);
    animation: espDotPulse 2s infinite;
}

@keyframes espDotPulse {
    0% { box-shadow: 0 0 0 0 rgba(156, 0, 2, 0.7); }
    70% { box-shadow: 0 0 0 8px rgba(156, 0, 2, 0); }
    100% { box-shadow: 0 0 0 0 rgba(156, 0, 2, 0); }
}

/* Tablet & Mobile Navigator adjustments */
@media (max-width: 1024px) {
    .esp-sticky-nav { right: 20px; padding: 90px 10px; }
    .esp-dot { width: 30px; height: 30px; font-size: 15px; }
    .esp-nav-dots-container { height: 45vh; }
}

@media (max-width: 768px) {
    .esp-sticky-nav { right: 10px; padding: 80px 8px; }
    .esp-dot { width: 28px; height: 28px; font-size: 14px; }
    .esp-nav-dots-container { height: 40vh; }
}

@media (max-width: 480px) {
    .esp-sticky-nav { right: 5px; padding: 60px 6px; }
    .esp-dot { width: 24px; height: 24px; font-size: 12px; }
    .esp-nav-dots-container { height: 35vh; }

/* =======================================
   MOBILE 2x2 PRODUCT GRID (Added by request)
======================================= */
@media (max-width: 767px) {
    /* Target common product grid classes and WooCommerce grids */
    .mobile-grid-2x2 .jet-listing-grid__items,
    .mobile-grid-2x2,
    ul.products.mobile-grid-2x2,
    .woocommerce ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}}