/* =========================================================
   AMRITHA UNIFORMS
   ABOUT US PAGE
   SAME DESIGN SYSTEM AS HOME PAGE
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {

    --primary: #004994;
    --primary-dark: #002e68;
    --primary-deep: #001d45;

    --secondary: #00a7d4;
    --secondary-light: #4dd8f4;

    --tertiary: #970983;
    --tertiary-dark: #6f0561;

    --white: #ffffff;

    --ink: #101a2c;
    --muted: #6e7889;

    --soft: #f5f8fc;

    --line: rgba(0,73,148,.12);

    --shadow:
        0 22px 65px rgba(0,31,75,.13);

    --radius: 22px;

    --radius-sm: 14px;

}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    overflow-x: hidden;

    background: #fff;

    color: var(--ink);

    font-family: "Manrope", sans-serif;

    -webkit-font-smoothing: antialiased;

}


a {
    text-decoration: none;
}


img {
    max-width: 100%;
}


button,
a,
input,
select,
textarea {

    -webkit-tap-highlight-color:
        transparent;

}


::selection {

    background:
        var(--tertiary);

    color:
        #fff;

}


/* =========================================================
   SAME HOME PAGE CONTAINER SYSTEM
========================================================= */

.container-fluid.px-lg-5 {

    width:
        min(100%, 1800px);

    margin-left:
        auto;

    margin-right:
        auto;

    padding-left:
        clamp(
            20px,
            5.8vw,
            110px
        ) !important;

    padding-right:
        clamp(
            20px,
            5.8vw,
            110px
        ) !important;

}


/* =========================================================
   TOP BAND
========================================================= */

.top-band {

    position:
        relative;

    z-index:
        1005;

    background:
        var(--tertiary);

    color:
        rgba(255,255,255,.92);

    font-size:
        11px;

    font-weight:
        600;

    letter-spacing:
        .2px;

}


.top-band-inner {

    min-height:
        39px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

}


.top-left,
.top-right {

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

}


.top-band a {

    color:
        #fff;

    transition:
        .25s ease;

}


.top-band a:hover {

    color:
        var(--secondary-light);

}


.top-band i {

    margin-right:
        6px;

    font-size:
        10px;

}


.top-separator {

    width:
        1px;

    height:
        12px;

    background:
        rgba(255,255,255,.25);

}


/* =========================================================
   HEADER
========================================================= */

.main-header {

    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    background:
        rgba(255,255,255,.94);

    border-bottom:
        1px solid rgba(0,73,148,.09);

    backdrop-filter:
        blur(18px);

    transition:
        .35s ease;

}


.main-header.scrolled {

    box-shadow:
        0 10px 35px
        rgba(0,35,75,.10);

}


.brand-wrap {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        8px 0;

}


.brand-logo {

    width:
        112px;

    height:
        98px;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

}


.brand-logo img {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

}


.brand-copy {

    display:
        flex;

    flex-direction:
        column;

    line-height:
        1;

}


.brand-copy strong {

    color:
        var(--primary);

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        26px;

    letter-spacing:
        1.5px;

    font-weight:
        800;

}


.brand-copy b {

    margin-top:
        5px;

    color:
        var(--secondary);

    font-size:
        17.5px;

    letter-spacing:
        5px;

    font-weight:
        800;

}


.nav-main {

    gap:
        4px;

}


.nav-main .nav-link {

    position:
        relative;

    padding:
        27px 13px !important;

    color:
        #263348;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        .2px;

    transition:
        .3s ease;

}


.nav-main .nav-link::after {

    content:
        "";

    position:
        absolute;

    left:
        13px;

    right:
        13px;

    bottom:
        16px;

    height:
        2px;

    border-radius:
        2px;

    transform:
        scaleX(0);

    transform-origin:
        center;

    background:
        var(--tertiary);

    transition:
        .3s ease;

}


.nav-main .nav-link:hover,
.nav-main .nav-link.active {

    color:
        var(--primary);

}


.nav-main .nav-link:hover::after,
.nav-main .nav-link.active::after {

    transform:
        scaleX(1);

}


.nav-hot-dot {

    display:
        inline-block;

    width:
        5px;

    height:
        5px;

    margin-left:
        3px;

    vertical-align:
        top;

    border-radius:
        50%;

    background:
        var(--tertiary);

    box-shadow:
        0 0 0 4px
        rgba(151,9,131,.08);

}


/* =========================================================
   HEADER CTA
========================================================= */

.header-cta {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-left:
        16px;

}


.header-call {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--primary);

}


.call-icon {

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    color:
        #fff;

    background:
        var(--primary);

    box-shadow:
        0 8px 20px
        rgba(0,73,148,.20);

}


.header-call small {

    display:
        block;

    color:
        var(--muted);

    font-size:
        7px;

    letter-spacing:
        1.2px;

}


.header-call strong {

    display:
        block;

    font-size:
        10px;

}


.header-wa {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    min-height:
        38px;

    padding:
        0 13px;

    border-radius:
        10px;

    color:
        #fff;

    background:
        var(--tertiary);

    font-size:
        10px;

    font-weight:
        800;

    transition:
        .3s ease;

}


.header-wa:hover {

    color:
        #fff;

    transform:
        translateY(-2px);

    background:
        var(--tertiary-dark);

}


/* =========================================================
   TOGGLER
========================================================= */

.custom-toggler {

    width:
        45px;

    height:
        42px;

    padding:
        9px;

    border:
        1px solid
        var(--line);

    border-radius:
        12px;

    background:
        #fff;

    box-shadow:
        0 8px 25px
        rgba(0,73,148,.08);

}


.custom-toggler span {

    display:
        block;

    width:
        22px;

    height:
        2px;

    margin:
        4px auto;

    border-radius:
        4px;

    background:
        var(--primary);

}


/* =========================================================
   MEGA MENU
========================================================= */

.mega-menu {

    width:
        min(
            1120px,
            calc(100vw - 30px)
        );

    margin-top:
        0;

    padding:
        0;

    left:
        50% !important;

    transform:
        translateX(-50%);

    overflow:
        hidden;

    border-radius:
        0 0 22px 22px !important;

    border-top:
        3px solid
        var(--tertiary) !important;

    background:
        rgba(255,255,255,.98);

}


.mega-inner {

    display:
        grid;

    grid-template-columns:
        270px 1fr;

    gap:
        25px;

    padding:
        26px;

}


.mega-intro {

    padding:
        10px 15px 10px 5px;

    border-right:
        1px solid
        var(--line);

}


.eyebrow,
.section-kicker {

    display:
        inline-block;

    color:
        var(--tertiary);

    font-size:
        14px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


.mega-intro h3 {

    margin:
        12px 0 10px;

    color:
        var(--ink);

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        25px;

    line-height:
        1.12;

    font-weight:
        800;

}


.mega-intro h3 span {

    color:
        var(--primary);

}


.mega-intro p {

    margin-bottom:
        18px;

    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.7;

}


.mega-all-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(--primary);

    font-size:
        10px;

    font-weight:
        800;

}


.mega-all-link:hover {

    color:
        var(--tertiary);

}


.mega-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        11px;

}


.mega-product {

    min-width:
        0;

    display:
        grid;

    grid-template-columns:
        65px 1fr 15px;

    align-items:
        center;

    gap:
        10px;

    padding:
        8px;

    border:
        1px solid transparent;

    border-radius:
        14px;

    transition:
        .3s ease;

}


.mega-product:hover {

    border-color:
        var(--line);

    background:
        #f8fbff;

    transform:
        translateY(-2px);

}


.mega-product-image {

    position:
        relative;

    width:
        65px;

    height:
        65px;

    border-radius:
        11px;

    background-position:
        center;

    background-size:
        cover;

    overflow:
        hidden;

}


.mega-product-image::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            135deg,
            rgba(0,73,148,.18),
            rgba(151,9,131,.30)
        );

}


.mega-number {

    position:
        absolute;

    z-index:
        1;

    top:
        5px;

    left:
        6px;

    color:
        #fff;

    font-size:
        7px;

    font-weight:
        800;

}


.mega-product-copy strong {

    display:
        block;

    color:
        var(--ink);

    font-size:
        10px;

    font-weight:
        800;

}


.mega-product-copy small {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--muted);

    font-size:
        8px;

}


.mega-product > i {

    color:
        var(--secondary);

    font-size:
        8px;

}


/* =========================================================
   FLOATING CONTACT
========================================================= */

.floating-contact {

    position:
        fixed;

    z-index:
        900;

    left:
        16px;

    top:
        50%;

    transform:
        translateY(-50%);

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

}


.float-item {

    position:
        relative;

    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        12px;

    color:
        #fff;

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.16);

    transition:
        .3s ease;

}


.float-item:hover {

    color:
        #fff;

    transform:
        translateX(5px)
        scale(1.04);

}


.float-item.whatsapp {

    background:
        #16b86a;

}


.float-item.phone {

    background:
        var(--primary);

}


.float-item.mail {

    background:
        var(--tertiary);

}


.float-item::after {

    content:
        attr(data-tooltip);

    position:
        absolute;

    left:
        51px;

    top:
        50%;

    transform:
        translateY(-50%)
        translateX(-6px);

    opacity:
        0;

    pointer-events:
        none;

    white-space:
        nowrap;

    padding:
        6px 9px;

    border-radius:
        7px;

    background:
        #111b2d;

    color:
        #fff;

    font-size:
        8px;

    font-weight:
        700;

    transition:
        .25s ease;

}


.float-item:hover::after {

    opacity:
        1;

    transform:
        translateY(-50%)
        translateX(0);

}


/* =========================================================
   COMMON SECTION
========================================================= */

.section-space {

    padding:
        115px 0;

}


.section-heading-row {

    display:
        grid;

    grid-template-columns:
        1fr 390px;

    align-items:
        end;

    gap:
        50px;

    margin-bottom:
        50px;

}


.section-heading-row h2 {

    margin:
        10px 0 0;

    color:
        var(--ink);

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        clamp(
            37px,
            4.4vw,
            58px
        );

    line-height:
        1.03;

    letter-spacing:
        -2.2px;

    font-weight:
        800;

}


.section-heading-row h2 span {

    color:
        var(--primary);

}


.section-heading-row > p {

    margin:
        0 0 5px;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.8;

}


/* =========================================================
   ABOUT BANNER
========================================================= */

.about-page-banner {

    position:
        relative;

    min-height:
        350px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background:
        var(--primary-deep);

}


.about-banner-bg {

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    background-image:
        url("images/about-banner.png");

    background-position:
        center;

    background-size:
        cover;

    background-repeat:
        no-repeat;

    transform:
        scale(1.04);

    animation:
        bannerZoom
        18s
        ease-in-out
        infinite
        alternate;

}


@keyframes bannerZoom {

    0% {
        transform:
            scale(1.04);
    }

    100% {
        transform:
            scale(1.10);
    }

}


.about-banner-overlay {

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    background:
        linear-gradient(
            90deg,
            rgba(0,29,69,.95),
            rgba(0,73,148,.78),
            rgba(0,29,69,.65)
        );

}


.about-banner-grid {

    position:
        absolute;

    inset:
        0;

    z-index:
        2;

    opacity:
        .15;

    background-image:

        linear-gradient(
            rgba(255,255,255,.10) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.10) 1px,
            transparent 1px
        );

    background-size:
        60px 60px;

    animation:
        gridMove
        18s
        linear
        infinite;

}


@keyframes gridMove {

    from {
        background-position:
            0 0,
            0 0;
    }

    to {
        background-position:
            60px 60px,
            60px 60px;
    }

}


/* =========================================================
   BANNER LIGHTS
========================================================= */

