/* =====================================
   THE SMART PROGRAMMER
   PREMIUM WEBSITE STYLE
   PART 1/2
===================================== */


/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}


html{
    scroll-behavior:smooth;
}


body{

    background:
    radial-gradient(circle at top left,#102a56,transparent 35%),
    radial-gradient(circle at bottom right,#003d2f,transparent 35%),
    #050816;

    color:white;

    overflow-x:hidden;

}

body {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

img {
    pointer-events: none;
    user-select: none;
}



/* SCROLLBAR */


::-webkit-scrollbar{

    width:10px;

}


::-webkit-scrollbar-track{

    background:#050816;

}


::-webkit-scrollbar-thumb{

    background:
    linear-gradient(#0066ff,#00ff99);

    border-radius:20px;

}





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


header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    background:

    rgba(5,8,22,.75);

    backdrop-filter:blur(20px);

    border-bottom:

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

}




.navbar{

    max-width:1450px;

    margin:auto;

    padding:18px 45px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.logo{

    display:flex;

    align-items:center;

    gap:15px;

}



.logo img{

    width:60px;

    height:60px;

    object-fit:contain;

}



.logo h2{

    font-size:1.5rem;

    font-weight:700;

}



.nav-links{

    display:flex;

    gap:35px;

    list-style:none;

}



.nav-links a{

    color:white;

    text-decoration:none;

    font-weight:500;

    transition:.3s;

}



.nav-links a:hover{

    color:#00ff99;

}





.nav-btn{

background:
linear-gradient(
135deg,
#0066ff,
#00ff99
);


padding:10px 18px;


border-radius:50px;


color:white;


text-decoration:none;


font-weight:700;


font-size:14px;


white-space:nowrap;


transition:.3s;


display:flex;

align-items:center;

justify-content:center;

}



.nav-btn:hover{


    transform:translateY(-4px);


    box-shadow:

    0 0 30px #0066ff;


}






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



.hero{


    min-height:100vh;


    padding:

    160px 80px 80px;


    max-width:1500px;


    margin:auto;


    display:flex;


    align-items:center;


    justify-content:space-between;


    gap:50px;


}





.hero-content{


    max-width:700px;


}



.badge{


    display:inline-block;


    padding:10px 20px;


    border-radius:50px;


    background:

    rgba(0,255,153,.1);


    border:

    1px solid rgba(0,255,153,.3);


    color:#00ff99;


    margin-bottom:25px;


}



.hero h1{


    font-size:4.5rem;


    line-height:1.1;


    font-weight:800;


}



.hero h1 span{


    background:

    linear-gradient(
    90deg,
    #0066ff,
    #00ff99
    );


    -webkit-background-clip:text;


    color:transparent;


}




.hero p{


    margin-top:30px;


    color:#c5c5c5;


    font-size:1.2rem;


    line-height:1.8;


}






.code-box{


    margin-top:30px;


    padding:25px;


    background:

    rgba(255,255,255,.05);


    border-radius:20px;


    border:

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


    color:#00ff99;


    font-family:monospace;


    box-shadow:

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


}







.hero-buttons{


    margin-top:40px;


    display:flex;


    gap:20px;


}



.btn-primary,
.btn-secondary{


    padding:16px 35px;


    border-radius:50px;


    text-decoration:none;


    font-weight:600;


    transition:.4s;


}



.btn-primary{


    background:

    linear-gradient(
    135deg,
    #0066ff,
    #0044aa
    );


    color:white;


}



.btn-primary:hover{


    transform:translateY(-5px);


    box-shadow:

    0 0 35px #0066ff;


}





.btn-secondary{


    border:

    2px solid #00ff99;


    color:#00ff99;


}



.btn-secondary:hover{


    background:#00ff99;


    color:#001b12;


    transform:translateY(-5px);


}






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



.hero-image{


    width:460px;


    height:460px;


    border-radius:50%;


    position:relative;


    background:

    radial-gradient(
    circle,
    #00ff99,
    #0066ff,
    transparent 70%
    );


    filter:blur(1px);


    animation:

    rotateGlow 15s linear infinite;


}



@keyframes rotateGlow{


    from{

        transform:rotate(0deg);

    }


    to{

        transform:rotate(360deg);

    }


}



.floating-card{


    position:absolute;


    padding:20px 30px;


    background:

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


    backdrop-filter:blur(20px);


    border-radius:20px;


    border:

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


    box-shadow:

    0 20px 50px rgba(0,0,0,.3);


    animation:

    float 5s infinite;


}



.card1{

    top:40px;

    right:-40px;

}



.card2{

    left:-50px;

    top:190px;

}



.card3{

    bottom:40px;

    right:20px;

}





@keyframes float{


    50%{

        transform:translateY(-15px);

    }


}
/* =====================================
        PART 2/2
===================================== */


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


section{

    max-width:1500px;

    margin:auto;

}


.section-title{

    text-align:center;

    margin-bottom:60px;

}



.section-title h2{

    font-size:3rem;

    font-weight:800;

    background:

    linear-gradient(
    90deg,
    #ffffff,
    #00ff99
    );

    -webkit-background-clip:text;

    color:transparent;

}



.section-title p{

    color:#aaa;

    margin-top:15px;

    font-size:1.1rem;

}






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


.stats{

    display:grid;

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

    gap:25px;

    padding:80px 50px;

}



.stat{

    background:

    rgba(255,255,255,.05);

    border:

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

    padding:40px;

    border-radius:30px;

    text-align:center;

    transition:.4s;

}



.stat:hover{

    transform:translateY(-10px);

    box-shadow:

    0 20px 50px rgba(0,102,255,.25);

}



.stat h2{

    font-size:3rem;

    color:#00ff99;

}



.stat p{

    color:#aaa;

}







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



.about,
.services,
.portfolio,
.testimonials,
.faq,
.pricing,
.contact{

    padding:120px 50px;

}




.about-box{


    background:

    rgba(255,255,255,.05);


    border:

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


    padding:50px;


    border-radius:35px;


    line-height:2;


    color:#ddd;


    box-shadow:

    0 20px 60px rgba(0,0,0,.3);


}






/* ==========================
        SERVICES
========================== */



.service-grid{


    display:grid;


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


    gap:30px;


}



.service-card{


    background:


    rgba(255,255,255,.05);


    border:

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


    padding:45px;


    border-radius:35px;


    transition:.4s;


}



.service-card:hover{


    transform:

    translateY(-15px);


    border-color:#00ff99;


    box-shadow:


    0 20px 60px rgba(0,255,153,.2);


}



.service-card i{


    font-size:3.5rem;


    color:#00ff99;


    margin-bottom:25px;


}



.service-card h3{


    font-size:1.5rem;


    margin-bottom:15px;


}



.service-card p{


    color:#bbb;


    line-height:1.8;


}






/* ==========================
        PORTFOLIO
========================== */



.portfolio-grid{


    display:grid;


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


    gap:30px;


}



.portfolio-card{


    background:

    rgba(255,255,255,.05);


    padding:40px;


    border-radius:30px;


    border:

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


    transition:.4s;


}



.portfolio-card:hover{


    transform:scale(1.03);


}



.portfolio-card h3{


    color:#00ff99;


    margin-bottom:15px;


}







/* ==========================
        TESTIMONIALS
========================== */


.testimonial-grid{


    display:grid;


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


    gap:25px;


}



.testimonial-card{


    background:

    rgba(255,255,255,.05);


    padding:35px;


    border-radius:30px;


}



.testimonial-card p{


    color:#ddd;


    line-height:1.8;


}



.testimonial-card h4{


    color:#00ff99;


    margin-top:20px;


}







/* ==========================
        PRICING
========================== */


.pricing-grid{


    display:grid;


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


    gap:30px;


}



.price-card{


    background:


    rgba(255,255,255,.05);


    padding:45px;


    text-align:center;


    border-radius:35px;


    border:

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


}



.price-card h1{


    color:#00ff99;


    margin:25px 0;


}



.price-card li{


    list-style:none;


    color:#ddd;


    margin:15px;


}



.featured{


    border:

    2px solid #00ff99;


    transform:scale(1.05);


}






/* ==========================
        FORMS
========================== */



.reserve-page{


    min-height:100vh;


    padding:

    160px 20px 80px;


}



.reserve-container{


    max-width:900px;


    margin:auto;


}




.reserve-form{


    display:flex;


    flex-direction:column;


    gap:20px;


    background:

    rgba(255,255,255,.05);


    padding:45px;


    border-radius:35px;


    border:

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


}



.reserve-form input,
.reserve-form select,
.reserve-form textarea,
.contact input,
.contact textarea{


    padding:18px;


    border:none;


    border-radius:18px;


    background:#10182f;


    color:white;


    font-size:1rem;


}



.reserve-form textarea,
.contact textarea{


    min-height:180px;


}




.reserve-form button,
.contact button{


    padding:18px;


    border:none;


    border-radius:20px;


    background:

    linear-gradient(
    135deg,
    #0066ff,
    #00ff99
    );


    color:white;


    font-weight:700;


    cursor:pointer;


    transition:.3s;


}



.reserve-form button:hover,
.contact button:hover{


    transform:translateY(-5px);


    box-shadow:

    0 0 30px #0066ff;


}






/* ==========================
        TRACK PAGE
========================== */


.track-section{


    min-height:100vh;


    padding:160px 20px 80px;


    text-align:center;


}



.track-search{


    display:flex;


    justify-content:center;


    gap:15px;


    flex-wrap:wrap;


}



.track-search input{


    width:400px;


    padding:18px;


    border-radius:20px;


    background:#10182f;


    color:white;


    border:

    1px solid #333;


}


.track-search{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    flex-wrap:nowrap;

}


.track-search input{

    width:400px;

    padding:15px 18px;

    border-radius:20px;

    background:#10182f;

    color:white;

    border:1px solid #333;

    font-size:16px;

}



.track-search button{


    width:auto;

    padding:12px 25px;

    border-radius:20px;

    border:none;

    background:

    linear-gradient(
    135deg,
    #0066ff,
    #00ff99
    );


    color:white;

    cursor:pointer;

    font-weight:700;

    font-size:15px;

    transition:.3s;


}


.track-search button:hover{


    transform:translateY(-3px);

    box-shadow:

    0 0 25px #0066ff;


}





.tracking-result{


    display:none;


    max-width:750px;


    margin:50px auto;


    background:

    rgba(255,255,255,.05);


    padding:40px;


    border-radius:35px;


    text-align:left;


}



.status-timeline{


    margin-top:40px;


    padding-left:40px;


}



.status-item{


    margin-bottom:35px;


    color:#777;


    position:relative;


}



.status-item::before{


    content:"";


    position:absolute;


    left:-35px;


    width:22px;


    height:22px;


    border-radius:50%;


    background:#333;


}



.status-item.active{


    color:white;


}



.status-item.active::before{


    background:#00ff99;


}





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


footer{


    text-align:center;


    padding:60px 20px;


    border-top:

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


}



footer h3{


    color:#00ff99;


}




footer p{


    color:#aaa;


    margin:10px;


}







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


@media(max-width:900px){



.navbar{

    padding:15px 20px;

}


.nav-links{

    display:none;

}


.hero{


    flex-direction:column;

    padding:130px 25px 60px;

}



.hero h1{

    font-size:3rem;

}



.hero-image{


    width:300px;

    height:300px;

}



.stats,
.service-grid,
.pricing-grid,
.testimonial-grid{


    grid-template-columns:1fr;

}



.portfolio-grid{

    grid-template-columns:1fr;

}



.about,
.services,
.portfolio,
.testimonials,
.faq,
.pricing,
.contact{

    padding:80px 20px;

}



}

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


.menu-btn{

    display:none;

    font-size:30px;

    cursor:pointer;

    color:#00ff99;

}



@media(max-width:900px){


.menu-btn{

    display:block;

}



.nav-links{


    position:absolute;

    top:80px;

    left:20px;

    right:20px;


    background:

    rgba(5,8,22,.95);


    backdrop-filter:blur(20px);


    border-radius:25px;


    padding:30px;


    display:none;


    flex-direction:column;


    gap:25px;


    text-align:center;


}



.nav-links.active{

    display:flex;

}



.nav-links a{

    font-size:18px;

}



.nav-btn{

    display:none;

}


}

/* ==========================
      PREMIUM HERO UPDATE
========================== */


.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;

    padding:150px 60px 80px;

}



.hero-content{

    max-width:700px;

}



.hero h1{

    font-size:5rem;

    font-weight:900;

    line-height:1.1;

}



.hero h1 span{

    background:

    linear-gradient(
    90deg,
    #00ff99,
    #0066ff
    );

    -webkit-background-clip:text;

    color:transparent;

}



.hero p{

    margin-top:25px;

    color:#bbb;

    font-size:1.2rem;

    line-height:1.8;

}



.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:35px;

}



.badge{

    display:inline-block;

    padding:10px 20px;

    border-radius:50px;

    background:

    rgba(0,255,153,.1);

    color:#00ff99;

    border:

    1px solid rgba(0,255,153,.3);

}



/* Floating cards premium */


.floating-card{

    animation:

    float 5s infinite ease-in-out;

    backdrop-filter:blur(20px);

}



.floating-card:hover{

    transform:scale(1.08);

}





@keyframes float{


0%{

transform:translateY(0);

}


50%{

transform:translateY(-20px);

}


100%{

transform:translateY(0);

}


}




/* MOBILE HERO */


@media(max-width:900px){



.hero{

    flex-direction:column;

    text-align:center;

    padding:130px 25px 70px;

}



.hero h1{

    font-size:3rem;

}



.hero p{

    font-size:1rem;

}



.hero-buttons{

    flex-direction:column;

}



.btn-primary,
.btn-secondary{

    width:100%;

}



.hero-image{

    width:280px;

    height:280px;

}



.floating-card{

    padding:15px;

    font-size:13px;

}



.card1{

    right:-20px;

}



.card2{

    left:-20px;

}



.card3{

    right:-10px;

}


}

.logo h2{

    white-space:nowrap;

}


@media(max-width:500px){

.logo h2{

    font-size:1rem;

}


.logo img{

    width:45px;

    height:45px;

}

}

.status-item.active{

    text-shadow:

    0 0 15px #00ff99;

}


.status-item.active::before{

    box-shadow:

    0 0 20px #00ff99;

}



.tracking-result h2{

    font-size:2rem;

}


@media(max-width:600px){

.track-section{

    padding-top:120px;

}


.track-section h1{

    font-size:2.3rem;

}


.track-search input{

    width:100%;

}


@media(max-width:600px){

.track-search{

    flex-direction:column;

}


.track-search input{

    width:100%;

}


.track-search button{

    width:auto;

    padding:12px 35px;

}

}
}

/* ==========================
        PREMIUM LOADER
========================== */


#loader{

    background:
    radial-gradient(
        circle,
        #0d1835,
        #050816
    );

}



.loader-logo{

    font-size:5rem;

    letter-spacing:5px;

    color:#00ff99;

    text-shadow:

    0 0 20px #00ff99,

    0 0 40px #0066ff;

    animation:

    logoPulse 1.5s infinite;

}



@keyframes logoPulse{


0%{

transform:scale(1);

opacity:.7;

}


50%{

transform:scale(1.15);

opacity:1;

}


100%{

transform:scale(1);

opacity:.7;

}


}

/* ==========================
        PREMIUM CARDS
========================== */


.service-card,
.price-card,
.portfolio-card,
.testimonial-card,
.stat{


    position:relative;

    overflow:hidden;


}



.service-card::before,
.price-card::before,
.portfolio-card::before,
.testimonial-card::before,
.stat::before{


    content:"";

    position:absolute;

    top:-50%;

    left:-50%;

    width:200%;

    height:200%;


    background:

    linear-gradient(
    120deg,
    transparent,
    rgba(0,255,153,.15),
    transparent
    );


    transform:rotate(25deg);

    transition:.6s;

    opacity:0;


}



.service-card:hover::before,
.price-card:hover::before,
.portfolio-card:hover::before,
.testimonial-card:hover::before,
.stat:hover::before{


    opacity:1;

}

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


.btn-primary,
.btn-secondary,
.nav-btn{


    position:relative;

    overflow:hidden;

}



.btn-primary::after,
.btn-secondary::after,
.nav-btn::after{


    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;


    background:

    linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.4),
    transparent
    );


    transition:.5s;


}



