/* =========================
   MOBILE & TABLET FIXES
=========================== */

/* Smooth anchor scroll under fixed navbar */
html{
    scroll-padding-top:80px;
}

/* Prevent any horizontal scroll on small screens */
html,body{
    overflow-x:hidden;
}
.stat-box span br{
    display:none;
}

/* ---------------------
   NAVBAR (mobile menu)
---------------------- */
.navbar-toggler{
    border:none;
    background:transparent;
    color:var(--primary);
    font-size:22px;
    padding:4px 8px;
}
.navbar-toggler:focus{
    box-shadow:none;
}
#menu{
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(12px);
    border-radius:0 0 16px 16px;
    padding:10px 0;
    margin-top:10px;
    border:1px solid var(--border);
}
html[data-theme="dark"] #menu{
    background:rgba(15,23,42,.95);
}
.navbar-nav .nav-link{
    margin-left:0;
    padding:12px 20px;
    text-align:center;
}
.navbar-nav .btn{
    margin:10px 20px 0;
    display:block;
    width:calc(100% - 40px);
}

/* ---------------------
   HERO
---------------------- */
#hero{
    position:relative;
    overflow:hidden;
    padding-top:100px;
}

@media(max-width:991.98px){
    #hero{
        padding-top:90px;
        padding-bottom:60px;
    }
    #hero .row{
        min-height:auto !important;
        align-items:flex-start !important;
    }
    .hero-title{
        font-size:46px;
    }
    .hero-role{
        font-size:26px;
        min-height:auto;
    }
    .hero-text{
        font-size:17px;
        max-width:100%;
    }
    .hero-text br{
        display:none;
    }
    .hero-buttons{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:14px;
    }
    .hero-buttons .btn{
        width:100%;
        padding:12px 22px;
        font-size:14px;
    }
    .hero-stats{
        display:grid;
        grid-template-columns:1fr;
        gap:12px;
        justify-items:center;
    }
    .stat-box{
        width:100%;
        padding:16px;
        min-width:0;
        max-width:none;
    }
    .stat-box h3{
        font-size:26px;
    }
    .stat-box span{
        font-size:13px;
    }
}

@media(max-width:767.98px){
    #hero{
        padding-top:90px;
        padding-bottom:50px;
    }
    .hero-title{
        font-size:38px;
    }
    .hero-role{
        font-size:22px;
    }
    .hero-badge{
        font-size:12px;
        padding:8px 16px;
    }
    .hero-text{
        font-size:16px;
    }
    .hero-buttons{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:14px;
    }
    .hero-buttons .btn{
        width:100%;
        max-width:none;
        padding:12px 18px;
        font-size:14px;
    }
    .hero-stats{
        display:grid;
        grid-template-columns:1fr;
        justify-items:center;
        gap:10px;
    }
    .stat-box{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:8px;
        width:100%;
        padding:12px 20px;
        border-radius:50px;
        box-shadow:0 5px 12px rgba(0,0,0,.07);
        min-width:0;
        max-width:none;
    }
    .stat-box h3{
        margin:0;
        font-size:22px;
        white-space:nowrap;
    }
    .stat-box span{
        font-size:12px;
        white-space:nowrap;
    }
    .stat-box span br{
        display:inline;
    }
}

@media(max-width:575.98px){
    .hero-title{
        font-size:28px;
    }
    .hero-role{
        font-size:18px;
    }
    .hero-badge{
        font-size:10px;
        padding:6px 12px;
    }
    .hero-text{
        font-size:14px;
    }
    .hero-buttons{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;
    }
    .hero-buttons .btn{
        width:100%;
        padding:10px 14px;
        font-size:13px;
    }
    .hero-stats{
        display:grid;
        grid-template-columns:1fr;
        justify-items:center;
        gap:8px;
        margin-top:35px;
    }
    .stat-box{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:6px;
        width:100%;
        padding:10px 18px;
        border-radius:50px;
        box-shadow:0 3px 8px rgba(0,0,0,.05);
    }
    .stat-box h3{
        margin:0;
        font-size:18px;
        white-space:nowrap;
    }
    .stat-box span{
        font-size:10px;
        white-space:nowrap;
    }
}

