:root {
    --primary     : #FF8A00;
    --primary-2   : #FFB300;
    --green       : #2DAA4A;
    --green-dark  : #197334;
    --soft        : #FFF8F0;
    --ink         : #1F1F1F;
    --muted       : #6C757D;
    --shadow      : 0 18px 45px rgba(0, 0, 0, .12);
    --shadow-soft : 0 12px 28px rgba(255, 138, 0, .17);
    --radius-xl   : 30px;
    --radius-lg   : 22px;
    --radius-md   : 16px;
}

* {
    box-sizing : border-box;
}

html {
    scroll-behavior : smooth;
}

body {
    font-family : 'Cairo', sans-serif;
    color       : var(--ink);
    background  : radial-gradient(circle at top right, rgba(255, 138, 0, .10), transparent 18%),
    radial-gradient(circle at bottom left, rgba(45, 170, 74, .08), transparent 16%),
    linear-gradient(180deg, #FFF, #FFFAF5 50%, #FFFFFF 100%);
    overflow-x  : hidden;
}

body::before,
body::after {
    content        : "";
    position       : fixed;
    z-index        : -1;
    width          : 360px;
    height         : 360px;
    border-radius  : 50%;
    filter         : blur(10px);
    opacity        : .28;
    pointer-events : none;
    animation      : floatBlob 12s ease-in-out infinite alternate;
}

body::before {
    top        : -120px;
    right      : -140px;
    background : radial-gradient(circle, var(--primary), transparent 70%);
}

body::after {
    bottom             : -140px;
    left               : -130px;
    background         : radial-gradient(circle, var(--green), transparent 70%);
    animation-duration : 15s;
}

@keyframes floatBlob {
    from {
        transform : translateY(0) translateX(0) scale(1);
    }
    to {
        transform : translateY(30px) translateX(15px) scale(1.08);
    }
}

.navbar {
    backdrop-filter : blur(12px);
    background      : rgba(255, 255, 255, .86);
    box-shadow      : 0 10px 30px rgba(0, 0, 0, .05);
    border-bottom   : 1px solid rgba(255, 138, 0, .08);
}

.navbar-brand img {
    height     : 72px;
    width      : auto;
    transition : transform .35s ease;
}

.navbar-brand:hover img {
    transform : scale(1.04) rotate(-1deg);
}

.nav-link {
    font-weight    : 700;
    color          : #222;
    position       : relative;
    padding-inline : 1rem !important;
}

.nav-link::after {
    content          : "";
    position         : absolute;
    right            : 1rem;
    left             : 1rem;
    bottom           : .25rem;
    height           : 3px;
    border-radius    : 999px;
    background       : linear-gradient(90deg, var(--primary), var(--green));
    transform        : scaleX(0);
    transform-origin : center;
    transition       : transform .3s ease;
}

.nav-link:hover,
.nav-link.active {
    color : var(--primary);
}

.nav-link:hover::after,
.nav-link.active::after {
    transform : scaleX(1);
}

section {
    position : relative;
}

.section-space {
    padding : 120px 0;
}

.section-title {
    font-size     : clamp(1.9rem, 2.5vw, 3rem);
    line-height   : 1.5em;
    font-weight   : 800;
    margin-bottom : 1rem;
    color         : var(--green-dark);
}

.section-kicker {
    display       : inline-flex;
    align-items   : center;
    gap           : .55rem;
    padding       : .4rem 1rem;
    border-radius : 999px;
    background    : rgba(255, 138, 0, .09);
    color         : var(--primary);
    font-weight   : 800;
    margin-bottom : 2rem !important;
    box-shadow    : var(--shadow-soft);
}

.hero {
    min-height  : 100vh;
    padding-top : 120px !important;
    display     : flex;
    align-items : center;
    /*overflow    : hidden;*/
}

.hero-wrap {
    background    : rgba(255, 255, 255, .8);
    border        : 1px solid rgba(255, 138, 0, .1);
    border-radius : 36px;
    box-shadow    : var(--shadow);
    padding       : 2rem;
    position      : relative;
    overflow      : hidden;
}

.hero-wrap::before,
.hero-wrap::after {
    content       : "";
    position      : absolute;
    border-radius : 50%;
    background    : linear-gradient(135deg, rgba(255, 138, 0, .18), rgba(255, 179, 0, .04));
    z-index       : 0;
}

.hero-wrap::before {
    width  : 320px;
    height : 320px;
    top    : -140px;
    left   : -110px;
}

.hero-wrap::after {
    width  : 200px;
    height : 200px;
    bottom : -80px;
    right  : -60px;
}

.hero-content, .hero-media {
    position : relative;
    z-index  : 1;
}

.hero-logo {
    width         : min(260px, 100%);
    margin-bottom : 1.25rem;
    filter        : drop-shadow(0 12px 30px rgba(255, 138, 0, .15));
    animation     : heroLogo 3.4s ease-in-out infinite alternate;
}

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

.hero h1 {
    font-size     : clamp(2.2rem, 3.1vw, 4.6rem);
    font-weight   : 800;
    line-height   : 1.7;
    margin-bottom : 1rem;
}

.hero p {
    font-size     : 1.18rem;
    color         : #4D4D4D;
    line-height   : 2;
    margin-bottom : 1.5rem;
}

.hero-badges {
    display       : flex;
    flex-wrap     : wrap;
    gap           : .8rem;
    margin-bottom : 1.8rem;
}

.hero-badge {
    padding       : .75rem 1.1rem;
    border-radius : 999px;
    background    : #FFF;
    border        : 1px solid rgba(45, 170, 74, .16);
    box-shadow    : 0 10px 25px rgba(45, 170, 74, .08);
    font-weight   : 700;
    color         : var(--green-dark);
}

.btn-brand,
.btn-outline-brand {
    border-radius : 999px;
    font-weight   : 800;
    padding       : .9rem 1.5rem;
    transition    : all .35s ease;
}

.btn-brand {
    background : linear-gradient(135deg, var(--primary), var(--primary-2));
    color      : #FFF;
    border     : 0;
    box-shadow : 0 12px 28px rgba(255, 138, 0, .30);
}

.btn-brand:hover {
    color      : #FFF;
    transform  : translateY(-3px);
    box-shadow : 0 18px 34px rgba(255, 138, 0, .33);
}

.btn-outline-brand {
    color      : var(--green-dark);
    border     : 2px solid rgba(45, 170, 74, .25);
    background : #FFF;
}

.btn-outline-brand:hover {
    background : rgba(45, 170, 74, .06);
    color      : var(--green-dark);
    transform  : translateY(-3px);
}

.hero-card-stack {
    display : grid;
    gap     : 1rem;
}

.floating-card {
    background    : #FFF;
    border-radius : 24px;
    padding       : 1.1rem;
    box-shadow    : var(--shadow);
    border        : 1px solid rgba(255, 138, 0, .09);
    animation     : bob 4.2s ease-in-out infinite alternate;
}

.floating-card:nth-child(2) {
    animation-duration : 5s;
}

.floating-card:nth-child(3) {
    animation-duration : 4.6s;
}

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

.floating-card img {
    width         : 100%;
    border-radius : 18px;
    object-fit    : cover;
    max-height    : 305px;
}

.about-panel,
.leader-card,
.feature-card,
.contact-card,
.gallery-item,
.product-card,
.story-card,
.video-shell {
    background    : rgba(255, 255, 255, .88);
    border        : 1px solid rgba(255, 138, 0, .08);
    box-shadow    : var(--shadow);
    border-radius : var(--radius-xl);
}

.story-card {
    padding    : 2rem;
    height     : 100%;
    transition : transform .35s ease, box-shadow .35s ease;
    overflow   : hidden;
    position   : relative;
}

.story-card::before {
    content       : "";
    position      : absolute;
    inset         : auto auto -55px -55px;
    width         : 150px;
    height        : 150px;
    background    : radial-gradient(circle, rgba(255, 138, 0, .12), transparent 65%);
    border-radius : 50%;
}

.story-card:hover,
.leader-card:hover,
.feature-card:hover,
.contact-card:hover,
.gallery-item:hover,
.product-card:hover {
    transform  : translateY(-8px);
    box-shadow : 0 24px 50px rgba(0, 0, 0, .12);
}

.story-card p,
.about-panel p,
.leader-card p,
.feature-card p,
.contact-card p {
    color         : #4D4D4D;
    line-height   : 2;
    margin-bottom : 0;
}

.media-frame {
    position      : relative;
    border-radius : 30px;
    overflow      : hidden;
    box-shadow    : var(--shadow);
    min-height    : 300px;
    height        : 100%;
}

.media-frame img,
.video-shell video {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    transition : transform .6s ease;
}

.media-frame:hover img,
.video-shell:hover video {
    transform : scale(1.05);
}

.leaf-badge {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    width           : 58px;
    height          : 58px;
    border-radius   : 18px;
    background      : linear-gradient(135deg, rgba(45, 170, 74, .15), rgba(255, 138, 0, .16));
    color           : var(--green-dark);
    font-size       : 1.45rem;
    box-shadow      : var(--shadow-soft);
    margin-bottom   : 1rem;
}

.leader-card,
.feature-card,
.contact-card {
    padding    : 2rem;
    height     : 100%;
    transition : all .35s ease;
}

.leader-avatar {
    width           : 86px;
    height          : 86px;
    border-radius   : 24px;
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    font-size       : 1.9rem;
    background      : linear-gradient(135deg, rgba(255, 138, 0, .18), rgba(45, 170, 74, .15));
    color           : var(--green-dark);
    margin-bottom   : 1rem;
}

.leader-title,
.feature-title,
.contact-title {
    font-weight   : 800;
    font-size     : 1.4rem;
    margin-top    : .6rem;
    margin-bottom : 1.6rem;
}

.phone-link,
.mail-link {
    color           : var(--primary);
    text-decoration : none;
    font-weight     : 800;
}

.feature-card ul,
.modal-list,
.product-specs,
.contact-list {
    list-style : none;
    padding    : 0;
    margin     : 0;
}

.feature-card li,
.product-specs li,
.modal-list li,
.contact-list li {
    display       : flex;
    align-items   : flex-start;
    gap           : .7rem;
    line-height   : 1.95;
    margin-bottom : .55rem;
    color         : #3B3B3B;
    font-weight   : 600;
}

.contact-list li {
    color : #FEFEFE !important;
}

.feature-card li i,
.modal-list li i,
.product-specs li i,
.contact-list li i {
    color      : var(--green);
    margin-top : .32rem;
    flex       : 0 0 auto;
}

.products-shell {
    position      : relative;
    padding       : 2rem;
    border-radius : 34px;
    background    : linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 248, 240, .95));
    border        : 1px solid rgba(255, 138, 0, .08);
    box-shadow    : var(--shadow);
    overflow      : hidden;
}

