/*
  PLAYVORA WEBSITE - MAIN STYLESHEET
  Edit colors, spacing, fonts and layout here.
  Original compiled stylesheet consolidated into this one file.
*/
@font-face {
    font-family:Inter;
    font-style:normal;
    font-weight:100 900;
    font-display:swap;
    src:url(../media/ba9851c3c22cd980-s.woff2) format("woff2");
    unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f
}
@font-face {
    font-family:Inter;
    font-style:normal;
    font-weight:100 900;
    font-display:swap;
    src:url(../media/21350d82a1f187e9-s.woff2) format("woff2");
    unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116
}
@font-face {
    font-family:Inter;
    font-style:normal;
    font-weight:100 900;
    font-display:swap;
    src:url(../media/c5fe6dc8356a8c31-s.woff2) format("woff2");
    unicode-range:u+1f??
}
@font-face {
    font-family:Inter;
    font-style:normal;
    font-weight:100 900;
    font-display:swap;
    src:url(../media/19cfc7226ec3afaa-s.woff2) format("woff2");
    unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff
}
@font-face {
    font-family:Inter;
    font-style:normal;
    font-weight:100 900;
    font-display:swap;
    src:url(../media/df0a9ae256c0569c-s.woff2) format("woff2");
    unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab
}
@font-face {
    font-family:Inter;
    font-style:normal;
    font-weight:100 900;
    font-display:swap;
    src:url(../media/8e9860b6e62d6359-s.woff2) format("woff2");
    unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff
}
@font-face {
    font-family:Inter;
    font-style:normal;
    font-weight:100 900;
    font-display:swap;
    src:url(../media/e4af272ccee01ff0-s.p.woff2) format("woff2");
    unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd
}
@font-face {
    font-family:Inter Fallback;
    src:local("Arial");
    ascent-override:90.44%;
    descent-override:22.52%;
    line-gap-override:0.00%;
    size-adjust:107.12%
}
.__className_f367f3 {
    font-family:Inter,Inter Fallback;
    font-style:normal
}
:root {
    --primary-color:#c3a523;
    --primary-hover:#ecb50e;
    --secondary-color:#E87914;
    --secondary-hover:#c65708;
    --accent-emerald:#F5C542;
    --accent-blue:#b67e15;
    --bg-dark:#ffffff;
    --bg-dark-alt-1: linear-gradient(
    135deg,
    #0d0707 0%,
    #210b0b 45%,
    #3a1212 100%
);
    --bg-dark-alt: linear-gradient(
    135deg,
    #3a1212 0%,
    #210b0b 45%,
    #0d0707 100%
);
    --bg-card: linear-gradient(145deg, #120a09 0%, #21100d 55%, #32140e 100%);
    --bg-card-hover: linear-gradient(145deg, #180b09 0%, #30120d 50%, #4a1a0e 100%);
    --bg-card-elevated: linear-gradient(145deg, #100908 0%, #26100c 55%, #3d160d 100%);


    --text-main:#F8FAFC;
    --text-sub:#CBD5E1;
    --text-muted:#94A3B8;
    --border-color:rgba(65, 17, 16, 0.215);
    --border-glow:rgba(174, 54, 54, 0.4);
    --brand-gradient:linear-gradient(135deg,#FFD54A,#F0A51B 50%,#C65D08);
    --brand-gradient-hover:linear-gradient(135deg,#FFC928,#6366F1 50%,#E87914);
    --brand-glow:0 4px 25px rgba(245, 87, 66, 0.35);
    --transition:all 0.3s cubic-bezier(0.16,1,0.3,1)
}












* {
    margin:0;
    padding:0;
    box-sizing:border-box
}
body {
    font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;
    background:var(--bg-dark);
    color:var(--text-main);
    line-height:1.6;
    -webkit-font-smoothing:antialiased
}
body,html {
    overflow-x:hidden;
    max-width:100%;
    width:100%
}
html {
    scroll-behavior:smooth
}
a {
    text-decoration:none;
    color:inherit
}
ul {
    list-style:none
}
.container {
    max-width:1200px;
    margin:0 auto;
    padding:0 20px
}
.text-center {
    text-align:center
}
.mt-5 {
    margin-top:3rem
}
.highlight-gradient {
    background:linear-gradient(135deg, #C91835, #8F0D27 45%, #4A0618);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    display:inline-block
}
.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 28px;
    border-radius:8px;
    font-weight:700;
    letter-spacing:.5px;
    cursor:pointer;
    transition:all .35s cubic-bezier(.175,.885,.32,1.275);
    text-align:center;
    text-transform:uppercase;
    font-size:14px;
    position:relative;
    overflow:hidden
}
.btn-primary {
    background:var(--brand-gradient);
    color:#040711;
    font-weight:800;
    border:none;
    box-shadow:0 4px 20px rgba(81, 11, 11, 0.35),0 0 10px rgba(54, 5, 5, 0.2)
}
.btn-primary:hover {
    transform:translateY(-3px) scale(1.02);
    box-shadow:0 8px 30px rgba(61, 49, 15, 0.5),0 0 20px rgba(83, 8, 8, 0.4);
    color:#000
}
.btn-secondary {
    background:rgba(27,24,15,.6);
    border:1.5px solid rgba(99, 80, 27, 0.4);
    color:var(--primary-color);
    backdrop-filter:blur(10px)
}
.btn-secondary:hover {
    background:rgba(97, 79, 28, 0.12);
    border-color:var(--primary-color);
    color:#fff;
    transform:translateY(-3px) scale(1.02);
    box-shadow:0 8px 25px rgba(245,197,66,.25)
}
.btn-block {
    display:flex;
    width:100%
}
.zorba-logo-link {
    display:inline-flex;
    align-items:center;
    text-decoration:none;
    transition:transform .3s cubic-bezier(.16,1,.3,1)
}
.zorba-logo-link:hover {
    transform:translateY(-1px) scale(1.02)
}
.zorba-logo-wrapper {
    display:flex;
    align-items:center;
    gap:12px
}
.zorba-logo-emblem-container {
    position:relative;
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center
}
.zorba-emblem-glow {
    position:absolute;
    inset:-2px;
    background:linear-gradient(135deg,rgba(147, 120, 45, 0.8),rgba(90, 54, 24, 0.8));
    border-radius:12px;
    filter:blur(6px);
    opacity:.6;
    transition:opacity .3s ease
}
.zorba-logo-link:hover .zorba-emblem-glow {
    opacity:.9;
    filter:blur(8px)
}
.zorba-emblem-shield {
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center
}
.zorba-svg-mark {
    filter:drop-shadow(0 0 6px rgba(245,197,66,.4));
    transition:filter .3s ease
}
.zorba-logo-link:hover .zorba-svg-mark {
    filter:drop-shadow(0 0 10px rgba(245,197,66,.8))
}
.zorba-wordmark {
    display:flex;
    flex-direction:column;
    justify-content:center
}
.zorba-title-row {
    display:flex;
    align-items:baseline;
    gap:4px;
    line-height:1
}
.zorba-brand-name {
    color:#FFFFFF;
    text-shadow:0 2px 10px rgba(0,0,0,.6)
}
.zorba-brand-accent,.zorba-brand-name {
    font-size:24px;
    font-weight:900;
    font-family:Inter,sans-serif;
    letter-spacing:-.5px
}
.zorba-brand-accent {
    background:linear-gradient(135deg,#FFD54A,#E87914);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:0 0 20px rgba(245,197,66,.4)
}
.zorba-live-beacon {
    width:6px;
    height:6px;
    background:#FFD54A;
    border-radius:50%;
    margin-left:2px;
    box-shadow:0 0 8px #FFD54A,0 0 14px #FFD54A;
    animation:live-beacon-pulse 2s ease-in-out infinite
}
@keyframes live-beacon-pulse {
    0%,to {
        opacity:1;
        transform:scale(1)
    }
    50% {
        opacity:.4;
        transform:scale(.8)
    }
}
.zorba-tagline {
    display:flex;
    align-items:center;
    gap:4px;
    font-size:8.5px;
    font-weight:800;
    color:#FFC928;
    letter-spacing:4px;
    text-transform:uppercase;
    margin-top:4px
}
.tagline-dot {
    width:3px;
    height:3px;
    background:#E87914;
    border-radius:50%
}











header,header.zorba-header {
    background:rgba(8,8,8,.94);
    backdrop-filter:blur(14px);
    position:sticky;
    top:0;
    z-index:1000;
    border-bottom:1px solid rgba(245,197,66,.12)
}
.header-container {
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:80px
}
nav ul {
    display:flex;
    gap:30px
}
nav a {
    font-weight:600;
    font-size:15px;
    color:var(--text-sub);
    transition:var(--transition);
    position:relative;
    padding:6px 0
}
nav a.active,nav a:hover {
    color:var(--primary-color)
}
nav a:after {
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:0;
    height:2px;
    background:var(--brand-gradient);
    border-radius:2px;
    transition:width .3s ease
}
nav a.active:after,nav a:hover:after {
    width:100%
}
.header-cta-btn {
    padding:10px 20px;
    font-size:13px;
    border-radius:6px;
    letter-spacing:.5px
}


.mobile-menu-toggle {
    display:none;
    flex-direction:column;
    justify-content:space-between;
    width:30px;
    height:21px;
    background:transparent;
    border:none;
    cursor:pointer;
    z-index:1001;
    padding:0
}
.mobile-menu-toggle span {
    display:block;
    width:100%;
    height:3px;
    background:#fff;
    border-radius:3px;
    transition:all .3s ease
}
.mobile-menu-toggle.active span:first-child {
    transform:translateY(9px) rotate(45deg);
    background:var(--primary-color)
}
.mobile-menu-toggle.active span:nth-child(2) {
    opacity:0
}
.mobile-menu-toggle.active span:nth-child(3) {
    transform:translateY(-9px) rotate(-45deg);
    background:var(--primary-color)
}
.mobile-menu-overlay {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background:rgba(8,8,8,.85);
    backdrop-filter:blur(8px);
    z-index:998;
    opacity:0;
    visibility:hidden;
    transition:all .3s ease
}
.mobile-menu-overlay.active {
    opacity:1;
    visibility:visible
}
.hero {
    position:relative;
    padding:160px 0 100px;
    background:url(../images/hero.png) 50%/cover no-repeat;
    text-align:center
}
.hero-overlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    
  }
.hero-content {
    position:relative;
    z-index:1
}
.hero h1 {
    font-size:3.5rem;
    margin-bottom:20px;
    font-weight:900;
    text-shadow:0 5px 25px rgba(0,0,0,1),0 2px 10px rgba(0,0,0,.8);
    letter-spacing:-.5px
}
.hero .highlight {
    background:linear-gradient(135deg,#FFD54A,#FFC928 50%,#E87914);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:none
}
.hero p {
    font-size:1.15rem;
    max-width:800px;
    margin:0 auto 30px;
    color:var(--text-sub);
    text-shadow:0 3px 15px rgba(0,0,0,1);
    font-weight:500;
    line-height:1.7
}

.hero-logo-letter {
  display: inline-block;
  height: 1.5em;
  width: 1.5em;
  object-fit: contain;
  vertical-align: -0.2em;
  margin-left: -0.15em;
  margin-right: -0.15em;
}

.hero-buttons {
    flex-direction:row;
    gap:20px;
    margin-bottom:50px
}
.hero-buttons,.hero-buttons .btn {
    display:flex;
    align-items:center;
    justify-content:center
}
.hero-buttons .btn {
    min-width:240px;
    font-size:15px;
    gap:10px;
    padding:16px 30px;
    border-radius:10px
}
.hero-buttons .btn:after {
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:50%;
    height:100%;
    background:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.4) 50%,rgba(255,255,255,0));
    transform:skewX(-25deg);
    transition:all .75s ease
}
.hero-buttons .btn:hover:after {
    left:125%
}
.hero-buttons .btn svg {
    transition:transform .3s ease
}
.hero-buttons .btn:hover svg {
    transform:translateX(5px)
}
.device-icons {
    display:flex;
    justify-content:center;
    gap:30px
}
.device {
    display:flex;
    flex-direction:column;
    align-items:center;
    font-size:12px;
    color:var(--text-sub);
    opacity:.9;
    transition:var(--transition)
}
.device:hover {
    opacity:1;
    transform:translateY(-5px);
    color:var(--primary-color)
}
.device svg {
    margin-bottom:8px;
    width:40px;
    height:40px;
    filter:brightness(0) invert(1);
    transition:var(--transition)
}
.device:hover svg {
    filter:drop-shadow(0 0 8px rgba(245,197,66,.8));
    color:var(--primary-color)
}

.stats-bar {
    padding: 60px 0;
    border-top: none;
    border-bottom: 1px solid rgba(245,197,66,.12);

    background: linear-gradient(
        180deg,
        #070505 0%,
        #120707 22%,
        #24100f 55%,
        #361414 100%
    );
}

.stats-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    gap: 30px;
}

.stat-item {
    flex: 1;
}

.stats-container {
    display:flex;
    justify-content:space-around;
    text-align:center
}
.stat-item {
    transition:transform .4s ease;
    cursor:default
}
.stat-item:hover {
    transform:translateY(-5px)
}
.stat-icon svg {
    color:var(--primary-color);
    margin-bottom:15px;
    filter:drop-shadow(0 0 10px rgba(245,197,66,.4));
    transition:all .4s cubic-bezier(.175,.885,.32,1.275)
}
.stat-item:hover .stat-icon svg {
    transform:scale(1.15) rotate(5deg);
    filter:drop-shadow(0 0 18px rgba(245,197,66,.8));
    color:#FFC928
}
.stat-value {
    font-size:2rem;
    font-weight:800;
    margin-bottom:5px;
    color:#fff
}
.stat-label {
    font-size:12px;
    color:var(--text-muted);
    letter-spacing:1.5px;
    font-weight:700
}
.channels-showcase {
    padding:80px 0;
    background:var(--bg-dark)
}
.subtitle {
    color: #800020;
    font-weight:700;
    margin-bottom:10px;
    text-transform:uppercase;
    font-size:13px;
    letter-spacing:2px
}
h2 {

    font-size:2.5rem;
    margin-bottom:40px;
    font-weight:800;
    letter-spacing:-.5px
    
}
.channel-logos {
    overflow:hidden;
    white-space:nowrap;
    position:relative;
    padding:40px 0;
    width:100%;
    margin-bottom:50px
}
.channel-logos:after,.channel-logos:before {
    content:"";
    position:absolute;
    top:0;
    width:150px;
    height:100%;
    z-index:2;
    pointer-events:none
}
.channel-logos:before {
    left:0;
    background:linear-gradient(to right,var(--bg-dark),transparent)
}
.channel-logos:after {
    right:0;
    background:linear-gradient(to left,var(--bg-dark),transparent)
}
.logos-track {
    display:inline-block;
    animation:marquee 30s linear infinite
}
.logos-track img {
    height:65px;
    margin:0 40px;
    vertical-align:middle;
    transition:transform .3s ease,filter .3s ease;
    object-fit:contain
}
.logos-track img:hover {
    transform:scale(1.1)
}
@keyframes marquee {
    0% {
        transform:translateX(0)
    }
    to {
        transform:translateX(-50%)
    }
}
.movie-posters {
    display:flex;
    justify-content:center;
    gap:0;
    width:100%;
    overflow:hidden
}
.movie-posters .poster-card {
    position:relative;
    width:16.666%;
    height:auto;
    aspect-ratio:2/3;
    overflow:hidden;
    flex-shrink:0;
    transition:var(--transition)
}
.movie-posters .poster-card:hover {
    transform:scale(1.05);
    z-index:10;
    box-shadow:0 0 25px rgba(245,197,66,.3)
}
.poster-card img.poster-img {
    width:100%;
    height:100%;
    object-fit:cover
}
.poster-overlay {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:40%;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding-bottom:20px
}
.poster-overlay img.platform-logo {
    max-width:60%;
    max-height:40px;
    object-fit:contain;
    filter:brightness(0) invert(1)
}
.overlay-prime {
    background:linear-gradient(0deg,rgba(0,168,225,.9) 0,rgba(0,168,225,0))
}
.overlay-netflix {
    background:linear-gradient(0deg,rgba(229,9,20,.9) 0,rgba(229,9,20,0))
}
.overlay-hbomax {
    background:linear-gradient(0deg,rgba(62,10,112,.9) 0,rgba(62,10,112,0))
}
.overlay-appletv {
    background:linear-gradient(0deg,rgba(0,0,0,.9) 0,rgba(0,0,0,0))
}
.overlay-hulu {
    background:linear-gradient(0deg,rgba(28,231,131,.9) 0,rgba(28,231,131,0))
}
.pricing {
    padding:90px 0;
    background:var(--bg-dark-alt);
    position:relative
}



.device-tabs {
    display:inline-flex;
    justify-content:center;
    gap:6px;
    background:rgba(27,24,15,.8);
    border:1px solid var(--border-color);
    border-radius:40px;
    padding:6px;
    backdrop-filter:blur(10px);
    box-shadow:0 10px 30px rgba(0,0,0,.3)
}
.device-tabs button {
    display:flex;
    align-items:center;
    background:transparent;
    border:none;
    color:var(--text-muted);
    padding:10px 22px;
    border-radius:30px;
    cursor:pointer;
    font-weight:700;
    font-size:14px;
    transition:var(--transition)
}
.device-tabs button:hover {
    color:#fff
}
.device-tabs button.active {
    background:var(--brand-gradient);
    color:#040711;
    box-shadow:0 4px 15px rgba(245,197,66,.35)
}
.pricing-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
    margin-top:20px
}
.pricing-card {
    background:var(--bg-card);
    padding:35px 24px;
    border-radius:16px;
    text-align:center;
    border:1px solid var(--border-color);
    transition:all .4s cubic-bezier(.16,1,.3,1);
    display:flex;
    flex-direction:column;
    position:relative;
    overflow:hidden
}
.pricing-card:hover {
    transform:translateY(-8px);
    border-color:rgba(245, 81, 66, 0.4);
    box-shadow:0 15px 35px rgba(0,0,0,.5),0 0 20px rgba(245,197,66,.15)
}
.pricing-card.popular {
    background:linear-gradient(160deg,#282213,#1B180F);
    border: 2px solid #571f15;;
    box-shadow:0 15px 40px rgba(0,0,0,.6),0 0 30px rgba(245,197,66,.25);
    transform:scale(1.03);
    z-index:2
}
.pricing-card.popular:hover {
    transform:scale(1.03) translateY(-8px);
    box-shadow:0 20px 50px rgba(0,0,0,.7),0 0 40px rgba(245, 66, 66, 0.4)
}
.card-popular-pill {
    position:absolute;
    top:14px;
    right:14px;
    background:var(--brand-gradient);
    color:#040711;
    font-size:10px;
    font-weight:800;
    padding:4px 10px;
    border-radius:20px;
    letter-spacing:.5px;
    text-transform:uppercase
}
.plan-header .plan-title {
    font-size:1.4rem;
    margin-top:0;
    margin-bottom:5px;
    color:#FFFFFF;
    font-weight:800;
    letter-spacing:.5px
}
.plan-header .device-label {
    color:var(--primary-color);
    font-size:13px;
    font-weight:700;
    margin-bottom:15px;
    text-transform:uppercase;
    letter-spacing:1px
}
.price {
    display:flex;
    align-items:baseline;
    justify-content:center;
    margin-bottom:25px;
    color:#FFFFFF
}
.price .currency {
    font-size:1.8rem;
    font-weight:700;
    color:#7c0c28;
    margin-right:2px
}
.price .price-value {
    font-size:3.2rem;
    font-weight:900;
    line-height:1
}
.price .period {
    font-size:14px;
    color:var(--text-muted);
    font-weight:600;
    margin-left:4px
}
.features {
    list-style:none;
    padding:0;
    margin-bottom:30px;
    flex-grow:1;
    text-align:left
}
.features li {
    display:flex;
    align-items:center;
    margin-bottom:12px;
    color:var(--text-sub);
    font-size:13.5px;
    font-weight:500;
    line-height:1.4
}
.features li .check-icon {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#470808b0;
    color:#967f7f;
    font-size:11px;
    font-weight:900;
    margin-right:10px;
    flex-shrink:0
}
.btn-popular-glow {
    box-shadow:0 4px 20px rgba(245,197,66,.45),0 0 15px rgba(198,93,8,.3)!important
}
.lifetime-plan {
    padding:70px 0
}
.lifetime-container-new {
    display:flex;
    align-items:center;
    background:linear-gradient(145deg,#361b1b,#121008);
    border:1px solid rgba(245,197,66,.25);
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 25px 60px rgba(0,0,0,.6),0 0 40px rgba(245,197,66,.12);
    margin:30px 0
}
.lifetime-image-new {
    flex:1;
    position:relative;
    height:100%;
    min-height:500px
}
.lifetime-image-new img {
    position:absolute;
    top:0;
    left:0;
    width:97%;
    height:97%;
    object-fit:cover;

    animation: lifetimeFloat 4s ease-in-out infinite;
}
@keyframes lifetimeFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-10px) scale(1.02);
    }
}

.lifetime-image-new:after {
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:35%;
   
}
.lifetime-badge-overlay {
    position:absolute;
    top:25px;
    left:25px;
    background:var(--brand-gradient);
    color:#040711;
    padding:8px 20px;
    border-radius:30px;
    font-weight:800;
    letter-spacing:1px;
    box-shadow:0 5px 20px rgba(245,197,66,.4);
    z-index:2
}
.lifetime-content-new {
    flex:1.2;
    padding:60px 50px 60px 20px;
    position:relative;
    z-index:3
}
.why-choose-us {
    padding:90px 0;
    background:var(--bg-dark)
}
.features-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px
}
.feature-card.new-card {
    background:var(--bg-card);
    border:1px solid var(--border-color);
    border-radius:14px;
    padding:35px 20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    transition:var(--transition)
}
.feature-card.new-card:hover {
    border-color:rgba(245,197,66,.4);
    transform:translateY(-6px);
    box-shadow:0 15px 30px rgba(0,0,0,.4),0 0 20px rgba(245,197,66,.15)
}
.icon-circle {
    width:64px;
    height:64px;
    background:var(--brand-gradient);
    border-radius:16px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:22px;
    color:#040711;
    box-shadow:0 6px 20px rgba(245,197,66,.3)
}
.feature-card.new-card .card-title {
    font-size:1.15rem;
    font-weight:800;
    margin-top:0;
    margin-bottom:12px;
    color:#fff;
    line-height:1.3
}
.feature-card.new-card .card-desc {
    font-size:13.5px;
    color:var(--text-muted);
    line-height:1.6
}
.supported-devices {
    padding:90px 0;
    background:var(--bg-dark)
}
.supported-subtitle {
    color:var(--primary-color);
    font-size:1.3rem;
    margin-bottom:15px;
    font-weight:700
}
.supported-title {
    font-size:2.5rem;
    margin-bottom:50px;
    font-weight:800
}
.supported-content {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:50px;
    margin-bottom:50px;
    flex-wrap:wrap
}
.supported-text {
    text-align:left;
    max-width:500px
}
.supported-text p {
    font-size:16px;
    color:var(--text-sub);
    line-height:1.7;
    margin-bottom:25px
}
.devices-badges {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
    max-width:950px;
    margin:0 auto
}
.device-badge {
    display:flex;
    align-items:center;
    background:var(--bg-card);
    border:1px solid var(--border-color);
    border-radius:10px;
    padding:12px 18px;
    width:calc(25% - 12px);
    min-width:170px;
    gap:15px;
    transition:var(--transition)
}
.device-badge:hover {
    border-color:var(--primary-color);
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(245,197,66,.15)
}
.badge-icon {
    color:var(--primary-color);
    display:flex
}
.badge-text {
    text-align:left;
    line-height:1.2
}
.badge-text span {
    font-size:10px;
    color:var(--text-muted);
    text-transform:uppercase
}
.badge-text strong {
    font-size:15px;
    color:#fff;
    font-weight:700
}
.support-section {
    padding:50px 0;
    background:var(--bg-dark)
}

