/* -----------------------------------------------------------
   GLOBAL
------------------------------------------------------------ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}
body {
    margin: 0;
    background: #000;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
}
/* -----------------------------------------------------------
   CLEAN FLOATING CHIPS (Improved Version)
------------------------------------------------------------ */
/* -----------------------------------------------------------
   FLOATING CHIPS CONTAINER (BACKGROUND SAFE)
------------------------------------------------------------ */
.floating-chips {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    pointer-events: none;
    z-index: -10; /* FIXED - should not be negative */
}

/* -----------------------------------------------------------
   UNIVERSAL CHIP STYLE
------------------------------------------------------------ */
.chip {
    position: absolute;
    width: 90px;
    height: 90px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 20px;
    backdrop-filter: blur(12px);
    display: flex;
    justify-content: center;
    align-items: center;
    animation: floatChip 10s infinite ease-in-out;
    z-index: 0; /* Ensures chips stay behind content but visible */
}

.chip svg {
    width: 44px;
    height: 44px;
    stroke-width: 1.6;
}

/* -----------------------------------------------------------
   FLOAT ANIMATION
------------------------------------------------------------ */
@keyframes floatChip {
    0% { transform: translate(0, 0); }
    50% { transform: translate(22px, -35px); }
    100% { transform: translate(0, 0); }
}

/* -----------------------------------------------------------
   CHIP POSITIONS (BALANCED FOR DESKTOP)
------------------------------------------------------------ */
.chip.py { left: 8%; top: 22%; animation-duration: 12s; }
.chip.java { right: 10%; top: 25%; animation-duration: 14s; }
.chip.html { left: 14%; bottom: 18%; animation-duration: 16s; }
.chip.php { right: 14%; bottom: 22%; animation-duration: 18s; }
.chip.react { left: 44%; bottom: 12%; animation-duration: 22s; }
.chip.node { left: 38%; top: 10%; animation-duration: 20s; }

/* -----------------------------------------------------------
   RESPONSIVENESS — TABLET
------------------------------------------------------------ */
@media (max-width: 992px) {
    .chip {
        width: 75px;
        height: 75px;
        transform: scale(0.85);
        opacity: 0.85;
    }

    .chip svg {
        width: 38px;
        height: 38px;
    }
}

/* -----------------------------------------------------------
   RESPONSIVENESS — MOBILE LANDSCAPE
------------------------------------------------------------ */
@media (max-width: 768px) {
    .chip {
        width: 65px;
        height: 65px;
        transform: scale(0.75);
        opacity: 0.55;
    }

    .chip svg {
        width: 32px;
        height: 32px;
    }
}

/* -----------------------------------------------------------
   RESPONSIVENESS — SMALL PHONES
------------------------------------------------------------ */
@media (max-width: 576px) {
    .chip {
        width: 55px;
        height: 55px;
        transform: scale(0.65);
        opacity: 0.45;
    }

    .chip svg {
        width: 26px;
        height: 26px;
    }
}

/* -----------------------------------------------------------
   RESPONSIVENESS — VERY SMALL DEVICES
------------------------------------------------------------ */
@media (max-width: 480px) {
    .chip {
        display: none; /* Clean UI on small screens */
    }
}


