/*=========================================================
                OJAS WEBLAB - OPTIMIZED
      Premium Portfolio Website - Design System
      
OPTIMIZATION NOTES:
✓ Removed duplicate CSS rules and media queries
✓ Fixed blank space between sections
✓ Improved mobile responsiveness  
✓ Hidden laptop mockup on mobile
✓ Fixed hero section alignment
✓ Optimized animations
✓ Prevented horizontal overflow
✓ Cleaned unused CSS classes
✓ Maintained premium design and colors
=========================================================*/

/*------------------------------
Google Font
------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700;800&display=swap');

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

:root{

    /* Brand */

    --primary:#ff3b3b;
    --primary-light:#ff6464;

    /* Background */

    --bg:#050505;
    --surface:#0d0d0d;
    --card:#121212;

    /* Text */

    --white:#ffffff;
    --text:#d8d8d8;
    --muted:#9c9c9c;

    /* Borders */

    --border:rgba(255,255,255,.08);

    /* Glass */

    --glass:rgba(255,255,255,.05);

    /* Radius */

    --radius:22px;

    /* Transition */

    --transition:.2s ease;

    /* FIX: Navbar height calculation for proper hero spacing */
    /* navbar height = 18px margin-top + 18px padding-top + ~32px content + 18px padding-bottom = ~86px */
    --navbar-height:86px;

    /* FIX: Desired spacing gap between navbar and hero content */
    --spacing-gap:50px;

}

/*------------------------------
Reset - FIXED: Prevent overflow
------------------------------*/

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

html{

    scroll-behavior:smooth;

}

body{

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

    background:var(--bg);

    color:var(--white);

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

    /* CHANGE: Ensure no horizontal scroll */
    max-width:100%;

}

/*------------------------------
Selection
------------------------------*/

::selection{

    background:var(--primary);

    color:white;

}

/*------------------------------
Scrollbar
------------------------------*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
        var(--primary),
        #ff6b6b
    );

    border-radius:50px;

}

/*------------------------------
Images
------------------------------*/

img{

    max-width:100%;

    display:block;

    height:auto;

}

/*------------------------------
Links
------------------------------*/

a{

    text-decoration:none;

    color:inherit;

}

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

ul{

    list-style:none;

}

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

.container{

    width:min(1180px,90%);

    margin:auto;

}

/*=========================================================
BACKGROUND
=========================================================*/

body::before{

    content:"";

    position:fixed;

    width:600px;

    height:600px;

    background:#ff000015;

    left:-250px;

    top:-250px;

    filter:blur(150px);

    border-radius:50%;

    z-index:-2;

}

body::after{

    content:"";

    position:fixed;

    width:500px;

    height:500px;

    right:-150px;

    bottom:-150px;

    background:#ff000010;

    filter:blur(150px);

    border-radius:50%;

    z-index:-2;

}



/*=========================================================
NAVBAR - FIXED: Mobile responsiveness
=========================================================*/

header{

    position:fixed;

    width:100%;

    top:0;

    z-index:1000;

}

.navbar{

    width:min(1250px,92%);

    margin:18px auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 28px;

    border-radius:20px;

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

    backdrop-filter:blur(18px);

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

    /* CHANGE: Prevent overflow on mobile */
    max-width:calc(100% - 16px);

}

.logo{

    font-size:28px;

    font-weight:800;

    /* CHANGE: Prevent text wrapping */
    white-space:nowrap;

}

.logo span{

    color:var(--primary);

}

.nav-menu{

    display:flex;

    gap:38px;

}

.nav-menu a{

    position:relative;

    transition:var(--transition);

}

.nav-menu a:hover{

    color:var(--primary);

}

.nav-btn{

    background:linear-gradient(
        90deg,
        var(--primary),
        #ff6a6a
    );

    padding:14px 28px;

    border-radius:50px;

    font-weight:600;

}

.menu-btn{

    display:none;

    font-size:28px;

    cursor:pointer;

}



/* ===========================================================
                    HERO SECTION - OPTIMIZED
=========================================================== */

