/* =========================================================
   GLOBAL
========================================================= */

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

html {
    scroll-behavior: smooth;
}

:root {

    --bg: #061426;
    --bg-dark: #071a30;
    --card: #0c1d34;
    --card-hover: #102641;

    --text: #f3f7ff;
    --muted: #9eafc6;

    --blue: #39a8ff;
    --blue-light: #58b8ff;

    --purple: #8b5cf6;
    --pink: #e946d7;

    --border: rgba(72, 163, 255, 0.22);

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

body {

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

    background:
        radial-gradient(
            circle at 20% 10%,
            rgba(40,130,255,.07),
            transparent 30%
        ),
        var(--bg);

    color: var(--text);

    line-height: 1.6;

    overflow-x: hidden;
}

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

.container {

    width: min(1180px, 92%);

    margin: auto;
}

.section {

    padding: 110px 0;
}

.section-dark {

    background:
        linear-gradient(
            180deg,
            #07182c,
            #061426
        );
}

.section-label {

    color: var(--blue);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 15px;
}

.section-title {

    font-size: clamp(35px, 4vw, 52px);

    line-height: 1.15;

    max-width: 900px;

    margin-bottom: 45px;

    letter-spacing: -1.5px;
}

.section-title.left {

    margin-bottom: 20px;
}


/* =========================================================
   NAVIGATION
========================================================= */

.navbar {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 999;

    background:
        rgba(5,17,32,.88);

    backdrop-filter: blur(18px);

    border-bottom:
        1px solid rgba(60,150,255,.12);
}

.nav-container {

    width: min(1180px,92%);

    height: 76px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;
}

.logo {

    font-size: 23px;

    font-weight: 800;

    letter-spacing: 1px;
}

.logo span {

    color: var(--blue);
}

nav {

    display: flex;

    gap: 28px;
}

nav a {

    color: #91a5bd;

    font-size: 13px;

    font-weight: 600;

    transition: .3s;
}

nav a:hover,
nav a.active {

    color: var(--blue);
}

.nav-buttons {

    display: flex;

    align-items: center;

    gap: 10px;
}

.icon-btn,
.menu-btn {

    width: 38px;

    height: 38px;

    border-radius: 9px;

    border: 1px solid var(--border);

    background: var(--card);

    color: white;

    cursor: pointer;
}

.menu-btn {

    display: none;
}

.nav-contact {

    padding: 9px 17px;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--purple)
        );

    font-size: 13px;

    font-weight: 700;
}


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

.hero {

    min-height: 900px;

    position: relative;

    display: flex;

    align-items: flex-start;

    padding-top: 140px;

    overflow: hidden;

    background-image:
        linear-gradient(
            90deg,
            rgba(4,16,31,.97) 0%,
            rgba(4,16,31,.84) 38%,
            rgba(4,16,31,.35) 75%,
            rgba(4,16,31,.12) 100%
        ),
        url("tanweer-hero.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
}

.hero-overlay {

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 80% 45%,
            rgba(0,132,255,.12),
            transparent 35%
        );

    pointer-events: none;
}

.hero-content {

    width: min(1180px,92%);

    margin: auto;

    position: relative;

    z-index: 2;

    max-width: 780px;
}

.availability {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #72c3ff;

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

    background: rgba(0,100,190,.08);

    padding: 7px 13px;

    border-radius: 30px;

    font-size: 12px;

    font-weight: 600;

    margin-bottom: 22px;
}

.availability span {

    width: 7px;

    height: 7px;

    background: #34d399;

    border-radius: 50%;

    box-shadow:
        0 0 10px #34d399;
}

.hero h1 {

    font-size: clamp(55px,7vw,88px);

    line-height: .98;

    letter-spacing: -4px;

    margin-bottom: 16px;
}

.hero h2 {

    font-size: clamp(24px,3vw,34px);

    color: var(--blue);

    margin-bottom: 24px;
}

.hero p {

    color: #b1c0d4;

    font-size: 15px;

    line-height: 1.8;

    margin-bottom: 14px;

    max-width: 800px;
}

.hero strong {

    color: white;
}

.hero-meta {

    display: flex;

    gap: 25px;

    flex-wrap: wrap;

    margin: 25px 0;
}

.hero-meta span {

    color: #a7b8cd;

    font-size: 13px;
}

.hero-meta i {

    color: var(--blue);

    margin-right: 6px;
}

.hero-buttons {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;
}

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 12px 20px;

    border-radius: 9px;

    font-size: 13px;

    font-weight: 700;

    transition: .3s;

    cursor: pointer;
}

.btn:hover {

    transform: translateY(-3px);
}

.btn-primary {

    color: white;

    background:
        linear-gradient(
            135deg,
            #319eff,
            #8057f5
        );

    box-shadow:
        0 10px 30px rgba(53,144,255,.2);
}

.btn-outline {

    color: #dbe9fa;

    border: 1px solid rgba(88,155,220,.28);

    background: rgba(9,27,48,.75);
}

.btn-outline:hover {

    border-color: var(--blue);

    color: white;
}
.btn-outline:hover {

    border-color: var(--blue);

    color: white;
}


/* =========================================================
   HERO BUTTONS - COLORFUL PREMIUM STYLE
========================================================= */

.hero-buttons .btn {
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}

/* 1. CONTACT ME - PINK */
.hero-buttons .btn:nth-child(1) {
    background: linear-gradient(135deg, #b84cff, #f04fae) !important;
    box-shadow: 0 0 18px rgba(240,79,174,.28);
}

/* 2. LINKEDIN - BLUE */
.hero-buttons .btn:nth-child(2) {
    background: linear-gradient(135deg, #0077b5, #00a8ff) !important;
    box-shadow: 0 0 18px rgba(0,168,255,.28);
}

/* 3. PROJECTS - PURPLE */
.hero-buttons .btn:nth-child(3) {
    background: linear-gradient(135deg, #6d28d9, #a855f7) !important;
    box-shadow: 0 0 18px rgba(168,85,247,.28);
}

/* 4. REQUEST CV - ORANGE */
.hero-buttons .btn:nth-child(4) {
    background: linear-gradient(135deg, #f97316, #f59e0b) !important;
    box-shadow: 0 0 18px rgba(249,115,22,.28);
}

/* 5. DOWNLOAD NOTES - GREEN */
.hero-buttons .btn:nth-child(5) {
    background: linear-gradient(135deg, #059669, #22c55e) !important;
    box-shadow: 0 0 18px rgba(34,197,94,.28);
}

/* 6. REQUEST FOR IT SUPPORT - CYAN */
.hero-buttons .btn:nth-child(6) {
    background: linear-gradient(135deg, #0891b2, #06b6d4) !important;
    box-shadow: 0 0 18px rgba(6,182,212,.28);
}

/* HOVER EFFECT */
.hero-buttons .btn:hover {
    transform: translateY(-4px) scale(1.04) !important;
    filter: brightness(1.15);
    box-shadow: 0 8px 28px rgba(255,255,255,.20);
}

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

.stats-section {

    padding: 35px 0 80px;

    background: #061426;
}

.stats-grid {

    display: grid;

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

    gap: 15px;
}

.stat-card {

    background:
        linear-gradient(
            145deg,
            #0b1d34,
            #0a192d
        );

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

    border-radius: 16px;

    padding: 25px;

    display: flex;

    align-items: center;

    gap: 18px;

    transition: .3s;
}

.stat-card:hover {

    transform: translateY(-5px);

    border-color: rgba(72,160,255,.4);
}

.stat-icon {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    color: var(--blue);

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

    font-size: 20px;
}

.stat-card h3 {

    font-size: 20px;

    margin-bottom: 2px;
}

.stat-card p {

    color: var(--muted);

    font-size: 12px;
}


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

.about-grid {

    display: grid;

    grid-template-columns:
        1fr 1.1fr;

    gap: 70px;

    align-items: center;
}

.about-text p {

    color: var(--muted);

    font-size: 15px;

    line-height: 1.9;

    margin-bottom: 20px;
}

.about-cards {

    display: grid;

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

    gap: 14px;
}

.mini-card {

    min-height: 100px;

    padding: 25px;

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            #0c2038,
            #0a192d
        );

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

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 12px;

    transition: .3s;
}

.mini-card:hover {

    transform: translateY(-4px);

    border-color: rgba(73,165,255,.4);
}

.mini-card i {

    color: var(--blue);

    font-size: 18px;
}

.mini-card strong {

    font-size: 13px;
}


/* =========================================================
   SKILLS
========================================================= */

.skills-grid {

    display: grid;

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

    gap: 16px;
}

.skill-card {

    padding: 30px;

    min-height: 225px;

    border-radius: 17px;

    background:
        #0b1c32;

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

    transition: .35s;
}

.skill-card:hover {

    transform: translateY(-7px);

    background:
        #0d223c;

    border-color:
        rgba(73,157,255,.45);

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

.skill-card > i {

    font-size: 24px;

    color: var(--blue);

    margin-bottom: 20px;
}

.skill-card:nth-child(2) > i,
.skill-card:nth-child(4) > i {

    color: var(--purple);
}

.skill-card h3 {

    font-size: 16px;

    margin-bottom: 15px;
}

.skill-card p {

    color: #9eb0c7;

    font-size: 13px;

    line-height: 1.8;
}


/* =========================================================
   CERTIFICATIONS
========================================================= */

.cert-grid {

    display: grid;

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

    gap: 16px;
}

.cert-card {

    min-height: 150px;

    padding: 23px;

    border-radius: 15px;

    border: 1px solid;

    transition: .3s;
}

.cert-card:hover {

    transform: translateY(-5px);
}

.cert-card i {

    font-size: 20px;

    margin-bottom: 12px;
}

.cert-card h3 {

    font-size: 15px;

    line-height: 1.3;

    margin-bottom: 10px;
}

.cert-card p {

    font-size: 12px;

    color: #a7b8cd;
}

.cert-card.blue {

    background:
        linear-gradient(
            135deg,
            rgba(38,128,230,.15),
            rgba(30,50,90,.35)
        );

    border-color:
        rgba(46,150,255,.35);
}

.cert-card.blue i {

    color: #4caeff;
}

.cert-card.purple {

    background:
        linear-gradient(
            135deg,
            rgba(115,76,225,.15),
            rgba(40,30,90,.35)
        );

    border-color:
        rgba(136,83,255,.35);
}

.cert-card.purple i {

    color: #9b6cff;
}

.cert-card.green {

    background:
        linear-gradient(
            135deg,
            rgba(23,160,145,.12),
            rgba(20,60,70,.35)
        );

    border-color:
        rgba(30,190,175,.35);
}

.cert-card.green i {

    color: #34d6c4;
}

.cert-card.orange {

    background:
        rgba(255,155,20,.07);

    border-color:
        rgba(255,170,30,.3);
}

.cert-card.orange i {

    color: #ffb43b;
}

.cert-card.pink {

    background:
        rgba(230,50,140,.08);

    border-color:
        rgba(230,70,150,.3);
}

.cert-card.pink i {

    color: #f45da7;
}


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

.projects-grid {

    display: grid;

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

    gap: 16px;
}

.project-card {

    padding: 30px;

    min-height: 190px;

    background:
        #0b1d34;

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

    border-radius: 17px;

    transition: .3s;
}

.project-card:hover {

    transform: translateY(-5px);

    border-color:
        rgba(65,153,255,.45);
}

.project-card > span {

    color: var(--blue);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;
}

.project-card h3 {

    font-size: 20px;

    margin: 10px 0 12px;
}

.project-card p {

    color: #9eb0c7;

    font-size: 13px;

    line-height: 1.75;
}


/* =========================================================
   TECHNOLOGY CLOUD
========================================================= */

.technology-cloud {

    display: flex;

    flex-wrap: wrap;

    gap: 9px;
}

.technology-cloud span {

    padding: 7px 12px;

    border-radius: 20px;

    font-size: 12px;

    font-weight: 600;

    background:
        linear-gradient(
            135deg,
            #102b51,
            #14254c
        );

    color: #dce9fa;

    border:
        1px solid rgba(85,140,230,.12);

    transition: .3s;
}

.technology-cloud span:hover {

    transform: translateY(-3px);

    border-color:
        var(--blue);

    color: white;
}


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

.flow-description {

    color: var(--muted);

    max-width: 900px;

    margin-bottom: 30px;

    font-size: 14px;
}

.flow-box {

    padding: 25px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #0a1e38,
            #0b1a31
        );

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

.flow-item {

    padding: 15px 20px;

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

    border-radius: 12px;

    background:
        #0d213b;

    text-align: center;

    display: flex;

    flex-direction: column;

    gap: 3px;
}

.flow-item strong {

    font-size: 13px;
}

.flow-item span {

    color: #a2b3c8;

    font-size: 12px;
}

.flow-line {

    height: 18px;

    width: 2px;

    background:
        var(--blue);

    margin: auto;
}

.security-flow {

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

    background:
        rgba(98,50,170,.08);
}

.cloud-flow {

    border-color:
        rgba(150,75,255,.4);

    background:
        linear-gradient(
            90deg,
            rgba(76,50,150,.15),
            rgba(100,50,170,.12)
        );
}


/* =========================================================
   WHY HIRE
========================================================= */

.why-grid {

    display: grid;

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

    gap: 70px;

    align-items: center;
}

.why-content > p {

    color: var(--muted);

    max-width: 600px;

    font-size: 15px;

    line-height: 1.9;
}

.why-list {

    display: flex;

    flex-direction: column;

    gap: 12px;
}

.why-list div {

    padding: 15px 18px;

    border-radius: 12px;

    background:
        #0c1e35;

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

    color: #dbe8f8;

    font-size: 13px;

    font-weight: 600;
}

.why-list i {

    color: var(--blue);

    margin-right: 12px;
}


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

.contact-section {

    padding: 30px 0 80px;
}

.contact-box {

    text-align: center;

    padding: 90px 30px;

    border-radius: 25px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(64,100,220,.35),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #132f56,
            #171c4b
        );

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

    box-shadow:
        0 30px 80px rgba(0,0,0,.25);
}

.contact-box .section-label {

    margin-bottom: 15px;
}

.contact-box h2 {

    font-size: clamp(35px,5vw,50px);

    margin-bottom: 18px;

    letter-spacing: -1.5px;
}

.contact-box p {

    max-width: 750px;

    margin: auto;

    color: #a9b8cd;

    font-size: 14px;

    margin-bottom: 30px;
}

.contact-buttons {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;
}

.btn-light {

    background: white;

    color: #142238;
}

.btn-outline-light {

    color: white;

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

    background:
        rgba(0,0,0,.15);
}


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

footer {

    padding: 25px 0;

    border-top:
        1px solid rgba(65,150,255,.1);
}

.footer-content {

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: #8da0b8;

    font-size: 12px;
}

.footer-content a {

    color: var(--blue);

    font-weight: 700;
}


/* =========================================================
   BACK TO TOP
========================================================= */

#backTop {

    position: fixed;

    right: 25px;

    bottom: 25px;

    width: 44px;

    height: 44px;

    border: 0;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--purple)
        );

    color: white;

    cursor: pointer;

    display: none;

    z-index: 500;
}


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

@media(max-width:1000px) {

    nav {

        gap: 15px;
    }

    .stats-grid {

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

    .skills-grid,
    .cert-grid {

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

    .about-grid,
    .why-grid {

        grid-template-columns: 1fr;
    }

}


@media(max-width:760px) {

    .nav-container {

        height: 68px;
    }

    nav {

        position: fixed;

        top: 68px;

        left: 0;

        width: 100%;

        background:
            #07182b;

        flex-direction: column;

        gap: 0;

        max-height: 0;

        overflow: hidden;

        transition: .3s;

        border-bottom:
            1px solid var(--border);
    }

    nav.open {

        max-height: 500px;

        padding: 10px 0;
    }

    nav a {

        padding: 13px 25px;

        display: block;
    }

    .nav-contact {

        display: none;
    }

    .menu-btn {

        display: block;
    }

    .hero {

        min-height: 850px;

        padding-top: 115px;

        background-position:
            63% center;

        background-image:
            linear-gradient(
                180deg,
                rgba(4,16,31,.96) 0%,
                rgba(4,16,31,.84) 45%,
                rgba(4,16,31,.50) 100%
            ),
            url("tanweer-hero.png");
    }

    .hero-content {

        text-align: left;
    }

    .hero h1 {

        font-size: 48px;

        letter-spacing: -2.5px;
    }

    .hero h2 {

        font-size: 24px;
    }

    .stats-grid {

        grid-template-columns: 1fr;
    }

    .about-cards,
    .skills-grid,
    .cert-grid,
    .projects-grid {

        grid-template-columns: 1fr;
    }

    .section {

        padding: 75px 0;
    }

    .section-title {

        font-size: 34px;
    }

    .footer-content {

        flex-direction: column;

        gap: 10px;

        text-align: center;
    }

}


@media(max-width:450px) {

    .hero h1 {

        font-size: 42px;
    }

    .hero-meta {

        flex-direction: column;

        gap: 8px;
    }

    .hero-buttons {

        flex-direction: column;

        align-items: stretch;
    }

    .btn {

        width: 100%;
    }

}
/* =========================================================
   TANWEER PORTFOLIO - FINAL VISUAL UPGRADES
   ========================================================= */


/* =========================================================
   1. HERO - TEXT ABOVE IMAGE
   ========================================================= */

.hero {
    min-height: auto !important;
    padding-top: 125px !important;
    padding-bottom: 45px !important;

    display: block !important;

    background-image: none !important;

    position: relative;
    overflow: hidden;
}

/* Hero text area */

.hero-content {
    width: min(1180px, 92%) !important;
    max-width: 1180px !important;

    margin: 0 auto 40px auto !important;

    text-align: left;

    position: relative;
    z-index: 5;
}

/* Make heading cleaner */

.hero h1 {
    font-size: clamp(52px, 7vw, 82px) !important;
    margin-bottom: 12px !important;
}

.hero h2 {
    margin-bottom: 20px !important;
}

/* Hero text */

.hero p {
    max-width: 950px !important;
}

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

.hero::after {
    content: "";

    display: block;

    width: min(1180px, 92%);
    height: min(430px, 36vw);

    min-height: 300px;

    margin: 0 auto;

    background-image:
        linear-gradient(
            180deg,
            rgba(4,16,31,.02),
            rgba(4,16,31,.12)
        ),
        url("tanweer-hero.png");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

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

    border-radius: 22px;

    box-shadow:
        0 0 0 1px rgba(57,168,255,.08),
        0 20px 70px rgba(0,0,0,.45),
        0 0 50px rgba(30,130,255,.08);

    position: relative;
    z-index: 3;
}


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

.hero::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: 5%;
    bottom: 0;

    background:
        radial-gradient(
            circle,
            rgba(35,150,255,.12),
            transparent 70%
        );

    pointer-events: none;
}


/* =========================================================
   2. INFRASTRUCTURE FLOW
   ANIMATED BLUE VERTICAL CONNECTION
   ========================================================= */

.flow-line {
    width: 3px !important;

    height: 35px !important;

    margin: 0 auto !important;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(57,168,255,.15),
            rgba(57,168,255,.35)
        ) !important;

    border-radius: 10px;

    box-shadow:
        0 0 8px rgba(57,168,255,.25);
}


/* Moving light */

.flow-line::after {
    content: "";

    position: absolute;

    left: 0;
    top: -100%;

    width: 100%;
    height: 70%;

    border-radius: 10px;

    background:
        linear-gradient(
            180deg,
            transparent,
            #39a8ff,
            #ffffff,
            #39a8ff,
            transparent
        );

    box-shadow:
        0 0 10px #39a8ff,
        0 0 20px rgba(57,168,255,.8);

    animation:
        flowPulse 1.5s linear infinite;
}


@keyframes flowPulse {

    0% {
        top: -80%;
    }

    100% {
        top: 110%;
    }

}


/* Flow boxes hover */

.flow-item {
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


.flow-item:hover {

    transform: scale(1.015);

    border-color:
        rgba(57,168,255,.65);

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


/* =========================================================
   3. THREE COLOR THEMES
   ========================================================= */


/* DEFAULT BLUE */

:root {

    --blue: #39a8ff;
    --blue-light: #58b8ff;

    --purple: #8b5cf6;

    --pink: #e946d7;

}


/* PURPLE THEME */

body.theme-purple {

    --blue: #a855f7;
    --blue-light: #c084fc;

    --purple: #ec4899;

    --pink: #f472b6;

}


/* GREEN / CYBER THEME */

body.theme-green {

    --blue: #22c55e;
    --blue-light: #4ade80;

    --purple: #06b6d4;

    --pink: #14b8a6;

}


/* Theme transition */

body,
.navbar,
.stat-card,
.skill-card,
.cert-card,
.project-card,
.mini-card,
.flow-item,
.flow-box,
.contact-box,
.technology-cloud span {

    transition:
        background-color .45s ease,
        border-color .45s ease,
        color .45s ease,
        box-shadow .45s ease;
}


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

.icon-btn {

    position: relative;

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease;

}


.icon-btn:hover {

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

    border-color:
        var(--blue);

    box-shadow:
        0 0 18px rgba(57,168,255,.25);

}


/* Theme indicator */

.icon-btn::after {

    content: "";

    position: absolute;

    width: 6px;
    height: 6px;

    right: 5px;
    bottom: 5px;

    border-radius: 50%;

    background:
        var(--blue);

    box-shadow:
        0 0 8px var(--blue);

}


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

.nav-contact {

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--purple)
        ) !important;

    box-shadow:
        0 8px 25px rgba(80,120,255,.15);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.nav-contact:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 30px rgba(80,120,255,.3);

}


/* =========================================================
   BUTTON COLORS FOLLOW THEME
   ========================================================= */

.btn-primary {

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--purple)
        ) !important;

}