.support-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-top:40px
}

.support-card {
    background:var(--bg-card);
    padding:35px 25px;
    text-align:left;
    border-radius:14px;
    border:1px solid var(--border-color);
    transition:var(--transition);
    position:relative;

    /* ADD THESE */
    display:flex;
    flex-direction:column;
}

.support-card:hover {
    transform:translateY(-6px);
    border-color:rgba(245,197,66,.4);
    box-shadow:0 15px 35px rgba(0,0,0,.5),0 0 20px rgba(245,197,66,.15)
}

.support-icon-wrapper {
    width:60px;
    height:60px;
    background:var(--brand-gradient);
    border-radius:14px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:22px;
    color:#040711;
    box-shadow:0 6px 20px rgba(245,197,66,.3);
    transition:transform .4s ease
}

.support-card:hover .support-icon-wrapper {
    transform:rotate(10deg) scale(1.08)
}

.support-card .support-title {
    font-size:18px;
    font-weight:800;
    margin-top:0;
    margin-bottom:12px;
    color:#fff
}

.support-card p {
    font-size:14px;
    color:var(--text-muted);
    line-height:1.6;
    margin:0;

    /* ADD THIS */
    flex-grow:1;
}

.support-card .btn {
    margin-top:25px;
    align-self:flex-start;
}
.testimonials-section {
    padding:90px 0;
    background:var(--bg-dark);
    overflow:hidden
}
.testi-header {
    text-align:center;
    margin-bottom:60px
}
.testi-header .subtitle {
    color:var(--primary-color)
}
.testi-header h2 span {
    color:var(--secondary-color)
}
.testi-carousel-container {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:30px;
    max-width:1200px;
    margin:0 auto;
    padding:20px
}
.testi-card {
    background:var(--bg-card);
    border-radius:16px;
    padding:40px 30px;
    width:360px;
    flex-shrink:0;
    border:1px solid var(--border-color);
    transition:all .4s ease;
    cursor:pointer;
    position:relative
}
.testi-card.active {
    transform:scale(1.06);
    border-color:var(--primary-color);
    box-shadow:0 15px 40px rgba(0,0,0,.6),0 0 30px rgba(245,197,66,.25);
    background:#282213;
    z-index:10
}
.testi-card:hover:not(.active) {
    transform:scale(1.02);
    border-color:rgba(245,197,66,.3)
}
.testi-avatar {
    width:55px;
    height:55px;
    border-radius:50%;
    object-fit:cover;
    margin-bottom:18px;
    border:2px solid var(--primary-color)
}
.testi-stars {
    color:var(--primary-color);
    margin-bottom:18px;
    font-size:15px;
    letter-spacing:2px
}
.testi-text {
    color:var(--text-sub);
    font-size:14.5px;
    line-height:1.7;
    margin-bottom:25px;
    min-height:110px
}
.testi-author {
    color:#fff;
    font-weight:700;
    font-size:16px;
    margin-bottom:4px
}
.testi-handle {
    color:var(--text-muted);
    font-size:13px
}
.testi-date {
    color:#64748B;
    font-size:12px;
    margin-top:20px;
    display:block
}
.testi-controls {
    gap:20px;
    margin-top:50px
}
.testi-btn,.testi-controls {
    display:flex;
    justify-content:center;
    align-items:center
}
.testi-btn {
    width:45px;
    height:45px;
    border-radius:50%;
    background:var(--bg-card);
    border:1px solid var(--border-color);
    color:#fff;
    font-size:18px;
    cursor:pointer;
    transition:var(--transition)
}
.testi-btn:hover {
    background:var(--brand-gradient);
    color:#040711;
    transform:scale(1.1);
    box-shadow:0 4px 15px rgba(245,197,66,.4)
}
.testi-dots {
    display:flex;
    gap:8px;
    align-items:center
}
.testi-dot {
    width:6px;
    height:6px;
    border-radius:50%;
    background:#49402A;
    transition:all .4s ease;
    cursor:pointer
}
.testi-dot.active {
    background:var(--primary-color);
    width:10px;
    height:10px;
    box-shadow:0 0 10px var(--primary-color)
}
.faq-section {
    padding:90px 0;
    background:var(--bg-dark-alt)
}
.faq-section h2 {
    color:#fff;
    font-size:36px;
    font-weight:800;
    margin-bottom:10px
}
.faq-section .subtitle {
    color:var(--text-muted);
    text-transform:none;
    letter-spacing:0;
    font-size:16px;
    margin-bottom:50px
}
.faq-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px 30px;
    max-width:1100px;
    margin:0 auto
}
.faq-item {
    margin-bottom:0;
    text-align:left;
    background:var(--bg-card);
    border:1px solid var(--border-color);
    border-radius:14px;
    overflow:hidden;
    transition:var(--transition)
}
.faq-item:hover {
    border-color:rgba(245,197,66,.35)
}
.faq-heading {
    margin:0;
    padding:0;
    font-size:inherit;
    font-weight:inherit;
    line-height:inherit
}
.faq-question {
    background:transparent;
    color:#FFFFFF;
    font-weight:700;
    font-size:15.5px;
    padding:18px 24px;
    border:none;
    width:100%;
    text-align:left;
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
    transition:var(--transition)
}
.faq-question .icon,.faq-question:hover {
    color:var(--primary-color)
}
.faq-question .icon {
    display:flex;
    justify-content:center;
    align-items:center;
    width:28px;
    height:28px;
    border:1.5px solid rgba(245,197,66,.4);
    border-radius:50%;
    font-size:12px;
    transition:transform .4s ease,border-color .3s;
    flex-shrink:0;
    margin-left:10px
}
.faq-question[aria-expanded=true] .icon {
    transform:rotate(180deg);
    border-color:var(--primary-color);
    background:rgba(245,197,66,.15)
}
.faq-answer {
    max-height:0;
    overflow:hidden;
    transition:max-height .4s ease,padding .4s ease;
    padding:0 24px;
    background:rgba(8,8,8,.5)
}
.faq-answer p {
    padding:16px 0;
    color:var(--text-sub);
    margin:0;
    font-size:14.5px;
    line-height:1.6
}
.faq-item.active {
    border-color:var(--primary-color);
    box-shadow:0 6px 25px rgba(245,197,66,.15)
}
.faq-item.active .faq-answer {
    max-height:250px
}
.custom-footer {
    background:#050505;
    color:var(--text-sub);
    padding:90px 0 0;
    font-size:14px;
    border-top:1px solid rgba(245,197,66,.15)
}
.footer-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid rgba(245,197,66,.1);
    padding-bottom:60px;
    margin-bottom:50px
}
.footer-top-left {
    flex:1;
    max-width:500px
}
.footer-top-left h2 {
    color:#fff;
    font-size:32px;
    margin-bottom:20px;
    font-weight:800;
    letter-spacing:-.5px
}
.footer-top-left p {
    font-size:15px;
    line-height:1.7;
    margin-bottom:35px;
    color:var(--text-muted)
}
.footer-contact-btn {
    display:inline-flex;
    align-items:center;
    background:var(--brand-gradient);
    color:#040711;
    font-weight:800;
    padding:14px 32px;
    border-radius:8px;
    text-decoration:none;
    transition:all .3s ease;
    text-transform:uppercase;
    letter-spacing:.5px;
    box-shadow:0 4px 20px rgba(245,197,66,.3)
}
.footer-contact-btn:hover {
    transform:translateY(-3px);
    box-shadow:0 8px 30px rgba(245,197,66,.5);
    color:#000
}
.footer-map-container {
    flex:1;
    position:relative;
    height:300px;
    display:flex;
    justify-content:flex-end;
    align-items:center
}
.map-wrapper {
    position:relative;
    height:100%;
    aspect-ratio:2754/1398;
    background:url(https://upload.wikimedia.org/wikipedia/commons/e/ec/World_map_blank_without_borders.svg) no-repeat 50%;
    background-size:100% 100%;
    opacity:.8;
    margin-left:auto
}
.map-pin {
    position:absolute;
    width:28px;
    height:38px;
    filter:drop-shadow(0 10px 10px rgba(0,0,0,.5));
    animation:float 3s ease-in-out infinite
}
@keyframes float {
    0% {
        transform:translateY(0)
    }
    50% {
        transform:translateY(-8px)
    }
    to {
        transform:translateY(0)
    }
}
.pin-1 {
    top:24%;
    left:17%;
    color:#FFD54A;
    animation-delay:0s
}
.pin-2 {
    top:50%;
    left:31%;
    color:#FFC928;
    animation-delay:.5s
}
.pin-3 {
    top:19%;
    left:48%;
    color:#E87914;
    animation-delay:1s
}
.pin-4 {
    top:38%;
    left:48%;
    color:#A855F7;
    animation-delay:1.5s
}
.pin-5 {
    top:30%;
    left:74%;
    color:#F5C542;
    animation-delay:2s
}
.footer-bottom-grid {
    display:grid;
    grid-template-columns:2fr 1fr 1.5fr 1fr;
    gap:40px;
    margin-bottom:50px
}
.page-header {
    padding:140px 0 60px;
     background:url(../images/bg-back.png) 50%/cover no-repeat;
   
    text-align:center
}
.page-header h1 {
    font-size:42px;
    font-weight:900;
    color:#fff;
    margin-bottom:20px;
    text-transform:uppercase;
    letter-spacing:-.5px
}
.page-header p {
    color:var(--text-muted);
    font-size:16px;
    max-width:650px;
    margin:0 auto;
    line-height:1.7
}
.blog-section {
    padding:80px 0;
    background:var(--bg-dark);
    min-height:50vh
}
.blog-card {
    background:var(--bg-card);
    border:1px solid var(--border-color);
    border-radius:12px;
    overflow:hidden;
    transition:var(--transition)
}
.blog-card:hover {
    transform:translateY(-6px);
    border-color:rgba(245,197,66,.4)!important;
    box-shadow:0 15px 35px rgba(0,0,0,.5),0 0 20px rgba(245,197,66,.15)
}
.blog-post-header {
    padding:140px 0 60px;
     background:url(../images/bg-back.png) 50%/cover no-repeat;
    border-bottom:1px solid var(--border-color)
}
.blog-post-header h1 {
    font-size:42px;
    font-weight:900;
    color:#fff;
    margin-bottom:20px;
    line-height:1.25
}
.blog-post-meta {
    display:flex;
    gap:20px;
    color:var(--text-muted);
    font-size:14px
}
.blog-post-content {
    padding:60px 0;
    background:var(--bg-dark-alt-1);
    color:var(--text-sub);
    line-height:1.8;
    font-size:16px
}
.blog-post-content h2 {
    color:#fff;
    font-size:28px;
    margin-top:40px;
    margin-bottom:20px;
    border-left:4px solid var(--primary-color);
    padding-left:15px
}
.blog-post-content h3 {
    color:#fff;
    font-size:22px;
    margin-top:30px;
    margin-bottom:15px
}
.blog-post-content p {
    margin-bottom:20px
}
.blog-post-content a {
    color:var(--primary-color);
    text-decoration:none;
    font-weight:700;
    transition:color .3s
}
.blog-post-content a:hover {
    color:#FFC928;
    text-decoration:underline
}
.blog-post-content ol,.blog-post-content ul {
    margin-bottom:20px;
    padding-left:20px
}
.blog-post-content li {
    margin-bottom:10px
}
.blog-post-image {
    width:100%;
    height:auto;
    object-fit:cover;
    border-radius:12px;
    margin-bottom:15px;
    border:1px solid var(--border-color)
}
figcaption {
    text-align:center;
    font-size:14px;
    color:var(--text-muted);
    margin-bottom:40px
}
.contact-content {
    padding:80px 0;
    background:var(--bg-dark)
}
.contact-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px
}
.contact-info {
    padding-right:20px
}
.contact-method {
    display:flex;
    align-items:flex-start;
    margin-bottom:40px
}
.contact-icon {
    width:52px;
    height:52px;
    background:rgba(245,197,66,.1);
    border:1px solid rgba(245,197,66,.25);
    border-radius:12px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-right:20px;
    flex-shrink:0;
    color:var(--primary-color)
}
.contact-details h3 {
    color:#fff;
    font-size:20px;
    margin-bottom:8px
}
.contact-details p {
    color:var(--text-muted);
    margin-bottom:8px;
    font-size:15px;
    line-height:1.6
}
.contact-details a {
    color:var(--primary-color);
    text-decoration:none;
    font-weight:700;
    transition:color .3s
}
.contact-details a:hover {
    color:#fff
}
.contact-form-container {
    background:var(--bg-card);
    padding:40px;
    border-radius:16px;
    border:1px solid var(--border-color);
    box-shadow:0 15px 40px rgba(0,0,0,.5)
}
.contact-form h2 {
    color:#fff;
    font-size:28px;
    margin-bottom:30px
}
.form-group {
    margin-bottom:20px
}
.form-label {
    display:block;
    color:#fff;
    margin-bottom:8px;
    font-weight:600;
    font-size:14px
}
.form-control {
    width:100%;
    padding:14px 15px;
    background:#100E09;
    border:1px solid rgba(245,197,66,.2);
    border-radius:8px;
    color:#fff;
    font-family:Inter,sans-serif;
    font-size:15px;
    transition:all .3s ease
}
.form-control:focus {
    outline:none;
    border-color:var(--primary-color);
    box-shadow:0 0 15px rgba(245,197,66,.25);
    background:#090F20
}
textarea.form-control {
    min-height:150px;
    resize:vertical
}
.submit-btn {
    width:100%;
    padding:16px;
    background:var(--brand-gradient);
    color:#040711;
    border:none;
    border-radius:8px;
    font-size:15px;
    font-weight:800;
    cursor:pointer;
    transition:all .3s ease;
    text-transform:uppercase;
    letter-spacing:1px;
    box-shadow:0 4px 20px rgba(245,197,66,.35)
}
.submit-btn:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 30px rgba(245,197,66,.5)
}
.tutorial-content {
    padding:80px 0;
    background:var(--bg-dark-alt-1);
    color:var(--text-sub);
    line-height:1.8;
    font-size:16px
}
.device-section {
    background:var(--bg-card);
    border:1px solid var(--border-color);
    border-radius:14px;
    padding:40px;
    margin-bottom:40px;
    transition:var(--transition)
}
.device-section:hover {
    border-color:rgba(245,197,66,.3)
}
.device-section h2 {
    color:#fff;
    font-size:26px;
    margin-top:0;
    margin-bottom:20px;
    display:flex;
    align-items:center;
    border-bottom:1px solid rgba(245,197,66,.12);
    padding-bottom:15px
}
.device-section h2 svg {
    margin-right:15px;
    color:var(--primary-color)
}
.device-section ol {
    padding-left:20px;
    margin-bottom:0
}
.device-section li {
    margin-bottom:15px
}
.device-section li:last-child {
    margin-bottom:0
}
.device-section strong {
    color:var(--primary-color)
}
.whatsapp-float-dynamic {
    position:fixed;
    bottom:25px;
    right:30px;
    background:#25D366;
    color:#fff;
    width:60px;
    height:60px;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    border-radius:50%;
    z-index:999;
    box-shadow:0 4px 15px rgba(37,211,102,.4);
    transition:transform .3s;
    animation:pulse-whatsapp-rings 2s infinite
}
.whatsapp-float-dynamic:hover {
    transform:scale(1.1);
    background:#20BA5A
}
.whatsapp-float-dynamic svg {
    width:34px;
    height:34px;
    fill:#fff
}
@keyframes pulse-whatsapp-rings {
    0% {
        box-shadow:0 0 0 0 rgba(37,211,102,.7),0 0 0 0 rgba(37,211,102,.4)
    }
    50% {
        box-shadow:0 0 0 12px rgba(37,211,102,.2),0 0 0 24px rgba(37,211,102,.05)
    }
    to {
        box-shadow:0 0 0 24px rgba(37,211,102,0),0 0 0 48px rgba(37,211,102,0)
    }
}
table {
    width:100%;
    border-collapse:collapse;
    margin-bottom:40px;
    background:var(--bg-card);
    border-radius:12px;
    overflow:hidden;
    border:1px solid var(--border-color)
}
td,th {
    border:1px solid rgba(245,197,66,.1);
    padding:16px 20px;
    text-align:left
}
th {
    background:linear-gradient(135deg,rgba(196, 67, 67, 0.15),rgba(198, 14, 8, 0.2));
    color:#fff;
    font-weight:700
}
td {
    color:var(--text-sub)
}
@media (max-width:992px) {
    .contact-methods,.faq-grid,.features-grid,.pricing-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .footer-bottom-grid,.footer-container {
        grid-template-columns:repeat(2,1fr)!important
    }
    .lifetime-container-new {
        flex-direction:column
    }
    .lifetime-image-new {
        width:100%;
        min-height:350px
    }
    .lifetime-image-new:after {
        width:100%;
        height:35%;
        top:auto;
        bottom:0;
        right:auto;
        background:linear-gradient(0deg,#121008,transparent)
    }
    .lifetime-content-new {
        padding:40px
    }
    .supported-content {
        flex-direction:column;
        text-align:center
    }
    .supported-text {
        text-align:center
    }
}
@media (max-width:768px) {
    .header-container {
        padding:0 15px;
        justify-content:space-between
    }
    .header-container .logo {
        transform:scale(.9);
        transform-origin:left center
    }
    .header-cta-btn {
        display:none!important
    }
    .mobile-menu-toggle {
        display:flex
    }
    nav.main-nav {
        position:fixed;
        top:0;
        right:-100%;
        width:270px;
        height:100vh;
        background:rgba(8,8,8,.98);
        backdrop-filter:blur(18px);
        z-index:999;
        transition:right .4s ease;
        padding-top:100px;
        border-left:1px solid var(--border-color);
        box-shadow:-10px 0 30px rgba(0,0,0,.8)
    }
    nav.main-nav.active {
        right:0
    }
    nav ul {
        flex-direction:column;
        align-items:center;
        gap:25px
    }
    nav a {
        font-size:18px
    }
    .hero {
        padding:120px 0 60px
    }
    .hero h1 {
        font-size:2.2rem;
        line-height:1.2
    }
    .hero p {
        font-size:1rem;
        padding:0 10px
    }
    .hero-buttons {
        flex-direction:column;
        width:100%;
        padding:0 20px
    }
    .hero-buttons .btn {
        width:100%;
        max-width:350px
    }
    .contact-grid,.faq-grid,.features-grid,.pricing-grid,.support-grid {
        grid-template-columns:1fr
    }
    .device-badge {
        width:calc(50% - 10px)
    }
    .footer-top {
        flex-direction:column;
        text-align:center
    }
    .footer-top-left {
        margin-bottom:40px
    }
    .footer-map-container {
        width:100%;
        justify-content:center;
        height:auto
    }
    .footer-bottom-grid {
        grid-template-columns:1fr!important;
        text-align:left
    }
    .footer-copyright {
        flex-direction:column;
        gap:15px;
        text-align:center
    }
    table {
        display:block;
        width:100%;
        overflow-x:auto
    }
}
@media (max-width:480px) {
    .hero h1 {
        font-size:1.8rem
    }
    .device-badge {
        width:100%
    }
    .device-tabs button {
        padding:8px 14px;
        font-size:12px
    }
}

.movie-posters {
  display: block;
  width: 100%;
  overflow: hidden;
}

.movie-posters .posters-track {
  display: flex;
  width: max-content;
  animation: posters-scroll 35s linear infinite;
}

.movie-posters .poster-card {
  flex: 0 0 auto;
  width: clamp(160px, 16.667vw, 300px);
  aspect-ratio: 2 / 3;
}

.movie-posters .poster-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.movie-posters:hover .posters-track {
  animation-play-state: paused;
}
@keyframes posters-scroll {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .movie-posters .posters-track {
    animation: none;
  }

  .movie-posters {
    overflow-x: auto;
  }
}
/* ACCOUNT DROPDOWN FIX */
.account-dropdown {
    position: relative;
}

.account-dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
     gap: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    width: 160px !important;
    min-width: 160px !important;

    margin: 10px 0 0 0 !important;
    padding: 7px !important;

    background: #1b0b0b !important;
    border: 1px solid #5c1717;
    border-radius: 10px;

    opacity: 0;
    visibility: hidden;
    transform: translateY(5px);

    z-index: 99999;
    box-shadow: 0 12px 30px rgba(0,0,0,.45);
}

