:root{
            --green:#063d2b;
            --green-2:#075b3e;
            --green-3:#0a7a50;
            --gold:#ffd43b;
            --gold-2:#ffb800;
            --dark:#031713;
            --dark-2:#061e1b;
            --text:#f5f7f6;
            --muted:#9eb4ad;
            --line:rgba(255,212,59,.25);
        }

        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family:Arial,Helvetica,sans-serif;
            color:var(--text);
            background:
                radial-gradient(circle at 10% 10%,rgba(20,180,110,.13),transparent 28%),
                radial-gradient(circle at 90% 35%,rgba(255,190,0,.08),transparent 25%),
                linear-gradient(180deg,#031b17 0%,#03100e 100%);
            overflow-x:hidden;
        }

        a{text-decoration:none}
        img{max-width:100%;display:block}

        .top-strip{
            background:#02110f;
            border-bottom:1px solid rgba(255,255,255,.07);
            font-size:13px;
            color:#b8c8c4;
        }

        .navbar{
            background:rgba(2,20,17,.94);
            backdrop-filter:blur(14px);
            border-bottom:1px solid rgba(255,215,70,.15);
            z-index:999;
        }

        .navbar-brand{
            color:#fff!important;
            font-size:29px;
            font-weight:900;
            letter-spacing:1px;
        }

        .brand-mark{
            color:var(--gold);
            margin-right:7px;
        }

        .brand-gold{
            color:var(--gold);
            text-shadow:0 0 20px rgba(255,205,40,.18);
        }

        .brand-tag{
            display:block;
            font-size:8px;
            letter-spacing:4px;
            color:#dce5e1;
            margin-left:34px;
            margin-top:-5px;
        }

        .nav-link{
            color:#e5ece9!important;
            font-weight:600;
            margin:0 6px;
            position:relative;
        }

        .nav-link:hover,
        .nav-link.active{color:var(--gold)!important}

        .nav-link.active:after{
            content:"";
            position:absolute;
            left:10px;
            right:10px;
            bottom:2px;
            height:2px;
            background:var(--gold);
            border-radius:5px;
        }

        .btn-gold{
            background:linear-gradient(135deg,#ffe477,#ffb900);
            color:#1b1600;
            border:0;
            font-weight:800;
            border-radius:9px;
            padding:12px 23px;
            box-shadow:0 8px 24px rgba(255,191,0,.16);
        }

        .btn-gold:hover{
            color:#111;
            transform:translateY(-2px);
            box-shadow:0 12px 30px rgba(255,191,0,.28);
        }

        /* ================= APP QR ================= */

.app-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 20% 50%,
            rgba(0, 220, 130, 0.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 80% 50%,
            rgba(255, 204, 0, 0.08),
            transparent 25%
        );
}

.app-qr-box {
    background: linear-gradient(
        145deg,
        rgba(7, 55, 40, 0.95),
        rgba(3, 30, 22, 0.95)
    );

    border: 1px solid rgba(255, 211, 49, 0.30);
    border-radius: 16px;

    padding: 22px 18px;

    max-width: 230px;
    margin-left: auto;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.30),
        inset 0 0 30px rgba(255, 211, 49, 0.03);
}

.qr-image {
    width: 165px;
    height: 165px;

    background: #fff;

    padding: 10px;

    border-radius: 12px;

    margin: 0 auto 16px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;
}

.app-qr-box h5 {
    color: #fff;

    font-size: 16px;
    font-weight: 800;

    margin-bottom: 5px;
}

.app-qr-box p {
    color: #9dbbb1;

    font-size: 11px;

    line-height: 1.5;

    margin-bottom: 12px;
}

.qr-platforms {
    display: flex;

    justify-content: center;

    gap: 8px;
}

.qr-platforms span {
    width: 32px;
    height: 32px;

    border-radius: 8px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: rgba(255, 211, 49, 0.10);

    border: 1px solid rgba(255, 211, 49, 0.20);

    color: #ffd331;

    font-size: 16px;
}


/* MOBILE */

@media (max-width: 991px) {

    .app-qr-box {
        margin: 20px auto 0;
    }

}

