/* ===========================================
   responsive.css — Responsive Overrides
   All @media queries consolidated here
   =========================================== */

@media (max-width: 768px) {
    .about-stats-new {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .about-headline {
        font-size: 2rem;
    }
    
    .stat-card {
        padding: 40px 25px;
    }
    
    .stat-card h4 {
        font-size: 2.5rem;
    }
}
@media (max-width: 992px) {
    .hero-container,
    .resume-grid,
    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero-image {
        order: -1;
    }

    .img-box img {
        width: 250px;
        height: 250px;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    .about-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .nav-menu {
        gap: 20px;
    }

    .nav-link {
        font-size: 0.9rem;
    }
}
@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
    }

    .nav-center {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(2, 6, 23, 0.98);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
    }

    .nav-center.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-menu {
        flex-direction: column;
        padding: 20px;
        gap: 15px;
        width: 100%;
    }

    .nav-menu li {
        width: 100%;
    }

    .nav-link {
        display: block;
        padding: 10px;
        text-align: center;
    }

    .theme-selector {
        order: -1;
    }

    .section {
        padding: 60px 0;
    }

    .section-title h2 {
        font-size: 2rem;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .typing-text {
        font-size: 1.3rem;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .about-stats {
        grid-template-columns: 1fr;
    }

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

    #topBtn {
        bottom: 100px;
        right: 20px;
    }

    .message-btn-circle {
        bottom: 170px;
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    .message-popup {
        bottom: 230px;
        right: 20px;
        left: 20px;
        width: auto;
    }

    .about-stats-new {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .resume-grid-new {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .services-grid-new {
        grid-template-columns: 1fr;
    }

    .certifications-modal-content {
        padding: 30px 20px;
    }

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

    .cert-viewer-close {
        top: -40px;
        right: 10px;
        width: 40px;
        height: 40px;
    }

    .footer-content {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
}
@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .img-box img {
        width: 200px;
        height: 200px;
    }

    .hero-content h1 {
        font-size: 1.8rem;
    }

    .stat-item h4 {
        font-size: 2rem;
    }

    .theme-selector {
        gap: 3px;
        padding: 3px;
    }

    .theme-btn {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
}
@media (max-width: 768px) {
    .skills-grid-modern {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 25px;
    }
    
    .circle-container-modern {
        width: 100px;
        height: 100px;
    }
    
    .circle-container-modern svg {
        width: 100px;
        height: 100px;
    }
    
    .skill-icon-modern {
        font-size: 2rem;
    }
    
    .skill-name-modern {
        font-size: 1rem;
    }
    
    .skill-category-title {
        font-size: 1.2rem;
        margin: 40px 0 20px;
    }
}
@media (max-width: 480px) {
    .skills-grid-modern {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .skill-card-modern {
        padding: 25px;
    }
}
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
@media (min-width: 769px) {
    .certificate-card:hover .certificate-overlay {
        opacity: 1;
        visibility: visible;
    }
}
@media (max-width: 768px) {
    
    /* Make overlay always visible on mobile */
    .certificate-overlay {
        opacity: 1;
        visibility: visible;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.95), transparent);
        align-items: flex-end;
        padding-bottom: 15px;
    }
    
    /* Remove wave effect on mobile */
    .certificate-overlay::before {
        display: none;
    }
    
    .certificate-actions {
        width: 100%;
        justify-content: center;
        padding: 0 15px;
    }
    
    .cert-btn {
        padding: 10px 20px;
        font-size: 0.85rem;
        flex: 1;
    }
    
    .certificates-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .certifications-modal-content {
        padding: 30px 20px;
        border-radius: 20px;
    }
    
    .certifications-header h2 {
        font-size: 1.8rem;
        flex-direction: column;
    }
    
    .certifications-header p {
        font-size: 0.95rem;
    }
    
    .cert-viewer-close {
        width: 50px;
        height: 50px;
        top: 20px;
        right: 20px;
        font-size: 1.4rem;
    }
    
    .certificate-image {
        height: 180px;
    }
    
    .btn-certifications {
        padding: 15px 35px;
        font-size: 1rem;
    }
    
    .btn-certifications .cert-count {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }
}
@media (max-width: 992px) and (min-width: 769px) {
    .certificates-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    body.light-mode .certificate-overlay {
        background: linear-gradient(to top, rgba(255, 255, 255, 0.95), transparent);
    }
}
@media (max-width: 768px) {
    .btn-certifications {
        padding: 20px 35px;
        gap: 15px;
        flex-direction: column;
        text-align: center;
    }
    
    .btn-icon-wrapper {
        width: 45px;
        height: 45px;
    }
    
    .btn-icon-wrapper i {
        font-size: 1.4rem;
    }
    
    .btn-content {
        align-items: center;
    }
    
    .btn-title {
        font-size: 1.1rem;
    }
    
    .btn-subtitle {
        font-size: 0.75rem;
    }
    
    .btn-certifications .cert-count {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
        border-width: 3px;
        top: -8px;
        right: -8px;
    }
}
@media (max-width: 480px) {
    .btn-certifications {
        width: 100%;
        padding: 18px 25px;
    }
    
    .btn-title {
        font-size: 1rem;
    }
    
    .btn-subtitle {
        font-size: 0.7rem;
    }
}
@media (max-width: 768px) {
    .btn-certifications .cert-count {
        position: absolute;
        top: 10px;
        right: 10px;
        transform: none;
    }
}
@media (max-width: 768px) {
    .social-icons-hero a {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
    
    .stat-card {
        padding: 40px 25px;
    }
    
    .stat-card h4 {
        font-size: 3rem;
    }
    
    .service-icon {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }
    
    .message-btn-circle {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
}
@media (max-width: 480px) {
    .speed-dial {
        bottom: 20px;
        right: 20px;
    }
    .sd-trigger {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
    .sd-btn {
        width: 44px;
        height: 44px;
        font-size: 1.15rem;
    }
}
@media (max-width: 768px) {
    .skills-grid-modern {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .skill-card-modern {
        padding: 22px 14px 18px;
        gap: 12px;
        border-radius: 16px;
    }

    .circle-container-modern {
        --circle-size: 96px;
    }

    .skill-percentage {
        font-size: 0.78rem;
        margin-top: -16px;
    }

    .skill-icon-modern {
        font-size: 1.5rem;
        margin-top: 10px;
    }

    .skill-card-modern:hover .skill-icon-modern {
        margin-top: 10px;
    }

    .skill-name-modern {
        font-size: 0.9rem;
    }

    .skill-badge {
        font-size: 0.65rem;
        padding: 3px 10px;
        letter-spacing: 0.5px;
    }

    .skill-category-title {
        font-size: 1.1rem;
        margin: 36px 0 18px;
    }
}
@media (max-width: 480px) {
    .skills-grid-modern {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .skill-card-modern {
        padding: 18px 10px 14px;
        gap: 10px;
        border-radius: 14px;
    }

    .circle-container-modern {
        --circle-size: 80px;
    }

    .skill-percentage {
        font-size: 0.68rem;
        margin-top: -14px;
    }

    .skill-icon-modern {
        font-size: 1.25rem;
        margin-top: 8px;
    }

    .skill-card-modern:hover .skill-icon-modern {
        margin-top: 8px;
    }

    .skill-name-modern {
        font-size: 0.82rem;
    }

    .skill-badge {
        font-size: 0.58rem;
        padding: 3px 8px;
        letter-spacing: 0.3px;
    }

    .skill-category-title {
        font-size: 1rem;
        margin: 28px 0 14px;
        padding-left: 12px;
    }
}
@media (max-width: 360px) {
    .skills-grid-modern {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .skill-card-modern {
        padding: 22px 20px;
    }

    .circle-container-modern {
        --circle-size: 100px;
    }

    .skill-percentage {
        font-size: 0.82rem;
        margin-top: -16px;
    }

    .skill-icon-modern {
        font-size: 1.6rem;
        margin-top: 10px;
    }

    .skill-card-modern:hover .skill-icon-modern {
        margin-top: 10px;
    }
}
@media (max-width: 900px) {
    .skills-grid-modern {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 18px;
    }
    .circle-container-modern { --sz: 104px; }
}
@media (max-width: 768px) {
    .skills-grid-modern {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .skill-card-modern {
        padding: 20px 12px 16px;
        gap: 12px;
        border-radius: 16px;
    }

    .circle-container-modern { --sz: 88px; }

    .skill-category-title {
        font-size: 1.1rem;
        margin: 36px 0 16px;
    }
}
@media (max-width: 480px) {
    .skills-grid-modern {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .skill-card-modern {
        padding: 16px 10px 14px;
        gap: 10px;
        border-radius: 14px;
    }

    .circle-container-modern { --sz: 76px; }

    .skill-name-modern { font-size: 0.8rem; }

    .skill-badge {
        font-size: 0.58rem;
        padding: 3px 8px;
    }

    .skill-category-title {
        font-size: 1rem;
        margin: 28px 0 14px;
        padding-left: 12px;
    }
}
@media (max-width: 360px) {
    .skills-grid-modern {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .skill-card-modern {
        padding: 22px 20px 18px;
        max-width: 280px;
        margin: 0 auto;
    }

    .circle-container-modern { --sz: 100px; }
}
@media (max-width: 768px) {
    .resume-grid-new { grid-template-columns: 1fr; gap: 30px; }
    .resume-section  { overflow: visible; } /* no need to clip on single col */
}
@media (max-width: 900px) {
    .skills-grid-modern {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 18px;
    }
    .skills-grid-modern:has(.skill-card-modern:first-child:nth-last-child(4)) {
        grid-template-columns: repeat(2, 1fr);
    }
    .skills-grid-modern:has(.skill-card-modern:first-child:nth-last-child(2)) {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .skills-grid-modern {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px;
    }
}
@media (max-width: 480px) {
    .skills-grid-modern {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }
}
@media (max-width: 360px) {
    .skills-grid-modern {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }
}
@media (max-width: 768px) {
    .skill-percentage {
        top: -22px !important;
        font-size: 0.82rem !important;
    }
    .circle-container-modern {
        margin-top: 24px !important;
    }
    .skill-card-modern {
        padding-top: 30px !important;
    }
}
@media (max-width: 480px) {
    .skill-percentage {
        top: -20px !important;
        font-size: 0.76rem !important;
    }
    .circle-container-modern {
        margin-top: 22px !important;
    }
    .skill-card-modern {
        padding-top: 28px !important;
    }
}
@media (max-width: 768px) {
    .skill-icon-modern {
        margin-top: 0 !important;
    }
    .skill-card-modern:hover .skill-icon-modern {
        margin-top: 0 !important;
    }
}
@media (max-width: 480px) {
    .skill-icon-modern {
        margin-top: 0 !important;
    }
    .skill-card-modern:hover .skill-icon-modern {
        margin-top: 0 !important;
    }
}
@media (max-width: 480px) {
    .floating-msg-btn    { bottom: 20px; right: 18px; }
    .floating-msg-main   { width: 48px; height: 48px; }
    .floating-msg-option-icon { width: 40px; height: 40px; }
}
@media (max-width: 1200px) {
    .skills-grid-modern {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 24px;
    }

    .nav-menu {
        gap: 16px;
    }

    .nav-link {
        font-size: 0.85rem;
    }

    .hero-content h1 {
        font-size: 3rem;
    }

    .contact-wrapper {
        gap: 30px;
    }
}
@media (max-width: 992px) {

    /* Navbar collapse */
    .nav-center {
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        height: calc(100vh - 70px);
        background: rgba(2, 6, 23, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        transform: translateX(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.35s ease;
        overflow-y: auto;
        display: flex;
        align-items: flex-start;
        padding-top: 20px;
    }

    .nav-center.active {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-menu {
        flex-direction: column;
        padding: 20px 30px;
        gap: 8px;
        width: 100%;
    }

    .nav-menu li {
        width: 100%;
    }

    .nav-link {
        display: block;
        padding: 14px 20px;
        font-size: 1rem;
        border-radius: 10px;
        transition: all 0.3s ease;
    }

    .nav-link:hover,
    .nav-link.active {
        background: rgba(59, 130, 246, 0.1);
        padding-left: 28px;
    }

    .menu-toggle {
        display: flex;
    }

    /* Hero: stack vertically */
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .hero-image {
        order: -1;
    }

    .hero-buttons {
        justify-content: center;
    }

    .social-icons-hero {
        justify-content: center;
    }

    .img-box img {
        width: 220px;
        height: 220px;
    }

    /* About stats: 3 column stays but smaller padding */
    .about-stats-new {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    /* Skills: fewer columns */
    .skills-grid-modern {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    /* Services: 2 columns */
    .services-grid-new {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Resume: 1 column */
    .resume-grid-new {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* Portfolio: 2 columns */
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Blog: 2 columns */
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Contact: stack */
    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* Form row: keep 2 col if space allows */
    .form-row {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 768px) {

    .section {
        padding: 60px 0;
    }

    /* Hero */
    .hero-content h1 {
        font-size: 2.2rem;
    }

    .typing-text {
        font-size: 1.3rem;
    }

    .hero-content p {
        font-size: 0.95rem;
    }

    /* About stats: keep 3 col on landscape mobile */
    .about-stats-new {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .stat-card h4 {
        font-size: 2rem;
    }

    .stat-card p {
        font-size: 0.8rem;
    }

    /* Skills: 2 columns on mobile landscape */
    .skills-grid-modern {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .circle-container-modern {
        width: 100px;
        height: 100px;
    }

    .skill-icon-modern {
        font-size: 1.8rem;
    }

    .skill-name-modern {
        font-size: 0.9rem;
    }

    .skill-badge {
        font-size: 0.65rem;
        padding: 3px 10px;
    }

    .skill-card-modern {
        padding: 18px 12px;
    }

    .skill-card-modern:hover {
        transform: translateY(-6px) scale(1.01);
    }

    .skill-category-title {
        font-size: 1.1rem;
        margin: 30px 0 16px;
    }

    /* Services: 1 column */
    .services-grid-new {
        grid-template-columns: 1fr;
    }

    /* Portfolio: 1 column */
    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    /* Blog: 1 column */
    .blog-grid {
        grid-template-columns: 1fr;
    }

    /* Contact form row: stack */
    .form-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Footer */
    .footer-content {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    /* Certifications modal */
    .certifications-modal-content {
        padding: 28px 16px;
        border-radius: 16px;
    }

    .certifications-header h2 {
        font-size: 1.6rem;
        flex-wrap: wrap;
    }

    .certificates-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}
@media (max-width: 480px) {

    .container {
        padding: 0 14px;
    }

    /* Hero */
    .hero-content h1 {
        font-size: 1.9rem;
    }

    .typing-text {
        font-size: 1.1rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn {
        width: 100%;
        text-align: center;
    }

    .img-box img {
        width: 170px;
        height: 170px;
    }

    /* About: stack stats to 1 column */
    .about-stats-new {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .stat-card {
        padding: 24px 20px;
    }

    /* Skills: 1 column on very small phones */
    .skills-grid-modern {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* Skills card: horizontal layout on single column for better space use */
    .skill-card-modern {
        flex-direction: row;
        padding: 16px 18px;
        gap: 16px;
        align-items: center;
    }

    .circle-container-modern {
        width: 80px;
        height: 80px;
        flex-shrink: 0;
    }

    .skill-icon-modern {
        font-size: 1.5rem;
    }

    .skill-info-modern {
        text-align: left;
        flex: 1;
    }

    .skill-name-modern {
        font-size: 0.95rem;
    }

    .skill-badge {
        font-size: 0.7rem;
    }

    /* Disable the hover scale on touch devices */
    .skill-card-modern:hover {
        transform: none;
    }

    /* Section titles */
    .section-title h2 {
        font-size: 1.6rem;
    }

    /* Resume */
    .resume-card {
        padding: 16px;
    }

    /* Service icon */
    .service-icon {
        width: 60px;
        height: 60px;
        font-size: 1.4rem;
    }

    /* Modal */
    .certifications-modal-content {
        padding: 20px 14px;
    }

    .cert-btn {
        padding: 10px 14px;
        font-size: 0.82rem;
    }
}
@media (max-width: 380px) {
    .logo {
        font-size: 1.2rem;
    }

    .hero-content h1 {
        font-size: 1.6rem;
    }

    .typing-text {
        font-size: 1rem;
    }

    .circle-container-modern {
        width: 72px;
        height: 72px;
    }

    .skill-icon-modern {
        font-size: 1.3rem;
    }
}
@media (min-width: 1400px) {
    .container {
        max-width: 1360px;
    }

    .skills-grid-modern {
        grid-template-columns: repeat(5, 1fr);
        gap: 40px;
    }

    .hero-content h1 {
        font-size: 4.5rem;
    }

    .services-grid-new {
        grid-template-columns: repeat(3, 1fr);
    }

    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (hover: none) and (pointer: coarse) {

    /* Skills: no lift on touch */
    .skill-card-modern:hover {
        transform: none;
        box-shadow: none;
        border-color: rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.04);
    }

    body.light-mode .skill-card-modern:hover {
        box-shadow: var(--lm-shadow);
        border-color: rgba(59, 130, 246, 0.15);
        background: #ffffff;
    }

    /* Circle progress border: remove on touch */
    .skill-card-modern:hover::before {
        opacity: 0;
    }

    /* Service card: reduce transform */
    .service-card:hover {
        transform: none;
    }

    /* Portfolio: always show overlay on touch */
    .portfolio-overlay {
        opacity: 1;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
    }

    .portfolio-overlay h3 {
        transform: translateY(0);
    }

    .portfolio-overlay span {
        transform: translateY(0);
    }
}
@media (max-width: 992px) {
    .about-stats-new {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}
@media (max-width: 768px) {
    .about-stats-new {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }
    .about-stat-card .stat-number {
        font-size: 2rem;
    }
}
@media (max-width: 480px) {
    .about-stats-new {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .about-stat-card .stat-number {
        font-size: 2.2rem;
    }
}
/* ═══════════════════════════════════════════════════════════════
   PERFORMANCE & INTERACTION FIXES — appended section
   These fixes address:
   1. nav-center pointer-events leak (blocks theme button on mobile)
   2. Explicit touch-action on all interactive elements
   3. body.is-loading prevents all interactions during load
   4. Theme dropdown z-index isolation
   5. Minimum tap targets (44px × 44px per Apple/Google HIG)
   6. Font smoothing for faster perceived render
   7. will-change hints for GPU-composited animations
═══════════════════════════════════════════════════════════════ */

/* ── CRITICAL FIX: nav-center pointer-events ──────────────────
   When .nav-center is position:fixed with width:100% and height:calc(100vh-70px)
   (at ≤992px), even though visibility:hidden hides it visually, it still
   intercepts pointer events — blocking the theme dropdown button.
   Adding pointer-events:none when not active fixes this.
────────────────────────────────────────────────────────────── */
@media (max-width: 992px) {
    .nav-center:not(.active) {
        pointer-events: none !important;
    }
    .nav-center.active {
        pointer-events: all !important;
    }

    /* Theme dropdown: must be above the nav-center stacking context */
    .theme-dropdown {
        position: relative;
        z-index: 1001 !important;
        isolation: isolate;
    }
    .theme-dropdown-btn {
        position: relative;
        z-index: 1001 !important;
        touch-action: manipulation;
        min-width: 44px;
        min-height: 44px;
    }
    .theme-dropdown-content {
        z-index: 1002 !important;
    }

    /* Hamburger button: ensure it's above nav-center */
    .menu-toggle {
        position: relative;
        z-index: 1001 !important;
        touch-action: manipulation;
    }
}

/* ── BODY LOADING LOCK ───────────────────────────────────────
   Prevents ALL click/touch while page is loading.
   The loader itself stays interactive so the spinner shows.
────────────────────────────────────────────────────────────── */
body.is-loading {
    pointer-events: none !important;
    user-select: none !important;
}
body.is-loading .loader {
    pointer-events: all !important;
}

/* ── TOUCH-ACTION: MANIPULATION ─────────────────────────────
   Removes 300ms click delay on mobile for all interactive elements.
   'manipulation' = allow panning + zoom but no double-tap-to-zoom delay.
────────────────────────────────────────────────────────────── */
a, button, [role="button"],
.btn, .btn-primary, .btn-outline, .btn-download-cv,
.cert-btn, .view-btn, .download-btn,
.certifications-btn, .certifications-close, .cert-viewer-close,
.theme-dropdown-btn, .theme-option,
.menu-toggle, .floating-msg-main, .floating-msg-option,
.portfolio-link, .read-more, .nav-link {
    touch-action: manipulation;
}

/* ── MINIMUM TAP TARGET SIZES (44px) ─────────────────────────
   Ensures every interactive element meets Apple/Google accessibility
   guidelines for touchable area size.
────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    .btn, .btn-primary, .btn-outline {
        min-height: 48px;
        min-width: 120px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .cert-btn {
        min-height: 44px;
        min-width: 80px;
    }
    .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    .theme-dropdown-btn {
        min-width: 44px;
        min-height: 44px;
    }
    .menu-toggle {
        min-width: 44px;
        min-height: 44px;
    }
    .floating-msg-main,
    .floating-msg-option-icon {
        min-width: 48px;
        min-height: 48px;
    }
    /* Make portfolio overlay always visible on touch (no hover needed) */
    .portfolio-item:hover .portfolio-overlay,
    .portfolio-item:focus-within .portfolio-overlay {
        opacity: 1;
    }
    /* Certificate overlay visible on touch */
    .certificate-image:active .certificate-overlay,
    .certificate-card:focus-within .certificate-overlay {
        opacity: 1;
        visibility: visible;
    }
}

/* ── PERFORMANCE: WILL-CHANGE HINTS ─────────────────────────
   Promotes frequently-animated elements to their own GPU layers.
   Only applied to elements that actually animate to avoid memory waste.
────────────────────────────────────────────────────────────── */
.navbar {
    will-change: transform;
}
.hero-image .img-box {
    will-change: transform;
}
[data-aos] {
    will-change: opacity, transform;
}

/* ── FONT RENDERING ──────────────────────────────────────────
   Improves perceived load speed and text clarity on all platforms.
────────────────────────────────────────────────────────────── */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ── LAZY IMAGE PLACEHOLDERS ─────────────────────────────────
   Prevents layout shift (CLS) while images are loading.
   SVG placeholders maintain aspect ratio.
────────────────────────────────────────────────────────────── */
img.lazy-img,
img.cert-lazy {
    background: linear-gradient(90deg, rgba(30,41,59,0.8) 25%, rgba(51,65,85,0.6) 50%, rgba(30,41,59,0.8) 75%);
    background-size: 200% 100%;
    animation: shimmer-placeholder 1.5s ease-in-out infinite;
}
img.lazy-img[src*="unsplash"],
img.cert-lazy[src*="unsplash"] {
    background: none;
    animation: none;
}
@keyframes shimmer-placeholder {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── PREVENT HORIZONTAL SCROLL ───────────────────────────────
   Defensive rule to prevent any overflow-x issues
────────────────────────────────────────────────────────────── */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* ── CERTIFICATIONS MODAL ARIA ───────────────────────────────
   Modal not in active state should be fully hidden from screen readers
────────────────────────────────────────────────────────────── */
.certifications-modal[aria-hidden="true"],
.cert-viewer-modal[aria-hidden="true"] {
    display: none !important;
}
.certifications-modal.active,
.cert-viewer-modal.active {
    display: flex !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ≤ 910 px BREAKPOINT — LAYOUT CONTAINMENT FIX
   ─────────────────────────────────────────────────────────────────────────
   WHY THIS BLOCK EXISTS
   ─────────────────────────────────────────────────────────────────────────
   The base CSS uses `minmax(280-350px, 1fr)` on most grids. At exactly
   910 px viewport width:
     • 2 cards × 300 px min + gap + container padding ≈ 640 px+ minimum
       track width, causing overflow or forced single-column collapse that
       loses the explicit 2-col layout set by the 992 px block.
     • The gap between the 992 px breakpoint (2-col explicit) and 768 px
       (1-col explicit) leaves an uncovered zone (~769–910 px) where grids
       can behave inconsistently.

   WHAT THIS BLOCK DOES
   ─────────────────────────────────────────────────────────────────────────
   ✅  Forces all content card grids to 1 column at ≤ 910 px
   ✅  Scales card internal spacing proportionally — no visual redesign
   ✅  Preserves ALL card styles: borders, shadows, gradients, blur,
       hover effects, animations, typography
   ✅  Maintains equal gap between stacked cards
   ✅  Centres cards and keeps full-width layout clean

   SECTIONS COVERED: Services · Portfolio · Blog · About Stats ·
                     Resume · Contact · Form Row · Certificates
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 910px) {

    /* ── Services ─────────────────────────────────────────────────────── */
    .services-grid-new,
    .services-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Scale card padding proportionally — visual design unchanged */
    .service-card {
        padding: 32px 28px !important;
    }

    /* ── Portfolio ────────────────────────────────────────────────────── */
    .portfolio-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Image height scales to viewport so it doesn't feel too tall */
    .portfolio-item img {
        height: clamp(220px, 40vw, 320px) !important;
    }

    /* ── Blog ─────────────────────────────────────────────────────────── */
    .blog-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* ── About Stats ──────────────────────────────────────────────────── */
    /* 3-col stats are fine at 910 px — drop only below 600 px.           */
    /* This rule handles the medium case: 2 equal cols at 910-600 px.     */
    .about-stats-new {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
    }

    /* ── Resume ───────────────────────────────────────────────────────── */
    .resume-grid-new,
    .resume-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    /* Restore horizontal overflow clip (was set to visible at ≤768px) */
    .resume-section {
        overflow: hidden;
    }

    /* ── Certificates ─────────────────────────────────────────────────── */
    .certificates-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    /* ── Contact ──────────────────────────────────────────────────────── */
    .contact-wrapper {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    /* Form name + email row: keep side-by-side while space permits */
    .form-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
    }

    /* ── Hero ─────────────────────────────────────────────────────────── */
    .hero-container {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 36px !important;
    }

    .hero-image {
        order: -1 !important;
        margin-top: 20px !important;
    }

    .hero-buttons {
        justify-content: center !important;
    }

    .social-icons-hero {
        justify-content: center !important;
    }

    /* ── Typography scaling ───────────────────────────────────────────── */
    .hero-content h1 {
        font-size: clamp(2rem, 5vw, 2.8rem) !important;
    }

    .section-title h2 {
        font-size: clamp(1.8rem, 4vw, 2.4rem) !important;
    }

    /* ── Section padding ──────────────────────────────────────────────── */
    .section {
        padding: 70px 0 !important;
    }
}

/* ── 910 px + about stats: single column below 600 px ────────────────── */
@media (max-width: 600px) {
    .about-stats-new {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* Certificates: 1 col at very small sizes */
    .certificates-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* Form row: stack on very small screens */
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   400px – 600px  TARGETED STABILITY FIX  (v2 — expanded from 430 to 400)
   ─────────────────────────────────────────────────────────────────────────
   SCOPE
   ─────────────────────────────────────────────────────────────────────────
   Applies only between 400px and 600px viewport width.
   Every rule below carries !important to win over the dense cascade of
   earlier max-width:768px, max-width:910px, and max-width:600px blocks
   that all use !important themselves.

   PROBLEMS BEING SOLVED (in order of visual severity)
   ─────────────────────────────────────────────────────────────────────────
   1.  HERO: img-box at 220px (from ≤992px) plus two side-by-side CTA
       buttons in ~420–520px container — layout overly tight. Hero photo
       reduced, buttons forced to column stack.

   2.  SKILL CARDS — percentage label vs icon collision:
       Three competing !important blocks fight for circle margin-top and
       card padding-top:
         • style.css   ►  margin-top:28px, padding-top:36px
         • responsive  ►  margin-top:24px, padding-top:30px (768px block)
       The winner varies by specificity order. This block re-asserts
       consistent values and overrides ALL of them for this range.

   3.  SKILL CARDS — circle & font size:
       At 481–600px the 768px rules leave circles at 100px and cards with
       18px–22px side padding. In a 2-col layout at 430px that gives each
       card ≈195px usable width: 100px circle + 10px each side = fine BUT
       the skill-info block underneath overflows on long names like
       "CSS3 & Tailwind". Font and badge tightened.

   4.  HERO BUTTONS: `flex-direction:row` survives until ≤480px.
       At 490–600px two full `width:auto` buttons + 20px gap in a
       ~550px container is borderline. Stacked at ≤520px, row above 520px.

   5.  SERVICE-CARD USED AS ABOUT-STAT: service-icon stays 90px at
       481–600px (only reduced to 60px at ≤480px). In the about-stats
       1-col layout these are full-width cards; 90px icon is proportionally
       large. Trimmed to 72px.

   6.  RESUME CARD: 30px padding is fine in landscape but compresses
       internal heading+year layout at 400–450px. Reduced to 22px.

   7.  BTN-DOWNLOAD-CV: hover expands padding-right (to 50px) via
       style.css rule. This can cause horizontal scroll at 400–430px.
       Overflow contained.

   8.  CONTAINER: base padding is 20px each side. Tightened to 16px here
       (480px rule tightens to 14px, this provides a smooth step).

   9.  SECTION PADDING: 70px !important from 910px block is fine for
       600px but can feel tall at 400px. Left unchanged (proportional).

   WHAT IS NOT CHANGED
   ─────────────────────────────────────────────────────────────────────────
   ❌  Colors, gradients, shadows, borders, hover animations, AOS attrs
   ❌  Card shape / border-radius / backdrop-filter / glassmorphism
   ❌  Any breakpoint below 400px or above 600px
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 400px) and (max-width: 600px) {

    /* ─────────────────────────────────────────────────────────────────────
       1. CONTAINER — tighter side padding for this narrow band
       ───────────────────────────────────────────────────────────────────── */
    .container {
        padding: 0 16px !important;
    }


    /* ─────────────────────────────────────────────────────────────────────
       2. HERO — photo size + button stack
       ───────────────────────────────────────────────────────────────────── */

    /* Reduce hero portrait: 220px (from ≤992px) → 190px for this zone     */
    .img-box img {
        width: 190px !important;
        height: 190px !important;
    }

    /* Stack CTA buttons vertically so neither gets clipped                 */
    .hero-buttons {
        flex-direction: column !important;
        align-items: center !important;
        gap: 14px !important;
    }

    /* Full-width buttons fill the centered column nicely                   */
    .btn {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* Slightly tighter hero h1 scaling within clamp range                  */
    .hero-content h1 {
        font-size: clamp(1.85rem, 5vw, 2.4rem) !important;
    }

    /* Typing text — fractionally tighter to avoid wrapping on short lines  */
    .typing-text {
        font-size: 1.2rem !important;
    }

    /* Hero paragraph — comfortable reading size                            */
    .hero-content p {
        font-size: 0.92rem !important;
    }


    /* ─────────────────────────────────────────────────────────────────────
       3. SECTION TITLE
       ───────────────────────────────────────────────────────────────────── */
    .section-title h2 {
        font-size: clamp(1.6rem, 5vw, 2rem) !important;
    }


    /* ─────────────────────────────────────────────────────────────────────
       4. SKILLS GRID — 2-column, stable sizing
       ───────────────────────────────────────────────────────────────────── */

    /* Force 2-col — prevents auto-fit from erratic behaviour               */
    .skills-grid-modern {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* Card internal layout — column orientation preserved                  */
    .skill-card-modern {
        flex-direction: column !important;
        align-items: center !important;
        /* UNIFIED padding-top: overrides ALL earlier competing !importants  */
        padding: 30px 10px 16px !important;
        gap: 10px !important;
        border-radius: 16px !important;
    }

    /* ── Circle container ──────────────────────────────────────────────── */
    /* Downscale from 100px (768px block) to 84px — fits 2-col at 400px    */
    .circle-container-modern {
        --circle-size: 84px !important;
        --sz: 84px !important;
        width: 84px !important;
        height: 84px !important;
        /* Single authoritative margin-top, resolving the 24px vs 28px war  */
        margin-top: 22px !important;
        margin-bottom: 0 !important;
        position: relative !important;
        flex-shrink: 0 !important;
    }

    .circle-container-modern svg {
        width: 84px !important;
        height: 84px !important;
    }

    /* ── Percentage label ──────────────────────────────────────────────── */
    /* Sits ABOVE the circle (negative top from circle edge).               */
    /* -22px ensures the label clears the ring cleanly at 84px circle size. */
    .skill-percentage {
        top: -22px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 0.78rem !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
        pointer-events: none !important;
        z-index: 12 !important;
        line-height: 1 !important;
    }

    /* ── Skill icon ────────────────────────────────────────────────────── */
    /* Reset the positioning/margin-top fight from multiple 768px blocks    */
    .skill-icon-modern {
        font-size: 1.4rem !important;
        margin-top: 0 !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    .skill-card-modern:hover .skill-icon-modern {
        transform: translate(-50%, -50%) scale(1.1) !important;
        margin-top: 0 !important;
    }

    /* ── Skill info text ───────────────────────────────────────────────── */
    /* Reset any horizontal-layout bleed from ≤480px rule                  */
    .skill-info-modern {
        text-align: center !important;
        flex: unset !important;
        width: 100% !important;
    }

    .skill-name-modern {
        font-size: 0.82rem !important;
        word-break: break-word !important;
        hyphens: auto !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    .skill-badge {
        font-size: 0.6rem !important;
        padding: 3px 8px !important;
        letter-spacing: 0.3px !important;
        white-space: nowrap !important;
    }

    .skill-category-title {
        font-size: 1rem !important;
        margin: 28px 0 14px !important;
        padding-left: 10px !important;
    }


    /* ─────────────────────────────────────────────────────────────────────
       5. ABOUT STATS — service-icon size in stat cards
       ───────────────────────────────────────────────────────────────────── */
    /* about-stats-new is already 1-col (≤600px block fires here too)       */
    /* service-icon is 90px at 481-600px (only cut at ≤480px). Reduce it.  */
    .about-stat-card .service-icon {
        width: 72px !important;
        height: 72px !important;
        font-size: 1.6rem !important;
        margin-bottom: 18px !important;
    }

    /* Stat number — tighten slightly for 1-col full-width card             */
    .about-stat-card .stat-number {
        font-size: 2.2rem !important;
    }

    .about-stat-card p {
        font-size: 0.9rem !important;
    }


    /* ─────────────────────────────────────────────────────────────────────
       6. SERVICES — icon size in service section cards
       ───────────────────────────────────────────────────────────────────── */
    /* service-card cards in the services section are already 1-col.
       Icon reduction mirrors the about-stat reduction above for visual
       consistency. Only applies to service-card NOT about-stat-card.       */
    .services-grid-new .service-card .service-icon {
        width: 72px !important;
        height: 72px !important;
        font-size: 1.6rem !important;
    }

    .services-grid-new .service-card h3 {
        font-size: 1.25rem !important;
    }

    .services-grid-new .service-card p {
        font-size: 0.9rem !important;
    }

    /* Proportional card padding in this range                              */
    .service-card {
        padding: 30px 22px !important;
    }


    /* ─────────────────────────────────────────────────────────────────────
       7. RESUME — tighter card padding at narrow widths
       ───────────────────────────────────────────────────────────────────── */
    .resume-card {
        padding: 22px 18px !important;
    }

    .resume-year {
        font-size: 0.8rem !important;
        padding: 5px 14px !important;
    }

    .resume-card h4 {
        font-size: 1.1rem !important;
    }

    .resume-section-title {
        font-size: 1.4rem !important;
    }


    /* ─────────────────────────────────────────────────────────────────────
       8. PORTFOLIO — image height proportional to viewport
       ───────────────────────────────────────────────────────────────────── */
    .portfolio-item img {
        height: clamp(200px, 45vw, 280px) !important;
    }

    .portfolio-overlay h3 {
        font-size: 1.2rem !important;
    }


    /* ─────────────────────────────────────────────────────────────────────
       9. BLOG — tighter content padding
       ───────────────────────────────────────────────────────────────────── */
    .blog-content {
        padding: 18px !important;
    }

    .blog-content h3 {
        font-size: 1.15rem !important;
    }

    .blog-img img {
        height: 190px !important;
    }


    /* ─────────────────────────────────────────────────────────────────────
       10. CONTACT — info items and form
       ───────────────────────────────────────────────────────────────────── */
    /* contact-wrapper is already 1-col (910px block), form-row is 1-col   */
    .info-item {
        gap: 14px !important;
        padding: 16px !important;
    }

    .info-item i {
        width: 44px !important;
        height: 44px !important;
        font-size: 1rem !important;
    }

    .contact-form input,
    .contact-form textarea {
        padding: 13px 16px !important;
        font-size: 0.9rem !important;
    }


    /* ─────────────────────────────────────────────────────────────────────
       11. DOWNLOAD CV BUTTON — prevent hover-expansion overflow
       ───────────────────────────────────────────────────────────────────── */
    .btn-download-cv {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Tighten the hover padding expansion that pushes width out           */
    .btn-download-cv:hover {
        padding-right: 45px !important;
    }


    /* ─────────────────────────────────────────────────────────────────────
       12. ABOUT CONTENT TEXT
       ───────────────────────────────────────────────────────────────────── */
    .about-headline {
        font-size: 1.7rem !important;
        line-height: 1.35 !important;
    }

    .about-tagline {
        font-size: 1rem !important;
    }

    .about-description {
        font-size: 0.9rem !important;
    }


    /* ─────────────────────────────────────────────────────────────────────
       13. CERTIFICATIONS MODAL — consistent with other small-screen rules
       ───────────────────────────────────────────────────────────────────── */
    .certifications-modal-content {
        padding: 24px 14px !important;
    }

    .certifications-header h2 {
        font-size: 1.4rem !important;
    }

    .cert-btn {
        padding: 10px 14px !important;
        font-size: 0.82rem !important;
    }

    .certificate-image {
        height: 170px !important;
    }


    /* ─────────────────────────────────────────────────────────────────────
       14. FLOATING BUTTONS — keep accessible but not oversized
       ───────────────────────────────────────────────────────────────────── */
    .floating-msg-main {
        width: 50px !important;
        height: 50px !important;
    }

    .floating-msg-option-icon {
        width: 42px !important;
        height: 42px !important;
    }

}
/* ── End 400–600px fix ─────────────────────────────────────────────────── */