.about-light-beams {

    position:
        absolute;

    inset:
        0;

    z-index:
        3;

    overflow:
        hidden;

    pointer-events:
        none;

}


.about-light-beams span {

    position:
        absolute;

    top:
        -80%;

    width:
        2px;

    height:
        260%;

    background:
        linear-gradient(
            transparent,
            rgba(77,216,244,.75),
            transparent
        );

    transform:
        rotate(28deg);

    animation:
        beamMove
        8s
        ease-in-out
        infinite;

}


.about-light-beams span:nth-child(1) {

    left:
        65%;

}


.about-light-beams span:nth-child(2) {

    left:
        78%;

    animation-delay:
        2.5s;

}


.about-light-beams span:nth-child(3) {

    left:
        90%;

    animation-delay:
        5s;

}


@keyframes beamMove {

    0% {

        opacity:
            0;

        transform:
            translateY(-20%)
            rotate(28deg);

    }

    40% {

        opacity:
            .8;

    }

    100% {

        opacity:
            0;

        transform:
            translateY(20%)
            rotate(28deg);

    }

}


/* =========================================================
   BANNER GRAPHICS
========================================================= */

.about-orbit {

    position:
        absolute;

    z-index:
        3;

    border-radius:
        50%;

    pointer-events:
        none;

}


.about-orbit-one {

    width:
        430px;

    height:
        430px;

    right:
        3%;

    top:
        50%;

    border:
        1px solid
        rgba(77,216,244,.25);

    transform:
        translateY(-50%);

    animation:
        orbitRotate
        24s
        linear
        infinite;

}


.about-orbit-two {

    width:
        280px;

    height:
        280px;

    right:
        11%;

    top:
        50%;

    border:
        1px dashed
        rgba(151,9,131,.45);

    transform:
        translateY(-50%);

    animation:
        orbitReverse
        18s
        linear
        infinite;

}


@keyframes orbitRotate {

    from {
        transform:
            translateY(-50%)
            rotate(0);
    }

    to {
        transform:
            translateY(-50%)
            rotate(360deg);
    }

}


@keyframes orbitReverse {

    from {
        transform:
            translateY(-50%)
            rotate(360deg);
    }

    to {
        transform:
            translateY(-50%)
            rotate(0);
    }

}


/* =========================================================
   BANNER CONTENT
========================================================= */

.about-banner-content {

    position:
        relative;

    z-index:
        10;

    max-width:
        900px;

    padding:
        48px 0 52px;

}


.about-breadcrumb {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        22px;

    font-size:
        10px;

    font-weight:
        700;

}


.about-breadcrumb a {

    color:
        rgba(255,255,255,.60);

}


.about-breadcrumb a:hover {

    color:
        var(--secondary-light);

}


.about-breadcrumb span {

    color:
        #fff;

}


.about-breadcrumb i {

    color:
        var(--secondary-light);

    font-size:
        7px;

}


.about-banner-kicker {

    margin-bottom:
        12px;

    color:
        var(--secondary-light);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        2.5px;

}


.about-banner-title {

    margin:
        0;

    color:
        #fff;

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        clamp(
            44px,
            5vw,
            70px
        );

    line-height:
        .99;

    letter-spacing:
        -3px;

    font-weight:
        800;

}


.typing-line {

    display:
        block;

    width:
        0;

    white-space:
        nowrap;

    overflow:
        hidden;

}


.typing-line:first-child {

    animation:
        typingFirst
        1.7s
        steps(25,end)
        forwards;

}


.typing-line:nth-child(2) {

    animation:
        typingSecond
        1.7s
        steps(26,end)
        1.7s
        forwards;

}


.typing-highlight {

    background:
        linear-gradient(
            90deg,
            #fff,
            var(--secondary-light),
            #ff7fe8
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

}


@keyframes typingFirst {

    from {
        width:
            0;
    }

    to {
        width:
            100%;
    }

}


@keyframes typingSecond {

    from {
        width:
            0;
    }

    to {
        width:
            100%;
    }

}


/* =========================================================
   ABOUT COMPANY
========================================================= */

.about-company-section {

    background:
        #fff;

}


.about-company-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(0, 1.05fr);

    align-items:
        center;

    gap:
        clamp(
            45px,
            6vw,
            100px
        );

}


.about-company-visual {

    position:
        relative;

    min-height:
        560px;

}


.about-image-wrap {

    position:
        relative;

    width:
        100%;

    height:
        530px;

}


.about-main-image {

    position:
        absolute;

    top:
        0;

    left:
        0;

    z-index:
        2;

    width:
        82%;

    height:
        91%;

    overflow:
        hidden;

    border-radius:
        25px
        75px
        25px
        75px;

    box-shadow:
        var(--shadow);

}


.about-main-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform
        1s
        cubic-bezier(.2,.8,.2,1);

}


.about-company-visual:hover
.about-main-image img {

    transform:
        scale(1.07);

}


.about-image-light {

    position:
        absolute;

    z-index:
        3;

    top:
        0;

    left:
        0;

    width:
        82%;

    height:
        91%;

    border-radius:
        25px
        75px
        25px
        75px;

    pointer-events:
        none;

    background:
        linear-gradient(
            135deg,
            rgba(0,73,148,.24),
            transparent 48%,
            rgba(151,9,131,.20)
        );

}


.about-image-frame {

    position:
        absolute;

    right:
        0;

    bottom:
        0;

    z-index:
        1;

    width:
        67%;

    height:
        70%;

    border:
        2px solid
        var(--secondary);

    border-radius:
        20px
        65px
        20px
        65px;

    opacity:
        .65;

    animation:
        frameMove
        6s
        ease-in-out
        infinite;

}


@keyframes frameMove {

    0%,
    100% {
        transform:
            translate(0,0);
    }

    50% {
        transform:
            translate(-8px,-8px);
    }

}


/* =========================================================
   LOGO CIRCLE
========================================================= */

.about-logo-circle {

    position:
        absolute;

    z-index:
        8;

    top:
        15%;

    right:
        5%;

    width:
        105px;

    height:
        105px;

    display:
        grid;

    place-items:
        center;

    border:
        5px solid
        rgba(0,167,212,.16);

    border-radius:
        50%;

    background:
        rgba(255,255,255,.97);

    box-shadow:
        0 20px 45px
        rgba(0,35,75,.18);

    animation:
        logoFloat
        5s
        ease-in-out
        infinite;

}


.about-logo-circle img {

    width:
        73px;

    height:
        65px;

    object-fit:
        contain;

}


@keyframes logoFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-8px);
    }

}


/* =========================================================
   MINI ORBIT
========================================================= */

.about-mini-orbit {

    position:
        absolute;

    z-index:
        7;

    top:
        5%;

    right:
        -7px;

    width:
        135px;

    height:
        135px;

    border:
        1px dashed
        rgba(151,9,131,.45);

    border-radius:
        50%;

    animation:
        miniOrbit
        12s
        linear
        infinite;

}


.about-mini-orbit span {

    position:
        absolute;

    top:
        -4px;

    left:
        50%;

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        var(--tertiary);

    box-shadow:
        0 0 14px
        rgba(151,9,131,.65);

}


@keyframes miniOrbit {

    from {
        transform:
            rotate(0);
    }

    to {
        transform:
            rotate(360deg);
    }

}


/* =========================================================
   DOTS
========================================================= */

.about-dot {

    position:
        absolute;

    z-index:
        7;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--secondary);

    box-shadow:
        0 0 15px
        rgba(0,167,212,.70);

    animation:
        dotFloat
        4s
        ease-in-out
        infinite;

}


.dot-one {

    top:
        20%;

    left:
        -7px;

}


.dot-two {

    right:
        15%;

    bottom:
        12%;

    animation-delay:
        1s;

}


.dot-three {

    left:
        18%;

    bottom:
        3%;

    animation-delay:
        2s;

}


@keyframes dotFloat {

    0%,
    100% {
        transform:
            translateY(0);
        opacity:
            .5;
    }

    50% {
        transform:
            translateY(-12px);
        opacity:
            1;
    }

}


/* =========================================================
   EXPERIENCE BADGE
========================================================= */

.about-experience-badge {

    position:
        absolute;

    z-index:
        9;

    left:
        5%;

    bottom:
        4%;

    width:
        135px;

    height:
        135px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    color:
        #fff;

    background:
        var(--tertiary);

    box-shadow:
        0 20px 50px
        rgba(151,9,131,.25);

    animation:
        badgePulse
        5s
        ease-in-out
        infinite;

}


.about-experience-badge strong {

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        34px;

    line-height:
        1;

}


.about-experience-badge span {

    margin-top:
        7px;

    color:
        rgba(255,255,255,.72);

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        1.2px;

    text-align:
        center;

    line-height:
        1.5;

}


@keyframes badgePulse {

    0%,
    100% {
        transform:
            scale(1);
    }

    50% {
        transform:
            scale(1.04);
    }

}


/* =========================================================
   ABOUT CONTENT
========================================================= */

.about-company-content {

    max-width:
        650px;

}


.about-company-content h2 {

    margin:
        10px 0 22px;

    color:
        var(--ink);

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        clamp(
            37px,
            4.4vw,
            58px
        );

    line-height:
        1.03;

    letter-spacing:
        -2.2px;

    font-weight:
        800;

}


.about-company-content h2 span {

    display:
        block;

    color:
        var(--primary);

}


.about-company-content p {

    margin:
        0 0 14px;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.8;

}


.about-company-content .about-lead {

    margin-top:
        0;

    color:
       black;

    font-size:
        14px;

    line-height:
        1.85;
        text-align: justify;

}




.about-company-content strong {

    color:
        var(--primary);

    font-weight:
        800;
        

}


/* =========================================================
   FEATURES
========================================================= */

.about-feature-list {

    display:
        grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:
        12px 20px;

    margin-top:
        27px;

}


.about-feature {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    padding:
        13px 0;

    border-top:
        1px solid
        rgba(0,73,148,.10);

}


.about-feature-icon {

    width:
        35px;

    height:
        35px;

    min-width:
        35px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        9px;

    color:
        var(--primary);

    background:
        rgba(0,167,212,.09);

    transition:
        .3s ease;

}


.about-feature:hover
.about-feature-icon {

    color:
        #fff;

    background:
        var(--tertiary);

    transform:
        rotate(-5deg)
        scale(1.05);

}


.about-feature strong {

    display:
        block;

    margin-bottom:
        3px;

    color:
        var(--ink);

    font-size:
        13px;

    font-weight:
        800;

}


.about-feature small {

    display:
        block;

    color:
        black;

    font-size:
        11px;

    line-height:
        1.5;

}

/* =========================================================
   STATISTICS
========================================================= */

.about-stats-section {

    padding:
        0 0 110px;

    background:
        #fff;

}


/* =========================================================
   STATS GRID
========================================================= */

.about-stats-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        17px;

}


/* =========================================================
   STAT BOX
========================================================= */

.about-stat-box {

    position:
        relative;

    min-height:
        225px;

    padding:
        25px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(0, 73, 148, .12);

    border-radius:
        20px;

    background:
        var(--primary);

    box-shadow:
        0 14px 45px
        rgba(0, 45, 100, .16);

    transition:
        .4s ease;

}


/* =========================================================
   DECORATIVE CIRCLE
========================================================= */

.about-stat-box::before {

    content:
        "";

    position:
        absolute;

    width:
        155px;

    height:
        155px;

    right:
        -78px;

    top:
        -78px;

    border-radius:
        50%;

    background:
        rgba(255, 255, 255, .07);

    transition:
        .5s ease;

}


/* =========================================================
   HOVER
========================================================= */