.account-dropdown:hover .account-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.account-dropdown-menu li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

.account-dropdown-menu li a {
    display: block !important;
    width: 100% !important;
    padding: 10px 12px !important;
    margin: 0 !important;

    color: #fff !important;
    font-size: 14px !important;
    text-decoration: none;
    border-radius: 6px;
}

.account-dropdown-menu li a:hover {
    background: #721b25 !important;
    color: #fff !important;
}



/* =========================================
   PLAYVORA MOBILE RESPONSIVE FIX
   FINAL VERSION
========================================= */

@media (max-width: 768px) {

    /* GLOBAL */
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    /* HEADER */
    .header-container {
        height: 68px !important;
        padding: 0 16px !important;
    }

    .header-container .logo {
        transform: none !important;
    }

    .zorba-brand-name,
    .zorba-brand-accent {
        font-size: 19px !important;
    }

    .hero-logo-letter {
        height: 1.25em !important;
        width: 1.25em !important;
    }

    .header-cta-btn {
        display: none !important;
    }

    .mobile-menu-toggle {
        display: flex !important;
        flex-shrink: 0;
    }

    /* MOBILE NAV */
    nav.main-nav {
        width: min(280px, 82vw) !important;
        padding-top: 85px !important;
    }

    nav.main-nav > ul {
        width: 100%;
        align-items: stretch !important;
        gap: 5px !important;
        padding: 0 20px !important;
    }

    nav.main-nav > ul > li {
        width: 100%;
    }

    nav.main-nav > ul > li > a {
        display: block;
        width: 100%;
        padding: 12px 5px !important;
        font-size: 16px !important;
    }

    /* ACCOUNT DROPDOWN */
    .account-dropdown-menu {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 5px 0 0 !important;
        box-shadow: none !important;
    }

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

    .hero {
        min-height: auto !important;
        padding: 55px 16px 45px !important;

        /* GIRL VISIBLE */
        background-size: cover !important;
        background-position: 76% center !important;
        background-repeat: no-repeat !important;

        align-items: center !important;
    }

    /* LIGHTER OVERLAY */
    .hero-overlay {
    background: linear-gradient(
        90deg,
        rgba(0,0,0,.42) 0%,
        rgba(0,0,0,.25) 45%,
        rgba(0,0,0,.05) 100%
    ) !important;
}

    .hero-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    .hero h1 {
        font-size: 34px !important;
        line-height: 1.15 !important;
        letter-spacing: 1px !important;
        margin-bottom: 10px !important;
    }

    .hero h2 {
        font-size: 23px !important;
        line-height: 1.3 !important;
        margin-bottom: 16px !important;
    }

    .hero p {
        font-size: 15px !important;
        line-height: 1.6 !important;
        padding: 0 !important;
        margin-bottom: 22px !important;
    }

    /* HERO BUTTONS */
    .hero-buttons {
        width: 100% !important;
        padding: 0 !important;
        margin-bottom: 25px !important;
        gap: 10px !important;

        flex-direction: column !important;
        align-items: stretch !important;
    }

    .hero-buttons .btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 14px 18px !important;
    }

    /* ================= DEVICES ================= */

    /* ALL 5 DEVICES ON ONE LINE */
    .device-icons {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 4px !important;
        align-items: start !important;
    }

    .device {
        width: 100% !important;
        min-width: 0 !important;

        font-size: 9px !important;
        gap: 3px !important;

        text-align: center !important;
    }

    .device svg {
        width: 24px !important;
        height: 24px !important;
        margin-bottom: 3px !important;
    }

    /* ================= STATS ================= */