.section-label,
.hero h2,
.hero-meta i,
.project-card > span,
.logo span {

    color:
        var(--blue) !important;

}


/* =========================================================
   FLOW SPECIAL EFFECT
   ========================================================= */

.security-flow {

    border-color:
        color-mix(
            in srgb,
            var(--purple) 55%,
            transparent
        ) !important;

}


.cloud-flow {

    border-color:
        color-mix(
            in srgb,
            var(--purple) 55%,
            transparent
        ) !important;

}


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

@media (max-width: 768px) {

    .hero {

        padding-top: 105px !important;
        padding-bottom: 30px !important;

    }

    .hero-content {

        text-align: center;

        margin-bottom: 30px !important;

    }

    .hero-buttons {

        justify-content: center;

    }

    .hero-meta {

        justify-content: center;

    }

    .hero::after {

        width: 92%;

        height: 260px;

        min-height: 260px;

        border-radius: 16px;

        background-position: center;

    }

}


/* =========================================================
   EXTRA HERO ANIMATION
   ========================================================= */

.hero-content {

    animation:
        heroContentIn .9s ease both;

}


@keyframes heroContentIn {

    from {

        opacity: 0;

        transform:
            translateY(25px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* Image entrance */

.hero::after {

    animation:
        heroImageIn 1.1s ease .15s both;

}


@keyframes heroImageIn {

    from {

        opacity: 0;

        transform:
            translateY(30px)
            scale(.98);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}
/* =========================================================
   PROJECT CARDS - PREMIUM 3D HOVER EFFECT
   ========================================================= */

.project-card {
    position: relative;
    transform-style: preserve-3d;
    perspective: 1000px;

    transition:
        transform 0.18s ease-out,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;

    overflow: hidden;

    will-change: transform;
}


/* Moving colorful glow inside card */

.project-card::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    left: var(--mouse-x, 50%);
    top: var(--mouse-y, 50%);

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

    background:
        radial-gradient(
            circle,
            rgba(57, 168, 255, 0.30),
            rgba(139, 92, 246, 0.18),
            transparent 70%
        );

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.3s ease;
}


/* Purple/blue border glow */

.project-card:hover {

    border-color:
        rgba(57, 168, 255, 0.75);

    background:
        linear-gradient(
            145deg,
            rgba(18, 42, 72, 0.98),
            rgba(19, 28, 58, 0.98)
        );

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.40),
        0 0 25px rgba(57, 168, 255, 0.20),
        0 0 50px rgba(139, 92, 246, 0.10);
}


.project-card:hover::before {
    opacity: 1;
}


/* Content comes slightly forward */

.project-card > * {
    position: relative;

    z-index: 2;

    transform:
        translateZ(25px);
}


/* Project category */

.project-card > span,
.project-card .project-category {

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


.project-card:hover > span,
.project-card:hover .project-category {

    color: #58b8ff !important;

    transform:
        translateZ(35px);
}


/* Project title */

.project-card h3,
.project-card h4 {

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


.project-card:hover h3,
.project-card:hover h4 {

    color: #ffffff;

    transform:
        translateZ(35px);
}


/* Project description */

.project-card p {

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


.project-card:hover p {

    color: #c7d8ec;

    transform:
        translateZ(20px);
}


/* Small shine animation */

.project-card::after {

    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255,255,255,0.08) 45%,
            rgba(255,255,255,0.16) 50%,
            transparent 75%
        );

    transform:
        skewX(-20deg);

    pointer-events: none;

    transition:
        left 0.7s ease;

    z-index: 1;
}


.project-card:hover::after {

    left: 150%;

}


/* Different color accent for every card */

.project-card:nth-child(2n):hover {

    border-color:
        rgba(139, 92, 246, 0.85);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.40),
        0 0 30px rgba(139, 92, 246, 0.22);

}


.project-card:nth-child(3n):hover {

    border-color:
        rgba(34, 211, 238, 0.85);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.40),
        0 0 30px rgba(34, 211, 238, 0.20);

}


.project-card:nth-child(4n):hover {

    border-color:
        rgba(236, 72, 153, 0.80);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.40),
        0 0 30px rgba(236, 72, 153, 0.20);

}


/* Mobile - don't tilt cards */

@media (max-width: 768px) {

    .project-card {

        transform:
            none !important;

    }

}

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

.whatsapp-nav {
    display: inline-flex !important;

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

    gap: 8px;

    padding: 9px 16px !important;

    border-radius: 10px;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #25D366,
            #128C7E
        ) !important;

    border:
        1px solid rgba(37, 211, 102, 0.55);

    box-shadow:
        0 8px 22px rgba(37, 211, 102, 0.18);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        filter .3s ease;
}


/* WhatsApp icon */

.whatsapp-nav i {
    font-size: 17px;

    color: #ffffff;

    transition:
        transform .3s ease;
}


/* Hover */

.whatsapp-nav:hover {

    transform:
        translateY(-3px)
        scale(1.03);

    filter:
        brightness(1.08);

    box-shadow:
        0 12px 30px rgba(37, 211, 102, 0.35);
}


.whatsapp-nav:hover i {

    transform:
        rotate(-10deg)
        scale(1.15);
}


/* Small glowing WhatsApp effect */

.whatsapp-nav::before {

    content: "";

    position: absolute;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #ffffff;

    opacity: .8;

    box-shadow:
        0 0 10px #ffffff;

}


/* Mobile */

@media (max-width: 760px) {

    .whatsapp-nav {

        display: none !important;

    }

}
/* =========================================================
   TANWEER - FINAL THREE COLOR THEME SYSTEM
   ========================================================= */


/* =========================================================
   BLUE THEME - DEFAULT
   ========================================================= */

body {

    --theme-main: #39a8ff;
    --theme-secondary: #8b5cf6;

    --theme-bg: #061426;
    --theme-card: #0b1d34;

    --theme-border:
        rgba(57,168,255,.28);

    --theme-glow:
        rgba(57,168,255,.28);

}


/* =========================================================
   PURPLE THEME
   ========================================================= */

body.theme-purple {

    --theme-main: #a855f7;
    --theme-secondary: #ec4899;

    --theme-bg: #10091f;
    --theme-card: #1a1030;

    --theme-border:
        rgba(168,85,247,.38);

    --theme-glow:
        rgba(168,85,247,.35);

}


/* =========================================================
   GREEN THEME
   ========================================================= */

body.theme-green {

    --theme-main: #22c55e;
    --theme-secondary: #06b6d4;

    --theme-bg: #031a13;
    --theme-card: #08271d;

    --theme-border:
        rgba(34,197,94,.38);

    --theme-glow:
        rgba(34,197,94,.35);

}


/* =========================================================
   BODY
   ========================================================= */

body {

    transition:
        background .5s ease,
        color .5s ease;

}


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

