:root {
    --ink: #10233e;
    --navy: #071a33;
    --navy2: #0b3159;
    --blue: #176fc1;
    --blue2: #4b9ce8;
    --sky: #edf6ff;
    --sky2: #f6faff;
    --gold: #f6b844;
    --muted: #61738a;
    --line: #e0e9f3;
    --white: #fff;
    --shadow: 0 22px 60px rgba(8, 35, 68, .10);
    --radius: 22px
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    padding: 14px 21px;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: .05px;
    transition: transform .2s, box-shadow .2s, background .2s
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px #071d3a20
}

.btn.blue {
    color: #fff;
    background: linear-gradient(135deg, #2585d5, #115da5);
    box-shadow: 0 9px 24px #176fc12b
}

.btn.orange {
    color: #17283c;
    background: linear-gradient(135deg, #ffdc8b, #f5b33c);
    box-shadow: 0 9px 22px #f2aa3229;
    transition: all .3s ease;
}
.btn.orange:hover {
    background: #fff;
    color: var(--blue);
}
.btn.outline {
    border: 1px solid #ffffff66;
    color: #fff;
    background: #ffffff08
}

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    padding: clamp(65px, 8vw, 108px) 0 96px;
    background: radial-gradient(ellipse at 84% 14%, rgba(57, 148, 226, .3), transparent 32%), radial-gradient(ellipse at 10% 90%, rgba(27, 112, 191, .2), transparent 37%), linear-gradient(118deg, #06152b 0%, #08274b 54%, #0b3b69 100%)
}

.hero:before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .11;
    background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(90deg, transparent, black 48%, black)
}

.hero:after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 470px;
    height: 470px;
    right: -190px;
    bottom: -300px;
    border: 1px solid #ffffff19;
    border-radius: 50%;
    box-shadow: 0 0 0 48px #ffffff07, 0 0 0 96px #ffffff05
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .75fr);
    gap: clamp(36px, 6vw, 82px);
    align-items: center
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #ffffff32;
    background: #ffffff0c;
    border-radius: 99px;
    padding: 9px 14px;
    color: #e6f3ff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px
}

.badge:before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 5px #f6b84420
}

h1 {
    max-width: 760px;
    margin: 23px 0 22px!important;
    font-size: 52px;
    font-weight: 600;
    line-height: 1.035;
    letter-spacing: px;
}

h1 em {
    font-style: normal;
    color: #83c3ff
}

.hero p {
    max-width: 720px;
    color: #d0deed;
    font-size: 14px;
    line-height: 1.9
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px
}

.hero-card {
    position: relative;
    overflow: hidden;
    padding: 34px;
    border: 1px solid #ffffffaa;
    border-radius: 26px;
    background: linear-gradient(150deg, #fff 0%, #f3f8ff 100%);
    color: var(--ink);
    box-shadow: 0 28px 80px #00112666
}

.hero-card:before {
    content: "";
    position: absolute;
    right: -55px;
    top: -70px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: #d9ecff;
    box-shadow: 0 0 0 28px #e9f4ff, 0 0 0 56px #f1f8ff
}

.hero-card>* {
    position: relative
}

.eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.55px;
    text-transform: uppercase;
    color: var(--blue)
}

.hero-card h3 {
    max-width: 300px;
    margin: 10px 0 24px;
    color: var(--navy);
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -.8px
}

.hero-card ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px 12px;
    margin: 0;
    padding: 0;
    list-style: none
}

.hero-card li {
    position: relative;
    padding: 10px 9px 10px 29px;
    border: 1px solid #e1ebf5;
    border-radius: 11px;
    background: #fff;
    font-size: 11px;
    line-height: 1.45;
    font-weight: 800;
    color: #29415c
}

.hero-card li:before {
    content: "✓";
    position: absolute;
    left: 10px;
    top: 9px;
    color: var(--blue);
    font-weight: 900
}

.hero-card:after {
    content: "INDIA  →  GLOBAL";
    display: block;
    margin-top: 24px;
    padding-top: 17px;
    border-top: 1px solid #dce7f2;
    color: #66809c;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px
}

