/* PB Twins Digitech — public site + portals. Layout language follows the NICSI portal:
   tricolour strip, utility/accessibility bar, brand bar, blue main nav, notice ticker. */
:root{
  --navy:#0c2a5a; --blue:#1565c0; --blue-2:#2f80ed; --sky:#e8f0fc; --paper:#eaeded;
  --saffron:#ffc907; --saffron-d:#e0ac00; --green:#018c40; --red:#c62828;
  --ink:#1c2733; --muted:#5b6776; --line:#d5dbd6; --white:#fff;
  --radius:.5rem;
}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6}

/* ===== PROFESSIONAL ANIMATIONS ===== */
/* Fade in on scroll */
.fade-in-up{opacity:0;transform:translateY(30px);transition:opacity 0.6s ease-out,transform 0.6s ease-out}
.fade-in-up.visible{opacity:1;transform:translateY(0)}
.fade-in-left{opacity:0;transform:translateX(-30px);transition:opacity 0.6s ease-out,transform 0.6s ease-out}
.fade-in-left.visible{opacity:1;transform:translateX(0)}
.fade-in-right{opacity:0;transform:translateX(30px);transition:opacity 0.6s ease-out,transform 0.6s ease-out}
.fade-in-right.visible{opacity:1;transform:translateX(0)}
.fade-in-scale{opacity:0;transform:scale(0.9);transition:opacity 0.5s ease-out,transform 0.5s ease-out}
.fade-in-scale.visible{opacity:1;transform:scale(1)}

/* Stagger animations for child elements */
.stagger-children>*{opacity:0;transform:translateY(20px);transition:opacity 0.5s ease-out,transform 0.5s ease-out}
.stagger-children.visible>*:nth-child(1){transition-delay:0.1s}
.stagger-children.visible>*:nth-child(2){transition-delay:0.2s}
.stagger-children.visible>*:nth-child(3){transition-delay:0.3s}
.stagger-children.visible>*:nth-child(4){transition-delay:0.4s}
.stagger-children.visible>*:nth-child(5){transition-delay:0.5s}
.stagger-children.visible>*:nth-child(6){transition-delay:0.6s}
.stagger-children.visible>*{opacity:1;transform:translateY(0)}

/* Pulse animation for attention */
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.pulse{animation:pulse 2s infinite}

/* Bounce animation */
@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}
.bounce{animation:bounce 2s infinite}

/* Shake animation */
@keyframes shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-5px)}20%,40%,60%,80%{transform:translateX(5px)}}
.shake:hover{animation:shake 0.5s}

/* Loading shimmer */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.shimmer{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}

/* Rotate animation */
@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.rotate{animation:rotate 1s linear infinite}

/* Float animation */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.float{animation:float 3s ease-in-out infinite}

/* Glow effect */
@keyframes glow{0%,100%{box-shadow:0 0 5px rgba(255,201,7,0.5)}50%{box-shadow:0 0 20px rgba(255,201,7,0.8),0 0 30px rgba(255,201,7,0.6)}}
.glow{animation:glow 2s ease-in-out infinite}

/* Slide in from bottom */
@keyframes slideInUp{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}
.slide-in-up{animation:slideInUp 0.6s ease-out}

/* Smooth color transition */
@keyframes colorShift{0%{color:var(--blue)}50%{color:var(--saffron)}100%{color:var(--blue)}}
.color-shift{animation:colorShift 3s ease-in-out infinite}

/* Progress bar animation */
@keyframes progress{from{width:0}to{width:100%}}
.progress-animate{animation:progress 1.5s ease-out}