body.theme-purple .navbar {

    background:
        rgba(18,8,35,.94);

    border-bottom-color:
        rgba(168,85,247,.35);

}


body.theme-green .navbar {

    background:
        rgba(2,25,18,.94);

    border-bottom-color:
        rgba(34,197,94,.35);

}


/* =========================================================
   NAVIGATION ACTIVE COLOR
   ========================================================= */

body.theme-purple nav a:hover,
body.theme-purple nav a.active {

    color:
        #c084fc !important;

}


body.theme-green nav a:hover,
body.theme-green nav a.active {

    color:
        #4ade80 !important;

}


/* =========================================================
   LOGO
   ========================================================= */

body.theme-purple .logo span {

    color:
        #c084fc !important;

}


body.theme-green .logo span {

    color:
        #4ade80 !important;

}


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

body.theme-purple .hero h2 {

    color:
        #c084fc !important;

}


body.theme-green .hero h2 {

    color:
        #4ade80 !important;

}


/* =========================================================
   SECTION LABELS
   ========================================================= */

body.theme-purple .section-label {

    color:
        #c084fc !important;

}


body.theme-green .section-label {

    color:
        #4ade80 !important;

}


/* =========================================================
   ICONS
   ========================================================= */

body.theme-purple
.stat-icon,

body.theme-purple
.mini-card i,

body.theme-purple
.skill-card > i,

body.theme-purple
.why-list i {

    color:
        #c084fc !important;

}


body.theme-green
.stat-icon,

body.theme-green
.mini-card i,

body.theme-green
.skill-card > i,

body.theme-green
.why-list i {

    color:
        #4ade80 !important;

}


/* =========================================================
   CARDS - PURPLE
   ========================================================= */

body.theme-purple
.stat-card,

body.theme-purple
.mini-card,

body.theme-purple
.skill-card,

body.theme-purple
.project-card,

body.theme-purple
.flow-item,

body.theme-purple
.why-list div {

    border-color:
        rgba(168,85,247,.28);

}


body.theme-purple
.stat-card:hover,

body.theme-purple
.mini-card:hover,

body.theme-purple
.skill-card:hover,

body.theme-purple
.project-card:hover {

    border-color:
        rgba(236,72,153,.75);

    box-shadow:
        0 20px 50px rgba(168,85,247,.18),
        0 0 30px rgba(236,72,153,.10);

}


/* =========================================================
   CARDS - GREEN
   ========================================================= */

body.theme-green
.stat-card,

body.theme-green
.mini-card,

body.theme-green
.skill-card,

body.theme-green
.project-card,

body.theme-green
.flow-item,

body.theme-green
.why-list div {

    border-color:
        rgba(34,197,94,.28);

}


body.theme-green
.stat-card:hover,

body.theme-green
.mini-card:hover,

body.theme-green
.skill-card:hover,

body.theme-green
.project-card:hover {

    border-color:
        rgba(74,222,128,.75);

    box-shadow:
        0 20px 50px rgba(34,197,94,.18),
        0 0 30px rgba(6,182,212,.10);

}


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

body.theme-purple .btn-primary {

    background:
        linear-gradient(
            135deg,
            #a855f7,
            #ec4899
        ) !important;

}


body.theme-green .btn-primary {

    background:
        linear-gradient(
            135deg,
            #22c55e,
            #06b6d4
        ) !important;

}


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

body.theme-purple .icon-btn {

    border-color:
        #a855f7 !important;

    box-shadow:
        0 0 18px
        rgba(168,85,247,.35);

}


body.theme-green .icon-btn {

    border-color:
        #22c55e !important;

    box-shadow:
        0 0 18px
        rgba(34,197,94,.35);

}


/* Theme button icon */

body.theme-purple
#themeToggle i {

    color:
        #c084fc;

}


body.theme-green
#themeToggle i {

    color:
        #4ade80;

}


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

body.theme-purple .flow-line {

    background:
        linear-gradient(
            180deg,
            #a855f7,
            #ec4899
        ) !important;

    box-shadow:
        0 0 12px
        rgba(168,85,247,.45);

}


body.theme-green .flow-line {

    background:
        linear-gradient(
            180deg,
            #22c55e,
            #06b6d4
        ) !important;

    box-shadow:
        0 0 12px
        rgba(34,197,94,.45);

}


/* =========================================================
   FLOW MOVING LIGHT
   ========================================================= */

body.theme-purple
.flow-line::after {

    background:
        linear-gradient(
            180deg,
            transparent,
            #a855f7,
            #ffffff,
            #ec4899,
            transparent
        );

    box-shadow:
        0 0 12px #a855f7,
        0 0 22px rgba(236,72,153,.8);

}


body.theme-green
.flow-line::after {

    background:
        linear-gradient(
            180deg,
            transparent,
            #22c55e,
            #ffffff,
            #06b6d4,
            transparent
        );

    box-shadow:
        0 0 12px #22c55e,
        0 0 22px rgba(6,182,212,.8);

}


/* =========================================================
   TECHNOLOGY TAGS
   ========================================================= */

body.theme-purple
.technology-cloud span:hover {

    border-color:
        #c084fc !important;

    box-shadow:
        0 0 15px
        rgba(168,85,247,.25);

}


body.theme-green
.technology-cloud span:hover {

    border-color:
        #4ade80 !important;

    box-shadow:
        0 0 15px
        rgba(34,197,94,.25);

}


/* =========================================================
   PROJECT CARD CATEGORY
   ========================================================= */

body.theme-purple
.project-card > span {

    color:
        #c084fc !important;

}


body.theme-green
.project-card > span {

    color:
        #4ade80 !important;

}


/* =========================================================
   THEME INDICATOR DOT
   ========================================================= */

body.theme-purple
.icon-btn::after {

    background:
        #ec4899 !important;

    box-shadow:
        0 0 10px #ec4899;

}


body.theme-green
.icon-btn::after {

    background:
        #22c55e !important;

    box-shadow:
        0 0 10px #22c55e;

}


/* =========================================================
   SMOOTH TRANSITION
   ========================================================= */

.navbar,
.icon-btn,
.stat-card,
.mini-card,
.skill-card,
.project-card,
.flow-item,
.flow-box,
.why-list div,
.technology-cloud span,
.btn-primary {

    transition:
        background .5s ease,
        background-color .5s ease,
        border-color .5s ease,
        box-shadow .5s ease,
        color .5s ease,
        transform .3s ease;

}
/* =========================================================
   TOP NAVIGATION - PREMIUM 3D MENU
   ========================================================= */

/* Hide TANWEER logo/text */
.navbar .logo {
    display: none !important;
}

/* Give navigation more space */
.navbar {
    padding: 18px 5% !important;
}

/* Navigation container */
.nav-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px !important;
}

/* All navigation buttons */
.nav-menu a {
    position: relative;

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

    min-width: 92px;
    padding: 12px 18px !important;

    border-radius: 12px;

    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .3px;

    color: #c9d8ea !important;

    border: 1px solid transparent;

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

    transform-style: preserve-3d;

    transition:
        transform .25s ease,
        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

    overflow: hidden;
}

/* Animated shine */
.nav-menu a::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background:
        linear-gradient(
            110deg,
            transparent,
            rgba(255,255,255,.25),
            transparent
        );

    transform: skewX(-20deg);

    transition: left .5s ease;

    pointer-events: none;
}

/* 3D hover */
.nav-menu a:hover {
    transform:
        translateY(-5px)
        perspective(600px)
        rotateX(8deg)
        scale(1.06);

    color: #ffffff !important;

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

    box-shadow:
        0 10px 25px rgba(0,0,0,.35),
        0 0 20px var(--nav-glow);

    border-color: var(--nav-color);
}

.nav-menu a:hover::before {
    left: 140%;
}

/* =========================================================
   EACH MENU BUTTON - DIFFERENT COLOR
   ========================================================= */

/* HOME - BLUE */
.nav-menu a:nth-child(1) {
    --nav-color: #39a8ff;
    --nav-glow: rgba(57,168,255,.45);
}

.nav-menu a:nth-child(1):hover {
    color: #58b8ff !important;
}

/* ABOUT - PURPLE */
.nav-menu a:nth-child(2) {
    --nav-color: #a855f7;
    --nav-glow: rgba(168,85,247,.45);
}

.nav-menu a:nth-child(2):hover {
    color: #c084fc !important;
}

/* SKILLS - CYAN */
.nav-menu a:nth-child(3) {
    --nav-color: #06b6d4;
    --nav-glow: rgba(6,182,212,.45);
}

.nav-menu a:nth-child(3):hover {
    color: #22d3ee !important;
}

/* PROJECTS - PINK */
.nav-menu a:nth-child(4) {
    --nav-color: #ec4899;
    --nav-glow: rgba(236,72,153,.45);
}

.nav-menu a:nth-child(4):hover {
    color: #f472b6 !important;
}

/* EXPERIENCE - ORANGE */
.nav-menu a:nth-child(5) {
    --nav-color: #f97316;
    --nav-glow: rgba(249,115,22,.45);
}

.nav-menu a:nth-child(5):hover {
    color: #fb923c !important;
}

/* CERTIFICATIONS - GREEN */
.nav-menu a:nth-child(6) {
    --nav-color: #22c55e;
    --nav-glow: rgba(34,197,94,.45);
}

.nav-menu a:nth-child(6):hover {
    color: #4ade80 !important;
}


/* =========================================================
   ACTIVE MENU
   ========================================================= */

.nav-menu a.active {
    color: #ffffff !important;

    border-color: var(--nav-color);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.025)
        );

    box-shadow:
        0 0 15px var(--nav-glow);
}


/* =========================================================
   BLINKING / PULSING EFFECT
   ========================================================= */

.nav-menu a:hover {
    animation:
        navBlink .8s ease-in-out infinite alternate;
}

@keyframes navBlink {

    from {
        filter: brightness(1);
    }

    to {
        filter: brightness(1.25);
    }

}


/* =========================================================
   WHATSAPP BUTTON - KEEP GREEN
   ========================================================= */

.whatsapp-nav {
    min-width: 120px !important;

    padding: 12px 20px !important;

    border-radius: 12px !important;

    background:
        linear-gradient(
            135deg,
            #25D366,
            #128C7E
        ) !important;

    color: #ffffff !important;

    border-color:
        rgba(37,211,102,.55) !important;

    box-shadow:
        0 6px 20px
        rgba(37,211,102,.18);
}

.whatsapp-nav:hover {

    color: #ffffff !important;

    border-color:
        #25D366 !important;

    box-shadow:
        0 12px 30px
        rgba(37,211,102,.4) !important;
}


/* =========================================================
   THEME BUTTON - SAME PREMIUM SIZE
   ========================================================= */

#themeToggle {

    width: 48px !important;
    height: 48px !important;

    border-radius: 12px !important;

    margin-left: 8px;

    transform-style: preserve-3d;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

#themeToggle:hover {

    transform:
        translateY(-4px)
        rotateY(15deg)
        scale(1.08);

}


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

@media (max-width: 1100px) {

    .nav-menu {
        gap: 4px !important;
    }

    .nav-menu a {
        min-width: auto;

        padding:
            10px 12px !important;

        font-size:
            13px !important;
    }

}


@media (max-width: 768px) {

    /* Keep mobile navigation manageable */
    .navbar {
        padding:
            14px 4% !important;
    }

    .nav-menu {
        gap: 3px !important;
    }

    .nav-menu a {
        padding:
            9px 8px !important;

        min-width: auto;

        font-size:
            11px !important;
    }

    .whatsapp-nav {
        min-width: auto !important;
    }

}


@media (max-width: 600px) {

    .nav-menu a {
        padding:
            8px 6px !important;

        font-size:
            10px !important;
    }

    #themeToggle {
        width: 40px !important;
        height: 40px !important;
    }

}
/* =========================================================
   FINAL PREMIUM TOP NAVIGATION
   ========================================================= */

/* Hide TANWEER logo completely */
.navbar .logo {
    display: none !important;
}


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

.nav-container {
    width: min(1400px, 96%) !important;

    height: 82px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 22px !important;
}


/* =========================================================
   MAIN MENU
   ========================================================= */

.nav-container nav {
    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 9px !important;

    margin: 0 !important;
}


/* =========================================================
   ALL MENU BUTTONS
   ========================================================= */

.nav-container nav a {

    position: relative;

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    min-width: 92px !important;

    height: 48px !important;

    padding: 0 18px !important;

    border-radius: 13px !important;

    font-size: 15px !important;

    font-weight: 750 !important;

    letter-spacing: .25px;

    color: #aebfd3 !important;

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

    border:
        1px solid rgba(100,160,220,.12);

    transform-style: preserve-3d;

    transition:
        transform .25s ease,
        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

    overflow: hidden;
}


/* =========================================================
   SHINE EFFECT
   ========================================================= */