.hero{

    /* CHANGE: Removed min-height:100vh to prevent blank space */
    /* FIX: Added min-height to fill viewport minus navbar for proper vertical centering */
    min-height:calc(100vh - var(--navbar-height));
    
    /* CHANGE: Use fit-content on mobile via media query */
    display:grid;

    grid-template-columns:.9fr 1.1fr;

    align-items:center;

    gap:60px;

    /* FIX: Calculate padding from navbar height + spacing gap instead of hardcoded value */
    /* padding-top: navbar-height + spacing-gap = 86px + 50px = 136px */
    padding:calc(var(--navbar-height) + var(--spacing-gap)) 8% 40px;

    position:relative;

    overflow:hidden;

}

/* FIX: Remove hero-blur from grid layout - they were empty divs creating full-screen blank space */
.hero-blur{

    display:none;

}

/* Aurora Background */

.hero::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    left:-250px;

    top:-250px;

    background:radial-gradient(circle,
    rgba(255,59,59,.25),
    transparent 70%);

    filter:blur(90px);

    animation:auroraOne 1s ease-in-out infinite;

}

.hero::after{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    right:-200px;

    bottom:-200px;

    background:radial-gradient(circle,
    rgba(255,59,59,.18),
    transparent 70%);

    filter:blur(100px);

    animation:auroraTwo 1s ease-in-out infinite;

}

@keyframes auroraOne{

    0%,100%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(70px,50px);

    }

}

@keyframes auroraTwo{

    0%,100%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(-80px,-40px);

    }

}

/* Hero Left - MERGED: Removed duplicates */

.hero-content{

    position:relative;

    z-index:5;

}

.hero-badge{

    display:inline-flex;

    padding:10px 18px;

    border-radius:40px;

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

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

    color:#ff5b5b;

    font-size:.9rem;

    letter-spacing:1px;

    margin-bottom:25px;

}

.hero-content h1{

    font-size:clamp(3rem,6vw,5.8rem);

    line-height:1.05;

    font-weight:800;

    margin-bottom:25px;

    /* CHANGE: Added text shadow animation directly */
    text-shadow: 0 0 20px rgba(255,45,45,.15);

    animation:titleGlow 2.5s infinite;

}

.hero-content h1 span{

    color:var(--primary);

    display:block;

}

.hero-content p{

    max-width:620px;

    color:var(--text);

    line-height:1.8;

    font-size:1.08rem;

    margin-bottom:40px;

}

/* Buttons */

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.primary-btn,
.secondary-btn{

    padding:16px 32px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

}

.primary-btn{

    background:linear-gradient(135deg,#ff2d2d,#ff6565);

    color:#fff;

}

.primary-btn:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 40px rgba(255,45,45,.35);

}

.secondary-btn{

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

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

}

.secondary-btn:hover{

    border-color:#ff2d2d;

    color:#ff2d2d;

}

/* Stats */

.hero-stats{

    display:flex;

    gap:45px;

    margin-top:60px;

    flex-wrap:wrap;

}

.hero-stats h2{

    font-size:2rem;

    color:#ff2d2d;

}

.hero-stats span{

    color:var(--muted);

    font-size:.95rem;

}


/* ===========================================================
                    HERO RIGHT - OPTIMIZED
=========================================================== */

.hero-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    /* CHANGE: Removed min-height, use desktop size only */
    width:100%;

}

.hero-glow{

    position:absolute;

    width:600px;

    height:600px;

    background:radial-gradient(circle,
    rgba(255,45,45,.25),
    transparent 70%);

    filter:blur(80px);

    animation:glowMove 4s ease-in-out infinite;

}

@keyframes glowMove{

    50%{

        transform:scale(1.15);

    }

}

.laptop{

    width:650px;

    position:relative;

    z-index:5;

    animation:laptopFloat 3s ease-in-out infinite;

}

@keyframes laptopFloat{

    50%{

        transform:translateY(-15px);

    }

}

.laptop-screen{

    position:relative;

    overflow:hidden;

    background:#000;

    padding:14px;

    border-radius:22px;

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

    box-shadow:

    0 40px 80px rgba(0,0,0,.5),

    0 0 60px rgba(255,45,45,.15);

}

.laptop-screen::before{

    content:"";

    position:absolute;

    top:-100%;

    left:-30%;

    width:80px;

    height:300%;

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

    transform:rotate(25deg);

    animation:shine 2.5s infinite;

}

