/*====================================
PREMIUM SERVICE CARD
====================================*/
.service-header{
margin-top:80px;
margin-bottom:40px;
}


.service-card{

    position:relative;

    background:#fff;

    border-radius:26px;

    padding:40px 30px;

    overflow:hidden;

    transition:.45s;

    border:1px solid rgba(13,110,253,.08);

    box-shadow:

    0 15px 45px rgba(0,0,0,.06);

    height:100%;

}

.service-card:hover{

    transform:

        translateY(-15px);

    box-shadow:

        0 30px 70px rgba(13,110,253,.18);

}

.service-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:

    linear-gradient(

        90deg,

        #0d6efd,

        #38bdf8,

        #0dcaf0

    );

}

.service-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:42px;

    background:

        linear-gradient(

            135deg,

            #eaf4ff,

            #ffffff

        );

    box-shadow:

        0 15px 35px rgba(13,110,253,.15);

    transition:.45s;

}

.service-price{

    margin:20px 0;

    font-size:36px;

    font-weight:800;

    color:#0d6efd;

}

.service-price span{

    font-size:15px;

    color:#888;

}

.service-card ul{

    margin-top:25px;

    padding:0;

    list-style:none;

}

.service-card li{

    padding:8px 0;

    color:#555;

    font-size:15px;

}

.service-btn{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:30px;

    text-decoration:none;

    color:white;

    background:

        linear-gradient(

            135deg,

            #0d6efd,

            #38bdf8

        );

    padding:14px 28px;

    border-radius:40px;

    transition:.45s;

}

.service-btn:hover{

    color:white;

    transform:

        translateX(8px);

}

.featured-service{

    transform:scale(1.05);

    border:2px solid #0d6efd;

    background:

    linear-gradient(

        white,

        #f7fbff

    );

}


.featured-service:hover{
transform:scale(1.05);
}

.popular-badge{

    position:absolute;

    top:20px;

    right:-35px;

    background:#0d6efd;

    color:white;

    padding:8px 45px;

    transform:rotate(40deg);

    font-size:12px;

    font-weight:700;

}

.delivery-banner{

    margin-top:70px;

    padding:50px;

    border-radius:30px;

    color:white;

    background:

    linear-gradient(

        135deg,

        #0d6efd,

        #38bdf8

    );

    box-shadow:

        0 25px 60px rgba(13,110,253,.25);

}

#Ourservice-container{

    position:relative;

}

#Ourservice-container::before{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

    background:

    rgba(56,189,248,.08);

    top:-80px;

    left:-120px;

    z-index:-1;

}

.process-card{

    position:relative;

    background:white;

    border-radius:25px;

    padding:45px 25px;

    transition:.45s;

    overflow:hidden;

    border:1px solid rgba(13,110,253,.08);

    box-shadow:

        0 20px 45px rgba(0,0,0,.06);

    height:100%;

}

.process-card:hover{

    transform:

        translateY(-15px);

    box-shadow:

        0 35px 70px rgba(13,110,253,.16);

}

.process-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:

    linear-gradient(

        90deg,

        #0d6efd,

        #38bdf8

    );

}

.process-card i{

    width:85px;

    height:85px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    font-size:40px;

    color:#0d6efd;

    background:#eef6ff;

    transition:.45s;

}

.process-card:hover i{

    transform:

        rotate(10deg)

        scale(1.15);

    background:#0d6efd;

    color:white;

}

.timeline-line{

    position:absolute;

    top:50%;

    right:-55px;

    width:90px;

    background:

    linear-gradient(

        90deg,

        #0d6efd,

        #38bdf8

    );

    border-radius:50px;

}

.step-time{

display:block;

margin-bottom:18px;

font-size:13px;

font-weight:600;

color:#0d6efd;

}

.express-desktop{
 border-radius:35px;

 overflow:hidden;

padding:100px 0;

}



/*=========================================
        EXPRESS CONTENT
=========================================*/


