/* =========================================================
   FAIRPLAY - SAME TO SAME REFERENCE STYLE
   Black + Gold / Premium Sports Layout / Fully Responsive
   ========================================================= */

:root {
    --black: #050505;
    --black2: #090909;
    --panel: #0c0c0c;
    --panel2: #111111;
    --yellow: #f26d25;
    --yellow2: #ffbd00;
    --white: #fff;
    --muted: #aaa;
    --line: rgba(255,208,0,.28);
    --container: 1180px;
    --radius: 12px;
}

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

html {
    scroll-behavior: smooth
}

body {
    background: var(--black);
    color: #fff;
    font-family: Inter,Arial,sans-serif;
    overflow-x: hidden;
}

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

button {
    font: inherit
}

img {
    max-width: 100%;
    display: block
}

.container {
    width: 1240px;
    margin: auto
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(4,4,4,.96);
    border-bottom: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(12px);
}

.nav-wrap {
    height: 76px;
    display: flex;
    align-items: center;
    gap: 30px
}

.brand {
    width: 162px;
    display: flex;
    align-items: center
}

    .brand img {
        width: 162px;
        max-height: 66px;
        object-fit: contain;
    }

.brand-fallback {
    display: none;
    font-family: Montserrat,sans-serif;
    font-style: italic;
    font-size: 32px;
    font-weight: 900;
    color: #fff;
    letter-spacing: -2px
}

    .brand-fallback span {
        color: #f26d25
    }

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto
}

    .desktop-nav > a, .nav-dropdown > a {
        font-size: 13px;
        font-weight: 700;
        color: #ddd;
        padding: 14px 16px;
        border-radius: 8px;
        transition: .25s
    }

    .desktop-nav a:hover, .desktop-nav a.active {
        color: #f26d25;
        background: rgba(255,208,0,.08)
    }

.nav-dropdown i {
    font-size: 9px;
    margin-left: 4px
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 9px
}

.icon-btn, .mobile-menu {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #0a0a0a;
    border: 1px solid #333;
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer
}

.btn {
    min-height: 42px;
    padding: 0 24px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-weight: 800;
    font-size: 13px;
    transition: .25s;
    border: 1px solid transparent
}

.btn-yellow {
    background: #f26d25;
    color: #fff;
    border-color: #f26d25
}

    .btn-yellow:hover {
        background: #6fad47;
        transform: translateY(-1px);
        border: 1px Solid;
    }

.btn-outline {
    border-color: rgb(242 109 37);
    color: #fff;
    background: #080808
}

    .btn-outline:hover {
        background: rgba(255,208,0,.08);
        color: #f26d25
    }

.nav-actions .btn {
    min-width: 88px
}

.mobile-menu {
    display: none
}

.mobile-nav {
    display: none
}

.hero {
    position: relative;
    min-height: 375px;
    overflow: hidden
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(0 0 0) 0%, rgb(0 0 0 / 18%) 36%, rgba(0, 0, 0, .15) 68%, rgb(0 0 0 / 0%) 100%), linear-gradient(0deg, rgb(0 0 0 / 0%), transparent 45%);
}

.hero-grid {
    position: relative;
    z-index: 2;
    min-height: 375px;
    display: grid;
    /* grid-template-columns: 1fr 300px;*/
    gap: 28px;
    align-items: center
}

.hero-copy {
    padding: 34px 0;
    text-align: left;
}

.eyebrow {
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 10px
}

    .eyebrow span {
        display: inline-block;
        width: 7px;
        height: 7px;
        background: #f26d25;
        border-radius: 50%;
        margin-right: 8px
    }

.hero h1 {
    font-family: Montserrat,sans-serif;
    font-size: 61px;
    line-height: .94;
    letter-spacing: -2px;
    font-weight: 900;
    margin: 0 0 12px;
    text-transform: uppercase
}

    .hero h1 strong {
        color: #6fad47;
    }

.hero-tagline {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1.2px;
    margin-bottom: 12px
}

    .hero-tagline b {
        color: #f26d25;
        padding: 0 4px
    }

.hero-copy p {
    max-width: 628px;
    color: #d0d0d0;
    line-height: 1.6;
    font-size: 14px;
    margin-bottom: 17px;   
}

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

.btn-large {
    min-height: 44px;
    padding: 0 19px
}

.live-card {
    background: rgba(5,5,5,.94);
    border: 1px solid rgb(242 109 37 / 54%);
    border-radius: 14px;
    padding: 15px 15px 18px;
    box-shadow: 0 15px 50px rgba(0,0,0,.55)
}

.card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 800
}

    .card-head i {
        color: #f26d25;
        margin-right: 6px
    }

    .card-head small {
        background: #9e1515;
        color: #fff;
        border-radius: 5px;
        padding: 4px 7px;
        font-size: 8px
    }

.match-title {
    text-align: center;
    margin: 20px 0 12px;
    font-size: 12px;
    font-weight: 800
}

    .match-title span {
        display: block;
        color: #999;
        font-weight: 500;
        margin-top: 5px
    }

.teams {
    display: grid;
    grid-template-columns: 1fr 36px 1fr;
    align-items: center;
    text-align: center
}

.team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px
}

.team-logo {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #121212;
    border: 1px solid #333;
    color: #fff;
    font-weight: 900;
    margin-bottom: 5px
}

    .team-logo.fire {
        color: #f26d25;
        font-size: 19px
    }

.team b {
    font-size: 10px;
    color: #bbb
}

.team strong {
    font-size: 17px
}

.team small {
    font-size: 9px;
    color: #777
}

.vs {
    font-size: 11px;
    font-weight: 900;
    color: #f26d25
}

.live-card .full {
    width: 100%;
    margin-top: 16px;
    height: 39px
}

.trust-strip {
    border-top: 1px solid rgba(255,208,0,.18);
    border-bottom: 1px solid rgba(255,208,0,.18);
    background: #080808
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    min-height: 57px;
    align-items: center
}

.trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 9px 8px;
    border-right: 1px solid rgba(255,255,255,.07)
}

    .trust-item:last-child {
        border: 0
    }

    .trust-item i {
        width: 30px;
        height: 30px;
        display: grid;
        place-items: center;
        border: 1px solid #f26d25;
        border-radius: 50%;
        color: #f26d25;
        font-size: 12px
    }

    .trust-item span {
        font-size: 13px;
        line-height: 1.25;
        color: #ddd
    }

    .trust-item b {
        font-weight: 500;
        color: #aaa
    }

.section {
    padding: 14px 0 0
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px
}

    .section-heading h2 {
        font-family: Montserrat, sans-serif;
        font-size: 29px;
        letter-spacing: -.6px;
        font-weight: 900;
    }

        .section-heading h2 span {
            color: #f26d25
        }

    .section-heading a {
        font-size: 16px;
        font-weight: 800;
        color: #f26d25
    }

        .section-heading a i {
            margin-left: 5px
        }

    .section-heading.plain {
        justify-content: flex-start
    }

.sports-grid {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 12px
}

.sport-card {
    height: 124px;
    border: 1px solid rgb(242 109 37 / 54%);
    border-radius: 9px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 10px;
    isolation: isolate;
    background-size: cover;
    background-position: center;
    transition: .3s
}

    .sport-card:hover {
        transform: translateY(-3px);
        border-color: #f26d25;
        box-shadow: 0 10px 30px rgba(255,208,0,.13)
    }

.sport-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,.1) 75%);
    z-index: -1
}

.sport-card span {
    font-size: 15px;
    font-weight: 800
}

.sport-card > i {
    margin-left: auto;
    color: #f26d25;
    font-size: 12px
}

.cricket {
    background-image: url("https://images.unsplash.com/photo-1531415074968-036ba1b575da?auto=format&fit=crop&w=700&q=85")
}

.football {
    background-image: url("https://images.unsplash.com/photo-1579952363873-27f3bade9f55?auto=format&fit=crop&w=700&q=85")
}

.tennis {
    background-image: url("https://images.unsplash.com/photo-1554068865-24cecd4e34b8?auto=format&fit=crop&w=700&q=85")
}

.kabaddi {
    background-image: url("https://images.unsplash.com/photo-1579952363873-27f3bade9f55?auto=format&fit=crop&w=700&q=85")
}

.basketball {
    background-image: url("https://images.unsplash.com/photo-1546519638-68e109498ffc?auto=format&fit=crop&w=700&q=85")
}

.casino {
    background-image: url("https://images.unsplash.com/photo-1511512578047-dfb367046420?auto=format&fit=crop&w=700&q=85")
}

.bonus-banner {
    min-height: 108px;
    margin-top: 16px;
    border: 1px solid rgb(242 109 37 / 54%);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    padding: 15px 42px;
    background: linear-gradient(90deg,rgba(0,0,0,.93),rgba(0,0,0,.3)), url('images/bonus-banner.png') center/cover;
}

.bonus-copy h3 {
    font-family: Montserrat;
    font-size: 26px;
    line-height: 1.05;
    font-weight: 900;
}

    .bonus-copy h3 span {
        color: #f26d25
    }

.bonus-copy p {
    font-size: 14px;
    color: #ccc;
    line-height: 1.4;
    margin-top: 6px
}

.bonus-gift {
    position: absolute;
    left: 49%;
    font-size: 70px;
    color: #f26d25;
    filter: drop-shadow(0 0 20px rgba(255,208,0,.35));
    transform: rotate(-5deg)
}

.bonus-cta {
    margin-left: auto;
    background: #f26d25;
    color: #080808;
    padding: 12px 31px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 900;
    z-index: 2
}

    .bonus-cta i {
        margin-left: 7px
    }

.works-section {
    padding-top: 13px
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px
}

.step-card {
    min-height: 80px;
    border: 1px solid #292929;
    border-radius: 9px;
    background: linear-gradient(145deg,#111,#080808);
    display: grid;
    grid-template-columns: 43px 1fr 20px;
    align-items: center;
    gap: 9px;
    padding: 11px 13px
}

.step-no {
    width: 35px;
    height: 35px;
    border: 1px solid #f26d25;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #f26d25;
    font-size: 13px;
    font-weight: 800
}

.step-card h3 {
    font-size: 17px;
    margin-bottom: 4px
}

.step-card p {
    font-size: 12px;
    color: #bbb;
    line-height: 1.35
}

.step-card > i {
    color: #f26d25;
    font-size: 27px
}

.app-section {
    padding-top: 14px
}

.app-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 25px
}

.app-banner, .stats-card {
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    background: #090909;
    min-height: 110px;
    overflow: hidden
}

.app-banner {
    position: relative;
    display: flex;
    align-items: center;
    /* padding: 15px 18px 15px 205px;*/
    background: linear-gradient(90deg,rgba(255,208,0,.07),transparent 45%),#080808
}

.phone-art {
    position: absolute;
    left: 20px;
    bottom: -18px;
    width: 145px;
    height: 125px;
    border-radius: 20px 20px 8px 8px;
    transform: rotate(-7deg);
    background: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.2)), url("https://images.unsplash.com/photo-1551650975-87deedd944c3?auto=format&fit=crop&w=500&q=80") center/cover;
    border: 5px solid #191919;
    box-shadow: 0 12px 25px #000
}

.app-copy h2 {
    font-family: Montserrat;
    font-size: 20px
}

    .app-copy h2 span {
        color: #f26d25
    }

.app-copy p {
    font-size: 10px;
    color: #ccc;
    margin: 5px 0 10px
}

.store-buttons {
    display: flex;
    gap: 7px
}

    .store-buttons a {
        display: flex;
        align-items: center;
        gap: 7px;
        border: 1px solid #555;
        border-radius: 6px;
        padding: 5px 8px;
        font-size: 8px
    }

    .store-buttons i {
        font-size: 18px
    }

    .store-buttons span {
        color: #ccc;
        line-height: 1.1
    }

    .store-buttons strong {
        display: block;
        color: #fff;
        font-size: 10px
    }

.qr-box {
    margin-left: auto;
    text-align: center
}