@media(max-width:380px){
    .hero-buttons{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;
    }
    .hero-buttons .btn{
        width:100%;
        padding:10px 10px;
        font-size:12px;
    }
    .hero-stats{
        display:grid;
        grid-template-columns:1fr;
        justify-items:center;
        gap:6px;
    }
    .stat-box{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:5px;
        width:100%;
        padding:8px 16px;
        border-radius:50px;
        box-shadow:0 2px 6px rgba(0,0,0,.05);
    }
    .stat-box h3{
        margin:0;
        font-size:16px;
        white-space:nowrap;
    }
    .stat-box span{
        font-size:10px;
        white-space:nowrap;
    }
}

/* ---------------------
   ORBIT (tablet/mobile)
---------------------- */
@media(max-width:991.98px){
    .architecture-orbit{
        width:100%;
        height:auto;
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:14px;
        margin-top:40px;
        transform:none;
    }
    .orbit-ring,
    .rotate-ring,
    .center-glow{
        display:none;
    }
    .center-profile{
        position:relative;
        left:auto;
        top:auto;
        transform:none;
        width:100%;
        text-align:center;
        margin-bottom:25px;
        animation:none;
    }
    .center-profile img{
        width:300px;
        height:300px;
        margin:0 auto;
        animation:none;
        object-position:50% 30%;
    }
    .orbit-card{
        position:relative;
        left:auto;
        top:auto;
        transform:none !important;
        flex:0 1 calc(50% - 14px);
        width:100%;
        min-width:130px;
        max-width:170px;
        animation:none;
        padding:14px;
    }
    .orbit-card i{
        font-size:22px;
    }
    .orbit-card span{
        font-size:13px;
    }
}

@media(max-width:575.98px){
    .center-profile img{
        width:190px;
        height:190px;
    }
    .orbit-card{
        flex:0 1 calc(50% - 8px);
        min-width:110px;
        max-width:150px;
        padding:12px;
    }
    .orbit-card span{
        font-size:12px;
    }
    .orbit-card i{
        font-size:20px;
    }
}

/* ---------------------
   SECTION TITLES
---------------------- */
@media(max-width:991.98px){
    .section-title{
        font-size:34px;
    }
    .section-subtitle{
        font-size:15px;
    }
}

@media(max-width:767.98px){
    .section-title{
        font-size:28px;
    }
    .section-subtitle{
        font-size:14px;
    }
    .section-badge{
        font-size:11px;
        padding:8px 16px;
    }
}

@media(max-width:575.98px){
    .section-title{
        font-size:24px;
    }
    .section-subtitle{
        font-size:13px;
    }
}

/* ---------------------
   SNAPSHOT
---------------------- */
@media(max-width:767.98px){
    .snapshot-card{
        text-align:center;
        padding:28px 22px;
    }
    .snapshot-icon{
        margin:0 auto 18px;
    }
    .career-strip{
        flex-direction:column;
        gap:14px;
        padding:22px;
    }
    .career-strip i{
        transform:rotate(90deg);
    }
    .career-item{
        text-align:center;
    }
}

/* ---------------------
   ABOUT
---------------------- */
@media(max-width:991.98px){
    .about-content{
        padding-right:0;
        margin-bottom:40px;
        text-align:center;
    }
    .about-highlights{
        grid-template-columns:1fr;
    }
    .strength-card{
        padding:28px;
    }
}

@media(max-width:767.98px){
    .about-block h5{
        font-size:18px;
    }
    .about-block p{
        font-size:15px;
    }
    .highlight-box{
        padding:14px;
        gap:12px;
    }
    .strength-card h4{
        font-size:20px;
    }
    .strength-item{
        padding:12px 14px;
        font-size:14px;
    }
    .strength-item i{
        width:38px;
        height:38px;
        font-size:16px;
    }
}