.express-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

}

.express-left{

    position:relative;

    z-index:2;

}

.express-right{

    position:relative;

    height:650px;

}

/*=========================================
        BADGE
=========================================*/

.express-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 26px;

    border-radius:50px;

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

    backdrop-filter:blur(18px);

    font-weight:700;

    color:#222;

    margin-bottom:25px;

}

/*=========================================
        TITLE
=========================================*/

.express-title{

    font-size:58px;

    line-height:1.15;

    margin-bottom:25px;

    font-weight:800;

    color:#1a1a1a;

}

/*=========================================
        DESCRIPTION
=========================================*/

.express-description{

    font-size:20px;

    line-height:1.9;

    color:#444;

    margin-bottom:40px;

    max-width:650px;

}

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

.express-benefits{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin-bottom:40px;

}

.express-benefit-card{

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px;

    border-radius:20px;

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

    backdrop-filter:blur(18px);

    box-shadow:

        0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

}

.express-benefit-card:hover{

    transform:translateY(-6px);

}

.benefit-icon{

    width:60px;

    height:60px;

    border-radius:18px;

    background:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

}

.express-benefit-card h4{

    margin-bottom:6px;

    color:#222;

}

.express-benefit-card small{

    color:#555;

}

/*=========================================
        TEXT CAROUSEL
=========================================*/

.express-carousel{

    position:relative;

    height:45px;

    margin:35px 0;

    overflow:hidden;

}

.express-slide{

    position:absolute;

    width:100%;

    opacity:0;

    transform:translateY(30px);

    transition:.6s;

    font-size:22px;

    font-weight:700;

    color:#1d4ed8;

}

.express-slide.active{

    opacity:1;

    transform:translateY(0);

}

.express-card{


    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

    padding:80px;

    background:

    linear-gradient(

    135deg,

    #FFD43B,

    #FFB703

    );

    box-shadow:

    0 35px 80px rgba(255,193,7,.35);

}

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

.express-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:18px 40px;

    border-radius:60px;

    background:#111827;

    color:white;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

    box-shadow:

        0 20px 45px rgba(0,0,0,.15);

}

.express-btn:hover{

    transform:translateY(-5px);

    color:white;

}

.express-particles span{

    position:absolute;

    font-size:30px;

    opacity:.15;

    animation:particleFloat 12s linear infinite;

}

.express-particles span:nth-child(1){

    left:8%;

    top:18%;

}

.express-particles span:nth-child(2){

    right:10%;

    top:20%;

}

.express-particles span:nth-child(3){

    left:18%;

    bottom:15%;

}

.express-particles span:nth-child(4){

    right:20%;

    bottom:20%;

}

.express-particles span:nth-child(5){

    left:50%;

    top:10%;

}

.express-desktop::before{

    content:none !important;

    display:none !important;

}

@keyframes particleFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

}

/* Mobile illustration hidden by default */



/*=========================================
        FLOATING CARDS
=========================================*/

.floating-express-card{

    position:absolute;

    width:140px;

    height:140px;

    border-radius:26px;

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

    backdrop-filter:blur(18px);

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

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    gap:12px;

    font-size:50px;

    box-shadow:

        0 20px 45px rgba(0,0,0,.15);

}

.floating-express-card span{

    font-size:15px;

    font-weight:700;

}

.card-one{

    top:20px;

    left:10px;

}

.card-two{

    right:0;

    top:40px;

}

.card-three{

    left:-15px;

    bottom:170px;

}

.card-four{

    right:-15px;

    bottom:180px;

}

/*=========================================
        CENTER ICON
=========================================*/

.express-center{

    position:absolute;

    left:50%;

    top:45%;

    transform:translate(-50%,-50%);

    width:240px;

    height:240px;

    border-radius:50%;

    background:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:120px;

    box-shadow:

        0 25px 60px rgba(0,0,0,.15);

}

/*=========================================
        FLOW
=========================================*/

