/* ===================================================
   INDEX PAGE CSS
   File:\src\styling\style.css
=================================================== */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap');

/* ---------- Reset ---------- */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    background:#0e0e0e;
    color:#ffffff;
    overflow-x:hidden;
}

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

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

ul{
    list-style:none;
}

/* ---------- Variables ---------- */

:root{

    --primary:#ffffff;
    --secondary:#9ca3af;
    --accent:#4f8cff;

    --bg:#0e0e0e;
    --card:#171717;

    --radius:18px;

}

/* ---------- Container ---------- */

.container{

    width:min(1150px,90%);
    margin:auto;

}

/* ---------- Header ---------- */

.header{

    position:fixed;
    top:0;
    left:0;
    width:100%;

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

    backdrop-filter:blur(15px);

    z-index:1000;

}

.header .container{

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

    height:85px;

}

/* ---------- Logo ---------- */

.logo{

    font-size:1.6rem;
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    letter-spacing:2px;

}

/* ---------- Navbar ---------- */

.nav-links{

    display:flex;
    gap:35px;

}

.nav-links a{

    color:var(--secondary);
    transition:.3s;

}

.nav-links a:hover{

    color:white;

}

.nav-links .active{

    color:white;

}

/* ---------- Hamburger ---------- */

.hamburger{

    display:none;
    flex-direction:column;
    gap:6px;
    cursor:pointer;

}

.hamburger span{

    width:25px;
    height:3px;
    background:white;

}

/* ---------- Hero ---------- */

.hero{

    min-height:100vh;

    display:flex;
    align-items:center;

    padding-top:90px;

}

.hero-content{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;

}

/* ---------- Hero Text ---------- */

.tag{

    display:inline-block;

    padding:8px 18px;

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

    border-radius:30px;

    color:var(--accent);

    margin-bottom:25px;

    font-size:.85rem;

    letter-spacing:1px;

}

.hero h1{

    font-size:4rem;
    line-height:1.1;

    font-family:'Space Grotesk',sans-serif;

    margin-bottom:25px;

}

.hero h1 span{

    color:var(--accent);

}

.hero p{

    color:var(--secondary);

    line-height:1.8;

    font-size:1.1rem;

    margin-bottom:40px;

    max-width:520px;

}

/* ---------- Buttons ---------- */

.hero-buttons{

    display:flex;
    gap:20px;

}

.btn{

    padding:16px 34px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

    display:inline-flex;

    align-items:center;

    justify-content:center;

}

.primary{

    background:var(--accent);

    color:white;

}

.primary:hover{

    transform:translateY(-5px);

    box-shadow:0 12px 25px rgba(79,140,255,.35);

}

.secondary{

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

}

.secondary:hover{

    background:white;
    color:black;

}

/* ---------- Hero Image ---------- */

.hero-image{

    border-radius:25px;

    overflow:hidden;

    background:var(--card);

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

}

.hero-image img{

    transition:.5s;

}

.hero-image:hover img{

    transform:scale(1.04);

}

/* ---------- Section ---------- */

section{

    padding:110px 0;

}

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title h2{

    font-size:2.6rem;

    margin-bottom:15px;

    font-family:'Space Grotesk',sans-serif;

}

.section-title p{

    color:var(--secondary);

}

/* ---------- Featured ---------- */

.featured-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:30px;

}

.project-card{

    position:relative;

    overflow:hidden;

    border-radius:20px;

    cursor:pointer;

}

.project-card img{

    height:420px;

    object-fit:cover;

    transition:.5s;

}

.project-card:hover img{

    transform:scale(1.08);

}

.overlay{

    position:absolute;

    bottom:0;
    left:0;

    width:100%;

    padding:25px;

    background:linear-gradient(transparent,rgba(0,0,0,.9));

}

.overlay h3{

    margin-bottom:8px;

}

.overlay p{

    color:#ddd;

}

.center{

    text-align:center;

    margin-top:50px;

}

/* ---------- Services ---------- */

.services-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:25px;

}

.service{

    background:var(--card);

    padding:40px 30px;

    border-radius:20px;

    transition:.35s;

}

.service:hover{

    transform:translateY(-10px);

    border:1px solid rgba(79,140,255,.3);

}

.number{

    color:var(--accent);

    font-size:2rem;

    font-weight:bold;

    margin-bottom:18px;

}

.service h3{

    margin-bottom:15px;

}

.service p{

    color:var(--secondary);

    line-height:1.7;

}

/* ---------- CTA ---------- */

.cta{

    text-align:center;

}

.cta h2{

    font-size:3rem;

    margin-bottom:20px;

}

.cta p{

    color:var(--secondary);

    margin-bottom:35px;

}

/* ---------- Footer ---------- */

footer{

    background:#090909;

    padding-top:70px;

}

.footer-grid{

    display:grid;

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

    gap:50px;

}

.footer-grid h3{

    margin-bottom:20px;

}

.footer-grid h4{

    margin-bottom:20px;

}

.footer-grid li{

    margin-bottom:12px;

}

.footer-grid a{

    color:var(--secondary);

    transition:.3s;

}

.footer-grid a:hover{

    color:white;

}

.footer-grid p{

    color:var(--secondary);

    line-height:1.8;

}

.copyright{

    text-align:center;

    padding:30px 0;

    margin-top:50px;

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

    color:#888;

}

/* ---------- Responsive ---------- */