.qr {
    width: 62px;
    height: 62px;
    background: #fff;
    color: #111;
    display: grid;
    place-items: center;
    font-size: 50px;
    line-height: 1;
    border-radius: 5px
}

.qr-box small {
    font-size: 7px;
    color: #bbb
}

.stats-card {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    align-items: center;
    padding: 10px
}

    .stats-card > div {
        text-align: center;
        border-right: 1px solid #242424
    }

        .stats-card > div:last-child {
            border: 0
        }

    .stats-card i {
        width: 27px;
        height: 27px;
        border-radius: 50%;
        background: #f26d25;
        color: #080808;
        display: grid;
        place-items: center;
        margin: 0 auto 6px;
        font-size: 11px
    }

    .stats-card strong {
        display: block;
        color: #f26d25;
        font-size: 17px
    }

    .stats-card span {
        font-size: 11px;
        color: #bbb
    }

.faq-section {
    padding: 33px 0 33px;
}

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

details {
    border: 1px solid #2c2c2c;
    border-radius: 5px;
    background: #090909;
    margin-bottom: 6px
}

summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 17px;
    font-size: 15px;
    color: #f26d25;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

    summary::-webkit-details-marker {
        display: none
    }

    summary i {
        color: #f26d25;
        font-size: 13px;
        transition: .2s
    }

details[open] summary i {
    transform: rotate(45deg)
}

details p {
    font-size: 14px;
    color: #aaa;
    padding: 0 12px 10px;
    line-height: 1.5
}

.site-footer {
    border-top: 1px solid #252525;
    background: #070707;
    padding-top: 18px
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.55fr .8fr .95fr 1fr 1fr;
    gap: 25px;
    padding-bottom: 18px
}

    .footer-grid > div {
        border-right: 1px solid #242424;
        padding-right: 15px
    }

        .footer-grid > div:last-child {
            border: 0
        }

.footer-logo {
    display: block;
    font-size: 27px;
    margin-bottom: 5px
}

.footer-brand p {
    font-size: 9px;
    color: #aaa;
    line-height: 1.45;
    max-width: 250px
}

.footer-grid h4 {
    font-size: 20px;
    margin-bottom: 9px;
    color: #f26d25;
    font-weight: 800;
}

.footer-grid > div > a {
    display: block;
    font-size: 14px;
    color: #aaa;
    margin: 5px 0
}

    .footer-grid > div > a:hover {
        color: #f26d25
    }

.socials {
    display: flex;
    gap: 6px;
    margin-top: 9px
}

    .socials a {
        width: 35px;
        height: 35px;
        border: 1px solid #555;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: 16px;
    }

.payments {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    color: #ddd;
    font-size: 12px
}

.footer-grid p {
    font-size: 14px;
    color: #aaa;
    margin: 7px 0
}

    .footer-grid p i {
        width: 15px;
        color: #f26d25
    }

.copyright {
    text-align: center;
    border-top: 1px solid #1c1c1c;
    color: #666;
    font-size: 15px;
    padding: 9px
}

.whatsapp {
    position: fixed;
    right: 25px;
    bottom: 22px;
    width: 53px;
    height: 53px;
    border-radius: 50%;
    background: #4bca5a;
    color: #ffffff;
    display: grid;
    place-items: center;
    font-size: 26px;
    z-index: 1001;
    box-shadow: 0 0 0 6px rgba(255,208,0,.08);
    border: 2px Solid #FFF;
}

.mobile-bottom {
    display: none
}

@media(max-width:1000px) {
    :root {
        --container: 940px
    }

    .desktop-nav {
        gap: 0
    }

        .desktop-nav > a, .nav-dropdown > a {
            padding: 12px 9px;
            font-size: 12px
        }

    .hero-grid {
        grid-template-columns: 1fr 270px
    }

    .hero h1 {
        font-size: 44px
    }

    .sports-grid {
        grid-template-columns: repeat(3,1fr)
    }

    .trust-grid {
        grid-template-columns: repeat(3,1fr)
    }

    .trust-item:nth-child(3) {
        border-right: 0
    }

    .app-grid {
        grid-template-columns: 1fr
    }

    .stats-card {
        min-height: 105px
    }
}