.btn-primary:hover::after,
.btn-secondary:hover::after,
.nav-btn:hover::after{


    left:100%;

}

.section-title h2,
.hero h1{


animation:

titleGlow 3s infinite alternate;


}



@keyframes titleGlow{


from{


text-shadow:

0 0 10px rgba(0,255,153,.2);


}


to{


text-shadow:

0 0 35px rgba(0,255,153,.8);


}


}

/* POLICY PAGE FIX - Navbar spacing */

.policy-header {
    padding-top: 140px !important;
    min-height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.policy-container {
    padding-top: 40px;
    padding-bottom: 60px;
}


.policy-card {
    scroll-margin-top: 120px;
}


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

    .policy-header {
        padding-top: 170px !important;
        padding-left:20px;
        padding-right:20px;
    }

    .policy-container {
        padding:20px;
    }

}

/* ================================
   THE SMART PROGRAMMER POLICY PAGE
================================ */


.policy-page{

background:#071a33;

color:white;

min-height:100vh;

padding-top:110px;

}





.policy-hero{

text-align:center;

padding:70px 20px;

background:

linear-gradient(
135deg,
rgba(25,195,125,.15),
rgba(7,26,51,.9)
);


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

}



.policy-brand{

font-size:42px;

font-weight:900;

color:#19c37d;

letter-spacing:1px;

}