@media(max-width:900px){

.hero-content{

grid-template-columns:1fr;

text-align:center;

}

.hero p{

margin:auto;
margin-bottom:35px;

}

.hero-buttons{

justify-content:center;

}

.hero-right{

order:-1;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

}

@media(max-width:768px){

.nav-links{

display:none;

}

.hamburger{

display:flex;

}

.hero h1{

font-size:2.8rem;

}

.section-title h2{

font-size:2rem;

}

.cta h2{

font-size:2.2rem;

}

}

@media(max-width:500px){

.hero{

padding-top:120px;

}

.hero h1{

font-size:2.2rem;

}

.hero-buttons{

flex-direction:column;

}

.btn{

width:100%;

}

}

/* Mobile Navigation */

@media (max-width:768px){

    .nav-links{
        position:absolute;
        top:85px;
        left:0;
        width:100%;
        background:#111;
        flex-direction:column;
        text-align:center;
        padding:25px 0;
        display:none;
    }

    .nav-links.show{
        display:flex;
    }

}

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

/* ---------- Page Hero ---------- */

.page-hero{

    padding:180px 0 100px;
    text-align:center;
    background:linear-gradient(to bottom,#0e0e0e,#141414);

}

.page-hero h1{

    font-size:4rem;
    margin:25px 0 20px;
    font-family:'Space Grotesk',sans-serif;
    line-height:1.2;

}

.page-hero p{

    max-width:700px;
    margin:auto;
    color:var(--secondary);
    line-height:1.8;
    font-size:1.1rem;

}

/* ---------- About Section ---------- */

.about-section{

    padding:100px 0;

}

.about-grid{

    display:grid;
    grid-template-columns:420px 1fr;
    gap:70px;
    align-items:center;

}

.about-image{

    border-radius:20px;
    overflow:hidden;
    background:var(--card);
    box-shadow:0 15px 40px rgba(0,0,0,.35);

}

.about-image img{

   display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
    image-rendering: auto;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition:.4s;

}

.about-image:hover img{

    transform:scale(1.05);

}

.about-content h2{

    font-size:2.8rem;
    margin-bottom:25px;
    font-family:'Space Grotesk',sans-serif;

}

.about-content p{

    color:var(--secondary);
    line-height:1.9;
    margin-bottom:20px;

}

.about-content strong{

    color:#ffffff;

}

/* ---------- Skills ---------- */

.skills{

    background:#111;

}

.skills-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;

}

.skill-card{

    background:var(--card);
    padding:30px;
    border-radius:18px;
    transition:.3s;

}

.skill-card:hover{

    transform:translateY(-8px);

}

.skill-card h3{

    margin-bottom:18px;

}

.skill-card span{

    display:block;
    margin-top:12px;
    color:var(--accent);
    font-weight:600;

}

/* ---------- Progress Bar ---------- */

.progress{

    width:100%;
    height:10px;
    background:#262626;
    border-radius:50px;
    overflow:hidden;

}

.progress-fill{

    height:100%;
    background:linear-gradient(90deg,#4f8cff,#66a3ff);
    border-radius:50px;

}

/* ---------- Responsive ---------- */

@media(max-width:900px){

    .page-hero h1{

        font-size:2.8rem;

    }

    .about-grid{

        grid-template-columns:1fr;
        text-align:center;

    }

    .about-image{

        max-width:400px;
        margin:auto;

    }

}

@media(max-width:600px){

    .page-hero{

        padding:150px 0 80px;

    }

    .page-hero h1{

        font-size:2.2rem;

    }

    .about-content h2{

        font-size:2rem;

    }

    .skills-grid{

        grid-template-columns:1fr;

    }

}

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

/* ===========================
   Filter Section
=========================== */

.portfolio-filter{
    padding:30px 0 60px;
}

.filter-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:18px;
}

.filter-btn{

    padding:12px 28px;

    border:none;

    outline:none;

    background:#171717;

    color:#cfcfcf;

    border-radius:50px;

    font-size:.95rem;

    font-weight:600;

    cursor:pointer;

    transition:.35s;

}

.filter-btn:hover{

    background:#4f8cff;

    color:#fff;

    transform:translateY(-3px);

}

.filter-btn.active{

    background:#4f8cff;

    color:white;

}

/* ===========================
   Featured Project
=========================== */

.featured-project{

    padding:90px 0;

}

.featured-layout{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.featured-image{

    overflow:hidden;

    border-radius:24px;

    background:#171717;

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

}

.featured-image img{

    width:100%;

    display:block;

    transition:.6s;

}

.featured-image:hover img{

    transform:scale(1.05);

}

.featured-content{

    display:flex;

    flex-direction:column;

}

.featured-tag{

    display:inline-block;

    width:fit-content;

    margin-bottom:18px;

    padding:8px 18px;

    border-radius:40px;

    background:rgba(79,140,255,.15);

    color:#4f8cff;

    font-size:.85rem;

    font-weight:600;

    letter-spacing:1px;

}

.featured-content h2{

    font-size:3rem;

    margin-bottom:10px;

    font-family:'Space Grotesk',sans-serif;

}

.featured-content h3{

    color:#4f8cff;

    margin-bottom:25px;

    font-weight:500;

}

.featured-content p{

    color:#b8b8b8;

    line-height:1.9;

    margin-bottom:35px;

}

/* ===========================
   Project Info
=========================== */

.project-info{

    display:grid;

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

    gap:20px;

    margin-bottom:40px;

}

.project-info div{

    background:#171717;

    padding:22px;

    border-radius:18px;

    transition:.3s;

}

.project-info div:hover{

    transform:translateY(-5px);

}

.project-info h4{

    margin-bottom:8px;

    color:#4f8cff;

    font-size:.95rem;

}

.project-info p{

    margin:0;

    color:#fff;

    font-weight:500;

}

/* ===========================
   Responsive
=========================== */

@media(max-width:950px){

.featured-layout{

grid-template-columns:1fr;

}

.featured-content{

text-align:center;

align-items:center;

}

.project-info{

grid-template-columns:1fr;

}

}

@media(max-width:600px){

.filter-buttons{

gap:12px;

}

.filter-btn{

width:100%;

}

.featured-content h2{

font-size:2.3rem;

}

}

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

.portfolio-gallery{
    padding:100px 0;
}

/* ---------- Grid ---------- */

.portfolio-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

}

/* ---------- Card ---------- */

.portfolio-card{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    background:#171717;

    cursor:pointer;

    transition:.45s ease;

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

}

.portfolio-card:hover{

    transform:translateY(-12px);

    box-shadow:0 30px 70px rgba(0,0,0,.45);

}

/* ---------- Image ---------- */

.portfolio-card img{

    width:100%;

    height:430px;

    object-fit:cover;

    display:block;

    transition:.6s ease;

}

.portfolio-card:hover img{

    transform:scale(1.12);

}

/* ---------- Overlay ---------- */

.portfolio-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:35px;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.92),
        rgba(0,0,0,.45),
        transparent
    );

    opacity:0;

    transition:.45s;

}