/* ---------------------
   JOURNEY
---------------------- */
@media(max-width:767.98px){
    .journey-header{
        padding:20px;
    }
    .journey-header h4{
        font-size:18px;
    }
    .journey-header>i:first-child{
        font-size:22px;
    }
    .journey-body{
        padding:0 20px;
    }
    .journey-card.active .journey-body{
        padding:0 20px 20px;
    }
    .journey-body p,
    .journey-body ul{
        font-size:14px;
    }
}

/* ---------------------
   PROJECTS
---------------------- */
.logo-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-bottom:18px;
}
.tech-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    text-align:center;
    font-size:12px;
}
.tech-item img{
    max-width:40px;
    height:30px;
    object-fit:contain;
}
.role-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
}

@media(max-width:767.98px){
    .logo-grid{
        grid-template-columns:repeat(2,1fr);
    }
    .project-card{
        padding:22px;
        min-height:auto !important;
    }
    .project-header{
        gap:14px;
        margin-bottom:18px;
    }
    .project-icon{
        width:54px;
        height:54px;
        font-size:22px;
    }
    .project-title h4{
        font-size:18px;
    }
    .project-category{
        font-size:11px;
    }
    .project-tags span,
    .skill-tag{
        font-size:11px;
        padding:5px 10px;
    }
}

@media(max-width:575.98px){
    .project-card{
        padding:20px;
    }
    .project-icon{
        width:50px;
        height:50px;
        font-size:20px;
    }
    .project-title h4{
        font-size:17px;
    }
    .logo-grid{
        gap:10px;
    }
    .tech-item{
        font-size:11px;
    }
    .tech-item img{
        max-width:34px;
        height:26px;
    }
}

/* ---------------------
   SKILLS MARQUEE
---------------------- */
@media(max-width:767.98px){
    .skills-track{
        animation-duration:22s;
        gap:10px;
    }
    .skill-chip{
        padding:9px 16px;
        font-size:12px;
    }
    .skill-chip i{
        font-size:14px;
    }
}

/* ---------------------
   EDUCATION
---------------------- */
@media(max-width:991.98px){
    .edu-card{
        padding:24px;
    }
}

@media(max-width:767.98px){
    .edu-block{
        flex-direction:column;
        gap:16px;
    }
    .edu-icon{
        width:52px;
        height:52px;
        font-size:20px;
    }
    .edu-block h4,
    .right-section h4{
        font-size:18px;
    }
    .edu-block h5{
        font-size:16px;
    }
    .learning-tags span{
        font-size:12px;
        padding:6px 12px;
    }
    .cert-list li{
        font-size:14px;
    }
}

/* ---------------------
   FOOTER / CONTACT
---------------------- */
@media(max-width:767.98px){
    .contact-card{
        padding:35px 20px;
    }
    .contact-card .section-title{
        font-size:24px;
    }
    .contact-card .section-subtitle{
        font-size:14px;
    }
    .social-links{
        gap:14px;
    }
    .social-links a{
        width:50px;
        height:50px;
        font-size:20px;
    }
    .footer-links{
        gap:14px;
    }
    .footer h5{
        font-size:24px;
    }
    .footer p{
        font-size:14px;
    }
    .footer small{
        font-size:12px;
    }
}

/* ---------------------
   BACK TO TOP
---------------------- */
@media(max-width:767.98px){
    #backToTop{
        width:44px;
        height:44px;
        right:16px;
        bottom:16px;
        font-size:15px;
    }
}

/* ---------------------
   GLOBAL SPACING
---------------------- */
@media(max-width:767.98px){
    section{
        padding:50px 0;
    }
    .container{
        padding-left:18px;
        padding-right:18px;
    }
}

@media(max-width:575.98px){
    .container{
        padding-left:14px;
        padding-right:14px;
    }
}