@keyframes shine{

    0%{

        left:-40%;

    }

    100%{

        left:160%;

    }

}

.laptop-screen iframe{

    width:100%;

    height:380px;

    border:none;

    background:#111;

}

.laptop-base{

    width:720px;

    height:20px;

    background:#8a8a8a;

    margin:auto;

    border-radius:0 0 20px 20px;

    transform:translateX(-35px);

}


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

.floating-card{

    position:absolute;

    display:flex;

    gap:15px;

    align-items:center;

    padding:18px 22px;

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

    backdrop-filter:blur(20px);

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

    border-radius:18px;

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

    animation:floatCard 2.5s ease-in-out infinite;

    z-index:10;

}

.floating-card h4{

    font-size:16px;

    margin-bottom:3px;

}

.floating-card span{

    font-size:13px;

    color:#999;

}

.floating-card i{

    font-size:28px;

    color:#ff2d2d;

}

.card-one{

    top:30px;

    left:-30px;

}

.card-two{

    bottom:80px;

    left:-50px;

    animation-delay:.5s;

}

.card-three{

    top:120px;

    right:-40px;

    animation-delay:1s;

}

@keyframes floatCard{

    50%{

        transform:translateY(-14px);

    }

}

@keyframes titleGlow{

    50%{

        text-shadow: 0 0 40px rgba(255,45,45,.45);

    }

}

/* Scroll - FIX: Prevent from creating layout space */

.scroll-down{

    position:absolute;

    left:50%;

    bottom:25px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

    color:#999;

    animation:scrollAnim 1s infinite;

    pointer-events:none;

}

.scroll-down i{

    color:#ff2d2d;

}

@keyframes scrollAnim{

    0%{

        transform:translate(-50%,0);

    }

    50%{

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

    }

    100%{

        transform:translate(-50%,0);

    }

}


/* ===========================================================
                    RESPONSIVE - CONSOLIDATED
=========================================================== */

/* Desktop: 1200px+ (No changes needed) */

/* Laptop: 992px - 1199px */
@media (max-width:992px){

.hero{

    grid-template-columns:1fr;

    justify-items:center;

    align-items:center;

    text-align:center;

    gap:40px;

    /* FIX: Use calculated padding instead of hardcoded value */
    padding:calc(var(--navbar-height) + var(--spacing-gap)) 20px 60px;

}

.hero-content{

    width:100%;

    max-width:700px;

    margin:0 auto;

}

.hero-content h1{

    font-size:clamp(2.8rem,8vw,4.5rem);

    line-height:1.1;

}

.hero-content p{

    max-width:100%;

    margin:20px auto 35px;

}

.hero-buttons{

    justify-content:center;

}

.hero-stats{

    justify-content:center;

    gap:30px;

}

.hero-image{

    width:100%;

    display:flex;

    justify-content:center;

    margin-top:20px;

}

.laptop{

    width:100%;

    max-width:520px;

}

.laptop-base{

    width:560px;

    transform:translateX(-20px);

}

.card-one{

    left:0;

}

.card-two{

    left:0;

}

.card-three{

    right:0;

}

/* Navbar mobile */

.menu-btn{

    display:block;

}

.nav-btn{

    display:none;

}

.nav-menu{

    position:fixed;

    top:90px;

    right:-100%;

    width:280px;

    background:rgba(15,15,15,.98);

    backdrop-filter:blur(20px);

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

    border-radius:20px;

    padding:30px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:22px;

    transition:.4s ease;

    z-index:999;

}

.nav-menu.active{

    right:20px;

}

}

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

.hero{

    /* FIX: Use calculated padding for consistent spacing across all devices */
    padding:calc(var(--navbar-height) + var(--spacing-gap)) 16px 50px;

    gap:35px;

}

.hero-content h1{

    font-size:2.4rem;

    line-height:1.15;

}

.hero-content p{

    font-size:1rem;

}

.hero-buttons{

    flex-direction:column;

    width:100%;

}

.hero-buttons a{

    width:100%;

    justify-content:center;

}

.hero-stats{

    flex-direction:column;

    gap:20px;

    align-items:center;

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

}

/* CHANGE: Hide laptop mockup on tablet/mobile */
.hero-image{

    display:none;

}

.floating-card{

    display:none;

}

}