.portfolio-card:hover .portfolio-overlay{

    opacity:1;

}

/* ---------- Category ---------- */

.portfolio-overlay span{

    display:inline-block;

    width:fit-content;

    padding:8px 16px;

    margin-bottom:18px;

    border-radius:40px;

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

    color:#4f8cff;

    font-size:.8rem;

    font-weight:600;

    letter-spacing:1px;

}

/* ---------- Title ---------- */

.portfolio-overlay h3{

    font-size:2rem;

    margin-bottom:10px;

    font-family:'Space Grotesk',sans-serif;

}

/* ---------- Description ---------- */

.portfolio-overlay p{

    color:#d0d0d0;

    line-height:1.7;

    margin-bottom:25px;

}

/* ---------- Button ---------- */

.portfolio-overlay .btn{

    width:fit-content;

}

/* ---------- Shine Effect ---------- */

.portfolio-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.22),

        transparent

    );

    transition:.8s;

    z-index:3;

}

.portfolio-card:hover::before{

    left:150%;

}

/* ---------- Decorative Glow ---------- */

.portfolio-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:24px;

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

    pointer-events:none;

}

/* ==========================================================
   HOVER MICRO ANIMATIONS
========================================================== */

.portfolio-card:hover h3{

    transform:translateY(-3px);

    transition:.35s;

}

.portfolio-card:hover p{

    transform:translateY(-2px);

    transition:.35s;

}

.portfolio-card:hover span{

    transform:translateY(-2px);

    transition:.35s;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:900px){

.portfolio-grid{

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

}

}

@media(max-width:700px){

.portfolio-grid{

grid-template-columns:1fr;

}

.portfolio-card img{

height:360px;

}

}

@media(max-width:500px){

.portfolio-overlay{

padding:25px;

}

.portfolio-overlay h3{

font-size:1.6rem;

}

}

/* ==========================================================
   CLIENTS SECTION
========================================================== */

.clients{
    padding:110px 0;
    background:#111;
}

.clients-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:30px;

    margin-top:60px;

}

.client-card{

    background:#171717;

    padding:45px 20px;

    border-radius:20px;

    text-align:center;

    transition:.35s;

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

}

.client-card:hover{

    transform:translateY(-10px);

    border-color:#4f8cff;

    box-shadow:0 15px 40px rgba(79,140,255,.15);

}

.client-card h3{

    font-family:'Space Grotesk',sans-serif;

    letter-spacing:2px;

    font-size:1.15rem;

    color:#ffffff;

}

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

.cta{

    padding:120px 0;

    text-align:center;

}

.cta h2{

    font-size:3rem;

    margin-bottom:25px;

    font-family:'Space Grotesk',sans-serif;

}

.cta p{

    max-width:700px;

    margin:auto auto 45px;

    color:#b8b8b8;

    line-height:1.9;

}

.cta .hero-buttons{

    justify-content:center;

}

/* ==========================================================
   FILTER ANIMATION
========================================================== */

.portfolio-card.hide{

    opacity:0;

    transform:scale(.9);

    pointer-events:none;

}

.portfolio-card.show{

    opacity:1;

    transform:scale(1);

}

/* ==========================================================
   LIGHTBOX
========================================================== */

.lightbox{

    position:fixed;

    inset:0;

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

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9999;

}

.lightbox.active{

    opacity:1;

    visibility:visible;

}

/* ==========================================
   LIGHTBOX IMAGE
========================================== */

.lightbox img{
    max-width: min(90vw, 1200px);
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    image-rendering: auto;
}


.lightbox-close{

    position:absolute;

    top:30px;

    right:40px;

    font-size:2rem;

    cursor:pointer;

    color:#fff;

}

/* ==========================================================
   SCROLL ANIMATION
========================================================== */

.fade-up{

    opacity:0;

    transform:translateY(60px);

    transition:.8s ease;

}