@media(max-width:760px) {

    .hero-buttons.btn-latestss {
        display: grid !important;
    }

    .container {
        width: min(100% - 30px,620px)
    }

    .nav-wrap {
        height: 66px
    }

    .brand {
        width: auto;
        margin-right: auto
    }

        .brand img {
            width: 100px
        }

    .desktop-nav, .search-btn, .nav-actions > .btn {
        display: none
    }

    .mobile-menu {
        display: grid
    }

    .mobile-nav {
        padding: 12px 15px 18px;
        background: #070707;
        border-top: 1px solid #222
    }

        .mobile-nav.open {
            display: grid;
            gap: 4px
        }

        .mobile-nav > a {
            padding: 11px;
            border-radius: 7px;
            color: #ddd;
            font-size: 12px;
            font-weight: 700
        }

            .mobile-nav > a:hover {
                background: #151515;
                color: #f26d25
            }

    .mobile-nav-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding-top: 6px
    }

        .mobile-nav-buttons .btn {
            width: 100%
        }

    .hero {
        min-height: 371px !important;
    }

    .hero-bg {
        background-position: 58% center
    }

    .hero-overlay {
        background: linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.68) 36%,rgba(0,0,0,.15) 68%,rgba(0,0,0,.68) 100%), linear-gradient(0deg,rgba(0,0,0,.72),transparent 45%);
    }

    .hero-grid {
        min-height: 300px !important;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 20px
    }

    .hero-copy {
        padding: 75px 0 0
    }

    .hero h1 {
        font-size: 43px
    }

    .hero-copy p {
        font-size: 12px
    }

    .hero-buttons {
        flex-wrap: wrap
    }

    .live-card {
        width: min(100%,330px);
        margin-left: auto
    }

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

    .trust-item {
        border-right: 1px solid #222;
        border-bottom: 1px solid #222
    }

        .trust-item:nth-child(3) {
            border-right: 1px solid #222
        }

        .trust-item:nth-child(even) {
            border-right: 0
        }

        .trust-item:nth-last-child(-n+2) {
            border-bottom: 0
        }

    .trust-item {
        justify-content: flex-start;
        padding-left: 10px
    }

    .section {
        padding-top: 18px
    }

    .section-heading h2 {
        font-size: 21px
    }

    .sports-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 9px
    }

    .sport-card {
        height: 105px
    }

    .bonus-banner {
        min-height: 160px;
        padding: 18px;
        align-items: flex-start
    }

    .bonus-copy h3 {
        font-size: 20px
    }

    .bonus-gift {
        left: auto;
        right: 18px;
        bottom: 18px;
        font-size: 62px
    }

    .bonus-cta {
        position: absolute;
        left: 18px;
        bottom: 18px;
        padding: 10px 17px
    }

    .steps-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px
    }

    .step-card {
        grid-template-columns: 35px 1fr;
        min-height: 90px
    }

        .step-card > i {
            display: none
        }

    .step-no {
        width: 31px;
        height: 31px;
        font-size: 11px
    }

    .app-banner {
        /*padding: 16px 12px 16px 145px;*/
        min-height: 63px
    }

    .phone-art {
        left: 8px;
        width: 120px;
        height: 105px
    }

    .app-copy h2 {
        font-size: 16px
    }

    .store-buttons {
        display: none
    }

    .qr-box {
        display: none
    }

    .stats-card {
        grid-template-columns: repeat(2,1fr);
        gap: 8px
    }

        .stats-card > div {
            border-bottom: 1px solid #222;
            padding: 7px
        }

            .stats-card > div:nth-child(even) {
                border-right: 0
            }

            .stats-card > div:nth-last-child(-n+2) {
                border-bottom: 0
            }

    .faq-grid {
        grid-template-columns: 1fr;
        gap: 0
    }

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

        .footer-grid > div {
            border: 0
        }

    .footer-brand {
        grid-column: 1/-1
    }

    .whatsapp {
        right: 15px;
        bottom: 72px;
        width: 48px;
        height: 48px;
        font-size: 22px
    }

    .mobile-bottom {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 58px;
        background: #090909;
        border-top: 1px solid #333;
        z-index: 1000;
        padding: 8px 10px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px
    }

        .mobile-bottom a {
            border: 1px solid #555;
            border-radius: 8px;
            display: grid;
            place-items: center;
            font-size: 12px;
            font-weight: 800
        }

            .mobile-bottom a:last-child {
                background: #f26d25;
                border-color: #f26d25;
                color: #080808
            }
}

@media(max-width:420px) {
    .container {
        width: calc(100% - 22px)
    }

    .hero h1 {
        font-size: 38px
    }

    .hero {
        min-height: 600px
    }

    .hero-grid {
        min-height: 600px
    }

    .hero-copy {
        padding-top: 0px
    }

    .live-card {
        width: 100%
    }

    .sports-grid {
        grid-template-columns: 1fr 1fr
    }

    .sport-card {
        height: 94px
    }

    .bonus-copy p {
        font-size: 9px
    }

    .steps-grid {
        grid-template-columns: 1fr
    }

    .step-card {
        min-height: 74px
    }

    /* .app-banner {
        padding-left: 130px
    }*/

    .phone-art {
        width: 108px
    }

    .footer-grid {
        grid-template-columns: 1fr
    }

    .footer-brand {
        grid-column: auto
    }

    .desktop-only {
        display: none
    }
}

/* =========================================
   PREMIUM TRUST STRIP
   ========================================= */

.premium-trust-strip {
    width: 100%;
    background: #080808;
    border-top: 1px solid rgb(242 109 37 / 54%);
    border-bottom: 1px solid rgb(242 109 37 / 54%);
    position: relative;
    overflow: hidden;
}

    /* subtle golden glow */
    .premium-trust-strip::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 70%;
        height: 100%;
        background: radial-gradient( ellipse, rgba(255, 208, 0, 0.08) 0%, rgba(255, 208, 0, 0.02) 45%, transparent 75% );
        pointer-events: none;
    }

    .premium-trust-strip .trust-grid {
        width: min(1180px, calc(100% - 40px));
        min-height: 72px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        align-items: center;
    }

    /* Each item */
    .premium-trust-strip .trust-item {
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 11px;
        padding: 5px 14px;
        border-right: 1px solid rgba(255, 255, 255, 0.10);
        position: relative;
    }

        .premium-trust-strip .trust-item:last-child {
            border-right: none;
        }

        /* Icon circle */
        .premium-trust-strip .trust-item > i {
            width: 34px;
            height: 34px;
            min-width: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            color: #f26d25;
            font-size: 14px;
            border: 1px solid #f26d25;
            background: radial-gradient( circle, rgba(255, 208, 0, 0.15), rgba(255, 208, 0, 0.03) );
            box-shadow: 0 0 8px rgba(255, 208, 0, 0.18), inset 0 0 8px rgba(255, 208, 0, 0.08);
            transition: all .3s ease;
        }

        /* Text */
        .premium-trust-strip .trust-item span {
            display: flex;
            flex-direction: column;
            justify-content: center;
            line-height: 1.25;
        }

        /* First line */
        .premium-trust-strip .trust-item strong {
            color: #ffffff;
            font-size: 14px;
            font-weight: 800;
            white-space: nowrap;
        }

        /* Second line */
        .premium-trust-strip .trust-item small {
            color: #d2d2d2;
            font-size: 13px;
            font-weight: 500;
            white-space: nowrap;
        }

        /* Hover effect */
        .premium-trust-strip .trust-item:hover > i {
            background: #f26d25;
            color: #fff;
            box-shadow: 0 0 18px rgba(255, 208, 0, 0.40);
        }

        .premium-trust-strip .trust-item:hover {
            background: linear-gradient( 90deg, transparent, rgba(255, 208, 0, 0.035), transparent );
        }


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

@media (max-width: 1000px) {

    .premium-trust-strip .trust-grid {
        width: calc(100% - 30px);
        grid-template-columns: repeat(3, 1fr);
    }

    .premium-trust-strip .trust-item {
        min-height: 62px;
    }

        .premium-trust-strip .trust-item:nth-child(3) {
            border-right: none;
        }

        .premium-trust-strip .trust-item:nth-child(n + 4) {
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }
}


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