/* Typing effect */
@keyframes typing{from{width:0}to{width:100%}}
@keyframes blink{50%{border-color:transparent}}
.typing{overflow:hidden;white-space:nowrap;border-right:3px solid var(--saffron);animation:typing 3s steps(40) 1s forwards,blink 0.75s step-end infinite}
h1,h2,h3,h4,h5{font-weight:700;color:var(--navy);line-height:1.25}
a{color:var(--blue)}
.skip{position:absolute;left:-999px;top:0;background:var(--saffron);color:#000;padding:.5rem 1rem;z-index:2000}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--saffron);outline-offset:2px}

/* ---- Top strips ---- */
.tricolor{height:5px;background:linear-gradient(90deg,var(--saffron) 33.3%,#fff 33.3% 66.6%,var(--green) 66.6%)}
.utilbar{background:var(--navy);color:#dbe6fb;font-size:.8rem}
.utilbar .container{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;align-items:center;justify-content:space-between;padding-top:.35rem;padding-bottom:.35rem}
.utilbar a,.utilbar button{color:#dbe6fb;text-decoration:none;background:none;border:0;padding:.1rem .45rem;font-size:.8rem}
.utilbar a:hover,.utilbar button:hover{color:var(--saffron)}
.utilbar .acc{display:flex;align-items:center;gap:.15rem;flex-wrap:wrap}
.utilbar .sep{opacity:.35}
.utilbar .login-link{background:var(--saffron);color:#111!important;border-radius:3px;font-weight:600;padding:.15rem .7rem}

/* ---- Brand bar ---- */
.brandbar{background:#fff;border-bottom:1px solid var(--line)}
.brandbar .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.7rem;padding-bottom:.7rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none}
.brand img{height:56px;width:56px}
.brand b{display:block;font-size:1.35rem;color:var(--navy);line-height:1.1}
.brand small{color:var(--muted);font-size:.8rem}
.brand-contact{display:flex;gap:1.5rem;align-items:center;font-size:.85rem;color:var(--muted);flex-wrap:wrap}
.brand-contact strong{display:block;color:var(--navy)}

/* ---- Main nav ---- */
.mainnav{background:var(--blue);position:sticky;top:0;z-index:1020;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.mainnav .navbar{padding:0}
.mainnav .nav-link{color:#fff;font-weight:500;padding:.85rem 1.05rem;font-size:.93rem;border-bottom:3px solid transparent}
.mainnav .nav-link:hover,.mainnav .nav-link.active{background:var(--navy);border-bottom-color:var(--saffron);color:#fff}
.mainnav .dropdown-menu{border-radius:0 0 var(--radius) var(--radius);border:0;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:.4rem}
.mainnav .dropdown-item{font-size:.9rem;padding:.55rem .9rem;border-radius:4px}
.mainnav .dropdown-item i{width:1.4rem;color:var(--blue)}
.mainnav .navbar-toggler{border-color:rgba(255,255,255,.5);margin:.4rem 0}
.mainnav .navbar-toggler-icon{filter:invert(1)}
.btn-saffron{background:var(--saffron);border:0;color:#111;font-weight:700;border-radius:var(--radius)}
.btn-saffron:hover{background:var(--saffron-d);color:#111}
.btn-navy{background:var(--navy);border:0;color:#fff;font-weight:600;border-radius:var(--radius)}
.btn-navy:hover{background:var(--blue);color:#fff}
.btn-outline-navy{border:2px solid var(--navy);color:var(--navy);font-weight:600;border-radius:var(--radius);background:transparent}
.btn-outline-navy:hover{background:var(--navy);color:#fff}

/* ---- Notice ticker ---- */
.ticker{background:#fff9db;border-bottom:1px solid #f1e1a0;font-size:.88rem}
.ticker .container{display:flex;align-items:center;gap:.8rem;overflow:hidden;padding-top:.4rem;padding-bottom:.4rem}
.ticker .tag{background:var(--saffron);color:#111;font-weight:700;padding:.1rem .7rem;border-radius:3px;white-space:nowrap}
.ticker .roll{overflow:hidden;flex:1}
.ticker .roll span{display:inline-block;white-space:nowrap;padding-left:100%;animation:roll 38s linear infinite}
.ticker .roll:hover span{animation-play-state:paused}
@keyframes roll{to{transform:translateX(-100%)}}

/* ---- Hero ---- */
.hero{background:linear-gradient(120deg,var(--navy) 0%,var(--blue) 70%);color:#fff;padding:3.5rem 0 4rem;position:relative}
.hero h1{color:#fff;font-size:clamp(1.9rem,4vw,2.9rem);max-width:18em}
.hero p.lead{color:#d6e4fb;max-width:36rem}
.hero .quick{background:#fff;color:var(--ink);border-radius:var(--radius);box-shadow:0 14px 40px rgba(0,0,0,.25);overflow:hidden}
.hero .quick h2{font-size:1rem;margin:0;padding:.8rem 1.2rem;background:var(--sky);color:var(--navy);border-bottom:3px solid var(--saffron)}
.hero .quick a{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1.2rem;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:500}
.hero .quick a:last-child{border-bottom:0}
.hero .quick a:hover{background:var(--sky);color:var(--blue)}
.hero .quick a i:first-child{color:var(--blue);margin-right:.6rem}

/* portal-access tiles that overlap the hero */
.access{margin-top:-2.2rem;position:relative;z-index:3}
.access .tile{display:flex;gap:1rem;align-items:center;background:#fff;border:1px solid var(--line);border-top:4px solid var(--saffron);border-radius:var(--radius);padding:1.1rem 1.2rem;text-decoration:none;color:var(--ink);height:100%;box-shadow:0 6px 20px rgba(12,42,90,.08);transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
.access .tile:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 15px 35px rgba(12,42,90,.2);border-color:var(--saffron)}
.access .tile i{font-size:1.9rem;color:var(--blue);transition:transform 0.3s ease}
.access .tile:hover i{transform:scale(1.1) rotate(5deg)}
.access .tile b{display:block;color:var(--navy)}
.access .tile small{color:var(--muted)}

/* ---- Sections ---- */
.sec{padding:3.5rem 0}
.sec.white{background:#fff}
.sec-head{margin-bottom:2rem}
.sec-head h2{font-size:clamp(1.5rem,3vw,2rem);position:relative;padding-bottom:.6rem;display:inline-block}
.sec-head h2::after{content:'';position:absolute;left:0;bottom:0;width:70%;height:4px;background:linear-gradient(90deg,var(--saffron) 50%,var(--green) 50%);border-radius:2px}
.sec-head p{color:var(--muted);max-width:42rem;margin-top:.7rem}

.svc{display:block;height:100%;background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:var(--radius);padding:1.2rem 1.3rem;text-decoration:none;color:var(--ink);transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
.svc:hover{border-left-color:var(--saffron);box-shadow:0 12px 30px rgba(12,42,90,.15);transform:translateY(-4px);color:var(--ink)}
.svc i{font-size:1.5rem;color:var(--blue);transition:transform 0.3s ease}
.svc:hover i{transform:scale(1.15) rotate(-5deg)}
.svc h3{font-size:1.02rem;margin:.6rem 0 .3rem}
.svc p{font-size:.88rem;color:var(--muted);margin:0}

.about-list li{margin-bottom:.9rem;padding-left:.2rem}
.about-list b{color:var(--navy)}
.msg{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;position:relative}
.msg blockquote{font-family:'Noto Serif',Georgia,serif;font-size:1.02rem;color:#2b3a4d;margin:0 0 1rem}
.msg .who{border-top:3px solid var(--saffron);padding-top:.7rem}
.msg .who b{color:var(--navy)}

.gstbox{background:var(--navy);color:#fff;border-radius:var(--radius);padding:1.6rem}
.gstbox h3{color:#fff;font-size:1.15rem}
.gstbox .v{font-size:1.25rem;font-weight:700;color:var(--saffron);letter-spacing:.05em}

.pcat{display:block;text-decoration:none;color:#fff;background:linear-gradient(135deg,var(--blue),var(--navy));border-radius:var(--radius);padding:1.4rem;height:100%;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden}
.pcat::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left 0.5s}
.pcat:hover::before{left:100%}
.pcat:hover{transform:translateY(-5px);color:#fff;box-shadow:0 12px 30px rgba(21,101,192,0.3)}
.pcat i{font-size:1.8rem;color:var(--saffron);transition:transform 0.3s ease}
.pcat:hover i{transform:scale(1.2) rotate(10deg)}
.pcat h3{color:#fff;font-size:1.05rem;margin:.6rem 0 .2rem}
.pcat p{margin:0;font-size:.85rem;color:#cfe0fa}

.work{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;height:100%;cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
.work:hover{box-shadow:0 12px 30px rgba(12,42,90,.18);transform:translateY(-3px)}
.work .thumb{height:110px;display:grid;place-items:center;font-size:2.4rem;color:rgba(255,255,255,.9);transition:transform 0.3s ease}
.work:hover .thumb{transform:scale(1.1)}
.work .body{padding:1rem 1.1rem}
.work h3{font-size:1rem;margin:0 0 .25rem}
.work p{font-size:.84rem;color:var(--muted);margin:0 0 .5rem}
.work .tech{font-size:.75rem;color:var(--blue);font-weight:600}

.coe{background:#fff;border:1px solid var(--line);border-top:4px solid var(--green);border-radius:var(--radius);padding:1.4rem;height:100%}
.coe i{font-size:1.8rem;color:var(--green)}

.price{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;height:100%;text-align:center;position:relative}
.price.hot{border:2px solid var(--saffron)}
.price .tag{position:absolute;top:-.8rem;left:50%;transform:translateX(-50%);background:var(--saffron);color:#111;font-size:.72rem;font-weight:700;padding:.15rem .8rem;border-radius:50rem}
.price .amt{font-size:2.2rem;font-weight:800;color:var(--navy)}
.price .amt small{font-size:.85rem;color:var(--muted);font-weight:400}
.price ul{list-style:none;padding:0;text-align:left;font-size:.9rem;margin:1rem 0}
.price li{padding:.3rem 0;display:flex;gap:.5rem}
.price li i{color:var(--green)}

.quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;height:100%}
.quote p{color:#3d4a5c;font-size:.92rem}
.quote .by{display:flex;gap:.7rem;align-items:center}
.quote .av{width:42px;height:42px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:700}

.accordion-button:not(.collapsed){background:var(--sky);color:var(--navy)}
.cbox{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem}
.form-control,.form-select{border-radius:var(--radius);border-color:#c3cfc5}
.form-control:focus,.form-select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(21,101,192,.22)}

/* ---- Footer ---- */
.site-foot{background:var(--navy);color:#c5d6f2;font-size:.9rem}
.site-foot h6{color:#fff;font-size:.95rem;padding-bottom:.5rem;margin-bottom:.8rem;border-bottom:2px solid var(--saffron);display:inline-block}
.site-foot a{color:#c5d6f2;text-decoration:none;display:block;margin-bottom:.4rem}
.site-foot a:hover{color:var(--saffron)}
.site-foot .legal{background:#0a2350;font-size:.8rem}
.site-foot .legal a{display:inline-block;margin:0 .6rem 0 0}
.float-wa{position:fixed;left:14px;bottom:18px;z-index:1030;width:50px;height:50px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;font-size:1.5rem;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.float-wa:hover{color:#fff;transform:scale(1.07)}

/* ---- Login page ---- */
.login-wrap{min-height:60vh;display:grid;place-items:center;padding:3rem 0}
.login-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 14px 40px rgba(12,42,90,.12);width:100%;max-width:440px;overflow:hidden}
.login-tabs{display:flex}
.login-tabs a{flex:1;text-align:center;padding:.85rem .4rem;font-weight:600;font-size:.9rem;color:var(--muted);text-decoration:none;background:var(--sky);border-bottom:3px solid transparent}
.login-tabs a.on{background:#fff;color:var(--navy);border-bottom-color:var(--saffron)}
.demo-box{background:var(--sky);border-radius:var(--radius);font-size:.8rem;padding:.7rem .9rem;color:var(--navy)}

/* ================= PORTALS ================= */
.portal-top{background:var(--navy);color:#fff}
.portal-top .container-fluid{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem}
.portal-top a{color:#fff;text-decoration:none}
.portal-top .brand b{color:#fff;font-size:1.05rem}
.portal-top .brand img{height:38px;width:38px}
.portal-top .who{font-size:.85rem;text-align:right;line-height:1.2}
.portal-top .who small{color:#a9bfe3}
.shell{display:flex;min-height:calc(100vh - 62px)}
.sidenav{width:236px;flex:none;background:#fff;border-right:1px solid var(--line);padding:1rem .6rem}
.sidenav h6{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:1rem .6rem .4rem}
.sidenav a{display:flex;align-items:center;gap:.7rem;padding:.55rem .8rem;border-radius:var(--radius);color:var(--ink);text-decoration:none;font-size:.92rem;font-weight:500}
.sidenav a i{color:var(--blue);width:1.1rem}
.sidenav a:hover{background:var(--sky)}
.sidenav a.on{background:var(--navy);color:#fff}
.sidenav a.on i{color:var(--saffron)}
.content{flex:1;min-width:0;padding:1.5rem 1.6rem}
.page-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem;padding-bottom:.8rem;border-bottom:3px solid var(--saffron)}
.page-head h1{font-size:1.5rem;margin:0}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:1.2rem}
.panel>.hd{padding:.75rem 1.1rem;border-bottom:1px solid var(--line);background:var(--sky);font-weight:700;color:var(--navy);display:flex;justify-content:space-between;align-items:center;border-radius:var(--radius) var(--radius) 0 0}
.panel>.bd{padding:1.1rem}
.kpi{background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:var(--radius);padding:.9rem 1.1rem;height:100%}
.kpi small{color:var(--muted);font-weight:500}
.kpi .n{font-size:1.55rem;font-weight:800;color:var(--navy);line-height:1.2}
.kpi.k2{border-left-color:var(--green)}.kpi.k3{border-left-color:var(--saffron)}.kpi.k4{border-left-color:var(--red)}
table.t{width:100%;font-size:.88rem}
table.t th{background:var(--sky);color:var(--navy);font-weight:700;padding:.6rem .8rem;white-space:nowrap;border-bottom:2px solid var(--line)}
table.t td{padding:.6rem .8rem;border-bottom:1px solid var(--line);vertical-align:middle}
table.t tr:hover td{background:#fafcff}
.pbar{height:8px;background:#e5ebf4;border-radius:50rem;overflow:hidden;min-width:90px}
.pbar>i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--green))}
.pill{display:inline-block;font-size:.74rem;font-weight:600;padding:.15rem .6rem;border-radius:50rem;white-space:nowrap}
.pill.success{background:#dff3e5;color:#0a6a31}.pill.primary{background:#e0ecfb;color:#0e4a98}
.pill.warning{background:#fff3c4;color:#7a5a00}.pill.danger{background:#fde4e4;color:#a11b1b}
.pill.info{background:#def4f8;color:#0b6071}.pill.secondary{background:#eceff3;color:#4a5564}
.timeline{list-style:none;padding:0;margin:0}
.timeline li{position:relative;padding:0 0 1rem 1.4rem;border-left:2px solid var(--line);margin-left:.4rem}
.timeline li::before{content:'';position:absolute;left:-7px;top:.25rem;width:12px;height:12px;border-radius:50%;background:var(--saffron);border:2px solid #fff}
.invoice-doc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:2rem;max-width:900px}
.invoice-doc .ih{border-bottom:4px solid var(--saffron);padding-bottom:1rem;margin-bottom:1.2rem}

/* =====================================
   PREMIUM CEO PROFILE CARD
===================================== */

.ceo-profile-card {
    position: relative;
    height: 100%;
    min-height: 355px;
    padding: 28px 20px 24px;
    overflow: hidden;
    text-align: center;
    background: linear-gradient(145deg, #ffffff, #f3f8fc);
    border: 1px solid rgba(0, 69, 94, 0.12);
    border-radius: 22px;
    box-shadow: 0 8px 28px rgba(0, 45, 65, 0.08);
    transition: all 0.35s ease;
    z-index: 1;
}

.ceo-profile-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(0, 69, 94, 0.16);
    border-color: #00a8c7;
}

/* Background decoration */

.ceo-card-glow {
    position: absolute;
    width: 190px;
    height: 190px;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(
        circle,
        rgba(0, 168, 199, 0.18),
        transparent 70%
    );
    z-index: -1;
}

/* Image alignment */

.ceo-image-area {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    padding-top: 5px;
}

/* Unique gradient border */

.ceo-image-border {
    width: 148px;
    height: 148px;
    padding: 5px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        #00455e,
        #00b4d8,
        #7357db,
        #e83e8c,
        #00455e
    );
    box-shadow: 0 7px 22px rgba(0, 69, 94, 0.22);
    transition: transform 0.4s ease;
}

.ceo-profile-card:hover .ceo-image-border {
    transform: rotate(8deg) scale(1.04);
}

.ceo-image-inner {
    width: 100%;
    height: 100%;
    padding: 4px;
    background: #ffffff;
    border-radius: 50%;
    overflow: hidden;
}

.ceo-profile-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    border: 2px solid #ffffff;
}

/* Verified icon */

.ceo-verified {
    position: absolute;
    right: calc(50% - 73px);
    bottom: 3px;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #00455e;
    color: #ffffff;
    border: 3px solid #ffffff;
    border-radius: 50%;
    font-size: 15px;
}

/* CEO information */

.ceo-profile-content {
    position: relative;
    z-index: 2;
}

.ceo-label {
    display: inline-block;
    margin-bottom: 9px;
    color: #0086a5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.ceo-name {
    margin: 0 0 5px;
    color: #173b4b;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.3;
}

.ceo-designation {
    margin: 0;
    color: #007b9d;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.ceo-divider {
    width: 48px;
    height: 3px;
    margin: 14px auto;
    border-radius: 10px;
    background: linear-gradient(90deg, #00455e, #00b4d8);
}

.ceo-description {
    max-width: 260px;
    margin: 0 auto 15px;
    color: #647681;
    font-size: 12px;
    line-height: 1.7;
}

/* Company branding */

.ceo-company {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 13px;
    color: #00455e;
    background: rgba(0, 69, 94, 0.07);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

/* Mobile responsiveness */

@media (max-width: 575px) {
    .ceo-profile-card {
        min-height: auto;
        padding: 25px 18px;
    }

    .ceo-image-border {
        width: 135px;
        height: 135px;
    }

    .ceo-name {
        font-size: 20px;
    }

    .ceo-description {
        font-size: 13px;
    }
}

/* ---- Accessibility states ---- */
html.gs{filter:grayscale(1)}
html.hc body,html.hc .panel,html.hc .kpi,html.hc .svc,html.hc .cbox,html.hc .msg,html.hc .price,html.hc .quote,html.hc .coe,html.hc .work,html.hc .login-card,html.hc .sidenav,html.hc .invoice-doc,html.hc .brandbar,html.hc .sec.white{background:#000!important;color:#fff!important;border-color:#fff!important}
html.hc h1,html.hc h2,html.hc h3,html.hc h4,html.hc h5,html.hc b,html.hc strong{color:#ffe600!important}
html.hc a,html.hc .sidenav a{color:#ffe600!important}
html.hc table.t th,html.hc .panel>.hd{background:#111!important;color:#ffe600!important}
html.hc table.t td{color:#fff}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- Responsive ---- */
@media(max-width:991px){
  .shell{flex-direction:column}
  .sidenav{width:100%;display:flex;flex-wrap:wrap;gap:.3rem;padding:.6rem;border-right:0;border-bottom:1px solid var(--line)}
  .sidenav h6{display:none}
  .sidenav a{padding:.4rem .7rem;font-size:.85rem}
  .content{padding:1rem}
}
@media print{
  .utilbar,.brandbar,.mainnav,.portal-top,.sidenav,.page-head .btn,.no-print,.float-wa,.tricolor{display:none!important}
  .shell{display:block}.content{padding:0}
  body{background:#fff}.invoice-doc{border:0;padding:0;max-width:100%}
}

/* =============== NICSI-style home refinements =============== */
.utilbar .dropdown-toggle::after{margin-left:.35rem;vertical-align:.15em}
.utilbar .dropdown-menu{font-size:.85rem;border-radius:0 0 var(--radius) var(--radius);border:0;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.utilbar .dropdown-menu a,.utilbar .dropdown-item{color:var(--ink)!important;padding:.45rem 1rem;font-size:.85rem}
.utilbar .dropdown-item:hover{background:var(--sky);color:var(--blue)!important}
.a11y-menu{padding:.7rem;min-width:210px}
.a11y-menu>button{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;color:var(--ink)!important;background:none;border:0;border-radius:4px;padding:.4rem .5rem!important;font-size:.85rem!important}
.a11y-menu>button:hover{background:var(--sky);color:var(--blue)!important}
.a11y-menu>button.on{background:var(--navy);color:#fff!important}
.a11y-menu>button i{color:var(--blue)}
.a11y-menu>button.on i{color:var(--saffron)}
.utilbar .login-link{border:0}

.navhead{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1020;box-shadow:0 2px 10px rgba(12,42,90,.08)}
.navhead .navbar{padding:.5rem 0}
.navhead .brand img{height:50px;width:50px}
.navhead .nav-link{color:var(--navy);font-weight:600;font-size:.92rem;padding:.6rem .8rem!important;border-bottom:3px solid transparent}
.navhead .nav-link:hover{color:var(--blue);border-bottom-color:var(--saffron)}
.contactstrip{background:var(--sky);border-bottom:1px solid var(--line);font-size:.82rem;color:var(--ink)}
.contactstrip .container{display:flex;flex-wrap:wrap;gap:.3rem .8rem;align-items:center;padding-top:.45rem;padding-bottom:.45rem}
.contactstrip a{font-weight:600;text-decoration:none}
.contactstrip .wa{color:#1da851;margin-left:.2rem}
.contactstrip .bar{color:#9fb5d8}

/* Hero slider with numbered tabs */
.hero2{background:linear-gradient(115deg,#081f45 0%,var(--navy) 35%,var(--blue) 100%);color:#fff;position:relative;overflow:hidden}
.hero2::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,rgba(255,201,7,.18),transparent 45%),radial-gradient(circle at 10% 90%,rgba(255,201,7,.15),transparent 40%)}
.hero2 .carousel-item{padding:3rem 0 2.2rem;min-height:430px}
.hero2 .eyebrow{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:50rem;padding:.2rem .9rem;font-size:.82rem;margin-bottom:.9rem}
.hero2 h1,.hero2 h2.slide-title{color:#fff;font-size:clamp(1.8rem,3.6vw,2.7rem);max-width:17em}
.hero2 p.lead{color:#d6e4fb;max-width:35rem;font-size:1.02rem}
.quickpaths{margin-top:1.4rem}
.quickpaths small{display:block;color:#b6caec;margin-bottom:.4rem;font-weight:600}
.quickpaths a{display:inline-block;margin:0 .4rem .4rem 0;padding:.35rem .9rem;border:1px solid rgba(255,255,255,.4);border-radius:50rem;color:#fff;text-decoration:none;font-size:.85rem}
.quickpaths a:hover{background:var(--saffron);border-color:var(--saffron);color:#111}
.svc-panel{background:#fff;color:var(--ink);border-radius:var(--radius);box-shadow:0 16px 44px rgba(0,0,0,.3);overflow:hidden}
.svc-panel h3{margin:0;font-size:.95rem;padding:.75rem 1.1rem;background:var(--sky);color:var(--navy);border-bottom:3px solid var(--saffron)}
.svc-panel .list{max-height:300px;overflow:auto}
.svc-panel a{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.65rem 1.1rem;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:.9rem;font-weight:500}
.svc-panel a:hover{background:var(--sky);color:var(--blue)}
.svc-panel a i:first-child{color:var(--blue)}
.svc-panel a:last-child{border-bottom:0}
.slidebar{position:relative;z-index:3;background:rgba(6,23,54,.6);border-top:1px solid rgba(255,255,255,.15)}
.slidebar .container{display:flex;align-items:stretch;gap:.5rem;flex-wrap:wrap}
.slidetabs{display:flex;flex:1;flex-wrap:wrap}
.slidetabs button{flex:1;min-width:150px;text-align:left;background:none;border:0;border-bottom:4px solid transparent;color:#bccfef;padding:.8rem .9rem;font-size:.85rem;font-weight:600}
.slidetabs button b{color:var(--saffron);margin-right:.5rem;font-size:1rem}
.slidetabs button.active{color:#fff;border-bottom-color:var(--saffron);background:rgba(255,255,255,.06)}
.slidectl{display:flex;align-items:center;gap:.3rem}
.slidectl button{background:rgba(255,255,255,.12);border:0;color:#fff;border-radius:4px;padding:.35rem .7rem;font-size:.8rem}
.slidectl button:hover{background:var(--saffron);color:#111}

/* Particulars band (NICSI GST particulars) */
.particulars{background:var(--navy);color:#fff;border-radius:var(--radius);padding:1.6rem 1.8rem;border-left:6px solid var(--saffron)}
.particulars .lbl{font-size:.78rem;color:#a9bfe3}
.particulars .val{font-size:1.2rem;font-weight:700;color:var(--saffron);letter-spacing:.04em}
.particulars h2{color:#fff;font-size:1.25rem}

/* Project portfolio category cards */
.ppcard{display:block;height:100%;background:#fff;border:1px solid var(--line);border-bottom:4px solid var(--blue);border-radius:var(--radius);padding:1.4rem;text-decoration:none;color:var(--ink);transition:all .2s}
.ppcard:hover{border-bottom-color:var(--saffron);box-shadow:0 12px 30px rgba(12,42,90,.14);transform:translateY(-3px);color:var(--ink)}
.ppcard i.big{font-size:1.9rem;color:var(--blue)}
.ppcard h3{font-size:1.1rem;margin:.7rem 0 .3rem}
.ppcard p{font-size:.88rem;color:var(--muted);margin:0 0 .8rem}
.ppcard .go{font-weight:700;color:var(--blue);font-size:.88rem}

/* Service offerings grid */
.offer{display:block;height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.15rem 1.2rem;text-decoration:none;color:var(--ink);position:relative;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);overflow:hidden}
.offer::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--blue);border-radius:var(--radius) 0 0 var(--radius);transition:background 0.3s, width 0.3s}
.offer:hover{box-shadow:0 12px 30px rgba(12,42,90,.15);transform:translateY(-4px);color:var(--ink)}
.offer:hover::before{background:var(--saffron);width:6px}
.offer h3{font-size:1rem;margin:0 0 .3rem}
.offer p{margin:0;font-size:.85rem;color:var(--muted)}

/* Important links strip */
.linkstrip{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.3rem 0}
.linkstrip .chips{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.linkstrip a{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1.1rem;border:1px solid var(--line);border-radius:50rem;text-decoration:none;color:var(--navy);font-weight:600;font-size:.88rem;background:var(--paper)}
.linkstrip a:hover{border-color:var(--saffron);background:#fff9db}
.social-row a{display:inline-flex;align-items:center;gap:.5rem;margin:0 .6rem .6rem 0;padding:.5rem 1rem;border-radius:var(--radius);border:1px solid var(--line);text-decoration:none;font-weight:600;color:var(--navy);background:#fff}
.social-row a:hover{border-color:var(--saffron)}

.foot-meta{background:#0d2f66;font-size:.82rem;color:#a9bfe3;border-top:1px solid rgba(255,255,255,.08)}
.foot-meta b{color:#fff}

/* extra accessibility states */
html.rf body,html.rf h1,html.rf h2,html.rf h3,html.rf h4,html.rf h5,html.rf .brand b{font-family:Arial,Verdana,sans-serif!important}
html.hl a:not(.btn){background:#ffe600!important;color:#000!important;text-decoration:underline!important;outline:1px solid #000}
html.ts body{letter-spacing:.05em;word-spacing:.16em;line-height:1.95}
html.rm *,html.rm *::before,html.rm *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.hc .navhead,html.hc .contactstrip,html.hc .linkstrip,html.hc .ppcard,html.hc .offer,html.hc .svc-panel,html.hc .a11y-menu{background:#000!important;color:#fff!important;border-color:#fff!important}
@media(max-width:767px){.slidetabs button{min-width:48%}.hero2 .carousel-item{min-height:0}}

.offer:target{outline:3px solid var(--saffron);background:#fff9db;animation:flashTarget 1.6s ease 1}
@keyframes flashTarget{0%{box-shadow:0 0 0 0 rgba(255,201,7,.7)}100%{box-shadow:0 0 0 18px rgba(255,201,7,0)}}

/* =====================================================================
   AMAZON.IN-STYLE LAYER  (colours from the PB Twins logo: green + yellow)
   ===================================================================== */
:root{--navy-2:#173f82;--yellow:#ffc907;--yellow-d:#f0b800;--green-d:#0a6a31}
body.amz{background:#eaeded}
.btn-yellow{background:var(--yellow);border:1px solid #e0ac00;color:#0b2a15;font-weight:700;border-radius:50rem}
.btn-yellow:hover{background:var(--yellow-d);color:#0b2a15}
.text-primary{color:var(--blue)!important}
.ticker .container-xl{display:flex;align-items:center;gap:.8rem;overflow:hidden;padding-top:.4rem;padding-bottom:.4rem}

/* ---- header ---- */
.amz-head{position:sticky;top:0;z-index:1030}
.amz-row1{background:var(--navy);padding:.55rem 0}
.amz-logo{flex:none;background:#fff;border-radius:8px;padding:2px 8px;display:block;line-height:0}
.amz-logo img{height:48px;width:auto}
.amz-allbtn{background:none;border:0;color:#fff;font-size:1.7rem;line-height:1;padding:0 .2rem}
.amz-search{display:flex;min-width:0;border-radius:8px;overflow:hidden;background:#fff;border:2px solid transparent}
.amz-search:focus-within{border-color:var(--yellow);box-shadow:0 0 0 2px rgba(255,201,7,.5)}
.amz-search select{border:0;background:#e8ece8;color:#333;font-size:.82rem;padding:0 .5rem;max-width:130px;border-right:1px solid #cdd3cd;border-radius:0}
.amz-search input{border:0;flex:1;min-width:0;padding:.55rem .8rem;font-size:.95rem;outline:0}
.amz-search button{border:0;background:var(--yellow);color:#0b2a15;padding:0 1.1rem;font-size:1.15rem}
.amz-search button:hover{background:var(--yellow-d)}
.amz-link{display:block;color:#fff;text-decoration:none;line-height:1.15;padding:.35rem .5rem;border:1px solid transparent;border-radius:3px;white-space:nowrap}
.amz-link:hover{border-color:#fff;color:#fff;text-decoration:none}
.amz-link small{display:block;font-size:.72rem;color:#fff;text-decoration:none}
.amz-link b{font-size:.88rem;color:#fff;text-decoration:none}
.amz-link .dropdown-toggle::after{display:none}
.amz-link .dropdown-toggle{text-decoration:none;color:#fff}
.amz-link .dropdown-toggle:hover{text-decoration:none;color:#fff}
.amz-link .dropdown-toggle small{text-decoration:none;color:#fff}
.amz-link .dropdown-toggle b{text-decoration:none;color:#fff}
.amz-quote{display:flex;align-items:center;gap:.45rem}
.amz-quote i{font-size:1.5rem;color:var(--yellow)}
.amz-menu{min-width:240px;border:0;border-radius:8px;box-shadow:0 12px 34px rgba(0,0,0,.3);padding:.6rem 0}
.amz-menu .dropdown-item{font-size:.9rem;padding:.5rem 1rem}
.amz-menu .dropdown-item:hover{background:var(--sky);color:var(--blue)}
.amz-row2{background:var(--navy-2)}
.amz-row2 .container-xl{min-height:40px}
.amz-all{align-items:center;background:none;border:1px solid transparent;color:#fff;font-weight:700;padding:.4rem .7rem;border-radius:3px;font-size:.92rem}
.amz-cats{display:flex;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.amz-cats::-webkit-scrollbar{display:none}
.amz-cats a,.amz-all:hover,.amz-a11y:hover{color:#fff;text-decoration:none}
.amz-cats a{color:#fff;font-size:.88rem;padding:.55rem .75rem;border:1px solid transparent;border-radius:3px}
.amz-cats a:hover,.amz-all:hover,.amz-a11y:hover{border-color:#fff}
.amz-a11y{background:none;border:1px solid var(--saffron);color:#fff;font-size:.85rem;padding:.4rem .6rem;border-radius:3px;white-space:nowrap}
.amz-a11y::after{margin-left:.3rem}
.amz-row2 .dropdown{flex:none}
.amz-off{width:330px;max-width:88vw}
.amz-off .offcanvas-header{background:var(--navy-2);color:#fff}
.amz-off h3{font-size:1.05rem;padding:.9rem 1.4rem .3rem;margin:0}
.amz-off a{display:flex;justify-content:space-between;align-items:center;padding:.65rem 1.4rem;color:#222;text-decoration:none;font-size:.9rem}
.amz-off a:hover{background:#eaeded}
.amz-off hr{margin:.5rem 0}

/* ---- hero ---- */
.amz-hero{background:linear-gradient(135deg,#0a2358 0%,#1565c0 58%,#018c40 100%);color:#fff;position:relative;overflow:hidden;padding-bottom:7.5rem}
.amz-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 88% 12%,rgba(255,201,7,.35),transparent 42%);animation:gradientShift 8s ease-in-out infinite}
@keyframes gradientShift{0%,100%{opacity:1}50%{opacity:0.7}}
.amz-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:9rem;background:linear-gradient(to bottom,rgba(234,237,237,0),#eaeded 92%)}
.amz-hero .carousel-item{padding:3.2rem 0 1rem;min-height:340px}
.amz-hero .container-xl{position:relative;z-index:2}
.amz-hero h1,.amz-hero .slide-title{color:#fff;font-size:clamp(1.7rem,3.4vw,2.6rem);max-width:19em;font-weight:800;animation:slideInUp 0.8s ease-out}
.amz-hero .lead{color:#dce8fb;max-width:36rem;font-size:1.02rem;margin:1rem 0 1.5rem;animation:slideInUp 0.8s ease-out 0.2s backwards}
.amz-hero .btn{animation:slideInUp 0.8s ease-out 0.4s backwards}
.amz-art{position:relative;height:250px}
.amz-art span{position:absolute;display:grid;place-items:center;border-radius:22px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(2px);transition:transform 0.5s ease}
.amz-art .a0{width:150px;height:150px;left:6%;top:10px;animation:float 4s ease-in-out infinite}.amz-art .a0 i{font-size:4rem}
.amz-art .a1{width:120px;height:120px;right:8%;top:0;background:var(--yellow);border-color:var(--yellow);animation:float 4s ease-in-out 1s infinite}.amz-art .a1 i{font-size:3.2rem;color:#0b2a15}
.amz-art .a2{width:130px;height:130px;left:36%;bottom:0;animation:float 4s ease-in-out 2s infinite}.amz-art .a2 i{font-size:3.4rem}
.amz-hero .carousel-control-prev,.amz-hero .carousel-control-next{width:5%;min-width:44px;z-index:3;top:0;bottom:8rem;opacity:1;color:#fff;font-size:2.2rem;transition:all 0.3s ease}
.amz-hero .carousel-control-prev:hover,.amz-hero .carousel-control-next:hover{background:rgba(0,0,0,.18);transform:scale(1.1)}
.amz-pause{position:absolute;z-index:4;right:1rem;top:1rem;background:rgba(0,0,0,.35);color:#fff;border:0;border-radius:50%;width:34px;height:34px;transition:all 0.3s ease}
.amz-pause:hover{background:var(--yellow);color:#111;transform:rotate(180deg)}

/* ---- overlap cards ---- */
.amz-cards{position:relative;z-index:5;margin-top:-6.5rem}
.acard{background:#fff;padding:1.1rem 1.2rem;height:100%;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.08);display:flex;flex-direction:column;transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
.acard:hover{box-shadow:0 8px 25px rgba(0,0,0,.12);transform:translateY(-3px)}
.acard h2{font-size:1.18rem;font-weight:700;color:#111;margin-bottom:.8rem}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:.8rem .7rem;flex:1}
.tiles a{font-size:.8rem;color:#333;text-decoration:none;line-height:1.25;transition:color 0.2s ease}
.tiles a:hover{color:var(--green-d)}
.tile-ic{display:grid;place-items:center;aspect-ratio:1/.72;background:linear-gradient(135deg,var(--sky),#d6e4fb);border-radius:4px;margin-bottom:.3rem;font-size:2rem;color:var(--blue);transition:transform 0.3s ease}
.tiles a:hover .tile-ic{transform:scale(1.1) rotate(5deg)}
.tiles a:nth-child(2) .tile-ic{background:linear-gradient(135deg,#fff3b8,var(--yellow));color:#5a4300}
.tiles a:nth-child(3) .tile-ic{background:linear-gradient(135deg,#d6e4fb,#a6d9b5)}
.tiles a:nth-child(4) .tile-ic{background:linear-gradient(135deg,#fff3b8,#ffe36a);color:#5a4300}
.acard .more{display:block;margin-top:.9rem;font-size:.85rem;color:#007185;text-decoration:none;transition:color 0.2s ease}
.acard .more:hover{color:#c45500;text-decoration:underline}
.acard.signin{background:#fff}
.btn-outline-navy{border-radius:50rem}

/* ---- value strip ---- */
.amz-values{padding:1.3rem 0 .4rem}
.amz-values .col-6,.amz-values .col-lg-3{}
.amz-values i{display:block;font-size:1.8rem;color:var(--blue)}
.amz-values b{display:block;color:#111}
.amz-values small{color:#555}

/* ---- SEO content section ---- */
.amz-sec .amz-box h2{font-size:1.5rem;color:var(--navy);margin-bottom:1rem}
.amz-sec .amz-box .lead{font-size:1.1rem;color:var(--muted);margin-bottom:1.5rem}
.amz-sec .amz-box h3{font-size:1.15rem;color:var(--blue);margin-top:1.5rem;margin-bottom:0.5rem}
.amz-sec .amz-box p{color:var(--ink);line-height:1.7}

/* SEO Cards */
.seo-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:2rem;height:100%;text-align:center;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden}
.seo-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--blue),var(--saffron),var(--green));transform:scaleX(0);transition:transform 0.4s ease}
.seo-card:hover::before{transform:scaleX(1)}
.seo-card:hover{transform:translateY(-8px);box-shadow:0 15px 40px rgba(12,42,90,.18);border-color:var(--saffron)}
.seo-card-icon{width:80px;height:80px;margin:0 auto 1.5rem;border-radius:50%;background:linear-gradient(135deg,var(--sky),#d6e4fb);display:grid;place-items:center;font-size:2.5rem;color:var(--blue);transition:all 0.4s ease}
.seo-card:hover .seo-card-icon{transform:scale(1.15) rotate(10deg);background:linear-gradient(135deg,var(--saffron),#e0ac00);color:#0b2a15}
.seo-card:nth-child(2) .seo-card-icon{background:linear-gradient(135deg,#d8f1e1,#9fdab5);color:var(--green)}
.seo-card:nth-child(2):hover .seo-card-icon{background:linear-gradient(135deg,var(--green),#0a6a31);color:#fff}
.seo-card:nth-child(3) .seo-card-icon{background:linear-gradient(135deg,#fff3b8,var(--saffron));color:#5a4300}
.seo-card:nth-child(3):hover .seo-card-icon{background:linear-gradient(135deg,var(--blue),var(--navy));color:#fff}
.seo-card:nth-child(4) .seo-card-icon{background:linear-gradient(135deg,#d6e4fb,#a6d9b5);color:var(--blue)}
.seo-card:nth-child(4):hover .seo-card-icon{background:linear-gradient(135deg,var(--saffron),#e0ac00);color:#0b2a15}
.seo-card h3{font-size:1.2rem;font-weight:700;color:var(--navy);margin-bottom:1rem;transition:color 0.3s ease}
.seo-card:hover h3{color:var(--blue)}
.seo-card p{color:var(--muted);font-size:0.95rem;line-height:1.6;margin-bottom:1.5rem}
.seo-card-features{display:flex;flex-direction:column;gap:0.5rem}
.seo-card-features span{font-size:0.85rem;color:var(--ink);font-weight:500;display:flex;align-items:center;justify-content:center;gap:0.3rem}
.seo-card-features i{font-size:1rem}
@media(min-width:992px){
  .seo-card:nth-child(1){animation-delay:0.1s}
  .seo-card:nth-child(2){animation-delay:0.2s}
  .seo-card:nth-child(3){animation-delay:0.3s}
  .seo-card:nth-child(4){animation-delay:0.4s}
}

/* ---- boxes / titles ---- */
.amz-sec{padding:.8rem 0}
.amz-box{background:#fff;padding:1.3rem 1.4rem;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.amz-title{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.amz-title h2{font-size:1.4rem;font-weight:700;color:#111;margin:0}
.amz-title a{font-size:.88rem;color:#007185;text-decoration:none}
.amz-title a:hover{color:#c45500;text-decoration:underline}
.chips{display:flex;gap:.4rem;flex-wrap:wrap}
.chip{background:#fff;border:1px solid #c9d1c9;border-radius:50rem;padding:.25rem .85rem;font-size:.8rem;font-weight:600;color:#333}
.chip:hover{background:var(--sky)}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}

/* service tiles */
.offer{border-left:1px solid var(--line);border-radius:4px;padding:1rem;background:#fff;display:flex;flex-direction:column;border:1px solid #e3e6e6}
.offer::before{display:none}
.offer .thumb{display:grid;place-items:center;height:92px;border-radius:4px;background:linear-gradient(135deg,var(--sky),#d6e4fb);font-size:2.4rem;color:var(--blue);margin-bottom:.7rem}
.offer:nth-child(odd) .thumb{}
.offer h3{font-size:.98rem;color:#111}
.offer p{font-size:.82rem;color:#555;flex:1}
.offer .go{font-size:.82rem;color:#007185;margin-top:.5rem}
.offer:hover{border-color:var(--yellow);box-shadow:0 4px 14px rgba(0,0,0,.12);transform:none}
.offer:hover .go{color:#c45500}
.offer.hit,.offer:target{outline:3px solid var(--yellow);background:#fffbe0}

/* horizontal row */
.rowwrap{position:relative}
.hscroll{display:flex;gap:.9rem;overflow-x:auto;scroll-snap-type:x proximity;padding:.2rem .1rem .6rem;scrollbar-width:thin}
.work-col{flex:0 0 250px;scroll-snap-align:start}
.work-col .work{border:1px solid #e3e6e6;border-radius:4px;height:100%}
.work-col .work:hover{border-color:var(--yellow);box-shadow:0 4px 14px rgba(0,0,0,.12)}
.rowbtn{position:absolute;top:35%;z-index:3;width:36px;height:48px;border:0;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.3);border-radius:4px;font-size:1.1rem;color:#222}
.rowbtn.l{left:-.4rem}.rowbtn.r{right:-.4rem}
.rowbtn:hover{background:var(--yellow)}

/* Work control buttons */
.work-controls{display:flex;justify-content:center;gap:.4rem;margin-top:1rem}
.work-ctrl-btn{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:1rem;border:2px solid var(--navy);background:#fff;color:var(--navy);transition:all 0.25s ease;cursor:pointer}
.work-ctrl-btn:hover{background:var(--yellow);border-color:var(--yellow);color:#0b2a15;transform:scale(1.08);box-shadow:0 3px 10px rgba(255,201,7,.3)}
.work-ctrl-btn:active{transform:scale(0.95)}
.work-ctrl-btn:focus{outline:3px solid var(--yellow);outline-offset:2px}

/* plans */
.plan{border:1px solid #d5dbd6;border-radius:8px;padding:1.5rem;height:100%;position:relative;display:flex;flex-direction:column}
.plan h3{font-size:1.15rem;color:#111}
.plan .amt{font-size:2.4rem;font-weight:700;color:#111;line-height:1.1}
.plan .amt sup{font-size:1rem;top:-.9em;margin-right:.1em}.plan .amt small{font-size:.8rem;color:#555;font-weight:400}
.plan ul{list-style:none;padding:0;margin:1rem 0;flex:1;font-size:.9rem}
.plan li{display:flex;gap:.5rem;padding:.25rem 0}.plan li i{color:var(--green)}
.plan.best{border:2px solid var(--yellow);box-shadow:0 8px 24px rgba(255,201,7,.25)}
.ribbon{position:absolute;top:-.8rem;left:1.2rem;background:var(--yellow);color:#0b2a15;font-size:.74rem;font-weight:800;padding:.15rem .8rem;border-radius:4px}

/* about + reviews */
.statbox{background:var(--sky);border-radius:6px;padding:.7rem}.statbox b,.statbox .stat-number{display:block;font-size:1.5rem;color:var(--navy)}.statbox small{color:#555}
.stars{color:#f5a300;letter-spacing:.1em}.stars.sm{font-size:.9rem}
.verified{color:#c45500;font-size:.75rem;letter-spacing:0;font-weight:600}
.review{display:flex;gap:.9rem;padding:1rem 0;border-bottom:1px solid #e3e6e6}.review:last-child{border:0}
.review-name{font-weight:700;color:var(--navy)}
.value-label{display:block;font-weight:700;color:var(--navy);font-size:1rem}
.review .av{flex:none;width:42px;height:42px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:700}

/* footer */
.amz-top{display:block;text-align:center;background:#2a4f94;color:#fff;padding:.9rem;font-size:.85rem;text-decoration:none;margin-top:1.4rem}
.amz-top:hover{background:#3560ac;color:#fff}
.amz-foot{background:var(--navy-2);color:#ddd}
.amz-foot h6{color:#fff;font-size:1rem;margin-bottom:.8rem}
.amz-foot a{display:block;color:#ddd;text-decoration:none;font-size:.88rem;margin-bottom:.45rem}
.amz-foot a:hover{text-decoration:underline;color:#fff}
.amz-foot2{background:var(--navy);color:#cfe0fa;border-top:1px solid rgba(255,255,255,.15)}
.amz-foot2 a{color:#fff;font-size:1.4rem}.amz-foot2 a:hover{color:var(--yellow)}

html.hc .amz-box,html.hc .acard,html.hc .offer,html.hc .plan,html.hc .work-col .work{background:#000!important;color:#fff!important;border-color:#fff!important}
@media(max-width:991px){.amz-search select{display:none}.amz-hero{padding-bottom:6.5rem}.amz-cards{margin-top:-5.5rem}.rowbtn{display:none}}
@media(max-width:575px){.amz-logo img{height:38px}.amz-hero .carousel-item{padding-top:2rem}}

/* ===== Enhanced Quote Form Styles ===== */
.contact-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .7rem;background:#f8f9fa;border:1px solid #e3e6e6;border-radius:50rem;text-decoration:none;color:#333;font-size:.82rem;font-weight:500;transition:all 0.2s ease}
.contact-badge:hover{background:#fff3b8;border-color:#ffc907;color:#0b2a15;transform:translateY(-1px);box-shadow:0 2px 8px rgba(255,201,7,.15)}

.quote-form-new{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 4px 20px rgba(0,0,0,.08)}
.quote-form-new .form-label{color:#1c2733;font-size:.92rem;margin-bottom:.35rem;font-weight:700;display:block}
.quote-form-new .form-control,.quote-form-new .form-select{border-radius:8px;border:2px solid #e8ecef;padding:.7rem 1rem;font-size:.95rem;transition:all 0.25s ease;background:#fcfcfc}
.quote-form-new .form-control:focus,.quote-form-new .form-select:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(21,101,192,.12);background:#fff}
.quote-form-new .form-control::placeholder{color:#9aa5b1;font-size:.88rem}
.quote-form-new .form-control:hover,.quote-form-new .form-select:hover{border-color:#cbd5e0}
.quote-form-new .form-control.is-invalid,.quote-form-new .form-select.is-invalid{border-color:#c62828;box-shadow:0 0 0 4px rgba(198,40,40,.12)}
.quote-form-new .form-control.is-invalid:focus,.quote-form-new .form-select.is-invalid:focus{border-color:#c62828;box-shadow:0 0 0 4px rgba(198,40,40,.12)}
.quote-form-new .form-check{padding:.6rem 0;display:flex;align-items:center;gap:.7rem;min-height:32px}
.quote-form-new .form-check-input{width:1.4rem;height:1.4rem;border:2px solid #c3cfc5;cursor:pointer;transition:all 0.2s ease;margin-top:0;flex-shrink:0}
.quote-form-new .form-check-input:checked{background-color:var(--blue);border-color:var(--blue);box-shadow:0 0 0 3px rgba(21,101,192,.2)}
.quote-form-new .form-check-label{font-size:.95rem;color:#333;cursor:pointer;font-weight:500;line-height:1.6}

/* Project Type Card Design */
.project-type-card{display:block;position:relative;cursor:pointer;border:2px solid #e8ecef;border-radius:10px;padding:1rem;background:#fcfcfc;transition:all 0.3s ease}
.project-type-card:hover{border-color:var(--blue);background:#fff;box-shadow:0 4px 12px rgba(21,101,192,.12);transform:translateY(-2px)}
.project-type-card input{position:absolute;opacity:0;cursor:pointer}
.project-type-card input:checked+span{border-color:var(--blue);background:linear-gradient(135deg,#e8f0fc,#d6e4fb);box-shadow:0 4px 12px rgba(21,101,192,.15)}
.project-type-card input:checked+span i{color:var(--blue)}
.project-type-card input:checked+span span{color:var(--navy);font-weight:700}
.project-type-card.error{border-color:#c62828;box-shadow:0 0 0 4px rgba(198,40,40,.12)}
.project-type-content{display:flex;align-items:center;gap:.6rem;padding:.2rem;border-radius:8px;transition:all 0.3s ease}
.project-type-content i{font-size:1.4rem;color:#9aa5b1;transition:all 0.3s ease}
.project-type-content span{font-size:.95rem;color:#555;font-weight:500;transition:all 0.3s ease}

/* Captcha Styling */
.captcha-box{background:linear-gradient(135deg,#e8f0fc,#d6e4fb);border:2px solid #c3cfc5;border-radius:8px;padding:.8rem 1.2rem;font-size:1.3rem;font-weight:700;color:var(--navy);min-width:120px;text-align:center;letter-spacing:2px;user-select:none;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.quote-form-new .btn-yellow{transition:all 0.3s ease;border-radius:8px;padding:.75rem 1.5rem;font-size:1rem}
.quote-form-new .btn-yellow:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,201,7,.35)}
.quote-form-new .text-danger{color:#c62828!important;font-weight:600}

/* Contact Info Panel */
.contact-info-panel{background:linear-gradient(135deg,#f8f9fa 0%,#e8f0fc 100%);border-radius:12px;padding:1.8rem;box-shadow:0 4px 20px rgba(0,0,0,.08);border:1px solid #e3e6e6}
.contact-section{padding:1.3rem 0;border-bottom:1px solid #e3e6e6}
.contact-section:last-child{border-bottom:0}
.contact-section h4{font-size:1.05rem;color:var(--navy);margin-bottom:.7rem;font-weight:700;display:flex;align-items:center;gap:.5rem}
.contact-section p{font-size:.9rem;color:#555;margin-bottom:.4rem;line-height:1.7}
.contact-section p strong{color:#333;font-weight:600}
.contact-section a{color:var(--blue);text-decoration:none;transition:all 0.2s ease;font-weight:500}
.contact-section a:hover{color:#000;text-decoration:underline}
.social-links{display:flex;gap:.9rem;margin-top:.6rem}
.social-btn{width:48px;height:48px;border-radius:50%;background:#fff;border:2px solid #e3e6e6;display:grid;place-items:center;font-size:1.4rem;color:var(--navy);text-decoration:none;transition:all 0.3s ease;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.social-btn:hover{background:var(--yellow);border-color:var(--yellow);color:#0b2a15;transform:scale(1.12) rotate(5deg);box-shadow:0 6px 16px rgba(255,201,7,.35)}

/* ---- Portal / dashboard (Amazon Seller-style) ---- */
.btn-saffron{background:var(--yellow);border:1px solid #e0ac00;color:#0b2a15;font-weight:700;border-radius:50rem}
.btn-saffron:hover{background:var(--yellow-d);color:#0b2a15}
body.portal{background:#eaeded}
.portal .amz-row1{padding:.5rem 0}
.portal-tag{color:#fff;font-weight:700;font-size:.9rem;border-left:2px solid var(--yellow);padding-left:.7rem;white-space:nowrap}
.portal .amz-search{max-width:640px}
.portal .amz-search input{padding:.45rem .8rem}
.sidenav{background:#fff;border-right:1px solid #d5dbd6}
.sidenav a{border-left:4px solid transparent;border-radius:0 6px 6px 0}
.sidenav a:hover{background:#f1f5f1}
.sidenav a.on{background:var(--sky);color:var(--navy);border-left-color:var(--yellow);font-weight:700}
.sidenav a.on i{color:var(--blue)}
.sidenav h6{color:#565959;font-weight:700;letter-spacing:.04em}
.page-head{border-bottom:0;padding-bottom:0;margin-bottom:1rem}
.page-head h1{font-size:1.45rem;color:#111}
.panel,.kpi{border:1px solid #d5dbd6;box-shadow:0 1px 3px rgba(0,0,0,.05);border-radius:6px}
.panel>.hd{background:#fff;border-bottom:1px solid #e3e6e6;font-size:1.02rem;color:#111}
.panel>.hd a{font-size:.82rem;font-weight:500;color:#007185}
.kpi{border-left:1px solid #d5dbd6;border-top:4px solid var(--blue);padding:1rem 1.1rem}
.kpi.k2{border-top-color:var(--green);border-left-color:#d5dbd6}.kpi.k3{border-top-color:var(--yellow);border-left-color:#d5dbd6}.kpi.k4{border-top-color:var(--red);border-left-color:#d5dbd6}
.kpi .n{font-size:1.7rem;color:#111}
table.t th{background:#f3f5f3;color:#111;border-bottom:1px solid #d5dbd6}
.greet{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:linear-gradient(120deg,#0a2358,#1565c0 62%,#018c40);color:#fff;border-radius:8px;padding:1.3rem 1.5rem;margin-bottom:1rem;position:relative;overflow:hidden}
.greet::after{content:'';position:absolute;right:-30px;top:-40px;width:180px;height:180px;border-radius:50%;background:rgba(255,201,7,.28)}
.greet h2{color:#fff;font-size:1.5rem;margin:0}
.greet p{margin:.2rem 0 0;color:#dce8fb}
.greet>*{position:relative;z-index:1}
.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.7rem;margin-bottom:1.1rem}
.quick-grid a{background:#fff;border:1px solid #d5dbd6;border-radius:6px;padding:.9rem .6rem;text-align:center;text-decoration:none;color:#111;font-weight:600;font-size:.88rem;transition:all .15s}
.quick-grid a i{display:block;font-size:1.6rem;color:var(--blue);margin-bottom:.2rem}
.quick-grid a:hover{border-color:var(--yellow);box-shadow:0 4px 14px rgba(0,0,0,.1);background:#fffbe0}
.login-wrap{background:#fff}
.login-card{border-radius:8px;border:1px solid #d5dbd6;box-shadow:0 2px 14px rgba(0,0,0,.1)}
.login-tabs a{background:#f3f5f3}
.login-tabs a.on{border-bottom-color:var(--yellow)}
.page-head h1,.portal h1{color:#111}
@media(max-width:991px){.portal-tag{display:none}.sidenav a{border-left:0;border-bottom:3px solid transparent;border-radius:6px}.sidenav a.on{border-bottom-color:var(--yellow)}}


/* ===== Tri-colour accents: blue + green + yellow (Amazon.in tile rhythm) ===== */
.tile-ic{background:linear-gradient(135deg,#e8f0fc,#cfe0fa);color:#1565c0}
.tiles a:nth-child(2) .tile-ic{background:linear-gradient(135deg,#fff3b8,#ffc907);color:#5a4300}
.tiles a:nth-child(3) .tile-ic{background:linear-gradient(135deg,#d8f1e1,#9fdab5);color:#018c40}
.tiles a:nth-child(4) .tile-ic{background:linear-gradient(135deg,#fff3b8,#ffe36a);color:#5a4300}
.offer .thumb{background:linear-gradient(135deg,#e8f0fc,#cfe0fa);color:#1565c0}
.col-6:nth-child(3n+2)>.offer .thumb,.col-md-4:nth-child(3n+2)>.offer .thumb{background:linear-gradient(135deg,#d8f1e1,#9fdab5);color:#018c40}
.col-6:nth-child(3n)>.offer .thumb,.col-md-4:nth-child(3n)>.offer .thumb{background:linear-gradient(135deg,#fff3b8,#ffd84a);color:#5a4300}
.amz-values i{color:#1565c0}
.amz-values .col-6:nth-child(2) i{color:#018c40}
.amz-values .col-6:nth-child(3) i{color:#e0a800}
.amz-values .col-6:nth-child(4) i{color:#1565c0}
.plan li i,.check i{color:#018c40}
.plan.best{border-color:#ffc907}
.statbox{background:#e8f0fc}.statbox:nth-child(2){}
.review .av{background:#1565c0}
.col-4:nth-child(2)>.statbox{background:#dff3e5}.col-4:nth-child(2)>.statbox b,.col-4:nth-child(2)>.statbox .stat-number{color:#018c40}
.col-4:nth-child(3)>.statbox{background:#fff3b8}.col-4:nth-child(3)>.statbox b,.col-4:nth-child(3)>.statbox .stat-number{color:#7a5a00}
.chip.on{background:#1565c0;border-color:#1565c0}
.amz-title a,.acard .more,.offer .go,.panel>.hd a{color:#1565c0}
.amz-hero::before{background:radial-gradient(circle at 88% 12%,rgba(255,201,7,.38),transparent 42%),radial-gradient(circle at 8% 100%,rgba(1,140,64,.35),transparent 45%)}
.amz-art .a0{background:rgba(255,255,255,.16)}
.amz-art .a2{background:#018c40;border-color:#018c40}
.greet::after{background:rgba(255,201,7,.3)}
.quick-grid a i{color:#1565c0}
.quick-grid a:nth-child(3n+2) i{color:#018c40}
.quick-grid a:nth-child(3n) i{color:#e0a800}
.pbar>i{background:linear-gradient(90deg,#1565c0,#018c40)}
.btn-green{background:#018c40;border:1px solid #017a38;color:#fff;font-weight:700;border-radius:50rem}
.btn-green:hover{background:#017a38;color:#fff}
.sidenav a.on{background:#e8f0fc;color:#0c2a5a}
.amz-foot a:hover{color:#ffc907}
.amz-cats a:hover,.amz-all:hover,.amz-a11y:hover,.amz-link:hover{border-color:#ffc907}