.express-flow{

    position:absolute;

    bottom:60px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    gap:20px;

}

.express-flow div{

    display:flex;

    flex-direction:column;

    align-items:center;

    color:#222;

    font-size:34px;

}

.express-flow span{

    margin-top:8px;

    font-size:14px;

    font-weight:700;

}

.flow-arrow{

    font-size:28px !important;

}

/*=========================================
        COUNTER
=========================================*/

.express-counter{

    position:absolute;

    right:0;

    top:116%;

    transform:translateY(-50%);

    width:200px;

    padding:20px;
    

    border-radius:24px;

    text-align:center;

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

    backdrop-filter:blur(18px);

    box-shadow:

        0 15px 40px rgba(0,0,0,.12);

}

.express-counter h2{

    font-size:52px;

    font-weight:800;

    margin-bottom:8px;

}

.express-counter p{

    margin:0;

    font-weight:600;

}

/*=========================================
        HOVER EFFECTS
=========================================*/

.floating-express-card:hover{

    transform:translateY(-8px);

    transition:.35s;

}

.express-center:hover{

    transform:translate(-50%,-50%) scale(1.05);

    transition:.35s;

}

.express-btn{

    position:relative;

    overflow:hidden;

}

.express-btn::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:70%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.9),

            transparent

        );

    transform:skewX(-30deg);

}

.express-btn:hover::before{

    animation:expressShine .9s;

}

@keyframes expressShine{

    to{

        left:170%;

    }

}

/*=========================================
        SCROLL REVEAL
=========================================*/

.express-content>*{

    opacity:0;

    transform:translateY(80px);

    transition:1s;

}

.express-content.show>*{

    opacity:1;

    transform:translateY(0);

}


/*=========================
ABOUT SECTION
=========================*/

#aboutus-container{

padding:90px 0;
top:40%;

}

.section-tag{

display:inline-block;

padding:8px 18px;

border-radius:30px;

background:#eaf4ff;

color:#0d6efd;

font-weight:700;

letter-spacing:1px;

margin-bottom:18px;

}

.about-title{

font-size:48px;

font-weight:800;

margin-bottom:20px;

}

.about-subtitle{

font-size:18px;

line-height:1.8;

color:#666;

margin-bottom:35px;

}

.about-features{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

margin-top:35px;

}

.about-features div{

padding:18px;

border-radius:18px;

background:white;

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

transition:.4s;

}

.about-features div:hover{

transform:translateY(-8px);

}

.about-features i{

font-size:22px;

color:#0d6efd;

margin-right:10px;

}

.about-stats{

display:flex;

gap:50px;

margin-top:45px;

flex-wrap:wrap;

}

.about-stats h3{

font-size:34px;

font-weight:800;

color:#0d6efd;

}

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

.contact-info-card{

padding:28px;

margin-bottom:22px;

border-radius:22px;

background:white;

box-shadow:0 18px 45px rgba(0,0,0,.06);

transition:.4s;

}

.contact-info-card:hover{

transform:translateY(-10px);

box-shadow:0 30px 60px rgba(13,110,253,.15);

}

.contact-info-card i{

width:65px;

height:65px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:#eef6ff;

font-size:28px;

color:#0d6efd;

margin-bottom:18px;

transition:.4s;

}

.contact-info-card:hover i{

background:#0d6efd;

color:white;

transform:rotate(10deg);

}

.contact-form-card{

padding:40px;

border-radius:30px;

background:white;

box-shadow:0 25px 55px rgba(0,0,0,.08);

}

.contact-form-card input,

.contact-form-card textarea{

border-radius:16px;

padding:15px;

border:1px solid #ddd;

transition:.35s;

}

.contact-form-card input:focus,

.contact-form-card textarea:focus{

border-color:#0d6efd;

box-shadow:0 0 15px rgba(13,110,253,.18);

}

/*=====================================
GET IN TOUCH
======================================*/

