/* ===== MODERN HERO SLIDER ===== */
/* icon */
/* ===============================
   PREMIUM FEATURE ICON (FIXED)
================================ */

.feature-icon{
    width:58px;
    height:58px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:22px;
    font-size:22px;
    position:relative;
    
    /* glass look */
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    backdrop-filter:blur(8px);
    
    /* neon gradient icon */
    color:#06b6d4;
    box-shadow:
        inset 0 0 15px rgba(255,255,255,.05),
        0 0 12px rgba(6,182,212,.15);

    transition:.4s;
}

/* gradient glow background */
.feature-icon::before{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:18px;
    background:linear-gradient(120deg,#4f46e5,#06b6d4,#22c55e);
    opacity:0;
    z-index:-1;
    filter:blur(12px);
    transition:.4s;
}

/* hover magic */
.feature-card:hover .feature-icon{
    transform:translateY(-4px) scale(1.08);
    color:#fff;
    box-shadow:
        0 0 25px rgba(79,70,229,.6),
        0 0 45px rgba(6,182,212,.4);
}

.feature-card:hover .feature-icon::before{
    opacity:.8;
}

/* icon animation subtle */
.feature-icon i{
    transition:.4s;
}

.feature-card:hover .feature-icon i{
    transform:rotateY(180deg);
}
.feature-card h3{
    font-size:22px;
    font-weight:700;
    margin-bottom:15px;
}

.feature-card p{
    color:#64748b;
}

/* mobile */
@media(max-width:768px){
    .feature-main-title{
        font-size:32px;
    }
}
.feature-card{
    position:relative;
    overflow:hidden;
}

/* animated border */
.feature-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:18px;
    padding:1px;
    background:linear-gradient(120deg,#4f46e5,#06b6d4,#4f46e5);
    background-size:300% 300%;
    animation:borderMove 6s linear infinite;
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    opacity:0;
    transition:.4s;
}

.feature-card:hover::before{
    opacity:1;
}

@keyframes borderMove{
    0%{background-position:0%}
    100%{background-position:300%}
}
.feature-icon{
    position:relative;
}

.feature-icon::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:16px;
    background:#4f46e5;
    z-index:-1;
    filter:blur(18px);
    opacity:.25;
    transform:scale(.8);
    animation:pulse 2.5s infinite;
}


/* WORD REVEAL ANIMATION */

.feature-desc span{
    opacity:0;
    display:inline-block;
    transform:translateY(10px);
    filter:blur(4px);
}

.feature-card.show .feature-desc span{
    animation:wordReveal .5s forwards;
}

@keyframes wordReveal{
    to{
        opacity:1;
        transform:translateY(0);
        filter:blur(0);
    }
}
/* PREMIUM FLOATING ANIMATION (same as heading) */

@keyframes floatCard {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

/* default slow floating */
.feature-card{
   animation: floatCard 6s ease-in-out infinite;
}

/* hover pe floating stop + premium lift */
.feature-card:hover{
   animation-play-state: paused;
   transform: translateY(-12px) scale(1.02);
}
.feature-card:nth-child(1){ animation-delay: 0s; }
.feature-card:nth-child(2){ animation-delay: 1s; }
.feature-card:nth-child(3){ animation-delay: 2s; }
.feature-card:nth-child(4){ animation-delay: 3s; }
.feature-card:nth-child(5){ animation-delay: 4s; }
.feature-card:nth-child(6){ animation-delay: 5s; }

.feature-card{
    transform-style: preserve-3d;
    transition: transform .2s ease, box-shadow .3s ease;
}
.feature-card{
  position: relative;
  overflow: hidden;
}

.feature-card::before{
  content:"";
  position:absolute;
  width:300px;
  height:300px;
  background: radial-gradient(circle, rgba(0,255,200,.25), transparent 60%);
  top:var(--y);
  left:var(--x);
  transform:translate(-50%,-50%);
  opacity:0;
  transition: opacity .3s;
}

.feature-card:hover::before{
  opacity:1;
}
.feature-icon{
  animation: pulseIcon 3s infinite ease-in-out;
}

/*@keyframes pulseIcon{*/
/*  0%{ transform:scale(1); }*/
/*  50%{ transform:scale(1.15); }*/
/*  100%{ transform:scale(1); }*/
/*}*/
/* ================================
   PREMIUM DARK FEATURES SECTION
================================ */

.features{
    position:relative;
    background:#020617;
    overflow:hidden;
    padding:140px 0;
}

/* animated gradient glow bg */
.features::before{
    content:"";
    position:absolute;
    width:900px;
    height:900px;
    background:radial-gradient(circle,#4f46e5 0%,transparent 60%);
    top:-250px;
    left:-250px;
    opacity:.25;
    animation:floatGlow 10s ease-in-out infinite alternate;
}

.features::after{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    background:radial-gradient(circle,#06b6d4 0%,transparent 60%);
    bottom:-250px;
    right:-250px;
    opacity:.25;
    animation:floatGlow 12s ease-in-out infinite alternate;
}

@keyframes floatGlow{
    from{transform:translateY(-40px)}
    to{transform:translateY(40px)}
}

/* section title */
.features .section-title h3{
    color:#06b6d4;
    font-weight:700;
    letter-spacing:1px;
}

.features .section-title h2{
    font-size:46px;
    font-weight:800;
    color:#fff;
    margin-top:10px;
}

.features .section-title p{
    color:#94a3b8;
    max-width:650px;
    margin:auto;
}

/* GRID */
.features .row:last-child{
    margin-top:70px;
}

/* CARD */
.single-feature{
    position:relative;
    background:rgba(255,255,255,0.04);
    border-radius:26px;
    padding:50px 35px;
    backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,0.08);
    transition:.5s;
    overflow:hidden;
    transform-style:preserve-3d;
}

/* neon border animation */
.single-feature::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:26px;
    padding:1px;
    background:linear-gradient(120deg,#4f46e5,#06b6d4,#4f46e5);
    -webkit-mask:
       linear-gradient(#000 0 0) content-box,
       linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    opacity:0;
    transition:.5s;
}

.single-feature:hover::before{
    opacity:1;
}

/* hover lift */
.single-feature:hover{
    transform:translateY(-18px) scale(1.02);
    box-shadow:0 30px 80px rgba(0,0,0,.6);
}

/* ======================================
   REAL FINAL ICON STYLE (OVERRIDE FIX)
======================================*/

.single-feature .feature-icon{
    width:60px !important;
    height:60px !important;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:25px;
    position:relative;

    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    backdrop-filter:blur(10px);

    box-shadow:
        inset 0 0 10px rgba(255,255,255,.05),
        0 0 20px rgba(79,70,229,.25);

    transition:.5s;
}

/* ICON SIZE FIX */
.single-feature .feature-icon i{
    font-size:24px !important;
    color:#06b6d4;
    transition:.5s;
}

/* neon glow bg */
.single-feature .feature-icon::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:20px;
    background:linear-gradient(120deg,#4f46e5,#06b6d4,#22c55e);
    filter:blur(14px);
    opacity:0;
    transition:.5s;
    z-index:-1;
}

/* hover animation */
.single-feature:hover .feature-icon{
    transform:translateY(-6px) scale(1.1);
    box-shadow:
        0 0 25px rgba(79,70,229,.7),
        0 0 45px rgba(6,182,212,.5);
}

.single-feature:hover .feature-icon::before{
    opacity:.9;
}

.single-feature:hover .feature-icon i{
    color:#fff;
    transform:rotateY(180deg);
}
/* title */
.single-feature h3{
    color:#fff;
    font-weight:700;
    margin-bottom:14px;
}

/* description */
.single-feature p{
    color:#94a3b8;
    line-height:1.7;
}

/* glow effect on mouse */
.single-feature::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at var(--x) var(--y),
                rgba(79,70,229,.25),transparent 40%);
    opacity:0;
    transition:.3s;
}

.single-feature:hover::after{
    opacity:1;
}
/* HERO IMAGE ZOOM ANIMATION */
.hero-slider .carousel-item img{
    width:100%;
    height:100vh;
    object-fit:cover;
    transform:scale(1);
    animation:heroZoom 12s ease-in-out infinite alternate;
}

@keyframes heroZoom{
    from{ transform:scale(1); }
    to{ transform:scale(1.12); }
}
/* ================================
   FINAL CLEAN HERO SLIDER
================================ */

.hero-slider,
.hero-slider .carousel-item,
.hero-slider .carousel-inner{
    height:100vh;
}

/* cinematic zoom */
.hero-slider .carousel-item img{
    width:100%;
    height:100vh;
    object-fit:cover;
    animation:heroZoom 14s ease-in-out infinite alternate;
}

@keyframes heroZoom{
    from{ transform:scale(1); }
    to{ transform:scale(1.12); }
}

/* dark readability overlay */
.hero-slider .carousel-item::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.45);
    z-index:1;
}

/* bottom smooth blend */
.hero-slider::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-1px;
    width:100%;
    height:220px;
    background:linear-gradient(
        to bottom,
        rgba(2,6,23,0) 0%,
        #020617 70%,
        #020617 100%
    );
    z-index:1;
    pointer-events:none;
}

/* caption fix (IMPORTANT) */
.carousel-caption{
    top:50%;
    transform:translateY(-50%);
    bottom:auto;
    left:0;
    right:0;
    width:100%;
    max-width:1200px;
    margin:auto;
    text-align:left;
    z-index:5;
}

/* buttons clickable fix */
.carousel-caption a{
    position:relative;
    z-index:10;
}
/* =====================================
   PREMIUM GLASS FEATURE CARDS FINAL
=====================================*/

.single-feature{
    position:relative;
    background:rgba(255,255,255,0.05);
    backdrop-filter: blur(18px);
    border-radius:28px;
    padding:50px 38px;
    border:1px solid rgba(255,255,255,0.08);
    overflow:hidden;
    transition: all .6s cubic-bezier(.17,.67,.38,.96);
    transform: translateY(60px);
    opacity:0;
}

/* show on scroll */
.single-feature.show{
    transform: translateY(0);
    opacity:1;
}

/* moving gradient border */
.single-feature::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:28px;
    padding:1px;
    background:linear-gradient(120deg,#4f46e5,#06b6d4,#4f46e5);
    background-size:300% 300%;
    animation:borderMove 8s linear infinite;
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    opacity:0;
    transition:.5s;
}

.single-feature:hover::before{
    opacity:1;
}

@keyframes borderMove{
    0%{background-position:0%}
    100%{background-position:300%}
}

/* HOVER LIFT */
.single-feature:hover{
    transform: translateY(-18px) scale(1.03);
    box-shadow: 0 35px 90px rgba(0,0,0,.65);
}

/* ICON PREMIUM */
.single-feature .feature-icon{
    width:70px;
    height:70px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    margin-bottom:26px;
    background:linear-gradient(45deg,#4f46e5,#06b6d4);
    color:#fff;
    box-shadow:0 15px 40px rgba(79,70,229,.5);
    transition:.4s;
}

/* icon hover animation */
.single-feature:hover .feature-icon{
    transform: rotateY(180deg) scale(1.1);
}

/* title */
.single-feature h3{
    color:#fff;
    font-weight:700;
    margin-bottom:16px;
    font-size:22px;
}

/* description */
.single-feature p{
    color:#94a3b8;
    line-height:1.7;
}

/* mouse glow */
.single-feature::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    background:radial-gradient(circle,
            rgba(79,70,229,.25), transparent 60%);
    top:var(--y);
    left:var(--x);
    transform:translate(-50%,-50%);
    opacity:0;
    transition:.3s;
}