@media (max-width: 575px) {

    .app-qr-box {
        max-width: 210px;
    }

    .qr-image {
        width: 150px;
        height: 150px;
    }

}

        .btn-outline-gold{
            border:1px solid var(--gold);
            color:var(--gold);
            border-radius:9px;
            padding:11px 22px;
            font-weight:700;
        }

        .btn-outline-gold:hover{
            background:var(--gold);
            color:#111;
        }

        .hero{
            position:relative;
            min-height:650px;
            display:flex;
            align-items:center;
            overflow:hidden;
            background:
                linear-gradient(90deg,rgba(2,25,19,.98) 0%,rgba(2,35,26,.86) 42%,rgba(2,35,26,.25) 100%),
                url('hero/hero-1.jpg') center/cover no-repeat;
        }

        .hero:before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at 75% 45%,rgba(255,209,57,.17),transparent 22%),
                radial-gradient(circle at 50% 70%,rgba(0,255,160,.12),transparent 30%);
            pointer-events:none;
        }

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

        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:9px;
            color:#a8ffdd;
            text-transform:uppercase;
            letter-spacing:5px;
            font-size:12px;
            font-weight:800;
            margin-bottom:15px;
        }

        .eyebrow:before{
            content:"";
            width:28px;
            height:2px;
            background:var(--gold);
        }

        .hero h1{
            font-size:clamp(48px,6vw,88px);
            font-weight:900;
            line-height:.95;
            margin-bottom:20px;
        }

        .hero h1 span{color:var(--gold)}

        .hero-subtitle{
            color:#d1ded9;
            font-size:19px;
            line-height:1.65;
            max-width:610px;
        }

        .hero-points{
            display:flex;
            gap:25px;
            flex-wrap:wrap;
            margin:28px 0;
        }

        .hero-point{
            color:#dce9e5;
            font-size:14px;
        }

        .hero-point i{color:#41e6a4;margin-right:7px}

        .hero-buttons{
            display:flex;
            gap:12px;
            flex-wrap:wrap;
        }

        .hero-slider .owl-dots{
            position:absolute;
            bottom:25px;
            left:0;
            right:0;
        }

        .hero-slider .owl-dot span{
            background:#78938a!important;
        }

        .hero-slider .owl-dot.active span{
            background:var(--gold)!important;
            width:30px!important;
        }

        .stat-bar{
            position:relative;
            z-index:5;
            margin-top:-1px;
            background:rgba(2,30,23,.95);
            border-top:1px solid rgba(255,255,255,.04);
            border-bottom:1px solid var(--line);
        }

        .stat{
            padding:22px 10px;
            text-align:center;
            border-right:1px solid rgba(255,255,255,.07);
        }

        .stat:last-child{border-right:0}
        .stat i{font-size:24px;color:var(--gold);margin-bottom:8px}
        .stat strong{display:block;font-size:23px}
        .stat span{font-size:12px;color:var(--muted)}

        .section{
            padding:85px 0;
        }

        .section-dark{
            background:rgba(255,255,255,.015);
        }

        .section-title{
            margin-bottom:38px;
        }

        .section-title .mini{
            color:var(--gold);
            font-size:12px;
            letter-spacing:4px;
            font-weight:800;
            text-transform:uppercase;
        }

        .section-title h2{
            font-size:clamp(30px,4vw,48px);
            font-weight:900;
            margin:7px 0 8px;
        }

        .section-title p{
            color:var(--muted);
            max-width:680px;
            margin:auto;
        }

        .category-card{
            min-height:115px;
            display:flex;
            align-items:center;
            justify-content:center;
            flex-direction:column;
            gap:10px;
            border:1px solid rgba(255,255,255,.09);
            background:linear-gradient(145deg,rgba(12,77,57,.7),rgba(3,29,24,.92));
            border-radius:15px;
            color:#fff;
            transition:.3s;
        }

        .category-card i{
            font-size:34px;
            color:var(--gold);
        }

        .category-card span{
            font-weight:700;
        }

        .category-card:hover,
        .category-card.active{
            transform:translateY(-6px);
            border-color:var(--gold);
            box-shadow:0 15px 40px rgba(0,0,0,.25);
        }

        .game-card{
            overflow:hidden;
            background:#071f1b;
            border:1px solid rgba(255,212,59,.18);
            border-radius:15px;
            position:relative;
            transition:.35s;
        }

        .game-card:hover{
            transform:translateY(-7px);
            border-color:var(--gold);
            box-shadow:0 18px 45px rgba(0,0,0,.35);
        }

        .game-image{
            aspect-ratio:1/1;
            background-size:cover;
            background-position:center;
            position:relative;
        }

        .game-image:after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.65));
        }

        .badge-hot{
            position:absolute;
            z-index:2;
            top:10px;
            right:10px;
            background:#ff3f45;
            color:#fff;
            border-radius:7px;
            padding:5px 9px;
            font-size:10px;
            font-weight:800;
        }

        .game-info{padding:14px}
        .game-info h5{margin:0;font-weight:800}
        .game-info small{color:#8fb1a7}

        .promo-card{
            min-height:230px;
            border-radius:17px;
            overflow:hidden;
            position:relative;
            border:1px solid rgba(255,212,59,.28);
            background-size:cover;
            background-position:center;
        }

        .promo-card:after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(90deg,rgba(1,22,17,.94),rgba(1,22,17,.2));
        }

        .promo-content{
            position:relative;
            z-index:2;
            padding:30px;
            max-width:75%;
        }

        .promo-content h3{
            font-weight:900;
            font-size:31px;
            color:var(--gold);
        }

        .promo-content p{color:#d0ddd8}

        .feature-box{
            height:100%;
            padding:27px;
            background:linear-gradient(145deg,#0a2a23,#061814);
            border:1px solid rgba(255,255,255,.08);
            border-radius:16px;
            transition:.3s;
        }

        .feature-box:hover{
            border-color:rgba(255,212,59,.35);
            transform:translateY(-4px);
        }

        .feature-icon{
            width:55px;
            height:55px;
            border-radius:14px;
            display:flex;
            align-items:center;
            justify-content:center;
            background:rgba(255,212,59,.1);
            color:var(--gold);
            font-size:23px;
            margin-bottom:18px;
        }

        .feature-box h5{font-weight:800}
        .feature-box p{color:var(--muted);font-size:14px;line-height:1.65}

        .app-section{
            position:relative;
            overflow:hidden;
            background:
                radial-gradient(circle at 15% 50%,rgba(0,190,125,.2),transparent 28%),
                radial-gradient(circle at 90% 50%,rgba(255,193,7,.12),transparent 25%),
                #041914;
        }

        .phone-stack{
            min-height:390px;
            position:relative;
        }

        .phone{
            position:absolute;
            width:205px;
            border:7px solid #111;
            border-radius:28px;
            overflow:hidden;
            box-shadow:0 25px 55px rgba(0,0,0,.45);
        }

        .phone img{width:100%}

        .phone.one{left:20%;top:25px;transform:rotate(-9deg)}
        .phone.two{left:42%;top:0;transform:rotate(8deg)}

        .download-list{
            list-style:none;
            padding:0;
            margin:25px 0;
        }

        .download-list li{
            margin:12px 0;
            color:#d5e2de;
        }

        .download-list i{
            color:#40e4a2;
            margin-right:10px;
        }

        .testimonial{
            padding:28px;
            background:#071f1b;
            border:1px solid rgba(255,255,255,.08);
            border-radius:16px;
        }

        .stars{color:var(--gold);font-size:13px}
        .testimonial p{
            color:#c4d4cf;
            line-height:1.7;
            font-size:14px;
            margin-top:15px;
        }

        .avatar{
            width:45px;
            height:45px;
            border-radius:50%;
            background:linear-gradient(135deg,#2ac98a,#ffd43b);
            display:flex;
            align-items:center;
            justify-content:center;
            color:#062019;
            font-weight:900;
        }

        .faq .accordion-item{
            background:#071f1b;
            border:1px solid rgba(255,255,255,.08);
            margin-bottom:10px;
            border-radius:10px!important;
            overflow:hidden;
        }

        .faq .accordion-button{
            background:#071f1b;
            color:#fff;
            font-weight:700;
            box-shadow:none;
        }

        .faq .accordion-button:not(.collapsed){
            color:var(--gold);
            background:#0a2a23;
        }

        .faq .accordion-button:after{
            filter:brightness(0) invert(1);
        }

        .faq .accordion-body{
            color:#aabdb7;
            background:#061a16;
            line-height:1.7;
        }

        footer{
            background:#020e0c;
            border-top:1px solid rgba(255,212,59,.16);
        }

        .footer-brand{
            font-size:34px;
            font-weight:900;
            color:var(--gold);
        }

        footer p, footer li, footer a{
            color:#8da69f;
            font-size:14px;
        }

        footer a:hover{color:var(--gold)}

        .social a{
            width:40px;
            height:40px;
            display:inline-flex;
            justify-content:center;
            align-items:center;
            border:1px solid rgba(255,255,255,.12);
            border-radius:10px;
            margin-right:7px;
            color:#fff;
        }

        .social a:hover{
            border-color:var(--gold);
            color:var(--gold);
        }

        .bottom-footer{
            border-top:1px solid rgba(255,255,255,.07);
            padding:17px 0;
            color:#728780;
            font-size:12px;
        }

        .responsible{
            color:#d3dfdb;
        }

        .responsible i{color:var(--gold)}

        @media(max-width:991px){
            .hero{min-height:590px}
            .navbar-collapse{
                background:#041713;
                padding:15px;
                border-radius:10px;
                margin-top:10px;
            }
            .phone.one{left:13%}
            .phone.two{left:42%}
        }

        @media(max-width:767px){
            .hero{
                min-height:650px;
                background-position:65% center;
            }

            .hero:after{
                content:"";
                position:absolute;
                inset:0;
                background:rgba(1,18,14,.35);
            }

            .hero-content{z-index:3}
            .hero h1{font-size:50px}
            .hero-subtitle{font-size:16px}
            .hero-points{gap:13px}

            .stat{
                border-right:0;
                border-bottom:1px solid rgba(255,255,255,.06);
            }

            .section{padding:60px 0}

            .phone-stack{min-height:340px}
            .phone{width:165px}
            .phone.one{left:14%;top:35px}
            .phone.two{left:42%;top:5px}

            .promo-content{max-width:90%;padding:24px}
            .promo-content h3{font-size:25px}
        }

        @media(max-width:480px){
            .navbar-brand{font-size:23px}
            .brand-tag{font-size:6px;letter-spacing:3px}
            .hero{min-height:670px}
            .hero h1{font-size:43px}
            .category-card{min-height:105px}
            .phone{width:145px}
            .phone.one{left:9%}
            .phone.two{left:45%}
        }
/* =====================================================
   Q567 FOOTER
===================================================== */

.q567-footer {
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(0, 170, 110, 0.06),
            transparent 30%
        ),
        #01130e;

    border-top: 1px solid rgba(255, 211, 49, 0.18);

    color: #fff;
}


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

.q567-footer .footer-main {
    padding: 45px 0 38px;
}


/* ================= BRAND ================= */

.q567-footer .footer-brand {
    display: flex;
    align-items: center;
    gap: 9px;

    color: #ffd331;

    font-size: 32px;
    font-weight: 900;

    line-height: 1;
}

.q567-footer .footer-brand i {
    font-size: 28px;
}


.q567-footer .footer-description {
    max-width: 360px;

    color: #8fa9a0;

    font-size: 12px;

    line-height: 1.7;

    margin-bottom: 0;
}


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

.q567-footer h6 {
    font-size: 13px;

    color: #fff;

    font-weight: 800;

    margin-bottom: 16px !important;
}


/* ================= LINKS ================= */

.q567-footer .footer-links {
    margin: 0;
    padding: 0;
}

.q567-footer .footer-links li {
    margin-bottom: 9px;
}

.q567-footer .footer-links a {
    color: #8fa9a0;

    text-decoration: none;

    font-size: 12px;

    transition: all .25s ease;
}

.q567-footer .footer-links a:hover {
    color: #ffd331;

    padding-left: 3px;
}


/* ================= SOCIAL ================= */

.q567-footer .social {
    display: flex;

    align-items: center;

    gap: 9px;
}

.q567-footer .social a {
    width: 39px;
    height: 39px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 9px;

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

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

    color: #fff;

    font-size: 13px;

    text-decoration: none;

    transition: all .25s ease;
}

.q567-footer .social a:hover {
    background: #ffd331;

    border-color: #ffd331;

    color: #111;

    transform: translateY(-3px);
}


/* ================= FOLLOW ================= */

.q567-footer .footer-follow-text {
    color: #8fa9a0;

    font-size: 12px;

    line-height: 1.6;

    max-width: 280px;

    margin-bottom: 13px;
}


/* Smaller Social Icons */

.q567-footer .footer-social-small {
    gap: 7px;
}

.q567-footer .footer-social-small a {
    width: 32px;
    height: 32px;

    font-size: 11px;

    border-radius: 7px;
}


/* ================= APP BUTTONS ================= */

.q567-footer .footer-app-buttons {
    display: flex;

    gap: 8px;

    margin-top: 10px;
}


.q567-footer .footer-store-btn {
    min-width: 105px;

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 7px 10px;

    background: #061e17;

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

    border-radius: 7px;

    color: #fff;

    text-decoration: none;

    transition: all .25s ease;
}


.q567-footer .footer-store-btn i {
    font-size: 20px;

    color: #39dc8c;
}


.q567-footer .footer-store-btn span {
    display: flex;

    flex-direction: column;

    font-size: 10px;

    font-weight: 700;

    line-height: 1.1;
}


.q567-footer .footer-store-btn small {
    font-size: 7px;

    color: #8da59d;

    margin-bottom: 2px;
}


.q567-footer .footer-store-btn:hover {
    border-color: #ffd331;

    transform: translateY(-2px);
}


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

.q567-footer .bottom-footer {
    border-top: 1px solid rgba(255,255,255,.08);

    background: rgba(0,0,0,.12);
}


.q567-footer .bottom-footer-inner {
    min-height: 62px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


/* ================= RESPONSIBLE ================= */

.q567-footer .responsible {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

    color: #a8bbb5;

    font-size: 18px;
}


.q567-footer .age-18 {
    width: 50px;
    height: 50px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 2px solid #fff;

    border-radius: 50%;

    color: #fff;

    font-size: 20px;

    font-weight: 800;
}


.q567-footer .separator {
    color: #526860;
}


/* ================= COPYRIGHT ================= */

.q567-footer .copyright {
    color: #718880;

    font-size: 10px;
}


/* ================= TABLET ================= */

@media (max-width: 991px) {

    .q567-footer .footer-main {
        padding: 40px 0 30px;
    }

}


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

@media (max-width: 767px) {

    .q567-footer .footer-main {
        padding: 35px 0 25px;
    }

    .q567-footer .footer-description {
        max-width: 500px;
    }

    .q567-footer .footer-social-small {
        margin-bottom: 12px;
    }

    .q567-footer .bottom-footer-inner {
        padding: 14px 0;

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;
    }

}


/* ================= SMALL MOBILE ================= */

@media (max-width: 480px) {

    .q567-footer .footer-app-buttons {
        flex-direction: column;

        align-items: flex-start;
    }

    .q567-footer .footer-store-btn {
        width: 145px;
    }

}

/* =========================================================
   PROMOTIONAL BANNER
========================================================= */

.promotion-section {
    position: relative;
    overflow: hidden;
}

.promotion-banner {
    position: relative;
    width: 100%;
    min-height: 360px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 212, 59, 0.35);
    background: #032c20;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.35),
        0 0 40px rgba(0, 255, 150, 0.05);
}

.promotion-banner-img {
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
    object-position: center;
    display: block;
}


/* Dark overlay */

.promotion-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(1, 22, 15, 0.20),
            rgba(1, 22, 15, 0.05)
        );
    pointer-events: none;
}