.contact-info-wrapper{

    background:#fff;

    padding:40px;

    border-radius:30px;

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

    height:100%;

}

.contact-title{

    font-size:36px;

    font-weight:800;

    margin-bottom:10px;

    color:#0d3b66;

}

.contact-subtitle{

    color:#777;

    margin-bottom:35px;

    line-height:1.8;

}

.contact-info-card{

    display:flex;

    align-items:center;

    gap:20px;

    padding:22px;

    border-radius:20px;

    margin-bottom:18px;

    background:#fff;

    border:1px solid rgba(13,110,253,.08);

    transition:.45s;

    cursor:pointer;

}

.contact-info-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(13,110,253,.15);

}

.contact-icon{

    width:70px;

    height:70px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#eef6ff;

    color:#0d6efd;

    font-size:28px;

    transition:.45s;

}

.contact-info-card:hover .contact-icon{

    background:#0d6efd;

    color:white;

    transform:rotate(12deg) scale(1.12);

}

.contact-social{

    display:flex;

    gap:15px;

    margin-top:30px;

}

.contact-social a{

    width:50px;

    height:50px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#eef6ff;

    color:#0d6efd;

    text-decoration:none;

    transition:.4s;

}

.contact-social a:hover{

    background:#0d6efd;

    color:#fff;

    transform:translateY(-5px);

}

/*=========================
WHY CHOOSE US
==========================*/

.why-section{

padding:100px 0;

background:#f8fbff;

}

.why-card{

background:white;

padding:40px 30px;

border-radius:25px;

text-align:center;

transition:.45s;

box-shadow:0 20px 45px rgba(0,0,0,.06);

height:100%;

}

.why-card:hover{

transform:translateY(-12px);

box-shadow:0 35px 70px rgba(13,110,253,.18);

}

.why-icon{

width:90px;

height:90px;

margin:auto;

margin-bottom:25px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:#eef6ff;

font-size:40px;

color:#0d6efd;

transition:.45s;

}

.why-card:hover .why-icon{

background:#0d6efd;

color:white;

transform:rotate(10deg) scale(1.12);

}

.footer{

background:#081b33;

color:white;

padding:80px 0 30px;

}

.footer h5{

margin-bottom:25px;

font-weight:700;

}

.footer ul{

padding:0;

list-style:none;

}

.footer li{

margin-bottom:15px;

}

.footer a{

color:#ddd;

text-decoration:none;

transition:.35s;

}

.footer a:hover{

color:#38bdf8;

}

.footer-social{

display:flex;

gap:15px;

margin-top:25px;

}

.footer-social a{

width:45px;

height:45px;

border-radius:50%;

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

display:flex;

justify-content:center;

align-items:center;

}

.footer input{

width:100%;

padding:14px;

border-radius:14px;

border:none;

margin-bottom:15px;

}

.footer button{

width:100%;

padding:14px;

border:none;

border-radius:14px;

background:#0d6efd;

color:white;

font-weight:700;

transition:.35s;

}

.footer button:hover{

background:#38bdf8;

}

/*=============================================
LOGIN & SIGNUP FLOATING BACKGROUND
=============================================*/

#loginModal .modal-content,
#signupModal .modal-content{

    position:relative;

    overflow:hidden;

    border-radius:28px;

}

.modal-content{
    position:relative;
    overflow:hidden;
}

.modal{
    z-index:1055;
}

.modal-backdrop{
    z-index:1050;
}

.modal-floating{
    position:absolute;
    inset:0;
    pointer-events:pointer;
}

.modal-body{
    position:relative;
    z-index:10;
}

.auth-close{
    position:absolute;
    top:18px;
    right:18px;
    z-index:20;
}

.modal-bubble{

    position:absolute;

    z-index:30;

    pointer-events:auto;

    cursor:pointer;

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    backdrop-filter:blur(18px);

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

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

    box-shadow:

    0 8px 20px rgba(0,0,0,.15);

    opacity:.55;

    cursor:pointer;

    opacity:.75;

    transform:scale(.8);

    pointer-events:auto;

}