.products-shell::before,
.products-shell::after {
    content       : "";
    position      : absolute;
    border-radius : 50%;
    background    : rgba(255, 138, 0, .10);
    z-index       : 0;
}

.products-shell::before {
    width  : 220px;
    height : 220px;
    top    : -80px;
    right  : -60px;
}

.products-shell::after {
    width      : 180px;
    height     : 180px;
    bottom     : -60px;
    left       : -40px;
    background : rgba(45, 170, 74, .08);
}

.products-shell > * {
    position : relative;
    z-index  : 1;
}

.product-card {
    padding    : 1.25rem;
    text-align : center;
    overflow   : hidden;
    height     : 100%;
    transition : transform .35s ease, box-shadow .35s ease;
    position   : relative;
    cursor     : pointer;
}

.product-card::before {
    content    : "";
    position   : absolute;
    inset      : auto 0 0 0;
    height     : 5px;
    background : linear-gradient(90deg, var(--green), var(--primary));
    transform  : scaleX(0);
    transition : transform .35s ease;
}

.product-card:hover::before {
    transform : scaleX(1);
}

.product-thumb {
    width         : 118px;
    height        : 118px;
    border-radius : 50%;
    margin        : 0 auto 1rem;
    overflow      : hidden;
    box-shadow    : 0 15px 30px rgba(255, 138, 0, .18);
    border        : 6px solid #FFF;
}