/* -----------------------------------------------------------
   LIQUID BACKGROUND
------------------------------------------------------------ */
/* -----------------------------------------------------------
   LIQUID BACKGROUND (RESPONSIVE)
------------------------------------------------------------ */
.liquid {
    position: fixed;
    width: 650px;
    height: 650px;
    background: radial-gradient(circle at 30% 30%, #7700ff, transparent);
    filter: blur(180px);
    animation: morph 12s infinite alternate ease-in-out;
    opacity: 0.6;
    z-index: 0;
    pointer-events: none;
}

.liquid:nth-child(2) {
    left: 60%;
    top: 40%;
    background: radial-gradient(circle at 70% 70%, #ff006a, transparent);
    animation-delay: -5s;
}

@keyframes morph {
    0% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.3) rotate(40deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* ----------------------- RESPONSIVE ----------------------- */
@media (max-width: 992px) {
    .liquid {
        width: 450px;
        height: 450px;
        filter: blur(140px);
        opacity: 0.55;
    }
}

@media (max-width: 768px) {
    .liquid {
        width: 350px;
        height: 350px;
        filter: blur(120px);
        opacity: 0.45;
    }
}

@media (max-width: 576px) {
    .liquid {
        width: 260px;
        height: 260px;
        filter: blur(100px);
        opacity: 0.40;
    }
}

@media (max-width: 480px) {
    .liquid {
        width: 200px;
        height: 200px;
        filter: blur(80px);
        opacity: 0.35;
    }
}


/* -----------------------------------------------------------
   ORBIT RINGS (RESPONSIVE)
------------------------------------------------------------ */
.ring {
    position: absolute;
    width: 500px;
    height: 500px;
    border: 1px dashed rgba(255,255,255,0.1);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: spin 18s linear infinite;
    z-index: 0;
}

.ring:nth-child(4) {
    width: 700px;
    height: 700px;
    border-color: rgba(255,0,200,0.2);
    animation-direction: reverse;
    animation-duration: 30s;
}

.ring:nth-child(5) {
    width: 900px;
    height: 900px;
    border-color: rgba(255,150,0,0.2);
    animation-duration: 40s;
}

@keyframes spin {
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ----------------------- RESPONSIVE ----------------------- */
@media (max-width: 992px) {
    .ring {
        width: 400px;
        height: 400px;
    }
    .ring:nth-child(4) {
        width: 550px;
        height: 550px;
    }
    .ring:nth-child(5) {
        width: 700px;
        height: 700px;
    }
}

@media (max-width: 768px) {
    .ring {
        width: 300px;
        height: 300px;
    }
    .ring:nth-child(4) {
        width: 450px;
        height: 450px;
    }
    .ring:nth-child(5) {
        width: 600px;
        height: 600px;
    }
}

@media (max-width: 576px) {
    .ring {
        width: 220px;
        height: 220px;
    }
    .ring:nth-child(4) {
        width: 350px;
        height: 350px;
    }
    .ring:nth-child(5) {
        width: 450px;
        height: 450px;
    }
}

@media (max-width: 480px) {
    .ring {
        width: 170px;
        height: 170px;
    }
    .ring:nth-child(4) {
        width: 260px;
        height: 260px;
    }
    .ring:nth-child(5) {
        width: 350px;
        height: 350px;
    }
}

/* -----------------------------------------------------------
   HERO SECTION
------------------------------------------------------------ */
.hero {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    position: relative;
    z-index: 1;
}

.hero h1 {
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1.2;
    background: linear-gradient(90deg, #ff00dd, #9d00ff, #00c2ff);
    background-clip: text;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 20px #5a00ff);
    animation: neonPulse 3s infinite alternate;
}

@keyframes neonPulse {
    0% { filter: drop-shadow(0 0 20px #ff00d4); }
    100% { filter: drop-shadow(0 0 40px #00c3ff); }
}

.hero p {
    font-size: 1.3rem;
    opacity: .85;
    width: 65%;
    margin: 20px auto;
}

.cta-btn {
    margin-top: 20px;
    padding: 16px 42px;
    font-size: 1.1rem;
    border-radius: 50px;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(90deg, #8e00ff, #ff009d);
    box-shadow: 0 0 25px rgba(255,0,150,0.5);
    transition: .3s;
}
.cta-btn:hover {
    transform: scale(1.08);
}

/* -----------------------------------------------------------
   FLOATING CHIPS
------------------------------------------------------------ */
.chip {
    position: absolute;
    width: 90px;
    height: 90px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    animation: drift 10s infinite ease-in-out;
    z-index: 3;
}

@keyframes drift {
    50% { transform: translateY(-40px) translateX(25px); }
}

.code-icon svg {
    width: 38px;
    height: 38px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* -----------------------------------------------------------
   SERVICES SECTION
------------------------------------------------------------ */
.services-section {
    padding: 100px 40px;
    text-align: center;
    position: relative;
    z-index: 5;
}

.section-title {
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(90deg, #bb00ff, #ff0077, #ffae00);
    background-clip: text;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}

.section-subtitle {
    opacity: .85;
    margin-bottom: 50px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 35px;
}

.service-card {
    background: rgba(255, 255, 255, 0.06);
    padding: 30px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(12px);
    transition: .3s;
}
.service-card:hover {
    transform: translateY(-10px);
    background: rgba(255,255,255,0.12);
}

.icon svg {
    width: 50px;
    height: 50px;
}

/* -----------------------------------------------------------
   RESPONSIVENESS
------------------------------------------------------------ */
@media(max-width: 992px) {
    .hero h1 { font-size: 3.2rem; }
    .hero p { width: 80%; }
}

@media(max-width: 768px) {
    .hero h1 { font-size: 2.6rem; }
    .chip { transform: scale(.7); }
    .services-section { padding: 80px 20px; }
}

@media(max-width: 480px) {
    .chip { display: none; }
    .hero h1 { font-size: 2.1rem; }
}

/* -----------------------------------------------------------
   WHY CHOOSE US / TRUST SECTION
------------------------------------------------------------ */
.why-choose-section {
    padding: 100px 40px;
    text-align: center;
    position: relative;
    z-index: 5;
}

.why-title {
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(90deg, #ff00dd, #9d00ff, #ffae00);
    background-clip: text;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}

.why-subtitle {
    opacity: 0.8;
    font-size: 1.2rem;
    margin-bottom: 55px;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 35px;
}

.why-card {
    background: rgba(255, 255, 255, 0.06);
    padding: 32px 28px;
    border-radius: 18px;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.12);
    transition: 0.35s ease;
    position: relative;
}

.why-card:hover {
    transform: translateY(-12px);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 35px rgba(255,0,150,0.25);
}

.why-icon {
    margin-bottom: 18px;
}
.why-icon svg {
    width: 52px;
    height: 52px;
}

/* Title & text inside card */
.why-card h3 {
    font-size: 1.35rem;
    margin-bottom: 10px;
    font-weight: 600;
}
.why-card p {
    opacity: 0.85;
    line-height: 1.55;
    font-size: 0.95rem;
}

/* -----------------------------------------------------------
   RESPONSIVENESS
------------------------------------------------------------ */
@media (max-width: 992px) {
    .why-title { font-size: 2.6rem; }
}

@media (max-width: 768px) {
    .why-choose-section { padding: 80px 20px; }
    .why-title { font-size: 2.2rem; }
}

@media (max-width: 480px) {
    .why-title { font-size: 1.9rem; }
    .why-subtitle { font-size: 1rem; margin-bottom: 35px; }
}


/* -----------------------------------------------------------
   ABOUT US SECTION
------------------------------------------------------------ */
.about-section {
    padding: 110px 40px;
    position: relative;
    z-index: 5;
}

.about-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    flex-wrap: wrap;
}

.about-content {
    flex: 1;
    min-width: 300px;
}

.about-title {
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(90deg, #ff00dd, #9d00ff, #ffae00);
    background-clip: text;

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

.about-text {
    font-size: 1.15rem;
    opacity: 0.85;
    margin: 20px 0 35px;
    line-height: 1.7;
    max-width: 550px;
}

/* Read More Button */
.about-btn {
    display: inline-block;
    padding: 14px 38px;
    border-radius: 50px;
    font-size: 1.05rem;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(90deg, #8e00ff, #ff009d);
    box-shadow: 0 0 25px rgba(255,0,150,0.4);
    transition: .3s ease;
}
.about-btn:hover {
    transform: scale(1.08);
}

/* Right Side Glass Effect Box */
.about-visual {
    flex: 1;
    min-width: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-glass {
    width: 100%;
    max-width: 350px;   /* max size for desktop */
    height: 350px;
    background:
    url("/img/about-us.png"),
        rgba(255,255,255,0.06);
        
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 28px;
    backdrop-filter: blur(12px);
    box-shadow: 0 0 35px rgba(255,0,150,0.2);

    margin: 0 auto; /* center on mobile */
}

/* -----------------------------------------------------------
   RESPONSIVENESS
------------------------------------------------------------ */
@media (max-width: 992px) {
    .about-title { font-size: 2.5rem; margin-right: 27px; }
    .about-text { font-size: 1.05rem; margin-right: 27px; }

}

@media (max-width: 768px) {
    .about-container {
        flex-direction: column;
        text-align: center;
    }
    .about-text {
        margin-left: auto;
        margin-right: 20px;
    }
   .about-glass {
        max-width: 280px;
        height: 280px;
        border-radius: 24px;
    }
}

@media (max-width: 480px) {
    .about-section { padding: 80px 20px; }
    .about-title { font-size: 2rem; margin-right: 27px;}
    .about-text { font-size: 1rem; margin-right: 27px; }
    .about-btn { padding: 12px 28px; margin-right: 27px; }
    .about-glass {
        max-width: 220px;
        height: 220px;
        border-radius: 20px;
    }
}

/* -----------------------------------------------------------
   TECH STACK SECTION
------------------------------------------------------------ */
.tech-section {
    padding: 110px 40px;
    text-align: center;
    position: relative;
    z-index: 5;
}

.tech-title {
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(90deg, #ff00dd, #9d00ff, #ffae00);
    background-clip: text;

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

.tech-subtitle {
    opacity: .8;
    max-width: 700px;
    margin: 15px auto 55px;
    font-size: 1.2rem;
}

.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 35px;
}

.tech-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 18px;
    padding: 30px 20px;
    backdrop-filter: blur(12px);
    transition: 0.3s ease;
    cursor: default;
}

.tech-card:hover {
    transform: translateY(-10px);
    background: rgba(255,255,255,0.12);
    box-shadow: 0 0 30px rgba(255,0,150,0.25);
}

.tech-card svg {
    width: 55px;
    height: 55px;
    margin-bottom: 12px;
}

.tech-card span {
    display: block;
    margin-top: 8px;
    font-size: 1.05rem;
    opacity: .9;
}

/* -----------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------ */
@media(max-width: 992px) {
    .tech-title { font-size: 2.6rem; }
}

@media(max-width: 768px) {
    .tech-section { padding: 80px 20px; }
    .tech-title { font-size: 2.2rem; }
}

@media(max-width: 480px) {
    .tech-title { font-size: 1.9rem; }
    .tech-subtitle { font-size: 1rem; margin-bottom: 40px; }
}

/* -----------------------------------------------------------
   PORTFOLIO / RECENT WORK
------------------------------------------------------------ */
.portfolio-section {
    padding: 110px 40px;
    text-align: center;
    position: relative;
    z-index: 5;
}

.portfolio-title {
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(90deg, #ff00dd, #9d00ff, #ffae00);
    background-clip: text;

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

.portfolio-subtitle {
    opacity: .85;
    max-width: 700px;
    margin: 15px auto 55px;
    font-size: 1.2rem;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
}

.portfolio-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 18px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: 0.35s ease;
}

.portfolio-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 0 35px rgba(255,0,150,0.25);
}

.portfolio-img {
    height: 220px;
    background-size: cover;
    background-position: center;
}

.portfolio-content {
    padding: 25px;
}

.portfolio-content h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.portfolio-content p {
    font-size: 0.95rem;
    opacity: .75;
    margin-bottom: 18px;
}

/* Button */
.portfolio-btn {
    display: inline-block;
    padding: 10px 26px;
    border-radius: 50px;
    background: linear-gradient(90deg, #8e00ff, #ff009d);
    text-decoration: none;
    color: #fff;
    font-size: 0.95rem;
    transition: .3s ease;
}
.portfolio-btn:hover {
    transform: scale(1.08);
}

/* -----------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------ */
@media (max-width: 992px) {
    .portfolio-title { font-size: 2.6rem; }
}

@media (max-width: 768px) {
    .portfolio-section { padding: 80px 20px; }
    .portfolio-title { font-size: 2.2rem; }
}

@media (max-width: 480px) {
    .portfolio-title { font-size: 1.9rem; }
    .portfolio-subtitle { font-size: 1rem; margin-bottom: 35px; }
}
/* -----------------------------------------------------------
   TESTIMONIALS SECTION
------------------------------------------------------------ */
.testimonials-section {
    padding: 110px 40px;
    text-align: center;
    position: relative;
    z-index: 5;
}

.testimonials-title {
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(90deg, #ff00dd, #9d00ff, #ffae00);
    background-clip: text;

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

.testimonials-subtitle {
    opacity: .8;
    max-width: 700px;
    margin: 15px auto 55px;
    font-size: 1.2rem;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
}

/* Cards */
.testimonial-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 18px;
    padding: 35px 25px;
    backdrop-filter: blur(12px);
    transition: .3s ease;
    text-align: left;
}

.testimonial-card:hover {
    transform: translateY(-12px);
    background: rgba(255,255,255,0.12);
    box-shadow: 0 0 35px rgba(255,0,150,0.25);
}

/* Header */
.testimonial-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}

.testimonial-header img {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.3);
}

.testimonial-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.testimonial-header span {
    font-size: 0.95rem;
    opacity: .75;
}

/* Review Text */
.testimonial-text {
    font-size: 1rem;
    line-height: 1.6;
    opacity: .9;
}

/* -----------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------ */
@media (max-width: 992px) {
    .testimonials-title { font-size: 2.6rem; }
}

@media (max-width: 768px) {
    .testimonials-section { padding: 80px 20px; }
    .testimonials-title { font-size: 2.2rem; }
}

@media (max-width: 480px) {
    .testimonials-title { font-size: 1.9rem; }
    .testimonials-subtitle { font-size: 1rem; margin-bottom: 35px; }
}

/* -----------------------------------------------------------
   CTA (CALL TO ACTION)
------------------------------------------------------------ */
.cta-section {
    padding: 120px 40px;
    position: relative;
    z-index: 5;
    text-align: center;

    /* Glowing gradient background */
    background: linear-gradient(135deg, rgba(255,0,200,0.15), rgba(0,150,255,0.15));
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.cta-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 15px;
    background-clip: text;


    background: linear-gradient(90deg, #ff00dd, #9d00ff, #00c2ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cta-subtitle {
    font-size: 1.2rem;
    opacity: .85;
    margin-bottom: 40px;
}

/* Buttons */
.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Primary Button */
.cta-btn-primary {
    padding: 14px 38px;
    background: linear-gradient(90deg, #8e00ff, #ff009d);
    border-radius: 50px;
    text-decoration: none;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 600;
    box-shadow: 0 0 25px rgba(255,0,150,0.4);
    transition: .3s ease;
}
.cta-btn-primary:hover {
    transform: scale(1.08);
}

/* Secondary Button (Outline) */
.cta-btn-secondary {
    padding: 14px 38px;
    border-radius: 50px;
    border: 2px solid rgba(255,255,255,0.7);
    color: #fff;
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 600;
    backdrop-filter: blur(6px);
    transition: .3s ease;
}
.cta-btn-secondary:hover {
    background: rgba(255,255,255,0.15);
    transform: scale(1.08);
}

/* -----------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------ */
@media (max-width: 992px) {
    .cta-title { font-size: 2.6rem; }
}

@media (max-width: 768px) {
    .cta-section { padding: 90px 25px; }
    .cta-title { font-size: 2.2rem; }
    .cta-subtitle { font-size: 1.1rem; }
}

@media (max-width: 480px) {
    .cta-title { font-size: 1.8rem; }
    .cta-subtitle { font-size: 1rem; }
    .cta-buttons a { width: 100%; text-align: center; }
}