/* ===== MOBILE STATS - FORCE ALL 5 IN ONE ROW ===== */
@media (max-width: 768px) {

    .stats-bar {
        padding: 25px 0 !important;
    }

    .stats-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: flex-start !important;

        width: 100% !important;
        max-width: 100% !important;

        padding: 0 5px !important;
        gap: 0 !important;
    }

    .stats-container .stat-item {
        flex: 0 0 20% !important;
        width: 20% !important;
        max-width: 20% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 2px !important;

        text-align: center !important;
    }

    .stats-container .stat-icon {
        margin-bottom: 7px !important;
    }

    .stats-container .stat-icon svg {
        width: 25px !important;
        height: 25px !important;
    }

    .stats-container .stat-value {
        font-size: 14px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        margin-bottom: 5px !important;
    }

    .stats-container .stat-label {
        font-size: 6.5px !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;
        white-space: normal !important;
    }
}


/* VERY SMALL MOBILE */
@media (max-width: 480px) {

    .stats-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        padding: 0 3px !important;
    }

    .stats-container .stat-item {
        flex: 0 0 20% !important;
        width: 20% !important;
        max-width: 20% !important;
    }

    .stats-container .stat-value {
        font-size: 12px !important;
    }

    .stats-container .stat-label {
        font-size: 5.5px !important;
    }

    .stats-container .stat-icon svg {
        width: 23px !important;
        height: 23px !important;
    }
}
    white-space: normal !important;
}
    /* SECTIONS */
    .channels-showcase,
    .pricing {
        padding-top: 55px !important;
        padding-bottom: 55px !important;
    }

    h2 {
        font-size: 1.9rem !important;
        line-height: 1.2 !important;
    }

  
    

    /* DEVICE TABS */
    .device-tabs-wrapper {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 5px;
    }

    .device-tabs {
        max-width: 100%;
        overflow-x: auto;
        justify-content: flex-start !important;
        white-space: nowrap;
    }

    .device-tabs button {
        flex: 0 0 auto;
        padding: 9px 14px !important;
        font-size: 12px !important;
    }

    /* LOGOS */
    .channel-logos {
        padding: 25px 0 !important;
        margin-bottom: 30px !important;
    }

    .logos-track img {
        height: 45px !important;
        margin: 0 20px !important;
    }

    /* FOOTER / GRIDS */
    .features-grid,
    .contact-grid
    {
        grid-template-columns: 1fr !important;
    }

    table {
        display: block;
        width: 100%;
        overflow-x: auto;
    }