.about-stat-box:hover {

    transform:
        translateY(-7px);

    background:
        var(--primary-dark);

    border-color:
        rgba(255, 255, 255, .18);

    box-shadow:
        0 25px 65px
        rgba(0, 35, 75, .24);

}


.about-stat-box:hover::before {

    transform:
        scale(1.7);

    background:
        rgba(255, 255, 255, .10);

}


/* =========================================================
   ICON BOX
========================================================= */

.about-stat-icon {

    position:
        relative;

    z-index:
        2;

    width:
        45px;

    height:
        45px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        12px;

    color:
        #fff;

    background:
        var(--tertiary);

    box-shadow:
        0 10px 25px
        rgba(151, 9, 131, .28);

    transition:
        .35s ease;

}


.about-stat-icon i {

    color:
        #fff;

    font-size:
        16px;

}


.about-stat-box:hover
.about-stat-icon {

    background:
        var(--tertiary-dark);

    transform:
        rotate(-5deg)
        scale(1.08);

    box-shadow:
        0 12px 28px
        rgba(151, 9, 131, .38);

}


/* =========================================================
   STAT NUMBER
========================================================= */

.about-stat-number {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        baseline;

    margin-top:
        28px;

}


.about-stat-number span {

    color:
        #fff;

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        37px;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        -1.5px;

}


.about-stat-number b {

    margin-left:
        3px;

    color:
        var(--tertiary);

    font-size:
        20px;

    font-weight:
        800;

}


/* =========================================================
   PAN TEXT
========================================================= */

.about-stat-number.stat-text span {

    color:
        #fff;

    font-size:
        28px;

    letter-spacing:
        0;

}


/* =========================================================
   STAT TITLE
========================================================= */

.about-stat-box > strong {

    position:
        relative;

    z-index:
        2;

    display:
        block;

    margin-top:
        9px;

    color:
        #fff;

    font-size:
        12px;

    font-weight:
        800;

}


/* =========================================================
   STAT DESCRIPTION
========================================================= */

.about-stat-box > small {

    position:
        relative;

    z-index:
        2;

    display:
        block;

    margin-top:
        5px;

    color:
        rgba(255, 255, 255, .72);

    font-size:
        9px;

    line-height:
        1.5;

}


/* =========================================================
   BOTTOM GRADIENT LINE
========================================================= */

.stat-line {

    position:
        absolute;

    left:
        25px;

    right:
        25px;

    bottom:
        18px;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            var(--secondary),
            var(--tertiary),
            transparent
        );

    transform:
        scaleX(.35);

    transform-origin:
        left;

    transition:
        .4s ease;

}


.about-stat-box:hover
.stat-line {

    transform:
        scaleX(1);

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1199px) {

    .about-stats-grid {

        grid-template-columns:
            repeat(2, 1fr);

        gap:
            17px;

    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 767px) {

    .about-stats-section {

        padding-bottom:
            75px;

    }


    .about-stats-grid {

        grid-template-columns:
            1fr;

        gap:
            15px;

    }


    .about-stat-box {

        min-height:
            210px;

        padding:
            23px;

    }


    .about-stat-number {

        margin-top:
            25px;

    }


    .about-stat-number span {

        font-size:
            34px;

    }


    .about-stat-number.stat-text span {

        font-size:
            27px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .about-stat-box {

        min-height:
            205px;

        padding:
            21px;

    }


    .about-stat-icon {

        width:
            43px;

        height:
            43px;

    }


    .about-stat-number span {

        font-size:
            32px;

    }


    .about-stat-box > strong {

        font-size:
            11.5px;

    }


    .about-stat-box > small {

        font-size:
            9px;

    }


    .stat-line {

        left:
            21px;

        right:
            21px;

        bottom:
            16px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .about-stat-box,
    .about-stat-box::before,
    .about-stat-icon,
    .stat-line {

        transition:
            none !important;

    }

}
/* =========================================================
   WHY AMRITHA
========================================================= */

.about-identity-section {

    background:
        var(--soft);

}


.identity-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        17px;

}


.identity-card {

    position:
        relative;

    min-height:
        320px;

    padding:
        35px;

    overflow:
        hidden;

    border:
        1px solid
        var(--line);

    border-radius:
        25px;

    background:
        #fff;

    box-shadow:
        0 15px 50px
        rgba(0,35,75,.05);

    transition:
        .35s ease;

}


.identity-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 25px 60px
        rgba(0,35,75,.10);

}


.identity-card-dark {

    color:
        #fff;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(0,167,212,.30),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

}


.identity-number {

    position:
        absolute;

    right:
        25px;

    top:
        20px;

    color:
        rgba(0,73,148,.10);

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        50px;

    font-weight:
        800;

}


.identity-card-dark
.identity-number {

    color:
        rgba(255,255,255,.10);

}


.identity-icon {

    width:
        52px;

    height:
        52px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        48px;

    border-radius:
        15px;

    color:
        #fff;

    background:
        var(--tertiary);

    box-shadow:
        0 12px 30px
        rgba(151,9,131,.18);

}


.identity-card > span {

    color:
        var(--tertiary);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


.identity-card-dark > span {

    color:
        var(--secondary-light);

}


.identity-card h3 {

    margin:
        9px 0 10px;

    color:
        var(--ink);

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        25px;

    line-height:
        1.2;

    font-weight:
        800;

}


.identity-card-dark h3 {

    color:
        #fff;

}


.identity-card p {

    margin:
        0;

    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.8;

}


.identity-card-dark p {

    color:
        rgba(255,255,255,.66);

}


/* =========================================================
   CTA
========================================================= */

.about-cta-section {

    position:
        relative;

    padding:
        100px 0;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #001d45,
            #004994
        );

}


.about-cta-glow {

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    right:
        -180px;

    top:
        -230px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(0,167,212,.25),
            transparent 70%
        );

}


.about-cta-shell {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        50px;

}


.about-cta-shell h2 {

    margin:
        10px 0 15px;

    color:
        #fff;

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        clamp(
            35px,
            4vw,
            55px
        );

    line-height:
        1.05;

    letter-spacing:
        -2px;

    font-weight:
        800;

}


.about-cta-shell h2 span {

    color:
        var(--secondary);

}


.about-cta-shell p {

    max-width:
        600px;

    margin:
        0;

    color:
        rgba(255,255,255,.67);

    font-size:
        12px;

    line-height:
        1.8;

}


.about-cta-shell
.section-kicker {

    color:
        var(--secondary-light);
        

}


.about-cta-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    flex-shrink:
        0;

}


.premium-btn {

    min-height:
        50px;

    padding:
        0 17px 0 19px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    border:
        0;

    border-radius:
        12px;

    color:
        #fff;

    background:
        var(--tertiary);

    font-size:
        11px;

    font-weight:
        800;

    box-shadow:
        0 15px 35px
        rgba(151,9,131,.25);

    transition:
        .3s ease;

}


.premium-btn:hover {

    color:
        #fff;

    background:
        #b00c99;

    transform:
        translateY(-3px);

}


.premium-btn > span {

    width:
        28px;

    height:
        28px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        8px;

    background:
        rgba(255,255,255,.16);

}


.premium-outline-btn {

    min-height:
        50px;

    padding:
        0 18px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    border:
        1px solid
        rgba(255,255,255,.25);

    border-radius:
        12px;

    color:
        #fff;

    background:
        rgba(255,255,255,.05);

    font-size:
        11px;

    font-weight:
        800;

    transition:
        .3s ease;

}


.premium-outline-btn:hover {

    color:
        #fff;

    border-color:
        var(--secondary);

    background:
        rgba(0,167,212,.10);

}


/* =========================================================
   FOOTER
========================================================= */

.footer {

    position:
        relative;

    overflow:
        hidden;

    color:
        rgba(255,255,255,.65);

    background:
        linear-gradient(
            135deg,
            #06101f,
            #001d45
        );

    border-top:
        3px solid
        var(--tertiary);

}


.footer::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    opacity:
        .13;

    background-image:

        linear-gradient(
            rgba(255,255,255,.04) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.04) 1px,
            transparent 1px
        );

    background-size:
        55px 55px;

    pointer-events:
        none;

}


.footer-main {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        1.45fr
        .85fr
        1fr
        1.35fr;

    gap:
        35px;

    padding:
        85px 0 75px;

}


.footer-brand-block {

    min-width:
        0;

}


.footer-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

}


.footer-brand img {

    width:
        120px;

    height:
        88px;

    object-fit:
        contain;

}


.footer-brand strong {

    display:
        block;

    color:
        white;

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        22px;

    letter-spacing:
        1px;

    font-weight:
        800;

}


.footer-brand span {

    display:
        block;

    margin-top:
        5px;

    color:
        white;

    font-size:
        12px;

}


.footer-brand-block > p {

    max-width:
        430px;

    margin:
        20px 0;

    color:
        white;

    font-size:
        14px;

    line-height:
        1.8;

}


.footer-social {

    display:
        flex;

    gap:
        8px;

    margin-bottom:
        20px;

}


.footer-social a {

    width:
        36px;

    height:
        36px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius:
        10px;

    color:
        rgba(255,255,255,.62);

    background:
        rgba(255,255,255,.03);

    font-size:
        11px;

    transition:
        .3s ease;

}


.footer-social a:hover {

    color:
        #fff;

    border-color:
        var(--secondary);

    background:
        rgba(0,167,212,.12);

    transform:
        translateY(-3px);

}


.footer-qr-card {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        10px 13px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        14px;

    background:
        rgba(255,255,255,.045);

}


.footer-qr-card img {

    width:
        70px;

    height:
        70px;

    padding:
        4px;

    background:
        #fff;

    border-radius:
        7px;

}


.footer-qr-card span {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.footer-qr-card strong {

    color:
        var(--secondary-light);

    font-size:
        8px;

    letter-spacing:
        1.2px;

}


.footer-qr-card small {

    color:
        rgba(255,255,255,.46);

    font-size:
        8px;

}


.footer-column,
.footer-contact-block {

    padding-left:
        30px;

    border-left:
        1px solid
        rgba(255,255,255,.08);

}


.footer-title {

    position:
        relative;

    display:
        inline-block;

    margin-bottom:
        24px;

    color:
        var(--secondary-light);

    font-size:
        14px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


.footer-title::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -8px;

    width:
        35px;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            var(--secondary),
            var(--tertiary)
        );

}


.footer-column > a {

    display:
        block;

    margin-bottom:
        13px;

    color:
        white;

    font-size:
        12px;

    line-height:
        1.6;

    transition:
        .25s ease;

}


.footer-column > a i {

    margin-right:
        8px;

    color:
        var(--secondary);

    font-size:
        7px;

    transition:
        .25s ease;

}


.footer-column > a:hover {

    color:
        #fff;

    transform:
        translateX(4px);

}


.footer-column > a:hover i {

    color:
        var(--tertiary);

}


.footer-contact-line {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    margin-bottom:
        18px;

    color:
        rgba(255,255,255,.58);

    font-size:
        10px;

    line-height:
        1.7;

}


.footer-contact-line i {

    width:
        40px;

    height:
        40px;

    min-width:
        40px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    color:
        var(--secondary);

    background:
        rgba(0,167,212,.09);

}


.footer-contact-line:hover {

    color:
        #fff;

}


.footer-contact-line:hover i {

    color:
        #fff;

    background:
        var(--tertiary);

}


.footer-bottom {

    position:
        relative;

    z-index:
        2;

    min-height:
        60px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border-top:
        1px solid
        rgba(255,255,255,.08);

    color:
        white;

    font-size:
        12px;

}


.footer-bottom strong {

    color:
        rgba(255,255,255,.72);

}


.designer-name {

    color:
        var(--secondary-light) !important;

}


/* =========================================================
   REVEAL
========================================================= */