.fade-up.visible{

    opacity:1;

    transform:translateY(0);

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:900px){

.clients-grid{

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

}

}

@media(max-width:700px){

.clients-grid{

grid-template-columns:1fr;

}

.cta h2{

font-size:2.3rem;

}

}

@media(max-width:500px){

.client-card{

padding:35px 20px;

}

.cta{

padding:90px 0;

}

}

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

.btn{

    position:relative;

    overflow:hidden;

}

.ripple{

    position:absolute;

    border-radius:50%;

    transform:scale(0);

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

    animation:ripple .6s linear;

    pointer-events:none;

}

@keyframes ripple{

    to{

        transform:scale(4);

        opacity:0;

    }

}

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

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

.services-intro{

    padding:100px 0;

}

.services-cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

    margin-top:60px;

}

/* ---------- Service Card ---------- */

.service-box{

    background:#171717;

    padding:40px 35px;

    border-radius:22px;

    transition:.35s ease;

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

    overflow:hidden;

    position:relative;

}

.service-box:hover{

    transform:translateY(-10px);

    border-color:#4f8cff;

    box-shadow:0 20px 45px rgba(79,140,255,.15);

}

/* ---------- Top Glow ---------- */

.service-box::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:#4f8cff;

    transform:scaleX(0);

    transition:.35s;

}

.service-box:hover::before{

    transform:scaleX(1);

}

/* ---------- Icon ---------- */

.service-icon{

    width:70px;
    height:70px;

    border-radius:18px;

    background:rgba(79,140,255,.15);

    color:#4f8cff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

    margin-bottom:25px;

    transition:.35s;

}

.service-box:hover .service-icon{

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

}

/* ---------- Heading ---------- */

.service-box h3{

    font-size:1.5rem;

    margin-bottom:18px;

    font-family:'Space Grotesk',sans-serif;

}

/* ---------- Description ---------- */

.service-box p{

    color:#bdbdbd;

    line-height:1.8;

    margin-bottom:25px;

}

/* ---------- List ---------- */

.service-box ul{

    padding-left:0;

}

.service-box li{

    margin-bottom:12px;

    color:#d5d5d5;

}

/* ==========================================
   DESIGN PROCESS
========================================== */

.design-process{

    padding:110px 0;

    background:#111;

}

.process-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:35px;

    margin-top:60px;

}

/* ---------- Process Card ---------- */

.process-card{

    position:relative;

    background:#171717;

    padding:40px 30px;

    border-radius:20px;

    text-align:center;

    transition:.35s;

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

}

.process-card:hover{

    transform:translateY(-10px);

    border-color:#4f8cff;

    box-shadow:0 18px 45px rgba(79,140,255,.18);

}

/* ---------- Number ---------- */

.process-number{

    width:75px;

    height:75px;

    margin:0 auto 25px;

    border-radius:50%;

    background:#4f8cff;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.4rem;

    font-weight:700;

    font-family:'Space Grotesk',sans-serif;

}

/* ---------- Heading ---------- */

.process-card h3{

    margin-bottom:18px;

    font-size:1.4rem;

    font-family:'Space Grotesk',sans-serif;

}

/* ---------- Text ---------- */

.process-card p{

    color:#bdbdbd;

    line-height:1.8;

}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:900px){

.services-cards{

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

}

.process-grid{

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

}

}

@media(max-width:700px){

.services-cards{

grid-template-columns:1fr;

}

.process-grid{

grid-template-columns:1fr;

}

.service-box{

text-align:center;

}

.service-icon{

margin:0 auto 25px;

}

}

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

.pricing{

    padding:110px 0;

}

.pricing-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:35px;

    margin-top:60px;

}

/* ---------- Pricing Card ---------- */

.pricing-card{

    position:relative;

    background:#171717;

    padding:45px 35px;

    border-radius:22px;

    text-align:center;

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

    transition:.35s;

    overflow:hidden;

}

.pricing-card:hover{

    transform:translateY(-12px);

    border-color:#4f8cff;

    box-shadow:0 20px 50px rgba(79,140,255,.18);

}

/* ---------- Featured Package ---------- */

.featured-price{

    border:2px solid #4f8cff;

    transform:scale(1.04);

    box-shadow:0 20px 60px rgba(79,140,255,.20);

}

.featured-price:hover{

    transform:scale(1.06);

}

/* ---------- Pricing Tag ---------- */

.pricing-tag{

    display:inline-block;

    padding:8px 18px;

    margin-bottom:25px;

    background:rgba(79,140,255,.15);

    color:#4f8cff;

    border-radius:30px;

    font-size:.8rem;

    font-weight:600;

    letter-spacing:1px;

}

/* ---------- Title ---------- */

.pricing-card h3{

    font-size:1.6rem;

    margin-bottom:20px;

    font-family:'Space Grotesk',sans-serif;

}

/* ---------- Price ---------- */

.pricing-card h1{

    font-size:2.6rem;

    margin-bottom:30px;

    color:#4f8cff;

    font-family:'Space Grotesk',sans-serif;

}

/* ---------- List ---------- */

.pricing-card ul{

    list-style:none;

    margin-bottom:35px;

    text-align:left;

}

.pricing-card li{

    margin-bottom:15px;

    color:#d3d3d3;

    line-height:1.6;

}

/* ---------- Button ---------- */

.pricing-card .btn{

    width:100%;

}

/* ---------- Decorative Glow ---------- */