.product-thumb img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    transition : transform .45s ease;
}

.product-card:hover .product-thumb img {
    transform : scale(1.08) rotate(-2deg);
}

.product-name {
    font-size     : 1.45rem;
    font-weight   : 800;
    color         : var(--green-dark);
    margin-bottom : .45rem;
}

.product-sub {
    color         : var(--primary);
    font-weight   : 800;
    margin-bottom : 1rem;
}

.product-mini {
    display       : inline-flex;
    align-items   : center;
    gap           : .45rem;
    padding       : .45rem .85rem;
    border-radius : 999px;
    background    : rgba(255, 138, 0, .08);
    color         : var(--primary);
    font-weight   : 800;
    margin-top    : .8rem;
}

.product-banner {
    margin-top      : 2rem;
    padding         : 1rem;
    border-radius   : 28px;
    background      : linear-gradient(135deg, rgba(255, 138, 0, .08), rgba(45, 170, 74, .08));
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.product-banner img {
    max-width     : 100%;
    border-radius : 22px;
    box-shadow    : var(--shadow);
}

.gallery-grid {
    display               : grid;
    grid-template-columns : repeat(4, 1fr);
    gap                   : 1.15rem;
}

.gallery-item {
    display       : block;
    position      : relative;
    overflow      : hidden;
    border-radius : 30px;
    aspect-ratio  : 1 / 1;
    transition    : transform .35s ease, box-shadow .35s ease;
}

.gallery-item img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    transition : transform .6s ease, filter .45s ease;
}