.reveal {

    opacity:
        0;

    transform:
        translateY(30px);

    transition:
        opacity .8s ease,
        transform .8s
        cubic-bezier(.2,.7,.2,1);

}


.reveal.visible {

    opacity:
        1;

    transform:
        translateY(0);

}


.reveal-delay {

    transition-delay:
        .15s;

}


.reveal-delay-2 {

    transition-delay:
        .25s;

}


.reveal-delay-3 {

    transition-delay:
        .35s;

}


/* =========================================================
   HOME-PAGE RESPONSIVE CONTAINER
========================================================= */

@media (min-width: 1400px) {

    .container-fluid.px-lg-5 {

        padding-left:
            110px !important;

        padding-right:
            110px !important;

    }


    .section-heading-row {

        grid-template-columns:
            minmax(0,1fr)
            410px;

        gap:
            70px;

    }

}


@media (min-width: 1200px)
       and (max-width: 1399px) {

    .container-fluid.px-lg-5 {

        padding-left:
            82px !important;

        padding-right:
            82px !important;

    }


    .section-heading-row {

        gap:
            55px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {

    .top-left {

        display:
            none;

    }


    .top-band-inner {

        justify-content:
            center;

    }


    .header-cta {

        margin:
            15px 0 20px;

        padding:
            0 5px;

    }


    .nav-main {

        padding-top:
            10px;

    }


    .nav-main .nav-link {

        padding:
            11px 7px !important;

    }


    .nav-main .nav-link::after {

        display:
            none;

    }


    .mega-menu {

        width:
            100%;

        position:
            static !important;

        transform:
            none !important;

        box-shadow:
            none !important;

        border-radius:
            0 !important;

    }


    .mega-inner {

        grid-template-columns:
            1fr;

        padding:
            18px 10px 25px;

    }


    .mega-intro {

        padding:
            5px 5px 18px;

        border-right:
            0;

        border-bottom:
            1px solid
            var(--line);

    }


    .mega-grid {

        grid-template-columns:
            repeat(2,1fr);

    }


    .about-company-grid {

        gap:
            45px;

    }


    .about-company-content {

        max-width:
            100%;

    }


    .about-stats-grid {

        grid-template-columns:
            repeat(2,1fr);

    }


    .identity-grid {

        grid-template-columns:
            repeat(2,1fr);

    }


    .identity-card:last-child {

        grid-column:
            1 / -1;

    }


    .footer-main {

        grid-template-columns:
            repeat(2,1fr);

    }


    .footer-brand-block {

        grid-column:
            1 / -1;

    }

}


/* =========================================================
   SAME HOME TABLET CONTAINER
========================================================= */

@media (min-width: 768px)
       and (max-width: 1199px) {

    .container-fluid.px-lg-5 {

        padding-left:
            42px !important;

        padding-right:
            42px !important;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .container-fluid.px-lg-5 {

        width:
            100%;

        padding-left:
            20px !important;

        padding-right:
            20px !important;

    }


    .top-band {

        font-size:
            9px;

    }


    .top-right {

        gap:
            12px;

    }


    .top-right a:first-child {

        display:
            none;

    }


    .brand-logo {

        width:
            60px;

        height:
            50px;

    }


    .brand-copy strong {

        font-size:
            17px;

    }


    .brand-copy b {

        font-size:
            7px;

        letter-spacing:
            3.5px;

    }


    .floating-contact {

        left:
            10px;

    }


    .float-item {

        width:
            38px;

        height:
            38px;

    }


    .float-item::after {

        display:
            none;

    }


    .about-page-banner {

        min-height:
            270px;

    }


    .about-banner-content {

        padding:
            35px 0 40px;

    }


    .about-banner-title {

        font-size:
            38px;

        line-height:
            1.04;

        letter-spacing:
            -1.5px;

    }


    .about-banner-kicker {

        font-size:
            8px;

        letter-spacing:
            2px;

    }


    .about-orbit-one {

        width:
            290px;

        height:
            290px;

        right:
            -130px;

    }


    .about-orbit-two {

        width:
            190px;

        height:
            190px;

        right:
            -80px;

    }


    .section-space {

        padding:
            80px 0;

    }


    .section-heading-row {

        grid-template-columns:
            1fr;

        gap:
            18px;

        margin-bottom:
            30px;

    }


    .section-heading-row h2 {

        font-size:
            40px;

        letter-spacing:
            -1.5px;

    }


    .about-company-grid {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


    .about-company-visual {

        min-height:
            430px;

    }


    .about-image-wrap {

        height:
            420px;

    }


    .about-main-image {

        width:
            84%;

        height:
            88%;

        border-radius:
            20px
            55px
            20px
            55px;

    }


    .about-image-light {

        width:
            84%;

        height:
            88%;

    }


    .about-image-frame {

        width:
            70%;

        height:
            67%;

    }


    .about-logo-circle {

        width:
            82px;

        height:
            82px;

        right:
            3%;

        top:
            10%;

    }


    .about-logo-circle img {

        width:
            58px;

        height:
            50px;

    }


    .about-mini-orbit {

        width:
            105px;

        height:
            105px;

        right:
            -7px;

        top:
            3%;

    }


    .about-experience-badge {

        width:
            110px;

        height:
            110px;

        left:
            3%;

        bottom:
            2%;

    }


    .about-experience-badge strong {

        font-size:
            27px;

    }


    .about-company-content h2 {

        font-size:
            40px;

        letter-spacing:
            -1.5px;

    }


    .about-company-content p {

        font-size:
            11px;

    }


    .about-feature-list {

        grid-template-columns:
            1fr;

    }


    .about-stats-section {

        padding-bottom:
            70px;

    }


    .about-stats-grid {

        grid-template-columns:
            repeat(2,1fr);

        gap:
            12px;

    }


    .about-stat-box {

        min-height:
            205px;

        padding:
            18px;

    }


    .about-stat-number span {

        font-size:
            29px;

    }


    .about-stat-box > strong {

        font-size:
            10px;

    }


    .about-stat-box > small {

        font-size:
            8px;

    }


    .identity-grid {

        grid-template-columns:
            1fr;

    }


    .identity-card:last-child {

        grid-column:
            auto;

    }


    .about-cta-shell {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            30px;

    }


    .about-cta-shell h2 {

        font-size:
            40px;

    }


    .about-cta-actions {

        width:
            100%;

    }


    .premium-btn,
    .premium-outline-btn {

        width:
            100%;

        justify-content:
            center;

    }


    .footer-main {

        grid-template-columns:
            1fr;

        padding:
            65px 0 50px;

    }


    .footer-brand-block {

        grid-column:
            auto;

    }


    .footer-column,
    .footer-contact-block {

        padding-left:
            0;

        border-left:
            0;

    }


    .footer-bottom {

        flex-direction:
            column;

        justify-content:
            center;

        text-align:
            center;

        padding:
            20px 0;

    }

}


/* =========================================================
   SAME HOME MOBILE CONTAINER
========================================================= */

@media (max-width: 420px) {

    .container-fluid.px-lg-5 {

        padding-left:
            17px !important;

        padding-right:
            17px !important;

    }


    .about-page-banner {

        min-height:
            245px;

    }


    .about-banner-title {

        font-size:
            31px;

    }


    .about-company-content h2 {

        font-size:
            35px;

    }


    .about-company-visual {

        min-height:
            380px;

    }


    .about-image-wrap {

        height:
            370px;

    }


    .about-experience-badge {

        width:
            95px;

        height:
            95px;

    }


    .about-experience-badge strong {

        font-size:
            23px;

    }


    .about-logo-circle {

        width:
            70px;

        height:
            70px;

    }


    .about-logo-circle img {

        width:
            50px;

        height:
            44px;

    }


    .about-stat-box {

        min-height:
            190px;

        padding:
            15px;

    }


    .about-stat-number span {

        font-size:
            25px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation:
            none !important;

        transition:
            none !important;

        scroll-behavior:
            auto !important;

    }

}

/* =========================================================
   AMRITHA UNIFORMS
   OUR PROCESS SECTION
========================================================= */

.uniform-process-section {

    position: relative;

    padding:
        105px 0 120px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7faff 100%
        );

}


/* =========================================================
   BACKGROUND GRAPHIC
========================================================= */

.uniform-process-section::before {

    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    top: -260px;
    right: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,167,212,.09),
            transparent 68%
        );

    pointer-events: none;

}


.uniform-process-section::after {

    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    bottom: -240px;
    left: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(151,9,131,.07),
            transparent 70%
        );

    pointer-events: none;

}


/* =========================================================
   SECTION HEADING
========================================================= */

.process-heading {

    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 20px;

    max-width: 700px;

    margin-bottom: 58px;

}


.process-heading-line {

    position: relative;

    flex: 0 0 7px;

    width: 7px;

    min-height: 90px;

    border-radius: 10px;

    background:
        linear-gradient(
            180deg,
            var(--secondary),
            var(--primary),
            var(--tertiary)
        );

}


.process-heading-line::before {

    content: "";

    position: absolute;

    width: 28px;
    height: 28px;

    top: 0;
    left: -10px;

    border-radius: 50%;

    background: var(--secondary);

    opacity: .14;

    animation:
        processPulse 2.5s ease-in-out infinite;

}


.process-heading-content {

    position: relative;

}


.process-kicker {

    display: inline-block;

    margin-bottom: 8px;

    color: #970983;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 2px;

}


.process-heading h2 {

    margin: 0;

    color: var(--ink);

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        clamp(34px, 4vw, 48px);

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -1.5px;

}


.process-heading h2 span {

    color: var(--tertiary);

}


.process-heading p {

    max-width: 650px;

    margin: 13px 0 0;

    color: black;

    font-size: 15px;

    line-height: 1.75;

}


/* =========================================================
   PROCESS TRACK
========================================================= */

.uniform-process-track {

    position: relative;

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 11px;

}


/* =========================================================
   CONNECTING LINE
========================================================= */

.uniform-process-track::before {

    content: "";

    position: absolute;

    left: 8%;

    right: 8%;

    top: 177px;

    height: 2px;

    z-index: 0;

    background:
        linear-gradient(
            90deg,
            var(--secondary),
            var(--primary),
            var(--tertiary),
            var(--primary),
            var(--secondary)
        );

    background-size: 200% 100%;

    opacity: .35;

    animation:
        processLineMove 5s linear infinite;

}


/* =========================================================
   CARD
========================================================= */

.uniform-process-card {

    position: relative;

    z-index: 2;

    min-width: 0;

    border-radius: 17px;

    overflow: visible;

    transition:
        transform .45s ease;

}


.uniform-process-card:hover {

    transform:
        translateY(-8px);

}

/* =========================================================
   IMAGE
========================================================= */

.process-image-wrap {

    position: relative;

    height: 185px;

    /* Changed only this */
    overflow: visible;

    border-radius:
        17px 17px 0 0;

    background:
        #dfe8f2;

    box-shadow:
        0 12px 35px
        rgba(0, 45, 100, .13);

}


/* =========================================================
   IMAGE
========================================================= */

.process-image-wrap img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius:
        17px 17px 0 0;

    transition:
        transform .8s cubic-bezier(.2,.8,.2,1);

}


.uniform-process-card:hover
.process-image-wrap img {

    transform:
        scale(1.09);

}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.process-image-overlay {

    position: absolute;

    inset: 0;

    border-radius:
        17px 17px 0 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,30,69,.02) 25%,
            rgba(0,30,69,.48) 100%
        );

    pointer-events: none;

}


/* =========================================================
   NUMBER BADGE
========================================================= */