.nav-container nav a::before {

    content: "";

    position: absolute;

    top: 0;

    left: -130%;

    width: 75%;

    height: 100%;

    background:
        linear-gradient(
            110deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

    transform: skewX(-20deg);

    transition:
        left .55s ease;

    pointer-events: none;
}


.nav-container nav a:hover::before {

    left: 150%;

}


/* =========================================================
   3D HOVER
   ========================================================= */

.nav-container nav a:hover {

    transform:
        perspective(700px)
        rotateX(8deg)
        translateY(-5px)
        scale(1.07);

    color: #ffffff !important;

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

    border-color:
        var(--nav-color) !important;

    box-shadow:
        0 10px 25px rgba(0,0,0,.35),
        0 0 22px var(--nav-glow);

    animation:
        navPulse .7s ease-in-out infinite alternate;
}


/* =========================================================
   LITTLE BLINK / GLOW
   ========================================================= */

@keyframes navPulse {

    from {
        filter: brightness(1);
    }

    to {
        filter: brightness(1.28);
    }

}


/* =========================================================
   HOME - BLUE
   ========================================================= */

.nav-container nav a:nth-child(1) {

    --nav-color: #38bdf8;

    --nav-glow:
        rgba(56,189,248,.55);
}


.nav-container nav a:nth-child(1):hover {

    color: #38bdf8 !important;

}


/* =========================================================
   ABOUT - PURPLE
   ========================================================= */

.nav-container nav a:nth-child(2) {

    --nav-color: #a855f7;

    --nav-glow:
        rgba(168,85,247,.55);
}


.nav-container nav a:nth-child(2):hover {

    color: #c084fc !important;

}


/* =========================================================
   SKILLS - CYAN
   ========================================================= */

.nav-container nav a:nth-child(3) {

    --nav-color: #06b6d4;

    --nav-glow:
        rgba(6,182,212,.55);
}


.nav-container nav a:nth-child(3):hover {

    color: #22d3ee !important;

}


/* =========================================================
   EXPERIENCE - ORANGE
   ========================================================= */

.nav-container nav a:nth-child(4) {

    --nav-color: #f97316;

    --nav-glow:
        rgba(249,115,22,.55);
}


.nav-container nav a:nth-child(4):hover {

    color: #fb923c !important;

}


/* =========================================================
   CERTIFICATIONS - GREEN
   ========================================================= */

.nav-container nav a:nth-child(5) {

    --nav-color: #22c55e;

    --nav-glow:
        rgba(34,197,94,.55);
}


.nav-container nav a:nth-child(5):hover {

    color: #4ade80 !important;

}


/* =========================================================
   PROJECTS - PINK
   ========================================================= */

.nav-container nav a:nth-child(6) {

    --nav-color: #ec4899;

    --nav-glow:
        rgba(236,72,153,.55);
}


.nav-container nav a:nth-child(6):hover {

    color: #f472b6 !important;

}


/* =========================================================
   CONTACT - YELLOW / GOLD
   ========================================================= */

.nav-container nav a:nth-child(7) {

    --nav-color: #facc15;

    --nav-glow:
        rgba(250,204,21,.55);
}


.nav-container nav a:nth-child(7):hover {

    color: #fde047 !important;

}


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

.nav-container nav a.active {

    color: #ffffff !important;

    border-color:
        var(--nav-color) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.09),
            rgba(255,255,255,.025)
        );

    box-shadow:
        0 0 16px var(--nav-glow);

}


/* =========================================================
   RIGHT SIDE BUTTON GROUP
   ========================================================= */

.nav-buttons {

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    margin-left: 4px !important;
}


/* =========================================================
   THEME BUTTON - BIGGER
   ========================================================= */

#themeToggle {

    width: 50px !important;

    height: 50px !important;

    flex: 0 0 50px;

    border-radius: 13px !important;

    margin: 0 !important;

    border:
        1px solid rgba(70,160,255,.35) !important;

    background:
        linear-gradient(
            145deg,
            #102641,
            #0a192d
        ) !important;

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

    cursor: pointer;

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


#themeToggle:hover {

    transform:
        perspective(500px)
        rotateY(15deg)
        rotateX(8deg)
        translateY(-4px)
        scale(1.08);

    border-color:
        #39a8ff !important;

    box-shadow:
        0 0 22px
        rgba(57,168,255,.45);

}


/* Theme icon */

#themeToggle i {

    font-size: 18px;

    transition:
        transform .3s ease,
        color .3s ease;
}


#themeToggle:hover i {

    transform:
        rotate(25deg)
        scale(1.2);

}


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

.nav-contact.whatsapp-nav {

    min-width: 135px !important;

    height: 50px !important;

    padding:
        0 22px !important;

    margin: 0 !important;

    border-radius: 13px !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 9px !important;

    font-size: 15px !important;

    font-weight: 800 !important;

    background:
        linear-gradient(
            135deg,
            #25D366,
            #128C7E
        ) !important;

    color: #ffffff !important;

    border:
        1px solid
        rgba(37,211,102,.65) !important;

    box-shadow:
        0 8px 25px
        rgba(37,211,102,.22);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        filter .3s ease;
}


.nav-contact.whatsapp-nav i {

    font-size: 19px;

}


.nav-contact.whatsapp-nav:hover {

    transform:
        perspective(600px)
        rotateX(7deg)
        translateY(-5px)
        scale(1.06);

    filter:
        brightness(1.12);

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

}


/* =========================================================
   WHATSAPP ICON ANIMATION
   ========================================================= */

.nav-contact.whatsapp-nav:hover i {

    animation:
        whatsappBounce .5s ease;

}


@keyframes whatsappBounce {

    0% {
        transform: scale(1);
    }

    40% {
        transform:
            scale(1.25)
            rotate(-10deg);
    }

    70% {
        transform:
            scale(.95)
            rotate(8deg);
    }

    100% {
        transform: scale(1);
    }

}


/* =========================================================
   DESKTOP LARGE SCREEN
   ========================================================= */

@media (min-width: 1400px) {

    .nav-container {

        width: 1400px !important;

        gap: 30px !important;

    }

    .nav-container nav {

        gap: 11px !important;

    }

    .nav-container nav a {

        min-width: 105px !important;

        height: 52px !important;

        padding:
            0 20px !important;

        font-size:
            16px !important;

    }

    #themeToggle {

        width: 52px !important;

        height: 52px !important;

    }

    .nav-contact.whatsapp-nav {

        height: 52px !important;

        min-width: 145px !important;

        font-size: 16px !important;

    }

}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1200px) {

    .nav-container {

        width: 98% !important;

        gap: 12px !important;

    }

    .nav-container nav {

        gap: 4px !important;

    }

    .nav-container nav a {

        min-width: auto !important;

        padding:
            0 12px !important;

        font-size:
            13px !important;

    }

}


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

@media (max-width: 768px) {

    .nav-container {

        height: 70px !important;

    }

    .nav-container nav {

        gap: 3px !important;

    }

    .nav-container nav a {

        height: 40px !important;

        padding:
            0 7px !important;

        font-size:
            10px !important;

        min-width:
            auto !important;

    }

    #themeToggle {

        width: 42px !important;

        height: 42px !important;

        flex-basis: 42px;

    }

}
/* =========================================================
   TANWEER PORTFOLIO
   FINAL PREMIUM NAVIGATION
   ========================================================= */


/* ---------------------------------------------------------
   HIDE LOGO
   --------------------------------------------------------- */

.nav-container > .logo {
    display: none !important;
}


/* ---------------------------------------------------------
   NAVBAR CONTAINER
   --------------------------------------------------------- */

.nav-container {

    width: min(1450px, 97%) !important;

    height: 82px !important;

    margin: auto !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 18px !important;

}


/* ---------------------------------------------------------
   NAVIGATION MENU
   --------------------------------------------------------- */

.nav-container nav {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 8px !important;

    margin: 0 !important;

    flex: 0 0 auto !important;

}


/* ---------------------------------------------------------
   MENU BUTTON
   --------------------------------------------------------- */

.nav-container nav a {

    position: relative;

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    min-width: 105px !important;

    height: 50px !important;

    padding: 0 19px !important;

    border-radius: 13px !important;

    color: #aebfd3 !important;

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

    border:
        1px solid
        rgba(90,160,230,.14);

    font-size: 15px !important;

    font-weight: 750 !important;

    letter-spacing: .2px;

    white-space: nowrap;

    transform-style: preserve-3d;

    transition:
        transform .28s ease,
        color .28s ease,
        background .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;

    overflow: hidden;

}


/* ---------------------------------------------------------
   SHINE
   --------------------------------------------------------- */

.nav-container nav a::before {

    content: "";

    position: absolute;

    top: 0;

    left: -130%;

    width: 75%;

    height: 100%;

    background:
        linear-gradient(
            110deg,
            transparent,
            rgba(255,255,255,.40),
            transparent
        );

    transform: skewX(-20deg);

    transition:
        left .55s ease;

    pointer-events: none;

}


.nav-container nav a:hover::before {

    left: 150%;

}


/* ---------------------------------------------------------
   3D HOVER
   --------------------------------------------------------- */

.nav-container nav a:hover {

    transform:
        perspective(700px)
        rotateX(9deg)
        rotateY(-3deg)
        translateY(-6px)
        scale(1.07);

    color:
        var(--nav-color) !important;

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

    border-color:
        var(--nav-color) !important;

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

}


/* ---------------------------------------------------------
   ACTIVE
   --------------------------------------------------------- */

.nav-container nav a.active {

    color:
        #ffffff !important;

    border-color:
        var(--nav-color) !important;

    box-shadow:
        0 0 16px var(--nav-glow);

}


/* =========================================================
   INDIVIDUAL COLORS
   ========================================================= */


/* HOME */

.nav-container nav a:nth-child(1) {

    --nav-color: #38bdf8;

    --nav-glow:
        rgba(56,189,248,.55);

}


/* ABOUT */

.nav-container nav a:nth-child(2) {

    --nav-color: #a855f7;

    --nav-glow:
        rgba(168,85,247,.55);

}


/* SKILLS */

.nav-container nav a:nth-child(3) {

    --nav-color: #06b6d4;

    --nav-glow:
        rgba(6,182,212,.55);

}


/* EXPERIENCE */

.nav-container nav a:nth-child(4) {

    --nav-color: #f97316;

    --nav-glow:
        rgba(249,115,22,.55);

}


/* CERTIFICATIONS */

.nav-container nav a:nth-child(5) {

    --nav-color: #22c55e;

    --nav-glow:
        rgba(34,197,94,.55);

}


/* PROJECTS */

.nav-container nav a:nth-child(6) {

    --nav-color: #ec4899;

    --nav-glow:
        rgba(236,72,153,.55);

}


/* CONTACT */

.nav-container nav a:nth-child(7) {

    --nav-color: #facc15;

    --nav-glow:
        rgba(250,204,21,.55);

}


/* =========================================================
   RIGHT BUTTONS
   ========================================================= */

.nav-buttons {

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    margin: 0 !important;

    flex: 0 0 auto !important;

}


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

#themeToggle {

    width: 52px !important;

    height: 52px !important;

    min-width: 52px !important;

    margin: 0 !important;

    border-radius: 13px !important;

    display: flex !important;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    background:
        linear-gradient(
            145deg,
            #102641,
            #08182c
        ) !important;

    border:
        1px solid
        rgba(57,168,255,.45) !important;

    box-shadow:
        0 6px 20px
        rgba(57,168,255,.12);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


#themeToggle:hover {

    transform:
        perspective(600px)
        rotateY(15deg)
        rotateX(8deg)
        translateY(-5px)
        scale(1.08);

    box-shadow:
        0 0 25px
        rgba(57,168,255,.45);

}


#themeToggle i {

    font-size: 19px !important;

}


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

.nav-contact.whatsapp-nav {

    height: 52px !important;

    min-width: 145px !important;

    padding:
        0 22px !important;

    margin: 0 !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 9px !important;

    border-radius: 13px !important;

    background:
        linear-gradient(
            135deg,
            #25D366,
            #128C7E
        ) !important;

    border:
        1px solid
        rgba(37,211,102,.65) !important;

    color: white !important;

    font-size: 15px !important;

    font-weight: 800 !important;

    box-shadow:
        0 8px 25px
        rgba(37,211,102,.20);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        filter .3s ease;

}


.nav-contact.whatsapp-nav i {

    font-size: 19px !important;

}


.nav-contact.whatsapp-nav:hover {

    transform:
        perspective(600px)
        rotateX(8deg)
        translateY(-5px)
        scale(1.06);

    filter:
        brightness(1.12);

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

}


/* =========================================================
   EXPERIENCE SECTION
   ========================================================= */

.experience-section {

    background:
        linear-gradient(
            180deg,
            #061426,
            #071a30
        );

}


.experience-grid {

    display: grid;

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

    gap: 22px;

}


.experience-card {

    position: relative;

    display: flex;

    gap: 22px;

    padding: 28px;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(14,36,62,.95),
            rgba(8,25,44,.95)
        );

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

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

    transform-style: preserve-3d;

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

}


.experience-card:hover {

    transform:
        perspective(1000px)
        rotateX(3deg)
        rotateY(-3deg)
        translateY(-8px);

    border-color:
        #f97316;

    box-shadow:
        0 20px 45px
        rgba(0,0,0,.35),
        0 0 25px
        rgba(249,115,22,.18);

}


.experience-icon {

    flex:
        0 0 58px;

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #f97316,
            #ec4899
        );

    color: white;

    font-size: 22px;

    box-shadow:
        0 8px 25px
        rgba(249,115,22,.22);

}


.experience-content {

    flex: 1;

}


.experience-period {

    display: inline-block;

    margin-bottom: 7px;

    color: #38bdf8;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.experience-card h3 {

    margin-bottom: 9px;

    font-size: 23px;

    color: #f3f7ff;

}


.experience-summary {

    color: #a8bad0;

    font-size: 14px;

    margin-bottom: 14px;

}


.experience-card ul {

    padding-left: 18px;

    color: #9eafc6;

    font-size: 13px;

    line-height: 1.9;

}


.experience-card li::marker {

    color: #f97316;

}


/* =========================================================
   FIX ANCHOR POSITION WITH FIXED NAVBAR
   ========================================================= */

section[id] {

    scroll-margin-top:
        95px;

}


/* =========================================================
   REMOVE MOBILE MENU BUTTON ON DESKTOP
   ========================================================= */

@media (min-width: 769px) {

    #menuToggle {

        display: none !important;

    }

}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1400px) {

    .nav-container {

        width: 1450px !important;

        gap: 22px !important;

    }

    .nav-container nav {

        gap: 10px !important;

    }

    .nav-container nav a {

        min-width: 112px !important;

        height: 53px !important;

        font-size: 16px !important;

    }

}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1250px) {

    .nav-container {

        width: 98% !important;

        gap: 8px !important;

    }

    .nav-container nav {

        gap: 3px !important;

    }

    .nav-container nav a {

        min-width: auto !important;

        padding:
            0 11px !important;

        font-size:
            13px !important;

    }

}


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

@media (max-width: 800px) {

    .experience-grid {

        grid-template-columns: 1fr;

    }

}


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

@media (max-width: 650px) {

    .nav-container {

        height: 68px !important;

    }

    .nav-container nav {

        gap: 2px !important;

    }

    .nav-container nav a {

        min-width: auto !important;

        height: 38px !important;

        padding:
            0 6px !important;

        font-size:
            10px !important;

    }

    #themeToggle {

        width: 40px !important;

        height: 40px !important;

        min-width: 40px !important;

    }

    .nav-contact.whatsapp-nav {

        min-width: auto !important;

        height: 40px !important;

        padding:
            0 10px !important;

        font-size:
            11px !important;

    }

}
/* =====================================================
   CLEAN CISCO CERTIFICATE CARDS
   ===================================================== */

