:root{
    --primary:#1746a2;
    --primary-dark:#0c2d70;
    --accent:#f4b942;
    --dark:#101828;
    --muted:#667085;
    --light:#f6f8fc;
    --border:#e7ebf3;
    --white:#fff;
}
*{box-sizing:border-box}
body{
    margin:0;
    font-family:"DM Sans",sans-serif;
    color:var(--dark);
    background:#fff;
}
h1,h2,h3,h4,h5{font-family:"Manrope",sans-serif}
a{text-decoration:none}
.navbar{
    background:#fff;
    box-shadow:0 2px 20px rgba(16,24,40,.06);
    padding:unset;
}
.navbar-brand{
    font-family:"Manrope",sans-serif;
    font-size:24px;
    font-weight:800;
    color:var(--primary);
    padding-top: unset;
    padding-bottom: unset;
}
.navbar-brand span{color:var(--accent)}
.navbar-brand img{max-height:100px;width:auto}
.nav-link{
    color:#344054!important;
    font-weight:600;
    margin:0 7px;
}
.nav-link:hover{color:var(--primary)!important}
.btn-main{
    background:var(--primary);
    color:#fff;
    border:0;
    padding:13px 22px;
    border-radius:9px;
    font-weight:700;
}
.btn-main:hover{background:var(--primary-dark);color:#fff}
.btn-outline-main{
    border:1.5px solid var(--primary);
    color:var(--primary);
    padding:12px 21px;
    border-radius:9px;
    font-weight:700;
}
.hero{
    background:
    radial-gradient(circle at 85% 20%,rgba(244,185,66,.18),transparent 30%),
    linear-gradient(135deg,#f4f8ff 0%,#fff 60%);
    padding:90px 0 80px;
    overflow:hidden;
}
.badge-soft{
    display:inline-flex;
    align-items:center;
    gap:7px;
    background:#e9f0ff;
    color:var(--primary);
    padding:8px 13px;
    border-radius:50px;
    font-weight:700;
    font-size:14px;
}
.hero h1{
    font-size:clamp(38px,5vw,65px);
    line-height:1.08;
    font-weight:800;
    margin:20px 0;
}
.hero h1 span{color:var(--primary)}
.hero p{
    color:var(--muted);
    font-size:18px;
    line-height:1.7;
    max-width:600px;
}
.hero-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:24px;
    padding:18px;
    box-shadow:0 25px 60px rgba(23,70,162,.13);
    transform:rotate(2deg);
}
.hero-card-inner{
    min-height:390px;
    border-radius:18px;
    background:linear-gradient(145deg,#1746a2,#0d2d70);
    color:#fff;
    padding:32px;
    position:relative;
    overflow:hidden;
}
.hero-card-inner:after{
    content:"";
    width:220px;height:220px;
    border-radius:50%;
    position:absolute;
    right:-70px;bottom:-80px;
    background:rgba(244,185,66,.18);
}
.hero-icon{
    width:58px;height:58px;
    display:grid;place-items:center;
    border-radius:15px;
    background:rgba(255,255,255,.12);
    font-size:27px;
}
.stats{
    margin-top:-35px;
    position:relative;
    z-index:2;
}
.stat-box{
    background:#fff;
    border:1px solid var(--border);
    padding:25px;
    border-radius:14px;
    text-align:center;
    height:100%;
    box-shadow:0 10px 30px rgba(16,24,40,.05);
}
.stat-box h3{font-size:30px;color:var(--primary);margin:0}
.stat-box p{margin:5px 0 0;color:var(--muted)}
section{padding:85px 0}
.section-head{text-align:center;max-width:720px;margin:0 auto 48px}
.section-head .eyebrow{
    color:var(--primary);
    font-weight:800;
    text-transform:uppercase;
    font-size:13px;
    letter-spacing:1.5px;
}
.section-head h2{font-size:40px;font-weight:800;margin:10px 0 14px}
.section-head p{color:var(--muted);font-size:17px;line-height:1.7}
.service-card{
    height:100%;
    padding:30px;
    border:1px solid var(--border);
    border-radius:16px;
    background:#fff;
    transition:.3s;
}
.service-card:hover{
    transform:translateY(-7px);
    box-shadow:0 18px 45px rgba(16,24,40,.09);
    border-color:#cbd8f3;
}
.service-icon{
    width:58px;height:58px;
    border-radius:14px;
    display:grid;place-items:center;
    background:#edf3ff;
    color:var(--primary);
    font-size:25px;
    margin-bottom:20px;
}
.service-card h4{font-size:21px;font-weight:800}
.service-card p{color:var(--muted);line-height:1.7}
.service-list {
    list-style: none;
    padding: 0;
    margin: 25px 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 25px;
    row-gap: 10px;
}

.service-list li {
    position: relative;
    padding-left: 24px;
    margin: 0;
    color: #344054;
    line-height: 1.5;
    font-size: 15px;
}

.service-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #12b886;
    font-weight: 700;
}
/* .service-list i{color:#12b76a;margin-right:8px} */
@media (max-width: 576px) {
    .service-list {
        grid-template-columns: 1fr;
    }
}
.light-section{background:var(--light)}
.process-card{text-align:center;padding:20px}
.process-number{
    width:55px;height:55px;
    margin:0 auto 18px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    display:grid;place-items:center;
    font-weight:800;font-size:19px;
}
.video-wrap{
    background:#101828;
    border-radius:20px;
    padding:18px;
    max-width:340px;
    margin:auto;
}
.video-box{
    aspect-ratio:9/16;
    border-radius:14px;
    overflow:hidden;
    position:relative;
    background:linear-gradient(145deg,#1746a2,#101828);
    display:flex;
    align-items:end;
}
.video-box .play{
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:65px;height:65px;
    border-radius:50%;
    background:#fff;
    color:var(--primary);
    display:grid;place-items:center;
    font-size:25px;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.video-info{
    color:#fff;
    padding:20px;
    width:100%;
    background:linear-gradient(transparent,rgba(0,0,0,.8));
}
.blog-card{
    height:100%;
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
    background:#fff;
    transition:.3s;
}
.blog-card:hover{transform:translateY(-5px);box-shadow:0 15px 35px rgba(16,24,40,.08)}
.blog-img{
    height:200px;
    display:grid;place-items:center;
    color:#fff;font-size:45px;
    background:linear-gradient(135deg,#1746a2,#5d8ce8);
}
.blog-body{padding:25px}
.blog-body small{color:var(--primary);font-weight:700}
.blog-body p{color:var(--muted);line-height:1.6}
.testimonial{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:30px;
    height:100%;
}
.stars{color:#f4b942;letter-spacing:3px}
.testimonial p{color:#475467;line-height:1.8;font-style:italic}
.avatar{
    width:48px;height:48px;
    border-radius:50%;
    background:#e9f0ff;
    color:var(--primary);
    display:grid;place-items:center;
    font-weight:800;
}
.newsletter{
    background:linear-gradient(135deg,#123c8f,#1746a2);
    color:#fff;
    border-radius:24px;
    padding:55px;
}
.newsletter p{color:#dbe7ff}
.newsletter .form-control{
    height:54px;border:0;border-radius:8px 0 0 8px;
}
.newsletter .btn{border-radius:0 8px 8px 0;background:var(--accent);border:0;font-weight:800}
.contact-box{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:28px;
    height:100%;
}
.contact-item{display:flex;gap:15px;margin:22px 0}
.contact-item i{
    color:var(--primary);
    font-size:22px;
}
footer{
    background:#0b1730;
    color:#aab7ce;
    padding:60px 0 25px;
}
footer h5{color:#fff;margin-bottom:20px}
footer a{color:#aab7ce;display:block;margin:10px 0}
footer a:hover{color:#fff}
.modal-content{border:0;border-radius:18px}
.modal-header{border:0;padding:25px 25px 10px}
.modal-body{padding:10px 25px 25px}
.form-label{font-weight:600}

.hero .carousel-inner{overflow:visible}
.hero .carousel-item{min-height:500px}
.hero .carousel-item .hero-card{animation:heroCardIn .8s ease both}
.hero-indicators{bottom:-30px}
.hero-indicators [data-bs-target]{
    width:9px;height:9px;border:0;border-radius:50%;
    background:#b8c6df;opacity:1;margin:0 5px;
}
.hero-indicators .active{background:var(--primary);width:28px;border-radius:20px}
.hero-control{
    width:46px;height:46px;
    top:50%;transform:translateY(-50%);
    border-radius:50%;
    background:var(--primary);
    opacity:1;
    margin:0 18px;
}
.hero-control:hover{background:var(--primary-dark)}
@keyframes heroCardIn{
    from{opacity:0;transform:translateX(25px) rotate(2deg)}
    to{opacity:1;transform:translateX(0) rotate(2deg)}
}
@media(max-width:1200px){
    .hero-control{margin:0 8px}
}

/* Modern full-width hero slider */
.hero-modern{
    padding:0;
    position:relative;
    background:#071a2b;
    overflow:hidden;
}
.hero-modern .carousel,
.hero-modern .carousel-inner,
.hero-modern .carousel-item{
    min-height:610px;
}
.hero-slide{
    position:relative;
    background-size:contain;
    background-position:center;
    background-repeat: no-repeat;
}
/*
    Replace these background-image URLs with the client's own service images.
    The dark overlays intentionally match the visual style of the supplied reference.
*/
.hero-slide-1{background-image:url("/assets/images/hero-iso-indian.jpg");}
.hero-slide-2{background-image:url("/assets/images/hero-trademark-indian.jpg");}
.hero-slide-3{background-image:url("/assets/images/hero-copyright-indian.jpg");}
.hero-overlay{
    position:absolute;
    inset:0;
    background:
    linear-gradient(90deg,rgba(2,20,38,.92) 0%,rgba(3,31,54,.78) 34%,rgba(4,42,67,.38) 63%,rgba(2,20,38,.08) 100%),
    linear-gradient(0deg,rgba(1,16,29,.35),rgba(1,16,29,.08));
}
.hero-content{
    min-height:610px;
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
}
.hero-copy{
    width:min(720px,70%);
    color:#fff;
    padding:70px 0 90px;
}
.hero-eyebrow{
    font-size:13px;
    font-weight:800;
    letter-spacing:3px;
    margin-bottom:20px;
    color:#fff;
}
.hero-eyebrow span{
    color:rgba(255,255,255,.45);
    margin:0 5px;
}
.hero-copy h1{
    color:#fff;
    font-size:clamp(42px,4.7vw,70px);
    line-height:1.05;
    font-weight:800;
    letter-spacing:-1.8px;
    margin:0 0 18px;
}
.hero-copy h1 strong{
    color:#ff761b;
    font-weight:800;
}
.hero-copy p{
    color:rgba(255,255,255,.91);
    font-size:19px;
    line-height:1.8;
    max-width:650px;
    margin:0;
}
.hero-actions{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    margin-top:28px;
}
.hero-btn-primary{
    background:#ff761b;
    color:#fff;
    border:1px solid #ff761b;
    border-radius:6px;
    padding:14px 21px;
    font-weight:800;
    min-height:52px;
}
.hero-btn-primary:hover{
    background:#e85f09;
    border-color:#e85f09;
    color:#fff;
    transform:translateY(-1px);
}
.hero-btn-secondary{
    color:#fff;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.72);
    border-radius:6px;
    padding:14px 21px;
    font-weight:700;
    min-height:52px;
}
.hero-btn-secondary:hover{
    color:#fff;
    background:rgba(255,255,255,.13);
}
.hero-features{
    display:flex;
    align-items:center;
    gap:27px;
    flex-wrap:wrap;
    margin-top:39px;
}
.hero-features span{
    display:grid;
    grid-template-columns:auto 1fr;
    column-gap:9px;
    align-items:center;
    min-width:88px;
    color:#fff;
    font-size:12px;
}
.hero-features i{
    grid-row:span 2;
    font-size:21px;
    color:#fff;
}
.hero-features b{
    font-size:12px;
    line-height:1.2;
}
.hero-features small{
    color:rgba(255,255,255,.76);
    font-size:11px;
    line-height:1.2;
}
.hero-modern-control{
    width:52px;
    height:52px;
    top:50%;
    transform:translateY(-50%);
    opacity:1;
    z-index:5;
}
.hero-modern-control.carousel-control-prev{left:24px}
.hero-modern-control.carousel-control-next{right:24px}
.hero-arrow{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#fff;
    background:rgba(3,24,43,.65);
    border:1px solid rgba(255,255,255,.18);
    font-size:18px;
    transition:.25s;
}
.hero-modern-control:hover .hero-arrow{
    background:#ff761b;
    border-color:#ff761b;
}
.hero-modern-indicators{
    bottom:20px;
    z-index:5;
    margin-bottom:0;
}
.hero-modern-indicators button{
    width:8px;
    height:8px;
    border:0;
    border-radius:50%;
    margin:0 5px;
    background:#fff;
    opacity:.7;
    transition:.25s;
}
.hero-modern-indicators button.active{
    width:28px;
    border-radius:10px;
    background:#ff761b;
    opacity:1;
}
.hero-modern .carousel-item.active .hero-copy{
    animation:heroTextIn .7s ease both;
}
@keyframes heroTextIn{
    from{opacity:0;transform:translateY(18px)}
    to{opacity:1;transform:translateY(0)}
}


@media(max-width:991px){
    .hero-modern .carousel,
    .hero-modern .carousel-inner,
    .hero-modern .carousel-item,
    .hero-content{min-height:560px}
    .hero-copy{
    width:85%;
    padding:65px 0 80px;
    }
    .hero-copy h1{font-size:clamp(38px,7vw,58px)}
    .hero-copy p{font-size:17px}
    .hero-modern-control{display:none}
}
@media(max-width:576px){
    .hero-modern .carousel,
    .hero-modern .carousel-inner,
    .hero-modern .carousel-item,
    .hero-content{min-height:650px}
    .hero-copy{
    width:100%;
    padding:60px 22px 80px 0;
    }
    .hero-copy h1{
    font-size:39px;
    letter-spacing:-1px;
    }
    .hero-copy p{
    font-size:16px;
    line-height:1.65;
    }
    .hero-eyebrow{
    font-size:11px;
    letter-spacing:2px;
    }
    .hero-actions{gap:10px}
    .hero-btn-primary,.hero-btn-secondary{
    width:100%;
    padding:13px 16px;
    }
    .hero-features{
    gap:17px 20px;
    margin-top:30px;
    }
    .hero-features span{min-width:105px}
}

@media(max-width:991px){
    .hero .carousel-item{min-height:auto;padding-bottom:25px}
    .hero-control{display:none}
    .hero-indicators{bottom:-12px}
}

@media(max-width:991px){
    .hero{padding:65px 0}
    .hero-card{margin-top:35px}
    .navbar .btn-main{margin-top:10px}
}
@media(max-width:576px){
    section{padding:65px 0}
    .section-head h2{font-size:31px}
    .newsletter{padding:30px 22px}
    .newsletter .form-control,.newsletter .btn{border-radius:8px}
    .newsletter .btn{margin-top:10px;width:100%;height:52px}
}

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

.about-section {
    background: #fff;
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
}

.section-eyebrow::before {
    content: "";
    width: 30px;
    height: 2px;
    background: var(--accent);
}

.about-title {
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.15;
    font-weight: 800;
    color: var(--dark);
}

.about-title span {
    color: var(--primary);
}

.about-text {
    color: var(--muted);
    line-height: 1.8;
    font-size: 16px;
}

.about-feature {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    height: 100%;
    transition: .3s ease;
}

.about-feature:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(16, 24, 40, .07);
}

.about-feature-icon {
    width: 43px;
    height: 43px;
    min-width: 43px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #e9f0ff;
    color: var(--primary);
    font-size: 20px;
}

.about-feature strong {
    display: block;
    color: var(--dark);
    font-size: 14px;
    margin-bottom: 3px;
}

.about-feature small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

/* About visual */

.about-visual {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    border-radius: 28px;
    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(244, 185, 66, .22),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #edf4ff 0%,
            #f8faff 55%,
            #e8f0ff 100%
        );
    overflow: hidden;
}

.about-visual::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 1px solid rgba(23, 70, 162, .12);
    top: -80px;
    right: -60px;
}

.about-visual::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 1px solid rgba(244, 185, 66, .25);
    bottom: -70px;
    left: -50px;
}

.about-main-card {
    position: relative;
    z-index: 2;
    width: 82%;
    padding: 45px 38px;
    border-radius: 22px;
    background: linear-gradient(145deg, #123c8f, #1746a2);
    color: #fff;
    box-shadow: 0 25px 50px rgba(12, 45, 112, .22);
}

.about-icon-large {
    width: 65px;
    height: 65px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, .12);
    color: var(--accent);
    font-size: 30px;
    margin-bottom: 25px;
}

.about-main-card h3 {
    font-size: 30px;
    line-height: 1.25;
    margin-bottom: 18px;
}

.about-main-card p {
    color: #dbe7ff;
    line-height: 1.7;
    margin-bottom: 0;
}

.about-floating-card {
    position: absolute;
    z-index: 3;
    right: 15px;
    bottom: 45px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 15px 35px rgba(16, 24, 40, .12);
}

.about-floating-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e9f0ff;
    color: var(--primary);
    font-size: 20px;
}

.about-floating-card strong,
.about-floating-card span {
    display: block;
}

.about-floating-card strong {
    font-size: 14px;
    color: var(--dark);
}

.about-floating-card span {
    color: var(--muted);
    font-size: 12px;
    margin-top: 2px;
}

@media (max-width: 991px) {
    .about-visual {
        min-height: 430px;
    }

    .about-main-card {
        width: 88%;
    }
}

@media (max-width: 576px) {
    .about-section {
        padding-top: 55px !important;
        padding-bottom: 55px !important;
    }

    .about-title {
        font-size: 32px;
    }

    .about-visual {
        min-height: 390px;
        padding: 25px;
    }

    .about-main-card {
        width: 100%;
        padding: 32px 25px;
    }

    .about-main-card h3 {
        font-size: 25px;
    }

    .about-floating-card {
        right: 15px;
        bottom: 20px;
    }
}

/* =========================
   CLIENT VERIFICATION
========================= */

.client-verification {
    padding: 90px 0;
    background: var(--light);
}

.client-verification .section-head h2 {
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 800;
    margin: 12px 0;
    color: var(--dark);
}

.client-verification .section-head p {
    max-width: 650px;
    margin: 0 auto;
    color: var(--muted);
    line-height: 1.7;
}


/* Verification Card */

.verification-card {
    height: 100%;
    display: flex;
    gap: 20px;
    padding: 30px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    transition: .3s ease;
}

.verification-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(16, 24, 40, .09);
}

.verification-icon {
    width: 58px;
    height: 58px;
    min-width: 58px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #e9f0ff;
    color: var(--primary);
    font-size: 26px;
}

.verification-content {
    flex: 1;
}

.verification-label {
    display: inline-block;
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 7px;
}

.verification-content h4 {
    font-size: 21px;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 8px;
}

.verification-content p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.verification-input-group {
    display: flex;
    gap: 10px;
}

.verification-input-group .form-control {
    height: 48px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    box-shadow: none;
}

.verification-input-group .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(23, 70, 162, .08);
}

.verification-input-group .btn {
    height: 48px;
    white-space: nowrap;
    padding: 0 20px;
}

.verification-note {
    color: var(--muted);
    font-size: 13px;
}

.verification-note i {
    color: var(--primary);
}


/* Responsive */

@media (max-width: 767px) {

    .client-verification {
        padding: 65px 0;
    }

    .verification-card {
        padding: 24px;
    }

    .verification-input-group {
        flex-direction: column;
    }

    .verification-input-group .btn {
        width: 100%;
    }

}