.single-feature:hover::after{
    opacity:1;
}
/* =====================================
   NAVBAR TEXT ALWAYS WHITE (SCROLL FIX)
===================================== */

.header .navbar-nav .nav-item a,
.header .navbar-nav .nav-item a:hover,
.header .navbar-nav .nav-item a:focus,
.header .navbar-nav .nav-item a.active,
.header.navbar-area .navbar-nav .nav-item a,
.header.navbar-area.sticky .navbar-nav .nav-item a,
.header.sticky .navbar-nav .nav-item a,
.sticky .navbar-nav .nav-item a {
    color: #ffffff !important;
}

/* keep login/dashboard button text white */
.header .header-btn .btn,
.header.sticky .header-btn .btn {
    color: #ffffff !important;
    border-color: #ffffff !important;
}

/* mobile hamburger icon white */
.navbar-toggler .toggler-icon,
.header.sticky .navbar-toggler .toggler-icon {
    background-color: #ffffff !important;
}

/* optional premium dark glass navbar on scroll */
.header.sticky,
.header.navbar-area.sticky {
    background: rgba(2, 6, 23, 0.85) !important;
    backdrop-filter: blur(10px);
}
/* ======================================
   ULTRA PREMIUM FEATURES SECTION
====================================== */

.advanced-features-section {
    position: relative;
    padding: 140px 0;
    background: #020617;
    overflow: hidden;
}

/* animated background glow */
.advanced-features-section::before {
    content: "";
    position: absolute;
    width: 900px;
    height: 900px;
    top: -300px;
    left: -300px;
    background: radial-gradient(circle, rgba(79,70,229,.25), transparent 60%);
    filter: blur(60px);
    animation: floatGlow 8s ease-in-out infinite alternate;
}

.advanced-features-section::after {
    content: "";
    position: absolute;
    width: 800px;
    height: 800px;
    bottom: -300px;
    right: -300px;
    background: radial-gradient(circle, rgba(6,182,212,.18), transparent 60%);
    filter: blur(60px);
    animation: floatGlow 10s ease-in-out infinite alternate;
}

@keyframes floatGlow {
    from { transform: translateY(-20px); }
    to { transform: translateY(20px); }
}

/* heading */
.advanced-feature-title .feature-badge {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 50px;
    background: rgba(6,182,212,.1);
    color: #06b6d4;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 18px;
}

.advanced-feature-title h2 {
    font-size: 52px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 18px;
}

.advanced-feature-title p {
    color: #94a3b8;
    font-size: 18px;
    line-height: 1.8;
}

/* card */
.advanced-feature-card {
    position: relative;
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 28px;
    padding: 45px 35px;
    overflow: hidden;
    transition: all .45s ease;
    height: 100%;
}

/* animated border */
.advanced-feature-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 28px;
    background: linear-gradient(135deg,#4f46e5,#06b6d4,#22c55e);
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: .4s;
}

.advanced-feature-card:hover::before {
    opacity: 1;
}

.advanced-feature-card:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 35px 80px rgba(0,0,0,.5);
}

/* number */
.card-number {
    position: absolute;
    top: 22px;
    right: 25px;
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,.18);
}

/* icon */
.feature-icon-box {
    width: 78px;
    height: 78px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#4f46e5,#06b6d4);
    color: #fff;
    font-size: 30px;
    box-shadow: 0 15px 40px rgba(79,70,229,.4);
    margin-bottom: 26px;
    transition: .4s;
}

.advanced-feature-card:hover .feature-icon-box {
    transform: rotateY(180deg) scale(1.08);
}

/* title */
.advanced-feature-card h3 {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
}

/* description */
.advanced-feature-card p {
    color: #94a3b8;
    font-size: 16px;
    line-height: 1.9;
}

/* hover bottom line */
.feature-hover-line {
    width: 0;
    height: 3px;
    background: linear-gradient(90deg,#4f46e5,#06b6d4);
    border-radius: 10px;
    margin-top: 22px;
    transition: .4s;
}

.advanced-feature-card:hover .feature-hover-line {
    width: 100%;
}

/* mobile */
@media(max-width:768px){
    .advanced-feature-title h2 {
        font-size: 34px;
    }

    .advanced-feature-card {
        padding: 32px 24px;
    }
}
/* =====================================
   PREMIUM ANIMATED HEADING SECTION
===================================== */

.animated-heading {
    position: relative;
    max-width: 950px;
    margin: 0 auto 80px;
    animation: fadeUpHeading 1s ease forwards;
}

/* badge */
.animated-badge {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 50px;
    background: rgba(6,182,212,.08);
    color: #06b6d4;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 24px;
    box-shadow: 0 0 20px rgba(6,182,212,.18);
    animation: badgePulse 2.5s infinite ease-in-out;
}

/* title */
.animated-title {
    font-size: 62px;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 22px;
    letter-spacing: -1px;

    background: linear-gradient(
        90deg,
        #ffffff,
        #06b6d4,
        #4f46e5,
        #ffffff
    );
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: gradientMove 6s linear infinite;
}

/* subtitle */
.animated-subtitle {
    max-width: 720px;
    margin: 0 auto;
    color: #94a3b8;
    font-size: 20px;
    line-height: 1.9;
    animation: floatText 4s ease-in-out infinite;
}

/* animated underline */
.title-line {
    width: 120px;
    height: 4px;
    margin: 0 auto 28px;
    border-radius: 10px;
    background: linear-gradient(90deg,#4f46e5,#06b6d4);
    box-shadow: 0 0 20px rgba(6,182,212,.35);
    animation: lineExpand 2s ease-in-out infinite alternate;
}

/* animations */
@keyframes fadeUpHeading {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes badgePulse {
    0%,100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(6,182,212,.18);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 30px rgba(6,182,212,.35);
    }
}

@keyframes gradientMove {
    0% { background-position: 0% center; }
    100% { background-position: 300% center; }
}

@keyframes lineExpand {
    from {
        width: 100px;
    }
    to {
        width: 170px;
    }
}

@keyframes floatText {
    0%,100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-4px);
    }
}

/* mobile */
@media(max-width:768px){
    .animated-title {
        font-size: 38px;
        line-height: 1.2;
    }

    .animated-subtitle {
        font-size: 17px;
    }
}
/* =====================================
   PREMIUM PRICING SECTION THEME BLEND
===================================== */

.pricing-table {
    position: relative;
    background: linear-gradient(
        to bottom,
        #020617 0%,
        #0f172a 45%,
        #020617 100%
    ) !important;
    padding: 140px 0;
    overflow: hidden;
}

/* smooth blend from previous section */
.pricing-table::before {
    content: "";
    position: absolute;
    top: -180px;
    left: 0;
    width: 100%;
    height: 240px;
    background: linear-gradient(
        to bottom,
        rgba(2,6,23,0),
        #020617 80%
    );
    z-index: 1;
}

/* ambient glow */
.pricing-table::after {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    right: -200px;
    top: 80px;
    background: radial-gradient(
        circle,
        rgba(6,182,212,.18),
        transparent 60%
    );
    filter: blur(60px);
    z-index: 0;
}


.pricing-table .section-title p {
    color: #94a3b8 !important;
}

/* pricing cards */
.pp-plans {
    position: relative;
    background: rgba(255,255,255,0.04) !important;
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
    overflow: hidden;
    transition: all .45s ease;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

/* premium hover */
.pp-plans:hover {
    transform: translateY(-14px) scale(1.02);
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
    border-color: rgba(6,182,212,.25);
}

/* recommended card */
.pxp-is-featured {
    border: 1px solid rgba(6,182,212,.35) !important;
    box-shadow: 0 0 35px rgba(6,182,212,.18);
}

/* title */
.pp-plans-title {
    color: #fff !important;
    font-weight: 700;
}

/* price */
.pxp-plans-price-monthly {
    color: #fff !important;
    font-size: 34px;
    font-weight: 800;
}

/* feature list */
.pricing-feature-list li {
    color: #cbd5e1 !important;
    line-height: 1.9;
}

/* buttons */
.plans-purchase {
    background: linear-gradient(
        135deg,
        #4f46e5,
        #06b6d4
    ) !important;
    color: #fff !important;
    border-radius: 50px;
    padding: 14px 30px;
    font-weight: 700;
    border: none !important;
    box-shadow: 0 10px 25px rgba(79,70,229,.35);
    transition: .35s;
}

.plans-purchase:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 35px rgba(6,182,212,.35);
}
/* =====================================
   ULTRA ANIMATED FEATURE CARDS
===================================== */

.premium-animated-card {
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 26px;
    transition: all .45s ease;
    transform-style: preserve-3d;
}

/* animated neon border */
.premium-animated-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 26px;
    background: linear-gradient(
        135deg,
        #4f46e5,
        #06b6d4,
        #22c55e,
        #4f46e5
    );
    background-size: 300% 300%;
    animation: movingBorder 6s linear infinite;
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .8;
}

/* floating light sweep */
.premium-animated-card::after {
    content: "";
    position: absolute;
    top: -100%;
    left: -60%;
    width: 70%;
    height: 300%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.08),
        transparent
    );
    transform: rotate(25deg);
    transition: .7s;
}

.premium-animated-card:hover::after {
    left: 120%;
}

/* hover lift */
.premium-animated-card:hover {
    transform: translateY(-14px) rotateX(4deg) rotateY(-4deg) scale(1.02);
    box-shadow:
        0 25px 60px rgba(0,0,0,.45),
        0 0 35px rgba(6,182,212,.15);
}

/* icon pulse */
.premium-animated-card .feature-icon-box {
    animation: iconPulse 3s ease-in-out infinite;
}

/* title glow on hover */
.premium-animated-card:hover h3 {
    text-shadow: 0 0 15px rgba(255,255,255,.25);
}

/* line animation */
.premium-animated-card .feature-hover-line {
    background: linear-gradient(90deg,#4f46e5,#06b6d4,#22c55e);
    background-size: 200% 100%;
    animation: lineFlow 3s linear infinite;
}

/* keyframes */
@keyframes movingBorder {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

@keyframes iconPulse {
    0%,100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(6,182,212,0);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 0 25px rgba(6,182,212,.2);
    }
}

@keyframes lineFlow {
    0% { background-position: 0%; }
    100% { background-position: 200%; }
}
/* =========================
   FINAL PRICING SCROLL FX
========================= */

#pricing{
    position: relative;
    overflow: hidden;
}

/* section gradient glow */
#pricing::before{
    content:"";
    position:absolute;
    width:900px;
    height:900px;
    top:-300px;
    left:-300px;
    background: radial-gradient(circle,
        rgba(79,70,229,.25),
        transparent 60%);
    filter: blur(70px);
    animation: pricingFloat 8s ease-in-out infinite alternate;
}

#pricing::after{
    content:"";
    position:absolute;
    width:800px;
    height:800px;
    right:-250px;
    bottom:-250px;
    background: radial-gradient(circle,
        rgba(6,182,212,.18),
        transparent 60%);
    filter: blur(70px);
    animation: pricingFloat 10s ease-in-out infinite alternate;
}

@keyframes pricingFloat{
    from{ transform:translateY(-20px); }
    to{ transform:translateY(20px); }
}

/* cards hidden first */
.pp-plans-container{
    opacity:0 !important;
    transform:translateY(80px) !important;
    transition:all .8s ease !important;
}

/* show one by one */
.pp-plans-container.show{
    opacity:1 !important;
    transform:translateY(0) !important;
}
/* =========================
   PRICING HEADING GRADIENT
========================= */