.certificate-bg {
    position: relative;
    overflow: hidden;

    background-color: #ffffff !important;

    border: 2px solid rgba(0, 190, 255, 0.65);

    min-height: 300px;

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

/* Certificate image layer */
.certificate-bg::before {
    content: "";
    position: absolute;
    inset: 0;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 92% auto;

    opacity: 1;

    z-index: 0;

    pointer-events: none;
}

/* CCNA certificate */
.ccna-card::before {
    background-image: url("ccna-logo.png");
}

/* CCNP certificate */
.ccnp-card::before {
    background-image: url("ccnp-logo.png");
}

/* White certificate surface */
.certificate-bg::after {
    content: "";
    position: absolute;
    inset: 0;

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

    z-index: 1;

    pointer-events: none;
}

/* Put text above certificate */
.certificate-bg > * {
    position: relative;
    z-index: 3;
}

/* Certificate issuer */
.certificate-bg .issuer {
    color: #0077b6 !important;
    font-weight: 800;
    letter-spacing: 2px;
}

/* Certificate title */
.certificate-bg h2 {
    color: #071a35 !important;
    font-weight: 900;
    text-shadow: 0 1px 1px rgba(255,255,255,0.8);
}

/* Certificate description */
.certificate-bg p {
    color: #18324f !important;
    font-weight: 600;
    line-height: 1.7;
}

/* Icon */
.certificate-bg .cert-icon {
    box-shadow:
        0 8px 25px rgba(0, 120, 255, 0.30);

    position: relative;
    z-index: 4;
}

/* Hover effect */
.certificate-bg:hover {
    transform: translateY(-10px) scale(1.02);

    border-color: #00c8ff;

    box-shadow:
        0 20px 50px rgba(0, 160, 255, 0.35),
        0 0 30px rgba(0, 200, 255, 0.20);
}

/* CCNA special hover */
.ccna-card:hover {
    border-color: #00aaff;
}

/* CCNP special hover */
.ccnp-card:hover {
    border-color: #7c5cff;
}
/* =========================================================
   FRESH CERTIFICATIONS PAGE
   ========================================================= */

.cert-page {
    min-height: 100vh;

    margin: 0;
    padding: 0;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(0, 180, 255, 0.18),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(120, 80, 255, 0.18),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #041b2d,
            #071d35,
            #11183f
        );

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* =========================================================
   HEADER
   ========================================================= */

.cert-header {
    width: 100%;

    padding: 18px 35px;

    box-sizing: border-box;

    background: rgba(3, 15, 30, 0.88);

    border-bottom: 1px solid rgba(0, 190, 255, 0.25);

    backdrop-filter: blur(15px);
}


.cert-nav {
    max-width: 1250px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 22px;
}


.cert-nav a {
    color: #d7e7ff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    transition: 0.3s ease;
}


.cert-nav a:hover {
    color: #00c6ff;

    transform: translateY(-2px);
}


.cert-nav .active {
    color: #00c6ff;
}


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

.cert-page .theme-btn {

    width: 48px;
    height: 48px;

    border-radius: 12px;

    border: 1px solid rgba(0, 190, 255, 0.4);

    background: rgba(10, 35, 60, 0.9);

    color: white;

    font-size: 20px;

    cursor: pointer;

    transition: 0.3s ease;
}


.cert-page .theme-btn:hover {

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

    box-shadow:
        0 0 20px rgba(0, 190, 255, 0.5);
}


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

.cert-page .whatsapp-btn {

    padding: 13px 20px;

    border-radius: 12px;

    background: linear-gradient(
        135deg,
        #12c978,
        #0b9f68
    );

    color: white;

    font-size: 14px;

    font-weight: 800;

    box-shadow:
        0 8px 25px rgba(0, 210, 120, 0.25);
}


.cert-page .whatsapp-btn:hover {

    color: white;

    transform: translateY(-3px) scale(1.04);

    box-shadow:
        0 12px 35px rgba(0, 220, 130, 0.45);
}


/* =========================================================
   MAIN
   ========================================================= */

.cert-main {

    max-width: 1200px;

    margin: auto;

    padding:
        55px 35px
        70px;
}


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

.cert-title {

    text-align: center;

    margin-bottom: 45px;
}


.cert-small-title {

    color: #00c6ff;

    font-size: 13px;

    font-weight: 900;

    letter-spacing: 5px;

    margin-bottom: 18px;
}


.cert-title h1 {

    margin: 0;

    font-size: clamp(42px, 5vw, 68px);

    line-height: 1.05;

    font-weight: 900;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #c7eaff,
            #ffffff
        );

    -webkit-background-clip: text;

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


.cert-title p {

    margin:
        22px auto
        0;

    max-width: 850px;

    color: #b9d4ef;

    font-size: 16px;

    line-height: 1.7;
}


/* =========================================================
   CERTIFICATE GALLERY
   ========================================================= */

.certificate-gallery {

    display: grid;

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

    gap: 30px;

    width: 100%;
}


/* =========================================================
   CERTIFICATE BOX
   ========================================================= */

.certificate-box {

    position: relative;

    width: 100%;

    aspect-ratio: 1.55 / 1;

    overflow: hidden;

    background: #ffffff;

    border-radius: 18px;

    border: 2px solid
        rgba(0, 198, 255, 0.55);

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

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


/* =========================================================
   CERTIFICATE IMAGE
   ========================================================= */

.certificate-box img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    background: #ffffff;

    transition:
        transform 0.5s ease;
}


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

.certificate-box:hover {

    transform:
        translateY(-8px)
        scale(1.015);

    border-color: #00c6ff;

    box-shadow:
        0 20px 55px
        rgba(0, 0, 0, 0.5),

        0 0 30px
        rgba(0, 198, 255, 0.35);
}


.certificate-box:hover img {

    transform: scale(1.03);
}


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

.back-area {

    text-align: center;

    margin-top: 45px;
}


.back-button {

    display: inline-block;

    padding: 13px 25px;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #0099ff,
            #7355ff
        );

    color: white;

    text-decoration: none;

    font-weight: 800;

    transition: 0.3s ease;
}


.back-button:hover {

    transform:
        translateY(-3px)
        scale(1.04);

    box-shadow:
        0 10px 30px
        rgba(70, 120, 255, 0.4);
}


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

@media (max-width: 850px) {

    .cert-nav {

        justify-content: center;

        flex-wrap: wrap;

        gap: 13px;
    }


    .cert-main {

        padding:
            40px 18px
            55px;
    }


    .certificate-gallery {

        grid-template-columns: 1fr;

        gap: 22px;
    }


    .certificate-box {

        aspect-ratio: 1.45 / 1;
    }


    .cert-title h1 {

        font-size: 42px;
    }


    .cert-title p {

        font-size: 14px;
    }
}

/* =========================================================
   PREMIUM INFRASTRUCTURE FLOW - FINAL
========================================================= */

.premium-flow-section {
    position: relative;
    overflow: hidden;
}


/* HEADER */

.premium-flow-label {
    color: #b45cff !important;
    letter-spacing: 4px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}


.premium-flow-title {
    max-width: 1050px !important;

    font-size:
        clamp(40px, 5vw, 66px) !important;

    line-height: 1.08 !important;

    margin-bottom: 18px !important;

    letter-spacing: -2px !important;
}


.premium-flow-title span {

    background:
        linear-gradient(
            90deg,
            #39c6ff,
            #4f91ff,
            #9b6cff
        );

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

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


.premium-flow-description {

    max-width: 850px !important;

    font-size: 17px !important;

    line-height: 1.75 !important;

    color: #b7c8dc !important;

    margin-bottom: 34px !important;
}


/* MAIN BOX */

.premium-flow-box {

    width: 100%;

    padding: 20px 30px 28px;

    border-radius: 24px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(20,100,255,.08),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            rgba(6,25,48,.96),
            rgba(4,16,32,.98)
        );

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

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


/* FLOW CARD */

.premium-flow-card {

    position: relative;

    min-height: 105px;

    display: grid;

    grid-template-columns:
        105px 1fr 100px;

    align-items: center;

    gap: 15px;

    padding: 13px 25px;

    border-radius: 16px;

    overflow: hidden;

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


.premium-flow-card:hover {

    transform:
        translateY(-4px)
        scale(1.008);

}


/* ICON */

.premium-flow-icon {

    width: 76px;
    height: 76px;

    display: flex;

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

    border-radius: 18px;

    font-size: 30px;

    position: relative;

    z-index: 2;
}


.premium-flow-icon i {

    filter:
        drop-shadow(
            0 0 8px currentColor
        );
}


/* TEXT */

.premium-flow-content {

    position: relative;

    z-index: 3;

    text-align: center;
}


.premium-flow-content strong {

    display: block;

    margin-bottom: 5px;

    color: #ffffff;

    font-size: 22px;

    font-weight: 850;

    letter-spacing: -.4px;
}


.premium-flow-content span {

    display: block;

    color: #d1dceb;

    font-size: 15px;

    font-weight: 450;

    line-height: 1.5;
}


/* DOTTED DECORATION */

.flow-dots {

    width: 78px;
    height: 58px;

    justify-self: end;

    opacity: .65;

    background-image:
        radial-gradient(
            circle,
            currentColor 2px,
            transparent 2.5px
        );

    background-size:
        13px 13px;
}


/* =========================================================
   CARD COLORS
========================================================= */


/* BLUE */

.flow-blue {

    color: #28a9ff;

    border:
        1px solid #1d9dff;

    background:
        linear-gradient(
            90deg,
            rgba(0,65,150,.45),
            rgba(2,22,48,.93)
        );

    box-shadow:
        inset 0 0 35px rgba(0,110,255,.12);
}


.flow-blue .premium-flow-icon {

    color: #41aaff;

    border:
        1px solid #1ba7ff;

    background:
        linear-gradient(
            145deg,
            rgba(0,100,230,.35),
            rgba(3,25,65,.95)
        );

    box-shadow:
        0 0 20px rgba(0,150,255,.25);
}


.flow-blue:hover {

    box-shadow:
        0 18px 40px rgba(0,0,0,.35),
        0 0 28px rgba(0,150,255,.25);
}


/* GREEN */

.flow-green {

    color: #40ef87;

    border:
        1px solid #27df72;

    background:
        linear-gradient(
            90deg,
            rgba(0,120,70,.34),
            rgba(2,35,30,.94)
        );

    box-shadow:
        inset 0 0 35px rgba(0,200,100,.09);
}


.flow-green .premium-flow-icon {

    color: #58ee88;

    border:
        1px solid #34df78;

    background:
        linear-gradient(
            145deg,
            rgba(0,120,65,.34),
            rgba(2,45,33,.95)
        );

    box-shadow:
        0 0 20px rgba(40,230,120,.22);
}


.flow-green:hover {

    box-shadow:
        0 18px 40px rgba(0,0,0,.35),
        0 0 28px rgba(40,230,120,.22);
}


/* YELLOW */

.flow-yellow {

    color: #ffd633;

    border:
        1px solid #e9c523;

    background:
        linear-gradient(
            90deg,
            rgba(125,95,0,.35),
            rgba(40,35,5,.92)
        );

    box-shadow:
        inset 0 0 35px rgba(255,210,0,.08);
}


.flow-yellow .premium-flow-icon {

    color: #ffd83e;

    border:
        1px solid #f1cd24;

    background:
        linear-gradient(
            145deg,
            rgba(130,100,0,.4),
            rgba(45,37,5,.95)
        );

    box-shadow:
        0 0 20px rgba(255,210,0,.22);
}


.flow-yellow:hover {

    box-shadow:
        0 18px 40px rgba(0,0,0,.35),
        0 0 28px rgba(255,210,0,.20);
}


/* PURPLE */

.flow-purple {

    color: #ab68ff;

    border:
        1px solid #9559f5;

    background:
        linear-gradient(
            90deg,
            rgba(80,30,145,.38),
            rgba(28,18,70,.94)
        );

    box-shadow:
        inset 0 0 35px rgba(140,70,255,.10);
}


.flow-purple .premium-flow-icon {

    color: #b567ff;

    border:
        1px solid #a85eff;

    background:
        linear-gradient(
            145deg,
            rgba(80,35,150,.4),
            rgba(35,19,75,.95)
        );

    box-shadow:
        0 0 20px rgba(160,80,255,.25);
}


.flow-purple:hover {

    box-shadow:
        0 18px 40px rgba(0,0,0,.35),
        0 0 28px rgba(160,80,255,.25);
}


/* CYAN */

.flow-cyan {

    color: #21e0ff;

    border:
        1px solid #19d3ee;

    background:
        linear-gradient(
            90deg,
            rgba(0,100,155,.38),
            rgba(3,35,55,.96)
        );

    box-shadow:
        inset 0 0 35px rgba(0,210,255,.09);
}


.flow-cyan .premium-flow-icon {

    color: #2de0ff;

    border:
        1px solid #20d7f5;

    background:
        linear-gradient(
            145deg,
            rgba(0,110,170,.40),
            rgba(4,35,60,.95)
        );

    box-shadow:
        0 0 20px rgba(0,210,255,.25);
}


.flow-cyan:hover {

    box-shadow:
        0 18px 40px rgba(0,0,0,.35),
        0 0 28px rgba(0,210,255,.25);
}


/* =========================================================
   ROTATING CONNECTOR
========================================================= */

.premium-flow-connector {

    position: relative;

    width: 58px;
    height: 32px;

    margin:
        -2px auto;

    display: flex;

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

    z-index: 20;
}


/* VERTICAL LINE */

.premium-flow-connector::before {

    content: "";

    position: absolute;

    width: 3px;
    height: 100%;

    border-radius: 20px;

    background:
        currentColor;

    box-shadow:
        0 0 12px currentColor;
}


/* ROTATING RING */

.premium-flow-connector span {

    position: relative;

    width: 42px;
    height: 42px;

    border-radius: 50%;

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

    border-top-color:
        currentColor;

    border-right-color:
        currentColor;

    background:
        rgba(5,18,35,.96);

    box-shadow:
        0 0 12px currentColor,
        inset 0 0 12px rgba(255,255,255,.08);

    animation:
        premiumFlowRotate
        1.2s linear infinite;
}


/* CENTER LIGHT */

.premium-flow-connector span::after {

    content: "";

    position: absolute;

    width: 9px;
    height: 9px;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    background:
        #ffffff;

    box-shadow:
        0 0 12px #ffffff,
        0 0 20px currentColor;
}


/* CONNECTOR COLORS */

.connector-blue {
    color: #29aaff;
}

.connector-green {
    color: #42e77d;
}

.connector-yellow {
    color: #ffc629;
}

.connector-purple {
    color: #9e61ff;
}

.connector-pink {
    color: #ff3c87;
}


/* ROTATION */

@keyframes premiumFlowRotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }
}