.content-section {
    padding: 50px 0;
    border-bottom: 1px solid #edf2f7;
    background: #fff
}

.content-section:nth-of-type(odd) {
    background: var(--sky2)
}

.section-inner {
}

.section-title {
    margin: 0 0 22px;
    color: var(--navy);
    font-size: clamp(30px, 3.7vw, 45px);
    line-height: 1.13;
    letter-spacing: -1.65px;
    font-weight: 820
}

.section-title:after {
    content: "";
    display: block;
    width: 54px;
    height: 4px;
    margin-top: 19px;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--blue), #80c2ff)
}

.body-copy {
    color: #52647a;
    font-size: 14px;
    line-height: 1.9
}

.content-section h3.sub-title {
    margin: 34px 0 13px;
    color: var(--navy);
    font-size: clamp(21px, 2.5vw, 29px);
    line-height: 1.25;
    letter-spacing: -.65px
}

.content-section h3.minor-title {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin: 26px 0 9px;
    color: var(--navy);
    font-size: 18px;
    line-height: 1.35;
    letter-spacing: -.25px
}

.content-section h3.minor-title:before {
    content: "";
    flex: 0 0 8px;
    height: 8px;
    margin-top: 7px;
    border-radius: 3px;
    background: var(--gold);
    box-shadow: 0 0 0 5px #fff3d9
}

.content-section ul,
.content-section ol {
    padding-left: 0;
    margin: 18px 0 25px;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px
}

.content-section li {
    position: relative;
    padding: 11px 13px 11px 35px;
    border: 1px solid #e3edf7;
    border-radius: 10px;
    background: #fff;
    color: #334c66;
    font-size: 13px;
    font-weight: 650
}

.content-section li:before {
    content: "✓";
    position: absolute;
    left: 13px;
    color: var(--blue);
    font-weight: 900
}

.callout {
    margin-top: 25px;
    padding: 23px 25px;
    border: 1px solid #f0dfb9;
    border-left: 4px solid var(--gold);
    border-radius: 14px;
    background: #fffaf0;
    color: #4b5a6d
}

.content-section .section-inner>p:last-child {
    margin-bottom: 0
}

/* Product categories: editorial alternating showcase */
.product-showcase {
    padding: 0 !important;
    background: #fff !important
}

.product-showcase .section-inner {
    padding-top: 50px;
}

.product-showcase .section-title,
.product-showcase>.container>.body-copy {
    margin-left: auto;
    margin-right: auto
}

.product-showcase .section-title {
    margin-bottom: 16px
}

.product-showcase .section-inner>p.body-copy {
    margin: 0 auto 38px
}

.product-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(30px, 6vw, 90px);
    padding: 50px 00;
}

.product-row:nth-of-type(odd) {
    background: #eef6ff
}

.product-row:nth-of-type(even) {
    background: #fff
}

.product-visual {
   text-align: center;
}
.product-visual .product-icon img {
    width: 400px;
    
}

.product-copy {
    max-width: 520px
}

.product-copy .eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px
}

.product-copy .eyebrow:before {
    content: "";
    width: 25px;
    height: 2px;
    background: var(--gold)
}

.product-copy h3 {
    margin: 0 0 17px;
    color: var(--navy);
    font-size: clamp(30px, 3.4vw, 42px);
    font-weight: 830;
    line-height: 1.1;
    letter-spacing: -1.5px
}

.product-copy p {
    color: #53667d;
    font-size: 13px;
    line-height: 1.85
}

.product-row.reverse .product-visual {
    order: 2
}

.product-row.reverse .product-copy {
    order: 1
}

.product-row .product-copy p:last-child {
    margin-bottom: 0
}

/* Service cards */
#services .section-inner {
}

#services .section-inner>h3 {
    margin-top: 0
}

#services .service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px
}

#services .service-card {
    padding: 25px 25px 21px;
    border: 1px solid #e0eaf4;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(11, 49, 89, .035);
    transition: transform .2s, box-shadow .2s
}

#services .service-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow)
}

