/* Shared CSS for all pages — portfolio */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Exo+2:wght@100;300;400;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box;}
:root{--blue:#00d4ff;--blue2:#0066ff;--bg:#030810;--glow:0 0 20px rgba(0,212,255,.5);}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:#e0e0e0;font-family:'Exo 2',sans-serif;overflow-x:hidden;}
nav{position:fixed;top:0;width:100%;z-index:1000;padding:18px 50px;display:flex;justify-content:space-between;align-items:center;background:rgba(3,8,16,.7);backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,212,255,.15);}
.logo{font-family:'Rajdhani',sans-serif;font-size:1.6rem;font-weight:700;color:var(--blue);text-shadow:var(--glow);text-decoration:none;letter-spacing:2px;}
nav ul{list-style:none;display:flex;gap:35px;}
nav ul li a{color:#aaa;text-decoration:none;font-size:.95rem;letter-spacing:1px;text-transform:uppercase;transition:all .3s;}
nav ul li a:hover,nav ul li a.active{color:var(--blue);text-shadow:var(--glow);}
#particles{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none;}
section,div{position:relative;z-index:10;}
.s-pad{padding:20px 8% 120px;}
.section-label{font-size:.75rem;letter-spacing:4px;text-transform:uppercase;color:var(--blue);margin-bottom:12px;display:block;}
.section-title{font-family:'Rajdhani',sans-serif;font-size:clamp(2rem,4vw,3.5rem);font-weight:700;line-height:1.1;margin-bottom:20px;}
.section-title em{color:var(--blue);font-style:normal;}
.section-desc{color:#7a8a9a;max-width:650px;line-height:1.8;font-size:1.05rem;}
.btn-primary{padding:14px 32px;background:linear-gradient(135deg,var(--blue),var(--blue2));color:#000;border:none;border-radius:30px;font-weight:700;font-size:1rem;cursor:pointer;transition:all .3s;text-decoration:none;letter-spacing:1px;display:inline-block;}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,212,255,.4);}
.btn-outline{padding:14px 32px;background:transparent;color:var(--blue);border:1px solid var(--blue);border-radius:30px;font-weight:600;font-size:1rem;cursor:pointer;transition:all .3s;text-decoration:none;letter-spacing:1px;display:inline-block;}
.btn-outline:hover{background:rgba(0,212,255,.1);transform:translateY(-3px);}
button{padding:14px 32px;background:linear-gradient(135deg,var(--blue),var(--blue2));color:#000;border:none;border-radius:30px;font-weight:700;font-size:1rem;cursor:pointer;transition:all .3s;letter-spacing:1px;}
button:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,212,255,.4);}
input,textarea{width:100%;background:rgba(0,20,40,.6);border:1px solid rgba(0,212,255,.2);color:#fff;padding:15px 20px;border-radius:10px;font-family:'Exo 2',sans-serif;font-size:1rem;transition:border-color .3s;}
input:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 15px rgba(0,212,255,.1);}
textarea{height:140px;resize:vertical;}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:25px;margin-top:60px;}
.srv-card{padding:35px;border:1px solid rgba(0,212,255,.15);border-radius:16px;background:linear-gradient(135deg,rgba(0,20,40,.8),rgba(0,5,15,.9));position:relative;overflow:hidden;transition:all .4s;cursor:default;}
.srv-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--blue),transparent);transform:translateX(-100%);transition:transform .6s;}
.srv-card:hover::before{transform:translateX(100%);}
.srv-card:hover{transform:translateY(-8px);border-color:rgba(0,212,255,.4);box-shadow:0 20px 50px rgba(0,0,0,.5),var(--glow);}
.srv-icon{font-size:2.5rem;margin-bottom:20px;}
.srv-card h3{font-family:'Rajdhani',sans-serif;font-size:1.4rem;margin-bottom:12px;color:#fff;}
.srv-card p{color:#7a8a9a;line-height:1.7;font-size:.95rem;}
.srv-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px;}
.srv-tag{font-size:.7rem;padding:3px 10px;border:1px solid rgba(0,212,255,.25);border-radius:10px;color:var(--blue);letter-spacing:.5px;}
.works-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:30px;margin-top:60px;}
.work-card{border-radius:16px;overflow:hidden;border:1px solid rgba(0,212,255,.15);transition:all .4s;}
.work-card:hover{transform:translateY(-8px);border-color:rgba(0,212,255,.4);}
.work-thumb{height:220px;display:flex;align-items:center;justify-content:center;font-size:4rem;}
.work-body{padding:25px;background:rgba(0,15,30,.9);}
.work-body h3{font-family:'Rajdhani',sans-serif;font-size:1.3rem;margin-bottom:10px;color:#fff;}
.work-body p{color:#7a8a9a;font-size:.9rem;line-height:1.6;}
.work-result{display:inline-block;margin-top:12px;color:var(--blue);font-weight:600;font-size:.85rem;}
.faq-item{border:1px solid rgba(0,212,255,.15);border-radius:12px;padding:25px;margin-bottom:15px;cursor:pointer;transition:all .3s;}
.faq-item:hover,.faq-item.open{border-color:rgba(0,212,255,.4);background:rgba(0,212,255,.03);}
.faq-q{display:flex;justify-content:space-between;align-items:center;font-size:1.05rem;font-weight:500;color:#fff;}
.faq-a{color:#7a8a9a;line-height:1.7;margin-top:12px;display:none;font-size:.95rem;}
.faq-item.open .faq-a{display:block;}
.faq-arrow{color:var(--blue);transition:transform .3s;font-size:1.2rem;}
.faq-item.open .faq-arrow{transform:rotate(45deg);}
.faq-wrap{max-width:800px;margin:60px auto 0;}
.city-info{margin-top:20px;padding:25px;border:1px solid rgba(0,212,255,.2);border-radius:12px;background:rgba(0,15,30,.8);min-height:80px;transition:all .3s;}
.city-info h3{color:var(--blue);font-family:'Rajdhani',sans-serif;font-size:1.4rem;margin-bottom:8px;}
.city-info p{color:#9a9a9a;line-height:1.6;}





.reveal{opacity:0;transform:translateY(60px);transition:all .9s cubic-bezier(.16,1,.3,1);}
.reveal.visible{opacity:1;transform:translateY(0);}
/* Blog Single Post Layout */
.single-post-wrap {
    padding-top: 140px !important;
    padding-bottom: 100px;
    max-width: 1400px;
    margin: 0 auto;
}
.blog-container {
    display: flex;
    gap: 45px;
    align-items: flex-start;
}
.toc {
    flex: 0 0 290px;
    position: sticky;
    top: 110px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    background: rgba(0, 15, 30, 0.88);
    border: 1px solid rgba(0, 212, 255, 0.25);
    border-radius: 14px;
    padding: 24px;
    backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 20;
}
.toc::-webkit-scrollbar { width: 4px; }
.toc::-webkit-scrollbar-thumb { background: rgba(0, 212, 255, 0.35); border-radius: 4px; }
.toc h3 {
    margin-bottom: 16px;
    font-size: 1.15rem;
    font-family: 'Rajdhani', sans-serif;
    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
    padding-bottom: 10px;
    color: #fff;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
}
.toc ul { list-style: none; padding: 0; margin: 0; }
.toc ul li { margin-bottom: 8px; }
.toc ul li.toc-h3 { padding-left: 14px; font-size: 0.85rem; }
.toc a {
    display: block;
    color: #8da2b6;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    line-height: 1.45;
    padding: 6px 10px;
    border-radius: 6px;
}
.toc a:hover, .toc a.active {
    color: #00d4ff;
    background: rgba(0, 212, 255, 0.1);
    transform: translateX(4px);
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
}
.blog-content {
    flex: 1;
    min-width: 0;
    max-width: 100%;
}
.blog-content h1 {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(2rem, 3.8vw, 3rem);
    color: #fff;
    line-height: 1.25;
    margin-top: 5px;
    margin-bottom: 16px;
    font-weight: 700;
    word-break: break-word;
}
.blog-content h2,
.blog-post-body h2 {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(1.6rem, 2.8vw, 2.1rem);
    margin-top: 50px;
    margin-bottom: 20px;
    color: #fff;
    border-bottom: 1px solid rgba(0, 212, 255, 0.25);
    padding-bottom: 10px;
    scroll-margin-top: 120px !important;
}
.blog-content h3,
.blog-post-body h3 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.45rem;
    margin-top: 35px;
    margin-bottom: 15px;
    color: #00d4ff;
    scroll-margin-top: 120px !important;
}
.blog-content h4,
.blog-post-body h4 {
    scroll-margin-top: 120px !important;
}
.blog-content p,
.blog-post-body p {
    margin-bottom: 22px;
    line-height: 1.85;
    color: #d2dfed;
    font-size: 1.05rem;
}
.blog-post-body {
    opacity: 1 !important;
    transform: none !important;
}
.blog-meta {
    color: var(--blue);
    font-weight: 600;
    margin-bottom: 25px;
    font-size: 0.92rem;
    letter-spacing: 0.5px;
}

/* === Cyberpunk Styling for WordPress Tables & Comparison Tables === */
.table-scroll-wrapper,
.blog-content .wp-block-table,
.blog-post-body .wp-block-table,
.wp-block-table {
    margin: 35px 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    background: rgba(0, 15, 30, 0.92) !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.55), 0 0 15px rgba(0, 212, 255, 0.08) !important;
    display: block !important;
    width: 100% !important;
    position: relative !important;
}

.table-scroll-hint {
    display: none;
    background: rgba(0, 212, 255, 0.1);
    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
    color: #00d4ff;
    font-size: 0.8rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 14px;
    align-items: center;
    gap: 8px;
}

.blog-content table,
.blog-post-body table,
.wp-block-table table,
.table-scroll-wrapper table {
    width: 100% !important;
    min-width: 720px !important; /* Prevents columns from squishing into vertical letters */
    border-collapse: collapse !important;
    font-size: 0.96rem !important;
    color: #dbe7f3 !important;
    margin: 0 !important;
    display: table !important;
    border: none !important;
}

.blog-content table thead th,
.blog-post-body table thead th,
.blog-content table th,
.blog-post-body table th,
.wp-block-table th {
    background: rgba(0, 212, 255, 0.18) !important;
    color: #00d4ff !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 16px 20px !important;
    border-bottom: 2px solid rgba(0, 212, 255, 0.35) !important;
    border-right: 1px solid rgba(0, 212, 255, 0.12) !important;
    text-align: left !important;
    white-space: nowrap !important; /* Critical: never wrap into vertical single letters */
}

.blog-content table td,
.blog-post-body table td,
.wp-block-table td {
    padding: 14px 20px !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.12) !important;
    border-right: 1px solid rgba(0, 212, 255, 0.08) !important;
    color: #cdd9e5 !important;
    line-height: 1.6 !important;
    background: transparent !important;
    min-width: 100px !important;
    white-space: normal !important;
}

.blog-content table tbody tr:nth-child(even) td,
.blog-post-body table tbody tr:nth-child(even) td {
    background: rgba(0, 212, 255, 0.03) !important;
}

.blog-content table tbody tr:hover td,
.blog-post-body table tbody tr:hover td {
    background: rgba(0, 212, 255, 0.09) !important;
    color: #ffffff !important;
}

.blog-content table td:last-child,
.blog-content table th:last-child,
.blog-post-body table td:last-child,
.blog-post-body table th:last-child {
    border-right: none !important;
}

.blog-content table tbody tr:last-child td,
.blog-post-body table tbody tr:last-child td {
    border-bottom: none !important;
}

.blog-content table a,
.blog-post-body table a {
    color: #00d4ff !important;
    text-decoration: underline !important;
    font-weight: 600;
}

/* Responsive Blog Post Adjustments */
@media(max-width:900px){
    .single-post-wrap {
        padding-top: 110px !important;
        padding-bottom: 60px;
    }
    .blog-container{
        flex-direction: column;
        gap: 25px;
    }
    .toc {
        position: relative;
        top: 0;
        width: 100%;
        max-height: none;
        margin-bottom: 20px;
    }
    nav { padding: 15px 5%; }
    .s-pad { padding: 20px 5% 80px; }
}
@media(max-width: 900px) {
    /* Mobile Nav */
    nav { padding: 15px 5%; backdrop-filter: none; background: rgba(3,8,16,0.98); }
    .menu-toggle { display: block; font-size: 1.8rem; color: var(--blue); cursor: pointer; z-index: 1001; }
    .menu-toggle svg { pointer-events: none; }
    nav ul { 
        position: fixed; top: 0; right: -100%; width: 250px; height: 100vh; 
        background: #030810; border-left: 1px solid rgba(0,212,255,.2); 
        flex-direction: column; align-items: center; justify-content: center; gap: 30px; 
        transition: right 0.3s ease-in-out; z-index: 1000;
        display: flex;
    }
    nav ul.active { right: 0; }
    
    /* Layouts */
    .section-title { font-size: 2.2rem; }
    .hero-left h1 { font-size: 3rem !important; }
    .services-grid, .works-grid { grid-template-columns: 1fr; }
    
}
@media(min-width: 901px) {
    .menu-toggle { display: none; }
}

/* Global overflow fixes to stop horizontal shaking */
html { overflow-x: hidden; }
body { overflow-x: hidden; width: 100%; position: relative; }
canvas { max-width: 100%; }

/* Fix nav glitching */
nav {
    transition: background 0.3s, padding 0.3s;
}
.menu-toggle svg { pointer-events: none; }

@media(max-width: 900px) {
    /* About Page Mobile Fixes */
    .about-hero { padding: 100px 5% 40px !important; gap: 40px !important; flex-direction: column; }
    .about-left, .about-right { width: 100% !important; min-width: unset !important; }
    .profile-float { flex-direction: column; text-align: center; gap: 15px !important; padding: 15px !important; }
    .stat-chips { justify-content: center; }
    .cert-row { justify-content: center; }
    
    /* City Canvas Fix */
    #city-canvas { width: 100% !important; height: 400px !important; max-width: 100vw; }
}

/* Rich Footer - Grid Column Layout */
footer.rich-footer {
    display: block;
    background: rgba(3, 8, 16, 0.95);
    border-top: 1px solid rgba(0, 212, 255, 0.15);
    padding: 70px 8% 20px;
    margin-top: 50px;
    position: relative;
    z-index: 10;
}
.footer-container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    text-align: left;
    margin-bottom: 50px;
    align-items: start;
}
@media(max-width: 900px) {
    .footer-container { grid-template-columns: 1fr 1fr; }
}
@media(max-width: 600px) {
    .footer-container { grid-template-columns: 1fr; }
}
.footer-col { width: 100%; max-width: none; }
.footer-col h3 {
    color: var(--blue);
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    margin-bottom: 25px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
}
.footer-col p {
    color: #9ab;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 20px;
}
.footer-col ul { 
    list-style: none; 
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.footer-col ul li { margin-bottom: 0; }
.footer-col ul li a {
    color: #9ab;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s;
}
.footer-col ul li a:hover {
    color: var(--blue);
    padding-left: 5px;
}
.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    color: #9ab;
    font-size: 0.9rem;
    line-height: 1.4;
}
.footer-contact-item svg {
    color: var(--blue);
    flex-shrink: 0;
    margin-top: 2px;
}
.footer-bottom {
    text-align: center;
    padding-top: 25px;
    border-top: 1px solid rgba(0, 212, 255, 0.1);
    color: #556677;
    font-size: 0.85rem;
}
/* === SCROLL ANIMATIONS === */
.fade-up {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

.fade-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-left.visible { opacity: 1; transform: translateX(0); }

.fade-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-right.visible { opacity: 1; transform: translateX(0); }

.scale-in {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.scale-in.visible { opacity: 1; transform: scale(1); }

/* Stagger delays */
.delay-1 { transition-delay: 0.1s !important; }
.delay-2 { transition-delay: 0.2s !important; }
.delay-3 { transition-delay: 0.3s !important; }
.delay-4 { transition-delay: 0.4s !important; }
.delay-5 { transition-delay: 0.5s !important; }

/* DNA Labels */
#dna-labels {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}
#dna-labels .dna-label-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}
.dna-label {
    padding: 14px 22px;
    border-radius: 12px;
    border: 1px solid rgba(0,212,255,.25);
    background: rgba(0,15,30,.6);
    backdrop-filter: blur(10px);
}
.dna-label h4 {
    color: var(--blue);
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 4px;
    text-transform: uppercase;
}
.dna-label p {
    color: #9ab;
    font-size: .82rem;
    line-height: 1.5;
    margin: 0;
}
.dna-label.right { text-align: right; }
.dna-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0,212,255,.15);
    border: 1px solid var(--blue);
    color: var(--blue);
    flex-shrink: 0;
}

/* srv-icon specific icons */
.srv-icon svg, .srv-hero-icon svg { color: var(--blue); }
.srv-hero-icon { font-size: 0; }

/* Footer responsive */
@media(max-width: 900px) {
    .footer-container { grid-template-columns: 1fr !important; }
    .footer-col ul { flex-direction: column; }
}


/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    background: #030810;
}
::-webkit-scrollbar-track {
    background: #030810;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00d4ff, #0066ff);
    border-radius: 10px;
    border: 2px solid #030810;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #0066ff, #00d4ff);
}

/* WhatsApp Floating Launcher & Direct Buttons — Official WhatsApp Green Overrides */
button#ssm-wa-launcher,
button.ssm-wa-launcher,
#ssm-wa-launcher,
.ssm-wa-launcher {
    background: #25D366 !important;
    background-color: #25D366 !important;
    background-image: none !important;
    color: #ffffff !important;
    width: 58px !important;
    height: 58px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: none !important;
}
button#ssm-wa-launcher:hover,
button.ssm-wa-launcher:hover,
#ssm-wa-launcher:hover,
.ssm-wa-launcher:hover {
    background: #20ba59 !important;
    background-color: #20ba59 !important;
    background-image: none !important;
}
.ssm-wa-btn-primary,
a.ssm-wa-btn-primary,
button.ssm-wa-btn-primary {
    background: #25D366 !important;
    background-color: #25D366 !important;
    background-image: none !important;
    border-color: #25D366 !important;
    color: #ffffff !important;
}
.ssm-wa-btn-primary:hover,
a.ssm-wa-btn-primary:hover,
button.ssm-wa-btn-primary:hover {
    background: #20ba59 !important;
    background-color: #20ba59 !important;
    background-image: none !important;
    border-color: #20ba59 !important;
}