.policy-hero h1{

font-size:48px;

margin:25px 0;

}



.policy-hero p{

font-size:20px;

color:#b8c2d1;

}



.policy-update{

display:inline-block;

margin-top:25px;

padding:12px 25px;

border-radius:50px;

background:#19c37d;

color:#001b12;

font-weight:bold;

}







.policy-container{

max-width:1150px;

margin:auto;

padding:40px 20px;

}







.policy-box{

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

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

border-radius:25px;

padding:40px;

margin-bottom:35px;

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

opacity:1;

transform:none;

transition:.3s;

}








.policy-box:hover{

transform:translateY(-8px);

border-color:#19c37d;

}





.policy-box h2{

color:#19c37d;

font-size:32px;

}



.policy-box h3{

margin-top:25px;

color:white;

}





.policy-box p{

color:#d5deea;

font-size:17px;

line-height:1.7;

}





.policy-box li{

margin:14px 0;

color:#d5deea;

line-height:1.6;

}





.price{

font-size:35px;

font-weight:900;

color:#19c37d;

margin:20px 0;

}




.contact-box span{

color:#19c37d;

font-weight:bold;

font-size:20px;

}





.policy-footer{

background:#020914;

text-align:center;

padding:40px;

color:#b8c2d1;

}





@media(max-width:768px){


.policy-page{

padding-top:90px;

}


.policy-brand{

font-size:32px;

}


.policy-hero h1{

font-size:32px;

}



.policy-box{

padding:25px;

}


}