.role-tags span{
    display:inline-block;
    padding:4px 10px;
    background:rgba(37,99,235,.08);
    color:var(--primary);
    border-radius:30px;
    font-size:12px;
    font-weight:600;
}

/* ---------------------
   EXTRA COMPACT SMALL SCREENS
---------------------- */
@media(max-width:575.98px){
    /* hero */
    .hero-title{ font-size:28px; }
    .hero-role{ font-size:18px; }
    .hero-badge{ font-size:10px; padding:6px 12px; }
    .hero-text{ font-size:14px; }
    .hero-buttons{ gap:10px; }
    .hero-buttons .btn{ padding:10px 20px; font-size:13px; }
    .hero-stats{ gap:10px; margin-top:35px; }
    .stat-box{ width:100%; padding:12px 18px; max-width:none; }
    .stat-box h3{ font-size:22px; }
    .stat-box span{ font-size:12px; }

    /* orbit */
    .center-profile img{ width:150px; height:150px; }
    .center-profile{ margin-bottom:18px; }
    .architecture-orbit{ gap:10px; margin-top:25px; }
    .orbit-card{ padding:8px; flex:0 1 calc(50% - 8px); max-width:130px; border-radius:12px; }
    .orbit-card i{ font-size:16px; margin-bottom:5px; }
    .orbit-card span{ font-size:10px; }
    .pulse-dot{ width:6px; height:6px; margin:6px auto 0; }

    /* sections */
    section{ padding:35px 0; }
    .section-title{ font-size:22px; }
    .section-subtitle{ font-size:13px; }
    .section-badge{ font-size:10px; padding:7px 14px; }

    /* snapshot */
    .snapshot-card{ text-align:center; padding:14px 10px; }
    .snapshot-icon{ width:40px; height:40px; border-radius:10px; margin:0 auto 8px; }
    .snapshot-icon i{ font-size:18px; }
    .snapshot-card h4{ font-size:13px; margin-bottom:5px; }
    .snapshot-card p{ font-size:11px; line-height:1.45; }
    .career-strip{ padding:18px; gap:10px; }
    .career-item{ padding:10px 14px; font-size:13px; }

    /* about */
    #about .row{ --bs-gutter-y:12px !important; }
    .about-block h5{ font-size:17px; }
    .about-block p{ font-size:14px; margin-bottom:15px; }
    .about-highlights{ grid-template-columns:1fr; gap:10px; margin-top:20px; }
    .highlight-box{ padding:10px 12px; gap:10px; }
    .highlight-box i{ width:36px; height:36px; font-size:16px; }
    .highlight-box span{ font-size:12px; line-height:1.4; }
    .strength-card{ padding:22px; }
    .strength-card h4{ font-size:18px; margin-bottom:20px; }
    .strength-item{ padding:10px 12px; gap:12px; }
    .strength-item i{ width:36px; height:36px; font-size:16px; }
    .strength-item span{ font-size:13px; }

    /* journey */
    .journey-header{ padding:16px; gap:12px; }
    .journey-header h4{ font-size:16px; }
    .journey-header>i:first-child{ font-size:20px; }
    .journey-body{ padding:0 16px; }
    .journey-card.active .journey-body{ padding:0 16px 16px; }
    .journey-body p, .journey-body ul{ font-size:13px; }

    /* projects */
    .logo-grid{ gap:8px; }
    .tech-item{ font-size:11px; }
    .tech-item img{ max-width:30px; height:24px; }
    .project-card{ padding:18px; }
    .project-header{ gap:12px; margin-bottom:16px; }
    .project-icon{ width:48px; height:48px; font-size:22px; border-radius:14px; }
    .project-title h4{ font-size:17px; }
    .project-category{ font-size:10px; }
    .project-tags span, .skill-tag{ font-size:10px; padding:4px 8px; }

    /* skills */
    .skills-track{ gap:8px; }
    .skill-chip{ padding:8px 14px; font-size:11px; }
    .skill-chip i{ font-size:13px; }

    /* education */
    .edu-card{ padding:20px; }
    .edu-block{ gap:14px; }
    .edu-icon{ width:46px; height:46px; font-size:20px; }
    .edu-block h4, .right-section h4{ font-size:17px; }
    .edu-block h5{ font-size:15px; }
    .edu-block p{ font-size:14px; }
    .edu-year{ font-size:12px; }
    .learning-tags{ gap:8px; }
    .learning-tags span{ font-size:11px; padding:5px 10px; }
    .cert-list li{ font-size:13px; }

    /* footer */
    .contact-card{ padding:28px 16px; }
    .contact-card .section-title{ font-size:22px; }
    .contact-card .section-subtitle{ font-size:13px; }
    .social-links{ gap:12px; }
    .social-links a{ width:44px; height:44px; font-size:18px; }
    .footer h5{ font-size:22px; }
    .footer p{ font-size:13px; }
    .footer-links{ gap:12px; font-size:13px; }
    .footer small{ font-size:11px; }

    /* back to top */
    #backToTop{ width:40px; height:40px; right:14px; bottom:14px; font-size:14px; }
}