.pricing-card::before{

    content:"";

    position:absolute;

    top:-100px;

    right:-100px;

    width:180px;

    height:180px;

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

    border-radius:50%;

    transition:.4s;

}

.pricing-card:hover::before{

    transform:scale(1.4);

}

/* ==========================================================
   WHY CHOOSE ME
========================================================== */

.why-me{

    padding:110px 0;

    background:#111;

}

.why-me .services-grid{

    margin-top:60px;

}

/* Reuse existing .service styles with enhancement */

.why-me .service{

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

}

.why-me .service:hover{

    border-color:#4f8cff;

    box-shadow:0 18px 45px rgba(79,140,255,.15);

}

.why-me .number{

    width:60px;

    height:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#4f8cff;

    color:#fff;

    border-radius:50%;

    font-size:1.3rem;

    margin-bottom:20px;

}

.why-me h3{

    margin-bottom:15px;

    font-family:'Space Grotesk',sans-serif;

}

.why-me p{

    color:#bdbdbd;

    line-height:1.8;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:1000px){

    .pricing-grid{

        grid-template-columns:1fr;

    }

    .featured-price{

        transform:none;

    }

    .featured-price:hover{

        transform:translateY(-10px);

    }

}

@media(max-width:700px){

    .pricing-card{

        padding:35px 25px;

    }

    .pricing-card h1{

        font-size:2.2rem;

    }

    .pricing-card ul{

        text-align:center;

    }

}

/* ==========================================================
   FAQ SECTION
========================================================== */

.faq{

    padding:110px 0;

}

.faq-container{

    max-width:900px;

    margin:60px auto 0;

}

.faq-item{

    background:#171717;

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

    border-radius:18px;

    margin-bottom:20px;

    overflow:hidden;

    transition:.35s;

}

.faq-item:hover{

    border-color:#4f8cff;

    box-shadow:0 12px 35px rgba(79,140,255,.12);

}

/* ---------- Question ---------- */

.faq-question{

    width:100%;

    background:none;

    border:none;

    outline:none;

    color:#fff;

    padding:25px 30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    font-size:1.05rem;

    font-weight:600;

    text-align:left;

    transition:.3s;

}

.faq-question span{

    font-size:1.5rem;

    color:#4f8cff;

    transition:.3s;

}

/* ---------- Answer ---------- */

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .4s ease;

}

.faq-answer p{

    padding:0 30px 25px;

    color:#bdbdbd;

    line-height:1.8;

}

/* ---------- Active ---------- */

.faq-item.active .faq-answer{

    max-height:250px;

}

.faq-item.active .faq-question span{

    transform:rotate(45deg);

}

/* ==========================================================
   CTA ENHANCEMENTS
========================================================== */

.cta{

    position:relative;

    overflow:hidden;

}

.cta::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:rgba(79,140,255,.05);

    border-radius:50%;

    top:-250px;

    right:-180px;

    filter:blur(50px);

    pointer-events:none;

}

.cta::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    background:rgba(79,140,255,.05);

    border-radius:50%;

    bottom:-180px;

    left:-150px;

    filter:blur(45px);

    pointer-events:none;

}

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

.fade-up{

    opacity:0;

    transform:translateY(60px);

    transition:.8s ease;

}

.fade-up.visible{

    opacity:1;

    transform:translateY(0);

}

/* ==========================================================
   GENERAL HOVER POLISH
========================================================== */

.service-box,
.process-card,
.pricing-card,
.client-card,
.portfolio-card{

    will-change:transform;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:900px){

    .faq-question{

        padding:22px 24px;

        font-size:1rem;

    }

    .faq-answer p{

        padding:0 24px 22px;

    }

}

@media(max-width:600px){

    .faq{

        padding:90px 0;

    }

    .faq-question{

        padding:20px;

        font-size:.95rem;

    }

    .faq-question span{

        font-size:1.3rem;

    }

    .faq-answer p{

        padding:0 20px 20px;

        font-size:.95rem;

    }

}

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

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

.contact-section{

    padding:100px 0;

}

.contact-layout{

    display:grid;

    grid-template-columns:1fr 1.2fr;

    gap:70px;

    align-items:start;

}

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

.contact-info .section-title{

    text-align:left;

    margin-bottom:40px;

}

.info-card{

    display:flex;

    align-items:center;

    gap:20px;

    background:#171717;

    padding:25px;

    margin-bottom:22px;

    border-radius:20px;

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

    transition:.35s ease;

}

.info-card:hover{

    transform:translateX(8px);

    border-color:#4f8cff;

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

}

.info-icon{

    width:65px;

    height:65px;

    border-radius:18px;

    background:rgba(79,140,255,.15);

    color:#4f8cff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.8rem;

    flex-shrink:0;

}

.info-card h3{

    margin-bottom:6px;

    font-size:1.15rem;

    font-family:'Space Grotesk',sans-serif;

}

.info-card p{

    color:#bdbdbd;

    line-height:1.6;

}

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

.contact-form-wrapper{

    background:#171717;

    padding:40px;

    border-radius:25px;

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

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

}

.contact-form{

    display:flex;

    flex-direction:column;

    gap:24px;

}

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

.input-group{

    display:flex;

    flex-direction:column;

}

.input-group label{

    margin-bottom:10px;

    font-weight:600;

    color:#ffffff;

}

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

.contact-form input,

.contact-form select,

.contact-form textarea{

    width:100%;

    padding:16px 18px;

    background:#111;

    color:#fff;

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

    border-radius:14px;

    outline:none;

    font-size:1rem;

    transition:.3s ease;

    font-family:'Inter',sans-serif;

}