/* Editable content */

.promotion-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;

    display: flex;
    align-items: stretch;
    justify-content: space-between;

    padding: 35px 40px;
}


/* Left Content */

.promotion-main-content {
    width: 58%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.promotion-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    width: fit-content;

    color: #ffd43b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;

    margin-bottom: 12px;
}

.promotion-main-content h3 {
    color: #fff;
    font-size: clamp(30px, 4vw, 54px);
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 12px;
}

.promotion-main-content h3 span {
    color: #ffd43b;
    text-shadow:
        0 0 15px rgba(255, 212, 59, 0.35);
}

.promotion-main-content p {
    color: #d4e5df;
    max-width: 520px;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 20px;
}

.promotion-main-content .btn {
    width: fit-content;
}


/* Right Benefits */

.promotion-benefits {
    width: 36%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 5px;

    padding-left: 30px;
}

.promotion-benefit {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 13px 10px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.promotion-benefit:last-child {
    border-bottom: 0;
}


/* Icon */

.promotion-icon {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #45ffb0;

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

    border: 1px solid rgba(0, 255, 150, 0.25);

    box-shadow:
        0 0 18px rgba(0, 255, 150, 0.08);
}

.promotion-benefit strong {
    display: block;

    color: #fff;

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

    margin-bottom: 3px;
}

.promotion-benefit small {
    display: block;

    color: #9db8af;

    font-size: 11px;
}


/* Hover */

.promotion-banner {
    transition: transform 0.35s ease,
                box-shadow 0.35s ease;
}

.promotion-banner:hover {
    transform: translateY(-4px);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.45),
        0 0 45px rgba(0, 255, 150, 0.08);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .promotion-banner {
        min-height: 330px;
    }

    .promotion-banner-img {
        min-height: 330px;
    }

    .promotion-overlay {
        padding: 25px;
    }

    .promotion-main-content {
        width: 55%;
    }

    .promotion-benefits {
        width: 42%;
        padding-left: 15px;
    }

    .promotion-benefit {
        padding: 9px 5px;
    }

    .promotion-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

}


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