@media (max-width: 650px) {

    .premium-trust-strip .trust-grid {
        width: calc(100% - 20px);
        grid-template-columns: repeat(2, 1fr);
        min-height: auto;
    }

    .premium-trust-strip .trust-item {
        min-height: 66px;
        justify-content: flex-start;
        padding: 8px 10px;
        gap: 9px;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

        .premium-trust-strip .trust-item:nth-child(1),
        .premium-trust-strip .trust-item:nth-child(2) {
            border-top: none;
        }

        .premium-trust-strip .trust-item:nth-child(even) {
            border-right: none;
        }

        .premium-trust-strip .trust-item > i {
            width: 31px;
            height: 31px;
            min-width: 31px;
            font-size: 12px;
        }

        .premium-trust-strip .trust-item strong {
            font-size: 13px !important;
        }

        .premium-trust-strip .trust-item small {
            font-size: 12px !important;
        }
}


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

@media (max-width: 400px) {

    .premium-trust-strip .trust-grid {
        width: 100%;
    }

    .premium-trust-strip .trust-item {
        padding: 8px 7px;
        gap: 7px;
    }

        .premium-trust-strip .trust-item > i {
            width: 28px;
            height: 28px;
            min-width: 28px;
            font-size: 11px;
        }

        .premium-trust-strip .trust-item strong {
            font-size: 9px;
        }

        .premium-trust-strip .trust-item small {
            font-size: 8px;
        }
}
/* =========================================================
   CRICKET CONTENT SECTION
   ========================================================= */

.cricket-content-section {
    width: 100%;
    padding: 70px 0;
    background: radial-gradient( circle at 15% 20%, rgba(255, 208, 0, 0.07), transparent 30% ), radial-gradient( circle at 85% 80%, rgba(255, 208, 0, 0.05), transparent 30% ), #050505;
    border-top: 1px solid rgba(255, 208, 0, 0.15);
    border-bottom: 1px solid rgba(255, 208, 0, 0.15);
}


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

.cricket-content-header {
    max-width: 900px;
    margin: 0 auto 45px;
    text-align: center;
}

.cricket-content-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    border: 1px solid rgb(242 109 37 / 54%);
    border-radius: 50px;
    background: rgba(255, 208, 0, 0.06);
    color: #f26d25;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

    .cricket-content-badge i {
        font-size: 12px;
    }

.cricket-content-header h1 {
    margin-top: 17px;
    font-family: Montserrat, sans-serif;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.1;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -1.5px;
}

    .cricket-content-header h1 span {
        color: #f26d25;
    }

.cricket-content-header > p {
    max-width: 820px;
    margin: 18px auto 0;
    color: #a9a9a9;
    font-size: 14px;
    line-height: 1.8;
}


/* =========================================================
   CONTENT GRID
   ========================================================= */

.cricket-content-grid {
    display: grid;
    /*    grid-template-columns: 1fr 1fr;*/
    gap: 22px;
    margin-bottom: 22px;
}


/* =========================================================
   CONTENT BOX
   ========================================================= */

.cricket-content-box {
    position: relative;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008) );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

    .cricket-content-box:hover {
        transform: translateY(-3px);
        border-color: rgb(242 109 37 / 42%);
        box-shadow: 0 15px 45px rgba(0, 0, 0, 0.35), 0 0 30px rgba(255, 208, 0, 0.04);
    }


    /* =========================================================
   BOX HEADING
   ========================================================= */

    .cricket-content-box h2 {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 17px;
        font-family: Montserrat, sans-serif;
        font-size: 21px;
        color: #f26d25;
        line-height: 1.3;
    }

.content-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgb(242 109 37 / 16%);
    border: 1px solid rgb(242 109 37);
    color: #f26d25;
    font-size: 15px;
    box-shadow: 0 0 15px rgba(255, 208, 0, 0.08);
}


/* =========================================================
   PARAGRAPHS
   ========================================================= */

.cricket-content-box > p {
    color: #fff;
    font-size: 14px;
    line-height: 1.85;
    margin-bottom: 14px;
}

    .cricket-content-box > p:last-child {
        margin-bottom: 0;
    }


/* =========================================================
   HIGHLIGHT BOX
   ========================================================= */

.highlight-box {
    border-color: rgba(255, 208, 0, 0.20);
    background: linear-gradient( 145deg, rgba(255, 208, 0, 0.06), rgba(255, 208, 0, 0.015) );
}


/* =========================================================
   FORMAT LIST
   ========================================================= */

.cricket-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

    .cricket-list li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 12px;
        border-radius: 9px;
        background: rgba(0, 0, 0, 0.25);
        border: 1px solid rgba(255, 255, 255, 0.06);
        transition: .25s ease;
    }

        .cricket-list li:hover {
            border-color: rgba(255, 208, 0, 0.25);
            background: rgba(255, 208, 0, 0.035);
        }

.list-icon {
    width: 31px;
    height: 31px;
    min-width: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #050505;
    background: #f26d25;
    font-size: 11px;
}

.cricket-list strong {
    display: block;
    color: #ffffff;
    font-size: 12px;
    margin-bottom: 3px;
}

.cricket-list p {
    color: #999;
    font-size: 10px;
    line-height: 1.55;
}


/* =========================================================
   FEATURE LIST
   ========================================================= */

.cricket-feature-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

    .cricket-feature-list li {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #c8c8c8;
        font-size: 14px;
        line-height: 1.5;
    }

        .cricket-feature-list li > i {
            width: 21px;
            height: 21px;
            min-width: 21px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(255, 208, 0, 0.12);
            color: #f26d25;
            font-size: 9px;
        }


/* =========================================================
   MINI LIST
   ========================================================= */

.cricket-mini-list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px 15px;
    margin-top: 18px;
}

    .cricket-mini-list li {
        color: #bdbdbd;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 7px;
    }

        .cricket-mini-list li i {
            color: #f26d25;
            font-size: 9px;
        }