/* ADDITIONAL SERVICE PAGE */


.additional-page{

background:#071a33;

min-height:100vh;

padding-top:120px;

color:white;

}



.additional-header{

text-align:center;

padding:50px 20px;

}



.additional-header h1{

font-size:45px;

color:#19c37d;

}



.additional-header p{

color:#b8c2d1;

font-size:18px;

}




.additional-container{

max-width:700px;

margin:auto;

padding:20px;

}




#additionalForm{

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

border-radius:25px;

padding:40px;

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

}




.input-group{

margin-bottom:25px;

}



.input-group label{

display:block;

margin-bottom:8px;

font-weight:bold;

}



.input-group input,
.input-group textarea{


width:100%;

padding:15px;

border-radius:12px;

border:none;

background:#ffffff15;

color:white;

font-size:16px;


}



.extra-info{

background:#0b2d5c;

padding:20px;

border-radius:15px;

margin:25px 0;

line-height:1.6;

}



.policy-agreement{

margin:25px 0;

color:#d5deea;

}



.policy-agreement a{

color:#19c37d;

}




button{

width:100%;

padding:16px;

border:none;

border-radius:50px;

background:#19c37d;

font-size:18px;

font-weight:bold;

cursor:pointer;

}



button:hover{

transform:scale(1.03);

}