.bubble-premium{

    top:8%;

    left:8%;

}

.bubble-clean{

    top:20%;

    right:8%;

}

.bubble-truck{

    top:20%;

    left:-1%;

}

.bubble-fold{

    bottom:8%;

    right:12%;

}

.bubble-love{

    bottom:10%;

    left:15%;

}

.bubble-leaf{

    top:67%;

    right:9%;

}

.bubble-premium{

    animation:
    modalFloat 9s ease-in-out infinite;

}

.bubble-clean{

    animation:
    modalFloat 7s ease-in-out infinite;

}

.bubble-truck{

    animation:
    modalFloat 11s ease-in-out infinite;

}

.bubble-fold{

    animation:
    modalFloat 8s ease-in-out infinite;

}

.bubble-love{

    animation:
    modalFloat 10s ease-in-out infinite;

}

.bubble-leaf{

    animation:
    modalFloat 6s ease-in-out infinite;

}

.burst-particle{

    position:fixed;

    width:10px;

    height:10px;

    border-radius:50%;

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

    pointer-events:none;

    z-index:999999;

    animation:particleBurst .8s ease forwards;

}

#bubblePopup{

position:fixed;

inset:0;

display:flex;

justify-content:center;

align-items:center;

background:rgba(0,0,0,.25);

backdrop-filter:blur(6px);

opacity:0;

visibility:hidden;

transition:.4s;

z-index:99999;

}

.popup-card{

width:320px;

padding:35px;

border-radius:28px;

text-align:center;

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

backdrop-filter:blur(25px);

box-shadow:

0 30px 60px rgba(0,0,0,.25);

transform:scale(.7);

transition:.4s;

}


#bubblePopup.show{

opacity:1;

visibility:visible;

}

#bubblePopup.show .popup-card{

transform:scale(1);

}

#popupIcon{

font-size:70px;

margin-bottom:18px;

animation:

popupFloat

2s infinite;

}

#popupTitle{

font-size:28px;

font-weight:700;

color:#f8fbff;

margin-bottom:12px;

}

#popupMessage{

font-size:16px;

color:#f8fbff; 

line-height:1.7;

}

.ripple{

    position:fixed;

    width:30px;

    height:30px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.7);

    pointer-events:none;

    animation:ripple .7s ease forwards;

    z-index:99999;

}

/*=========================================
        SUBSCRIPTION SECTION
=========================================*/

.subscription-home-section{

    position:relative;

    overflow:hidden;

    padding:120px 0;

    background:linear-gradient(
        135deg,
        #071d49,
        #0f4fff,
        #3b82f6
    );

}

.subscription-home-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at 20% 20%,
            rgba(255,215,0,.15),
            transparent 35%
        ),

        radial-gradient(
            circle at 80% 80%,
            rgba(255,255,255,.08),
            transparent 40%
        );

}

.subscription-home-content{

    position:relative;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

    z-index:2;

}

.subscription-left{

    color:white;

}

.subscription-badge{

    display:inline-block;

    padding:12px 26px;

    border-radius:50px;

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

    backdrop-filter:blur(18px);

    font-weight:700;

    margin-bottom:25px;

}

.subscription-left h2{

    font-size:60px;

    line-height:1.1;

    margin-bottom:25px;

    font-weight:800;

}

.subscription-carousel{

    position:relative;

    height:90px;

    overflow:hidden;

    margin-bottom:45px;

}

.subscription-slide{

    position:absolute;

    width:100%;

    opacity:0;

    transform:translateY(35px);

    transition:.7s;

    font-size:22px;

    line-height:1.6;

    color:rgba(255,255,255,.9);

}

.subscription-slide.active{

    opacity:1;

    transform:translateY(0);

}

.subscription-home-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:18px 38px;

    border-radius:60px;

    background:white;

    color:#0d6efd;

    font-weight:700;

    text-decoration:none;

    transition:.35s;

    box-shadow:0 20px 45px rgba(0,0,0,.18);

}