#services .service-card h3 {
    margin: 0 0 11px;
    color: var(--navy);
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -.5px
}

#services .service-card h3:before {
    content: "↗";
    display: inline-grid;
    place-items: center;
    width: 31px;
    height: 31px;
    margin-right: 10px;
    border-radius: 10px;
    background: #e9f4ff;
    color: var(--blue);
    font-size: 16px
}

#services .service-card p {
    color: #5b6e84;
    font-size: 13px;
    line-height: 1.8
}

#services .service-card p:last-child {
    margin-bottom: 0
}

/* FAQ and CTA */
.faq-section {
    background: #eef6ff !important
}

.faq-section .section-inner {
}

.faq-section .section-title {
    margin-bottom: 32px
}

.faq-list {
    display: grid;
    gap: 12px
}

.faq-list details {
    overflow: hidden;
    border: 1px solid #dce8f5;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(7, 29, 58, .035);
    transition: border-color .2s, box-shadow .2s
}

.faq-list details[open] {
    border-color: #a9d0f4;
    box-shadow: 0 12px 30px #176fc111
}

.faq-list summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 23px;
    color: var(--navy);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
    cursor: pointer;
    list-style: none
}

.faq-list summary::-webkit-details-marker {
    display: none
}

.faq-list summary:after {
    content: "+";
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #eaf4ff;
    color: var(--blue);
    font-size: 23px;
    font-weight: 450;
    line-height: 1;
    transition: transform .2s, background .2s
}

.faq-list details[open] summary:after {
    content: "−";
    background: var(--blue);
    color: #fff
}

.faq-list details p {
    padding: 0 23px 22px;
    margin: 0;
    color: #5b6d82;
    font-size: 13px;
    line-height: 1.85
}

@media(max-width:900px) {

    .hero-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(290px, .85fr);
        gap: 30px
    }

    .hero-card {
        padding: 25px
    }

    .product-visual {
        min-height: 280px
    }
}

@media(max-width:760px) {
    .hero {
        padding: 57px 0 65px
    }

    .hero-grid {
        grid-template-columns: 1fr
    }

    .hero-card {
        max-width: 560px
    }

    .hero h1 {
        letter-spacing: -2px
    }

    .content-section {
        padding: 55px 0
    }

    .product-showcase .section-inner {
        padding-top: 54px
    }

    .product-row {
        grid-template-columns: 1fr;
        padding: 36px 5%;
        gap: 25px
    }

    .product-row .product-visual {
        min-height: 220px;
        order: 0 !important
    }

    .product-row .product-copy {
        order: 1 !important;
        max-width: none
    }

    .product-icon {
        width: 115px;
        height: 115px;
        border-radius: 28px
    }

    .product-icon svg {
        width: 68px;
        height: 68px
    }

    #services .service-grid {
        grid-template-columns: 1fr
    }

}

@media(max-width:560px) {

    .container,
    .section-inner {
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
    }

    .hero h1 {
        font-size: 39px
    }

    .hero p {
        font-size: 13px
    }

    .hero-card ul {
        grid-template-columns: 1fr 1fr;
        gap: 8px
    }

    .hero-card li {
        font-size: 10px
    }

    .content-section ul,
    .content-section ol {
        grid-template-columns: 1fr
    }

    .section-title {
        font-size: 31px
    }

    .product-copy h3 {
        font-size: 32px
    }

    .product-visual {
        min-height: 195px
    }

    .faq-list summary {
        padding: 16px;
        font-size: 13px
    }

    .faq-list details p {
        padding: 0 16px 18px
    }
    
}

/* Semantic content lists: native list items with disc markers */
.content-section ul.content-list,
.content-section ol {
    display: block;
    list-style-type: disc;
    list-style-position: outside;
    margin: 18px 0 26px;
    padding-left: 1.55rem;
}

.content-section ul.content-list li,
.content-section ol li {
    display: list-item;
    list-style-type: disc;
    position: static;
    margin: 0;
    padding: 6px 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #334c66;
    font-size: 14px;
    font-weight: 550;
    line-height: 1.65;
}