/* =========================================================
   BOTTOM CONTENT
   ========================================================= */

.cricket-bottom-content {
    padding: 28px 30px;
    margin-top: 22px;
    border-radius: 14px;
    border: 1px solid rgba(255, 208, 0, 0.25);
    background: linear-gradient( 90deg, rgba(255, 208, 0, 0.07), rgba(255, 208, 0, 0.015) );
}

    .cricket-bottom-content h2 {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #ffffff;
        font-family: Montserrat, sans-serif;
        font-size: 19px;
        margin-bottom: 10px;
    }

        .cricket-bottom-content h2 i {
            color: #f26d25;
        }

    .cricket-bottom-content p {
        max-width: 1000px;
        color: #a7a7a7;
        font-size: 12px;
        line-height: 1.8;
    }


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

@media (max-width: 900px) {

    .cricket-content-section {
        padding: 55px 0;
    }

    .cricket-content-grid {
        grid-template-columns: 1fr;
    }

    .cricket-content-header {
        margin-bottom: 32px;
    }

        .cricket-content-header h1 {
            font-size: 36px;
        }
}


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

@media (max-width: 600px) {

    .cricket-content-section {
        padding: 42px 0;
    }

    .cricket-content-header {
        margin-bottom: 25px;
    }

    .cricket-content-badge {
        font-size: 8px;
        letter-spacing: 1.2px;
        padding: 6px 12px;
    }

    .cricket-content-header h1 {
        margin-top: 14px;
        font-size: 28px;
        line-height: 1.15;
        letter-spacing: -.8px;
    }

    .cricket-content-header > p {
        margin-top: 13px;
        font-size: 11px;
        line-height: 1.7;
    }

    .cricket-content-grid {
        gap: 14px;
        margin-bottom: 14px;
    }

    .cricket-content-box {
        padding: 20px 17px;
        border-radius: 11px;
    }

        .cricket-content-box h2 {
            font-size: 19px !important;
            gap: 9px;
            margin-bottom: 13px;
        }

    .content-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
        border-radius: 8px;
        font-size: 12px;
    }

    .cricket-content-box > p {
        font-size: 13px;
        line-height: 1.75;
    }

    .cricket-list {
        gap: 9px;
    }

        .cricket-list li {
            padding: 10px;
            gap: 9px;
        }

    .list-icon {
        width: 27px;
        height: 27px;
        min-width: 27px;
    }

    .cricket-list strong {
        font-size: 11px;
    }

    .cricket-list p {
        font-size: 9px;
    }

    .cricket-feature-list {
        gap: 8px;
    }

        .cricket-feature-list li {
            font-size: 13px;
        }

    .cricket-mini-list {
        grid-template-columns: 1fr;
        gap: 9px;
    }

        .cricket-mini-list li {
            font-size: 13px;
        }

    .cricket-bottom-content {
        padding: 20px 17px;
        margin-top: 14px;
    }

        .cricket-bottom-content h2 {
            font-size: 15px;
        }

    summary {
        list-style: none;
        cursor: pointer;
        padding: 18px 17px;
        font-size: 14px;
        color: #f26d25;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 600;
    }

    .cricket-bottom-content p {
        font-size: 13px;
        line-height: 1.7;
    }
}


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

@media (max-width: 380px) {

    .cricket-content-header h1 {
        font-size: 25px;
    }

    .cricket-content-box {
        padding: 17px 14px;
    }

        .cricket-content-box h2 {
            font-size: 14px;
        }

    .content-icon {
        width: 30px;
        height: 30px;
        min-width: 30px;
    }
}

/* If the project does not contain website/images/logo.png,
   the fallback wordmark becomes visible automatically. */

.hero-bg.abot-banner-latest {
    position: absolute;
    inset: 0;
    background: url(./images/about_banner.png) center / cover no-repeat;
    filter: saturate(.8);
    transform: scale(1.02);
}

.hero-bg.contact-banner-latest {
    position: absolute;
    inset: 0;
    background: url(./images/contct_banner.png) center / cover no-repeat;
    filter: saturate(.8);
    transform: scale(1.02);
}



/* =========================================================
   PREMIUM CONTACT SECTION
   ========================================================= */

.contact-section {
    width: 100%;
    padding: 75px 0;
    position: relative;
    overflow: hidden;
    background: radial-gradient( circle at 8% 20%, rgba(255, 208, 0, .08), transparent 30% ), radial-gradient( circle at 90% 75%, rgba(255, 208, 0, .055), transparent 32% ), #050505;
    border-top: 1px solid rgba(255, 208, 0, .14);
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.contact-section-heading {
    max-width: 850px;
    margin: 0 auto 45px;
    text-align: center;
}


.contact-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    border-radius: 50px;
    color: #f26d25;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
    background: rgba(255, 208, 0, .06);
    border: 1px solid rgba(255, 208, 0, .35);
}


    .contact-badge i {
        font-size: 11px;
    }


.contact-section-heading h1 {
    margin-top: 16px;
    font-family: Montserrat, sans-serif;
    font-size: clamp( 32px, 4vw, 50px );
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -1.5px;
    color: #fff;
}


    .contact-section-heading h1 span {
        color: #f26d25;
    }


.contact-section-heading > p {
    max-width: 760px;
    margin: 17px auto 0;
    color: #a7a7a7;
    font-size: 13px;
    line-height: 1.8;
}


/* =========================================================
   MAIN GRID
   ========================================================= */

.contact-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 25px;
    align-items: stretch;
}


/* =========================================================
   LEFT INFORMATION
   ========================================================= */

.contact-information {
    padding: 32px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, .09);
    background: linear-gradient( 145deg, rgba(255, 208, 0, .045), rgba(255, 255, 255, .012) );
    position: relative;
    overflow: hidden;
}


    /* golden glow */

    .contact-information::before {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        right: -130px;
        top: -130px;
        border-radius: 50%;
        background: rgba(255, 208, 0, .06);
        filter: blur(45px);
        pointer-events: none;
    }


.contact-small-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #f26d25;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}


    .contact-small-title i {
        font-size: 11px;
    }