/* =========================================
   SMALL PHONES
========================================= */

@media (max-width: 480px) {

    .hero {
        padding-left: 14px !important;
        padding-right: 14px !important;

        /* KEEP GIRL VISIBLE */
        background-position: 72% center !important;
    }

    .hero h1 {
        font-size: 30px !important;
    }

    .hero h2 {
        font-size: 20px !important;
    }

    .hero p {
        font-size: 14px !important;
    }

    /* STILL KEEP ALL 5 DEVICES IN ONE ROW */
    .device-icons {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 2px !important;
        row-gap: 0 !important;
    }

    .device {
        font-size: 8px !important;
    }

    .device svg {
        width: 22px !important;
        height: 22px !important;
    }

    .stats-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .zorba-brand-name,
    .zorba-brand-accent {
        font-size: 17px !important;
    }
}


.whatsapp-float {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 99999;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 12px 18px;
    background: #25d366;
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .3);
}

.whatsapp-icon {
    display: flex;
    align-items: center;
}

.whatsapp-icon svg {
    width: 28px;
    height: 28px;
}

.whatsapp-float:hover {
    background: #1ebe5d;
    color: #fff;
}

@media (max-width: 600px) {
    .whatsapp-float {
        bottom: 18px;
        left: 18px;
        padding: 12px;
    }

    .whatsapp-float > span:last-child {
        display: none;
    }
}