/* CLOUD PATH */

.cloud-path {

    font-size:
        19px !important;

    letter-spacing:
        -.3px !important;
}


.cloud-path b {

    color: #54dfff;

    padding:
        0 5px;

    font-weight: 900;
}


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

@media (max-width: 760px) {

    .premium-flow-box {

        padding:
            16px 12px
            22px;
    }


    .premium-flow-card {

        grid-template-columns:
            65px 1fr;

        min-height:
            105px;

        padding:
            14px;
    }


    .premium-flow-icon {

        width: 58px;
        height: 58px;

        font-size:
            23px;

        border-radius:
            14px;
    }


    .premium-flow-content {

        text-align:
            left;
    }


    .premium-flow-content strong {

        font-size:
            17px;
    }


    .premium-flow-content span {

        font-size:
            13px;
    }


    .flow-dots {

        display:
            none;
    }


    .cloud-path {

        font-size:
            15px !important;

        line-height:
            1.6;
    }


    .premium-flow-title {

        font-size:
            38px !important;
    }


    .premium-flow-description {

        font-size:
            15px !important;
    }

}





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

.contact-page {

    min-height: 100vh;

    padding:
        150px 20px
        80px;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(57, 168, 255, .08),
            transparent 35%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgba(180, 80, 255, .10),
            transparent 35%
        ),
        #061426;
}


.contact-page-box {

    max-width: 1050px;

    margin: 0 auto;

    text-align: center;

    padding:
        70px 60px;

    border-radius:
        28px;

    background:
        linear-gradient(
            135deg,
            rgba(30, 67, 120, .65),
            rgba(45, 35, 100, .65)
        );

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

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.35);
}


.contact-page-box h1 {

    color: #ffffff;

    font-size:
        clamp(
            36px,
            5vw,
            60px
        );

    line-height:
        1.1;

    margin:
        20px auto
        22px;

    max-width:
        900px;
}


.contact-page-box > p {

    max-width:
        760px;

    margin:
        0 auto
        45px;

    color:
        #b9cae0;

    font-size:
        17px;

    line-height:
        1.7;
}


.contact-page-grid {

    display:
        grid;

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

    gap:
        18px;

    max-width:
        850px;

    margin:
        0 auto;
}


.contact-info-card {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    padding:
        22px;

    border-radius:
        18px;

    text-decoration:
        none;

    text-align:
        left;

    background:
        rgba(7, 25, 50, .70);

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

    transition:
        .3s ease;
}


.contact-info-card:hover {

    transform:
        translateY(-5px);

    border-color:
        #6d9cff;

    box-shadow:
        0 15px 35px
        rgba(30, 100, 255, .18);
}


.contact-info-icon {

    width:
        55px;

    height:
        55px;

    flex:
        0 0 55px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        15px;

    color:
        #ffffff;

    font-size:
        22px;

    background:
        linear-gradient(
            135deg,
            #3c8cff,
            #a85cff
        );

    box-shadow:
        0 0 20px
        rgba(100, 100, 255, .25);
}


.contact-info-card span {

    display:
        block;

    color:
        #9fb5cf;

    font-size:
        12px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        1px;

    margin-bottom:
        5px;
}


.contact-info-card strong {

    color:
        #ffffff;

    font-size:
        15px;

    word-break:
        break-word;
}


.contact-back {

    margin-top:
        40px;
}


@media (max-width: 760px) {

    .contact-page {

        padding-top:
            110px;
    }


    .contact-page-box {

        padding:
            45px 20px;
    }


    .contact-page-grid {

        grid-template-columns:
            1fr;
    }


    .contact-info-card {

        padding:
            18px;
    }

}


/* =========================================================
   HERO BUTTONS - PREMIUM COLOR + BLINK + GLOW
========================================================= */

.hero-buttons .btn {
    position: relative;
    overflow: hidden;

    min-height: 44px;

    padding: 12px 20px;

    border-radius: 10px;

    color: #ffffff !important;

    font-weight: 800;

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

    transition:
        transform .3s ease,
        filter .3s ease,
        box-shadow .3s ease;

    animation:
        heroButtonFloat 3s ease-in-out infinite,
        heroButtonGlow 2s ease-in-out infinite alternate;
}


/* ================= CONTACT - PINK ================= */

.btn-pink {
    background:
        linear-gradient(
            135deg,
            #b934ff,
            #ff3fa4
        ) !important;

    box-shadow:
        0 0 12px rgba(239,63,177,.45),
        0 0 25px rgba(185,52,255,.20);
}


/* ================= LINKEDIN - BLUE ================= */

.btn-linkedin {
    background:
        linear-gradient(
            135deg,
            #0066cc,
            #00a7ff
        ) !important;

    box-shadow:
        0 0 12px rgba(0,167,255,.45),
        0 0 25px rgba(0,102,204,.20);
}


/* ================= PROJECTS - PURPLE ================= */

.btn-projects {
    background:
        linear-gradient(
            135deg,
            #6c4cff,
            #a855f7
        ) !important;

    box-shadow:
        0 0 12px rgba(168,85,247,.45),
        0 0 25px rgba(108,76,255,.20);
}


/* ================= REQUEST CV - ORANGE ================= */

.btn-cv {
    background:
        linear-gradient(
            135deg,
            #ff6a00,
            #ffb020
        ) !important;

    box-shadow:
        0 0 12px rgba(255,145,20,.45),
        0 0 25px rgba(255,106,0,.20);
}


/* ================= DOWNLOAD NOTES - GREEN ================= */

.btn-notes {
    background:
        linear-gradient(
            135deg,
            #00a85a,
            #24d67d
        ) !important;

    box-shadow:
        0 0 12px rgba(36,214,125,.45),
        0 0 25px rgba(0,168,90,.20);
}


/* ================= IT SUPPORT - CYAN ================= */

.btn-support {
    background:
        linear-gradient(
            135deg,
            #00a7c7,
            #2684ff
        ) !important;

    box-shadow:
        0 0 12px rgba(38,132,255,.45),
        0 0 25px rgba(0,167,199,.20);
}


/* =========================================================
   MOVING LIGHT ACROSS BUTTON
========================================================= */

.hero-buttons .btn::before {
    content: "";

    position: absolute;

    top: -40%;
    left: -80%;

    width: 45%;
    height: 180%;

    transform:
        rotate(22deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.75),
            transparent
        );

    filter:
        blur(2px);

    animation:
        heroButtonShine 2.4s linear infinite;

    pointer-events: none;
}


/* Small blinking light */
.hero-buttons .btn::after {
    content: "";

    position: absolute;

    width: 5px;
    height: 5px;

    right: 7px;
    top: 7px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 6px #ffffff,
        0 0 12px #ffffff;

    animation:
        heroButtonBlink .8s ease-in-out infinite alternate;
}


/* Keep text/icon above animation */
.hero-buttons .btn i {
    position: relative;
    z-index: 2;
}

.hero-buttons .btn {
    z-index: 1;
}


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

.hero-buttons .btn:hover {

    transform:
        translateY(-5px)
        scale(1.06);

    filter:
        brightness(1.2)
        saturate(1.15);

    box-shadow:
        0 0 18px rgba(255,255,255,.28),
        0 15px 35px rgba(0,0,0,.30);
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes heroButtonShine {

    0% {
        left: -80%;
    }

    100% {
        left: 140%;
    }
}


@keyframes heroButtonBlink {

    0% {
        opacity: .25;
        transform: scale(.7);
    }

    100% {
        opacity: 1;
        transform: scale(1.4);
    }
}


@keyframes heroButtonGlow {

    0% {
        filter:
            brightness(.95);
    }

    100% {
        filter:
            brightness(1.16);
    }
}


@keyframes heroButtonFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-2px);
    }
}


/* Different animation timing so all buttons don't blink together */

.btn-linkedin {
    animation-delay: .15s !important;
}

.btn-projects {
    animation-delay: .30s !important;
}

.btn-cv {
    animation-delay: .45s !important;
}

.btn-notes {
    animation-delay: .60s !important;
}

.btn-support {
    animation-delay: .75s !important;
}



/* =====================================================
   PREMIUM LIVE VISITOR COUNTER
===================================================== */

.visitor-counter-section {
    padding: 45px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #07111f, #0b1728);
}

.visitor-counter-box {
    width: 100%;
    max-width: 520px;
    padding: 24px 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;

    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(0,212,255,0.35);
    border-radius: 18px;

    box-shadow:
        0 15px 40px rgba(0,0,0,0.35),
        0 0 25px rgba(0,212,255,0.10);

    transition: transform 0.3s ease,
                box-shadow 0.3s ease;
}

.visitor-counter-box:hover {
    transform: translateY(-5px);
    box-shadow:
        0 20px 45px rgba(0,0,0,0.45),
        0 0 30px rgba(0,212,255,0.25);
}

.visitor-counter-icon {
    width: 70px;
    height: 70px;
    min-width: 70px;

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

    border-radius: 50%;

    background: linear-gradient(135deg, #00d4ff, #6366f1);

    font-size: 28px;
    color: white;

    box-shadow: 0 0 25px rgba(0,212,255,0.35);
}

.visitor-counter-info {
    display: flex;
    flex-direction: column;
}

.visitor-counter-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #00d4ff;
}

#visitor-count {
    font-size: 36px;
    line-height: 1.2;
    font-weight: 800;
    color: #ffffff;
    margin: 4px 0;
}

.visitor-counter-text {
    font-size: 13px;
    color: #9ca3af;
}

/* Mobile */

@media (max-width: 600px) {

    .visitor-counter-box {
        padding: 20px;
        gap: 18px;
    }

    .visitor-counter-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;
        font-size: 23px;
    }

    #visitor-count {
        font-size: 30px;
    }
}


/* =========================================================
   TANWEER PORTFOLIO
   PREMIUM WHITE / LIGHT THEME
   ========================================================= */


/* =========================================================
   BODY
   ========================================================= */

body.theme-light {

    --bg: #f7f9fc;
    --bg-dark: #ffffff;
    --card: #ffffff;
    --card-hover: #f2f7ff;

    --text: #102033;
    --muted: #52657a;

    --blue: #087cf0;
    --blue-light: #2496ff;

    --purple: #7950f2;
    --pink: #e83e8c;

    --border: rgba(20, 90, 160, .18);

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f4f8fc
        ) !important;

    color: #102033 !important;
}


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

body.theme-light .navbar {

    background:
        rgba(255,255,255,.95) !important;

    border-bottom:
        1px solid
        rgba(20,90,160,.15) !important;

    box-shadow:
        0 5px 25px
        rgba(25,70,120,.08);
}


/* =========================================================
   NAVIGATION LINKS
   ========================================================= */

body.theme-light nav a {

    color:
        #43566d !important;
}

body.theme-light nav a:hover,
body.theme-light nav a.active {

    color:
        #087cf0 !important;
}


/* =========================================================
   LOGO
   ========================================================= */

body.theme-light .logo {

    color:
        #102033 !important;
}

body.theme-light .logo span {

    color:
        #087cf0 !important;
}


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

body.theme-light .icon-btn {

    background:
        #ffffff !important;

    color:
        #ff9f00 !important;

    border:
        1px solid
        rgba(0,120,230,.25) !important;

    box-shadow:
        0 5px 15px
        rgba(20,70,130,.08) !important;
}


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

body.theme-light .hero {

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7faff 100%
        ) !important;

}

body.theme-light .hero-overlay {

    background:

        radial-gradient(
            circle at 80% 45%,
            rgba(0,125,255,.08),
            transparent 38%
        )

        !important;
}

body.theme-light .hero h1 {

    color:
        #102033 !important;
}

body.theme-light .hero h2 {

    color:
        #7c3aed !important;
}

body.theme-light .hero p {

    color:
        #43566d !important;
}

body.theme-light .hero strong {

    color:
        #102033 !important;
}

body.theme-light .hero-meta span {

    color:
        #52657a !important;
}


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

body.theme-light .section {

    background:
        #ffffff;
}

body.theme-light .section-dark {

    background:

        linear-gradient(
            180deg,
            #f7faff,
            #ffffff
        )

        !important;
}


/* =========================================================
   TITLES
   ========================================================= */

body.theme-light .section-title {

    color:
        #102033 !important;
}

body.theme-light .section-label {

    color:
        #087cf0 !important;
}

body.theme-light .flow-description {

    color:
        #52657a !important;
}


/* =========================================================
   EXPERIENCE SECTION
   ========================================================= */

body.theme-light .experience-section {

    background:

        linear-gradient(
            180deg,
            #ffffff,
            #f5f9fd
        )

        !important;
}

body.theme-light .experience-card {

    background:

        linear-gradient(
            145deg,
            #ffffff,
            #f7faff
        )

        !important;

    border:
        1px solid
        rgba(20,100,190,.18) !important;

    box-shadow:
        0 12px 30px
        rgba(20,70,120,.08) !important;
}

body.theme-light .experience-card h3 {

    color:
        #102033 !important;
}

body.theme-light .experience-summary {

    color:
        #52657a !important;
}

body.theme-light .experience-card ul {

    color:
        #52657a !important;
}


/* =========================================================
   PROJECT CARDS
   ========================================================= */

body.theme-light .project-card {

    background:
        #ffffff !important;

    border:
        1px solid
        rgba(20,100,190,.18) !important;

    color:
        #102033 !important;

    box-shadow:
        0 12px 30px
        rgba(25,75,125,.07);
}

body.theme-light .project-card h3,
body.theme-light .project-card h4 {

    color:
        #102033 !important;
}

body.theme-light .project-card p {

    color:
        #52657a !important;
}


/* =========================================================
   SKILL CARDS
   ========================================================= */

body.theme-light .skill-card {

    background:
        #ffffff !important;

    color:
        #102033 !important;

    border:
        1px solid
        rgba(20,100,190,.18) !important;

    box-shadow:
        0 12px 30px
        rgba(25,75,125,.07);
}