#pricing .section-title h2{
    font-size: 56px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -1px;
    margin-bottom: 18px;

    background: linear-gradient(
        90deg,
        #ffffff,
        #06b6d4,
        #4f46e5,
        #ffffff
    );
    background-size: 300% auto;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    animation: pricingTitleGradient 6s linear infinite !important;
}

#pricing .section-title h3{
    display: inline-block;
    padding: 8px 18px;
    border-radius: 50px;

    background: rgba(6,182,212,.08);
    color: #06b6d4 !important;

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

    box-shadow: 0 0 20px rgba(6,182,212,.18);

    animation: badgePulse 2.5s infinite ease-in-out;
}

@keyframes pricingTitleGradient{
    0%{
        background-position: 0% center;
    }
    100%{
        background-position: 300% center;
    }
}

@keyframes badgePulse{
    0%,100%{
        transform: scale(1);
        box-shadow: 0 0 20px rgba(6,182,212,.18);
    }
    50%{
        transform: scale(1.05);
        box-shadow: 0 0 30px rgba(6,182,212,.35);
    }
}
#pricing .section-title p{
    color:#94a3b8 !important;
    font-size:18px;
    line-height:1.8;
}
/* =====================================
   ULTRA PREMIUM FAQ SECTION
===================================== */

.faq-modern-section{
    position: relative;
    padding: 140px 0;
    background: linear-gradient(
        180deg,
        #020617 0%,
        #0f172a 50%,
        #020617 100%
    );
    overflow: hidden;
}

/* animated glow bg */
.faq-modern-section::before{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    top:-250px;
    left:-250px;
    background: radial-gradient(circle,
        rgba(79,70,229,.18),
        transparent 60%);
    filter: blur(70px);
    animation: faqFloat 8s ease-in-out infinite alternate;
}

.faq-modern-section::after{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    bottom:-220px;
    right:-220px;
    background: radial-gradient(circle,
        rgba(6,182,212,.14),
        transparent 60%);
    filter: blur(70px);
    animation: faqFloat 10s ease-in-out infinite alternate;
}

@keyframes faqFloat{
    from{ transform:translateY(-20px); }
    to{ transform:translateY(20px); }
}

/* heading */
.faq-heading{
    position: relative;
    z-index: 2;
}

.faq-heading h2{
    font-size: 54px;
    font-weight: 900;
    margin-bottom: 14px;

    background: linear-gradient(
        90deg,
        #ffffff,
        #06b6d4,
        #4f46e5,
        #ffffff
    );
    background-size: 300% auto;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: faqTitleMove 6s linear infinite;
}

@keyframes faqTitleMove{
    0%{ background-position:0% center; }
    100%{ background-position:300% center; }
}

.faq-heading p{
    color:#94a3b8;
    font-size:18px;
    margin-bottom:70px;
}

/* wrapper */
.faq-modern-wrapper{
    max-width:900px;
    margin:0 auto;
    position: relative;
    z-index: 2;
}

/* item */
.faq-modern-item{
    margin-bottom:18px;
    border-radius:22px;
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(14px);
    border:1px solid rgba(255,255,255,.08);
    overflow:hidden;
    transition:.35s;
}

/* hover lift */
.faq-modern-item:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 35px rgba(0,0,0,.25);
}

/* question */
.faq-question{
    width:100%;
    background:none;
    border:none;
    padding:24px 28px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#fff;
    font-size:20px;
    font-weight:600;
}

/* arrow */
.faq-question i{
    color:#06b6d4;
    font-size:15px;
    transition:.35s;
}

/* rotate on open */
.faq-question[aria-expanded="true"] i{
    transform:rotate(180deg);
}

/* answer */
.faq-answer-content{
    padding:0 28px 24px;
    color:#94a3b8;
    font-size:16px;
    line-height:1.8;
}

/* mobile */
@media(max-width:768px){
    .faq-heading h2{
        font-size:36px;
    }

    .faq-question{
        font-size:17px;
        padding:20px;
    }
}

/* GLOBAL DARK BASE */
body {
    background: #020617;
}

/* HERO */
.hero-slider {
    background: radial-gradient(circle at top, #0f172a, #020617 70%);
}

/* FEATURES */
.advanced-features-section {
    background: linear-gradient(180deg, #020617 0%, #071029 100%);
}

/* VIDEO */
.premium-video-section {
    background: linear-gradient(180deg, #071029 0%, #020617 100%);
}

/* ABOUT */
.about-premium-section {
    background: radial-gradient(circle at left, #0b1220, #020617 70%);
}

/* REVIEWS */
.reviews-showcase {
    background: linear-gradient(180deg, #020617 0%, #0a0f1c 100%);
}

/* PRICING */
.pricing-table {
    background: linear-gradient(180deg, #0a0f1c 0%, #020617 100%);
}

/* FAQ */
.faq-modern-section {
    background: radial-gradient(circle at center, #071029, #020617 70%);
}

/* WHY US */
.why-imagine-glass-section {
    background: linear-gradient(180deg, #020617 0%, #081226 100%);
}

/* CONTACT */
.call-action {
    background: radial-gradient(circle at right, #0f172a, #020617 70%);
}

/* FOOTER */
.footer {
    background: #020617;
}

/* subtle top border line between sections */
section {
    position: relative;
}

section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}

section::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(6,182,212,0.08), transparent 70%);
    filter: blur(80px);
    z-index: 0;
}

.features::after { top: -100px; left: -100px; }
.about-premium-section::after { bottom: -100px; right: -100px; }
.pricing-table::after { top: 100px; right: -100px; }
.call-action::after { bottom: -100px; left: -100px; }
/* =====================================
   ULTRA PREMIUM CONTACT FORM
===================================== */

.contact-form{
    position: relative;
    z-index: 2;
    padding: 48px !important;
    border-radius: 28px;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(18px);
    box-shadow:
        0 20px 50px rgba(0,0,0,.45),
        0 0 0 1px rgba(255,255,255,.03);
}

/* form title */
.contact-form h3{
    font-size: 34px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 28px;
}

/* input + textarea premium style */
.contact-form .form-control{
    width: 100%;
    min-height: 58px;
    padding: 16px 18px !important;

    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.35) !important; /* white border */

    border-radius: 18px !important;
    color: #fff !important;

    font-size: 15px;
    font-weight: 500;

    transition: all .35s ease;
    box-shadow: none !important;
}

/* textarea specific */
.contact-form textarea.form-control{
    min-height: 140px;
    resize: none;
    padding-top: 18px !important;
}

/* placeholder */
.contact-form .form-control::placeholder{
    color: #94a3b8;
    opacity: .9;
}

/* hover */
.contact-form .form-control:hover{
    border-color: rgba(255,255,255,0.65) !important;
    background: rgba(255,255,255,0.03) !important;
}

/* click / focus premium glow */
.contact-form .form-control:focus{
    border: 1px solid #06b6d4 !important; /* focus color */
    background: rgba(255,255,255,0.04) !important;

    box-shadow:
        0 0 0 4px rgba(6,182,212,.12),
        0 0 18px rgba(6,182,212,.18) !important;

    outline: none !important;
}

/* spacing between fields */
.contact-form .form-group{
    margin-bottom: 18px;
}

/* premium button */
.contact-form .btn-alt{
    width: 100%;
    height: 56px;
    border-radius: 18px;

    background: linear-gradient(
        135deg,
        #4f46e5,
        #06b6d4
    ) !important;

    font-size: 16px;
    font-weight: 700;
    letter-spacing: .3px;

    border: none !important;

    box-shadow:
        0 12px 28px rgba(79,70,229,.35);

    transition: all .35s ease;
}

/* button hover */
.contact-form .btn-alt:hover{
    transform: translateY(-3px);
    box-shadow:
        0 18px 36px rgba(6,182,212,.28);
}
/* =====================================
   ULTRA PREMIUM FOOTER
===================================== */

.footer{
    position: relative;
    background: #000 !important;
    overflow: hidden;
    padding-top: 80px;
}

/* background glow */
.footer::before{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    top:-250px;
    left:-250px;
    background: radial-gradient(circle,
        rgba(79,70,229,.14),
        transparent 60%);
    filter: blur(70px);
}

.footer::after{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    bottom:-220px;
    right:-220px;
    background: radial-gradient(circle,
        rgba(6,182,212,.10),
        transparent 60%);
    filter: blur(70px);
}

/* top */
.footer-top{
    position: relative;
    z-index: 2;
    background: transparent !important;
    padding: 70px 0 30px;
}

/* headings */
.single-footer h3{
    color:#fff;
    font-size:22px;
    font-weight:800;
    margin-bottom:22px;
}

/* text */
.single-footer p,
.single-footer li,
.single-footer a{
    color:#94a3b8 !important;
    line-height:1.9;
    transition:.3s;
}

/* links hover */
.single-footer a:hover{
    color:#06b6d4 !important;
    transform: translateX(4px);
}

/* logo */
.single-footer .logo img{
    max-height:60px;
    margin-bottom:18px;
}

/* quick links */
.single-footer ul li{
    margin-bottom:10px;
}

/* social icons */
.single-footer .social{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

.single-footer .social li{
    list-style:none;
}

.single-footer .social li a{
    width:48px;
    height:48px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;

    background: rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.06);

    color:#fff !important;
    font-size:18px;

    transition:.35s;
}

/* hover */
.single-footer .social li a:hover{
    background: linear-gradient(
        135deg,
        #4f46e5,
        #06b6d4
    );
    color:#fff !important;
    transform: translateY(-4px);
    box-shadow:0 12px 25px rgba(79,70,229,.25);
}

/* bottom copyright */
.footer-copyright{
    border-top:1px solid rgba(255,255,255,.06);
    padding:22px 0;
    margin-top:35px;
}

.footer-copyright span{
    color:#94a3b8;
}

/* payment logo */
.payment-logo img{
    max-height:34px;
    opacity:.85;
}

/* mobile */
@media(max-width:768px){
    .footer{
        text-align:center;
    }

    .single-footer .social{
        justify-content:center;
    }

    .footer-copyright .container{
        flex-direction:column;
        gap:14px;
    }
}
.features,
.advanced-features-section,
.pricing-table,
.faq-modern-section,
.call-action{
    padding: 70px 0 !important;
}

.footer{
    padding-top: 30px !important;
}
/* =====================================
   PREMIUM ABOUT US SECTION
===================================== */

.about-premium-section{
    position: relative;
    padding: 90px 0 !important;
    background: #000 !important;
    overflow: hidden;
}

/* glow bg */
.about-premium-section::before{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    top:-200px;
    left:-200px;
    background: radial-gradient(circle,
        rgba(79,70,229,.14),
        transparent 60%);
    filter: blur(70px);
}

.about-premium-section::after{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    bottom:-180px;
    right:-180px;
    background: radial-gradient(circle,
        rgba(6,182,212,.12),
        transparent 60%);
    filter: blur(70px);
}

/* content */
.about-content{
    position: relative;
    z-index: 2;
}

.about-content h3{
    color:#06b6d4;
    font-size:18px;
    font-weight:700;
    margin-bottom:14px;
}

.about-content h2{
    color:#fff;
    font-size:48px;
    font-weight:900;
    line-height:1.2;
    margin-bottom:22px;
}

.about-content p{
    color:#94a3b8;
    font-size:17px;
    line-height:1.9;
    margin-bottom:28px;
}

/* points */
.about-points{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.point-item{
    color:#fff;
    font-size:16px;
    font-weight:500;
}

.point-item span{
    color:#06b6d4;
    margin-right:10px;
    font-weight:700;
}

/* image */
.about-image-box{
    position: relative;
    z-index: 2;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,.45);
}

.about-image-box img{
    width:100%;
    border-radius:28px;
    transition:.35s;
}

.about-image-box img:hover{
    transform: scale(1.03);
}

/* mobile */
@media(max-width:768px){
    .about-content h2{
        font-size:34px;
    }

    .about-premium-section{
        padding:70px 0 !important;
    }
}
/* moving background glow */
.about-premium-section::before{
    content:"";
    position:absolute;
    width:550px;
    height:550px;
    top:-180px;
    left:-180px;
    background: radial-gradient(circle,
        rgba(79,70,229,.18),
        transparent 60%);
    filter: blur(70px);
    animation: aboutGlowMove 8s ease-in-out infinite alternate;
}

.about-premium-section::after{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    bottom:-150px;
    right:-150px;
    background: radial-gradient(circle,
        rgba(6,182,212,.14),
        transparent 60%);
    filter: blur(70px);
    animation: aboutGlowMove 10s ease-in-out infinite alternate;
}

@keyframes aboutGlowMove{
    from{
        transform: translateY(-15px);
    }
    to{
        transform: translateY(15px);
    }
}
.about-text-animate{
    animation: slideLeftFade 1s ease forwards;
}

@keyframes slideLeftFade{
    from{
        opacity:0;
        transform:translateX(-50px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}
/* =========================
   ABOUT US GRADIENT HEADING
========================= */

.about-content h2{
    font-size: 48px;
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 20px;

    background: linear-gradient(
        90deg,
        #ffffff,
        #06b6d4,
        #4f46e5,
        #ffffff
    );
    background-size: 300% auto;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    animation: aboutTitleGradient 6s linear infinite !important;
}

/* small top label */
.about-content h3{
    display: inline-block;
    padding: 8px 18px;
    border-radius: 50px;

    background: rgba(6,182,212,.08);
    color: #06b6d4 !important;

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

    box-shadow: 0 0 20px rgba(6,182,212,.18);

    animation: aboutBadgePulse 2.5s infinite ease-in-out;
}

/* heading animation */
@keyframes aboutTitleGradient{
    0%{
        background-position: 0% center;
    }
    100%{
        background-position: 300% center;
    }
}

/* badge pulse */
@keyframes aboutBadgePulse{
    0%,100%{
        transform: scale(1);
        box-shadow: 0 0 20px rgba(6,182,212,.18);
    }
    50%{
        transform: scale(1.05);
        box-shadow: 0 0 28px rgba(6,182,212,.32);
    }
}
/* =========================
   ABOUT CTA HIGHLIGHT
========================= */

.about-content .btn-alt{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 30px !important;
    border-radius: 50px !important;

    background: linear-gradient(
        135deg,
        #4f46e5,
        #06b6d4
    ) !important;

    color: #fff !important;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .3px;

    box-shadow:
        0 12px 28px rgba(79,70,229,.35),
        0 0 18px rgba(6,182,212,.12);

    transition: all .35s ease;
    overflow: hidden;
}

/* premium shine line */
.about-content .btn-alt::before{
    content: "";
    position: absolute;
    top: -120%;
    left: -60%;
    width: 50%;
    height: 320%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.22),
        transparent
    );

    transform: rotate(25deg);
    transition: .8s;
}

/* shine on hover */
.about-content .btn-alt:hover::before{
    left: 120%;
}

/* hover premium lift */
.about-content .btn-alt:hover{
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 18px 36px rgba(6,182,212,.28),
        0 0 26px rgba(79,70,229,.18);
}

/* =========================
   PRICING MOBILE FIX
========================= */

@media (max-width: 768px){

    .pp-plans-container{
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        display: block !important;
        margin-bottom: 20px;
        opacity: 1 !important;
        transform: none !important;
    }

    .pp-plans{
        width: 100% !important;
        display: block !important;
    }

    #pricing .row{
        display: flex;
        flex-wrap: wrap !important;
    }
}
/* =========================
   VIDEO STYLE REVIEW SECTION
========================= */

.reviews-showcase{
    padding: 90px 0;
    background: #000;
    overflow: hidden;
    position: relative;
}

/* background glow */
.reviews-showcase::before{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    top:-200px;
    left:-200px;
    background: radial-gradient(circle,
        rgba(79,70,229,.14),
        transparent 60%);
    filter: blur(70px);
}

.reviews-track{
    display:flex;
    gap:25px;
    animation: reviewScroll 18s linear infinite;
}

/* floating cards */
.review-glass-card{
    min-width: 380px;
    padding: 28px;
    border-radius: 24px;

    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);

    backdrop-filter: blur(16px);

    box-shadow: 0 15px 35px rgba(0,0,0,.35);

    transition: .35s;
}

.review-glass-card:hover{
    transform: translateY(-8px);
}

/* user block */
.review-user{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
}

.review-user img{
    width:52px;
    height:52px;
    border-radius:50%;
    object-fit:cover;
}

.review-user h4{
    color:#fff;
    font-size:17px;
    margin:0;
}

.review-user span{
    color:#94a3b8;
    font-size:13px;
}

.stars{
    color:#facc15;
    margin-bottom:14px;
}

.review-glass-card p{
    color:#cbd5e1;
    line-height:1.8;
}

/* auto moving like video */
@keyframes reviewScroll{
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-40%);
    }
}
/* =========================
   REVIEW HEADING MATCH THEME
========================= */

.review-title h3{
    display: inline-block;
    padding: 8px 18px;
    border-radius: 50px;

    background: rgba(6,182,212,.08);
    color: #06b6d4 !important;

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

    box-shadow: 0 0 20px rgba(6,182,212,.18);
}

/* main heading same as site */
.review-title h2{
    font-size: 48px;
    font-weight: 900;
    line-height: 1.15;
    margin-top: 18px;
    margin-bottom: 18px;

    background: linear-gradient(
        90deg,
        #ffffff,
        #06b6d4,
        #4f46e5,
        #ffffff
    );

    background-size: 300% auto;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    animation: reviewGradientMove 6s linear infinite;
}

/* subtitle */
.review-title p{
    max-width: 700px;
    margin: auto;
    color: #94a3b8;
    font-size: 17px;
    line-height: 1.8;
}

/* animated gradient */
@keyframes reviewGradientMove{
    0%{
        background-position: 0% center;
    }
    100%{
        background-position: 300% center;
    }
}
/* =========================
   WHY IMAGINE SECTION
========================= */

.why-imagine-section{
    padding: 85px 0;
    background: #000;
}

.why-card{
    height: 100%;
    padding: 32px;
    border-radius: 24px;

    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);

    backdrop-filter: blur(16px);

    transition: .35s;
}