.gallery-item::before {
    content    : "";
    position   : absolute;
    inset      : 0;
    background : linear-gradient(180deg, transparent, rgba(0, 0, 0, .42));
    opacity    : .92;
    z-index    : 1;
}

.gallery-item::after {
    content         : "عرض";
    position        : absolute;
    right           : 1rem;
    bottom          : 1rem;
    z-index         : 2;
    color           : #FFF;
    font-weight     : 800;
    letter-spacing  : .5px;
    background      : rgba(255, 255, 255, .16);
    border          : 1px solid rgba(255, 255, 255, .22);
    backdrop-filter : blur(8px);
    padding         : .45rem .9rem;
    border-radius   : 999px;
}

.gallery-item:hover img {
    transform : scale(1.09) rotate(-1.3deg);
    filter    : saturate(1.06);
}

.gallery-item.video-thumb::after {
    content : "فيديو";
}

.play-pulse {
    position        : absolute;
    inset           : 50% auto auto 50%;
    transform       : translate(-50%, -50%);
    z-index         : 3;
    width           : 82px;
    height          : 82px;
    border-radius   : 50%;
    display         : grid;
    place-items     : center;
    background      : rgba(255, 255, 255, .2);
    border          : 1px solid rgba(255, 255, 255, .32);
    backdrop-filter : blur(8px);
    box-shadow      : 0 0 0 0 rgba(255, 255, 255, .45);
    animation       : pulse 2.1s infinite;
}

.play-pulse i {
    color     : #FFF;
    font-size : 2rem;
    transform : translateX(-2px);
}