body.theme-light .skill-card h3 {

    color:
        #102033 !important;
}

body.theme-light .skill-card p {

    color:
        #52657a !important;
}


/* =========================================================
   ABOUT / MINI CARDS
   ========================================================= */

body.theme-light .mini-card {

    background:
        #ffffff !important;

    border:
        1px solid
        rgba(20,100,190,.18) !important;

    color:
        #102033 !important;

    box-shadow:
        0 12px 30px
        rgba(25,75,125,.07);
}

body.theme-light .about-text p {

    color:
        #52657a !important;
}


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

body.theme-light .stat-card {

    background:
        #ffffff !important;

    border:
        1px solid
        rgba(20,100,190,.18) !important;

    color:
        #102033 !important;
}

body.theme-light .stat-card h3 {

    color:
        #102033 !important;
}

body.theme-light .stat-card p {

    color:
        #52657a !important;
}


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

body.theme-light .premium-flow-section {

    background:

        linear-gradient(
            180deg,
            #f4f8fd,
            #ffffff
        )

        !important;
}

body.theme-light .premium-flow-box {

    background:
        #ffffff !important;

    border-color:
        rgba(20,100,190,.15) !important;
}

body.theme-light .premium-flow-card {

    background:

        linear-gradient(
            145deg,
            #ffffff,
            #f5f9fd
        )

        !important;

    border-color:
        rgba(20,100,190,.20) !important;

    box-shadow:
        0 10px 25px
        rgba(20,75,130,.07) !important;
}

body.theme-light .premium-flow-content strong {

    color:
        #102033 !important;
}

body.theme-light .premium-flow-content span {

    color:
        #52657a !important;
}


/* =========================================================
   TECHNOLOGY CLOUD
   ========================================================= */

body.theme-light .technology-cloud span {

    background:
        #edf5ff !important;

    color:
        #1e4d78 !important;

    border:
        1px solid
        rgba(0,110,220,.16) !important;
}


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

body.theme-light .contact-section {

    background:
        #ffffff !important;
}

body.theme-light .contact-box {

    background:

        linear-gradient(
            135deg,
            #eef6ff,
            #f7f3ff
        )

        !important;

    border:
        1px solid
        rgba(30,100,190,.18) !important;
}

body.theme-light .contact-box h2 {

    color:
        #102033 !important;
}


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

body.theme-light footer {

    background:
        #f4f8fc !important;

    border-top:
        1px solid
        rgba(20,90,160,.12) !important;

    color:
        #43566d !important;
}

body.theme-light footer strong {

    color:
        #102033 !important;
}

body.theme-light footer a {

    color:
        #087cf0 !important;
}


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

body.theme-light .nav-visitor-counter {

    background:

        linear-gradient(
            135deg,
            #ffffff,
            #eef7ff
        )

        !important;

    border-color:
        #00bce8 !important;

    box-shadow:

        0 0 6px
        rgba(0,190,230,.60),

        0 5px 18px
        rgba(20,80,140,.12)

        !important;
}

body.theme-light
.nav-visitor-counter
.visitor-counter-label {

    color:
        #007da8 !important;

    text-shadow:
        none !important;
}

body.theme-light
.nav-visitor-counter
#visitor-count {

    color:
        #102033 !important;

    text-shadow:
        0 0 2px
        rgba(0,170,220,.40)
        !important;
}


/* =========================================================
   BACK TO TOP
   ========================================================= */

body.theme-light #backTop {

    background:
        #ffffff !important;

    color:
        #087cf0 !important;

    border:
        1px solid
        rgba(0,120,230,.25) !important;
}


/* =========================================================
   SMOOTH DARK ↔ WHITE TRANSITION
   ========================================================= */

body,
.navbar,
.hero,
.section,
.section-dark,
.experience-card,
.project-card,
.skill-card,
.mini-card,
.stat-card,
.premium-flow-card,
footer {

    transition:

        background .45s ease,
        background-color .45s ease,
        color .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;
}

/* =========================================================
   ADMIN BUTTON - PREMIUM SECURE STYLE
========================================================= */

.btn-admin-login {

    position: relative !important;

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

    border:
        2px solid rgba(0, 229, 255, .85) !important;

    background:
        linear-gradient(
            135deg,
            #071c31,
            #123b66,
            #5035a8
        ) !important;

    box-shadow:
        0 0 8px rgba(0,229,255,.35),
        0 0 18px rgba(80,70,255,.22);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        filter .3s ease !important;
}


.btn-admin-login i {

    color: #7ff4ff !important;

    filter:
        drop-shadow(
            0 0 7px
            rgba(0,229,255,.80)
        );
}


.btn-admin-login:hover {

    transform:
        translateY(-4px)
        scale(1.05) !important;

    filter:
        brightness(1.12);

    box-shadow:
        0 0 12px rgba(0,229,255,.75),
        0 0 25px rgba(80,100,255,.45),
        0 0 40px rgba(139,92,246,.30)
        !important;
}

/* =========================================================
   LAST THREE HERO BUTTONS - SAME ROW
========================================================= */

.hero-row-break {
    flex-basis: 100%;
    width: 0;
    height: 0;
}


/* MOBILE - ORIGINAL LAYOUT */

@media (max-width: 520px) {

    .hero-row-break {
        display: none;
    }

}
/* =========================================================
   IT SUPPORT + FEEDBACK + COMMUNITY - SAME DESKTOP ROW
========================================================= */

.feedback-community-pair {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
}


/* DESKTOP - KEEP ALL HERO BUTTONS IN ONE ROW */

@media (min-width: 1280px) {

    .hero-buttons {
        flex-wrap: nowrap !important;
        width: max-content !important;
        max-width: none !important;
    }

    .feedback-community-pair {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
    }

}


/* MOBILE - KEEP ORIGINAL RESPONSIVE LAYOUT */

@media (max-width: 520px) {

    .feedback-community-pair {
        display: contents !important;
    }

}


  
/* =========================================================
   TANWEER AI ASSISTANT - PREMIUM CHAT WINDOW
   START
========================================================= */


/* =========================================================
   AI FLOATING ROBOT BUTTON
========================================================= */

#aiChatToggle {

    cursor: pointer !important;

    background:
        linear-gradient(
            135deg,
            #00e5ff 0%,
            #2979ff 35%,
            #8b5cf6 68%,
            #ec4899 100%
        ) !important;

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

    color:
        #ffffff !important;

    box-shadow:
        0 10px 30px rgba(0,217,255,.38),
        0 0 24px rgba(41,121,255,.35),
        0 0 35px rgba(139,92,246,.20)
        !important;

    animation:
        tanweerAiButtonPulse
        2s
        ease-in-out
        infinite !important;

}


#aiChatToggle:hover {

    transform:
        translateY(-5px)
        scale(1.09)
        !important;

    box-shadow:
        0 16px 38px rgba(0,217,255,.48),
        0 0 32px rgba(139,92,246,.42),
        0 0 48px rgba(236,72,153,.20)
        !important;

}


/* AI ONLINE DOT */

#aiChatToggle::after {

    background:
        #60ff9b !important;

    border:
        3px solid
        #163452 !important;

    box-shadow:
        0 0 6px #60ff9b,
        0 0 14px rgba(96,255,155,.85)
        !important;

}


/* =========================================================
   MAIN CHAT WINDOW
========================================================= */

.ai-chat-window {

    position:
        fixed;

    right:
        26px;

    bottom:
        175px;

    width:
        390px;

    height:
        560px;

    max-height:
        calc(100vh - 205px);

    z-index:
        100000;


    display:
        flex;

    flex-direction:
        column;


    overflow:
        hidden;


    font-family:
        "Inter",
        Arial,
        sans-serif;


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


    border-radius:
        24px;


    background:

        radial-gradient(
            circle at 15% 5%,
            rgba(0,229,255,.16),
            transparent 30%
        ),

        radial-gradient(
            circle at 90% 10%,
            rgba(139,92,246,.20),
            transparent 35%
        ),

        linear-gradient(
            160deg,
            rgba(9,30,52,.985),
            rgba(10,21,42,.985),
            rgba(24,18,54,.985)
        );


    box-shadow:

        0 25px 70px
        rgba(0,0,0,.52),

        0 0 28px
        rgba(0,217,255,.17),

        0 0 55px
        rgba(139,92,246,.12);


    backdrop-filter:
        blur(22px);

    -webkit-backdrop-filter:
        blur(22px);


    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;


    transform:
        translateY(22px)
        scale(.94);


    transform-origin:
        bottom right;


    transition:

        opacity .32s ease,
        visibility .32s ease,
        transform .32s
        cubic-bezier(.2,.8,.2,1);

}


/* =========================================================
   OPEN CHAT
========================================================= */

.ai-chat-window.is-open {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        translateY(0)
        scale(1);

}


/* =========================================================
   CHAT HEADER
========================================================= */

.ai-chat-header {

    position:
        relative;

    flex:
        0 0 auto;


    min-height:
        76px;


    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;


    padding:
        14px 16px;


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


    background:

        linear-gradient(
            135deg,
            rgba(0,157,255,.16),
            rgba(92,80,230,.13),
            rgba(236,72,153,.08)
        );

}


/* HEADER LIGHT LINE */

.ai-chat-header::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -1px;

    width:
        100%;

    height:
        1px;


    background:

        linear-gradient(
            90deg,
            transparent,
            #00e5ff,
            #7c6cff,
            #ec4899,
            transparent
        );


    opacity:
        .65;

}


/* =========================================================
   HEADER LEFT
========================================================= */

.ai-chat-header-left {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

}


/* =========================================================
   AI HEADER AVATAR
========================================================= */

.ai-chat-avatar {

    width:
        46px;

    height:
        46px;

    min-width:
        46px;


    display:
        flex;

    align-items:
        center;

    justify-content:
        center;


    border-radius:
        50%;


    font-size:
        20px;


    color:
        #ffffff;


    background:

        linear-gradient(
            135deg,
            #00d9ff,
            #2979ff,
            #8b5cf6,
            #ec4899
        );


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


    box-shadow:

        0 0 12px
        rgba(0,217,255,.55),

        0 0 22px
        rgba(139,92,246,.25);


    animation:
        tanweerAiAvatarGlow
        2.2s
        ease-in-out
        infinite;

}


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

.ai-chat-title {

    display:
        flex;

    flex-direction:
        column;

    line-height:
        1.25;

}


.ai-chat-title strong {

    color:
        #ffffff;

    font-size:
        14px;

    font-weight:
        800;

    letter-spacing:
        -.1px;

}


.ai-chat-title span {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;


    margin-top:
        4px;


    color:
        #88a8c1;

    font-size:
        10px;

    font-weight:
        600;

}


/* ONLINE GREEN DOT */

.ai-chat-title span i {

    color:
        #55f58a;

    font-size:
        7px;

    filter:
        drop-shadow(
            0 0 5px
            #55f58a
        );

    animation:
        tanweerAiOnlineBlink
        .9s
        ease-in-out
        infinite
        alternate;

}


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

.ai-chat-close {

    width:
        35px;

    height:
        35px;


    display:
        flex;

    align-items:
        center;

    justify-content:
        center;


    border-radius:
        10px;


    border:
        1px solid
        rgba(120,170,220,.20);


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


    color:
        #a9bdd0;


    font-size:
        15px;


    cursor:
        pointer;


    transition:
        .25s ease;

}


.ai-chat-close:hover {

    color:
        #ffffff;

    background:
        rgba(236,72,153,.18);

    border-color:
        rgba(236,72,153,.45);

    transform:
        rotate(90deg);

}


/* =========================================================
   MESSAGES AREA
========================================================= */

.ai-chat-messages {

    flex:
        1 1 auto;


    min-height:
        0;


    overflow-y:
        auto;


    padding:
        18px 15px;


    scroll-behavior:
        smooth;


    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.012),
            rgba(0,0,0,.055)
        );

}


/* SCROLLBAR */

.ai-chat-messages::-webkit-scrollbar {

    width:
        5px;

}


.ai-chat-messages::-webkit-scrollbar-track {

    background:
        transparent;

}


.ai-chat-messages::-webkit-scrollbar-thumb {

    background:

        linear-gradient(
            180deg,
            #00cfff,
            #7c6cff
        );

    border-radius:
        20px;

}


/* =========================================================
   MESSAGE ROW
========================================================= */

.ai-message {

    display:
        flex;

    align-items:
        flex-end;

    gap:
        8px;


    margin-bottom:
        14px;

}


/* =========================================================
   BOT MESSAGE ICON
========================================================= */

.ai-message-icon {

    width:
        28px;

    height:
        28px;

    min-width:
        28px;


    display:
        flex;

    align-items:
        center;

    justify-content:
        center;


    border-radius:
        50%;


    color:
        #ffffff;

    font-size:
        11px;


    background:

        linear-gradient(
            135deg,
            #00cfff,
            #6275ff,
            #a85cff
        );


    box-shadow:
        0 0 10px
        rgba(75,180,255,.25);

}


/* =========================================================
   MESSAGE BUBBLE
========================================================= */

.ai-message-bubble {

    max-width:
        82%;


    padding:
        11px 13px;


    border-radius:
        15px 15px 15px 4px;


    color:
        #dce8f3;


    font-size:
        12px;

    font-weight:
        500;

    line-height:
        1.55;


    background:
        rgba(22,49,76,.88);


    border:
        1px solid
        rgba(80,180,240,.16);


    box-shadow:
        0 7px 18px
        rgba(0,0,0,.14);

}


/* =========================================================
   USER MESSAGE
========================================================= */

.ai-message-user {

    justify-content:
        flex-end;

}


.ai-message-user
.ai-message-icon {

    display:
        none;

}


.ai-message-user
.ai-message-bubble {

    color:
        #ffffff;


    border-radius:
        15px 15px 4px 15px;


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


    background:

        linear-gradient(
            135deg,
            #2478db,
            #655be4,
            #8b55d8
        );


    box-shadow:
        0 8px 18px
        rgba(60,80,220,.20);

}


/* =========================================================
   QUICK QUESTION BUTTONS
========================================================= */

.ai-quick-questions {

    flex:
        0 0 auto;


    display:
        grid;

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


    gap:
        7px;


    padding:
        10px 13px;


    border-top:
        1px solid
        rgba(80,170,230,.10);


    background:
        rgba(6,20,39,.46);

}