/* =========================================
   PLAYVORA AFFILIATE PAGE
========================================= */

.affiliate-page {
    background: #fff;
    color: #151515;
}

.aff-container {
    width: min(1180px, calc(100% - 32px));
    margin: auto;
}


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

.aff-hero {
    position: relative;
    overflow: hidden;
    padding: 92px 0 78px;

    background: linear-gradient(
        135deg,
        #3a1212 0%,
        #210b0b 52%,
        #0d0707 100%
    );

    color: #fff;
}

.aff-hero::before {
    content: "";
    position: absolute;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    right: -120px;
    top: -170px;

}
/* TEXT LEFT + IMAGE RIGHT */

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

    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 35px;
}

.aff-hero-text {
    min-width: 0;
}

.aff-hero-image {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.aff-hero-image img {
    display: block;
    width: 100%;
    max-width: 620px;
    height: auto;
    object-fit: contain;
}


/* MOBILE */

@media (max-width: 768px) {

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

    .aff-hero-image img {
        max-width: 500px;
        margin: auto;
    }
}
.aff-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(145, 44, 37, 0.35);
    border-radius: 999px;
    background: rgba(149, 74, 74, 0.08);
    color: #be8787;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.aff-hero h1 {
    font-size: clamp(38px, 6vw, 68px);
    line-height: 1.02;
    margin: 20px 0 16px;
    max-width: 850px;
    color: #fff;
}