.process-number {

    position: absolute;

    z-index: 20;

    left: 50%;

    bottom: -27px;

    transform:
        translateX(-50%);

    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    border:
        5px solid #fff;

    color: #fff;

    background:
        var(--primary);

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 18px;

    font-weight: 800;

    box-shadow:
        0 8px 24px
        rgba(0,73,148,.24);

    transition:
        .4s ease;

}


/* =========================================================
   PINK NUMBER — 02 / 04
========================================================= */

.uniform-process-card:nth-child(even)
.process-number {

    background:
        var(--tertiary);

}


/* =========================================================
   NUMBER HOVER
========================================================= */

.uniform-process-card:hover
.process-number {

    transform:
        translateX(-50%)
        scale(1.12)
        rotate(6deg);

    box-shadow:
        0 12px 30px
        rgba(151,9,131,.28);

}
/* =========================================================
   INFORMATION PANEL
========================================================= */

.process-info {

    position: relative;

    min-height: 205px;

    padding:
        40px 18px 23px;

    background:
        #fff;

    border:
        1px solid
        rgba(0,73,148,.11);

    border-top: 0;

    border-radius:
        0 0 17px 17px;

    box-shadow:
        0 15px 38px
        rgba(0,35,75,.07);

    overflow: hidden;

}


.process-info::before {

    content: "";

    position: absolute;

    width: 100%;

    height: 3px;

    left: 0;
    top: 0;

    background:
        linear-gradient(
            90deg,
            var(--secondary),
            var(--primary)
        );

}


.process-pink::before {

    background:
        linear-gradient(
            90deg,
            var(--tertiary),
            #c81aad
        );

}


/* =========================================================
   ICON
========================================================= */

.process-icon {

    position: relative;

    width: 54px;
    height: 45px;

    margin:
        0 auto 16px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius:
        9px;

    color: #fff;

    background:
        var(--primary);

    font-size: 19px;

    box-shadow:
        0 8px 20px
        rgba(0,73,148,.20);

    transition:
        .4s ease;

}


.process-pink .process-icon {

    background:
        var(--tertiary);

    box-shadow:
        0 8px 20px
        rgba(151,9,131,.20);

}


.uniform-process-card:hover
.process-icon {

    transform:
        translateY(-4px)
        scale(1.06);

}


/* =========================================================
   CONTENT
========================================================= */

.process-content {

    text-align: center;

}


.process-content h3 {

    margin:
        0 0 9px;

    color:
        var(--primary);

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        13px;

    line-height:
        1.35;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        .3px;

}


.process-pink .process-content h3 {

    color:
        var(--tertiary);

}


.process-content p {

    margin:
        0 auto;

    max-width:
        230px;

    color:
        black;

    font-size:
        14.5px;
        
        text-align:
        justify;

    line-height:
        1.65;

}


/* =========================================================
   CARD SHINE
========================================================= */

.process-info::after {

    content: "";

    position: absolute;

    width: 100px;
    height: 180px;

    left: -140px;
    top: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.7),
            transparent
        );

    transform:
        skewX(-20deg);

    transition:
        0s;

}


.uniform-process-card:hover
.process-info::after {

    left: 120%;

    transition:
        left .8s ease;

}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.reveal {

    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.8,.2,1);

}


.reveal.active {

    opacity: 1;

    transform:
        translateY(0);

}


.reveal-delay {

    transition-delay:
        .12s;

}


.reveal-delay-2 {

    transition-delay:
        .24s;

}


.reveal-delay-3 {

    transition-delay:
        .36s;

}


.reveal-delay-4 {

    transition-delay:
        .48s;

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes processPulse {

    0%,
    100% {

        transform:
            scale(.8);

        opacity:
            .12;

    }

    50% {

        transform:
            scale(1.35);

        opacity:
            .28;

    }

}


@keyframes processLineMove {

    0% {

        background-position:
            0% 50%;

    }

    100% {

        background-position:
            200% 50%;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {

    .uniform-process-track {

        grid-template-columns:
            repeat(3, 1fr);

        row-gap:
            35px;

    }


    .uniform-process-track::before {

        display:
            none;

    }

}




/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .uniform-process-section {

        padding:
            75px 0 85px;

    }


    .process-heading {

        margin-bottom:
            38px;

    }


    .process-heading h2 {

        font-size:
            32px;

    }


    .process-heading p {

        font-size:
            13px;

        line-height:
            1.7;

    }


    .uniform-process-track {

        grid-template-columns:
            1fr;

        gap:
            22px;

    }


    .uniform-process-card {

        max-width:
            470px;

        width:
            100%;

        margin:
            0 auto;

    }


    .process-image-wrap {

        height:
            210px;

    }


    .process-info {

        min-height:
            auto;

        padding:
            42px 24px 27px;

    }


    .process-content p {

        max-width:
            390px;

        font-size:
            11px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .process-heading {

        gap:
            14px;

    }


    .process-heading-line {

        flex-basis:
            5px;

        width:
            5px;

    }


    .process-heading h2 {

        font-size:
            29px;

    }


    .process-kicker {

        font-size:
            10px;

        letter-spacing:
            1.5px;

    }


    .process-image-wrap {

        height:
            190px;

    }


    .process-number {

        width:
            54px;

        height:
            54px;

        font-size:
            16px;

    }

}



/* =========================================================
   CONTACT BANNER
   SAME GRAPHICAL STYLE AS ABOUT PAGE
========================================================= */

.contact-page-banner {

    position:
        relative;

    min-height:
        350px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background:
        var(--primary-deep);

}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.contact-banner-bg {

    position:
        absolute;

    inset:
        0;

    background-image:
        url("images/banner-img1.png");

    background-position:
        center;

    background-size:
        cover;

    animation:
        contactBannerZoom
        18s
        ease-in-out
        infinite
        alternate;

    will-change:
        transform;

}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.contact-banner-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(0,29,69,.94) 0%,
            rgba(0,73,148,.72) 48%,
            rgba(0,29,69,.88) 100%
        );

}


/* =========================================================
   GRAPHICAL GRID
========================================================= */

.contact-banner-grid {

    position:
        absolute;

    inset:
        0;

    opacity:
        .18;

    background-image:
        linear-gradient(
            rgba(255,255,255,.10) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.10) 1px,
            transparent 1px
        );

    background-size:
        55px 55px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            black 25%,
            black 75%,
            transparent
        );

}


/* =========================================================
   MOVING LIGHT BEAMS
========================================================= */

.contact-light-beams {

    position:
        absolute;

    inset:
        0;

    overflow:
        hidden;

    pointer-events:
        none;

}


.contact-light-beams span {

    position:
        absolute;

    top:
        -20%;

    width:
        2px;

    height:
        140%;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(77,216,244,.45),
            transparent
        );

    filter:
        blur(.5px);

    transform:
        rotate(18deg);

    animation:
        contactBeamMove
        7s
        linear
        infinite;

}


.contact-light-beams span:nth-child(1) {

    left:
        62%;

    animation-delay:
        0s;

}


.contact-light-beams span:nth-child(2) {

    left:
        74%;

    opacity:
        .55;

    animation-delay:
        2s;

}


.contact-light-beams span:nth-child(3) {

    left:
        86%;

    opacity:
        .35;

    animation-delay:
        4s;

}


/* =========================================================
   GRAPHICAL ORBITS
========================================================= */

.contact-orbit {

    position:
        absolute;

    border:
        1px solid
        rgba(77,216,244,.22);

    border-radius:
        50%;

    pointer-events:
        none;

}


.contact-orbit-one {

    width:
        300px;

    height:
        130px;

    right:
        8%;

    top:
        12%;

    transform:
        rotate(-24deg);

    animation:
        contactOrbitRotate
        12s
        linear
        infinite;

}


.contact-orbit-two {

    width:
        210px;

    height:
        95px;

    right:
        16%;

    top:
        27%;

    transform:
        rotate(30deg);

    border-color:
        rgba(255,255,255,.16);

    animation:
        contactOrbitRotateReverse
        9s
        linear
        infinite;

}


/* =========================================================
   ORBIT DOTS
========================================================= */

.contact-orbit-one::before,
.contact-orbit-two::before {

    content:
        "";

    position:
        absolute;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--secondary-light);

    box-shadow:
        0 0 18px
        rgba(77,216,244,.85);

}


.contact-orbit-one::before {

    right:
        28px;

    top:
        16px;

}


.contact-orbit-two::before {

    left:
        18px;

    bottom:
        10px;

    background:
        #ff9be9;

    box-shadow:
        0 0 18px
        rgba(255,155,233,.8);

}


/* =========================================================
   GLOW
========================================================= */

.contact-glow {

    position:
        absolute;

    border-radius:
        50%;

    pointer-events:
        none;

    filter:
        blur(2px);

}


.contact-glow-one {

    width:
        220px;

    height:
        220px;

    right:
        20%;

    top:
        0;

    background:
        radial-gradient(
            circle,
            rgba(0,167,212,.18),
            transparent 70%
        );

    animation:
        contactGlowFloat
        6s
        ease-in-out
        infinite;

}


.contact-glow-two {

    width:
        180px;

    height:
        180px;

    right:
        4%;

    bottom:
        -80px;

    background:
        radial-gradient(
            circle,
            rgba(151,9,131,.18),
            transparent 70%
        );

    animation:
        contactGlowFloat
        7s
        ease-in-out
        infinite
        reverse;

}


/* =========================================================
   PARTICLES
========================================================= */

.contact-particle {

    position:
        absolute;

    width:
        4px;

    height:
        4px;

    border-radius:
        50%;

    background:
        var(--secondary-light);

    box-shadow:
        0 0 12px
        rgba(77,216,244,.8);

    animation:
        contactParticleFloat
        5s
        ease-in-out
        infinite;

}


.contact-particle-1 {

    left:
        58%;

    top:
        25%;

}


.contact-particle-2 {

    left:
        72%;

    top:
        70%;

    animation-delay:
        1.2s;

}


.contact-particle-3 {

    right:
        8%;

    top:
        30%;

    animation-delay:
        2.4s;

    background:
        #ff9be9;

}


.contact-particle-4 {

    right:
        25%;

    bottom:
        18%;

    animation-delay:
        3.1s;

}


/* =========================================================
   BANNER CONTENT
========================================================= */

.contact-banner-content {

    position:
        relative;

    z-index:
        10;

    padding:
        60px 0;

    max-width:
        900px;

}


/* =========================================================
   BREADCRUMB
========================================================= */

.contact-breadcrumb {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        18px;

    color:
        rgba(255,255,255,.72);

    font-size:
        10px;

    font-weight:
        600;

}


.contact-breadcrumb a {

    color:
        #fff;

    transition:
        .3s ease;

}


.contact-breadcrumb a:hover {

    color:
        var(--secondary-light);

}


.contact-breadcrumb i {

    color:
        var(--secondary-light);

    font-size:
        8px;

}


/* =========================================================
   KICKER
========================================================= */

.contact-banner-kicker {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        12px;

    color:
        var(--secondary-light);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        2.2px;

}


.contact-banner-kicker::before {

    content:
        "";

    width:
        28px;

    height:
        2px;

    border-radius:
        5px;

    background:
        var(--tertiary);

}


/* =========================================================
   BANNER TITLE
========================================================= */

.contact-banner-title {

    margin:
        0;

    color:
        #fff;

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        clamp(36px, 5vw, 60px);

    line-height:
        1.06;

    font-weight:
        800;

    letter-spacing:
        -2px;

}


.contact-banner-title .typing-line {

    display:
        block;

    width:
        fit-content;

}


.contact-banner-title .typing-highlight {

    color:
        #fff;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #9deeff,
            #ffb0ed
        );

    -webkit-background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

}


/* =========================================================
   CONTACT INFORMATION SECTION
========================================================= */

.contact-info-section {

    padding:
        105px 0 80px;

    background:
        #fff;

}