.contact-content-top h2 {
    margin-top: 13px;
    margin-bottom: 13px;
    font-family: Montserrat, sans-serif;
    font-size: 29px;
    line-height: 1.15;
    color: #fff;
}


    .contact-content-top h2 span {
        color: #f26d25;
    }


.contact-content-top > p {
    color: #a4a4a4;
    font-size: 13px;
    line-height: 1.8;
    max-width: 560px;
}


/* =========================================================
   CONTACT INFO CARDS
   ========================================================= */

.contact-info-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 27px;
}


.contact-info-card {
    min-height: 82px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .27);
    border: 1px solid rgba(255, 255, 255, .07);
    transition: all .3s ease;
}


    .contact-info-card:hover {
        border-color: rgba(255, 208, 0, .35);
        background: rgba(255, 208, 0, .035);
        transform: translateY(-2px);
    }


.contact-info-icon {
    width: 37px;
    height: 37px;
    min-width: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #f26d25;
    font-size: 13px;
    background: rgba(255, 208, 0, .09);
    border: 1px solid rgba(255, 208, 0, .28);
}


.contact-info-card span {
    display: block;
    color: #888;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 3px;
}


.contact-info-card strong {
    display: block;
    color: #fff;
    font-size: 11px;
    word-break: break-word;
}


.contact-info-card small {
    display: block;
    color: #777;
    font-size: 11px;
    margin-top: 3px;
    line-height: 1.35;
}


/* =========================================================
   CONTACT FEATURES
   ========================================================= */

.contact-features {
    margin-top: 25px;
    padding-top: 21px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}


    .contact-features h3 {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: #fff;
        margin-bottom: 13px;
    }


        .contact-features h3 i {
            color: #f26d25;
        }


    .contact-features ul {
        list-style: none;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 9px 18px;
    }


    .contact-features li {
        display: flex;
        align-items: flex-start;
        gap: 7px;
        color: #aaa;
        font-size: 12px;
        line-height: 1.5;
    }


        .contact-features li i {
            color: #f26d25;
            font-size: 9px;
            margin-top: 2px;
        }


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

.contact-form-wrapper {
    padding: 32px;
    border-radius: 15px;
    background: linear-gradient( 145deg, #101010, #080808 );
    border: 1px solid rgba(255, 208, 0, .23);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}


.contact-form-header > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #f26d25;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
}


.contact-form-header h2 {
    margin-top: 11px;
    font-family: Montserrat, sans-serif;
    font-size: 27px;
    color: #fff;
}


    .contact-form-header h2 strong {
        color: #f26d25;
    }


.contact-form-header p {
    color: #858585;
    font-size: 13px;
    line-height: 1.6;
    margin-top: 7px;
    margin-bottom: 22px;
}


/* =========================================================
   FORM ROW
   ========================================================= */

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}


.form-group {
    margin-bottom: 14px;
}


    .form-group label {
        display: block;
        margin-bottom: 6px;
        color: #d0d0d0;
        font-size: 13px;
        font-weight: 700;
    }


/* =========================================================
   INPUT
   ========================================================= */

.input-wrapper {
    position: relative;
    width: 100%;
}


    .input-wrapper > i:first-child {
        position: absolute;
        left: 13px;
        top: 50%;
        transform: translateY(-50%);
        color: #f26d25;
        font-size: 11px;
        pointer-events: none;
        z-index: 2;
    }


    .input-wrapper input,
    .input-wrapper select,
    .input-wrapper textarea {
        width: 100%;
        border: 1px solid #292929;
        outline: none;
        border-radius: 8px;
        background: #0b0b0b;
        color: #fff;
        font-family: Inter, sans-serif;
        font-size: 11px;
        transition: all .25s ease;
    }


    .input-wrapper input,
    .input-wrapper select {
        height: 43px;
        padding: 0 35px;
    }


    .input-wrapper textarea {
        min-height: 115px;
        resize: vertical;
        padding: 12px 35px;
        line-height: 1.6;
    }


        .input-wrapper input::placeholder,
        .input-wrapper textarea::placeholder {
            color: #5d5d5d;
        }


    .input-wrapper select {
        appearance: none;
        cursor: pointer;
    }


        .input-wrapper select option {
            background: #111;
            color: #fff;
        }


.select-arrow {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #777 !important;
    font-size: 8px !important;
    pointer-events: none;
}


/* Textarea icon */

.textarea-wrapper > i:first-child {
    top: 17px;
    transform: none;
}


/* Focus */

.input-wrapper input:focus,
.input-wrapper select:focus,
.input-wrapper textarea:focus {
    border-color: #f26d25;
    box-shadow: 0 0 0 3px rgba(255, 208, 0, .07);
    background: #0d0d0d;
}


/* =========================================================
   CHECKBOX
   ========================================================= */

.contact-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 3px 0 17px;
    color: #888;
    font-size: 12px;
    line-height: 1.5;
    cursor: pointer;
}


    .contact-checkbox input {
        appearance: none;
        width: 15px;
        height: 15px;
        min-width: 15px;
        border-radius: 4px;
        border: 1px solid #444;
        background: #090909;
        cursor: pointer;
        position: relative;
    }


        .contact-checkbox input:checked {
            background: #f26d25;
            border-color: #f26d25;
        }


            .contact-checkbox input:checked::after {
                content: "\f00c";
                font-family: "Font Awesome 6 Free";
                font-weight: 900;
                position: absolute;
                color: #050505;
                font-size: 8px;
                left: 3px;
                top: 2px;
            }


/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.contact-submit-btn {
    width: 100%;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 8px;
    background: #f26d25;
    color: #050505;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    transition: all .25s ease;
}


    .contact-submit-btn:hover {
        background: #ffe05b;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(255, 208, 0, .18);
    }


    .contact-submit-btn i {
        font-size: 11px;
    }


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

@media (max-width: 950px) {

    .contact-section {
        padding: 60px 0;
    }

    .contact-main-grid {
        grid-template-columns: 1fr;
    }

    .contact-information,
    .contact-form-wrapper {
        padding: 27px;
    }
}


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