/* Mobile: Below 576px */
@media (max-width:576px){

.hero{

    /* FIX: Reduce spacing gap on mobile for better UX, but maintain navbar spacing */
    /* on mobile: use 40px gap instead of 50px for more compact layout */
    padding:calc(var(--navbar-height) + 40px) 16px 40px;

}

.hero-content h1{

    font-size:2rem;

}

.hero-stats{

    grid-template-columns:1fr;

    gap:15px;

}

}


/*=============================
JS Helper Classes - OPTIMIZED
=============================*/

/* FIX: Removed transform that created blank space between sections */
section{

    opacity:0;

    transform:translateY(0);

    transition:.5s ease;

}

.show-section{

    opacity:1;

    transform:translateY(0);

}

/* Progress Bar */

#progress-bar{

    position:fixed;

    top:0;

    left:0;

    height:3px;

    width:0;

    background:#ff2d2d;

    z-index:999999;

}

/* Top Button */

#top-btn{

    position:fixed;

    right:25px;

    bottom:25px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:#ff2d2d;

    color:#fff;

    font-size:22px;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:999;

}

#top-btn.show{

    opacity:1;

    visibility:visible;

}

#top-btn:hover{

    transform:translateY(-6px);

}


/*==========================================
TECH SECTION
==========================================*/

.tech-section{

    /* FIX: Reduced top padding from 120px to 60px to eliminate blank space */
    padding:60px 8% 120px 8%;

    position:relative;

}

.section-title{

    text-align:center;

    max-width:760px;

    margin:auto;

    margin-bottom:70px;

}

.section-title span{

    display:inline-block;

    padding:10px 18px;

    border-radius:40px;

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

    color:var(--primary);

    font-size:14px;

    letter-spacing:2px;

    margin-bottom:20px;

}

.section-title h2{

    font-size:3rem;

    line-height:1.2;

    margin-bottom:20px;

}

.section-title p{

    color:#aaa;

    line-height:1.8;

    font-size:18px;

}

.tech-grid{

    display:grid;

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

    gap:30px;

}

.tech-card{

    padding:45px;

    border-radius:24px;

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

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

    text-align:center;

    transition:.4s;

    backdrop-filter:blur(20px);

    cursor:pointer;

    position:relative;

    overflow:hidden;

}

.tech-card::before{

    content:"";

    position:absolute;

    width:250px;

    height:250px;

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

    border-radius:50%;

    top:-180px;

    right:-180px;

    transition:.5s;

}

.tech-card:hover::before{

    transform:scale(1.4);

}

.tech-card:hover{

    transform:translateY(-15px);

    border-color:var(--primary);

}

.tech-card i{

    font-size:55px;

    color:var(--primary);

    margin-bottom:20px;

}

.tech-card h3{

    font-size:22px;

}

@media(max-width:992px){

    .tech-grid{

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

    }

}

@media(max-width:768px){

    .tech-grid{

        grid-template-columns:1fr;

    }

    .section-title h2{

        font-size:2.2rem;

    }

    .tech-card{

        padding:35px;

    }

}


/*======================================================
PROJECTS
======================================================*/

.projects{

    padding:140px 8%;

}

.projects-grid{

    display:grid;

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

    gap:25px;

}

.project-card{

    grid-column:span 4;

    background:#111;

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

    border-radius:24px;

    overflow:hidden;

    transition:.45s;

    position:relative;

}

.large{

    grid-column:span 8;

}

.wide{

    grid-column:span 8;

}

.project-image{

    height:300px;

    overflow:hidden;

    position:relative;

}

.large .project-image{

    height:420px;

}

.project-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.8s;

}

.project-content{

    padding:30px;

}

.project-tag{

    display:inline-block;

    padding:8px 16px;

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

    color:var(--primary);

    border-radius:30px;

    font-size:13px;

    margin-bottom:18px;

}

.project-content h3{

    font-size:30px;

    margin-bottom:12px;

}

.project-content p{

    color:#aaa;

    line-height:1.8;

}

.stack{

    display:flex;

    gap:12px;

    margin-top:22px;

    flex-wrap:wrap;

}

.stack span{

    padding:8px 15px;

    background:#1d1d1d;

    border-radius:30px;

    font-size:13px;

}