.contact-section-heading {

    max-width:
        700px;

    margin:
        0 auto 48px;

    text-align:
        center;

}


.section-kicker {

    display:
        block;

    margin-bottom:
        9px;

    color:
        var(--tertiary);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


.contact-section-heading h2,
.form-heading h2,
.location-heading h2 {

    margin:
        0;

    font-family:
        "Montserrat",
        sans-serif;

    color:
        var(--ink);

    font-size:
        clamp(32px, 4vw, 45px);

    line-height:
        1.12;

    font-weight:
        800;

    letter-spacing:
        -1.3px;

}


.contact-section-heading h2 span,
.form-heading h2 span,
.location-heading h2 span {

    color:
        var(--tertiary);

}


.contact-section-heading p {

    margin:
        14px auto 0;

    max-width:
        640px;

    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.75;

}


/* =========================================================
   CONTACT INFO CARDS
========================================================= */

.contact-info-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:
        16px;

}


.contact-info-card {

    position:
        relative;

    min-height:
        210px;

    padding:
        25px 22px;

    overflow:
        hidden;

    border-radius:
        18px;

    background:
        var(--primary);

    color:
        #fff;

    box-shadow:
        0 16px 45px
        rgba(0,45,100,.15);

    transition:
        .4s ease;

}


.contact-info-card::before {

    content:
        "";

    position:
        absolute;

    width:
        170px;

    height:
        170px;

    right:
        -85px;

    top:
        -85px;

    border-radius:
        50%;

    background:
        rgba(255,255,255,.07);

    transition:
        .5s ease;

}


.contact-info-card::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        100%;

    height:
        3px;

    background:
        linear-gradient(
            90deg,
            var(--secondary),
            var(--tertiary)
        );

}


.contact-info-card:hover {

    transform:
        translateY(-8px);

    background:
        var(--primary-dark);

    box-shadow:
        0 25px 60px
        rgba(0,35,75,.24);

}


.contact-info-card:hover::before {

    transform:
        scale(1.7);

}


.contact-card-icon {

    width:
        49px;

    height:
        49px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        20px;

    border-radius:
        13px;

    background:
        var(--tertiary);

    color:
        #fff;

    font-size:
        17px;

    box-shadow:
        0 9px 22px
        rgba(151,9,131,.25);

    transition:
        .35s ease;

}


.contact-info-card:hover
.contact-card-icon {

    transform:
        rotate(-5deg)
        scale(1.08);

}


.contact-info-card span {

    display:
        block;

    color:
        var(--secondary-light);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        1.6px;

}


.contact-info-card h3 {

    margin:
        5px 0 9px;

    color:
        #fff;

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        17px;

    font-weight:
        800;

}


.contact-info-card p {

    margin:
        0;

    max-width:
        230px;

    color:
        white;

    font-size:
        15px;

    line-height:
        1.65;

}


.contact-info-card p a {

    color:
        #fff;

    font-weight:
        700;

}


.contact-info-card small {

    display:
        block;

    margin-top:
        7px;

    color:
        rgba(255,255,255,.58);

    font-size:
        8px;

}


.contact-card-number {

    position:
        absolute;

    right:
        20px;

    bottom:
        14px;

    color:
        rgba(255,255,255,.09);

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        45px;

    line-height:
        1;

    font-weight:
        800;

}


/* =========================================================
   MAIN CONTACT
========================================================= */

.contact-main-section {

    padding:
        30px 0 110px;

    background:
        #f5f8fc;

}


.contact-main-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(0,.95fr);

    gap:
        30px;

    align-items:
        stretch;

}


/* =========================================================
   FORM PANEL
========================================================= */

.contact-form-panel,
.contact-location-panel {

    padding:
        40px;

    border-radius:
        22px;

    background:
        #fff;

    box-shadow:
        0 18px 55px
        rgba(0,35,75,.08);

}


.form-heading,
.location-heading {

    margin-bottom:
        30px;

}


.form-heading p,
.location-heading p {

    max-width:
        620px;

    margin:
        13px 0 0;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.7;

}


.form-row {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        17px;

}


.form-group {

    margin-bottom:
        17px;

}


.form-group label {

    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--ink);

    font-size:
        10px;

    font-weight:
        800;

}


.form-group label span {

    color:
        var(--tertiary);

}


.input-wrap {

    position:
        relative;

}


.input-wrap > i {

    position:
        absolute;

    left:
        15px;

    top:
        50%;

    transform:
        translateY(-50%);

    color:
        var(--primary);

    font-size:
        12px;

    z-index:
        2;

}


.input-wrap input,
.input-wrap select,
.input-wrap textarea {

    width:
        100%;

    border:
        1px solid
        #e1e7ef;

    border-radius:
        10px;

    background:
        #f9fbfd;

    color:
        var(--ink);

    outline:
        none;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        11px;

    transition:
        .3s ease;

}


.input-wrap input,
.input-wrap select {

    height:
        47px;

    padding:
        0 14px 0 42px;

}


.input-wrap textarea {

    min-height:
        130px;

    padding:
        14px 15px 14px 42px;

    resize:
        vertical;

    line-height:
        1.6;

}


.input-wrap textarea + i {

    top:
        18px;

    transform:
        none;

}


.input-wrap input:focus,
.input-wrap select:focus,
.input-wrap textarea:focus {

    border-color:
        var(--secondary);

    background:
        #fff;

    box-shadow:
        0 0 0 4px
        rgba(0,167,212,.08);

}


.input-wrap input::placeholder,
.input-wrap textarea::placeholder {

    color:
        #a6afbc;

}


/* =========================================================
   SUBMIT
========================================================= */

.contact-submit {

    width:
        100%;

    min-height:
        52px;

    margin-top:
        5px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        13px;

    border:
        0;

    border-radius:
        10px;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            #0065b8
        );

    color:
        #fff;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        11px;

    font-weight:
        800;

    cursor:
        pointer;

    box-shadow:
        0 12px 30px
        rgba(0,73,148,.20);

    transition:
        .35s ease;

}


.contact-submit:hover {

    background:
        linear-gradient(
            90deg,
            var(--tertiary),
            #b10c9a
        );

    transform:
        translateY(-2px);

}


.contact-submit i {

    transition:
        .3s ease;

}


.contact-submit:hover i {

    transform:
        translateX(5px);

}


.form-status {

    margin-top:
        10px;

    text-align:
        center;

    font-size:
        10px;

    font-weight:
        700;

}


/* =========================================================
   MAP
========================================================= */

.contact-map {

    position:
        relative;

    height:
        310px;

    overflow:
        hidden;

    border-radius:
        17px;

    background:
        #e8eef5;

}


.contact-map iframe {

    width:
        100%;

    height:
        100%;

    border:
        0;

    display:
        block;

    filter:
        saturate(.85);

}


.map-location-pin {

    position:
        absolute;

    left:
        22px;

    bottom:
        20px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        8px 12px 8px 8px;

    border-radius:
        30px;

    background:
        rgba(255,255,255,.95);

    box-shadow:
        0 8px 25px
        rgba(0,35,75,.16);

}


.map-pin-icon {

    width:
        30px;

    height:
        30px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    color:
        #fff;

    background:
        var(--tertiary);

    font-size:
        11px;

}


.map-location-pin span {

    color:
        var(--primary);

    font-size:
        9px;

    font-weight:
        800;

}


/* =========================================================
   LOCATION DETAILS
========================================================= */

.location-details {

    margin-top:
        22px;

    display:
        grid;

    gap:
        13px;

}


.location-detail {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        12px;

    border:
        1px solid
        #edf0f4;

    border-radius:
        11px;

    background:
        #fbfcfe;

    transition:
        .3s ease;

}


.location-detail:hover {

    transform:
        translateX(5px);

    border-color:
        rgba(0,167,212,.25);

}


.location-detail-icon {

    flex:
        0 0 38px;

    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        9px;

    background:
        var(--primary);

    color:
        #fff;

    font-size:
        12px;

}


.location-detail strong {

    display:
        block;

    color:
        var(--ink);

    font-size:
        10px;

    font-weight:
        800;

}


.location-detail span {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--muted);

    font-size:
        9px;

}

.rating-stars {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rating-stars i {
    color: #f5b301;
    font-size: 12px;
}

.rating-stars b {
    margin-left: 7px;
    color: #004994;
    font-size: 13px;
    font-weight: 800;
}

.rating-stars em {
    margin-left: 2px;
    color: #6e7889;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
}
/* =========================================================
   CTA
========================================================= */

.contact-cta-section {

    padding:
        0 0 110px;

    background:
        #f5f8fc;

}


.contact-cta {

    position:
        relative;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    padding:
        45px 50px;

    border-radius:
        22px;

    background:
        linear-gradient(
            110deg,
            var(--primary-deep),
            var(--primary)
        );

    box-shadow:
        0 25px 65px
        rgba(0,45,100,.18);

}


.contact-cta::before {

    content:
        "";

    position:
        absolute;

    width:
        350px;

    height:
        350px;

    right:
        -160px;

    top:
        -190px;

    border-radius:
        50%;

    border:
        1px solid
        rgba(255,255,255,.12);

}


.cta-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        700px;

}