/* ===========================
      ADMIN PANEL MENU
=========================== */


.admin-menu{

display:flex;

gap:20px;

margin:40px 0;

justify-content:center;

flex-wrap:wrap;

}




.admin-tab{

width:auto;

padding:15px 35px;

border-radius:50px;

background:

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

color:white;

border:

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

font-weight:700;

cursor:pointer;

transition:.3s;

}




.admin-tab:hover{


transform:translateY(-5px);

border-color:#19c37d;

box-shadow:

0 0 30px rgba(25,195,125,.4);

}




.admin-tab.active{


background:

linear-gradient(

135deg,

#0066ff,

#19c37d

);


}





#originalServices h2,
#additionalServices h2{


color:#19c37d;

margin-bottom:30px;

font-size:2rem;

}

@media(max-width:1200px){

.navbar{

gap:15px;

}


.nav-btn{

padding:9px 14px;

font-size:12px;

}


.logo h2{

font-size:1.1rem;

}

}

.policy-page{

padding-top:120px;

}


.policy-hero{

padding-top:80px;

}


.policy-hero h1{

font-size:56px;

margin-top:20px;

}


.policy-container{

max-width:1200px;

margin:auto;

padding:60px 25px;

}

.watermark {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 14px;
    color: rgba(255,255,255,0.15);
    letter-spacing: 1px;
    z-index: 9999;
    pointer-events: none;
    user-select: none;
}

/* =========================================================
   NEW SERVICES + 50% SALE
========================================================= */

.new-services-section{
    position:relative;
    padding:120px 50px;
    overflow:hidden;
}


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

.new-services-heading{
    text-align:center;
    max-width:850px;
    margin:0 auto 50px;
}

.new-services-badge{
    display:inline-block;
    padding:9px 20px;
    border-radius:50px;

    background:
    linear-gradient(
        135deg,
        rgba(0,102,255,.18),
        rgba(0,255,153,.18)
    );

    border:
    1px solid rgba(0,255,153,.35);

    color:#00ff99;

    font-size:.85rem;
    font-weight:700;

    letter-spacing:1px;

    box-shadow:
    0 0 25px rgba(0,255,153,.08);
}