.project-card:hover{

    transform:translateY(-14px);

    border-color:var(--primary);

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

}

.project-card:hover img{

    transform:scale(1.08);

}

.project-overlay{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

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

    opacity:0;

    transition:.4s;

}

.project-card:hover .project-overlay{

    opacity:1;

}

.project-btn{

    padding:14px 26px;

    background:#ff2d2d;

    border-radius:50px;

    font-weight:600;

}


@media(max-width:992px){

    .project-card,
    .large,
    .wide{

        grid-column:span 12;

    }

}

@media(max-width:768px){

    .project-image{

        height:220px;

    }

    .large .project-image{

        height:250px;

    }

    .project-content{

        padding:24px;

    }

    .project-content h3{

        font-size:24px;

    }

}


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

.why-us{

    padding:140px 8%;

}

.why-grid{

    display:grid;

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

    gap:25px;

    margin-top:70px;

}

.why-card{

    background:#111;

    padding:40px;

    border-radius:24px;

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

    transition:.4s;

}

.why-card:hover{

    transform:translateY(-12px);

    border-color:var(--primary);

}

.icon{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

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

    margin-bottom:25px;

}

.icon i{

    font-size:32px;

    color:var(--primary);

}

.why-card h3{

    margin-bottom:15px;

    font-size:24px;

}

.why-card p{

    color:#aaa;

    line-height:1.8;

}

.counter-wrapper{

    display:grid;

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

    gap:25px;

    margin-top:90px;

}

.counter-box{

    background:#101010;

    padding:40px;

    border-radius:22px;

    text-align:center;

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

}

.counter-box h2{

    font-size:52px;

    color:var(--primary);

    margin-bottom:10px;

}

.counter-box span{

    color:#aaa;

}


@media(max-width:992px){

    .why-grid{

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

    }

    .counter-wrapper{

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

    }

}

@media(max-width:768px){

    .why-grid{

        grid-template-columns:1fr;

    }

    .counter-wrapper{

        grid-template-columns:1fr;

    }

}


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

.process{

    padding:150px 8%;

    position:relative;

}

.timeline{

    position:relative;

    max-width:900px;

    margin:90px auto;

}

.timeline-line{

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:4px;

    height:100%;

    background:#222;

    border-radius:20px;

}

.timeline-progress{

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:4px;

    height:0;

    background:linear-gradient( #ff2d2d, #ff8b8b );

    border-radius:20px;

}

.step{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:90px;

}

.step:nth-child(even){

    flex-direction:row-reverse;

}

.step-card{

    width:42%;

    padding:35px;

    background:#111;

    border-radius:24px;

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

    transition:.4s;

}

.step-card:hover{

    transform:translateY(-10px);

    border-color:#ff2d2d;

}

.step-number{

    width:70px;

    height:70px;

    background:#ff2d2d;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    font-size:20px;

    z-index:5;

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

}

.step-card h3{

    margin-bottom:15px;

    font-size:26px;

}

.step-card p{

    color:#aaa;

    line-height:1.8;

}


@media(max-width:900px){

    .timeline-line,
    .timeline-progress{

        left:25px;

    }

    .step{

        flex-direction:column;

        align-items:flex-start;

        padding-left:70px;

    }

    .step:nth-child(even){

        flex-direction:column;

    }

    .step-card{

        width:100%;

        margin-top:20px;

    }

    .step-number{

        position:absolute;

        left:-10px;

    }

}


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

.services{

    padding:150px 8%;

}

.services-grid{

    display:grid;

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

    gap:35px;

    margin-top:80px;

}

.service-card{

    position:relative;

    padding:45px;

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

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

    border-radius:28px;

    backdrop-filter:blur(20px);

    transition:.45s;

    overflow:hidden;

}

.service-card::before{

    content:"";

    position:absolute;

    top:-180px;

    right:-180px;

    width:320px;

    height:320px;

    border-radius:50%;

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

    transition:.5s;

}

.service-card:hover::before{

    transform:scale(1.5);

}

.service-card:hover{

    transform:translateY(-16px);

    border-color:#ff2d2d;

    box-shadow: 0 30px 80px rgba(255,45,45,.15);

}

.service-icon{

    width:80px;

    height:80px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:20px;

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

    margin-bottom:30px;

}

.service-icon i{

    font-size:36px;

    color:#ff2d2d;

}

.service-card h3{

    font-size:28px;

    margin-bottom:18px;

}

.service-card p{

    line-height:1.8;

    color:#aaa;

    margin-bottom:25px;

}

.service-card ul{

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:14px;

}

.service-card ul li{

    position:relative;

    padding-left:28px;

}

.service-card ul li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:#ff2d2d;

    font-weight:700;

}