.content-section ul.content-list li::before,
.content-section ol li::before {
    content: none !important;
    display: none !important;
}

.content-section ul.content-list li::marker,
.content-section ol li::marker {
    color: #176fc1;
    font-size: 1em;
}

/* Simple alternating heading + copy layout: no decorative side panels */
.alternating-panel {
    display: block !important;
    position: relative;
    margin: 38px 0 !important;
    padding: clamp(26px, 4vw, 46px) !important;
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    min-height: 0 !important
}

.alternating-panel.panel-white {
    background: #fff !important
}

.alternating-panel.panel-blue {
    background: #eef6ff !important
}

.alternating-panel .alternating-panel-mark {
    display: none !important
}

.alternating-panel .alternating-panel-content {
    width: min(100%, 650px) !important;
    max-width: 650px !important;
    margin: 0 !important
}

.alternating-panel.panel-right .alternating-panel-content {
    margin-left: auto !important
}

.alternating-panel .alternating-panel-title {
    margin: 0 0 16px !important;
    font-size: clamp(25px, 3vw, 34px) !important;
    line-height: 1.16 !important;
    letter-spacing: -.9px !important
}

.alternating-panel .body-copy {
    margin: 0 0 12px !important;
    line-height: 1.8 !important
}

.alternating-panel .content-list {
    margin: 14px 0 18px !important
}

@media(max-width:760px) {
    .alternating-panel {
        margin: 24px 0 !important;
        padding: 24px !important
    }

    .alternating-panel .alternating-panel-content {
        width: 100% !important;
        max-width: none !important
    }
}


/* Bootstrap row/col controls the two-column content layout (no CSS Grid). */
.two-col-content-grid.row {
    display: flex !important;
    flex-wrap: wrap;
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}

.two-col-content-grid.row>.content-block.col-12 {
    display: flex;
    min-width: 0;
}

.two-col-content-grid .content-block-inner {
    width: 100%;
    min-width: 0;
    padding: 30px 32px;
    border: 1px solid #e4edf7;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(16, 35, 62, .035);
}

.two-col-content-grid .content-block-inner.content-block-blue {
    background: #f0f7ff;
    border-color: #dfedfb;
}

.two-col-content-grid .content-block-inner h2,
.two-col-content-grid .content-block-inner h3 {
    margin-top: 0 !important;
}

.two-col-content-grid .content-block-inner h2 {
    font-size: clamp(24px, 2.4vw, 32px);
    line-height: 1.2;
    letter-spacing: -.8px;
    margin-bottom: 16px;
}

.two-col-content-grid .content-block-inner h3 {
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: -.6px;
    margin-bottom: 14px;
}

.two-col-content-grid .content-block-inner p {
    margin-bottom: 13px;
}

.two-col-content-grid .content-block-inner p:last-child {
    margin-bottom: 0;
}

.two-col-content-grid .content-block-inner ul,
.two-col-content-grid .content-block-inner ol {
    display: block;
    padding-left: 1.35rem;
    margin: 14px 0 22px;
    list-style-type: disc;
}

.two-col-content-grid .content-block-inner li {
    display: list-item;
    padding: 0;
    margin: 0 0 7px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-weight: 600;
    list-style-type: disc;
}

.two-col-content-grid .content-block-inner li:before {
    content: none !important;
}

@media (max-width:767.98px) {
    .two-col-content-grid .content-block-inner {
        padding: 10px 10px;
        border-radius: 5px;
    }
}

.section-inner>.alternating-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(220px, .75fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
    margin: 34px 0;
    padding: clamp(26px, 4vw, 54px);
    border: 1px solid #e3ebf5;
    border-radius: 24px;
    box-shadow: 0 14px 38px rgba(15, 43, 78, .045);
    overflow: hidden
}

.section-inner>.alternating-panel.panel-white {
    background: #fff
}

.section-inner>.alternating-panel.panel-blue {
    background: linear-gradient(135deg, #f0f7ff, #e8f3ff);
    border-color: #dceafb
}

.section-inner>.alternating-panel.panel-right {
    grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr)
}