.cta-content > span {

    color:
        var(--secondary-light);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


.cta-content h2 {

    margin:
        8px 0;

    color:
        #fff;

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        clamp(25px,3vw,36px);

    line-height:
        1.15;

    font-weight:
        800;

}


.cta-content h2 strong {

    color:
        #ffb1f1;

}


.cta-content p {

    margin:
        0;

    color:
        rgba(255,255,255,.72);

    font-size:
        11px;

    line-height:
        1.7;

}


.cta-actions {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    gap:
        10px;

    flex-shrink:
        0;

}


.cta-actions a {

    min-height:
        45px;

    padding:
        0 17px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    border-radius:
        9px;

    font-size:
        10px;

    font-weight:
        800;

    transition:
        .3s ease;

}


.cta-whatsapp {

    color:
        #fff;

    background:
        #16a85a;

}


.cta-call {

    color:
        var(--primary);

    background:
        #fff;

}


.cta-actions a:hover {

    transform:
        translateY(-3px);

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .process-heading-line::before,
    .uniform-process-track::before {

        animation:
            none !important;

    }

    .uniform-process-card,
    .process-image-wrap img,
    .process-number,
    .process-icon {

        transition:
            none !important;

    }

}

/* =========================================================
   BANNER ANIMATIONS
========================================================= */

@keyframes contactBannerZoom {

    0% {

        transform:
            scale(1);

    }

    100% {

        transform:
            scale(1.08);

    }

}


@keyframes contactBeamMove {

    0% {

        transform:
            translateY(-20%)
            rotate(18deg);

        opacity:
            0;

    }

    20% {

        opacity:
            .7;

    }

    80% {

        opacity:
            .7;

    }

    100% {

        transform:
            translateY(20%)
            rotate(18deg);

        opacity:
            0;

    }

}


@keyframes contactOrbitRotate {

    from {

        transform:
            rotate(-24deg);

    }

    to {

        transform:
            rotate(336deg);

    }

}


@keyframes contactOrbitRotateReverse {

    from {

        transform:
            rotate(30deg);

    }

    to {

        transform:
            rotate(-330deg);

    }

}


@keyframes contactGlowFloat {

    0%,
    100% {

        transform:
            translateY(0)
            scale(1);

    }

    50% {

        transform:
            translateY(-18px)
            scale(1.08);

    }

}


@keyframes contactParticleFloat {

    0%,
    100% {

        transform:
            translateY(0)
            scale(.8);

        opacity:
            .35;

    }

    50% {

        transform:
            translateY(-20px)
            scale(1.3);

        opacity:
            1;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {

    .desktop-navigation {

        gap:
            18px;

        margin-right:
            18px;

    }


    .header-phone span {

        display:
            none;

    }


    .contact-info-grid {

        grid-template-columns:
            repeat(2,1fr);

    }


    .contact-main-grid {

        grid-template-columns:
            1fr;

    }


    .footer-grid {

        grid-template-columns:
            repeat(2,1fr);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .top-contact-inner {

        min-height:
            34px;

    }


    .top-contact-left {

        display:
            none;

    }


    .top-contact-right {

        width:
            100%;

        justify-content:
            space-between;

    }


    .desktop-navigation,
    .header-actions {

        display:
            none;

    }


    .mobile-toggle {

        display:
            flex;

    }


    .brand-logo img {

        width:
            160px;

    }


    .contact-page-banner {

        min-height:
            315px;

    }


    .contact-banner-content {

        padding:
            48px 0;

    }


    .contact-banner-title {

        font-size:
            35px;

        letter-spacing:
            -1px;

    }


    .contact-banner-kicker {

        font-size:
            9px;

        letter-spacing:
            1.6px;

    }


    .contact-orbit-one {

        width:
            220px;

        height:
            100px;

        right:
            -60px;

    }


    .contact-orbit-two {

        width:
            160px;

        height:
            70px;

        right:
            -15px;

    }


    .contact-light-beams span {

        opacity:
            .35;

    }


    .contact-info-section {

        padding:
            75px 0 55px;

    }


    .contact-info-grid {

        grid-template-columns:
            1fr;

        gap:
            14px;

    }


    .contact-info-card {

        min-height:
            190px;

    }


    .contact-main-section {

        padding:
            20px 0 75px;

    }


    .contact-form-panel,
    .contact-location-panel {

        padding:
            27px 20px;

        border-radius:
            17px;

    }


    .form-row {

        grid-template-columns:
            1fr;

        gap:
            0;

    }


    .contact-map {

        height:
            280px;

    }


    .contact-cta-section {

        padding-bottom:
            75px;

    }


    .contact-cta {

        flex-direction:
            column;

        align-items:
            flex-start;

        padding:
            32px 25px;

    }


    .cta-actions {

        width:
            100%;

    }


    .cta-actions a {

        flex:
            1;

    }


    .footer-grid {

        grid-template-columns:
            1fr;

        gap:
            30px;

        padding-bottom:
            40px;

    }


    .footer-bottom {

        padding:
            18px 0;

        flex-direction:
            column;

        justify-content:
            center;

        text-align:
            center;

    }


    .floating-contact {

        left:
            auto;

        right:
            12px;

        top:
            auto;

        bottom:
            20px;

        transform:
            none;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .brand-logo img {

        width:
            145px;

    }


    .contact-page-banner {

        min-height:
            300px;

    }


    .contact-banner-title {

        font-size:
            30px;

    }


    .contact-banner-content {

        padding:
            42px 0;

    }


    .contact-section-heading h2,
    .form-heading h2,
    .location-heading h2 {

        font-size:
            29px;

    }


    .contact-card-number {

        font-size:
            38px;

    }

}




/* =========================================================
   MILESTONE JOURNEY
========================================================= */

.milestone-journey-section {
    padding:110px 0 120px;

    background:#fff;

    overflow:hidden;
}

.milestone-timeline-wrapper {
    position:relative;

    width:100%;

    overflow:visible;
}

.milestone-timeline {
    position:relative;

    display:grid;

    grid-template-columns:
        repeat(5,1fr);

    gap:20px;

    min-height:330px;

    padding-top:25px;
}


/* LINE */

.timeline-line {
    position:absolute;

    left:5%;
    right:5%;

    top:137px;

    height:4px;

    border-radius:10px;

    background:#dfe8f2;

    overflow:hidden;
}

.timeline-progress {
    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:100%;

    transform:scaleX(0);

    transform-origin:left;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--secondary),
            var(--tertiary)
        );

    transition:
        transform 2s cubic-bezier(.2,.8,.2,1);
}

.milestone-timeline-wrapper.active
.timeline-progress {
    transform:scaleX(1);
}


/* ITEM */

.milestone-item {
    position:relative;

    min-width:0;

    text-align:center;
}


/* YEAR */

.milestone-year {
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-width:72px;
    height:34px;

    padding:0 13px;

    border-radius:30px;

    color:var(--primary);

    background:#eef5fc;

    border:1px solid rgba(0,73,148,.12);

    font-family:"Montserrat",sans-serif;

    font-size:12px;
    font-weight:800;

    box-shadow:
        0 8px 22px rgba(0,73,148,.08);

    transition:.35s ease;
}

.milestone-item:hover .milestone-year {
    color:#fff;

    background:var(--primary);

    transform:translateY(-3px);
}


/* NODE */

.milestone-node {
    position:relative;

    z-index:5;

    width:70px;
    height:70px;

    margin:33px auto 0;

    display:grid;
    place-items:center;

    border:7px solid #fff;

    border-radius:50%;

    color:#fff;

    background:var(--primary);

    box-shadow:
        0 0 0 2px rgba(0,73,148,.15),
        0 12px 30px rgba(0,73,148,.22);

    transition:.45s ease;
}

.milestone-node i {
    font-size:20px;
}

.milestone-item:nth-child(even)
.milestone-node {
    background:var(--tertiary);

    box-shadow:
        0 0 0 2px rgba(151,9,131,.15),
        0 12px 30px rgba(151,9,131,.22);
}

.milestone-item:hover .milestone-node {
    transform:scale(1.15) rotate(8deg);
}

.milestone-final-node {
    background:
        linear-gradient(
            135deg,
            var(--tertiary),
            var(--primary)
        ) !important;

    box-shadow:
        0 0 0 3px rgba(151,9,131,.18),
        0 0 35px rgba(151,9,131,.25) !important;
}


/* =========================================================
   MILESTONE CARD
========================================================= */

.milestone-card {
    position:relative;

    margin:45px auto 0;

    max-width:210px;

    min-height:120px;

    padding:22px 17px;

    border-radius:18px;

    background:#fff;

    border:1px solid rgba(0,73,148,.10);

    box-shadow:
        0 15px 45px rgba(0,45,100,.10);

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease;
}

.milestone-card::before {
    content:"";

    position:absolute;

    top:-6px;
    left:50%;

    width:12px;
    height:12px;

    background:#fff;

    border-left:
        1px solid rgba(0,73,148,.10);

    border-top:
        1px solid rgba(0,73,148,.10);

    transform:
        translateX(-50%)
        rotate(45deg);
}

.milestone-item:hover .milestone-card {
    transform:translateY(-8px);

    box-shadow:
        0 25px 60px rgba(0,45,100,.16);

    border-color:
        rgba(0,73,148,.20);
}

.milestone-card-icon {
    width:39px;
    height:39px;

    margin:0 auto 12px;

    display:grid;
    place-items:center;

    border-radius:11px;

    color:#fff;

    background:var(--tertiary);

    box-shadow:
        0 8px 22px rgba(151,9,131,.22);

    transition:.35s ease;
}

.milestone-item:hover
.milestone-card-icon {
    transform:scale(1.08);
}

.milestone-card-icon i {
    font-size:14px;
}

.milestone-label {
    display:block;

    margin-bottom:5px;

    color:var(--secondary);

    font-size:8px;

    font-weight:800;

    letter-spacing:1.6px;
}

.milestone-card h3 {
    margin:0;

    color:var(--ink);

    font-family:"Montserrat",sans-serif;

    font-size:13px;

    font-weight:800;
}

.milestone-final-card {
    border-color:
        rgba(151,9,131,.16);

    background:
        linear-gradient(
            145deg,
            #fff,
            #fcf5fb
        );
}


/* =========================================================
   VISION / MISSION / CORE VALUES
========================================================= */

.foundation-section {
    position:relative;

    padding:110px 0;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #001d45 0%,
            #004994 55%,
            #003875 100%
        );
}

.foundation-bg-shape {
    position:absolute;

    width:600px;
    height:600px;

    right:-250px;
    top:-300px;

    border-radius:50%;

    border:
        1px solid rgba(77,216,244,.15);

    box-shadow:
        0 0 0 70px rgba(77,216,244,.025),
        0 0 0 140px rgba(151,9,131,.025);

    animation:
        foundationOrbit
        16s
        linear
        infinite;
}

.light-heading {
    position:relative;
    z-index:2;
}

.light-heading h2 {
    color:#fff;
}

.light-heading h2 span {
    color:var(--secondary-light);
}


/* =========================================================
   FOUNDATION GRID
========================================================= */

.foundation-grid {
    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:22px;
}


/* RECTANGULAR CARD */

.foundation-card {
    position:relative;

    min-height:330px;

    padding:30px;

    overflow:hidden;

    border:
        1px solid rgba(255,255,255,.16);

    border-radius:6px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.11),
            rgba(255,255,255,.045)
        );

    backdrop-filter:blur(12px);

    box-shadow:
        0 20px 60px rgba(0,0,0,.18);

    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;
}

.foundation-card::before {
    content:"";

    position:absolute;

    width:180px;
    height:180px;

    right:-90px;
    bottom:-90px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(77,216,244,.13),
            transparent 70%
        );

    transition:.6s ease;
}

.foundation-card::after {
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:3px;

    background:
        linear-gradient(
            90deg,
            var(--secondary),
            var(--tertiary),
            transparent
        );

    transform:scaleX(.25);

    transform-origin:left;

    transition:.5s ease;
}

.foundation-card:hover {
    transform:translateY(-9px);

    border-color:
        rgba(255,255,255,.30);

    box-shadow:
        0 30px 75px rgba(0,0,0,.25);
}

.foundation-card:hover::before {
    transform:scale(1.5);
}

.foundation-card:hover::after {
    transform:scaleX(1);
}


/* TOP */

.foundation-card-top {
    position:relative;
    z-index:2;

    display:flex;

    align-items:center;

    justify-content:space-between;
}

.foundation-icon {
    width:54px;
    height:54px;

    display:grid;
    place-items:center;

    border-radius:7px;

    color:#fff;

    background:var(--tertiary);

    box-shadow:
        0 12px 30px rgba(151,9,131,.32);

    transition:.4s ease;
}

.foundation-icon i {
    font-size:19px;
}

.foundation-card:hover
.foundation-icon {
    transform:
        rotate(-5deg)
        scale(1.08);

    background:var(--tertiary-dark);
}

.foundation-card-top > span {
    color:rgba(255,255,255,.25);

    font-family:"Montserrat",sans-serif;

    font-size:28px;

    font-weight:800;
}


/* CONTENT */

.foundation-card-content {
    position:relative;

    z-index:2;

    margin-top:50px;
}

.foundation-card-content small {
    display:block;

    color:var(--secondary-light);

    font-size:8px;

    font-weight:800;

    letter-spacing:1.8px;
}

.foundation-card-content h3 {
    margin:8px 0 15px;

    color:#fff;

    font-family:"Montserrat",sans-serif;

    font-size:25px;

    line-height:1.15;

    font-weight:800;
}

.foundation-card-content p {
    max-width:390px;

    margin:0;

    color:rgba(255,255,255,.72);

    font-size:12px;

    line-height:1.85;
}


/* =========================================================
   CTA
========================================================= */

.milestone-cta-section {
    padding:90px 0;

    background:#f5f8fc;
}

.milestone-cta {
    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    padding:45px 50px;

    overflow:hidden;

    border-radius:25px;

    background:
        linear-gradient(
            120deg,
            var(--primary-deep),
            var(--primary)
        );

    box-shadow:
        0 25px 70px rgba(0,45,100,.18);
}