.subscription-home-btn:hover{

    transform:translateY(-5px);

}

.subscription-right{

    position:relative;

    height:650px;

}

.membership-card{

    position:absolute;

    left:45%;

    top:45%;

    transform:translate(-50%,-50%);

    width:300px;

    height:380px;

    border-radius:32px;

    background:

        linear-gradient(

            145deg,

            #fff,

            #f8fbff

        );

    box-shadow:

        0 30px 70px rgba(0,0,0,.18);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}

.membership-top{

    width:90px;

    height:90px;

    border-radius:50%;

    background:linear-gradient(

        135deg,

        #FFD54A,

        #FFB300

    );

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:45px;

    margin-bottom:20px;

}

.membership-card h3{

    font-size:38px;

    color:#0d47a1;

    margin-bottom:8px;

}

.membership-card p{

    color:#666;

    margin-bottom:20px;

}

.membership-level{

    padding:12px 28px;

    border-radius:40px;

    background:#0d6efd;

    color:white;

    font-weight:700;

}

.subscription-card{

    position:absolute;

    width:150px;

    height:150px;

    border-radius:28px;

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

    backdrop-filter:blur(18px);

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

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    gap:12px;

    color:white;

    font-size:48px;

    box-shadow:

        0 20px 45px rgba(0,0,0,.18);

}

.subscription-card span{

    font-size:15px;

    font-weight:600;

}

.card-a{


    left:-30px;

    top:20px;


}

.card-b{

    right:0;

    top:40px;

}

.card-c{


    left:-40px;

    bottom:170px;


}

.card-d{

    right:20px;

    bottom:180px;

}

.membership-counter{

    position:absolute;

    bottom:-60px;

    left:80%;

    transform:translateX(-50%);

    width:220px;

    padding:20px;

    border-radius:22px;

    text-align:center;

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

    backdrop-filter:blur(18px);

    color:white;

}

.membership-counter h3{

    font-size:50px;

    margin-bottom:8px;

}

.membership-counter p{

    margin:0;

}

.subscription-home-section::after{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    border-radius:50%;

    background:rgba(255,215,0,.08);

    filter:blur(140px);

    top:-180px;

    left:-180px;

}

.membership-particles span{

    position:absolute;

    font-size:28px;

    opacity:.18;

    animation:particleFloat 12s linear infinite;

}

.membership-particles span:nth-child(1){

    left:10%;

    top:15%;

}

.membership-particles span:nth-child(2){

    right:15%;

    top:20%;

}

.membership-particles span:nth-child(3){

    left:20%;

    bottom:20%;

}

.membership-particles span:nth-child(4){

    right:18%;

    bottom:25%;

}

.membership-particles span:nth-child(5){

    left:50%;

    top:10%;

}

.mobile-member-card h5{

    font-size:24px;

    font-weight:800;

    color:white;

    margin:15px 0 12px;

}

.mobile-member-card small{

    display:block;

    font-size:15px;

    line-height:1.6;

    color:rgba(255,255,255,.85);

}

.mobile-member-counter h2{

    font-size:58px;

    font-weight:900;

    color:white;

    margin-bottom:10px;

}

.mobile-member-counter p{

    font-size:18px;

    color:white;

    font-weight:600;

}

.mobile-member-step span{

    margin-top:10px;

    font-size:18px;

    font-weight:700;

    color:white;

}

.mobile-member-circle{

    width:170px;

    height:170px;

}

.mobile-member-circle{

    font-size:85px;

}

@keyframes particleFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

}

.subscription-home-content>*{

    opacity:0;

    transform:translateY(80px);

    transition:1s;

}

.subscription-home-content.show>*{

    opacity:1;

    transform:translateY(0);

}

.progress{

height:12px;

border-radius:30px;

overflow:hidden;

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

}