.aff-hero h2 span {
    color: #ffd54a;
}

.aff-hero p {
    max-width: 720px;
    font-size: 18px;
    line-height: 1.75;
    color: #ddd;
    margin: 0 0 30px;
}


    .aff-hero-image {
        width: 100%;
    }

    .aff-hero-image img {
        width: 100%;
        max-width: 520px;
    }
/* ===== BUTTONS ===== */

.aff-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.aff-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 24px;
    border-radius: 10px;
    font-weight: 800;
    text-decoration: none;
    transition: .2s;
}

.aff-btn-primary {
    background: linear-gradient(
        135deg,
        #ffd54a,
        #ffc928 45%,
        #e87914
    );
    color: #17100a;
}

.aff-btn-primary:hover {
    transform: translateY(-2px);
}

.aff-btn-ghost {
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    background: rgba(255, 255, 255, .05);
}


/* ===== STATS ===== */

.aff-stats {
    position: relative;
    margin-top: -28px;
    z-index: 3;
}

.aff-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 18px 55px rgba(20, 7, 7, .14);
    overflow: hidden;
    border: 1px solid #eee;
}

.aff-stat {
    padding: 28px 20px;
    text-align: center;
    border-right: 1px solid #eee;
}

.aff-stat:last-child {
    border-right: 0;
}

.aff-stat strong {
    display: block;
    font-size: 28px;
    color: #731426;
}

.aff-stat span {
    font-size: 13px;
    color: #666;
    font-weight: 700;
}


/* ===== SECTIONS ===== */

.aff-section {
    padding: 78px 0;
}

.aff-section.soft {
    background: #faf7f5;
}

.aff-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 42px;
}

.aff-head .eyebrow {
    color: #9a2612;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 12px;
}

.aff-head h2 {
    font-size: clamp(30px, 4vw, 44px);
    margin: 8px 0 12px;
    color: #171717;
}

.aff-head p {
    color: #666;
    line-height: 1.7;
    margin: 0;
}


/* ===== HOW IT WORKS ===== */

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

.aff-card {
    background:var(--bg-card);
    padding:35px 25px;
    text-align:left;
    border-radius:14px;
    border:1px solid var(--border-color);
    transition:var(--transition);
    position:relative;

    /* ADD THESE */
    display:flex;
    flex-direction:column;
}

.aff-num {
    width:60px;
    height:60px;
    background:var(--brand-gradient);
    border-radius:14px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:22px;
    color:#040711;
    box-shadow:0 6px 20px rgba(245,197,66,.3);
    transition:transform .4s ease
}

.aff-card h3 {
    font-size:18px;
    font-weight:800;
    margin-top:0;
    margin-bottom:12px;
    color:#fff
}

.aff-card p {
   font-size:14px;
    color:var(--text-muted);
    line-height:1.6;
    margin:0;

    /* ADD THIS */
    flex-grow:1;
}


/* ===== COMMISSION ===== */

.aff-commission {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 30px;
    align-items: stretch;
}

.aff-rate {
    border-radius: 22px;
    padding: 38px;
    background: linear-gradient(
        135deg,
        #3a1212,
        #210b0b 60%,
        #0d0707
    );
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.aff-rate small {
    color: #ffd54a;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    font-weight: 800;
}

.aff-rate .big {
    font-size: 72px;
    line-height: 1;
    font-weight: 900;
    margin: 10px 0;
    color: #ffd54a;
}

.aff-rate h3 {
    font-size: 25px;
    margin: 0 0 12px;
    color: #fff;
}

.aff-rate p {
    color: #d8cdca;
    line-height: 1.7;
    margin: 0;
}


/* ===== COMMISSION TABLE ===== */

.aff-table-wrap {
    background: #fff;
    border: 1px solid #eadfda;
    border-radius: 22px;
    padding: 10px 24px;
}

.aff-table {
    width: 100%;
    border-collapse: collapse;
}

.aff-table th,
.aff-table td {
    padding: 19px 12px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.aff-table th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #8b7772;
}

.aff-table td {
    font-weight: 700;
    color: #2c2220;
}

.aff-table tr:last-child td {
    border-bottom: 0;
}

.aff-earned {
    color: #8b172b !important;
}


/* ===== BENEFITS ===== */

.aff-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.aff-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #fff2cf;
    color: #7b1728;
    font-size: 22px;
    margin-bottom: 16px;
}