.featured{

    border:2px solid #ff2d2d;

    transform:scale(1.05);

}

.popular{

    position:absolute;

    top:18px;

    right:-45px;

    background:#ff2d2d;

    padding:8px 50px;

    font-size:12px;

    font-weight:700;

    transform:rotate(45deg);

}

@media(max-width:992px){

    .services-grid{

        grid-template-columns:1fr;

    }

    .featured{

        transform:none;

    }

}


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

.pricing{

    padding:140px 8%;

    position:relative;

    overflow:hidden;

}

.pricing::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    background:radial-gradient(circle,
    rgba(255,45,45,.15),
    transparent 70%);

    top:-300px;

    right:-250px;

    filter:blur(70px);

    pointer-events:none;

}

.pricing-grid{

    display:grid;

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

    gap:35px;

    margin-top:80px;

}

.price-card{

    position:relative;

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

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

    backdrop-filter:blur(25px);

    border-radius:30px;

    padding:45px;

    overflow:hidden;

    transition:.45s ease;

}

.price-card::before{

    content:"";

    position:absolute;

    inset:0;

    padding:1px;

    border-radius:30px;

    background:linear-gradient(
        135deg,
        rgba(255,45,45,.7),
        transparent,
        rgba(255,255,255,.15)
    );
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite:exclude;
    -webkit-mask-composite:xor;

}

.price-card:hover{

    transform:translateY(-18px);

    box-shadow: 0 30px 80px rgba(255,45,45,.18);

}

.price-card::after{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    border-radius:50%;

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

    top:-180px;

    right:-180px;

    transition:.5s;

}

.price-card:hover::after{

    transform:scale(1.6);

}

.featured{

    border:2px solid #ff2d2d;

    transform:scale(1.05);

}

.featured:hover{

    transform:scale(1.05) translateY(-18px);

}

.popular{

    position:absolute;

    top:22px;

    right:-45px;

    background:#ff2d2d;

    color:#fff;

    padding:10px 55px;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

    transform:rotate(45deg);

    box-shadow:0 10px 25px rgba(255,45,45,.3);

    animation:pulseBadge 2.5s infinite;

}

.plan-name{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

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

    color:#ff4d4d;

    font-size:.9rem;

    margin-bottom:20px;

    letter-spacing:1px;

}

.price-card h2{

    font-size:3.4rem;

    margin-bottom:12px;

    color:#fff;

}

.price-card p{

    color:#999;

    margin-bottom:30px;

    line-height:1.7;

}

.price-card ul{

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:16px;

    margin-bottom:40px;

}

.price-card ul li{

    color:#ddd;

    position:relative;

    padding-left:28px;

    font-size:15px;

}

.price-card ul li::before{

    content:"✔";

    position:absolute;

    left:0;

    color:#ff2d2d;

    font-weight:bold;

}

.price-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:100%;

    padding:16px;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        #ff2d2d,
        #ff6b6b
    );

    color:#fff;

    font-weight:700;

    letter-spacing:.5px;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.price-btn:hover{

    transform:translateY(-5px);

    box-shadow: 0 18px 40px rgba(255,45,45,.35);

}

.ripple{

    position:absolute;

    border-radius:50%;

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

    transform:scale(0);

    animation:ripple .7s linear;

}

@keyframes ripple{

    to{

        transform:scale(4);

        opacity:0;

    }

}

@keyframes pulseBadge{

    0%{

        box-shadow:0 0 0 rgba(255,45,45,.4);

    }

    50%{

        box-shadow: 0 0 35px rgba(255,45,45,.7);

    }

    100%{

        box-shadow:0 0 0 rgba(255,45,45,.4);

    }

}