.coming-soon-card{

    position:relative;

    opacity:.85;

    overflow:hidden;

    cursor:not-allowed;

    transition:.3s ease;

}

.coming-soon-card:hover{

    transform:translateY(-6px);

    opacity:1;

}

.coming-soon-badge{

    position:absolute;

    top:15px;

    right:-45px;

    width:170px;

    text-align:center;

    background:#f59e0b;

    color:#fff;

    padding:8px 0;

    font-size:.8rem;

    font-weight:700;

    transform:rotate(35deg);

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

}

.coming-soon-card .btn{

    background:#e5e7eb;

    color:#6b7280;

    border:none;

    cursor:not-allowed;

}

/*=========================================
        WEEKEND REWARD SECTION
=========================================*/



.reward-home-section{

    position:relative;

    overflow:hidden;

    padding:120px 0;

    margin-bottom:80px;

    background:
    linear-gradient(
        135deg,
        #0b63ff,
        #3b82f6,
        #60a5fa
    );

}

.reward-home-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at 20% 20%,
            rgba(255,255,255,.18),
            transparent 40%
        ),

        radial-gradient(
            circle at 80% 80%,
            rgba(255,255,255,.12),
            transparent 35%
        );

}

.reward-home-content{

    position:relative;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

    z-index:2;

}

.reward-left{

    color:white;

}

.reward-badge{

    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:

        rgba(255,255,255,.15);

    backdrop-filter:blur(18px);

    margin-bottom:25px;

    font-weight:700;

    letter-spacing:.5px;

}



.reward-left h2{

    font-size:58px;

    line-height:1.15;

    font-weight:800;

    margin-bottom:30px;

}

.reward-carousel{

    position:relative;

    height:90px;

    overflow:hidden;

    margin-bottom:40px;

}

.reward-slide{

    position:absolute;

    width:100%;

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .7s,

        transform .7s;

    font-size:22px;

    line-height:1.7;

    color:

        rgba(255,255,255,.92);

}

.reward-slide.active{

    opacity:1;

    transform:translateY(0);

}

.reward-home-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:18px 38px;

    border-radius:60px;

    background:white;

    color:#0d6efd;

    font-size:18px;

    font-weight:700;

    text-decoration:none;

    transition:.35s;

    box-shadow:

        0 15px 40px rgba(0,0,0,.15);

}

.reward-home-btn:hover{

    transform:

        translateY(-5px);

    box-shadow:

        0 25px 60px rgba(0,0,0,.22);

}

.reward-right{

    position:relative;

    height:650px;

}

.reward-wheel-home{

    position:absolute;

    left:50%;

    top:45%;

    transform:

        translate(-50%,-50%);

    width:240px;

    height:240px;

    border-radius:50%;

    background:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:120px;

    box-shadow:

        0 35px 80px rgba(0,0,0,.18);

}

.floating-card{

    position:absolute;

    width:140px;

    height:140px;

    border-radius:28px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:12px;

    font-size:48px;

    color:white;

    text-align:center;

    background:

        rgba(255,255,255,.12);

    backdrop-filter:blur(20px);

    border:

        1px solid rgba(255,255,255,.25);

    box-shadow:

        0 18px 40px rgba(0,0,0,.15);

}

.floating-card span{

    font-size:14px;

    font-weight:600;

}

.card1{

    left:10px;

    top:20px;

}

.card2{

    right:0;

    top:40px;

}

.card3{

    left:40px;

    bottom:170px;

}

.card4{

    right:20px;

    bottom:180px;

}

.reward-flow{

    position:absolute;

    bottom:65px;

    left:50%;

    transform:

        translateX(-50%);

    display:flex;

    align-items:center;

    gap:18px;

}

.reward-flow div{

    display:flex;

    flex-direction:column;

    align-items:center;

    color:white;

    font-size:34px;

}

.reward-flow small{

    margin-top:10px;

    font-size:13px;

    font-weight:600;

}

.reward-flow span{

    color:white;

    font-size:28px;

}