/* ===== RULES ===== */

.aff-rules {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    max-width: 900px;
    margin: auto;
}

.aff-rule {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid #eadfda;
    border-radius: 14px;
    padding: 18px;
}

.aff-check {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff1c7;
    color: #6d1425;
    font-weight: 900;
}

.aff-rule b {
    display: block;
    margin-bottom: 4px;
    color: #251817;
}

.aff-rule span {
    font-size: 13px;
    color: #716562;
    line-height: 1.5;
}


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

.aff-cta {
    padding: 0 0 82px;
    background: #faf7f5;
}

.aff-cta-box {
    text-align: center;
    border-radius: 24px;
    padding: 54px 24px;
    background: linear-gradient(
        135deg,
        #3a1212,
        #210b0b 55%,
        #0d0707
    );
    color: #fff;
}

.aff-cta-box h2 {
    color: #fff;
    font-size: clamp(30px, 4vw, 44px);
    margin: 0 0 12px;
}

.aff-cta-box p {
    color: #d8cdca;
    max-width: 650px;
    margin: 0 auto 26px;
    line-height: 1.7;
}


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

@media (max-width: 900px) {

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

    .aff-commission {
        grid-template-columns: 1fr;
    }

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


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

@media (max-width: 600px) {

    .aff-container {
        width: calc(100% - 28px);
    }

    .aff-hero {
        padding: 64px 0 58px;
    }

    .aff-hero h1 {
        font-size: 38px;
    }

    .aff-hero p {
        font-size: 15px;
    }

    /* Keep 3 affiliate stats in one row */
    .aff-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .aff-stat {
        padding: 20px 6px;
    }

    .aff-stat strong {
        font-size: 20px;
    }

    .aff-stat span {
        font-size: 10px;
    }

    .aff-steps,
    .aff-benefits,
    .aff-rules {
        grid-template-columns: 1fr;
    }

    .aff-section {
        padding: 58px 0;
    }

    .aff-rate {
        padding: 28px;
    }

    .aff-rate .big {
        font-size: 60px;
    }

    .aff-table-wrap {
        padding: 6px 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .aff-table {
        min-width: 520px;
    }

    .aff-actions {
        flex-direction: column;
    }

    .aff-btn {
        width: 100%;
    }

    .aff-cta {
        padding-bottom: 58px;
    }

    .aff-cta-box {
        padding: 40px 18px;
    }
}
/* =========================================
   AFFILIATE EARNINGS BREAKDOWN - FINAL
========================================= */

.aff-earnings-box {
    width: 100%;
    box-sizing: border-box;

    background: linear-gradient(
        135deg,
        #1d1113 0%,
        #160d0f 55%,
        #0d0809 100%
    );

    border: 1px solid #63202b;
    border-radius: 28px;

    padding: 65px 48px 48px;

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


/* ===== TOP CONTENT ===== */

.aff-earnings-head {
    width: 100%;
    max-width: 800px;

    margin: 0 auto 48px;

    text-align: center;
}

.aff-earnings-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 20px;

    border: 1px solid rgba(255, 213, 74, .35);
    border-radius: 50px;

    background: rgba(255, 213, 74, .08);

    color: #ffd54a;

    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.aff-earnings-head h2 {
    margin: 22px 0 10px !important;

    color: #fff !important;

    font-size: 36px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
}

.aff-earnings-head p {
    max-width: 700px;

    margin: 0 auto !important;

    color: #bdb6b5 !important;

    font-size: 16px;
    line-height: 1.7;
}


/* ===== TABLE WRAPPER ===== */

.aff-earnings-table-wrap {
    display: block !important;

    width: 100% !important;

    overflow: hidden !important;

    border: 1px solid #57202a;
    border-radius: 22px;

    background: #171012;

    box-sizing: border-box;
}


/* ===== TABLE ===== */

.aff-earnings-table {
    display: table !important;

    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    table-layout: fixed !important;
    border-collapse: collapse !important;
}


/* IMPORTANT - FIX GLOBAL TABLE CSS */

.aff-earnings-table thead {
    display: table-header-group !important;
}

.aff-earnings-table tbody {
    display: table-row-group !important;
}

.aff-earnings-table tr {
    display: table-row !important;
}

.aff-earnings-table th,
.aff-earnings-table td {
    display: table-cell !important;
}


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

.aff-earnings-table thead {
    background: linear-gradient(
        135deg,
        #6b251d 0%,
        #4c1a17 100%
    );
}

.aff-earnings-table th {
    padding: 25px 22px !important;

    color: #fff !important;

    font-size: 14px !important;
    font-weight: 900 !important;

    letter-spacing: .5px;

    text-align: left !important;

    border-right: 1px solid rgba(255, 213, 74, .12);
    border-bottom: none !important;
}

.aff-earnings-table th:last-child {
    border-right: none;
}


/* ===== TABLE ROWS ===== */

.aff-earnings-table td {
    padding: 27px 22px !important;

    color: #bdb7b6 !important;

    font-size: 16px !important;
    font-weight: 700 !important;

    text-align: left !important;

    border-right: 1px solid rgba(255, 213, 74, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}

.aff-earnings-table td:last-child {
    border-right: none;
}

.aff-earnings-table tbody tr:last-child td {
    border-bottom: none !important;
}

.aff-earnings-table tbody tr {
    transition: background .2s ease;
}

.aff-earnings-table tbody tr:hover {
    background: rgba(255, 255, 255, .025);
}


/* ===== FIRST COLUMN ===== */

.aff-earnings-table td:first-child {
    color: #fff !important;

    font-size: 17px !important;
    font-weight: 900 !important;
}


/* ===== EARNINGS YELLOW ===== */

.aff-earnings-table .earning {
    color: #e1cb82 !important;

    font-size: 18px !important;
    font-weight: 900 !important;
}


/* ===== COLUMN WIDTHS ===== */

.aff-earnings-table {
    width: 100% !important;
    min-width: 1000px !important;
    table-layout: auto !important;
}

.aff-earnings-table th,
.aff-earnings-table td {
    white-space: nowrap !important;
}

.aff-earnings-table th:first-child,
.aff-earnings-table td:first-child {
    min-width: 210px !important;
}

.aff-earnings-table-wrap {
    overflow-x: auto !important;
}


/* ===== BEST VALUE ===== */

.best-value {
    display: inline-block;

    margin-left: 10px;
    padding: 6px 10px;

    background: rgba(255, 201, 40, .10);

    border: 1px solid #b67800;
    border-radius: 8px;

    color: #ffc928 !important;

    font-size: 10px !important;
    font-weight: 900 !important;

    letter-spacing: .7px;

    vertical-align: middle;
}


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

@media (max-width: 768px) {

    .aff-earnings-box {
        padding: 45px 20px 25px;
        border-radius: 20px;
    }

    .aff-earnings-head {
        margin-bottom: 32px;
    }

    .aff-earnings-head h2 {
        font-size: 28px !important;
    }

    .aff-earnings-head p {
        font-size: 14px !important;
    }

    .aff-earnings-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .aff-earnings-table {
        display: table !important;

        width: 650px !important;
        min-width: 650px !important;

        table-layout: fixed !important;
    }
}


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

@media (max-width: 480px) {

    .aff-earnings-box {
        padding: 35px 12px 15px;
        border-radius: 17px;
    }

    .aff-earnings-badge {
        padding: 8px 13px;
        font-size: 9px;
    }

    .aff-earnings-head h2 {
        font-size: 24px !important;
        line-height: 1.25 !important;
    }

    .aff-earnings-head p {
        font-size: 13px !important;
    }

    .aff-earnings-table th {
        padding: 18px 16px !important;
        font-size: 11px !important;
    }

    .aff-earnings-table td {
        padding: 20px 16px !important;
        font-size: 14px !important;
    }

    .aff-earnings-table td:first-child {
        font-size: 15px !important;
    }

    .aff-earnings-table .earning {
        font-size: 16px !important;
    }
}