.why-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(6,182,212,.08);
}

.why-card h4{
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 16px;
}

.why-card p{
    color: #94a3b8;
    line-height: 1.8;
}
/* =========================
   PREMIUM GLASS WHY SECTION
========================= */

.why-imagine-glass-section{
    position: relative;
    padding: 90px 0;
    background: #000;
    overflow: hidden;
}

/* glow */
.why-imagine-glass-section::before{
    content:"";
    position:absolute;
    width:650px;
    height:650px;
    top:-220px;
    left:-220px;
    background: radial-gradient(circle,
        rgba(79,70,229,.14),
        transparent 60%);
    filter: blur(70px);
}

.why-imagine-glass-section::after{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    bottom:-180px;
    right:-180px;
    background: radial-gradient(circle,
        rgba(6,182,212,.12),
        transparent 60%);
    filter: blur(70px);
}

/* glass cards */
.why-glass-card{
    position: relative;
    z-index: 2;
    height: 100%;

    padding: 34px;
    border-radius: 28px;

    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);

    backdrop-filter: blur(18px);

    box-shadow:
        0 20px 50px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.04);

    transition: all .35s ease;
}

.why-glass-card:hover{
    transform: translateY(-10px);
    box-shadow:
        0 25px 60px rgba(6,182,212,.10),
        0 0 24px rgba(79,70,229,.08);
}

/* icon */
.why-icon{
    width: 58px;
    height: 58px;
    border-radius: 18px;

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

    font-size: 24px;

    background: linear-gradient(
        135deg,
        #4f46e5,
        #06b6d4
    );

    margin-bottom: 20px;

    box-shadow: 0 12px 25px rgba(79,70,229,.25);
}

/* title */
.why-glass-card h4{
    color:#fff;
    font-size:22px;
    font-weight:700;
    margin-bottom:14px;
}

/* text */
.why-glass-card p{
    color:#94a3b8;
    line-height:1.8;
}
.premium-video-section{
    padding:90px 0;
    background:#000;
}

.video-showcase-card{
    position:relative;
    padding:40px;
    border-radius:28px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
    backdrop-filter:blur(18px);
    box-shadow:0 20px 50px rgba(0,0,0,.45);
    overflow:hidden;
}

.video-top-stats{
    display:flex;
    gap:20px;
    margin-bottom:30px;
}

.stat-box{
    padding:14px 20px;
    border-radius:16px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
    color:#fff;
}

.stat-box i{
    margin-right:8px;
    color:#ff0000;
}

.video-content h2{
    font-size:48px;
    font-weight:900;
    line-height:1.15;
    color:#fff;
    margin-bottom:20px;
}

.video-content p{
    color:#94a3b8;
    line-height:1.8;
    margin-bottom:25px;
}

.video-btn{
    display:inline-block;
    padding:14px 28px;
    border-radius:50px;
    background:linear-gradient(135deg,#4f46e5,#06b6d4);
    color:#fff;
    font-weight:700;
}

.video-frame-box{
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.35);
}

.video-frame-box iframe{
    width:100%;
    height:380px;
    border-radius:24px;
}

@media(max-width:768px){
    .video-content h2{
        font-size:34px;
    }

    .video-frame-box iframe{
        height:240px;
    }
}
/* MOBILE PRICING SLIDER */
@media (max-width: 768px){

    #pricing .row{
        display:flex !important;
        flex-wrap:nowrap !important;
        overflow-x:auto;
        gap:16px;
        padding-bottom:10px;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
    }

    #pricing .row::-webkit-scrollbar{
        height:4px;
    }

    #pricing .row::-webkit-scrollbar-thumb{
        background:rgba(255,255,255,0.15);
        border-radius:10px;
    }

    .pp-plans-container{
        min-width:85% !important;
        max-width:85% !important;
        flex:0 0 85% !important;
        scroll-snap-align:center;
        margin-bottom:0 !important;
    }

    .pp-plans{
        height:auto !important;
    }
}
@media (max-width:768px){

    #pricing .row{
        display:flex !important;
        flex-wrap:nowrap !important;
        overflow-x:auto;
        gap:14px;
        padding-left:15px;
        padding-right:30px;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
    }

    .pp-plans-container{
        min-width:78% !important;
        max-width:78% !important;
        flex:0 0 78% !important;
        scroll-snap-align:start;
    }
}
.mobile-swipe-hint{
    text-align:center;
    margin-bottom:18px;
    color:#94a3b8;
    font-size:14px;
    font-weight:600;
    animation: swipePulse 2s infinite;
}

@keyframes swipePulse{
    0%,100%{opacity:.6}
    50%{opacity:1}
}
/* =========================
   PREMIUM BRAND PRELOADER
========================= */

.preloader{
    position:fixed;
    inset:0;
    z-index:999999;
    background:#000;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:opacity .8s ease, visibility .8s ease;
}

/* fade out */
.preloader.fade-out{
    opacity:0;
    visibility:hidden;
}

/* center block */
.preloader-center-text{
    text-align:center;
    padding:20px;
}