.contact-form textarea{

    resize:vertical;

    min-height:180px;

}

/* ==========================================
   PLACEHOLDER
========================================== */

.contact-form input::placeholder,

.contact-form textarea::placeholder{

    color:#888;

}

/* ==========================================
   FOCUS EFFECT
========================================== */

.contact-form input:focus,

.contact-form select:focus,

.contact-form textarea:focus{

    border-color:#4f8cff;

    box-shadow:0 0 0 4px rgba(243, 245, 247, 0.12);

}

/* ==========================================
   SELECT DROPDOWN
========================================== */

.contact-form select{

    cursor:pointer;

}

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

.submit-btn{

    margin-top:10px;

    width:100%;

    justify-content:center;

}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:1000px){

.contact-layout{

grid-template-columns:1fr;

}

.contact-info{

margin-bottom:20px;

}

}

@media(max-width:700px){

.contact-form-wrapper{

padding:30px;

}

.info-card{

padding:20px;

}

}

@media(max-width:500px){

.contact-form-wrapper{

padding:22px;

}

.info-card{

flex-direction:column;

text-align:center;

}

.info-icon{

margin-bottom:10px;

}

}

/* ==========================================================
   AVAILABILITY SECTION
========================================================== */

.availability{

    padding:110px 0;

    background:#111;

}

.availability-card{

    background:#171717;

    padding:55px;

    border-radius:24px;

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

    text-align:center;

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

}

.availability-status{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-bottom:25px;

    padding:12px 22px;

    border-radius:50px;

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

    color:#4f8cff;

    font-weight:600;

}

.status-dot{

    width:12px;

    height:12px;

    background:#32d74b;

    border-radius:50%;

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(50,215,75,.6);

    }

    70%{

        box-shadow:0 0 0 12px rgba(50,215,75,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(50,215,75,0);

    }

}

.availability-card h2{

    font-size:2.6rem;

    margin-bottom:20px;

    font-family:'Space Grotesk',sans-serif;

}

.availability-card p{

    max-width:720px;

    margin:0 auto 45px;

    color:#bdbdbd;

    line-height:1.9;

}

.availability-details{

    display:grid;

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

    gap:25px;

}

.availability-details div{

    background:#111;

    padding:28px;

    border-radius:18px;

    transition:.35s;

}

.availability-details div:hover{

    transform:translateY(-8px);

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

}

.availability-details h3{

    margin-bottom:10px;

    color:#4f8cff;

    font-size:1rem;

}

.availability-details p{

    margin:0;

    color:#fff;

}

/* ==========================================================
   SOCIAL SECTION
========================================================== */

.social-contact{

    padding:110px 0;

}

.social-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

    margin-top:60px;

}

.social-card{

    text-decoration:none;

    color:#fff;

    background:#171717;

    border-radius:22px;

    padding:40px 30px;

    text-align:center;

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

    transition:.35s;

}

.social-card:hover{

    transform:translateY(-10px);

    border-color:#4f8cff;

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

}

.social-icon{

    width:75px;

    height:75px;

    margin:0 auto 25px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(79,140,255,.15);

    color:#4f8cff;

    font-size:2rem;

}

.social-card h3{

    margin-bottom:12px;

    font-family:'Space Grotesk',sans-serif;

}

.social-card p{

    color:#bdbdbd;

    line-height:1.7;

}

/* ==========================================================
   QUICK FAQ
========================================================== */

.quick-faq{

    padding:110px 0;

    background:#111;

}

.quick-faq-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

    margin-top:60px;

}

.quick-faq-card{

    background:#171717;

    padding:35px;

    border-radius:20px;

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

    transition:.35s;

}

.quick-faq-card:hover{

    transform:translateY(-8px);

    border-color:#4f8cff;

    box-shadow:0 18px 40px rgba(79,140,255,.15);

}

.quick-faq-card h3{

    margin-bottom:15px;

    font-family:'Space Grotesk',sans-serif;

}

.quick-faq-card p{

    color:#bdbdbd;

    line-height:1.8;

}

/* ==========================================================
   CTA ENHANCEMENTS
========================================================== */

.cta .hero-buttons{

    margin-top:35px;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:900px){

.availability-details{

grid-template-columns:1fr;

}

.availability-card{

padding:40px 30px;

}

.availability-card h2{

font-size:2.2rem;

}

}

@media(max-width:700px){

.social-grid{

grid-template-columns:1fr;

}

.quick-faq-grid{

grid-template-columns:1fr;

}

}

@media(max-width:500px){

.availability-card{

padding:30px 20px;

}

.availability-card h2{

font-size:1.9rem;

}

.social-card,

.quick-faq-card{

padding:28px 22px;

}

}

/* ==========================================================
   CONTACT PAGE - FINAL STYLES
========================================================== */

/* ==========================================
   FORM VALIDATION
========================================== */

.input-group input.error,
.input-group select.error,
.input-group textarea.error{

    border-color:#ff4d4f;

    box-shadow:0 0 0 4px rgba(255,77,79,.12);

}

.input-group input.success,
.input-group select.success,
.input-group textarea.success{

    border-color:#32d74b;

    box-shadow:0 0 0 4px rgba(50,215,75,.12);

}

/* Validation Message */

.validation-message{

    margin-top:8px;

    font-size:.9rem;

    color:#ff6b6b;

    display:none;

}