@media(max-width:380px){
    .hero-buttons .btn{ width:100%; max-width:none; }
    .stat-box{ width:100%; max-width:none; }
}

/* ---------------------
   MOBILE ICON-ONLY ORBIT
---------------------- */
@media(max-width:767.98px){
    .hero-right{
        justify-content:center;
        align-items:center;
    }
    .architecture-orbit{
        display:block;
        position:relative;
        width:320px;
        height:320px;
        margin:20px auto 0;
    }
    .orbit-ring{
        display:block;
        width:240px;
        height:240px;
    }
    .rotate-ring{
        display:block;
        width:260px;
        height:260px;
        border:2px dashed rgba(37,99,235,.35);
        animation:rotateRing 15s linear infinite;
    }
    .center-glow{
        display:block;
        width:180px;
        height:180px;
    }
    .center-profile{
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        width:auto;
        margin:0;
        animation:none;
    }
    .center-profile img{
        width:160px;
        height:160px;
        border:6px solid var(--surface);
        animation:none;
    }
    .orbit-card{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        position:absolute;
        left:50%;
        top:50%;
        width:60px;
        min-width:0;
        padding:6px 4px;
        flex:none;
        max-width:none;
        border-radius:12px;
        background:rgba(255,255,255,.92);
        backdrop-filter:blur(10px);
        animation:none;
    }
    html[data-theme="dark"] .orbit-card{
        background:rgba(30,41,59,.90);
    }
    .orbit-card span{
        display:none;
    }
    .orbit-card .pulse-dot{
        display:block;
        width:6px;
        height:6px;
        margin:6px auto 0;
    }
    .orbit-card i{
        font-size:16px;
        margin:0 0 4px;
    }
    .cloud{ transform:translate(-50%,-50%) rotate(0deg) translateY(-120px) rotate(0deg) !important; }
    .security{ transform:translate(-50%,-50%) rotate(45deg) translateY(-120px) rotate(-45deg) !important; }
    .api{ transform:translate(-50%,-50%) rotate(90deg) translateY(-120px) rotate(-90deg) !important; }
    .scalability{ transform:translate(-50%,-50%) rotate(135deg) translateY(-120px) rotate(-135deg) !important; }
    .payments{ transform:translate(-50%,-50%) rotate(180deg) translateY(-120px) rotate(-180deg) !important; }
    .integration{ transform:translate(-50%,-50%) rotate(225deg) translateY(-120px) rotate(-225deg) !important; }
    .docker{ transform:translate(-50%,-50%) rotate(270deg) translateY(-120px) rotate(-270deg) !important; }
    .database{ transform:translate(-50%,-50%) rotate(315deg) translateY(-120px) rotate(-315deg) !important; }
}