.new-services-heading h2{
    margin-top:20px;

    font-size:3rem;
    font-weight:800;

    background:
    linear-gradient(
        90deg,
        #ffffff,
        #00ff99,
        #0066ff
    );

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;
}


.new-services-heading p{
    margin-top:15px;

    color:#aaa;

    font-size:1.1rem;
}


/* =========================
   50% SALE BANNER
========================= */

.sale-banner{
    position:relative;

    max-width:1200px;

    margin:0 auto 65px;

    padding:35px 45px;

    display:flex;

    align-items:center;

    gap:30px;

    border-radius:30px;

    background:
    linear-gradient(
        135deg,
        rgba(0,102,255,.16),
        rgba(0,255,153,.10),
        rgba(5,8,22,.95)
    );

    border:
    1px solid rgba(0,255,153,.35);

    box-shadow:
    0 20px 70px rgba(0,102,255,.18),
    inset 0 0 40px rgba(0,255,153,.03);

    overflow:hidden;
}


/* animated glow */

.sale-banner::before{
    content:"";

    position:absolute;

    width:250px;
    height:250px;

    top:-130px;
    right:-80px;

    border-radius:50%;

    background:#00ff99;

    filter:blur(100px);

    opacity:.12;

    pointer-events:none;
}


.sale-banner::after{
    content:"";

    position:absolute;

    width:200px;
    height:200px;

    bottom:-120px;
    left:-80px;

    border-radius:50%;

    background:#0066ff;

    filter:blur(90px);

    opacity:.15;

    pointer-events:none;
}


/* sale icon */

.sale-icon{
    position:relative;
    z-index:2;

    width:75px;
    height:75px;

    flex-shrink:0;

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

    border-radius:22px;

    background:
    linear-gradient(
        135deg,
        #0066ff,
        #00ff99
    );

    font-size:2.2rem;

    box-shadow:
    0 0 35px rgba(0,255,153,.25);
}


/* sale text */

.sale-content{
    position:relative;
    z-index:2;

    flex:1;
}


.sale-small{
    display:block;

    margin-bottom:7px;

    color:#00ff99;

    font-size:.8rem;

    font-weight:700;

    letter-spacing:1.5px;
}


.sale-content h2{
    margin:0;

    font-size:2.2rem;

    font-weight:900;

    color:#fff;
}


.sale-content p{
    margin-top:8px;

    color:#aaa;

    font-size:1rem;
}


/* 50% */

.sale-percent{
    position:relative;
    z-index:2;

    font-size:4.5rem;

    line-height:1;

    font-weight:900;

    background:
    linear-gradient(
        135deg,
        #00ff99,
        #0066ff
    );

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;

    text-shadow:
    0 0 35px rgba(0,255,153,.15);
}


/* =========================
   NEW SERVICE GRID
========================= */

.new-services-grid{
    max-width:1200px;

    margin:0 auto;

    display:grid;

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

    gap:25px;
}


/* =========================
   NEW SERVICE CARD
========================= */

.new-service-card{
    position:relative;

    padding:35px 28px;

    min-height:330px;

    display:flex;

    flex-direction:column;

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

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

    border-radius:30px;

    overflow:hidden;

    transition:
    transform .4s ease,
    border-color .4s ease,
    box-shadow .4s ease;
}


.new-service-card::before{
    content:"";

    position:absolute;

    top:-100px;
    right:-100px;

    width:200px;
    height:200px;

    border-radius:50%;

    background:#00ff99;

    filter:blur(90px);

    opacity:.06;

    transition:.4s;
}