.validation-message.show{

    display:block;

}

/* ==========================================
   FORM STATUS MESSAGE
========================================== */

.form-status{

    display:none;

    margin-top:20px;

    padding:18px 20px;

    border-radius:14px;

    font-weight:500;

    animation:fadeIn .35s ease;

}

.form-status.success{

    display:block;

    background:rgba(50,215,75,.12);

    color:#32d74b;

    border:1px solid rgba(50,215,75,.3);

}

.form-status.error{

    display:block;

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

    color:#ff6b6b;

    border:1px solid rgba(255,77,79,.3);

}

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

.submit-btn{

    position:relative;

    overflow:hidden;

}

.submit-btn.loading{

    pointer-events:none;

    opacity:.8;

}

.submit-btn.loading::after{

    content:"";

    position:absolute;

    width:20px;

    height:20px;

    border:3px solid rgba(255,255,255,.3);

    border-top-color:#ffffff;

    border-radius:50%;

    animation:spin .8s linear infinite;

    top:50%;

    left:50%;

    margin-left:-10px;

    margin-top:-10px;

}

.submit-btn.loading span{

    opacity:0;

}

/* ==========================================
   KEYFRAMES
========================================== */

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

.contact-form input:hover,
.contact-form select:hover,
.contact-form textarea:hover{

    border-color:rgba(79,140,255,.45);

}

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

.submit-btn:hover{

    transform:translateY(-2px);

}

/* ==========================================
   ACCESSIBILITY
========================================== */

.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible,
.submit-btn:focus-visible{

    outline:2px solid #4f8cff;

    outline-offset:2px;

}

/* ==========================================
   SMALL SCREEN IMPROVEMENTS
========================================== */

@media(max-width:768px){

    .contact-form{

        gap:20px;

    }

    .input-group label{

        font-size:.95rem;

    }

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

        padding:15px;

        font-size:.95rem;

    }

}

@media(max-width:500px){

    .submit-btn{

        width:100%;

    }

    .form-status{

        font-size:.95rem;

        padding:16px;

    }

}

/* ==========================================
   UTILITY CLASSES
========================================== */

.hidden{

    display:none !important;

}

.visible{

    display:block !important;

}

.text-center{

    text-align:center;

}

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

#loader{

    position:fixed;

    inset:0;

    background:#090909;

    z-index:99999;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:opacity .8s ease,
               visibility .8s ease;

}

#loader.hide{

    opacity:0;

    visibility:hidden;

}

/*==============================*/

.loader-content{

    text-align:center;

    width:min(420px,80vw);

}

/*==============================*/

.loader-logo{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-bottom:40px;

    font-family:'Space Grotesk',sans-serif;

    font-size:3rem;

    font-weight:700;

    letter-spacing:4px;

}

.loader-logo span{

    opacity:0;

    transform:translateY(40px);

    color:white;

    display:inline-block;

}

/*==============================*/

.loader-line{

    width:100%;

    height:3px;

    background:#222;

    border-radius:50px;

    overflow:hidden;

}

.loader-progress{

    display:block;

    height:100%;

    width:0;

    background:#4f8cff;

    box-shadow:0 0 15px #4f8cff;

}

/*==============================*/

@keyframes logoGlow{

    from{

        text-shadow:
        0 0 10px rgba(79,140,255,.2);

    }

    to{

        text-shadow:
        0 0 20px rgba(79,140,255,.7),
        0 0 40px rgba(79,140,255,.4);

    }

}

/*==============================*/

body.loading{

    overflow:hidden;

}