@keyframes pulse {
    0% {
        box-shadow : 0 0 0 0 rgba(255, 255, 255, .42);
    }
    70% {
        box-shadow : 0 0 0 22px rgba(255, 255, 255, 0);
    }
    100% {
        box-shadow : 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

.video-shell {
    padding  : .85rem;
    overflow : hidden;
    position : relative;
}

.video-shell video {
    border-radius : 24px;
    min-height    : 320px;
}

.video-floating-badge {
    position      : absolute;
    right         : 1.3rem;
    top           : 1.3rem;
    z-index       : 2;
    background    : rgba(255, 255, 255, .86);
    border-radius : 999px;
    padding       : .55rem 1rem;
    font-weight   : 800;
    box-shadow    : var(--shadow);
    color         : var(--green-dark);
}

.contact-strip {
    padding       : 1.25rem;
    border-radius : 24px;
    background    : linear-gradient(135deg, rgba(255, 138, 0, .12), rgba(45, 170, 74, .12));
    border        : 1px dashed rgba(255, 138, 0, .25);
    font-weight   : 800;
    color         : #333;
}

.cta-box {
    background    : linear-gradient(135deg, var(--green-dark), var(--green));
    color         : #FFF;
    border-radius : 30px;
    padding       : 2rem;
    box-shadow    : var(--shadow);
    overflow      : hidden;
    position      : relative;
}

.cta-box::before {
    content       : "";
    position      : absolute;
    inset         : auto auto -80px -50px;
    width         : 220px;
    height        : 220px;
    background    : rgba(255, 255, 255, .08);
    border-radius : 50%;
}

.cta-box h3,
.cta-box p,
.cta-box .btn,
.cta-box .contact-list {
    position : relative;
    z-index  : 1;
}

.footer {
    background     : #0D1114;
    color          : #DDE4E8;
    padding        : 1.2rem 0;
    text-align     : center;
    font-weight    : 700;
    letter-spacing : .3px;
}

.floating-tools {
    position       : fixed;
    left           : 22px;
    bottom         : 24px;
    z-index        : 1100;
    display        : flex;
    flex-direction : column;
    gap            : .7rem;
}

.whatsapp-float,
.scroll-btn {
    width           : 44px;
    height          : 44px;
    border-radius   : 50%;
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    color           : #FFF;
    border          : 0;
    text-decoration : none;
    box-shadow      : 0 16px 35px rgba(0, 0, 0, .18);
    transition      : transform .3s ease, box-shadow .3s ease, opacity .3s ease;
}

.whatsapp-float {
    position   : fixed;
    right      : 22px;
    bottom     : 24px;
    background : linear-gradient(135deg, #1EBE5D, #17A34B);
    font-size  : 2rem;
    width      : 70px;
    height     : 70px;
}

.scroll-btn {
    background : linear-gradient(135deg, var(--primary), #FF6B00);
    font-size  : .98rem;
    opacity    : .92;
}

.whatsapp-float:hover,
.scroll-btn:hover {
    transform  : translateY(-4px) scale(1.03);
    color      : #FFF;
    box-shadow : 0 22px 38px rgba(0, 0, 0, .22);
}

.scroll-btn.hidden {
    opacity        : 0;
    pointer-events : none;
    transform      : translateY(14px);
}

.custom-modal {
    position        : fixed;
    inset           : 0;
    z-index         : 2000;
    display         : none;
    align-items     : center;
    justify-content : center;
    padding         : 1rem;
}

.custom-modal.active {
    display : flex;
}

.modal-overlay {
    position        : absolute;
    inset           : 0;
    background      : rgba(15, 18, 20, .68);
    backdrop-filter : blur(6px);
    opacity         : 0;
    transition      : opacity .35s ease;
}

.custom-modal.active .modal-overlay {
    opacity : 1;
}

.modal-dialog-box {
    position      : relative;
    width         : min(980px, 100%);
    max-height    : 92vh;
    overflow      : hidden;
    background    : linear-gradient(180deg, #FFF, #FFFAF4);
    border-radius : 34px;
    box-shadow    : 0 28px 70px rgba(0, 0, 0, .28);
    border        : 1px solid rgba(255, 138, 0, .08);
    transform     : translateY(30px) scale(.96);
    opacity       : 0;
    transition    : transform .4s cubic-bezier(.2, .8, .2, 1), opacity .35s ease;
}

.custom-modal.active .modal-dialog-box {
    transform : translateY(0) scale(1);
    opacity   : 1;
}

.modal-close {
    position            : sticky;
    top                 : 12px;
    margin-inline-start : auto;
    display             : flex;
    width               : 48px;
    height              : 48px;
    align-items         : center;
    justify-content     : center;
    border              : 0;
    background          : rgba(255, 255, 255, .88);
    color               : #333;
    border-radius       : 50%;
    box-shadow          : var(--shadow);
    font-size           : 1.3rem;
    z-index             : 2;
    margin-top          : 12px;
    margin-left         : 12px;
}

.modal-body-custom {
    padding    : 0 2rem 2rem;
    max-height : calc(92vh - 72px);
    overflow   : auto;
    overflow-x : hidden;
}

.modal-hero {
    display               : grid;
    grid-template-columns : 1fr 1.1fr;
    gap                   : 1.6rem;
    align-items           : center;
}

.modal-image-box img {
    width         : 100%;
    border-radius : 26px;
    box-shadow    : var(--shadow);
    border        : 1px solid rgba(255, 138, 0, .08);
}

.modal-tag {
    display       : inline-flex;
    align-items   : center;
    gap           : .45rem;
    padding       : .45rem 1rem;
    background    : rgba(255, 138, 0, .08);
    border-radius : 999px;
    color         : var(--primary);
    font-weight   : 800;
    margin-bottom : 1rem;
}

.modal-title {
    font-size     : clamp(1.8rem, 2.4vw, 3rem);
    font-weight   : 800;
    color         : var(--green-dark);
    margin-bottom : .75rem;
}

.modal-subtitle {
    color         : #4C4C4C;
    line-height   : 2;
    margin-bottom : 1rem;
}

.sizes-box,
.spec-box {
    padding       : 1.25rem;
    border-radius : 24px;
    background    : #FFF;
    border        : 1px solid rgba(255, 138, 0, .08);
    box-shadow    : 0 12px 30px rgba(0, 0, 0, .06);
    height        : 100%;
}

.sizes-grid {
    display    : flex;
    flex-wrap  : wrap;
    gap        : .65rem;
    margin-top : 1rem;
}

.size-pill {
    min-width     : 64px;
    text-align    : center;
    padding       : .55rem .8rem;
    border-radius : 999px;
    font-weight   : 800;
    color         : #222;
    background    : linear-gradient(135deg, rgba(255, 138, 0, .15), rgba(255, 179, 0, .22));
    box-shadow    : inset 0 0 0 1px rgba(255, 138, 0, .1);
}

.reveal {
    opacity    : 0;
    transform  : translateY(24px);
    transition : all .8s cubic-bezier(.2, .8, .2, 1);
}

.reveal.in-view {
    opacity   : 1;
    transform : translateY(0);
}

.delay-1 {
    transition-delay : .08s;
}

.delay-2 {
    transition-delay : .16s;
}

.delay-3 {
    transition-delay : .24s;
}

.delay-4 {
    transition-delay : .32s;
}


.intro-banner {
    position       : relative;
    margin-top    : 96px;
    padding-bottom : 0;
    width          : 100%;
    overflow       : hidden;
}

.intro-video-full {
    position   : absolute;
    left       : 0;
    width      : 100%;
    object-fit : contain;
    display    : block;
}


.hero {
    min-height  : auto;
    padding-top : 36px;
}

.footer {
    position       : relative;
    overflow       : hidden;
    background     : linear-gradient(135deg, #FF8A00 0%, #FFB300 28%, #2DAA4A 72%, #197334 100%);
    color          : #FFF;
    padding        : 1.2rem 0;
    text-align     : center;
    font-weight    : 700;
    letter-spacing : .3px;
    isolation      : isolate;
}

.footer::before,
.footer::after {
    content       : "";
    position      : absolute;
    border-radius : 50%;
    filter        : blur(8px);
    opacity       : .28;
    z-index       : -1;
    animation     : footerFloat 10s ease-in-out infinite alternate;
}

.footer::before {
    width      : 220px;
    height     : 220px;
    top        : -110px;
    right      : 10%;
    background : rgba(255, 255, 255, .26);
}

.footer::after {
    width              : 180px;
    height             : 180px;
    bottom             : -90px;
    left               : 12%;
    background         : rgba(255, 255, 255, .18);
    animation-duration : 13s;
}

.footer .footer-glow {
    position       : absolute;
    inset          : 0;
    background     : repeating-linear-gradient(120deg,
    rgba(255, 255, 255, .09) 0px,
    rgba(255, 255, 255, .09) 8px,
    transparent 8px,
    transparent 18px);
    mix-blend-mode : soft-light;
    animation      : footerSlide 18s linear infinite;
    z-index        : -1;
    pointer-events : none;
}

@keyframes footerFloat {
    from {
        transform : translateY(0) translateX(0);
    }
    to {
        transform : translateY(18px) translateX(24px);
    }
}

@keyframes footerSlide {
    from {
        transform : translateX(0);
    }
    to {
        transform : translateX(120px);
    }
}

@media (max-width : 1199.98px) {
    .gallery-grid {
        grid-template-columns : repeat(3, 1fr);
    }
}

@media (max-width : 991.98px) {
    .hero {
        min-height     : auto;
        padding-top    : 80px !important;
        padding-bottom : 0;
    }

    .hero-wrap {
        padding : 1.4rem;
    }

    .section-space {
        padding : 80px 0;
    }

    .modal-hero {
        grid-template-columns : 1fr;
    }

    .gallery-grid {
        grid-template-columns : repeat(2, 1fr);
    }

    .floating-tools {
        left   : 16px;
        bottom : 16px;
    }

    .whatsapp-float {
        right  : 16px;
        bottom : 16px;
    }
}

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

    .hero h1 {
        font-size : 2.1rem;
    }

    .hero p {
        font-size : 1rem;
    }

    .hero-badges {
        gap : .55rem;
    }

    .hero-badge {
        font-size : .93rem;
    }

    .section-space {
        padding : 68px 0;
    }

    .gallery-grid {
        grid-template-columns : 1fr;
    }

    .products-shell {
        padding : 1.2rem;
    }

    .modal-body-custom {
        padding : 0 1rem 1rem;
    }

    .modal-close {
        width       : 42px;
        height      : 42px;
        margin-left : 8px;
    }

    .footer {
        font-size : .9rem;
    }

    .whatsapp-float, .scroll-btn {
        width  : 40px;
        height : 40px;
    }

    .whatsapp-float {
        font-size : 1.25rem;
    }

    .scroll-btn {
        font-size : .9rem;
    }
}

/* PRODUCT MODAL ANIMATION PATCH */

.product-modal {
    position        : fixed;
    inset           : 0;
    z-index         : 9999;
    display         : flex;
    align-items     : center;
    justify-content : center;
    padding         : 22px;
    visibility      : hidden;
    pointer-events  : none;
}

.product-modal-overlay {
    position        : absolute;
    inset           : 0;
    background      : rgba(18, 18, 18, .72);
    backdrop-filter : blur(8px);
    opacity         : 0;
    transition      : opacity .38s ease;
}

.product-modal-dialog {
    position      : relative;
    width         : min(980px, 100%);
    max-height    : 90vh;
    background    : #FFF;
    border-radius : 30px;
    overflow      : hidden;
    box-shadow    : 0 30px 90px rgba(0, 0, 0, .30);

    opacity       : 0;
    transform     : translateY(70px) scale(.94);
    transition    : transform .45s cubic-bezier(.22, 1, .36, 1),
    opacity .45s ease;
    will-change   : transform, opacity;
}

.product-modal-body {
    max-height : 90vh;
    overflow   : auto;
    padding    : 18px;
}

.product-modal.active,
.product-modal.closing {
    visibility     : visible;
    pointer-events : auto;
}

.product-modal.active .product-modal-overlay {
    opacity : 1;
}

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

.product-modal.closing .product-modal-overlay {
    opacity : 0;
}

.product-modal.closing .product-modal-dialog {
    opacity   : 0;
    transform : translateY(70px) scale(.94);
}

.stories-section {
    margin : 8rem auto;
}

.about-section {
    margin : 3rem auto;
}

/* =========================
   LANG PATCH: EN / LTR
   Paste at end of style.css
   ========================= */

html[lang="en"],
html[lang="en"] body {
    direction: ltr;
    text-align: left;
}

html[lang="en"] .navbar-nav {
    margin-left: auto;
    margin-right: 0;
}

html[lang="en"] .nav-link::after {
    left: 1rem;
    right: 1rem;
}

html[lang="en"] .section-kicker,
html[lang="en"] .hero-badge,
html[lang="en"] .product-mini,
html[lang="en"] .modal-tag,
html[lang="en"] .feature-card li,
html[lang="en"] .product-specs li,
html[lang="en"] .modal-list li,
html[lang="en"] .contact-list li,
html[lang="en"] .phone-link,
html[lang="en"] .mail-link {
    direction: ltr;
    text-align: left;
}

html[lang="en"] .hero-content,
html[lang="en"] .about-panel,
html[lang="en"] .story-card,
html[lang="en"] .leader-card,
html[lang="en"] .feature-card,
html[lang="en"] .cta-box,
html[lang="en"] .contact-strip,
html[lang="en"] .modal-copy,
html[lang="en"] .spec-box,
html[lang="en"] .sizes-box {
    text-align: left;
}

html[lang="en"] .video-floating-badge {
    left: 1.3rem;
    right: auto;
}

html[lang="en"] .gallery-item::after {
    left: 1rem;
    right: auto;
}

html[lang="en"] .gallery-item::after {
    content: "View";
}

html[lang="en"] .gallery-item.video-thumb::after {
    content: "Video";
}

html[lang="en"] .floating-tools {
    left: 22px;
    right: auto;
}

html[lang="en"] .whatsapp-float {
    right: 22px;
    left: auto;
}

html[lang="en"] .modal-close {
    margin-left: auto;
    margin-right: 12px;
}

html[lang="en"] .play-pulse i {
    transform: translateX(2px);
}

@media (max-width: 991.98px) {
    html[lang="en"] .floating-tools {
        left: 16px;
        right: auto;
    }

    html[lang="en"] .whatsapp-float {
        right: 16px;
        left: auto;
    }
}