.reward-counter{

    position:absolute;

    right:10px;

    bottom:-80px;

    width:180px;

    padding:20px;

    border-radius:22px;

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

    backdrop-filter:blur(18px);

    text-align:center;

    color:#fff;

    z-index:10;

}

.reward-counter h3{

    font-size:48px;

    font-weight:800;

    margin-bottom:5px;

}

.reward-counter p{

    margin:0;

    font-size:15px;

}

.reward-home-section::after{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    border-radius:50%;

    background:

        rgba(255,255,255,.08);

    filter:blur(120px);

    top:-150px;

    right:-120px;

}

.reward-home-content>*{

    opacity:0;

    transform:translateY(80px);

    transition:1s;

}

.reward-home-content.show>*{

    opacity:1;

    transform:translateY(0);

}

.floating-icons span{

    position:absolute;

    font-size:30px;

    opacity:.15;

    animation:floatIcons 12s linear infinite;

}

.floating-icons span:nth-child(1){

    left:8%;

    top:18%;

}

.floating-icons span:nth-child(2){

    right:10%;

    top:20%;

}

.floating-icons span:nth-child(3){

    left:15%;

    bottom:15%;

}

.floating-icons span:nth-child(4){

    right:18%;

    bottom:25%;

}

.floating-icons span:nth-child(5){

    left:50%;

    top:10%;

}

/*=============================================
Rewards and subscription Text adjustment
=============================================*/


@keyframes floatIcons{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes float{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}



/*=========================================================
            iPad Pro 12.9" (1024px)
=========================================================*/


@media screen and (min-width:993px) and (max-width:1200px){

    /*=========================================
        NAVBAR - iPad Pro
=========================================*/



.navbar{

        padding:18px 22px;

    }

.navbar .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    flex-wrap:wrap;

    grid-template-areas:
        "toggle logo theme"
        "menu menu menu";


    row-gap:20px;

}



    /* Show hamburger */


    

    /* Center logo */

    .navbar-brand{

        grid-area:logo;

        justify-self:center;

        display:flex;

        align-items:center;

        margin:0;

    }


    

    /* Show theme button */

    .theme-toggle-mobile{

    display:flex !important;

    justify-content:center;


    justify-self:end;

    align-items:center;

    width:45px;

    height:45px;

}

.navbar-toggler{

    display:flex !important;

    grid-area:toggle;

    justify-self:start;

}


@keyframes modalFloat{

    0%{
        transform:translateY(0px) scale(.85);
    }

    25%{
        transform:translateY(-12px) translateX(8px) scale(1);
    }

    50%{
        transform:translateY(-22px) translateX(-6px) scale(.95);
    }

    75%{
        transform:translateY(-10px) translateX(6px) scale(1);
    }

    100%{
        transform:translateY(0px) scale(.85);
    }

}




.express-card,
.reward-home-content,
.subscription-home-content{

    display:grid;
    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:40px;

    padding:55px 40px;

}

/* LEFT SIDE */

.express-left,
.reward-left,
.subscription-left{

    width:100%;
    max-width:100%;

}

/* RIGHT SIDE */

.express-right,
.reward-right,
.subscription-right{

    width:100%;
    max-width:100%;

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

    position:relative;

}

.express-center{

    width:220px;
    height:220px;

    margin:0 auto;

}

.reward-wheel-home{

    width:220px;
    height:220px;

    margin:0 auto;

}

.membership-card{

    transform:scale(.9);

    margin:0 auto;

}

.express-counter {

    position:relative;

    right:auto;
    left:auto;
    top:75%;
    bottom:auto;

    margin:35px auto 0;

}


.membership-counter{

      position:relative;

    right:auto;
    left:45%;
    top:55%;
    bottom:auto;

    margin:35px auto 0;

}

.reward-counter{

      position:relative;

    right:auto;
    left:35%;
    top:55%;
    bottom:auto;

    margin:35px auto 0;

}

}