@media (max-width: 767px) {

    .promotion-banner {
        min-height: auto;
        background: #032c20;
    }

    .promotion-banner-img {
        display: none;
    }

    .promotion-overlay {
        position: relative;
        inset: auto;

        display: block;

        padding: 28px 20px;
    }

    .promotion-main-content {
        width: 100%;
        text-align: center;
        align-items: center;
    }

    .promotion-main-content h3 {
        font-size: 34px;
    }

    .promotion-main-content p {
        font-size: 13px;
    }

    .promotion-benefits {
        width: 100%;
        padding: 20px 0 0;
        margin-top: 20px;

        border-top: 1px solid rgba(255,255,255,0.1);
    }

    .promotion-benefit {
        padding: 11px 0;
    }

    .promotion-benefit strong {
        font-size: 13px;
    }

    .promotion-benefit small {
        font-size: 10px;
    }

}

/* ================= Q567 LOGO ================= */

.q567-logo {
    width: 125px;
    height: 58px;
    object-fit: contain;
    display: block;
}

/* Desktop */
.navbar-brand {
    display: flex;
    align-items: center;
    padding: 0;
}

/* Tablet */
@media (max-width: 991px) {

    .q567-logo {
        width: 110px;
        height: 52px;
    }

}

/* Mobile */
@media (max-width: 576px) {

    .q567-logo {
        width: 95px;
        height: 46px;
    }

}

/* =====================================================
   INNER PAGE HERO
===================================================== */

.inner-page-hero {

    position: relative;

    padding: 95px 0 75px;

    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(0,255,150,.10),
            transparent 35%
        ),
        radial-gradient(
            circle at 80% 50%,
            rgba(255,211,49,.07),
            transparent 30%
        ),
        #021d16;

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

}

.inner-page-content h1 {

    color: #fff;

    font-size: clamp(38px,5vw,65px);

    font-weight: 800;

    margin: 12px 0 8px;

}

.inner-page-content > p {

    color: #9db8af;

    font-size: 14px;

}

.breadcrumb-custom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-top: 20px;

    font-size: 12px;

}

.breadcrumb-custom a {

    color: #ffd331;

    text-decoration: none;

}

.breadcrumb-custom span {

    color: #849c94;

}

.breadcrumb-custom i {

    color: #50665f;

    font-size: 9px;

}