.alternating-panel-content {
    min-width: 0
}

.alternating-panel-title {
    font-size: clamp(24px, 2.5vw, 34px) !important;
    line-height: 1.2 !important;
    letter-spacing: -.035em;
    margin: 0 0 20px !important;
    color: #0b1d38 !important;
    max-width: 760px
}

.alternating-panel-content p {
    line-height: 1.85
}

.alternating-panel-mark {
    min-height: 210px;
    border-radius: 20px;
    background: linear-gradient(145deg, #0a2343, #0f5c9e 68%, #2789d9);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 28px;
    color: white;
    position: relative;
    isolation: isolate;
    overflow: hidden
}

.alternating-panel-mark:before,
.alternating-panel-mark:after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    z-index: -1
}

.alternating-panel-mark:before {
    width: 250px;
    height: 250px;
    right: -70px;
    top: -90px
}

.alternating-panel-mark:after {
    width: 170px;
    height: 170px;
    right: -25px;
    top: -50px
}

.panel-index {
    font-size: clamp(44px, 5vw, 72px);
    font-weight: 800;
    letter-spacing: -.06em;
    line-height: 1
}

.panel-label {
    font-size: 11px;
    letter-spacing: .16em;
    font-weight: 700;
    line-height: 1.5;
    max-width: 150px;
    color: #dbeeff
}

.alternating-panel.panel-right .alternating-panel-mark {
    background: linear-gradient(145deg, #dceeff, #c8e4ff);
    color: #0d3d6b
}

.alternating-panel.panel-right .panel-label {
    color: #24577e
}

.alternating-panel-content ul {
    padding-left: 1.25rem;
    list-style-type: disc
}

.alternating-panel-content li {
    padding-left: .2rem;
    margin: .55rem 0
}

@media(max-width:760px) {

    .section-inner>.alternating-panel,
    .section-inner>.alternating-panel.panel-right {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 22px;
        border-radius: 18px
    }

    .alternating-panel-mark {
        min-height: 130px
    }

    .alternating-panel-title {
        font-size: 25px !important
    }
}

/* Bootstrap's .row and .col-* classes create the left/right layout. */
.two-col-content-grid.row {
    display: flex !important;
}

.two-col-content-grid.row>.col-md-6 {
    flex: 0 0 auto;
    width: 50%;
}

@media(max-width:767.98px) {
    .two-col-content-grid.row>.col-md-6 {
        width: 100%;
    }
}

/* Static Bootstrap grid: no JavaScript required */
.two-col-content-grid {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}

.two-col-content-grid>.content-block {
    display: flex;
    min-width: 0;
}

.content-block-inner {
    width: 100%;
    padding: 30px 32px;
    border: 1px solid #e4edf7;
    border-radius: 16px;
    background: #fff;
}

.content-block-inner.content-block-blue {
    background: #f0f7ff;
    border-color: #dfedfb;
}

.content-block-inner h2,
.content-block-inner h3 {
    margin-top: 0 !important;
}

.content-block-inner h2 {
    font-size: clamp(24px, 2.4vw, 32px);
    line-height: 1.2;
    letter-spacing: -.8px;
    margin-bottom: 16px;
}

.content-block-inner h3 {
    font-size: clamp(22px, 2.3vw, 29px);
    line-height: 1.25;
    letter-spacing: -.6px;
    margin-bottom: 14px;
}

.content-block-inner p {
    margin-bottom: 13px;
}

.content-block-inner p:last-child {
    margin-bottom: 0;
}

.content-block-inner ul,
.content-block-inner ol {
    display: block;
    padding-left: 1.35rem;
    margin: 14px 0 22px;
    list-style-type: disc;
}

.content-block-inner li {
    display: list-item;
    padding: 0;
    margin: 0 0 7px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-weight: 600;
    list-style-type: disc;
}

.content-block-inner li:before {
    content: none !important;
}

@media (max-width:767.98px) {
    .content-block-inner {
        padding: 24px 22px;
    }
    #services .service-card {
        border-radius: 5px;
    }
}