/* main name */
.preloader-center-text h1{
    font-size:88px;
    font-weight:900;
    letter-spacing:-2px;
    line-height:1;
    margin-bottom:18px;

    background: linear-gradient(
        90deg,
        #ffffff,
        #06b6d4,
        #4f46e5,
        #ffffff
    );

    background-size:300% auto;

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;

    animation: preloaderGradientMove 5s linear infinite;
}

/* subtitle */
.preloader-center-text p{
    color:#94a3b8;
    font-size:18px;
    font-weight:500;
    letter-spacing:.4px;
    animation: subtitlePulse 1.8s ease-in-out infinite;
}

/* animated gradient */
@keyframes preloaderGradientMove{
    0%{ background-position:0% center; }
    100%{ background-position:300% center; }
}

/* subtitle pulse */
@keyframes subtitlePulse{
    0%,100%{ opacity:.65; }
    50%{ opacity:1; }
}

/* mobile */
@media(max-width:768px){
    .preloader-center-text h1{
        font-size:46px;
        letter-spacing:-1px;
    }

    .preloader-center-text p{
        font-size:15px;
    }
}
.about-image-box img {
    max-width: 85%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.feature-flip-card {
    perspective: 1000px;
    height: 320px;
}

.feature-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.feature-flip-card:hover .feature-flip-inner {
    transform: rotateY(180deg);
}

.feature-flip-front,
.feature-flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.feature-flip-back {
    transform: rotateY(180deg);
}

.feature-flip-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-slide {
    position: relative;
    height: 90vh;
    overflow: hidden;
}

.hero-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* DARK OVERLAY */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(0,0,0,0.75),
        rgba(0,0,0,0.4)
    );
    z-index: 1;
}

/* CONTENT */
.hero-content {
    position: absolute;
    z-index: 2;
    max-width: 650px;
    left: 8%;
    top: 50%;
    transform: translateY(-50%);
}

.hero-content h1 {
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.hero-content p {
    font-size: 18px;
    color: #ddd;
    margin: 20px 0 30px;
}

/* BUTTONS */
.hero-buttons {
    display: flex;
    gap: 15px;
}

.btn-main {
    background: linear-gradient(135deg, #6e8fd4, #4a6cf7);
    color: #fff;
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 600;
    transition: 0.3s;
}

.btn-outline {
    border: 1px solid #fff;
    color: #fff;
    padding: 12px 28px;
    border-radius: 8px;
    transition: 0.3s;
}

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

.btn-outline:hover {
    background: #fff;
    color: #000;
}

.advanced-features-section {
    background: linear-gradient(
        180deg,
        #020617 0%,
        #0a0f2c 50%,
        #020617 100%
    ) !important;
}

.about-premium-section {
    background: #0f172a !important;
}

.premium-video-section {
    background: linear-gradient(
        135deg,
        #020617,
        #111827
    ) !important;
}

.reviews-showcase {
    background: linear-gradient(
        180deg,
        #020617,
        #030712
    ) !important;
}

.faq-modern-section {
    background: linear-gradient(
        180deg,
        #020617,
        #111827,
        #020617
    ) !important;
}

.why-imagine-glass-section {
    background: radial-gradient(
        circle at top,
        #0a0f2c,
        #020617
    ) !important;
}

.call-action {
    background: linear-gradient(
        135deg,
        #020617,
        #1e293b
    ) !important;
}

/* =====================================
   GLOBAL STRUCTURE (CLEAN BASE)
===================================== */

section {
    padding: 100px 0;
}

/* headings */
.section-title h2 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 15px;
}

.section-title p {
    font-size: 16px;
    line-height: 1.7;
    max-width: 650px;
    margin: 0 auto;
}


/* =====================================
   HERO (DARK)
===================================== */

.hero-slider {
    background: #020617;
}


/* =====================================
   FEATURES (DARK BLUE)
===================================== */

.advanced-features-section {
    background: #0b1120;
}

.advanced-feature-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.advanced-feature-card p {
    font-size: 14px;
    line-height: 1.6;
}


/* =====================================
   VIDEO SECTION (SLIGHTLY DIFFERENT DARK)
===================================== */

.premium-video-section {
    background: #111827;
}

.video-content h2 {
    font-size: 32px;
    font-weight: 700;
}

.video-content p {
    font-size: 15px;
    line-height: 1.7;
}


/* =====================================
   ABOUT (LIGHT SECTION - CLEAN BREAK)
===================================== */

.about-premium-section {
    background: #f8fafc;
    color: #0f172a;
}

.about-content h3 {
    font-size: 18px;
    color: #4f46e5;
}

.about-content h2 {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 15px;
}

.about-content p {
    font-size: 15px;
    line-height: 1.8;
    color: #475569;
}

.point-item {
    font-size: 14px;
    margin-bottom: 8px;
}


/* =====================================
   REVIEWS (BACK TO DARK)
===================================== */

.reviews-showcase {
    background: #020617;
}

.review-glass-card p {
    font-size: 14px;
    line-height: 1.6;
}


/* =====================================
   PRICING (DARK GRADIENT)
===================================== */

.pricing-table {
    background: #0f172a;
}

.pricing-table h2 {
    font-size: 38px;
}

.pricing-feature-list li {
    font-size: 14px;
}


/* =====================================
   FAQ (SOFT DARK)
===================================== */

.faq-modern-section {
    background: #111827;
}

.faq-heading h2 {
    font-size: 36px;
}

.faq-heading p {
    font-size: 15px;
}


/* =====================================
   WHY US (DIFFERENT DARK SHADE)
===================================== */

.why-imagine-glass-section {
    background: #0b1120;
}

.why-glass-card h4 {
    font-size: 18px;
}

.why-glass-card p {
    font-size: 14px;
}


/* =====================================
   CONTACT (LIGHT AGAIN)
===================================== */

.call-action {
    background: #f1f5f9;
    color: #020617;
}

.contact-title {
    font-size: 28px;
    font-weight: 600;
}

.contact-form h3 {
    font-size: 24px;
}

.contact-item h4 {
    font-size: 16px;
}


/* =====================================
   FOOTER (DARK END)
===================================== */

.footer {
    background: #020617;
}
/* WRAPPER */
.contact-wrapper {
    max-width: 1100px;
    margin: auto;
}

/* CARD STYLE */
.contact-box {
    background: #0b1120;
    padding: 40px;
    border-radius: 16px;
   
}

/* HEADINGS */
.contact-box h2 {
    font-size: 28px;
    margin-bottom: 20px;
}

.contact-box h3 {
    font-size: 22px;
    margin-bottom: 20px;
}

/* FORM */
.contact-box .form-control {
    background: #020617;
    border: 1px solid rgba(255,255,255,0.08);
    color: #fff;
    margin-bottom: 15px;
    height: 48px;
    border-radius: 8px;
}

.contact-box textarea {
    height: auto;
}

/* BUTTON */
.btn-main {
    background: linear-gradient(135deg, #4a6cf7, #6e8fd4);
    border: none;
    color: #fff;
    padding: 12px;
    border-radius: 8px;
}

/* RIGHT SIDE */
.contact-info h2 {
    margin-bottom: 30px;
}

/* CONTACT ITEMS */
.contact-item {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    align-items: flex-start;
}

.contact-item i {
    font-size: 20px;
    color: #4a6cf7;
}

.contact-item h4 {
    font-size: 16px;
    margin-bottom: 5px;
}

.contact-item p {
    font-size: 14px;
    color: #94a3b8;
}

/* MOBILE FIX */
@media (max-width: 768px) {
    .contact-box {
        padding: 25px;
    }

    .contact-box h2 {
        font-size: 22px;
    }
}
/* CENTER THE WHOLE CONTACT AREA */
.call-action .row {
    align-items: center;
}

/* MAKE FORM COMPACT */
.contact-box {
    max-width: 480px;
    margin: 0 auto;
    padding: 30px;
}

/* REDUCE INPUT HEIGHT */
.contact-box .form-control {
    height: 44px;
    font-size: 14px;
}

/* TEXTAREA SMALLER */
.contact-box textarea {
    height: 100px;
}

/* RIGHT SIDE ALIGNMENT */
.contact-info {
    padding-left: 40px;
}

/* MOBILE FIX */
@media (max-width: 992px) {
    .contact-info {
        padding-left: 0;
        margin-top: 30px;
    }
}
.call-action .contact-form {
    margin-top: 80px !important;
}
/* IMAGE BOX */
.about-image-box {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden; /* important */
}

/* IMAGE FIT */
.about-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* THIS is key */
    display: block;
}
/* FORCE FULL HEIGHT STRUCTURE */
.about-premium-section .row {
    align-items: stretch !important;
}

/* BOTH COLUMNS FULL HEIGHT */
.about-premium-section .col-lg-6 {
    display: flex;
}

/* CONTENT SIDE */
.about-content {
    width: 100%;
}

/* IMAGE BOX FULL HEIGHT */
.about-image-box {
    width: 100%;
    height: 100%;
    min-height: 500px; /* adjust if needed */
    border-radius: 20px;
    overflow: hidden;
}

/* IMAGE FULL FIT */
.about-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================================
   FOOTER MAIN
========================================= */
.footer {
    background: linear-gradient(180deg, #020617, #0b1220);
    padding-top: 80px;
    position: relative;
    overflow: hidden;
}

/* glow effect */
.footer::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(6,182,212,0.12), transparent 70%);
    top: -200px;
    left: -200px;
    filter: blur(80px);
    pointer-events: none;
}


/* =========================================
   FOOTER CONTENT
========================================= */
.single-footer {
    margin-bottom: 30px;
}

/* headings */
.single-footer h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 25px;
    color: #ffffff;
    position: relative;
}

/* underline accent */
.single-footer h3::after {
    content: "";
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #06b6d4, transparent);
    position: absolute;
    bottom: -8px;
    left: 0;
}


/* =========================================
   TEXT & LINKS
========================================= */
.single-footer p {
    color: #94a3b8;
    line-height: 1.7;
    font-size: 14px;
}

.single-footer ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.single-footer ul li {
    margin-bottom: 12px;
}