@media (max-width: 600px) {

    .contact-section {
        padding: 45px 0;
    }


    .contact-section-heading {
        margin-bottom: 28px;
    }


    .contact-badge {
        font-size: 8px;
        padding: 6px 12px;
    }


    .contact-section-heading h1 {
        font-size: 29px;
        letter-spacing: -.8px;
    }


    .contact-section-heading > p {
        font-size: 10px;
        line-height: 1.7;
        margin-top: 12px;
    }


    .contact-main-grid {
        gap: 15px;
    }


    .contact-information,
    .contact-form-wrapper {
        padding: 20px 16px;
        border-radius: 11px;
    }


    .contact-content-top h2 {
        font-size: 22px;
    }


    .contact-content-top > p {
        font-size: 10px;
    }


    .contact-info-cards {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 20px;
    }


    .contact-info-card {
        min-height: 68px;
    }


    .contact-features ul {
        grid-template-columns: 1fr;
        gap: 8px;
    }


    .contact-form-header h2 {
        font-size: 22px;
    }


    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }


    .form-group {
        margin-bottom: 12px;
    }


    .input-wrapper input,
    .input-wrapper select {
        height: 45px;
        font-size: 10px;
    }


    .input-wrapper textarea {
        min-height: 110px;
        font-size: 10px;
    }


    .contact-submit-btn {
        height: 45px;
        font-size: 11px;
    }
}


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

@media (max-width: 380px) {

    .contact-section-heading h1 {
        font-size: 25px;
    }


    .contact-information,
    .contact-form-wrapper {
        padding: 17px 13px;
    }


    .contact-content-top h2 {
        font-size: 20px;
    }


    .contact-info-card strong {
        font-size: 10px;
    }
}

img.footer-logo-latest {
    width: 100%;
    max-width: 54%;
}


.cricket-feature-list {
    list-style: none;
    padding: 0;
    margin: 25px 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.cricket-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

    .cricket-feature-list li > i {
        flex-shrink: 0;
        color: #ffffff;
        font-size: 12px;
        margin-top: 4px;
        background: #f26d25;
    }

.cricket-feature-list .feature-content {
    flex: 1;
    min-width: 0;
}

    .cricket-feature-list .feature-content h3 {
        font-size: 19px;
        line-height: 1.4;
        font-weight: 700;
        color: #f26d25;
        margin: 0 0 10px;
    }

    .cricket-feature-list .feature-content p {
        font-size: 15px;
        line-height: 1.8;
        color: #fff;
        margin: 0;
    }

/*.cricket-feature-list li:hover {
    background: #fff;
    border-color: #16a34a;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
}*/

/* Tablet */
@media (max-width: 768px) {
    .cricket-feature-list {
        grid-template-columns: 1fr;
        gap: 15px;
    }

        .cricket-feature-list li {
            padding: 18px;
        }

        .cricket-feature-list .feature-content h3 {
            font-size: 18px;
        }

        .cricket-feature-list .feature-content p {
            font-size: 14px;
        }
}

/* Mobile */
@media (max-width: 480px) {
    .cricket-feature-list {
        margin: 20px 0;
        gap: 12px;
    }

        .cricket-feature-list li {
            padding: 15px;
            gap: 10px;
            border-radius: 9px;
        }

            .cricket-feature-list li > i {
                font-size: 16px;
            }

        .cricket-feature-list .feature-content h3 {
            font-size: 16px;
            margin-bottom: 7px;
        }

        .cricket-feature-list .feature-content p {
            font-size: 13px;
            line-height: 1.7;
        }
}
.container.hero-.grid {
    position: relative !important;
}
.hero-buttons.btn-latestss {
    margin: auto;
    display: block;
    margin-top: 22px;
}

.hero-bg {
    position: absolute;
  
    inset: 0;
    background: url(./images/banner.png) center / cover no-repeat;
    filter: saturate(.8);
    transform: scale(1.02);
}


/* Footer */
.site-footer {
    width: 100%;
    background: #071326;
    color: #ffffff;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
    padding-top: 35px;
    padding-bottom: 35px;
}

/* Left section */
.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    min-width: 0;
}

.footer-logo-link {
    display: inline-flex;
    align-items: center;
}

.footer-logo-latest {
    display: block;
    width: 175px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Social icons */
.socials {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

    .socials a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        color: #ffffff;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        font-size: 16px;
        text-decoration: none;
        transition: all 0.25s ease;
    }

        .socials a:hover {
            color: #101828;
            background: #ffd33d;
            border-color: #ffd33d;
            transform: translateY(-3px);
        }

/* Right section */
.footer-description {
    width: 100%;
    max-width: 480px;
    justify-self: end;
}

    .footer-description p {
        margin: 0;
        color: #cbd5e1;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.9;
        text-align: left;
    }

/* Copyright */
.copyright {
    padding: 18px 15px;
    text-align: center;
    color: #aebbd0;
    font-size: 13px;
    line-height: 1.7;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

/* Tablet */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 25px;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .footer-logo-latest {
        width: 145px;
    }

    .footer-description p {
        font-size: 14px;
        line-height: 1.8;
    }

    .socials {
        gap: 8px;
    }

        .socials a {
            width: 36px;
            height: 36px;
            font-size: 14px;
        }
}

/* Mobile */
@media (max-width: 520px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 28px 20px;
    }

    .footer-brand {
        align-items: center;
        text-align: center;
        gap: 16px;
    }

    .footer-logo-latest {
        width: 155px;
    }

    .socials {
        justify-content: center;
        gap: 10px;
    }

    .footer-description {
        max-width: 100%;
        justify-self: stretch;
    }

        .footer-description p {
            font-size: 14px;
            line-height: 1.8;
            text-align: center;
        }

    .copyright {
        padding: 15px 12px;
        font-size: 12px;
    }
}

/* Extra small mobile */
@media (max-width: 360px) {
    .footer-grid {
        padding-right: 15px;
        padding-left: 15px;
    }

    .footer-logo-latest {
        width: 135px;
    }

    .socials a {
        width: 33px;
        height: 33px;
    }
}