.milestone-cta::after {
    content:"";

    position:absolute;

    width:280px;
    height:280px;

    right:-120px;
    top:-140px;

    border-radius:50%;

    border:
        1px solid rgba(255,255,255,.12);

    box-shadow:
        0 0 0 45px rgba(255,255,255,.025),
        0 0 0 90px rgba(255,255,255,.018);
}

.milestone-cta > div {
    position:relative;
    z-index:2;
}

.milestone-cta > div > span {
    color:var(--secondary-light);

    font-size:9px;

    font-weight:800;

    letter-spacing:1.8px;
}

.milestone-cta h2 {
    max-width:650px;

    margin:9px 0 0;

    color:#fff;

    font-family:"Montserrat",sans-serif;

    font-size:clamp(25px,3vw,38px);

    line-height:1.15;

    font-weight:800;
}

.milestone-cta-button {
    position:relative;

    z-index:3;

    flex-shrink:0;

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:15px 21px;

    border-radius:10px;

    color:#fff;

    background:var(--tertiary);

    font-size:10px;

    font-weight:800;

    box-shadow:
        0 12px 30px rgba(151,9,131,.25);

    transition:.35s ease;
}

.milestone-cta-button:hover {
    color:#fff;

    transform:translateY(-3px);

    background:var(--tertiary-dark);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:991px) {

    .desktop-navigation,
    .header-action {
        display:none;
    }

    .mobile-toggle {
        display:block;
    }

    .header-inner {
        min-height:72px;
    }

    .brand-logo img {
        width:150px;
    }


    /* MOBILE NAV */

    .mobile-navigation {
        position:fixed;

        z-index:4999;

        top:72px;
        left:0;
        right:0;

        display:flex;

        flex-direction:column;

        gap:0;

        padding:15px 20px 25px;

        background:#fff;

        box-shadow:
            0 20px 50px rgba(0,30,69,.14);

        transform:translateY(-120%);

        opacity:0;

        visibility:hidden;

        transition:.4s ease;
    }

    .mobile-navigation.open {
        transform:translateY(0);

        opacity:1;

        visibility:visible;
    }

    .mobile-navigation > a {
        padding:14px 4px;

        color:var(--ink);

        border-bottom:
            1px solid rgba(0,73,148,.08);

        font-size:12px;

        font-weight:800;
    }

    .mobile-navigation > a.active {
        color:var(--primary);
    }

    .mobile-enquire {
        margin-top:12px;

        text-align:center;

        border:0 !important;

        border-radius:9px;

        color:#fff !important;

        background:var(--tertiary);
    }


    /* FLOATING */

    .floating-contact {
        left:auto;
        right:14px;
    }


    /* =====================================================
       HORIZONTAL TIMELINE MOBILE
    ===================================================== */

    .milestone-timeline-wrapper {
        overflow-x:auto;

        padding-bottom:20px;

        scrollbar-width:none;

        -webkit-overflow-scrolling:touch;
    }

    .milestone-timeline-wrapper::-webkit-scrollbar {
        display:none;
    }

    .milestone-timeline {
        width:1050px;

        grid-template-columns:
            repeat(5,190px);

        gap:20px;
    }

    .timeline-line {
        left:55px;
        right:55px;
    }


    /* FOUNDATION */

    .foundation-grid {
        grid-template-columns:1fr;

        gap:18px;
    }

    .foundation-card {
        min-height:270px;
    }

    .foundation-card-content {
        margin-top:35px;
    }


    /* CTA */

    .milestone-cta {
        flex-direction:column;

        align-items:flex-start;
    }


    /* FOOTER */

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


 

}


/* =========================================================
   CERTIFICATIONS & REGISTRATIONS
========================================================= */

.about-certifications {
    position: relative;
    padding: 110px 0 120px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(0, 102, 204, .08),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(151, 9, 131, .08),
            transparent 30%
        ),
        #f7faff;
}


/* subtle graphical background */

.about-certifications::before {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    right: -220px;
    top: 80px;

    border: 1px solid rgba(0, 73, 148, .08);
    border-radius: 50%;

    animation: certificationOrbit 18s linear infinite;
}

.about-certifications::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    left: -150px;
    bottom: 30px;

    border: 1px solid rgba(151, 9, 131, .08);
    border-radius: 50%;

    animation: certificationOrbit 14s linear infinite reverse;
}

@keyframes certificationOrbit {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   HEADING
========================================================= */

.certifications-heading {
    position: relative;
    z-index: 2;

    max-width: 780px;
    margin: 0 auto 55px;

    text-align: center;
}

.certifications-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin-bottom: 15px;

    color: var(--secondary);
    font-family: "Manrope", sans-serif;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2px;
    text-transform: uppercase;
}

.certifications-kicker span {
    width: 25px;
    height: 1px;

    background: var(--tertiary);
}

.certifications-heading h2 {
    margin: 0;

    color: var(--ink);

    font-family: "Montserrat", sans-serif;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;

    line-height: 1.08;
    letter-spacing: -1.5px;
}

.certifications-heading h2 span {
    color: var(--secondary);
}

.certifications-heading p {
    max-width: 650px;

    margin: 18px auto 0;

    color: var(--muted);

    font-family: "Manrope", sans-serif;

    font-size: 13px;
    font-weight: 500;

    line-height: 1.8;
}


/* =========================================================
   GRID
========================================================= */

.certification-grid {
    position: relative;
    z-index: 2;

    max-width: 1180px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 25px;
}


/* =========================================================
   CARD
========================================================= */

.certificate-card {
    position: relative;

    min-width: 0;

    padding: 25px;

    overflow: hidden;

    border: 1px solid rgba(0, 73, 148, .10);

    border-radius: 22px;

    background: rgba(255, 255, 255, .92);

    box-shadow:
        0 20px 55px rgba(0, 35, 80, .08);

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease;
}

.certificate-card:hover {
    transform: translateY(-8px);

    border-color: rgba(0, 73, 148, .20);

    box-shadow:
        0 28px 70px rgba(0, 35, 80, .14);
}


/* glowing decoration */

.certificate-card-glow {
    position: absolute;

    width: 170px;
    height: 170px;

    right: -85px;
    top: -85px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 102, 204, .15),
            transparent 68%
        );

    pointer-events: none;
}


/* =========================================================
   CARD TOP
========================================================= */

.certificate-top {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 22px;
}

.certificate-badge {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--secondary),
            var(--tertiary)
        );

    box-shadow:
        0 10px 25px rgba(0, 73, 148, .20);
}

.certificate-badge i {
    font-size: 17px;
}

.certificate-number {
    color: rgba(0, 73, 148, .12);

    font-family: "Montserrat", sans-serif;

    font-size: 34px;
    font-weight: 800;

    line-height: 1;
}


/* =========================================================
   CONTENT
========================================================= */

.certificate-content {
    position: relative;
    z-index: 2;

    margin-bottom: 22px;
}

.certificate-label {
    display: block;

    margin-bottom: 7px;

    color: var(--secondary);

    font-family: "Manrope", sans-serif;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.certificate-content h3 {
    margin: 0 0 9px;

    color: var(--ink);

    font-family: "Montserrat", sans-serif;

    font-size: 23px;
    font-weight: 800;

    line-height: 1.2;
}

.certificate-content p {
    margin: 0;

    color: var(--muted);

    font-family: "Manrope", sans-serif;

    font-size: 11px;
    font-weight: 500;

    line-height: 1.7;
}


/* =========================================================
   CERTIFICATE IMAGE
========================================================= */

.certificate-preview {
    position: relative;

    overflow: hidden;

    border-radius: 16px;

    background: #eef4fa;

    border: 1px solid rgba(0, 73, 148, .08);
}

.certificate-image-wrap {
    position: relative;

    width: 100%;

    aspect-ratio: 1.414 / 1;

    overflow: hidden;
}

.certificate-image-wrap img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    background: #fff;

    user-select: none;
    -webkit-user-drag: none;

    transition:
        transform .7s cubic-bezier(.2,.7,.2,1);
}

.certificate-card:hover
.certificate-image-wrap img {
    transform: scale(1.025);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.certificate-image-overlay {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            rgba(0, 31, 67, .10),
            rgba(0, 73, 148, .45)
        );

    opacity: 0;

    transition: opacity .35s ease;
}

.certificate-image-wrap:hover
.certificate-image-overlay {
    opacity: 1;
}

.certificate-view-btn {
    display: inline-flex;

    align-items: center;
    gap: 8px;

    padding: 11px 17px;

    border: 1px solid rgba(255,255,255,.35);
    border-radius: 30px;

    color: #fff;

    background: rgba(0, 35, 75, .75);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    font-family: "Manrope", sans-serif;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .5px;

    cursor: pointer;

    transition:
        transform .3s ease,
        background .3s ease;
}

.certificate-view-btn:hover {
    transform: translateY(-2px);

    background: var(--secondary);
}


/* =========================================================
   LIGHTBOX
========================================================= */

.certificate-lightbox {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 25px;

    visibility: hidden;
    opacity: 0;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}

.certificate-lightbox.active {
    visibility: visible;
    opacity: 1;
}

.certificate-lightbox-backdrop {
    position: absolute;

    inset: 0;

    background: rgba(0, 15, 35, .82);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.certificate-lightbox-panel {
    position: relative;

    z-index: 2;

    width: min(1050px, 96vw);
    max-height: 94vh;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.15);

    border-radius: 20px;

    background: #fff;

    box-shadow:
        0 35px 100px rgba(0,0,0,.35);

    transform: translateY(25px) scale(.97);

    transition: transform .35s ease;
}

.certificate-lightbox.active
.certificate-lightbox-panel {
    transform: translateY(0) scale(1);
}

.certificate-lightbox-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 16px 20px;

    border-bottom: 1px solid rgba(0,73,148,.08);
}

.certificate-lightbox-header span {
    display: block;

    margin-bottom: 3px;

    color: var(--secondary);

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 1.5px;
}

.certificate-lightbox-header h3 {
    margin: 0;

    color: var(--ink);

    font-family: "Montserrat", sans-serif;

    font-size: 17px;
    font-weight: 800;
}

.certificate-close {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;

    color: var(--ink);

    background: #eef4fa;

    cursor: pointer;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.certificate-close:hover {
    color: #fff;

    background: var(--secondary);

    transform: rotate(90deg);
}

.certificate-lightbox-image {
    flex: 1;

    overflow: auto;

    padding: 15px;

    background: #edf2f7;

    text-align: center;
}

.certificate-lightbox-image img {
    display: inline-block;

    max-width: 100%;
    height: auto;

    user-select: none;
    -webkit-user-drag: none;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .about-certifications {
        padding: 75px 0 80px;
    }

    .certifications-heading {
        margin-bottom: 35px;
    }

    .certifications-heading h2 {
        font-size: 31px;
    }

    .certifications-heading p {
        font-size: 13px;
        line-height: 1.7;
        color: black;
    }

    .certification-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .certificate-card {
        padding: 18px;
        border-radius: 18px;
    }

    .certificate-content h3 {
        font-size: 20px;
    }

    .certificate-content p {
        font-size: 13px;
        color: black;
    }

    .certificate-lightbox {
        padding: 10px;
    }

    .certificate-lightbox-panel {
        width: 100%;
        max-height: 95vh;
        border-radius: 15px;
    }

    .certificate-lightbox-header {
        padding: 13px 15px;
    }

    .certificate-lightbox-image {
        padding: 8px;
    }

}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover: none) {

    .certificate-image-overlay {
        opacity: 1;

        background:
            linear-gradient(
                to top,
                rgba(0,35,75,.60),
                transparent 55%
            );

        align-items: flex-end;

        justify-content: center;

        padding-bottom: 12px;
    }

}