.single-footer ul li a {
    color: #cbd5f1;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* hover animation */
.single-footer ul li a:hover {
    color: #06b6d4;
    transform: translateX(6px);
}


/* =========================================
   ADDRESS SECTION
========================================= */
.address li {
    color: #cbd5f1;
    font-size: 14px;
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

.address li i {
    color: #06b6d4;
    margin-right: 12px;
    margin-top: 3px;
}


/* =========================================
   SOCIAL ICONS
========================================= */
.footer .social {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.footer .social li {
    list-style: none;
}

.footer .social li a {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;

    background: #0b1220;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);

    color: #cbd5f1;
    transition: all 0.3s ease;
}

/* hover */
.footer .social li a:hover {
    background: linear-gradient(135deg, #06b6d4, #2563eb);
    color: #fff;
    transform: translateY(-5px);
}


/* =========================================
   LOGO
========================================= */
.footer .logo img {
    max-width: 150px;
    margin-bottom: 15px;
}


/* =========================================
   COPYRIGHT BAR
========================================= */
.footer-copyright {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 20px 0;
    margin-top: 50px;
}

.footer-copyright__content span {
    color: #94a3b8;
    font-size: 14px;
}

/* payment logo */
.payment-logo img {
    max-height: 35px;
    opacity: 0.8;
}


/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 768px) {
    .footer {
        padding-top: 60px;
    }

    .single-footer {
        margin-bottom: 40px;
    }

    .footer .social {
        justify-content: flex-start;
    }
}
/* =========================================
   FULL LIGHT THEME OVERRIDE (FINAL)
========================================= */

/* BASE */
body {
    background: #f8fafc !important;
    color: #0f172a !important;
}

/* REMOVE DARK BACKGROUNDS */
section,
.features,
.advanced-features-section,
.pricing-table,
.faq-modern-section,
.call-action,
.about-premium-section,
.reviews-showcase,
.why-imagine-glass-section,
.premium-video-section {
    background: transparent !important;
}

/* SECTION COLORS */
.hero-slider {
    background: linear-gradient(180deg, #ffffff, #e2e8f0) !important;
}

.advanced-features-section {
    background: #f8fafc !important;
}

.premium-video-section {
    background: #ffffff !important;
}

.about-premium-section {
    background: #f1f5f9 !important;
}

.reviews-showcase {
    background: #ffffff !important;
}

.pricing-table {
    background: #f8fafc !important;
}

.faq-modern-section {
    background: #ffffff !important;
}

.why-imagine-glass-section {
    background: #f1f5f9 !important;
}

.call-action {
    background: #ffffff !important;
}

/* KEEP FOOTER DARK */
.footer {
    background: #0f172a !important;
}

/* TEXT COLORS */
h1, h2, h3 {
    color: #0f172a !important;
}

p {
    color: #64748b !important;
}

/* HERO FIX */
.hero-slider .carousel-item::before {
    background: rgba(255,255,255,0.4) !important;
}

/* CARDS */
.single-feature,
.advanced-feature-card,
.review-glass-card,
.why-glass-card,
.contact-form,
.pp-plans {

    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important;
}

/* ICONS */
.feature-icon-box,
.feature-icon {
    background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* BUTTONS */
.btn-main,
.plans-purchase,
.btn-alt {
    background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(37,99,235,0.2) !important;
}

/* REMOVE ALL DARK GLOW EFFECTS */
section::after,
.features::before,
.features::after,
.pricing-table::before,
.pricing-table::after,
.faq-modern-section::before,
.faq-modern-section::after,
.about-premium-section::before,
.about-premium-section::after,
.why-imagine-glass-section::before,
.why-imagine-glass-section::after {
    display: none !important;
}

/* INPUT FIELDS */
.contact-form .form-control {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}

.contact-form .form-control::placeholder {
    color: #94a3b8 !important;
}

/* FOOTER TEXT */
.footer h3,
.footer p,
.footer a {
    color: #cbd5f1 !important;
}

/* NAVBAR FIX */
.header .navbar-nav .nav-item a {
    color: #0f172a !important;
}

.header.sticky {
    background: #ffffff !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
/* =========================================
   CLEAN LIGHT + GRADIENT HEADING THEME
========================================= */

/* BASE */
body {
    background: #f8fafc !important;
    color: #0f172a !important;
}

/* PARAGRAPH TEXT (STRICT BLACK/GRAY) */
p,
span,
li,
a {
    color: #334155 !important;
}

/* =========================================
   GRADIENT HEADINGS (MAIN FEATURE)
========================================= */

h1, h2 {
    background: linear-gradient(135deg, #2563eb, #06b6d4, #4f46e5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

/* SUB HEADINGS (LESS HEAVY) */
h3, h4, h5 {
    color: #0f172a !important;
    font-weight: 600;
}

/* =========================================
   SECTION BACKGROUNDS (CLEAN LIGHT)
========================================= */

.hero-slider {
    background: linear-gradient(180deg, #ffffff, #e2e8f0) !important;
}

.advanced-features-section {
    background: #f8fafc !important;
}

.about-premium-section {
    background: #f1f5f9 !important;
}

.reviews-showcase {
    background: #ffffff !important;
}

.pricing-table {
    background: #f8fafc !important;
}

.faq-modern-section {
    background: #ffffff !important;
}

.call-action {
    background: #f1f5f9 !important;
}

/* FOOTER DARK (FOR CONTRAST) */
.footer {
    background: #0f172a !important;
}

/* =========================================
   CARDS (WHITE CLEAN)
========================================= */

.single-feature,
.advanced-feature-card,
.review-glass-card,
.why-glass-card,
.contact-form,
.pp-plans {

    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
}

/* =========================================
   ICONS (KEEP COLORFUL)
========================================= */

.feature-icon-box,
.feature-icon {
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    color: #fff !important;
}

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

.btn-main,
.btn-alt,
.plans-purchase {
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    color: #fff !important;
    border: none;
    box-shadow: 0 8px 20px rgba(37,99,235,0.2);
}

/* =========================================
   REMOVE DARK EFFECTS
========================================= */

section::after,
.features::before,
.features::after,
.about-premium-section::before,
.about-premium-section::after {
    display: none !important;
}

/* =========================================
   INPUTS
========================================= */

.form-control {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}

.form-control::placeholder {
    color: #94a3b8 !important;
}

/* =========================================
   NAVBAR
========================================= */

.header {
    background: #ffffff !important;
}

.header .navbar-nav .nav-item a {
    color: #0f172a !important;
}

/* =========================================
   FOOTER TEXT FIX
========================================= */

.footer h1,
.footer h2 {
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
}

.footer p,
.footer a {
    color: #cbd5f1 !important;
}

/* FORCE DARK TEXT EVERYWHERE */
.about-premium-section,
.about-premium-section p,
.about-premium-section li,
.about-premium-section span {
    color: #334155 !important;
}

/* HEADINGS */
.about-premium-section h1,
.about-premium-section h2 {
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about-premium-section h3 {
    color: #0f172a !important;
}

/* LIST POINTS FIX */
.about-points .point-item {
    color: #334155 !important;
}

/* CHECK ICON */
.about-points .point-item span {
    color: #2563eb !important;
}

/* BUTTON FIX */
.btn-alt {
    color: #fff !important;
}

/* =========================================
   NAVBAR BASE (LIGHT)
========================================= */

.header {
    background: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    transition: 0.3s;
}

/* NAV LINKS */
.header .navbar-nav .nav-item a {
    color: #0f172a !important;
    font-weight: 500;
    transition: 0.3s;
}

/* HOVER EFFECT */
.header .navbar-nav .nav-item a:hover {
    color: #2563eb !important;
}

/* ACTIVE LINK */
.header .navbar-nav .nav-item a.active {
    color: #2563eb !important;
}

/* =========================================
   STICKY NAVBAR
========================================= */

.header.sticky {
    background: #ffffff !important;
    box-shadow: 0 6px 25px rgba(0,0,0,0.08);
}

/* =========================================
   LOGO TEXT (IF USING TEXT)
========================================= */

.brand-name {
    color: #0f172a !important;
}

/* =========================================
   LOGIN BUTTON (FIXED)
========================================= */

.header .btn {
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    color: #fff !important;
    border-radius: 8px;
    padding: 8px 18px;
    border: none;
}

/* HOVER */
.header .btn:hover {
    opacity: 0.9;
}

/* =========================================
   REMOVE DARK EFFECTS
========================================= */

.header::before,
.header::after {
    display: none !important;
}

/* =========================================
   GLASS NAVBAR (DARK BLUR)
========================================= */

.header {
    background: rgba(15, 23, 42, 0.6) !important; /* dark transparent */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border-bottom: 1px solid rgba(255,255,255,0.08);
    transition: all 0.3s ease;
}

/* TEXT */
.header .navbar-nav .nav-item a {
    color: #e2e8f0 !important;
    font-weight: 500;
}

/* HOVER */
.header .navbar-nav .nav-item a:hover {
    color: #38bdf8 !important;
}

/* ACTIVE */
.header .navbar-nav .nav-item a.active {
    color: #38bdf8 !important;
}

/* LOGO */
.header .navbar-brand {
    color: #fff !important;
}

/* BUTTON */
.header .btn {
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    color: #fff !important;
    border-radius: 8px;
    padding: 8px 18px;
}

/* =========================================
   STICKY (SCROLL EFFECT)
========================================= */

.header.sticky {
    background: rgba(2, 6, 23, 0.85) !important;
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

/* =========================================
   REMOVE OLD WHITE BG
========================================= */

.header::before,
.header::after {
    display: none !important;
}

/* =========================================
   PRICE TEXT FIX (MAIN ISSUE)
========================================= */

.pxp-plans-price-monthly {
    color: #0f172a !important;
    font-size: 28px;
    font-weight: 700;
}

/* PRICE NUMBER */
.pxp-plans-price-monthly {
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* PERIOD TEXT (/ month etc) */
.pxp-plans-price-monthly span {
    color: #64748b !important;
    font-size: 14px;
    margin-left: 5px;
    -webkit-text-fill-color: #64748b !important;
}

/* DISCOUNT OLD PRICE */
.discount {
    color: #94a3b8 !important;
    text-decoration: line-through;
    font-size: 16px;
}
.video-top-stats .stat-box small {
    color: red !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* =========================
   ABOUT POPUP SECTION FINAL
========================= */

.about-section {
    padding: 100px 40px;
    background: #020617;
}

/* Floating Card */
.about-wrapper {
    max-width: 1400px;
    margin: auto;
    position: relative;
    overflow: hidden;

    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(18px);

    border-radius: 30px;
    padding: 40px;

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

    box-shadow:
        0 25px 80px rgba(0,0,0,0.6);

    transition: 0.4s ease;
}

.about-wrapper:hover {
    transform: translateY(-6px);
    box-shadow:
        0 40px 100px rgba(0,0,0,0.7);
}

/* Glow effect */
.about-wrapper::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle,
        rgba(6,182,212,0.15),
        transparent 60%);
    top: -150px;
    left: -150px;
    filter: blur(60px);
    z-index: 0;
}

/* FLEX LAYOUT */
.about-container {
    display: flex;
    align-items: center;
    min-height: 550px;
    position: relative;
    z-index: 2;
}

/* LEFT */
.about-left {
    flex: 1.2;
    padding: 60px 60px 60px 80px;
}

/* RIGHT */
.about-right {
    flex: 0.8;
    padding: 20px;
}

.about-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 25px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* TAG */
.about-tag {
    display: inline-block;
    margin-bottom: 15px;
    color: #06b6d4;
    font-weight: 600;
}

/* HEADING (GLOW) */
.about-left h2 {
    font-size: 46px;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 20px;

    background: linear-gradient(
        90deg,
        #ffffff,
        #06b6d4,
        #4f46e5,
        #ffffff
    );
    background-size: 300% auto;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: gradientMove 6s linear infinite;
}

/* TEXT */
.about-left p {
    color: #94a3b8;
    line-height: 1.7;
    margin-bottom: 25px;
    max-width: 520px;
}

/* POINTS */
.about-points {
    margin-top: 20px;
}

.about-points div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e2e8f0;
    font-size: 15px;
    margin-bottom: 12px;
}

.about-points div::before {
    content: "✔";
    color: #06b6d4;
    font-weight: bold;
}

/* BUTTON */
.about-btn {
    margin-top: 20px;
    display: inline-block;
    background: linear-gradient(45deg,#4f46e5,#06b6d4);
    padding: 14px 30px;
    border-radius: 50px;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
.about-points div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #1e293b;   /* 🔥 DARK TEXT (FIX) */
    font-size: 15px;
    margin-bottom: 12px;
    font-weight: 500;
}

/* ANIMATION */
@keyframes gradientMove {
    0% { background-position: 0% center; }
    100% { background-position: 300% center; }
}

/* MOBILE */
@media(max-width:768px){

    .about-container {
        flex-direction: column !important;
    }

    .about-left {
        padding: 20px !important;
        text-align: left;
    }

    .about-right {
        height: 250px;
        padding: 10px;
    }

}
/* =========================
   PRICING POPUP FINAL
========================= */

/* SECTION BACKGROUND */
.pricing-section {
    padding: 120px 40px;
    background: radial-gradient(
        circle at top right,
        #0f172a,
        #020617 70%
    );
}

/* WHITE POPUP CARD */
.pricing-wrapper {
    max-width: 1400px;
    margin: auto;
    position: relative;

    background: linear-gradient(135deg,#ffffff,#f8fafc);
    border-radius: 30px;
    padding: 50px;

    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
    transition: 0.4s ease;
}

.pricing-wrapper:hover {
    transform: translateY(-6px);
    box-shadow: 0 50px 120px rgba(0,0,0,0.6);
}

/* FIX HEADING COLORS */
.pricing-wrapper .section-title h3 {
    color: #06b6d4 !important;
}

.pricing-wrapper .section-title h2 {
    color: #0f172a !important;
}

.pricing-wrapper .section-title p {
    color: #475569 !important;
}

/* PLAN CARD */
.pricing-wrapper .pp-plans {
    background: #ffffff !important;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: 0.3s;
}

/* HOVER */
.pricing-wrapper .pp-plans:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}

/* FEATURED PLAN */
.pricing-wrapper .pxp-is-featured {
    border: 2px solid #06b6d4 !important;
    box-shadow: 0 0 25px rgba(6,182,212,0.2);
}

/* TEXT COLORS */
.pricing-wrapper .pp-plans-title {
    color: #0f172a !important;
}

.pricing-wrapper .pxp-plans-price-monthly {
    color: #0f172a !important;
}

.pricing-wrapper .pricing-feature-list li {
    color: #475569 !important;
}

/* ICON COLORS */
.pricing-wrapper .pricing-feature-list li i {
    color: #06b6d4;
}

/* BUTTON */
.pricing-wrapper .plans-purchase {
    background: linear-gradient(135deg,#4f46e5,#06b6d4) !important;
    color: #fff !important;
    border-radius: 50px;
}

/* MOBILE */
@media(max-width:768px){

    .pricing-wrapper {
        padding: 20px !important;
    }

    .pp-plans {
        margin-bottom: 15px;
    }

    .section-title h2 {
        font-size: 24px !important;
    }

}
/* =========================
   WHY US POPUP FINAL
========================= */

/* SECTION BACKGROUND */
.why-imagine-glass-section {
    padding: 120px 40px;
    background: radial-gradient(
        circle at top left,
        #0f172a,
        #020617 70%
    );
}

/* POPUP CARD WRAPPER */
.why-wrapper {
    max-width: 1400px;
    margin: auto;
    position: relative;

    background: linear-gradient(135deg,#ffffff,#f8fafc);
    border-radius: 30px;
    padding: 50px;

    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
    transition: 0.4s ease;
}

.why-wrapper:hover {
    transform: translateY(-6px);
    box-shadow: 0 50px 120px rgba(0,0,0,0.6);
}

/* HEADING */
.why-wrapper h3 {
    color: #06b6d4;
    font-weight: 700;
}

.why-wrapper h2 {
    color: #0f172a;
    font-size: 44px;
    font-weight: 800;
    margin-top: 10px;
}

.why-wrapper p {
    color: #475569;
}

/* CARD */
.why-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 35px;
    text-align: center;

    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: 0.3s ease;
}

/* HOVER */
.why-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}

/* ICON */
.why-icon {
    font-size: 30px;
    margin-bottom: 15px;
}

/* TITLE */
.why-card h4 {
    color: #0f172a;
    font-weight: 700;
    margin-bottom: 10px;
}

/* TEXT */
.why-card p {
    color: #475569;
    font-size: 15px;
}

/* MOBILE */
@media(max-width:768px){

    .why-card {
        padding: 20px;
        text-align: center;
    }

    .why-wrapper h2 {
        font-size: 24px !important;
    }

}
/* =========================
   CONTACT FINAL FIX
========================= */

.contact-section {
    padding: 120px 40px;
    background: radial-gradient(circle at top, #0f172a, #020617 70%);
}

/* WRAPPER (MAIN POPUP) */
.contact-wrapper {
    max-width: 1400px;
    margin: auto;

    background: linear-gradient(135deg,#ffffff,#f8fafc);
    border-radius: 30px;
    padding: 50px;

    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}

/* CARD */
.contact-card {
    height: 100%;
    background: #ffffff;
    border-radius: 20px;
    padding: 40px;

    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

/* LEFT TITLE */
.contact-card h3 {
    color: #0f172a;
    font-weight: 700;
    margin-bottom: 25px;
}

/* RIGHT TITLE */
.contact-info h2 {
    color: #0f172a;
    font-weight: 800;
    margin-bottom: 30px;
}

/* INPUTS */
.form-group {
    margin-bottom: 15px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    outline: none;
    font-size: 14px;
}

/* FOCUS EFFECT */
.form-group input:focus,
.form-group textarea:focus {
    border-color: #06b6d4;
}

/* BUTTON */
.contact-btn {
    width: 100%;
    padding: 14px;
    border-radius: 50px;
    border: none;
    background: linear-gradient(135deg,#4f46e5,#06b6d4);
    color: #fff;
    font-weight: 600;
    margin-top: 10px;
    transition: 0.3s;
}

.contact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(79,70,229,0.4);
}

/* INFO BOX */
.info-box {
    display: flex;
    align-items: center;
    gap: 15px;

    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
}

.info-box i {
    font-size: 20px;
    color: #06b6d4;
}

.info-box span {
    font-size: 12px;
    color: #64748b;
}

.info-box p {
    margin: 0;
    color: #0f172a;
    font-weight: 500;
}

/* MOBILE */
@media(max-width:768px){
    .contact-wrapper {
        padding: 25px;
    }

    .contact-card {
        padding: 25px;
    }
}
.contact-clean {
    padding: 80px 0;
    background: #0f172a;
}

/* MAIN CARD */
.contact-card-main {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px;
}

/* LEFT */
.contact-left h3 {
    margin-bottom: 20px;
    color: #000;
}

.contact-left input,
.contact-left textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.contact-left button {
    width: 100%;
    padding: 12px;
    background: #4f46e5;
    color: #fff;
    border: none;
    border-radius: 8px;
}

/* RIGHT */
.contact-right h2 {
    margin-bottom: 20px;
}

.contact-right .info {
    margin-bottom: 15px;
}

.contact-right strong {
    display: block;
}
/* =========================
   PREMIUM CONTACT UPGRADE
========================= */

/* MAIN CARD UPGRADE */
.contact-card-main {
    background: linear-gradient(135deg,#ffffff,#f8fafc);
    border-radius: 24px;
    padding: 50px;

    box-shadow:
        0 20px 60px rgba(0,0,0,0.08),
        0 5px 20px rgba(0,0,0,0.04);
}

/* LEFT TITLE */
.contact-left h3 {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 25px;
}

/* INPUTS UPGRADE */
.contact-left input,
.contact-left textarea {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    font-size: 14px;
    transition: 0.3s;
    background: #f8fafc;
}

/* FOCUS EFFECT */
.contact-left input:focus,
.contact-left textarea:focus {
    border-color: #4f46e5;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
}

/* BUTTON PREMIUM */
.contact-left button {
    background: linear-gradient(135deg,#4f46e5,#06b6d4);
    border-radius: 50px;
    padding: 14px;
    font-weight: 600;
    transition: 0.3s;
}

.contact-left button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(79,70,229,0.3);
}

/* RIGHT SIDE UPGRADE */
.contact-right {
    padding: 20px 30px;
}

/* RIGHT HEADING */
.contact-right h2 {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.3;

    background: linear-gradient(90deg,#4f46e5,#06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* INFO BLOCK */
.contact-right .info {
    margin-top: 25px;
    padding: 15px 20px;
    border-radius: 12px;

    background: #f1f5f9;
    transition: 0.3s;
}

.contact-right .info:hover {
    background: #e2e8f0;
}

/* LABEL */
.contact-right strong {
    font-size: 13px;
    color: #64748b;
}

/* VALUE */
.contact-right p {
    margin: 5px 0 0;
    font-weight: 600;
    color: #0f172a;
}
/* =========================
   PREMIUM FOOTER
========================= */

.footer-premium {
    background: linear-gradient(135deg,#020617,#0f172a);
    color: #cbd5e1;
    padding-top: 80px;
}

/* WRAPPER */
.footer-wrapper {
    max-width: 1400px;
    margin: auto;
}

/* BOX */
.footer-box {
    margin-bottom: 20px;
}

/* LOGO */
.footer-logo {
    max-width: 160px;
    margin-bottom: 15px;
}

/* HEADINGS */
.footer-box h4 {
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 15px;
}

/* TEXT */
.footer-box p {
    color: #94a3b8;
    font-size: 14px;
}

/* LINKS */
.footer-box ul {
    list-style: none;
    padding: 0;
}

.footer-box ul li {
    margin-bottom: 8px;
}

.footer-box ul li a {
    color: #94a3b8;
    text-decoration: none;
    transition: 0.3s;
}

.footer-box ul li a:hover {
    color: #06b6d4;
    padding-left: 5px;
}

/* SOCIAL */
.footer-social {
    display: flex;
    gap: 10px;
}

.footer-social a {
    width: 40px;
    height: 40px;
    background: #020617;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #fff;
    transition: 0.3s;
}

.footer-social a:hover {
    background: linear-gradient(135deg,#4f46e5,#06b6d4);
}

/* BOTTOM */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 40px;
    padding: 20px 0;
}

/* PAYMENT */
.payment-logo {
    max-height: 40px;
}
/* FORCE VISIBILITY FIX */

.footer-premium h4 {
    color: #ffffff !important;
}

.footer-premium ul li a {
    color: #cbd5e1 !important;
}

.footer-premium ul li a:hover {
    color: #06b6d4 !important;
}

.footer-premium p {
    color: #94a3b8 !important;
}

/* FIX CONTACT TEXT */
.footer-premium .footer-box p,
.footer-premium .footer-box span {
    color: #cbd5e1 !important;
}

/* FIX SOCIAL ICON VISIBILITY */
.footer-social a {
    background: #111827 !important;
    color: #ffffff !important;
}
/* =========================
   GLOBAL MOBILE FIX SYSTEM
========================= */

@media(max-width:768px){

    /* SECTION SPACING */
    section {
        padding: 60px 15px !important;
    }

    /* WRAPPERS */
    .about-wrapper,
    .pricing-wrapper,
    .why-wrapper {
        padding: 20px !important;
        border-radius: 20px;
    }

    /* HEADINGS */
    h2 {
        font-size: 26px !important;
        line-height: 1.3;
    }

    h3 {
        font-size: 16px !important;
    }

    p {
        font-size: 14px;
    }

}

/* MOBILE */
@media(max-width:768px){
    .footer-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}
/* =========================
   PREMIUM NAVBAR
========================= */

.nova-header {
    position: fixed;
    top: 20px;
    left: 0;
    width: 100%;
    z-index: 999;
}

/* NAV BOX */
.nova-nav {
    max-width: 1200px;
    margin: auto;
    padding: 12px 25px;

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

    border-radius: 14px;

    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(12px);

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

    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

/* LOGO */
.nova-logo img {
    height: 36px;
}

/* MENU */
.nova-menu {
    display: flex;
    gap: 25px;
}

.nova-menu a {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
}

.nova-menu a:hover {
    color: #06b6d4;
}

/* BUTTON */
.nova-btn {
    padding: 10px 18px;
    border-radius: 10px;
    background: linear-gradient(135deg,#4f46e5,#06b6d4);
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
}

.nova-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(79,70,229,0.4);
}

/* MOBILE */
@media(max-width:768px){

    .nova-menu {
        display: none;
    }

/* =========================================
   PREMIUM DARK NAVBAR - FIXED VERSION
========================================= */

.header,
.nova-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    transition: all .35s ease;
}

/* navbar container */
.nova-nav{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:18px 28px;
    margin-top:18px;

    background:rgba(2, 6, 23, 0.82);
    border:1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(18px);

    border-radius:22px;

    box-shadow:
        0 10px 40px rgba(0,0,0,.35);
}

/* logo */
.nova-logo img{
    height:52px;
    width:auto;
}

/* center menu */
.nova-menu{
    display:flex;
    align-items:center;
    gap:34px;
}

/* links */
.nova-menu a{
    color:#e2e8f0;
    text-decoration:none;
    font-size:15px;
    font-weight:600;
    position:relative;
    transition:.3s;
}

/* hover */
.nova-menu a:hover,
.nova-menu a.active{
    color:#06b6d4;
}

/* underline */
.nova-menu a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:2px;
    background:#06b6d4;
    transition:.3s;
}

.nova-menu a:hover::after,
.nova-menu a.active::after{
    width:100%;
}

/* button */
.nova-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:12px 26px;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        #4f46e5,
        #06b6d4
    );

    color:#fff;
    font-weight:700;
    text-decoration:none;

    transition:.35s;
}

.nova-btn:hover{
    transform:translateY(-2px);
    color:#fff;
}

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

.mobile-toggle{
    display:none;
    font-size:28px;
    color:#fff;
    cursor:pointer;
}

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

    .nova-nav{
        padding:16px 20px;
    }

    .mobile-toggle{
        display:block;
    }

    .nova-menu{
        position:absolute;
        top:95px;
        left:0;
        width:100%;

        flex-direction:column;
        align-items:flex-start;

        padding:24px;

        background:#020617;

        border-radius:20px;

        opacity:0;
        visibility:hidden;
        transform:translateY(-10px);

        transition:.3s;
    }

    .nova-menu.show{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }

    .nova-right{
        display:none;
    }
}
/* =========================================
   MOBILE FIXES - FINAL
========================================= */

@media(max-width:768px){

    /* BODY FIX */
    body{
        overflow-x:hidden;
    }

    /* NAVBAR */
    .nova-nav{
        margin-top:10px;
        padding:14px 16px;
        border-radius:18px;
    }

    .nova-logo img{
        height:38px;
    }

    .mobile-toggle{
        font-size:24px;
    }

    .nova-menu{
        top:78px;
        padding:20px;
        gap:18px;
    }

    .nova-menu a{
        font-size:16px;
    }

    /* HERO SECTION */
    .hero-shery{
        padding-top:140px;
        padding-bottom:80px;
    }

    .hero-box{
        width:100%;
        padding:0 20px;
        text-align:center;
    }

    /* TAG */
    .hero-tag{
        font-size:12px;
        letter-spacing:2px;
    }

    /* MAIN TITLE */
    .hero-box h1{
        font-size:54px !important;
        line-height:1.05 !important;
        letter-spacing:-2px;
        margin-top:18px;
        margin-bottom:24px;
    }

    /* GRADIENT WORD */
    .hero-box h1 span{
        display:inline-block;
    }

    /* SUBTEXT */
    .hero-sub{
        font-size:18px;
        line-height:1.6;
        padding:0 10px;
    }

    /* USERS */
    .hero-users{
        justify-content:center;
        flex-wrap:wrap;
        gap:10px;
        margin-top:30px;
    }

    .hero-users img{
        width:46px;
        height:46px;
        object-fit:cover;
    }

    .hero-users span{
        width:100%;
        text-align:center;
        font-size:16px;
        margin-top:10px;
    }

    /* BUTTON */
    .hero-btn{
        display:inline-flex;
        justify-content:center;
        align-items:center;

        width:100%;
        max-width:320px;

        height:58px;

        margin-top:34px;

        border-radius:18px;

        font-size:18px;
        font-weight:700;
    }

}
/* =========================================
   FINAL MOBILE MENU FIX
========================================= */

/* navbar always above everything */
.nova-header{
    position:fixed !important;
    top:0;
    left:0;
    width:100%;
    z-index:999999 !important;
}

/* navbar wrapper */
.nova-nav{
    position:relative;
    z-index:999999 !important;
}

/* mobile menu */
.nova-menu{
    z-index:999999 !important;
}

/* menu links clickable */
.nova-menu a{
    position:relative;
    z-index:9999999 !important;
    display:block;
    width:100%;
    padding:12px 0;
}

/* disable ALL overlay interference */
section::before,
section::after,
.hero-shery::before,
.hero-shery::after,
.features::before,
.features::after,
.pricing-table::before,
.pricing-table::after,
.faq-modern-section::before,
.faq-modern-section::after{
    pointer-events:none !important;
}
/* ===================================
   WORKING MOBILE NAVBAR
=================================== */

.mobile-toggle{
    display:none;
    color:#fff;
    font-size:24px;
    cursor:pointer;
}

@media(max-width:991px){

    .mobile-toggle{
        display:block;
    }

    .nova-menu{
        position:absolute;
        top:80px;
        left:0;

        width:100%;

        background:#020617;

        padding:20px;

        border-radius:18px;

        display:flex;
        flex-direction:column;
        gap:18px;

        opacity:0;
        visibility:hidden;

        transform:translateY(-10px);

        transition:.3s;
    }

    .nova-menu.show{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }

}
/* hide hamburger on desktop */
.mobile-toggle{
    display:none;
}

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

    /* show hamburger only mobile */
    .mobile-toggle{
        display:flex;
        align-items:center;
        justify-content:center;

        width:42px;
        height:42px;

        border-radius:12px;

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

        color:#fff;

        cursor:pointer;

        z-index:999999;
    }

    /* hide desktop menu initially */
    .nova-menu{

        position:absolute;

        top:80px;
        left:0;

        width:100%;

        padding:20px;

        background:#020617;

        border-radius:18px;

        display:flex;
        flex-direction:column;
        gap:18px;

        opacity:0;
        visibility:hidden;

        pointer-events:none;

        transform:translateY(-10px);

        transition:.3s;
    }

    /* show mobile menu */
    .nova-menu.show{

        opacity:1;
        visibility:visible;

        pointer-events:auto;

        transform:translateY(0);

    }

}
/* DESKTOP */
@media(min-width:992px){

    .mobile-toggle{
        display:none !important;
        visibility:hidden !important;
        opacity:0 !important;
        width:0 !important;
        height:0 !important;
        overflow:hidden !important;
    }

}

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

    .mobile-toggle{
        display:flex !important;
        align-items:center;
        justify-content:center;
    }

}


.feature-flip-back {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: #000;
}

.feature-flip-back iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
    border-radius: 20px;
}

.feature-flip-card {
    perspective: 1200px;
    height: 420px;
}

.feature-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.feature-flip-card:hover .feature-flip-inner {
    transform: rotateY(180deg);
}

.feature-flip-front,
.feature-flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 20px;
}

.feature-flip-back {
    transform: rotateY(180deg);
}

.feature-flip-back iframe {
    border: none;
    width: 100%;
    height: 100%;
    border-radius: 20px;
}
/* ========================= */
/* GLOBAL RESPONSIVE FIXES */
/* ========================= */

html,
body {
    width: 100%;
    overflow-x: hidden;
}

/* Prevent all sections from overflowing */
section,
div,
.container,
.container-fluid {
    max-width: 100%;
}

/* Images responsive */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Flexbox safety */
.row,
.d-flex {
    flex-wrap: wrap;
}

/* ========================= */
/* 3D SHOWCASE FIXES */
/* ========================= */

.sway-3d-showcase {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 100px 0;
}

.dashboard-3d-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 750px;
    overflow: hidden;
    perspective: 1800px;
}

/* MAIN DASHBOARD */

.main-dashboard-card {

    position: absolute;

    width: min(700px, 90vw);

    max-width: 100%;

    height: auto;

    aspect-ratio: 16/10;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        rotateX(10deg)
        rotateY(-10deg);

    transform-style: preserve-3d;

    border-radius: 30px;

    overflow: hidden;

    transition: all 0.3s ease;

    box-shadow:
        0 40px 100px rgba(0,0,0,0.35);

}

/* Dashboard image */

.main-dashboard-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* FLOATING CARDS */

.floating-card {

    position: absolute;

    width: 190px;

    max-width: calc(100vw - 40px);

    padding: 25px;

    border-radius: 24px;

    backdrop-filter: blur(14px);

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

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

    box-shadow:
        0 20px 50px rgba(0,0,0,0.2);

    transition: all 0.3s ease;

    overflow: hidden;
}

/* CARD POSITIONS */

.card-1 {
    top: 40px;
    left: 40px;
}

.card-2 {
    top: 120px;
    right: 40px;
}

.card-3 {
    bottom: 120px;
    left: 40px;
}

.card-4 {
    bottom: 50px;
    right: 40px;
}

.card-5 {
    top: 300px;
    left: 0;
}

.card-6 {
    top: 340px;
    right: 0;
}

/* ========================= */
/* ABOUT IMAGE FIXES */
/* ========================= */

.about-image-stack {
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 100%;
}

.about-img {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
}

.about-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.top-img {
    height: 420px;
}

.bottom-img {
    height: 320px;
    margin-left: 60px;
}

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

@media (max-width: 991px) {

    .dashboard-3d-wrapper {

        height: auto;

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 20px;

        perspective: none;

    }

    .main-dashboard-card {

        position: relative;

        left: auto;
        top: auto;

        transform: none !important;

        width: 100%;

        max-width: 100%;

    }

    .floating-card {

        position: relative;

        width: 100%;

        max-width: 100%;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

    }

    .top-img {
        height: 320px;
    }

    .bottom-img {
        height: 250px;
        margin-left: 0;
    }

}

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

@media (max-width: 576px) {

    .sway-3d-showcase {
        padding: 70px 0;
    }

    .showcase-heading h2 {
        font-size: 34px;
        line-height: 1.3;
    }

    .showcase-heading p {
        font-size: 15px;
    }

    .floating-card {
        padding: 20px;
        border-radius: 20px;
    }

    .floating-card h4 {
        font-size: 18px;
    }

    .top-img {
        height: 240px;
        border-radius: 20px;
    }

    .bottom-img {
        height: 200px;
        border-radius: 20px;
    }

}
/* =========================
   MOBILE FLIP INFO
========================= */

.mobile-flip-info{

    display:none;

    margin-top:20px;

    padding:12px 16px;

    border-radius:14px;

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

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

    color:#cbd5e1;

    font-size:13px;

    font-weight:600;

    align-items:center;

    gap:10px;

    width:fit-content;
}

.mobile-flip-info i{
    color:#06b6d4;
}

/* MOBILE ONLY */

@media(max-width:768px){

    .mobile-flip-info{
        display:inline-flex;
    }

}
/* HIDE ALWAYS */

.mobile-video-info{
    display:none !important;
}

/* ONLY REAL MOBILE DEVICES */

@media only screen and (max-width:767px){

    .mobile-video-info{

        display:flex !important;

        align-items:center;

        gap:10px;

        margin-top:18px;

        color:#fff;

        font-size:13px;

        font-weight:600;
    }

    .mobile-video-info i{
        color:#00d2ff;
    }

}