.ai-quick-btn {

    min-height:
        34px;


    padding:
        7px 8px;


    border-radius:
        9px;


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


    color:
        #bde5ff;


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


    font-size:
        10px;

    font-weight:
        700;


    cursor:
        pointer;


    background:

        linear-gradient(
            135deg,
            rgba(0,180,255,.07),
            rgba(120,80,255,.09)
        );


    transition:
        .25s ease;

}


.ai-quick-btn:hover {

    color:
        #ffffff;


    border-color:
        rgba(72,220,255,.62);


    background:

        linear-gradient(
            135deg,
            rgba(0,202,255,.18),
            rgba(139,92,246,.20)
        );


    transform:
        translateY(-2px);


    box-shadow:
        0 5px 14px
        rgba(0,180,255,.10);

}


/* =========================================================
   CHAT INPUT AREA
========================================================= */

.ai-chat-form {

    flex:
        0 0 auto;


    display:
        flex;

    align-items:
        center;

    gap:
        8px;


    padding:
        11px 12px 13px;


    border-top:
        1px solid
        rgba(80,180,255,.14);


    background:
        rgba(5,17,34,.92);

}


/* INPUT */

#aiChatInput {

    flex:
        1;


    min-width:
        0;


    height:
        43px;


    padding:
        0 13px;


    border-radius:
        12px;


    outline:
        none;


    border:
        1px solid
        rgba(90,170,230,.22);


    background:
        rgba(17,40,65,.82);


    color:
        #ffffff;


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


    font-size:
        12px;


    transition:
        .25s ease;

}


#aiChatInput::placeholder {

    color:
        #718ba3;

}


#aiChatInput:focus {

    border-color:
        rgba(55,220,255,.62);


    box-shadow:
        0 0 0 3px
        rgba(0,210,255,.07),
        0 0 16px
        rgba(0,190,255,.07);

}


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

#aiChatSend {

    width:
        43px;

    height:
        43px;

    min-width:
        43px;


    border:
        0;


    border-radius:
        12px;


    display:
        flex;

    align-items:
        center;

    justify-content:
        center;


    cursor:
        pointer;


    color:
        #ffffff;


    font-size:
        14px;


    background:

        linear-gradient(
            135deg,
            #00cfff,
            #347dff,
            #8b5cf6
        );


    box-shadow:
        0 7px 18px
        rgba(30,130,255,.25);


    transition:
        .25s ease;

}


#aiChatSend:hover {

    transform:
        translateY(-2px)
        scale(1.04);


    box-shadow:
        0 10px 22px
        rgba(75,100,255,.38);

}


/* =========================================================
   AI TYPING INDICATOR - USED LATER BY JAVASCRIPT
========================================================= */

.ai-typing {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        4px;

}


.ai-typing span {

    width:
        5px;

    height:
        5px;


    border-radius:
        50%;


    background:
        #69dcff;


    animation:
        tanweerAiTyping
        .8s
        ease-in-out
        infinite
        alternate;

}


.ai-typing span:nth-child(2) {

    animation-delay:
        .15s;

}


.ai-typing span:nth-child(3) {

    animation-delay:
        .30s;

}


/* =========================================================
   LIGHT THEME
========================================================= */

body.theme-light
.ai-chat-window {

    background:

        radial-gradient(
            circle at 15% 5%,
            rgba(0,190,255,.12),
            transparent 30%
        ),

        linear-gradient(
            155deg,
            rgba(255,255,255,.985),
            rgba(241,247,255,.985),
            rgba(247,242,255,.985)
        );


    border-color:
        rgba(40,150,220,.32);


    box-shadow:
        0 20px 60px
        rgba(30,70,110,.18);

}


body.theme-light
.ai-chat-header {

    background:

        linear-gradient(
            135deg,
            rgba(0,180,255,.10),
            rgba(120,80,255,.08)
        );

}


body.theme-light
.ai-chat-title strong {

    color:
        #10283d;

}


body.theme-light
.ai-chat-title span {

    color:
        #60758a;

}


body.theme-light
.ai-chat-messages {

    background:
        rgba(246,250,255,.82);

}


body.theme-light
.ai-message-bot
.ai-message-bubble {

    color:
        #314b62;


    background:
        #ffffff;


    border-color:
        rgba(40,120,190,.14);


    box-shadow:
        0 7px 18px
        rgba(40,90,130,.08);

}


body.theme-light
.ai-chat-form {

    background:
        rgba(249,252,255,.96);

}


body.theme-light
#aiChatInput {

    color:
        #193249;


    background:
        #ffffff;


    border-color:
        rgba(50,120,180,.20);

}


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

@media (max-width: 650px) {

    .ai-chat-window {

        right:
            12px;

        bottom:
            150px;


        width:
            calc(100vw - 24px);


        height:
            min(520px, calc(100vh - 185px));


        max-height:
            calc(100vh - 185px);


        border-radius:
            20px;

    }


    .ai-chat-header {

        min-height:
            68px;

        padding:
            11px 13px;

    }


    .ai-chat-avatar {

        width:
            40px;

        height:
            40px;

        min-width:
            40px;

        font-size:
            17px;

    }


    .ai-chat-title strong {

        font-size:
            13px;

    }


    .ai-chat-messages {

        padding:
            14px 11px;

    }


    .ai-quick-questions {

        padding:
            8px 10px;

        gap:
            6px;

    }


    #aiChatInput {

        height:
            41px;

    }


    #aiChatSend {

        width:
            41px;

        height:
            41px;

        min-width:
            41px;

    }

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes tanweerAiButtonPulse {

    0%,
    100% {

        box-shadow:
            0 10px 30px rgba(0,217,255,.34),
            0 0 0 0 rgba(90,100,255,.30);

    }


    50% {

        box-shadow:
            0 12px 34px rgba(0,217,255,.48),
            0 0 0 12px rgba(90,100,255,0);

    }

}


@keyframes tanweerAiAvatarGlow {

    0%,
    100% {

        transform:
            scale(1);

    }


    50% {

        transform:
            scale(1.06);

    }

}


@keyframes tanweerAiOnlineBlink {

    from {

        opacity:
            .45;

        transform:
            scale(.75);

    }


    to {

        opacity:
            1;

        transform:
            scale(1.18);

    }

}


@keyframes tanweerAiTyping {

    from {

        opacity:
            .35;

        transform:
            translateY(1px);

    }


    to {

        opacity:
            1;

        transform:
            translateY(-2px);

    }

}


/* =========================================================
   TANWEER AI ASSISTANT - PREMIUM CHAT WINDOW
   END
========================================================= */

/* =========================================================
   TANWEER AI ASSISTANT
   PROFESSIONAL RICH RESPONSE DESIGN
========================================================= */


/* MAIN RICH RESPONSE */

.ai-rich-response {

    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 9px;

    font-size: 13px;
    line-height: 1.68;

    letter-spacing: .05px;

    color: #dce9f7;

    text-align: start;

    overflow-wrap: anywhere;

    unicode-bidi: plaintext;

}


/* =========================================================
   NORMAL PARAGRAPH
========================================================= */

.ai-response-paragraph {

    margin: 0;

    color: #d3e1ef;

    font-size: 13px;

    line-height: 1.72;

}


/* =========================================================
   PROFESSIONAL HEADINGS
========================================================= */

.ai-response-heading {

    position: relative;

    margin-top: 8px;
    margin-bottom: 2px;

    padding-left: 11px;

    color: #ffffff;

    font-weight: 800;

    line-height: 1.35;

    letter-spacing: .15px;

}


.ai-response-heading::before {

    content: "";

    position: absolute;

    left: 0;
    top: 3px;
    bottom: 3px;

    width: 3px;

    border-radius: 10px;

    background:
        linear-gradient(
            180deg,
            #38dfff,
            #548cff,
            #9b62ff
        );

    box-shadow:
        0 0 10px
        rgba(56, 190, 255, .45);

}


.ai-heading-1 {

    font-size: 16px;

}


.ai-heading-2 {

    font-size: 15px;

}


.ai-heading-3 {

    font-size: 14px;

}


/* =========================================================
   BOLD / IMPORTANT TEXT
========================================================= */

.ai-response-bold {

    color: #ffffff;

    font-weight: 800;

}


/* =========================================================
   INLINE COMMAND / CODE
========================================================= */

.ai-inline-code {

    display: inline;

    padding: 2px 6px;

    margin: 0 2px;

    border-radius: 6px;

    color: #7ee8ff;

    font-family:
        "Courier New",
        monospace;

    font-size: 11.5px;

    font-weight: 700;

    background:
        rgba(0, 190, 255, .09);

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

}


/* =========================================================
   BULLET + NUMBER LIST
========================================================= */

.ai-response-list {

    margin:
        1px 0
        3px 18px;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 6px;

    color: #d4e2ef;

}


.ai-response-list li {

    padding-left: 3px;

    line-height: 1.6;

}


.ai-response-list li::marker {

    color: #43dfff;

    font-weight: 900;

}


.ai-response-numbered li::marker {

    color: #8ea5ff;

    font-weight: 900;

}


/* =========================================================
   COMMAND / CODE BOX
========================================================= */

.ai-code-block {

    width: 100%;

    margin:
        5px 0
        7px;

    overflow: hidden;

    border-radius: 11px;

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

    background:
        linear-gradient(
            145deg,
            rgba(3, 16, 29, .98),
            rgba(5, 25, 43, .98)
        );

    box-shadow:
        0 8px 22px
        rgba(0, 0, 0, .20),
        inset 0 1px 0
        rgba(255, 255, 255, .025);

}


.ai-code-header {

    min-height: 34px;

    padding:
        7px 10px;

    display: flex;

    align-items: center;

    gap: 7px;

    color: #8defff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .65px;

    text-transform: uppercase;

    border-bottom:
        1px solid
        rgba(50, 190, 240, .13);

    background:
        linear-gradient(
            90deg,
            rgba(0, 194, 255, .10),
            rgba(112, 78, 255, .07)
        );

}


.ai-code-header i {

    color: #47dcff;

    font-size: 11px;

}


.ai-code-block pre {

    margin: 0;

    padding: 12px;

    overflow-x: auto;

    white-space: pre-wrap;

    word-break: break-word;

}


.ai-code-block pre code {

    color: #c7f5ff;

    font-family:
        "Courier New",
        Consolas,
        monospace;

    font-size: 11.5px;

    line-height: 1.65;

}


/* =========================================================
   PROFESSIONAL CALLOUT BOX
========================================================= */

.ai-callout {

    position: relative;

    margin:
        4px 0;

    padding:
        10px 11px 10px 13px;

    border-radius: 10px;

    font-size: 12px;

    line-height: 1.6;

}


/* WARNING */

.ai-callout-warning {

    color: #ffe6b1;

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

    border-left:
        3px solid
        #ffb341;

    background:
        linear-gradient(
            90deg,
            rgba(255, 164, 44, .12),
            rgba(255, 164, 44, .035)
        );

}


/* SUCCESS */

.ai-callout-success {

    color: #bfffd7;

    border:
        1px solid
        rgba(52, 211, 153, .24);

    border-left:
        3px solid
        #34d399;

    background:
        linear-gradient(
            90deg,
            rgba(52, 211, 153, .11),
            rgba(52, 211, 153, .025)
        );

}


/* TIP */

.ai-callout-tip {

    color: #cfe8ff;

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

    border-left:
        3px solid
        #4da6ff;

    background:
        linear-gradient(
            90deg,
            rgba(61, 144, 255, .12),
            rgba(139, 92, 246, .035)
        );

}


/* =========================================================
   BOT BUBBLE UPGRADE
========================================================= */

.ai-message-bot
.ai-message-bubble {

    padding:
        13px 14px;

    border-radius:
        4px 16px 16px 16px;

    background:

        linear-gradient(
            145deg,
            rgba(18, 45, 71, .96),
            rgba(14, 36, 62, .96)
        );

    border:
        1px solid
        rgba(75, 183, 245, .20);

    box-shadow:
        0 9px 25px
        rgba(0, 0, 0, .17),
        inset 0 1px 0
        rgba(255, 255, 255, .025);

}


/* =========================================================
   FIRST / LAST ELEMENT CLEANUP
========================================================= */

.ai-rich-response
> :first-child {

    margin-top: 0;

}


.ai-rich-response
> :last-child {

    margin-bottom: 0;

}


/* =========================================================
   LIGHT THEME
========================================================= */

body.theme-light
.ai-rich-response {

    color: #243f56;

}


body.theme-light
.ai-response-paragraph {

    color: #344f66;

}


body.theme-light
.ai-response-heading {

    color: #102b42;

}


body.theme-light
.ai-response-bold {

    color: #102b42;

}


body.theme-light
.ai-inline-code {

    color: #087a9e;

    background:
        rgba(0, 158, 210, .07);

    border-color:
        rgba(0, 145, 195, .18);

}


body.theme-light
.ai-response-list {

    color: #344f66;

}


body.theme-light
.ai-code-block {

    background:
        linear-gradient(
            145deg,
            #f4f9fd,
            #edf5fb
        );

    border-color:
        rgba(28, 137, 190, .22);

}


body.theme-light
.ai-code-header {

    color: #087a9e;

    background:
        rgba(0, 150, 210, .07);

}


body.theme-light
.ai-code-block pre code {

    color: #163b52;

}


body.theme-light
.ai-callout-warning {

    color: #80520e;

    background:
        #fff8e9;

}


body.theme-light
.ai-callout-success {

    color: #17633e;

    background:
        #edfff5;

}


body.theme-light
.ai-callout-tip {

    color: #20577d;

    background:
        #eef7ff;

}


/* =========================================================
   MOBILE RICH RESPONSE
========================================================= */

@media (max-width: 650px) {

    .ai-rich-response {

        font-size:
            12.5px;

        gap:
            8px;

    }


    .ai-message-bot
    .ai-message-bubble {

        max-width:
            88%;

        padding:
            12px;

    }


    .ai-heading-1 {

        font-size:
            15px;

    }


    .ai-heading-2 {

        font-size:
            14px;

    }


    .ai-heading-3 {

        font-size:
            13.5px;

    }
  .ai-code-block pre {

        padding:
            10px;

    }


    .ai-code-block pre code {

        font-size:
            11px;

    }

}