@media(max-width:1100px){

    .pricing-grid{

        grid-template-columns:1fr;

        max-width:650px;

        margin:auto;

        margin-top:70px;

    }

    .featured{

        transform:none;

    }

    .featured:hover{

        transform:translateY(-18px);

    }

}

@media(max-width:768px){

    .pricing{

        padding:90px 20px;

    }

    .price-card{

        padding:35px 28px;

    }

    .price-card h2{

        font-size:2.6rem;

    }

    .popular{

        font-size:11px;

        right:-52px;

        padding:8px 55px;

    }

}


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

.contact{

    padding:150px 8%;

}

.contact-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.contact-badge{

    display:inline-block;

    padding:10px 18px;

    border-radius:30px;

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

    color:#ff2d2d;

    margin-bottom:25px;

}

.contact-info h2{

    font-size:3.2rem;

    line-height:1.2;

    margin-bottom:25px;

}

.contact-info p{

    color:#999;

    line-height:1.8;

    margin-bottom:45px;

}

.contact-list{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.contact-item{

    display:flex;

    gap:20px;

    padding:20px;

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

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

    border-radius:18px;

}

.contact-item i{

    font-size:28px;

    color:#ff2d2d;

}

.contact-form-box{

    padding:45px;

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

    backdrop-filter:blur(20px);

    border-radius:30px;

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

}

.input-group{

    margin-bottom:20px;

}

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

    width:100%;

    padding:18px;

    background:#111;

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

    border-radius:15px;

    color:#fff;

    outline:none;

    transition:.3s;

}

.input-group input:focus,
.input-group textarea:focus{

    border-color:#ff2d2d;

}

.submit-btn{

    width:100%;

    padding:18px;

    border:none;

    border-radius:50px;

    background:linear-gradient(135deg,#ff2d2d,#ff6b6b);

    color:#fff;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

}

.submit-btn:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 40px rgba(255,45,45,.3);

}

@media(max-width:992px){

    .contact-wrapper{

        grid-template-columns:1fr;

    }

    .contact-info{

        text-align:center;

    }

    .contact-info h2{

        font-size:2.5rem;

    }

}


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

.whatsapp-float{

    position:fixed;

    bottom:25px;

    right:25px;

    width:65px;

    height:65px;

    border-radius:50%;

    background:#25D366;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    color:#fff;

    z-index:999;

    box-shadow: 0 10px 30px rgba(37,211,102,.4);

    animation:whatsappPulse 2s infinite;

    transition:.35s;

}

.whatsapp-float:hover{

    transform:scale(1.1);

}

@keyframes whatsappPulse{

    0%{

        box-shadow:0 0 0 0 rgba(37,211,102,.45);

    }

    70%{

        box-shadow:0 0 0 18px rgba(37,211,102,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(37,211,102,0);

    }

}


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

.footer{

    padding:80px 8%;

    text-align:center;

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

}

.footer h2{

    font-size:38px;

    margin-bottom:20px;

}

.footer p{

    color:#999;

}

.footer-links{

    display:flex;

    justify-content:center;

    gap:30px;

    margin:35px 0;

    flex-wrap:wrap;

}

.footer-links a{

    transition:.3s;

}

.footer-links a:hover{

    color:#ff2d2d;

}

.copyright{

    margin-top:30px;

    font-size:14px;

}


/*========================================
MOBILE TOUCH OPTIMIZATION
========================================*/

@media (max-width:768px){

    /* Touch-friendly button sizes */

    button,
    a.price-btn,
    a.primary-btn,
    a.secondary-btn,
    a.nav-btn,
    .submit-btn {

        min-height:48px;

        min-width:48px;

        padding:14px 28px;

    }

    /* Disable hover effects on touch devices */

    @media (hover: none) {

        button:hover,
        a:hover {

            transform: none;

        }

    }

    /* Better tap feedback */

    a,
    button {

        -webkit-tap-highlight-color:rgba(255,59,59,0.2);

    }

    /* Prevent text zoom on input focus */

    input,
    textarea,
    select {

        font-size:16px;

        user-select:text;

        -webkit-user-select:text;

    }

}
.whatsapp-float{
    position: fixed !important;
    bottom: 25px !important;
    right: 25px !important;
    z-index: 99999 !important;

    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25D366;

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

    color: #fff;
    font-size: 30px;
}