.new-service-card:hover{
    transform:translateY(-12px);

    border-color:
    rgba(0,255,153,.55);

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


.new-service-card:hover::before{
    opacity:.14;
}


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

.new-service-icon{
    width:65px;
    height:65px;

    display:flex;

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

    border-radius:20px;

    background:
    linear-gradient(
        135deg,
        rgba(0,102,255,.20),
        rgba(0,255,153,.15)
    );

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

    font-size:2rem;

    margin-bottom:20px;

    box-shadow:
    0 0 25px rgba(0,102,255,.08);
}


/* =========================
   NEW TAG
========================= */

.new-service-tag{
    position:absolute;

    top:25px;
    right:25px;

    padding:5px 10px;

    border-radius:20px;

    background:
    rgba(0,255,153,.10);

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

    color:#00ff99;

    font-size:.65rem;

    font-weight:800;

    letter-spacing:1px;
}


/* =========================
   CARD TEXT
========================= */

.new-service-card h3{
    font-size:1.35rem;

    margin-bottom:12px;

    color:#fff;
}


.new-service-card p{
    color:#aaa;

    line-height:1.7;

    font-size:.92rem;

    flex:1;
}


/* =========================
   PRICE
========================= */

.new-service-price{
    display:flex;

    align-items:baseline;

    gap:6px;

    margin-top:25px;
}


.new-service-price strong{
    font-size:1.35rem;

    color:#00ff99;

    font-weight:800;
}


.new-service-price span{
    color:#aaa;

    font-size:.9rem;
}


.new-service-note{
    display:block;

    margin-top:8px;

    color:#0066ff;

    font-size:.78rem;

    font-weight:700;
}


/* =========================
   INFORMATION NOTE
========================= */

.new-services-note{
    max-width:1200px;

    margin:35px auto 0;

    padding:20px 25px;

    border-radius:20px;

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

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

    color:#999;

    font-size:.85rem;

    line-height:1.7;

    text-align:center;
}


.new-services-note strong{
    color:#00ff99;
}


/* =========================
   PRICING DISCOUNT
========================= */

.old-price{
    color:#777;

    font-size:.95rem;

    text-decoration:line-through;

    margin-top:20px;
}


.discount-label{
    display:inline-block;

    margin-top:5px;

    padding:5px 12px;

    border-radius:20px;

    background:
    rgba(0,255,153,.10);

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

    color:#00ff99;

    font-size:.7rem;

    font-weight:800;

    letter-spacing:.8px;
}


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

@media(max-width:1100px){

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

}


@media(max-width:900px){

    .new-services-section{
        padding:90px 20px;
    }


    .new-services-heading h2{
        font-size:2.3rem;
    }


    .sale-banner{
        padding:30px 25px;

        flex-wrap:wrap;

        text-align:center;

        justify-content:center;
    }


    .sale-content{
        flex:100%;
    }


    .sale-content h2{
        font-size:1.8rem;
    }


    .sale-percent{
        font-size:3.5rem;
    }


    .new-services-grid{
        grid-template-columns:1fr;
    }


    .new-service-card{
        min-height:auto;
    }

}


@media(max-width:500px){

    .new-services-heading h2{
        font-size:2rem;
    }


    .new-services-heading p{
        font-size:.95rem;
    }


    .sale-banner{
        border-radius:25px;
    }


    .sale-icon{
        width:65px;
        height:65px;

        font-size:1.8rem;
    }


    .sale-content h2{
        font-size:1.5rem;
    }


    .sale-small{
        font-size:.7rem;
    }


    .sale-percent{
        font-size:3rem;
    }


    .new-service-card{
        padding:30px 22px;
    }

}

/* =========================================================
   RESERVE PAGE - SPECIAL OFFER
========================================================= */

.reserve-offer-badge {
    display: inline-block;

    margin-bottom: 18px;
    padding: 9px 18px;

    border-radius: 50px;

    background:
        linear-gradient(
            135deg,
            rgba(0, 102, 255, 0.16),
            rgba(0, 255, 153, 0.16)
        );

    border: 1px solid rgba(0, 255, 153, 0.35);

    color: #00ff99;

    font-size: 0.78rem;
    font-weight: 700;

    letter-spacing: 1px;

    box-shadow:
        0 0 25px rgba(0, 255, 153, 0.08);
}


/* =========================
   RESERVE SALE BOX
========================= */

.reserve-sale-box {
    position: relative;

    max-width: 700px;

    margin: 25px auto;

    padding: 22px 28px;

    display: flex;
    flex-direction: column;

    gap: 7px;

    text-align: center;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(0, 102, 255, 0.12),
            rgba(0, 255, 153, 0.08)
        );

    border: 1px solid rgba(0, 255, 153, 0.28);

    box-shadow:
        0 15px 45px rgba(0, 102, 255, 0.10);

    overflow: hidden;
}


.reserve-sale-box::before {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    top: -90px;
    right: -60px;

    border-radius: 50%;

    background: #00ff99;

    filter: blur(70px);

    opacity: 0.10;

    pointer-events: none;
}


.reserve-sale-box strong {
    position: relative;
    z-index: 1;

    color: #00ff99;

    font-size: 1.15rem;

    font-weight: 800;

    letter-spacing: 0.5px;
}


.reserve-sale-box span {
    position: relative;
    z-index: 1;

    color: #aaa;

    font-size: 0.88rem;

    line-height: 1.6;
}


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

@media (max-width: 600px) {

    .reserve-offer-badge {
        font-size: 0.68rem;

        padding: 8px 14px;

        letter-spacing: 0.7px;
    }


    .reserve-sale-box {
        padding: 20px 18px;

        border-radius: 18px;
    }


    .reserve-sale-box strong {
        font-size: 1rem;
    }


    .reserve-sale-box span {
        font-size: 0.82rem;
    }

}