@keyframes letterReveal{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes blueGlow{

    from{

        text-shadow:none;

    }

    to{

        text-shadow:
        0 0 12px #4f8cff,
        0 0 25px #4f8cff,
        0 0 45px rgba(79,140,255,.5);

    }

}

/*==================================================
CUSTOM CURSOR
==================================================*/

body{

    cursor:none;

}

/*==============================*/

.cursor-dot{

    position:fixed;

    width:8px;

    height:8px;

    background:#4f8cff;

    border-radius:50%;

    pointer-events:none;

    z-index:999999;

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

    box-shadow:
    0 0 10px #4f8cff,
    0 0 20px rgba(79,140,255,.5);

}

/*==============================*/

.cursor-ring{

    position:fixed;

    width:40px;

    height:40px;

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

    border-radius:50%;

    pointer-events:none;

    z-index:999998;

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

    transition:

    width .25s ease,
    height .25s ease,
    border .25s ease,
    background .25s ease;

}

/*==============================*/

.cursor-hover{

    width:70px !important;

    height:70px !important;

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

    border-color:#4f8cff;

}

/*==============================*/

.cursor-click{

    transform:translate(-50%,-50%) scale(.75);

}

/*==============================*/

@media(pointer:coarse){

    .cursor-dot,

    .cursor-ring{

        display:none;

    }

    body{

        cursor:auto;

    }

}

/*==================================================
MOUSE GLOW
==================================================*/

.mouse-glow{

    position:fixed;

    width:600px;

    height:600px;

    border-radius:50%;

    pointer-events:none;

    z-index:-1;

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

    background:radial-gradient(circle,
        rgba(79,140,255,.12) 0%,
        rgba(79,140,255,.06) 30%,
        rgba(79,140,255,.02) 55%,
        transparent 75%
    );

    filter:blur(40px);

    transition:opacity .3s ease;

    opacity:.8;

}

@media(pointer:coarse){

    .mouse-glow{

        display:none;

    }

}

/*==================================================
LENIS
==================================================*/

html.lenis{

    height:auto;

}

.lenis.lenis-smooth{

    scroll-behavior:auto !important;

}

.lenis.lenis-stopped{

    overflow:hidden;

}

/*========================================
    SUCCESS TOAST
========================================*/

.toast{

    position:fixed;

    top:30px;

    right:30px;

    width:360px;

    padding:18px 22px;

    display:flex;

    align-items:flex-start;

    gap:18px;

    background:rgba(12,18,35,.95);

    backdrop-filter:blur(20px);

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

    border-left:5px solid #008cff;

    border-radius:18px;

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

    color:#fff;

    transform:translateX(450px);

    opacity:0;

    pointer-events:none;

    transition:.45s ease;

    z-index:99999;

}

.toast.show{

    transform:translateX(0);

    opacity:1;

}

.toast-icon{

    width:52px;

    height:52px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    font-weight:700;

    color:white;

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

    flex-shrink:0;

}

.toast-content h4{

    margin:0 0 6px;

    font-size:18px;

    font-weight:700;

}

.toast-content p{

    margin:0;

    color:#cbd5e1;

    line-height:1.5;

    font-size:14px;

}

@media(max-width:768px){

.toast{

    width:calc(100% - 30px);

    right:15px;

    left:15px;

    top:20px;

}

}

/*======================================
    PREMIUM TOAST ANIMATIONS
======================================*/

.toast{

    overflow:hidden;

}

.toast-icon-wrapper{

    position:relative;

    width:64px;

    height:64px;

    flex-shrink:0;

}

.toast-icon{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    width:54px;

    height:54px;

    margin:auto;

    border-radius:50%;

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

    color:#fff;

    font-size:24px;

    font-weight:700;

    box-shadow:
        0 0 15px rgba(0,140,255,.5),
        0 0 35px rgba(0,140,255,.25);

    animation:toastGlow 2s infinite;

}

.toast-progress-ring{

    position:absolute;

    inset:0;

    transform:rotate(-90deg);

}

.ring-bg{

    fill:none;

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

    stroke-width:4;

}

.ring-progress{

    fill:none;

    stroke:#00b7ff;

    stroke-width:4;

    stroke-linecap:round;

    stroke-dasharray:176;

    stroke-dashoffset:176;

}

.toast-progress-bar{

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:4px;

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

    transform-origin:left;

}

@keyframes toastGlow{

    0%{

        box-shadow:
        0 0 15px rgba(0,140,255,.4),
        0 0 30px rgba(0,140,255,.2);

    }

    50%{

        box-shadow:
        0 0 25px rgba(0,140,255,.8),
        0 0 60px rgba(0,183,255,.45);

    }

    100%{

        box-shadow:
        0 0 15px rgba(0,140,255,.4),
        0 0 30px rgba(0,140,255,.2);

    }

}

/* ===========================
   Portfolio Mobile Fix
=========================== */

@media (max-width: 768px) {

    .portfolio-grid{
        grid-template-columns:1fr;
    }

    .portfolio-card{
        display:block;
        overflow:hidden;
    }

    .portfolio-card img{
        display:block;
        width:100%;
        height:auto;
        object-fit:cover;
        opacity:1 !important;
        visibility:visible !important;
    }

    /* Show overlay permanently on touch devices */
    .portfolio-overlay{
        opacity:1;
        position:absolute;
        inset:0;
        background:linear-gradient(
            to top,
            rgba(0,0,0,.75),
            rgba(0,0,0,.2),
            transparent
        );
    }

    .portfolio-card:hover img{
        transform:none;
    }

}

.portfolio-overlay{
    pointer-events: none;
}

/*========================================
    FLATPICKR - BLUENOVA THEME
========================================*/

.flatpickr-calendar{

    background:#0a0f1c !important;

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

    border-radius:16px;

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

    color:#ffffff;

}

.flatpickr-months{

    background:#111827;

}

.flatpickr-current-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year{

    color:#ffffff !important;

}

.flatpickr-weekday{

    color:#00b7ff !important;

    font-weight:600;

}

.flatpickr-day{

    color:#ffffff !important;

    border-radius:10px;

}

.flatpickr-day:hover{

    background:#008cff !important;

    color:#ffffff !important;

}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange{

    background:#008cff !important;

    border-color:#008cff !important;

    color:#ffffff !important;

}

.flatpickr-day.today{

    border-color:#00b7ff !important;

    color:#ffffff !important;

}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay{

    color:rgba(255,255,255,.35) !important;

}

.flatpickr-prev-month svg,
.flatpickr-next-month svg{

    fill:#ffffff !important;

}

.flatpickr-time{

    background:#111827;

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

}

.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm{

    color:#ffffff !important;

    background:transparent;

}

.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover{

    background:#1b2738;

}

.flatpickr-monthDropdown-months option{

    background:#111827;

    color:#030303;

}

.flatpickr-current-month input.cur-year{

    color:#ffffff !important;

    -webkit-text-fill-color:#ffffff !important;

}

.flatpickr-current-month .flatpickr-monthDropdown-months{

    color:#ffffff !important;

}

/*========================================
    DATE INPUT CSS
========================================*/

.date-input{

    position:relative;

}

.date-input i{

    position:absolute;

    right:20px;

    top:50%;

    transform:translateY(-50%);

    color:#008cff;

    pointer-events:none;

}