/* =========================================================
   ADMIN PANEL - PROMOTION STATUS
========================================================= */

.admin-promotion-active {
    display: inline-block;

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

    border-radius: 20px;

    background: rgba(0, 255, 153, 0.10);

    border: 1px solid rgba(0, 255, 153, 0.30);

    color: #00ff99;

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.5px;
}

/* =========================================================
   TRACKING PAGE - PRICE & PROMOTION
========================================================= */

.tracking-promotion-active {
    display: inline-block;

    margin-left: 6px;
    padding: 5px 12px;

    border-radius: 50px;

    background: rgba(0, 255, 153, 0.10);

    border: 1px solid rgba(0, 255, 153, 0.35);

    color: #00ff99;

    font-size: 0.75rem;
    font-weight: 800;

    letter-spacing: 0.6px;
}


.tracking-promotion-standard {
    display: inline-block;

    margin-left: 6px;
    padding: 5px 12px;

    border-radius: 50px;

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

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

    color: #aaa;

    font-size: 0.75rem;
    font-weight: 700;
}


/* =========================
   TRACKING INFORMATION
========================= */

.tracking-result p {
    margin: 14px 0;

    color: #aaa;

    line-height: 1.6;
}


.tracking-result p b {
    color: #fff;
}


/* =========================
   TRACKING CODE
========================= */

.tracking-result p:nth-of-type(6) {
    padding: 14px 16px;

    border-radius: 15px;

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

    border: 1px solid rgba(0, 102, 255, 0.18);
}


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

@media (max-width: 600px) {

    .tracking-result {
        padding: 25px 20px;
        border-radius: 25px;
    }


    .tracking-result p {
        font-size: 0.9rem;
    }


    .tracking-promotion-active,
    .tracking-promotion-standard {
        display: block;

        width: fit-content;

        margin: 8px 0 0;
    }

}

/* =========================================================
   TRACKING PAGE - PREMIUM UPDATE
========================================================= */

.tracking-badge {
    display: inline-block;

    margin-bottom: 18px;

    padding: 8px 18px;

    border-radius: 50px;

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

    border: 1px solid rgba(0, 255, 153, 0.28);

    color: #00ff99;

    font-size: 0.75rem;

    font-weight: 800;

    letter-spacing: 1.5px;
}


/* =========================================================
   TRACKING RESULT
========================================================= */

.tracking-result {
    animation: trackingResultAppear 0.5s ease;
}


@keyframes trackingResultAppear {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   TRACKING RESULT TEXT
========================================================= */

.tracking-result p {

    margin: 15px 0;

    color: #aaa;

    line-height: 1.7;

}


.tracking-result p b {

    color: #fff;

}


/* =========================================================
   PROMOTION - 50% OFF
========================================================= */

.tracking-promotion-active {

    display: inline-block;

    margin-left: 8px;

    padding: 6px 13px;

    border-radius: 50px;

    background: rgba(0, 255, 153, 0.10);

    border: 1px solid rgba(0, 255, 153, 0.35);

    color: #00ff99;

    font-size: 0.75rem;

    font-weight: 800;

    letter-spacing: 0.5px;

    box-shadow:
        0 0 15px rgba(0, 255, 153, 0.08);

}


/* =========================================================
   STANDARD PRICE / NEW SERVICE
========================================================= */

.tracking-promotion-standard {

    display: inline-block;

    margin-left: 8px;

    padding: 6px 13px;

    border-radius: 50px;

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

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

    color: #aaa;

    font-size: 0.75rem;

    font-weight: 700;

}


/* =========================================================
   TRACKING CODE BOX
========================================================= */

.tracking-result p:nth-of-type(6) {

    padding: 14px 18px;

    margin-top: 20px;

    border-radius: 18px;

    background: rgba(0, 102, 255, 0.07);

    border: 1px solid rgba(0, 102, 255, 0.18);

}


/* =========================================================
   TRACKING RESULT TITLE
========================================================= */

.tracking-result h2 {

    margin-bottom: 25px;

    font-size: 2rem;

    color: #fff;

}


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

@media (max-width: 600px) {

    .tracking-badge {

        font-size: 0.68rem;

        padding: 7px 14px;

    }


    .tracking-result {

        padding: 25px 20px;

        border-radius: 25px;

    }


    .tracking-result h2 {

        font-size: 1.6rem;

    }


    .tracking-result p {

        font-size: 0.9rem;

    }


    .tracking-promotion-active,
    .tracking-promotion-standard {

        display: block;

        width: fit-content;

        margin: 8px 0 0;

    }

}