/* =========================================================
   TECH SUPPORT SERVICES
   FINAL HEADER CSS
========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    max-width: 100%;

    /*
       IMPORTANT FOR STICKY HEADER
       overflow-x: hidden; avoid karo
    */
    overflow-x: clip;
}


/* =========================================================
   VARIABLES
========================================================= */

:root {
    --ts-navy: #071426;
    --ts-dark-blue: #102b56;

    --ts-blue: #1d70f5;

    --ts-light-blue: #edf5ff;
    --ts-soft-blue: #f7faff;

    --ts-white: #ffffff;

    --ts-text: #102b56;

    --ts-border: #e3e9f2;

    --header-height: 74px;
}


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

.site-header {
    position: -webkit-sticky;
    position: sticky;

    top: 0;

    width: 100%;

    z-index: 999999;

    background: rgba(255, 255, 255, 0.98);

    border-bottom:
        1px solid rgba(16, 43, 86, 0.08);

    box-shadow:
        0 5px 20px rgba(7, 20, 38, 0.055);

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


/* =========================================================
   CENTER CONTAINER
   RED MARKS KE APPROX ANDAR
========================================================= */

.header-container {
    width: calc(100% - 40px);

    /*
       MAIN CHANGE
       Desktop par poora header centered rahega
    */
    max-width: 1280px;

    min-height: var(--header-height);

    margin-left: auto;
    margin-right: auto;

    display: flex;
    align-items: center;

    justify-content: flex-start;

    position: relative;
}


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

.site-logo {
    display: flex;
    align-items: center;

    flex: 0 0 auto;

    margin: 0;
    padding: 0;

    text-decoration: none;
}


.site-logo img {
    display: block;

    width: 190px;
    height: auto;

    max-width: 100%;

    object-fit: contain;
}


/* =========================================================
   NAVIGATION
========================================================= */

.header-navigation {
    flex: 1;

    min-width: 0;

    display: flex;
    align-items: center;

    justify-content: flex-end;

    /*
       Logo aur Home ke beech controlled gap
    */
    margin-left: 28px;
}


/* =========================================================
   MAIN MENU
========================================================= */

.main-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 2px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.main-navigation > li {
    position: relative;

    flex-shrink: 0;
}


/* =========================================================
   MAIN LINKS
========================================================= */

.nav-link {
    position: relative;

    height: var(--header-height);

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

    gap: 6px;

    padding: 0 9px;

    margin: 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: var(--ts-text);

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

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

    line-height: 1;

    white-space: nowrap;

    text-decoration: none;

    cursor: pointer;

    transition:
        color 0.2s ease;
}


.nav-link:hover,
.nav-link.active {
    color: var(--ts-blue);
}


/* =========================================================
   ACTIVE UNDERLINE
========================================================= */

.nav-link::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 11px;

    width: 0;
    height: 2px;

    background: var(--ts-blue);

    border-radius: 20px;

    transform: translateX(-50%);

    transition: width 0.22s ease;
}


.nav-link:hover::after,
.nav-link.active::after {
    width: 22px;
}


/* =========================================================
   MAIN DROPDOWN ARROW
========================================================= */

.menu-chevron {
    display: inline-block;

    width: 7px;
    height: 7px;

    flex-shrink: 0;

    border-right:
        1.5px solid currentColor;

    border-bottom:
        1.5px solid currentColor;

    transform:
        translateY(-2px)
        rotate(45deg);

    transition:
        transform 0.2s ease;
}


@media (min-width: 1200px) {

    .menu-parent:hover
    > .menu-parent-button
    .menu-chevron {
        transform:
            translateY(2px)
            rotate(225deg);
    }

}


/* =========================================================
   FIRST DROPDOWN
========================================================= */

.menu-dropdown {
    position: absolute;

    top: calc(100% - 5px);
    left: 0;

    width: 255px;

    margin: 0;
    padding: 9px;

    list-style: none;

    background: #ffffff;

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

    border-radius: 14px;

    box-shadow:
        0 22px 50px
        rgba(7, 20, 38, 0.14);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform: translateY(9px);

    transition:
        opacity 0.18s ease,
        visibility 0.18s ease,
        transform 0.18s ease;

    z-index: 1000000;
}


/* Hover bridge */

.menu-dropdown::before {
    content: "";

    position: absolute;

    top: -15px;
    left: 0;

    width: 100%;
    height: 18px;
}


/* Top triangle */

.menu-dropdown::after {
    content: "";

    position: absolute;

    top: -7px;
    left: 24px;

    width: 14px;
    height: 14px;

    background: #ffffff;

    border-top:
        1px solid var(--ts-border);

    border-left:
        1px solid var(--ts-border);

    transform: rotate(45deg);

    z-index: -1;
}


/* =========================================================
   DESKTOP OPEN
========================================================= */

@media (min-width: 1200px) {

    .menu-parent:hover
    > .menu-dropdown {
        opacity: 1;
        visibility: visible;

        pointer-events: auto;

        transform: translateY(0);
    }

}


/* =========================================================
   DROPDOWN WIDTH
========================================================= */

.digital-dropdown {
    width: 245px;
}


.cloud-dropdown {
    width: 290px;
}


.business-dropdown {
    width: 270px;
}


.consultancy-dropdown {
    width: 245px;
}


/* Right side dropdown */

.business-dropdown,
.consultancy-dropdown {
    left: auto;
    right: 0;
}


.business-dropdown::after,
.consultancy-dropdown::after {
    left: auto;
    right: 25px;
}


/* =========================================================
   DROPDOWN ITEMS
========================================================= */

.menu-dropdown > li {
    position: relative;

    width: 100%;
}


.menu-dropdown > li > a,
.submenu-parent-button {
    width: 100%;

    min-height: 43px;

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

    gap: 10px;

    padding: 9px 11px;

    border: 0;
    outline: 0;

    border-radius: 8px;

    background: transparent;

    color: var(--ts-text);

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.35;

    text-align: left;

    text-decoration: none;

    cursor: pointer;

    transition:
        color 0.18s ease,
        background 0.18s ease;
}


.menu-dropdown > li > a:hover,
.submenu-parent-button:hover {
    color: var(--ts-blue);

    background: var(--ts-light-blue);
}


/* =========================================================
   SECOND LEVEL ARROW
========================================================= */

.submenu-chevron {
    width: 7px;
    height: 7px;

    flex-shrink: 0;

    display: inline-block;

    border-top:
        1.5px solid currentColor;

    border-right:
        1.5px solid currentColor;

    transform: rotate(45deg);

    transition:
        transform 0.2s ease;
}


/* =========================================================
   SECOND LEVEL SUBMENU
========================================================= */

.menu-submenu {
    position: absolute;

    top: -8px;

    left: calc(100% + 10px);

    width: 305px;

    margin: 0;
    padding: 9px;

    list-style: none;

    background: #ffffff;

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

    border-radius: 14px;

    box-shadow:
        0 22px 50px
        rgba(7, 20, 38, 0.14);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform: translateX(8px);

    transition:
        opacity 0.18s ease,
        visibility 0.18s ease,
        transform 0.18s ease;

    z-index: 1000001;
}


.menu-submenu::before {
    content: "";

    position: absolute;

    left: -15px;
    top: 0;

    width: 18px;
    height: 100%;
}


@media (min-width: 1200px) {

    .submenu-parent:hover
    > .menu-submenu {
        opacity: 1;
        visibility: visible;

        pointer-events: auto;

        transform: translateX(0);
    }

}


/* =========================================================
   SUBMENU LINKS
========================================================= */

.menu-submenu li a {
    width: 100%;

    min-height: 42px;

    display: flex;
    align-items: center;

    padding: 9px 11px;

    border-radius: 8px;

    color: var(--ts-text);

    font-size: 14px;
    font-weight: 600;

    line-height: 1.35;

    text-decoration: none;
}


.menu-submenu li a:hover {
    color: var(--ts-blue);

    background: var(--ts-light-blue);
}


/* =========================================================
   CONSULTANCY SUBMENU LEFT
========================================================= */

@media (min-width: 1200px) {

    .submenu-left > .menu-submenu {
        left: auto;

        right: calc(100% + 10px);

        transform: translateX(-8px);
    }


    .submenu-left
    > .menu-submenu::before {
        left: auto;

        right: -15px;
    }


    .submenu-left:hover
    > .menu-submenu {
        transform: translateX(0);
    }

}


/* =========================================================
   HAMBURGER
========================================================= */

.menu-hamburger {
    display: none;

    width: 44px;
    height: 44px;

    margin-left: auto;

    padding: 10px;

    border: 0;
    outline: 0;

    border-radius: 10px;

    background: var(--ts-light-blue);

    cursor: pointer;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 5px;
}


.menu-hamburger span {
    display: block;

    width: 22px;
    height: 2px;

    border-radius: 20px;

    background: var(--ts-navy);

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}


.menu-hamburger.active
span:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);
}


.menu-hamburger.active
span:nth-child(2) {
    opacity: 0;
}


.menu-hamburger.active
span:nth-child(3) {
    transform:
        translateY(-7px)
        rotate(-45deg);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1500px) {

    .header-container {
        max-width: 1280px;
    }


    .site-logo img {
        width: 190px;
    }


    .header-navigation {
        margin-left: 28px;
    }

}


/* =========================================================
   1200 - 1399
========================================================= */

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

    .header-container {
        width: calc(100% - 30px);

        max-width: 1220px;
    }


    .site-logo img {
        width: 170px;
    }


    .header-navigation {
        margin-left: 20px;
    }


    .nav-link {
        padding-left: 6px;
        padding-right: 6px;

        font-size: 12px;
    }

}


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

@media (max-width: 1199px) {

    :root {
        --header-height: 72px;
    }


    .header-container {
        width: 100%;
        max-width: 100%;

        padding: 0 18px;

        justify-content:
            space-between;
    }


    .site-logo img {
        width: 175px;
    }


    .menu-hamburger {
        display: flex;
    }


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

    .header-navigation {
        position: fixed;

        top: var(--header-height);

        left: 0;
        right: 0;

        width: auto;

        height:
            calc(
                100dvh -
                var(--header-height)
            );

        display: block;

        margin: 0;

        padding:
            12px
            16px
            30px;

        background: #ffffff;

        border-top:
            1px solid var(--ts-border);

        overflow-x: hidden;
        overflow-y: auto;

        opacity: 0;
        visibility: hidden;

        pointer-events: none;

        transform:
            translateX(100%);

        transition:
            transform 0.3s ease,
            opacity 0.25s ease,
            visibility 0.25s ease;

        z-index: 999998;
    }


    .header-navigation.open {
        opacity: 1;
        visibility: visible;

        pointer-events: auto;

        transform: translateX(0);
    }


    .main-navigation {
        display: block;

        width: 100%;

        margin: 0;
        padding: 0;
    }


    .main-navigation > .nav-item {
        width: 100%;

        border-bottom:
            1px solid #e8eef6;
    }


    .nav-link {
        width: 100%;

        height: auto;

        min-height: 54px;

        padding: 14px 5px;

        justify-content:
            space-between;

        font-size: 14.5px;

        text-align: left;
    }


    .nav-link::after {
        display: none;
    }


    /* =====================================================
       MOBILE FIRST DROPDOWN
    ====================================================== */

    .menu-dropdown,
    .digital-dropdown,
    .cloud-dropdown,
    .business-dropdown,
    .consultancy-dropdown {
        position: static !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;

        width: 100% !important;
        max-width: 100% !important;

        display: none !important;

        margin: 0 0 10px;

        padding: 7px;

        opacity: 1 !important;
        visibility: visible !important;

        pointer-events: auto !important;

        transform: none !important;

        background: #f6f9ff;

        border:
            1px solid #e2eaf4;

        border-radius: 10px;

        box-shadow: none;
    }


    .menu-dropdown.is-open {
        display: block !important;
    }


    .menu-dropdown::before,
    .menu-dropdown::after {
        display: none;
    }


    .menu-parent-button[
        aria-expanded="true"
    ] {
        color: var(--ts-blue);
    }


    .menu-parent-button[
        aria-expanded="true"
    ]
    .menu-chevron {
        transform:
            translateY(2px)
            rotate(225deg);
    }


    /* =====================================================
       MOBILE MENU ITEMS
    ====================================================== */

    .menu-dropdown > li {
        width: 100%;

        border-bottom:
            1px solid #e7edf5;
    }


    .menu-dropdown
    > li:last-child {
        border-bottom: 0;
    }


    .menu-dropdown > li > a,
    .submenu-parent-button {
        width: 100%;

        min-height: 47px;

        padding: 10px 11px;

        font-size: 14px;

        white-space: normal;
    }


    /* =====================================================
       MOBILE SECOND LEVEL
    ====================================================== */

    .menu-submenu,
    .submenu-left > .menu-submenu {
        position: static !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;

        width: 100% !important;

        display: none !important;

        margin: 3px 0 8px;

        padding: 5px;

        opacity: 1 !important;
        visibility: visible !important;

        pointer-events: auto !important;

        transform: none !important;

        background: #ffffff;

        border:
            1px solid #e3eaf4;

        border-radius: 8px;

        box-shadow: none;
    }


    .menu-submenu.is-open {
        display: block !important;
    }


    .menu-submenu::before {
        display: none;
    }


    .submenu-parent-button[
        aria-expanded="true"
    ] {
        color: var(--ts-blue);

        background: #eaf3ff;
    }


    .submenu-parent-button[
        aria-expanded="true"
    ]
    .submenu-chevron {
        transform: rotate(135deg);
    }

}


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

@media (max-width: 575px) {

    :root {
        --header-height: 68px;
    }


    .header-container {
        padding: 0 14px;
    }


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


    .menu-hamburger {
        width: 42px;
        height: 42px;
    }


    .header-navigation {
        padding:
            10px
            12px
            28px;
    }


    .nav-link {
        min-height: 52px;

        font-size: 14px;
    }

}


/* =========================================================
   MOBILE BODY LOCK
========================================================= */

body.mobile-menu-active {
    overflow: hidden;
}
/*--------------------------------------banner----------------------------------------*/

/* =========================================================
   TECH SUPPORT HERO
========================================================= */

:root {
    --primary-color: #071426;
    --primary-light: #102443;

    --secondary-color: #1d70f5;
    --secondary-dark: #0d5fe4;

    --white-color: #ffffff;

    --light-bg: #f5f8fd;
    --light-blue-bg: #edf4ff;

    --text-color: #071426;
    --muted-color: #69768a;

    --border-color: rgba(29, 112, 245, 0.12);

    --brand-gradient:
        linear-gradient(
            135deg,
            #1d70f5 0%,
            #0d5fe4 100%
        );

    --dark-gradient:
        linear-gradient(
            145deg,
            #071426 0%,
            #102443 100%
        );
}


* {
    box-sizing: border-box;
}


/* =========================================================
   MAIN HERO
========================================================= */

.business-hero {
    position: relative;

    width: 100%;

    min-height: calc(100vh - 74px);

    display: flex;
    align-items: center;

    padding: 76px 24px 82px;

    overflow: hidden;

    isolation: isolate;

    background:
        linear-gradient(
            115deg,
            #ffffff 0%,
            #f8faff 50%,
            #eef4ff 100%
        );
}


/* =========================================================
   SIMPLE RIGHT NAVY BACKGROUND
========================================================= */

.business-hero::before {
    content: "";

    position: absolute;

    z-index: -5;

    width: 43%;
    height: 130%;

    right: -9%;
    top: -15%;

    border-radius: 48% 0 0 48%;

    background:
        var(--dark-gradient);

    transform: rotate(-4deg);
}


/* =========================================================
   SMALL BLUE ACCENT
========================================================= */

.business-hero::after {
    content: "";

    position: absolute;

    z-index: -4;

    width: 145px;
    height: 5px;

    right: 7%;

    top: 80px;

    border-radius: 30px;

    background:
        var(--secondary-color);

    opacity: .65;
}


/* =========================================================
   SOFT BLUE GLOW
========================================================= */

.hero-soft-glow {
    position: absolute;

    z-index: -6;

    width: 520px;
    height: 520px;

    left: 28%;
    top: 50%;

    transform:
        translateY(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(29,112,245,.08),
            rgba(29,112,245,.03) 40%,
            transparent 70%
        );

    pointer-events: none;
}


/* =========================================================
   CONTAINER
========================================================= */

.business-hero .hero-container {
    position: relative;

    z-index: 5;

    width: 100%;
    max-width: 1240px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(420px, .92fr);

    align-items: center;

    gap: 68px;
}


/* =========================================================
   LEFT SIDE
========================================================= */

.business-hero .hero-left {
    position: relative;

    min-width: 0;
}


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

.business-hero .hero-badge {
    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 23px;

    padding:
        9px
        15px
        9px
        10px;

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

    border-radius: 50px;

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

    color:
        var(--secondary-color);

    font-size: 12.5px;

    font-weight: 800;

    box-shadow:
        0 10px 26px
        rgba(7,20,38,.05);
}


.business-hero .badge-dot {
    width: 9px;
    height: 9px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--secondary-color);

    box-shadow:
        0 0 0 6px
        rgba(29,112,245,.10);

    animation:
        heroBadgePulse
        4.5s ease-in-out
        infinite;
}


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

.business-hero .hero-title {
    max-width: 680px;

    margin:
        0
        0
        21px;

    color:
        var(--primary-color);

    font-size:
        clamp(
            45px,
            4.15vw,
            64px
        );

    line-height: 1;

    letter-spacing:
        -3px;

    font-weight: 900;
}


.business-hero .hero-title-line {
    display: block;

    margin-top: 7px;
}


.business-hero .hero-title strong {
    color:
        var(--secondary-color);

    font-weight: 900;
}


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

.business-hero .hero-text {
    max-width: 625px;

    margin:
        0
        0
        23px;

    color:
        var(--muted-color);

    font-size: 16px;

    line-height: 1.72;

    font-weight: 500;
}


/* =========================================================
   SUPPORT POINTS
========================================================= */

.hero-support-points {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 28px;
}


.support-point {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding:
        7px
        10px
        7px
        7px;

    border-radius: 9px;

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

    border:
        1px solid
        rgba(29,112,245,.09);

    color:
        var(--primary-light);

    font-size: 11px;

    font-weight: 700;
}


.support-point span {
    width: 23px;
    height: 23px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 7px;

    color:
        var(--secondary-color);

    background:
        rgba(29,112,245,.09);
}


/* =========================================================
   BUTTONS
========================================================= */

.business-hero .hero-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 11px;

    margin-bottom: 34px;
}


.business-hero .hero-btn {
    min-height: 53px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border-radius: 13px;

    text-decoration: none;

    font-size: 13.5px;

    font-weight: 800;

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease,
        color .35s ease;
}


/* PRIMARY */

.business-hero .hero-btn-primary {
    padding:
        6px
        7px
        6px
        20px;

    color: white;

    background:
        var(--brand-gradient);

    box-shadow:
        0 16px 34px
        rgba(29,112,245,.23);
}


.business-hero .btn-icon {
    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 9px;

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

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


.business-hero .hero-btn-primary:hover {
    color: white;

    transform:
        scale(1.025);

    box-shadow:
        0 22px 44px
        rgba(29,112,245,.30);
}


.business-hero
.hero-btn-primary:hover
.btn-icon {
    transform:
        rotate(45deg);
}


/* SECONDARY */

.business-hero .hero-btn-light {
    padding:
        0
        20px;

    color:
        var(--primary-color);

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

    border:
        1px solid
        rgba(29,112,245,.11);

    box-shadow:
        0 10px 27px
        rgba(7,20,38,.05);
}


.business-hero .hero-btn-light:hover {
    color:
        var(--secondary-color);

    transform:
        scale(1.025);
}


/* =========================================================
   SERVICE STRIP
========================================================= */

.business-hero .hero-service-strip {
    max-width: 675px;

    display: grid;

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

    gap: 10px;

    perspective: 1000px;
}


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

.business-hero .strip-card {
    min-height: 112px;

    display: flex;

    align-items: flex-start;

    gap: 11px;

    padding: 14px;

    border-radius: 14px;

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

    border:
        1px solid
        rgba(29,112,245,.10);

    box-shadow:
        0 13px 30px
        rgba(7,20,38,.045);

    transform-style:
        preserve-3d;

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


.business-hero .strip-card:hover {
    border-color:
        rgba(29,112,245,.28);

    box-shadow:
        0 20px 42px
        rgba(7,20,38,.09);
}


/* ICON */

.business-hero .strip-icon {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    margin: 0;

    border-radius: 10px;

    background:
        var(--brand-gradient);

    color: white;

    box-shadow:
        0 9px 20px
        rgba(29,112,245,.18);

    transform:
        translateZ(15px);
}


.business-hero .strip-icon i {
    font-size: 16px;
}


.strip-content {
    min-width: 0;
}


/* TITLE */

.business-hero .strip-card h4 {
    margin:
        1px
        0
        5px;

    color:
        var(--primary-color);

    font-size: 12.5px;

    line-height: 1.2;

    font-weight: 850;
}


/* TEXT */

.business-hero .strip-card p {
    margin: 0;

    color:
        var(--muted-color);

    font-size: 10.5px;

    line-height: 1.45;

    font-weight: 500;
}


/* =========================================================
   RIGHT SIDE
========================================================= */

.hero-right {
    position: relative;

    width: 100%;
    max-width: 510px;

    min-height: 570px;

    justify-self: end;

    perspective: 1200px;
}


/* =========================================================
   RIGHT VISUAL BACK SHAPE
========================================================= */

.hero-visual-shape {
    position: absolute;

    z-index: 1;

    width: 390px;
    height: 475px;

    right: 5px;
    top: 45px;

    border-radius:
        38px
        95px
        38px
        95px;

    background:
        rgba(29,112,245,.12);

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

    transform:
        rotate(5deg);
}


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

.hero-main-visual {
    position: absolute;

    z-index: 3;

    top: 35px;
    right: 0;

    width: 395px;
    height: 480px;

    overflow: hidden;

    border-radius:
        28px
        90px
        28px
        28px;

    border:
        5px solid
        rgba(255,255,255,.97);

    background:
        var(--primary-color);

    box-shadow:
        0 38px 80px
        rgba(7,20,38,.32);

    transform-style:
        preserve-3d;

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


.hero-main-visual img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;
}


/* IMAGE OVERLAY */

.hero-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(7,20,38,.01) 30%,
            rgba(7,20,38,.15) 58%,
            rgba(7,20,38,.91) 100%
        );
}


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

.hero-image-content {
    position: absolute;

    z-index: 3;

    left: 23px;
    right: 23px;
    bottom: 23px;
}


.hero-image-status {
    width: fit-content;

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 9px;

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

    font-size: 9px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .3px;
}


.image-status-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--secondary-color);

    box-shadow:
        0 0 0 6px
        rgba(29,112,245,.20);
}


.hero-image-content h3 {
    max-width: 300px;

    margin: 0;

    color: white;

    font-size: 24px;

    line-height: 1.15;

    letter-spacing: -.7px;

    font-weight: 850;
}


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

.hero-small-visual {
    position: absolute;

    z-index: 7;

    width: 165px;
    height: 190px;

    left: -15px;
    top: 170px;

    overflow: hidden;

    border-radius:
        55px
        17px
        17px
        17px;

    border:
        5px solid white;

    background: white;

    box-shadow:
        0 23px 50px
        rgba(7,20,38,.24);

    transform-style:
        preserve-3d;

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


.hero-small-visual img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* SMALL ICON */

.small-visual-icon {
    position: absolute;

    right: 10px;
    bottom: 10px;

    width: 39px;
    height: 39px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: white;

    background:
        var(--secondary-color);

    box-shadow:
        0 10px 25px
        rgba(7,20,38,.28);
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.hero-floating-info {
    position: absolute;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        10px
        13px;

    border-radius: 12px;

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

    border:
        1px solid
        rgba(29,112,245,.11);

    box-shadow:
        0 17px 38px
        rgba(7,20,38,.16);

    backdrop-filter:
        blur(13px);
}


/* TOP CARD */

.hero-floating-info-top {
    top: 0;
    left: 75px;

    animation:
        heroFloatOne
        9s ease-in-out
        infinite;
}


/* ICON */

.floating-icon {
    width: 36px;
    height: 36px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 10px;

    color:
        var(--secondary-color);

    background:
        var(--light-blue-bg);
}


.hero-floating-info > div {
    display: flex;

    flex-direction: column;
}


.hero-floating-info small {
    color:
        var(--muted-color);

    font-size: 8px;

    font-weight: 600;
}


.hero-floating-info strong {
    margin-top: 2px;

    color:
        var(--primary-color);

    font-size: 10px;

    font-weight: 850;
}


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

.hero-floating-info-bottom {
    right: -18px;
    bottom: 10px;

    min-width: 245px;

    animation:
        heroFloatTwo
        10.5s ease-in-out
        infinite;
}


/* SERVICE STACK */

.floating-services {
    display: flex !important;

    flex-direction: row !important;

    align-items: center;

    padding-left: 9px;
}


.floating-services span {
    width: 32px;
    height: 32px;

    display: grid;

    place-items: center;

    margin-left: -9px;

    border:
        2px solid white;

    border-radius: 50%;

    color: white;

    background:
        var(--secondary-color);

    font-size: 11px;
}


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

.hero-reveal {
    opacity: 1;

    visibility: visible;

    filter: none;

    transform: none;

    clip-path: none;
}


/*
   JS chalne ke baad hi
   animation state active hoga
*/

.business-hero.hero-animation-ready
.hero-reveal {
    opacity: 0;

    filter:
        blur(13px);

    transform:
        scale(.965);

    clip-path:
        inset(
            9%
            9%
            9%
            9%
            round 26px
        );
}


/* =========================================================
   SLOW 3D REVEAL
========================================================= */

.business-hero.hero-animation-ready
.hero-reveal.hero-visible {
    opacity: 1;

    filter: blur(0);

    transform:
        scale(1);

    clip-path:
        inset(
            0
            0
            0
            0
            round 0
        );

    transition:
        opacity 1.35s ease,
        filter 1.65s ease,
        transform 1.8s cubic-bezier(.16,.8,.22,1),
        clip-path 1.9s cubic-bezier(.16,.8,.22,1);
}


/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes heroBadgePulse {

    0%,
    100% {
        box-shadow:
            0 0 0 5px
            rgba(29,112,245,.09);
    }

    50% {
        box-shadow:
            0 0 0 9px
            rgba(29,112,245,.025);
    }

}


@keyframes heroFloatOne {

    0%,
    100% {
        transform:
            perspective(800px)
            rotateY(-2deg)
            rotateX(1deg)
            scale(1);
    }

    50% {
        transform:
            perspective(800px)
            rotateY(2deg)
            rotateX(-1deg)
            scale(1.025);
    }

}


@keyframes heroFloatTwo {

    0%,
    100% {
        transform:
            perspective(800px)
            rotateY(2deg)
            rotateX(-1deg)
            scale(1);
    }

    50% {
        transform:
            perspective(800px)
            rotateY(-2deg)
            rotateX(1deg)
            scale(1.02);
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199px) {

    .business-hero {
        min-height: auto;

        padding:
            68px
            22px
            80px;
    }


    .business-hero
    .hero-container {
        max-width: 1050px;

        grid-template-columns:
            minmax(0,1fr)
            minmax(380px,.9fr);

        gap: 44px;
    }


    .business-hero
    .hero-title {
        font-size: 49px;

        letter-spacing:
            -2.3px;
    }


    .hero-right {
        min-height: 550px;
    }


    .hero-main-visual {
        width: 370px;
        height: 460px;
    }


    .hero-small-visual {
        width: 150px;
        height: 175px;
    }

}


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

@media (max-width: 991px) {

    .business-hero {
        padding:
            58px
            20px
            78px;
    }


    .business-hero::before {
        width: 125%;
        height: 44%;

        right: -55%;
        top: auto;
        bottom: -18%;

        border-radius:
            100px
            0
            0
            0;

        transform:
            rotate(-6deg);
    }


    .business-hero::after {
        display: none;
    }


    .business-hero
    .hero-container {
        grid-template-columns:
            1fr;

        gap: 65px;
    }


    .business-hero
    .hero-left {
        text-align: center;
    }


    .business-hero
    .hero-badge {
        margin-left: auto;
        margin-right: auto;
    }


    .business-hero
    .hero-title,
    .business-hero
    .hero-text {
        margin-left: auto;
        margin-right: auto;
    }


    .hero-support-points,
    .business-hero
    .hero-actions {
        justify-content: center;
    }


    .business-hero
    .hero-service-strip {
        margin: 0 auto;
    }


    .hero-right {
        width: 100%;

        max-width: 570px;

        min-height: 590px;

        margin: 0 auto;

        justify-self: center;
    }


    .hero-main-visual {
        width: 400px;
        height: 480px;

        right: 30px;
    }


    .hero-small-visual {
        left: 0;
    }


    .hero-floating-info-bottom {
        right: 0;
    }

}


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

@media (max-width: 767px) {

    .business-hero {
        padding:
            45px
            15px
            65px;
    }


    .business-hero
    .hero-title {
        font-size:
            clamp(
                37px,
                11vw,
                46px
            );

        letter-spacing:
            -1.9px;
    }


    .business-hero
    .hero-text {
        font-size: 15px;

        line-height: 1.65;
    }


    .business-hero
    .hero-service-strip {
        grid-template-columns:
            1fr;
    }


    .business-hero
    .strip-card {
        min-height: auto;

        text-align: left;
    }


    .hero-right {
        min-height: 525px;
    }


    .hero-main-visual {
        width: 88%;
        height: 450px;

        top: 30px;
        right: 0;

        border-radius:
            25px
            65px
            25px
            25px;
    }


    .hero-small-visual {
        width: 135px;
        height: 155px;

        left: 0;
        top: 160px;
    }


    .hero-floating-info-top {
        top: 0;
        left: 15px;
    }


    .hero-floating-info-bottom {
        right: 0;
        bottom: 0;
    }

}


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

@media (max-width: 520px) {

    .business-hero
    .hero-badge {
        max-width: 100%;

        font-size: 10.5px;

        line-height: 1.3;

        text-align: left;
    }


    .hero-support-points {
        display: grid;

        grid-template-columns:
            1fr;

        width: 100%;
    }


    .support-point {
        justify-content: center;
    }


    .business-hero
    .hero-actions {
        width: 100%;

        flex-direction: column;
    }


    .business-hero
    .hero-btn {
        width: 100%;
    }


    .business-hero
    .hero-btn-primary {
        justify-content:
            space-between;
    }


    .hero-right {
        min-height: 470px;
    }


    .hero-main-visual {
        width: 91%;

        height: 400px;
    }


    .hero-small-visual {
        width: 115px;
        height: 130px;

        top: 145px;
    }


    .hero-floating-info-top {
        display: none;
    }


    .hero-floating-info-bottom {
        min-width: 215px;

        padding:
            9px
            10px;
    }


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

}


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

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

    .business-hero
    .hero-reveal {
        opacity: 1 !important;

        filter: none !important;

        transform: none !important;

        clip-path: none !important;
    }


    .hero-floating-info,
    .badge-dot {
        animation: none !important;
    }

}

/*--------------------------------------------about---------------------------------*/




/* =========================================================
   ITECH ABOUT SECTION
   UNIQUE CLASSES - NO CONFLICT
========================================================= */

.itech-about-section {

    --ia-navy: #071426;
    --ia-navy-soft: #102443;

    --ia-blue: #1d70f5;
    --ia-blue-dark: #0d5fe4;

    --ia-white: #ffffff;

    --ia-bg: #f6f9fe;
    --ia-blue-soft: #edf4ff;

    --ia-muted: #66758a;

    position: relative;

    width: 100%;

    padding: 90px 20px;

    overflow: hidden;

    isolation: isolate;

    background:
        linear-gradient(
            125deg,
            #f0f5ff 0%,
            #f9fbff 42%,
            #ffffff 70%,
            #f5f8fd 100%
        );
}


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

.itech-about-section::before {

    content: "";

    position: absolute;

    z-index: -2;

    width: 500px;
    height: 500px;

    left: -260px;
    top: -160px;

    border-radius: 50%;

    background:
        rgba(29,112,245,.10);
}


.itech-about-section::after {

    content: "";

    position: absolute;

    z-index: -2;

    width: 360px;
    height: 360px;

    right: -180px;
    bottom: -160px;

    border-radius: 50%;

    background:
        rgba(7,20,38,.045);
}


/* =========================================================
   RESET INSIDE SECTION
========================================================= */

.itech-about-section *,
.itech-about-section *::before,
.itech-about-section *::after {

    box-sizing: border-box;
}


/* =========================================================
   CONTAINER
========================================================= */

.itech-about-container {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1220px;

    margin: 0 auto;
}


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

.itech-about-grid {

    display: grid;

    grid-template-columns:
        minmax(460px,1.03fr)
        minmax(0,.97fr);

    align-items: center;

    gap: 72px;
}


/* =========================================================
   LEFT VISUAL
========================================================= */

.itech-about-visual {

    position: relative;

    width: 100%;

    min-height: 535px;

    perspective: 1400px;
}


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

.itech-about-image-wrap {

    position: relative;

    width: calc(100% - 55px);
    height: 455px;

    margin-left: auto;

    overflow: hidden;

    border-radius:
        30px
        90px
        30px
        30px;

    border:
        5px solid
        var(--ia-white);

    background:
        var(--ia-navy);

    box-shadow:
        0 35px 75px
        rgba(7,20,38,.24);

    transform-style: preserve-3d;

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}


.itech-about-image-wrap img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;
}


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

.itech-about-image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(7,20,38,0) 32%,
            rgba(7,20,38,.12) 58%,
            rgba(7,20,38,.92) 100%
        );
}


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

.itech-about-image-content {

    position: absolute;

    z-index: 3;

    left: 24px;
    right: 24px;
    bottom: 24px;
}


.itech-about-image-content span {

    display: inline-flex;

    width: fit-content;

    margin-bottom: 9px;

    padding: 6px 10px;

    border-radius: 8px;

    background:
        var(--ia-blue);

    color:
        var(--ia-white);

    font-size: 9px;

    font-weight: 800;
}


.itech-about-image-content h3 {

    max-width: 380px;

    margin: 0;

    color:
        var(--ia-white);

    font-size: 24px;

    line-height: 1.16;

    letter-spacing: -.7px;

    font-weight: 900;
}


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

.itech-about-floating-card {

    position: absolute;

    z-index: 6;

    left: 0;
    top: 145px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        11px
        14px;

    border-radius: 13px;

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

    border:
        1px solid
        rgba(29,112,245,.13);

    box-shadow:
        0 18px 42px
        rgba(7,20,38,.15);

    animation:
        itechAboutFloat
        7s
        ease-in-out
        infinite;
}


.itech-about-floating-icon {

    width: 39px;
    height: 39px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    background:
        var(--ia-blue-soft);

    color:
        var(--ia-blue);

    font-size: 17px;
}


.itech-about-floating-card > div:last-child {

    display: flex;

    flex-direction: column;
}


.itech-about-floating-card small {

    color:
        var(--ia-muted);

    font-size: 8.5px;
}


.itech-about-floating-card strong {

    margin-top: 2px;

    color:
        var(--ia-navy);

    font-size: 10.5px;

    font-weight: 850;
}


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

.itech-about-stats {

    position: absolute;

    z-index: 7;

    left: 75px;
    right: 0;
    bottom: 0;

    display: grid;

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

    padding:
        15px
        10px;

    border-radius: 16px;

    background:
        var(--ia-white);

    border:
        1px solid
        rgba(29,112,245,.12);

    box-shadow:
        0 18px 45px
        rgba(7,20,38,.13);
}


.itech-about-stats > div {

    min-width: 0;

    padding:
        3px
        10px;

    text-align: center;

    border-right:
        1px solid
        rgba(29,112,245,.09);
}


.itech-about-stats > div:last-child {

    border-right: 0;
}


.itech-about-stats strong {

    display: block;

    margin-bottom: 3px;

    color:
        var(--ia-blue);

    font-size: 19px;

    line-height: 1;

    font-weight: 950;
}


.itech-about-stats span {

    display: block;

    color:
        var(--ia-muted);

    font-size: 8.5px;

    line-height: 1.35;

    font-weight: 700;
}


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

.itech-about-content {

    position: relative;

    min-width: 0;

    width: 100%;

    max-width: 565px;

    perspective: 1200px;
}


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

.itech-about-badge {

    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 18px;

    padding:
        8px
        14px
        8px
        9px;

    border-radius: 50px;

    background:
        var(--ia-blue);

    color:
        var(--ia-white);

    font-size: 11px;

    font-weight: 850;

    box-shadow:
        0 9px 22px
        rgba(29,112,245,.18);
}


.itech-about-badge span {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--ia-white);

    box-shadow:
        0 0 0 5px
        rgba(255,255,255,.16);
}


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

.itech-about-content > h2 {

    max-width: 550px;

    margin:
        0
        0
        18px;

    color:
        var(--ia-navy);

    font-size:
        clamp(
            38px,
            3.6vw,
            50px
        );

    line-height: 1.08;

    letter-spacing: -2px;

    font-weight: 950;
}


.itech-about-content > h2 span {

    display: block;

    margin-top: 5px;

    color:
        var(--ia-blue);
}


/* =========================================================
   INTRO
========================================================= */

.itech-about-intro {

    max-width: 535px;

    margin:
        0
        0
        25px;

    color:
        var(--ia-muted) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 14.5px;

    line-height: 1.72;

    font-weight: 500;
}


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

.itech-about-features {

    display: grid;

    gap: 10px;

    margin-bottom: 27px;

    perspective: 1000px;
}


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

.itech-about-feature {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    width: 100%;

    min-width: 0;

    padding:
        14px;

    border-radius: 14px;

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

    border:
        1px solid
        rgba(29,112,245,.12);

    box-shadow:
        0 8px 23px
        rgba(7,20,38,.04);

    transform-style:
        preserve-3d;

    transition:
        border-color .3s ease,
        box-shadow .35s ease,
        background .35s ease;
}


.itech-about-feature:hover {

    border-color:
        rgba(29,112,245,.35);

    background:
        var(--ia-white);

    box-shadow:
        0 18px 38px
        rgba(7,20,38,.09);
}


.itech-about-feature > div:last-child {

    flex: 1;

    min-width: 0;
}


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

.itech-about-feature-icon {

    width: 39px;
    height: 39px;

    flex: 0 0 39px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            var(--ia-blue),
            var(--ia-blue-dark)
        );

    color:
        var(--ia-white);

    font-size: 15px;

    box-shadow:
        0 9px 19px
        rgba(29,112,245,.18);

    transform:
        translateZ(18px);
}


/* =========================================================
   FEATURE TEXT
========================================================= */

.itech-about-feature h4 {

    margin:
        1px
        0
        4px;

    color:
        var(--ia-navy);

    font-size: 13.5px;

    line-height: 1.3;

    font-weight: 900;
}


.itech-about-feature p {

    width: 100%;

    max-width: 100%;

    margin: 0;

    color:
        var(--ia-muted) !important;

    opacity: 1 !important;

    visibility: visible !important;

    white-space: normal;

    overflow-wrap: anywhere;

    font-size: 11.5px;

    line-height: 1.55;

    font-weight: 500;
}


/* =========================================================
   BUTTON
========================================================= */

.itech-about-button {

    min-height: 52px;

    display: inline-flex;

    align-items: center;

    gap: 11px;

    padding:
        6px
        7px
        6px
        20px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--ia-blue),
            var(--ia-blue-dark)
        );

    color:
        var(--ia-white);

    text-decoration: none;

    font-size: 13px;

    font-weight: 850;

    box-shadow:
        0 15px 31px
        rgba(29,112,245,.24);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.itech-about-button > span {

    width: 37px;
    height: 37px;

    display: grid;

    place-items: center;

    border-radius: 9px;

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

    transition:
        transform .45s ease;
}


.itech-about-button:hover {

    color:
        var(--ia-white);

    transform:
        scale(1.025);

    box-shadow:
        0 21px 42px
        rgba(29,112,245,.32);
}


.itech-about-button:hover span {

    transform:
        rotate(45deg);
}


/* =========================================================
   SAFE DEFAULT
========================================================= */

.itech-about-content,
.itech-about-visual {

    opacity: 1;

    visibility: visible;

    filter: none;

    clip-path: none;

    transform: none;
}


/* =========================================================
   JS INITIAL
========================================================= */

.itech-about-section.itech-about-ready
.itech-about-content,

.itech-about-section.itech-about-ready
.itech-about-visual {

    opacity: 0;

    filter:
        blur(15px);

    transform:
        perspective(1200px)
        translateY(45px)
        scale(.92)
        rotateX(12deg);

    clip-path:
        inset(
            10%
            10%
            10%
            10%
            round 28px
        );
}


/* =========================================================
   SHOW
========================================================= */

.itech-about-section.itech-about-ready
.itech-about-content.itech-about-show,

.itech-about-section.itech-about-ready
.itech-about-visual.itech-about-show {

    opacity: 1;

    filter: blur(0);

    transform:
        perspective(1200px)
        translateY(0)
        scale(1)
        rotateX(0deg);

    clip-path:
        inset(
            0
            0
            0
            0
            round 0
        );

    transition:
        opacity 1.15s ease,
        filter 1.4s ease,
        transform 1.7s cubic-bezier(.16,.8,.22,1),
        clip-path 1.7s cubic-bezier(.16,.8,.22,1);
}


/* =========================================================
   FLOAT ANIMATION
========================================================= */

@keyframes itechAboutFloat {

    0%,
    100% {

        transform:
            perspective(800px)
            rotateY(-2deg)
            scale(1);
    }

    50% {

        transform:
            perspective(800px)
            rotateY(2deg)
            translateY(-5px)
            scale(1.025);
    }

}


/* =========================================================
   1100
========================================================= */

@media (max-width: 1100px) {

    .itech-about-grid {

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

        gap: 45px;
    }


    .itech-about-image-wrap {

        height: 420px;
    }

}


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

@media (max-width: 991px) {

    .itech-about-section {

        padding:
            72px
            20px
            82px;
    }


    .itech-about-grid {

        grid-template-columns: 1fr;

        gap: 58px;
    }


    .itech-about-content {

        max-width: 650px;

        margin: 0 auto;

        text-align: center;
    }


    .itech-about-badge {

        margin-left: auto;
        margin-right: auto;
    }


    .itech-about-content > h2,
    .itech-about-intro {

        margin-left: auto;
        margin-right: auto;
    }


    .itech-about-features {

        text-align: left;
    }


    .itech-about-visual {

        max-width: 620px;

        margin: 0 auto;
    }

}


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

@media (max-width: 767px) {

    .itech-about-section {

        padding:
            58px
            15px
            68px;
    }


    .itech-about-content > h2 {

        font-size:
            clamp(
                30px,
                9vw,
                38px
            );

        letter-spacing:
            -1.3px;
    }


    .itech-about-intro {

        font-size: 13.5px;
    }


    .itech-about-visual {

        min-height: auto;
    }


    .itech-about-image-wrap {

        width: 100%;

        height: 360px;
    }


    .itech-about-floating-card {

        top: 115px;
        left: 8px;
    }


    .itech-about-stats {

        position: relative;

        left: auto;
        right: auto;
        bottom: auto;

        margin-top: 12px;
    }

}


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

@media (max-width: 480px) {

    .itech-about-image-wrap {

        height: 320px;
    }


    .itech-about-floating-card {

        display: none;
    }


    .itech-about-image-content {

        left: 18px;
        right: 18px;
        bottom: 18px;
    }


    .itech-about-image-content h3 {

        font-size: 20px;
    }


    .itech-about-button {

        width: 100%;

        justify-content:
            space-between;
    }


    .itech-about-stats {

        padding:
            12px
            5px;
    }


    .itech-about-stats strong {

        font-size: 15px;
    }


    .itech-about-stats span {

        font-size: 7px;
    }

}


/* =========================================================
   WHY CHOOSE ITECH SECTION
========================================================= */

.itech-why-section {

    --iw-navy: #071426;
    --iw-navy-soft: #102443;

    --iw-blue: #1d70f5;
    --iw-blue-dark: #0d5fe4;

    --iw-white: #ffffff;

    --iw-bg: #f5f8fd;
    --iw-blue-soft: #edf4ff;

    --iw-muted: #66758a;

    position: relative;

    width: 100%;

    padding: 90px 20px 100px;

    overflow: hidden;

    isolation: isolate;

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


.itech-why-section *,
.itech-why-section *::before,
.itech-why-section *::after {
    box-sizing: border-box;
}


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

.itech-why-section::before {

    content: "";

    position: absolute;

    z-index: -3;

    width: 500px;
    height: 500px;

    right: -280px;
    top: -200px;

    border-radius: 50%;

    background:
        rgba(29,112,245,.08);
}


.itech-why-section::after {

    content: "";

    position: absolute;

    z-index: -3;

    width: 350px;
    height: 350px;

    left: -190px;
    bottom: -170px;

    border-radius: 50%;

    background:
        rgba(7,20,38,.04);
}


/* =========================================================
   CONTAINER
========================================================= */

.itech-why-container {

    position: relative;

    z-index: 3;

    width: 100%;

    max-width: 1240px;

    margin: 0 auto;
}


/* =========================================================
   HEAD
========================================================= */

.itech-why-head {

    max-width: 780px;

    margin: 0 auto 45px;

    text-align: center;
}


/* TAG */

.itech-why-tag {

    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin: 0 auto 16px;

    padding: 8px 14px 8px 9px;

    border-radius: 50px;

    background:
        var(--iw-blue);

    color:
        var(--iw-white);

    font-size: 11px;

    font-weight: 850;

    box-shadow:
        0 9px 22px
        rgba(29,112,245,.18);
}


.itech-why-tag span {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--iw-white);

    box-shadow:
        0 0 0 5px
        rgba(255,255,255,.16);

    animation:
        itechWhyPulse 4.5s
        ease-in-out infinite;
}


/* TITLE */

.itech-why-head h2 {

    max-width: 760px;

    margin: 0 auto 15px;

    color:
        var(--iw-navy);

    font-size:
        clamp(38px,3.6vw,50px);

    line-height: 1.08;

    letter-spacing: -2px;

    font-weight: 950;
}


.itech-why-head h2 span {

    display: block;

    margin-top: 5px;

    color:
        var(--iw-blue);
}


/* P */

.itech-why-head > p {

    max-width: 690px;

    margin: 0 auto;

    color:
        var(--iw-muted) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 14.5px;

    line-height: 1.72;

    font-weight: 500;
}


/* =========================================================
   LAYOUT
========================================================= */

.itech-why-layout {

    display: grid;

    grid-template-columns:
        minmax(340px,.78fr)
        minmax(0,1.22fr);

    gap: 18px;

    align-items: stretch;

    perspective: 1400px;
}


/* =========================================================
   DARK FEATURE PANEL
========================================================= */

.itech-why-feature {

    position: relative;

    padding: 31px;

    overflow: hidden;

    border-radius:
        26px
        65px
        26px
        26px;

    background:
        linear-gradient(
            145deg,
            var(--iw-navy),
            var(--iw-navy-soft)
        );

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

    box-shadow:
        0 32px 70px
        rgba(7,20,38,.20);

    transform-style:
        preserve-3d;
}


/* TOP BLUE LINE */

.itech-why-feature::before {

    content: "";

    position: absolute;

    width: 125px;
    height: 5px;

    right: 28px;
    top: 0;

    border-radius:
        0 0 20px 20px;

    background:
        var(--iw-blue);
}


/* BLUE GLOW */

.itech-why-feature::after {

    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: -130px;
    bottom: -110px;

    border-radius: 50%;

    background:
        rgba(29,112,245,.16);

    pointer-events: none;
}


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

.itech-why-feature-icon {

    position: relative;

    z-index: 3;

    width: 58px;
    height: 58px;

    display: grid;

    place-items: center;

    margin-bottom: 19px;

    border-radius: 16px;

    background:
        var(--iw-blue);

    color:
        var(--iw-white);

    font-size: 23px;

    box-shadow:
        0 13px 28px
        rgba(29,112,245,.28);

    transform:
        translateZ(25px);
}


/* =========================================================
   MINI TAG
========================================================= */

.itech-why-mini-tag {

    position: relative;

    z-index: 3;

    display: inline-flex;

    margin-bottom: 13px;

    padding: 6px 10px;

    border-radius: 8px;

    background:
        rgba(29,112,245,.15);

    border:
        1px solid
        rgba(29,112,245,.22);

    color:
        #bfd6ff;

    font-size: 9px;

    font-weight: 800;
}


/* =========================================================
   FEATURE TITLE
========================================================= */

.itech-why-feature h3 {

    position: relative;

    z-index: 3;

    max-width: 370px;

    margin: 0 0 14px;

    color:
        var(--iw-white);

    font-size: 28px;

    line-height: 1.15;

    letter-spacing: -.8px;

    font-weight: 900;
}


/* =========================================================
   FEATURE P
========================================================= */

.itech-why-feature > p {

    position: relative;

    z-index: 3;

    max-width: 380px;

    margin: 0 0 22px;

    color:
        rgba(255,255,255,.68) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 12.5px;

    line-height: 1.65;

    font-weight: 500;
}


/* =========================================================
   FEATURE LIST
========================================================= */

.itech-why-feature-list {

    position: relative;

    z-index: 3;

    display: grid;

    gap: 9px;

    margin-bottom: 25px;
}


.itech-why-feature-list > div {

    display: flex;

    align-items: flex-start;

    gap: 9px;

    padding: 9px 10px;

    border-radius: 10px;

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

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

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

    font-size: 11px;

    line-height: 1.45;

    font-weight: 600;
}


.itech-why-feature-list span {

    width: 23px;
    height: 23px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 7px;

    background:
        var(--iw-blue);

    color:
        var(--iw-white);

    font-size: 9px;
}


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

.itech-why-feature > a {

    position: relative;

    z-index: 3;

    min-height: 49px;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        6px 7px 6px 17px;

    border-radius: 11px;

    background:
        var(--iw-white);

    color:
        var(--iw-navy);

    text-decoration: none;

    font-size: 11.5px;

    font-weight: 850;

    transition:
        transform .35s ease,
        color .35s ease;
}


.itech-why-feature > a > span {

    width: 35px;
    height: 35px;

    display: grid;

    place-items: center;

    border-radius: 8px;

    background:
        var(--iw-blue);

    color:
        var(--iw-white);

    transition:
        transform .45s ease;
}


.itech-why-feature > a:hover {

    color:
        var(--iw-blue);

    transform:
        scale(1.025);
}


.itech-why-feature > a:hover span {

    transform:
        rotate(45deg);
}


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

.itech-why-grid {

    display: grid;

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

    gap: 14px;

    perspective:
        1200px;
}


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

.itech-why-card {

    position: relative;

    min-height: 205px;

    padding: 21px;

    overflow: hidden;

    border-radius: 18px;

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

    border:
        1px solid
        rgba(29,112,245,.13);

    box-shadow:
        0 12px 31px
        rgba(7,20,38,.05);

    transform-style:
        preserve-3d;

    will-change: transform;

    transition:
        border-color .3s ease,
        box-shadow .35s ease,
        background .35s ease;
}


/* GLOW */

.itech-why-card::before {

    content: "";

    position: absolute;

    width: 145px;
    height: 145px;

    right: -90px;
    top: -90px;

    border-radius: 50%;

    background:
        rgba(29,112,245,.065);

    transition:
        width .5s ease,
        height .5s ease,
        background .5s ease;
}


/* BOTTOM ACCENT */

.itech-why-card::after {

    content: "";

    position: absolute;

    left: 21px;
    bottom: 0;

    width: 36px;
    height: 3px;

    border-radius: 30px;

    background:
        var(--iw-blue);

    transition:
        width .4s ease;
}


/* HOVER */

.itech-why-card:hover {

    border-color:
        rgba(29,112,245,.35);

    background:
        var(--iw-white);

    box-shadow:
        0 24px 52px
        rgba(7,20,38,.12);
}


.itech-why-card:hover::before {

    width: 240px;
    height: 240px;

    background:
        rgba(29,112,245,.11);
}


.itech-why-card:hover::after {

    width: 90px;
}


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

.itech-why-card-number {

    position: absolute;

    top: 21px;
    right: 20px;

    color:
        rgba(7,20,38,.12);

    font-size: 20px;

    font-weight: 950;

    transition:
        color .35s ease,
        transform .35s ease;
}


.itech-why-card:hover
.itech-why-card-number {

    color:
        rgba(29,112,245,.25);

    transform:
        rotate(-5deg)
        scale(1.1);
}


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

.itech-why-card-icon {

    position: relative;

    z-index: 3;

    width: 45px;
    height: 45px;

    display: grid;

    place-items: center;

    margin-bottom: 15px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--iw-blue),
            var(--iw-blue-dark)
        );

    color:
        var(--iw-white);

    font-size: 17px;

    box-shadow:
        0 10px 22px
        rgba(29,112,245,.20);

    transform:
        translateZ(20px);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}


.itech-why-card:hover
.itech-why-card-icon {

    transform:
        translateZ(38px)
        rotate(-7deg)
        scale(1.09);

    box-shadow:
        0 16px 32px
        rgba(29,112,245,.30);
}


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

.itech-why-card h3 {

    position: relative;

    z-index: 3;

    margin: 0 0 8px;

    color:
        var(--iw-navy);

    font-size: 16px;

    line-height: 1.28;

    font-weight: 900;
}


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

.itech-why-card p {

    position: relative;

    z-index: 3;

    width: 100%;

    max-width: 100%;

    margin: 0;

    color:
        var(--iw-muted) !important;

    opacity: 1 !important;

    visibility: visible !important;

    white-space: normal;

    overflow-wrap: anywhere;

    font-size: 11.25px;

    line-height: 1.55;

    font-weight: 500;
}


/* =========================================================
   SAFE DEFAULT
========================================================= */

.itech-why-head,
.itech-why-feature,
.itech-why-card {

    opacity: 1;

    visibility: visible;

    filter: none;

    transform: none;

    clip-path: none;
}


/* =========================================================
   INITIAL ANIMATION
========================================================= */

.itech-why-section.itech-why-ready
.itech-why-head {

    opacity: 0;

    filter:
        blur(13px);

    transform:
        perspective(1200px)
        translateY(30px)
        scale(.95)
        rotateX(9deg);

    clip-path:
        inset(10% 10% 10% 10% round 30px);
}


.itech-why-section.itech-why-ready
.itech-why-feature {

    opacity: 0;

    filter:
        blur(14px);

    transform:
        perspective(1200px)
        scale(.91)
        rotateX(11deg)
        rotateY(-8deg);

    clip-path:
        inset(9% 9% 9% 9% round 28px);
}


.itech-why-section.itech-why-ready
.itech-why-card {

    opacity: 0;

    filter:
        blur(13px);

    transform:
        perspective(950px)
        translateY(42px)
        scale(.88)
        rotateX(15deg)
        rotateY(7deg);

    clip-path:
        inset(11% 11% 11% 11% round 22px);
}


/* =========================================================
   SHOW
========================================================= */

.itech-why-section.itech-why-ready
.itech-why-head.itech-why-show,

.itech-why-section.itech-why-ready
.itech-why-feature.itech-why-show,

.itech-why-section.itech-why-ready
.itech-why-card.itech-why-show {

    opacity: 1;

    filter:
        blur(0);

    transform:
        perspective(1000px)
        translateY(0)
        scale(1)
        rotateX(0)
        rotateY(0);

    clip-path:
        inset(0 0 0 0 round 0);

    transition:
        opacity 1.1s ease,
        filter 1.4s ease,
        transform 1.65s
        cubic-bezier(.16,.8,.22,1),
        clip-path 1.65s
        cubic-bezier(.16,.8,.22,1);
}


/* =========================================================
   PULSE
========================================================= */

@keyframes itechWhyPulse {

    0%,
    100% {

        box-shadow:
            0 0 0 5px
            rgba(255,255,255,.15);
    }

    50% {

        box-shadow:
            0 0 0 9px
            rgba(255,255,255,.03);
    }
}


/* =========================================================
   1100
========================================================= */

@media (max-width: 1100px) {

    .itech-why-layout {

        grid-template-columns: 1fr;
    }


    .itech-why-feature-list {

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

}


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

@media (max-width: 991px) {

    .itech-why-section {

        padding:
            72px
            20px
            82px;
    }

}


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

@media (max-width: 767px) {

    .itech-why-section {

        padding:
            58px
            15px
            68px;
    }


    .itech-why-head {

        margin-bottom: 34px;
    }


    .itech-why-head h2 {

        font-size:
            clamp(30px,9vw,38px);

        letter-spacing: -1.3px;
    }


    .itech-why-head > p {

        font-size: 13.5px;
    }


    .itech-why-feature {

        padding: 23px;

        border-radius:
            22px
            48px
            22px
            22px;
    }


    .itech-why-feature h3 {

        font-size: 24px;
    }


    .itech-why-feature-list {

        grid-template-columns: 1fr;
    }


    .itech-why-grid {

        grid-template-columns: 1fr;
    }


    .itech-why-card {

        min-height: auto;
    }

}


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

@media (max-width: 480px) {

    .itech-why-feature > a {

        width: 100%;

        justify-content:
            space-between;
    }

}


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

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

    .itech-why-head,
    .itech-why-feature,
    .itech-why-card {

        opacity: 1 !important;

        visibility: visible !important;

        filter: none !important;

        transform: none !important;

        clip-path: none !important;

        transition: none !important;
    }

}

.itech-audience-section {

    --iaud-navy: #071426;
    --iaud-navy-soft: #102443;
    --iaud-blue: #1d70f5;
    --iaud-blue-dark: #0d5fe4;
    --iaud-white: #ffffff;
    --iaud-bg: #f5f8fd;
    --iaud-blue-soft: #edf4ff;
    --iaud-muted: #66758a;

    position: relative;

    width: 100%;

    padding: 90px 20px 100px;

    overflow: hidden;

    isolation: isolate;

    background:
        linear-gradient(
            135deg,
            #f3f7fd 0%,
            #ffffff 48%,
            #edf4ff 100%
        );
}


.itech-audience-section *,
.itech-audience-section *::before,
.itech-audience-section *::after {
    box-sizing: border-box;
}


/* BACKGROUND */

.itech-audience-section::before {
    content: "";

    position: absolute;

    z-index: -2;

    width: 500px;
    height: 500px;

    left: -260px;
    bottom: -220px;

    border-radius: 50%;

    background:
        rgba(29,112,245,.08);
}


.itech-audience-section::after {
    content: "";

    position: absolute;

    z-index: -2;

    width: 360px;
    height: 360px;

    right: -190px;
    top: -150px;

    border-radius: 50%;

    background:
        rgba(7,20,38,.045);
}


/* CONTAINER */

.itech-audience-container {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1240px;

    margin: 0 auto;
}


/* HEAD */

.itech-audience-head {
    max-width: 780px;

    margin: 0 auto 45px;

    text-align: center;
}


.itech-audience-tag {
    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin: 0 auto 16px;

    padding: 8px 14px 8px 9px;

    border-radius: 50px;

    background: var(--iaud-blue);

    color: var(--iaud-white);

    font-size: 11px;

    font-weight: 850;

    box-shadow:
        0 9px 22px
        rgba(29,112,245,.18);
}


.itech-audience-tag span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--iaud-white);

    box-shadow:
        0 0 0 5px
        rgba(255,255,255,.16);
}


.itech-audience-head h2 {
    max-width: 760px;

    margin: 0 auto 15px;

    color: var(--iaud-navy);

    font-size:
        clamp(38px,3.6vw,50px);

    line-height: 1.08;

    letter-spacing: -2px;

    font-weight: 950;
}


.itech-audience-head h2 span {
    display: block;

    margin-top: 5px;

    color: var(--iaud-blue);
}


.itech-audience-head > p {
    max-width: 690px;

    margin: 0 auto;

    color:
        var(--iaud-muted) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 14.5px;

    line-height: 1.72;

    font-weight: 500;
}


/* LAYOUT */

.itech-audience-layout {
    display: grid;

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

    align-items: center;

    gap: 55px;

    perspective: 1400px;
}


/* LEFT LIST */

.itech-audience-list {
    display: grid;

    gap: 11px;

    perspective: 1000px;
}


.itech-audience-item {
    position: relative;

    display: grid;

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

    align-items: center;

    gap: 13px;

    width: 100%;

    min-width: 0;

    padding: 15px;

    border-radius: 15px;

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

    border:
        1px solid
        rgba(29,112,245,.12);

    box-shadow:
        0 9px 25px
        rgba(7,20,38,.045);

    overflow: hidden;

    transform-style: preserve-3d;

    transition:
        border-color .3s ease,
        box-shadow .35s ease,
        background .35s ease;
}


.itech-audience-item::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background:
        var(--iaud-blue);

    transform:
        scaleY(0);

    transform-origin:
        bottom;

    transition:
        transform .35s ease;
}


.itech-audience-item:hover,
.itech-audience-item.active {
    background:
        var(--iaud-white);

    border-color:
        rgba(29,112,245,.35);

    box-shadow:
        0 20px 42px
        rgba(7,20,38,.10);
}


.itech-audience-item:hover::before,
.itech-audience-item.active::before {
    transform:
        scaleY(1);
}


/* ICON */

.itech-audience-icon {
    width: 44px;
    height: 44px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 12px;

    background:
        var(--iaud-blue-soft);

    color:
        var(--iaud-blue);

    font-size: 17px;

    transform:
        translateZ(18px);

    transition:
        transform .4s ease,
        background .35s ease,
        color .35s ease;
}


.itech-audience-item:hover
.itech-audience-icon,

.itech-audience-item.active
.itech-audience-icon {
    background:
        var(--iaud-blue);

    color:
        var(--iaud-white);

    transform:
        translateZ(32px)
        rotate(-6deg)
        scale(1.08);
}


/* TEXT */

.itech-audience-item > div:nth-child(2) {
    min-width: 0;
}


.itech-audience-item h3 {
    margin: 0 0 4px;

    color:
        var(--iaud-navy);

    font-size: 14px;

    line-height: 1.3;

    font-weight: 900;
}


.itech-audience-item p {
    width: 100%;

    max-width: 100%;

    margin: 0;

    color:
        var(--iaud-muted) !important;

    opacity: 1 !important;

    visibility: visible !important;

    white-space: normal;

    overflow-wrap: anywhere;

    font-size: 11px;

    line-height: 1.5;

    font-weight: 500;
}


/* ARROW */

.itech-audience-item > span {
    width: 31px;
    height: 31px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    background:
        var(--iaud-blue-soft);

    color:
        var(--iaud-blue);

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


.itech-audience-item:hover > span,
.itech-audience-item.active > span {
    background:
        var(--iaud-blue);

    color:
        var(--iaud-white);

    transform:
        rotate(45deg)
        scale(1.05);
}


/* RIGHT VISUAL */

.itech-audience-visual {
    position: relative;

    width: 100%;

    min-height: 525px;

    perspective: 1400px;
}


.itech-audience-image {
    position: relative;

    width: calc(100% - 35px);

    height: 440px;

    margin-left: auto;

    overflow: hidden;

    border-radius:
        28px
        82px
        28px
        28px;

    border:
        5px solid
        var(--iaud-white);

    background:
        var(--iaud-navy);

    box-shadow:
        0 34px 75px
        rgba(7,20,38,.24);

    transform-style:
        preserve-3d;

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}


.itech-audience-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;
}


.itech-audience-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(7,20,38,0) 32%,
            rgba(7,20,38,.12) 56%,
            rgba(7,20,38,.92) 100%
        );
}


/* IMAGE CONTENT */

.itech-audience-image-content {
    position: absolute;

    z-index: 3;

    left: 24px;
    right: 24px;
    bottom: 24px;
}


.itech-audience-image-content span {
    display: inline-flex;

    width: fit-content;

    margin-bottom: 9px;

    padding: 6px 10px;

    border-radius: 8px;

    background:
        var(--iaud-blue);

    color:
        var(--iaud-white);

    font-size: 9px;

    font-weight: 800;
}


.itech-audience-image-content h3 {
    max-width: 385px;

    margin: 0;

    color:
        var(--iaud-white);

    font-size: 24px;

    line-height: 1.16;

    letter-spacing: -.7px;

    font-weight: 900;
}


/* STATS */

.itech-audience-stat {
    position: absolute;

    z-index: 6;

    left: 55px;
    right: 0;
    bottom: 0;

    display: grid;

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

    padding:
        14px
        10px;

    border-radius: 15px;

    background:
        var(--iaud-white);

    border:
        1px solid
        rgba(29,112,245,.12);

    box-shadow:
        0 18px 44px
        rgba(7,20,38,.13);
}


.itech-audience-stat > div {
    min-width: 0;

    padding:
        2px
        8px;

    text-align: center;

    border-right:
        1px solid
        rgba(29,112,245,.09);
}


.itech-audience-stat > div:last-child {
    border-right: 0;
}


.itech-audience-stat strong {
    display: block;

    margin-bottom: 3px;

    color:
        var(--iaud-blue);

    font-size: 18px;

    line-height: 1;

    font-weight: 950;
}


.itech-audience-stat span {
    display: block;

    color:
        var(--iaud-muted);

    font-size: 8px;

    line-height: 1.35;

    font-weight: 700;
}


/* DEFAULT */

.itech-audience-head,
.itech-audience-item,
.itech-audience-visual {
    opacity: 1;

    visibility: visible;

    filter: none;

    transform: none;

    clip-path: none;
}


/* INITIAL REVEAL */

.itech-audience-section.itech-audience-ready
.itech-audience-head {
    opacity: 0;

    filter:
        blur(13px);

    transform:
        perspective(1200px)
        translateY(30px)
        scale(.95)
        rotateX(8deg);
}


.itech-audience-section.itech-audience-ready
.itech-audience-item {
    opacity: 0;

    filter:
        blur(12px);

    transform:
        perspective(900px)
        translateY(38px)
        scale(.90)
        rotateX(12deg)
        rotateY(-6deg);
}


.itech-audience-section.itech-audience-ready
.itech-audience-visual {
    opacity: 0;

    filter:
        blur(14px);

    transform:
        perspective(1200px)
        scale(.91)
        rotateX(10deg)
        rotateY(7deg);
}


/* SHOW */

.itech-audience-section.itech-audience-ready
.itech-audience-head.itech-audience-show,

.itech-audience-section.itech-audience-ready
.itech-audience-item.itech-audience-show,

.itech-audience-section.itech-audience-ready
.itech-audience-visual.itech-audience-show {
    opacity: 1;

    filter: blur(0);

    transform:
        perspective(1000px)
        translateY(0)
        scale(1)
        rotateX(0)
        rotateY(0);

    transition:
        opacity 1.1s ease,
        filter 1.4s ease,
        transform 1.65s
        cubic-bezier(.16,.8,.22,1);
}


/* RESPONSIVE */

@media (max-width: 991px) {

    .itech-audience-section {
        padding: 72px 20px 82px;
    }

    .itech-audience-layout {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .itech-audience-list {
        max-width: 650px;

        margin: 0 auto;

        width: 100%;
    }

    .itech-audience-visual {
        max-width: 620px;

        margin: 0 auto;
    }

}


@media (max-width: 767px) {

    .itech-audience-section {
        padding: 58px 15px 68px;
    }

    .itech-audience-head {
        margin-bottom: 34px;
    }

    .itech-audience-head h2 {
        font-size:
            clamp(30px,9vw,38px);

        letter-spacing: -1.3px;
    }

    .itech-audience-head > p {
        font-size: 13.5px;
    }

    .itech-audience-item {
        grid-template-columns:
            auto minmax(0,1fr);

        align-items: flex-start;
    }

    .itech-audience-item > span {
        display: none;
    }

    .itech-audience-visual {
        min-height: auto;
    }

    .itech-audience-image {
        width: 100%;

        height: 360px;
    }

    .itech-audience-stat {
        position: relative;

        left: auto;
        right: auto;
        bottom: auto;

        margin-top: 12px;
    }

}


@media (max-width: 480px) {

    .itech-audience-image {
        height: 320px;
    }

    .itech-audience-image-content {
        left: 18px;
        right: 18px;
        bottom: 18px;
    }

    .itech-audience-image-content h3 {
        font-size: 20px;
    }

    .itech-audience-stat strong {
        font-size: 15px;
    }

    .itech-audience-stat span {
        font-size: 7px;
    }

}














/**------------------------services+----------------------------*/
/* =========================================================
   SUPPORT PROCESS SECTION - COMPLETE FINAL CSS
========================================================= */

.support-process-section {

    --process-navy: #071426;
    --process-navy-soft: #102443;

    --process-blue: #1d70f5;
    --process-blue-dark: #0d5fe4;

    --process-white: #ffffff;

    --process-bg: #f5f8fd;
    --process-bg-blue: #edf4ff;

    --process-text: #071426;
    --process-muted: #66758a;

    --process-border:
        rgba(29,112,245,.13);


    position: relative;

    width: 100%;

    padding: 88px 20px 95px;

    overflow: hidden;

    isolation: isolate;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f6f9fe 52%,
            #edf4ff 100%
        );
}


/* =========================================================
   BACKGROUND SHAPES
========================================================= */

.support-process-section::before {

    content: "";

    position: absolute;

    z-index: -3;

    width: 520px;
    height: 520px;

    left: -280px;
    top: -190px;

    border-radius: 50%;

    background:
        rgba(29,112,245,.075);

    pointer-events: none;
}


.support-process-section::after {

    content: "";

    position: absolute;

    z-index: -3;

    width: 360px;
    height: 360px;

    right: -190px;
    bottom: -160px;

    border-radius: 50%;

    background:
        rgba(7,20,38,.04);

    pointer-events: none;
}


/* =========================================================
   CONTAINER
========================================================= */

.support-process-section .container {

    position: relative;

    z-index: 3;

    width: 100%;

    max-width: 1240px;

    margin: 0 auto;
}


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

.support-process-head {

    max-width: 780px;

    margin: 0 auto 46px;

    text-align: center;

    opacity: 1;

    visibility: visible;

    transform: none;

    filter: none;

    clip-path: none;
}


/* =========================================================
   TAG
========================================================= */

.support-process-tag {

    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin: 0 auto 16px;

    padding: 8px 14px 8px 9px;

    border-radius: 50px;

    background:
        var(--process-blue);

    color:
        var(--process-white);

    font-size: 11px;

    font-weight: 850;

    box-shadow:
        0 9px 22px
        rgba(29,112,245,.18);
}


.support-process-tag span {

    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--process-white);

    box-shadow:
        0 0 0 5px
        rgba(255,255,255,.16);

    animation:
        processPulse
        4.5s
        ease-in-out
        infinite;
}


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

.support-process-title {

    max-width: 760px;

    margin:
        0
        auto
        15px;

    color:
        var(--process-navy);

    font-size:
        clamp(
            38px,
            3.6vw,
            50px
        );

    line-height: 1.08;

    letter-spacing: -2px;

    font-weight: 950;
}


.support-process-title span {

    display: block;

    margin-top: 5px;

    color:
        var(--process-blue);
}


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

.support-process-text {

    max-width: 690px;

    margin: 0 auto;

    color:
        var(--process-muted) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 14.5px;

    line-height: 1.7;

    font-weight: 500;
}


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

.support-process-grid {

    position: relative;

    display: grid;

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

    gap: 15px;

    perspective: 1500px;
}


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

.support-process-card {

    position: relative;

    min-height: 285px;

    padding: 22px;

    overflow: hidden;

    border-radius: 18px;

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

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

    box-shadow:
        0 12px 32px
        rgba(7,20,38,.05);

    transform-style: preserve-3d;

    transform-origin: center bottom;

    will-change:
        transform,
        opacity,
        filter;

    transition:
        border-color .3s ease,
        box-shadow .35s ease,
        background .35s ease;
}


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

.support-process-card::before {

    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    right: -110px;
    top: -110px;

    border-radius: 50%;

    background:
        rgba(29,112,245,.07);

    transition:
        width .5s ease,
        height .5s ease,
        background .5s ease,
        transform .5s ease;
}


/* =========================================================
   CARD BOTTOM LINE
========================================================= */

.support-process-card::after {

    content: "";

    position: absolute;

    left: 22px;
    bottom: 0;

    width: 36px;
    height: 3px;

    border-radius: 30px;

    background:
        var(--process-blue);

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


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

.support-process-card:hover {

    border-color:
        rgba(29,112,245,.38);

    background:
        #ffffff;

    box-shadow:
        0 28px 60px
        rgba(7,20,38,.14);
}


.support-process-card:hover::before {

    width: 300px;
    height: 300px;

    transform:
        translate(-20px,20px);

    background:
        rgba(29,112,245,.115);
}


.support-process-card:hover::after {

    width: 100px;
}


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

.support-process-number {

    position: absolute;

    z-index: 3;

    top: 22px;
    right: 21px;

    color:
        rgba(7,20,38,.11);

    font-size: 21px;

    line-height: 1;

    font-weight: 950;

    transition:
        color .35s ease,
        transform .35s ease;
}


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

    color:
        rgba(29,112,245,.25);

    transform:
        scale(1.12)
        rotate(-5deg);
}


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

.support-process-icon {

    position: relative;

    z-index: 4;

    width: 52px;
    height: 52px;

    display: grid;

    place-items: center;

    margin-bottom: 21px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            var(--process-blue),
            var(--process-blue-dark)
        );

    color:
        var(--process-white);

    font-size: 20px;

    box-shadow:
        0 11px 24px
        rgba(29,112,245,.21);

    transform:
        translateZ(25px);

    transition:
        transform .45s
        cubic-bezier(.16,.8,.22,1),
        box-shadow .45s ease;
}


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

    transform:
        translateZ(48px)
        rotate(-8deg)
        scale(1.12);

    box-shadow:
        0 18px 35px
        rgba(29,112,245,.32);
}


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

.support-process-card h3 {

    position: relative;

    z-index: 4;

    margin:
        0
        0
        9px;

    color:
        var(--process-navy) !important;

    font-size: 16.5px;

    line-height: 1.28;

    font-weight: 900;

    transform:
        translateZ(12px);
}


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

.support-process-card p {

    position: relative;

    z-index: 4;

    margin:
        0
        0
        45px;

    color:
        var(--process-muted) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 11.25px;

    line-height: 1.57;

    font-weight: 500;

    transform:
        translateZ(8px);
}


/* =========================================================
   BOTTOM ROW
========================================================= */

.support-process-bottom {

    position: absolute;

    z-index: 4;

    left: 22px;
    right: 22px;
    bottom: 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 11px;

    border-top:
        1px solid
        rgba(29,112,245,.09);

    transform:
        translateZ(12px);
}


.support-process-bottom span {

    color:
        var(--process-blue);

    font-size: 10px;

    font-weight: 850;
}


.support-process-bottom i {

    width: 28px;
    height: 28px;

    display: grid;

    place-items: center;

    border-radius: 8px;

    color:
        var(--process-blue);

    background:
        var(--process-bg-blue);

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


.support-process-card:hover
.support-process-bottom i {

    transform:
        translateX(6px)
        rotate(-10deg)
        scale(1.07);

    color:
        var(--process-white);

    background:
        var(--process-blue);
}


/* =========================================================
   FORCE TEXT
========================================================= */

.support-process-section p {

    opacity: 1 !important;

    visibility: visible !important;
}


/* =========================================================
   IMPORTANT:
   DEFAULT CONTENT VISIBLE
========================================================= */

.support-process-head,
.support-process-card {

    opacity: 1;

    visibility: visible;

    filter: none;

    clip-path: none;

    transform: none;
}


/* =========================================================
   HEADER INITIAL STATE
   SAME ELEMENT:
   .support-process-section.process-animation-ready
========================================================= */

.support-process-section.process-animation-ready
.support-process-head {

    opacity: 0;

    filter:
        blur(14px);

    transform:
        perspective(1200px)
        translateY(35px)
        scale(.94)
        rotateX(10deg);

    clip-path:
        inset(
            12%
            12%
            12%
            12%
            round 30px
        );
}


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

.support-process-section.process-animation-ready
.support-process-head.process-show {

    opacity: 1;

    filter: blur(0);

    transform:
        perspective(1200px)
        translateY(0)
        scale(1)
        rotateX(0deg);

    clip-path:
        inset(
            0
            0
            0
            0
            round 0
        );

    transition:
        opacity 1.1s ease,
        filter 1.4s ease,
        transform 1.6s
        cubic-bezier(.16,.8,.22,1),
        clip-path 1.6s
        cubic-bezier(.16,.8,.22,1);
}


/* =========================================================
   CARD INITIAL STATE
========================================================= */

.support-process-section.process-animation-ready
.support-process-card {

    opacity: 0;

    visibility: visible;

    filter:
        blur(18px);

    transform:
        perspective(1000px)
        translateY(55px)
        scale(.84)
        rotateX(18deg)
        rotateY(7deg);

    clip-path:
        inset(
            14%
            14%
            14%
            14%
            round 25px
        );

    transform-origin:
        center bottom;
}


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

.support-process-section.process-animation-ready
.support-process-card.process-show {

    opacity: 1;

    filter:
        blur(0);

    transform:
        perspective(1000px)
        translateY(0)
        scale(1)
        rotateX(0deg)
        rotateY(0deg);

    clip-path:
        inset(
            0
            0
            0
            0
            round 0
        );

    transition:
        opacity 1.05s ease,
        filter 1.35s ease,
        transform 1.55s
        cubic-bezier(.16,.85,.22,1),
        clip-path 1.55s
        cubic-bezier(.16,.85,.22,1),
        border-color .3s ease,
        box-shadow .35s ease,
        background .35s ease;
}


/* =========================================================
   CARD HOVER AFTER SHOW
========================================================= */

.support-process-section.process-animation-ready
.support-process-card.process-show:hover {

    border-color:
        rgba(29,112,245,.38);

    box-shadow:
        0 28px 60px
        rgba(7,20,38,.14);
}


/* =========================================================
   TAG PULSE
========================================================= */

@keyframes processPulse {

    0%,
    100% {

        box-shadow:
            0 0 0 5px
            rgba(255,255,255,.15);
    }

    50% {

        box-shadow:
            0 0 0 9px
            rgba(255,255,255,.03);
    }
}


/* =========================================================
   1100PX
========================================================= */

@media (max-width: 1100px) {

    .support-process-grid {

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

}


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

@media (max-width: 991px) {

    .support-process-section {

        padding:
            70px
            20px
            80px;
    }


    .support-process-head {

        margin-bottom: 40px;
    }

}


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

@media (max-width: 767px) {

    .support-process-section {

        padding:
            58px
            15px
            68px;
    }


    .support-process-head {

        margin-bottom: 34px;
    }


    .support-process-title {

        font-size:
            clamp(
                30px,
                9vw,
                38px
            );

        letter-spacing:
            -1.3px;
    }


    .support-process-text {

        font-size: 13.5px;
    }


    .support-process-grid {

        grid-template-columns: 1fr;

        gap: 12px;
    }


    .support-process-card {

        min-height: 265px;

        padding: 20px;
    }


    .support-process-card p {

        margin-bottom: 42px;
    }


    .support-process-bottom {

        left: 20px;
        right: 20px;
    }


    /* MOBILE INITIAL */

    .support-process-section.process-animation-ready
    .support-process-card {

        transform:
            perspective(900px)
            translateY(45px)
            scale(.90)
            rotateX(12deg);

        filter:
            blur(13px);
    }


    /* MOBILE SHOW */

    .support-process-section.process-animation-ready
    .support-process-card.process-show {

        transform:
            perspective(900px)
            translateY(0)
            scale(1)
            rotateX(0deg);

        filter: blur(0);
    }

}


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

@media (max-width: 480px) {

    .support-process-section {

        padding:
            52px
            14px
            62px;
    }


    .support-process-title {

        font-size: 29px;
    }


    .support-process-card {

        min-height: 255px;

        border-radius: 16px;
    }


    .support-process-icon {

        width: 48px;
        height: 48px;

        font-size: 18px;
    }

}


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

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

    .support-process-head,

    .support-process-card,

    .support-process-section.process-animation-ready
    .support-process-head,

    .support-process-section.process-animation-ready
    .support-process-card {

        opacity: 1 !important;

        visibility: visible !important;

        filter: none !important;

        clip-path: none !important;

        transform: none !important;

        transition: none !important;
    }


    .support-process-tag span {

        animation: none !important;
    }

}

/* =========================================================
   ITECH CONTACT / CONSULTATION FORM SECTION
========================================================= */

.itech-form-section {

    --if-navy: #071426;
    --if-navy-soft: #102443;

    --if-blue: #1d70f5;
    --if-blue-dark: #0d5fe4;

    --if-white: #ffffff;

    --if-bg: #f5f8fd;
    --if-bg-blue: #edf4ff;

    --if-text: #071426;
    --if-muted: #66758a;

    --if-border: rgba(29,112,245,.13);

    position: relative;

    width: 100%;

    padding: 90px 20px 100px;

    overflow: hidden;

    isolation: isolate;

    background:
        linear-gradient(
            135deg,
            #edf4ff 0%,
            #f8faff 40%,
            #ffffff 72%,
            #f5f8fd 100%
        );
}


.itech-form-section *,
.itech-form-section *::before,
.itech-form-section *::after {
    box-sizing: border-box;
}


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

.itech-form-section::before {

    content: "";

    position: absolute;

    z-index: -2;

    width: 500px;
    height: 500px;

    left: -260px;
    top: -190px;

    border-radius: 50%;

    background:
        rgba(29,112,245,.09);
}


.itech-form-section::after {

    content: "";

    position: absolute;

    z-index: -2;

    width: 360px;
    height: 360px;

    right: -190px;
    bottom: -160px;

    border-radius: 50%;

    background:
        rgba(7,20,38,.045);
}


/* =========================================================
   CONTAINER
========================================================= */

.itech-form-container {

    position: relative;

    z-index: 3;

    width: 100%;

    max-width: 1180px;

    margin: 0 auto;
}


/* =========================================================
   LAYOUT
========================================================= */

.itech-form-layout {

    display: grid;

    grid-template-columns:
        minmax(360px,.82fr)
        minmax(0,1.18fr);

    align-items: stretch;

    gap: 22px;

    perspective: 1400px;
}


/* =========================================================
   LEFT INFO PANEL
========================================================= */

.itech-form-info {

    position: relative;

    padding: 38px;

    overflow: hidden;

    border-radius:
        28px
        70px
        28px
        28px;

    background:
        linear-gradient(
            145deg,
            var(--if-navy),
            var(--if-navy-soft)
        );

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

    box-shadow:
        0 32px 70px
        rgba(7,20,38,.20);

    transform-style: preserve-3d;
}


/* BLUE ACCENT */

.itech-form-info::before {

    content: "";

    position: absolute;

    width: 135px;
    height: 5px;

    top: 0;
    right: 30px;

    border-radius:
        0 0 30px 30px;

    background:
        var(--if-blue);
}


/* BLUE GLOW */

.itech-form-info::after {

    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -150px;
    bottom: -120px;

    border-radius: 50%;

    background:
        rgba(29,112,245,.17);

    pointer-events: none;
}


/* =========================================================
   TAG
========================================================= */

.itech-form-tag {

    position: relative;

    z-index: 3;

    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 20px;

    padding:
        7px
        11px
        7px
        8px;

    border-radius: 50px;

    background:
        rgba(29,112,245,.16);

    border:
        1px solid
        rgba(29,112,245,.25);

    color:
        #c7dcff;

    font-size: 10px;

    font-weight: 800;
}


.itech-form-tag span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--if-blue);

    box-shadow:
        0 0 0 5px
        rgba(29,112,245,.16);
}


/* =========================================================
   LEFT TITLE
========================================================= */

.itech-form-info h2 {

    position: relative;

    z-index: 3;

    max-width: 410px;

    margin:
        0
        0
        18px;

    color:
        var(--if-white);

    font-size:
        clamp(
            34px,
            3vw,
            44px
        );

    line-height: 1.08;

    letter-spacing: -1.7px;

    font-weight: 950;
}


.itech-form-info h2 span {

    display: block;

    margin-top: 5px;

    color:
        #78aaff;
}


/* =========================================================
   INTRO
========================================================= */

.itech-form-intro {

    position: relative;

    z-index: 3;

    max-width: 405px;

    margin:
        0
        0
        27px;

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

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 12.5px;

    line-height: 1.68;

    font-weight: 500;
}


/* =========================================================
   POINTS
========================================================= */

.itech-form-points {

    position: relative;

    z-index: 3;

    display: grid;

    gap: 10px;

    margin-bottom: 35px;
}


.itech-form-point {

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        10px
        11px;

    border-radius: 10px;

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

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

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

    font-size: 11px;

    line-height: 1.45;

    font-weight: 600;
}


.itech-form-point > div {

    width: 25px;
    height: 25px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 7px;

    background:
        var(--if-blue);

    color:
        var(--if-white);

    font-size: 9px;

    box-shadow:
        0 7px 17px
        rgba(29,112,245,.20);
}


/* =========================================================
   BOTTOM INFO
========================================================= */

.itech-form-bottom {

    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;

    gap: 11px;

    padding-top: 20px;

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


.itech-form-bottom-icon {

    width: 43px;
    height: 43px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 12px;

    background:
        var(--if-blue);

    color:
        var(--if-white);

    font-size: 17px;

    box-shadow:
        0 10px 24px
        rgba(29,112,245,.22);

    transform:
        translateZ(20px);
}


.itech-form-bottom > div:last-child {

    display: flex;

    flex-direction: column;
}


.itech-form-bottom small {

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

    font-size: 8.5px;
}


.itech-form-bottom strong {

    margin-top: 2px;

    color:
        var(--if-white);

    font-size: 11px;

    font-weight: 800;
}


/* =========================================================
   FORM BOX
========================================================= */

.itech-form-box {

    position: relative;

    padding:
        34px
        34px
        32px;

    border-radius: 24px;

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

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

    box-shadow:
        0 22px 58px
        rgba(7,20,38,.08);

    transform-style: preserve-3d;
}


/* =========================================================
   FORM HEAD
========================================================= */

.itech-form-box-head {

    margin-bottom: 25px;
}


.itech-form-box-head > span {

    display: inline-block;

    margin-bottom: 7px;

    color:
        var(--if-blue);

    font-size: 10px;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .6px;
}


.itech-form-box-head h3 {

    margin:
        0
        0
        8px;

    color:
        var(--if-navy);

    font-size: 27px;

    line-height: 1.18;

    letter-spacing: -.8px;

    font-weight: 900;
}


.itech-form-box-head p {

    max-width: 520px;

    margin: 0;

    color:
        var(--if-muted) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 11.5px;

    line-height: 1.55;

    font-weight: 500;
}


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

.itech-form-box form {

    display: grid;

    gap: 16px;
}


/* =========================================================
   ROW
========================================================= */

.itech-form-row {

    display: grid;

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

    gap: 14px;
}


/* =========================================================
   GROUP
========================================================= */

.itech-form-group {

    min-width: 0;
}


.itech-form-group label {

    display: block;

    margin-bottom: 7px;

    color:
        var(--if-navy);

    font-size: 10.5px;

    font-weight: 800;
}


/* =========================================================
   CONTROL
========================================================= */

.itech-form-control {

    position: relative;

    width: 100%;
}


.itech-form-control > i {

    position: absolute;

    z-index: 3;

    left: 14px;
    top: 50%;

    transform:
        translateY(-50%);

    color:
        var(--if-blue);

    font-size: 14px;

    pointer-events: none;
}


.itech-form-control input,
.itech-form-control select,
.itech-form-control textarea {

    width: 100%;

    border:
        1px solid
        rgba(29,112,245,.13);

    outline: none;

    border-radius: 12px;

    background:
        #f8faff;

    color:
        var(--if-navy);

    font-family: inherit;

    font-size: 11.5px;

    font-weight: 500;

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}


/* INPUT / SELECT */

.itech-form-control input,
.itech-form-control select {

    height: 50px;

    padding:
        0
        14px
        0
        42px;
}


/* SELECT */

.itech-form-control select {

    cursor: pointer;

    appearance: auto;
}


/* TEXTAREA */

.itech-form-textarea > i {

    top: 17px;

    transform: none;
}


.itech-form-control textarea {

    min-height: 125px;

    resize: vertical;

    padding:
        14px
        14px
        14px
        42px;

    line-height: 1.55;
}


/* PLACEHOLDER */

.itech-form-control input::placeholder,
.itech-form-control textarea::placeholder {

    color:
        #9aa6b7;

    opacity: 1;
}


/* FOCUS */

.itech-form-control input:focus,
.itech-form-control select:focus,
.itech-form-control textarea:focus {

    border-color:
        rgba(29,112,245,.55);

    background:
        var(--if-white);

    box-shadow:
        0 0 0 4px
        rgba(29,112,245,.08);
}


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

.itech-form-submit {

    width: fit-content;

    min-height: 52px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    margin-top: 2px;

    padding:
        6px
        7px
        6px
        20px;

    border: 0;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--if-blue),
            var(--if-blue-dark)
        );

    color:
        var(--if-white);

    cursor: pointer;

    font-family: inherit;

    font-size: 12.5px;

    font-weight: 850;

    box-shadow:
        0 15px 31px
        rgba(29,112,245,.24);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.itech-form-submit span {

    width: 37px;
    height: 37px;

    display: grid;

    place-items: center;

    border-radius: 9px;

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

    transition:
        transform .45s ease;
}


.itech-form-submit:hover {

    transform:
        translateY(-2px)
        scale(1.02);

    box-shadow:
        0 21px 42px
        rgba(29,112,245,.32);
}


.itech-form-submit:hover span {

    transform:
        rotate(45deg);
}


/* =========================================================
   SAFE DEFAULT
========================================================= */

.itech-form-info,
.itech-form-box,
.itech-form-group {

    opacity: 1;

    visibility: visible;

    filter: none;

    transform: none;
}


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

.itech-form-section.itech-form-ready
.itech-form-info {

    opacity: 0;

    filter:
        blur(14px);

    transform:
        perspective(1200px)
        scale(.91)
        rotateX(11deg)
        rotateY(-7deg);
}


.itech-form-section.itech-form-ready
.itech-form-box {

    opacity: 0;

    filter:
        blur(14px);

    transform:
        perspective(1200px)
        scale(.92)
        rotateX(10deg)
        rotateY(7deg);
}


.itech-form-section.itech-form-ready
.itech-form-group {

    opacity: 0;

    filter:
        blur(8px);

    transform:
        translateY(18px)
        scale(.97);
}


/* =========================================================
   SHOW
========================================================= */

.itech-form-section.itech-form-ready
.itech-form-info.itech-form-show,

.itech-form-section.itech-form-ready
.itech-form-box.itech-form-show {

    opacity: 1;

    filter: blur(0);

    transform:
        perspective(1200px)
        scale(1)
        rotateX(0)
        rotateY(0);

    transition:
        opacity 1.15s ease,
        filter 1.4s ease,
        transform 1.7s
        cubic-bezier(.16,.8,.22,1);
}


.itech-form-section.itech-form-ready
.itech-form-group.itech-form-field-show {

    opacity: 1;

    filter: blur(0);

    transform:
        translateY(0)
        scale(1);

    transition:
        opacity .8s ease,
        filter 1s ease,
        transform 1.1s
        cubic-bezier(.16,.8,.22,1);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .itech-form-section {

        padding:
            72px
            20px
            82px;
    }


    .itech-form-layout {

        grid-template-columns: 1fr;

        max-width: 760px;

        margin: 0 auto;
    }


    .itech-form-info {

        padding: 32px;
    }

}


@media (max-width: 767px) {

    .itech-form-section {

        padding:
            58px
            15px
            68px;
    }


    .itech-form-info {

        padding: 25px;

        border-radius:
            22px
            48px
            22px
            22px;
    }


    .itech-form-info h2 {

        font-size:
            clamp(
                30px,
                9vw,
                38px
            );

        letter-spacing:
            -1.3px;
    }


    .itech-form-box {

        padding:
            25px
            20px;

        border-radius: 20px;
    }


    .itech-form-row {

        grid-template-columns: 1fr;
    }


    .itech-form-submit {

        width: 100%;

        justify-content:
            space-between;
    }

}


@media (max-width: 480px) {

    .itech-form-info {

        padding: 22px;
    }


    .itech-form-box {

        padding:
            22px
            16px;
    }


    .itech-form-box-head h3 {

        font-size: 23px;
    }

}


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

    .itech-form-info,
    .itech-form-box,
    .itech-form-group {

        opacity: 1 !important;

        visibility: visible !important;

        filter: none !important;

        transform: none !important;

        transition: none !important;
    }

}

/*----------------------------testimonial------------------------------------*/
.itech-review-slider-section {

    --irs-navy: #071426;
    --irs-blue: #1d70f5;
    --irs-blue-dark: #0d5fe4;
    --irs-white: #ffffff;
    --irs-muted: #66758a;
    --irs-soft: #edf4ff;

    position: relative;

    width: 100%;

    padding: 88px 0 100px;

    overflow: hidden;

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


.itech-review-slider-section *,
.itech-review-slider-section *::before,
.itech-review-slider-section *::after {
    box-sizing: border-box;
}


/* CONTAINER */

.itech-review-slider-container {
    width: 100%;
}


/* HEAD */

.itech-review-slider-head {
    max-width: 790px;

    margin: 0 auto 42px;

    padding: 0 20px;

    text-align: center;
}


.itech-review-slider-tag {
    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin: 0 auto 16px;

    padding: 8px 14px 8px 9px;

    border-radius: 50px;

    background: var(--irs-blue);

    color: var(--irs-white);

    font-size: 11px;

    font-weight: 850;

    box-shadow:
        0 9px 22px
        rgba(29,112,245,.18);
}


.itech-review-slider-tag span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--irs-white);

    box-shadow:
        0 0 0 5px
        rgba(255,255,255,.16);
}


.itech-review-slider-head h2 {
    max-width: 760px;

    margin: 0 auto 15px;

    color: var(--irs-navy);

    font-size:
        clamp(38px,3.6vw,50px);

    line-height: 1.08;

    letter-spacing: -2px;

    font-weight: 950;
}


.itech-review-slider-head h2 span {
    display: block;

    margin-top: 5px;

    color: var(--irs-blue);
}


.itech-review-slider-head > p {
    max-width: 680px;

    margin: 0 auto;

    color: var(--irs-muted) !important;

    font-size: 14.5px;

    line-height: 1.7;

    font-weight: 500;
}


/* =========================================================
   SLIDER WRAP
========================================================= */

.itech-review-slider-wrap {
    position: relative;

    width: 100%;

    overflow: hidden;

    padding:
        18px
        0
        28px;
}


/* LEFT FADE */

.itech-review-slider-wrap::before {
    content: "";

    position: absolute;

    z-index: 10;

    left: 0;
    top: 0;
    bottom: 0;

    width: 110px;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            #f8faff 0%,
            rgba(248,250,255,.88) 25%,
            rgba(248,250,255,0) 100%
        );
}


/* RIGHT FADE */

.itech-review-slider-wrap::after {
    content: "";

    position: absolute;

    z-index: 10;

    right: 0;
    top: 0;
    bottom: 0;

    width: 110px;

    pointer-events: none;

    background:
        linear-gradient(
            270deg,
            #f8faff 0%,
            rgba(248,250,255,.88) 25%,
            rgba(248,250,255,0) 100%
        );
}


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

.itech-review-slider-track {
    display: flex;

    width: max-content;

    gap: 16px;

    padding-left: 16px;

    animation:
        itechReviewMove
        42s
        linear
        infinite;

    will-change: transform;
}


/* HOVER PAUSE */

.itech-review-slider-wrap:hover
.itech-review-slider-track {
    animation-play-state: paused;
}


/* =========================================================
   SLIDE
========================================================= */

.itech-review-slide {
    position: relative;

    width: 360px;

    min-height: 240px;

    flex: 0 0 360px;

    padding: 23px;

    overflow: hidden;

    border-radius: 18px;

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

    border:
        1px solid
        rgba(29,112,245,.12);

    box-shadow:
        0 13px 32px
        rgba(7,20,38,.06);

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


/* GLOW */

.itech-review-slide::before {
    content: "";

    position: absolute;

    width: 160px;
    height: 160px;

    right: -105px;
    top: -105px;

    border-radius: 50%;

    background:
        rgba(29,112,245,.07);

    transition: .45s ease;
}


/* BOTTOM LINE */

.itech-review-slide::after {
    content: "";

    position: absolute;

    left: 23px;
    bottom: 0;

    width: 40px;
    height: 3px;

    border-radius: 20px;

    background:
        var(--irs-blue);

    transition:
        width .4s ease;
}


/* HOVER */

.itech-review-slide:hover {
    transform:
        translateY(-8px)
        scale(1.015);

    border-color:
        rgba(29,112,245,.34);

    box-shadow:
        0 25px 55px
        rgba(7,20,38,.13);
}


.itech-review-slide:hover::before {
    width: 260px;
    height: 260px;

    background:
        rgba(29,112,245,.11);
}


.itech-review-slide:hover::after {
    width: 95px;
}


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

.itech-review-slide-top {
    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 16px;
}


/* QUOTE */

.itech-review-quote {
    width: 43px;
    height: 43px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--irs-blue),
            var(--irs-blue-dark)
        );

    color: var(--irs-white);

    font-size: 20px;

    box-shadow:
        0 10px 22px
        rgba(29,112,245,.20);

    transition:
        transform .4s ease;
}


.itech-review-slide:hover
.itech-review-quote {
    transform:
        rotate(-7deg)
        scale(1.08);
}


/* STARS */

.itech-review-stars {
    display: flex;

    align-items: center;

    gap: 3px;

    color: #f5ae21;

    font-size: 11px;
}


/* =========================================================
   REVIEW TEXT
========================================================= */

.itech-review-slide > p {
    position: relative;

    z-index: 3;

    width: 100%;

    margin:
        0
        0
        20px;

    color:
        var(--irs-muted) !important;

    opacity: 1 !important;

    visibility: visible !important;

    white-space: normal;

    overflow-wrap: anywhere;

    font-size: 12px;

    line-height: 1.62;

    font-weight: 500;
}


/* =========================================================
   USER
========================================================= */

.itech-review-user {
    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;

    gap: 10px;

    padding-top: 15px;

    margin-top: auto;

    border-top:
        1px solid
        rgba(29,112,245,.09);
}


/* AVATAR */

.itech-review-avatar {
    width: 39px;
    height: 39px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        var(--irs-soft);

    border:
        1px solid
        rgba(29,112,245,.13);

    color:
        var(--irs-blue);

    font-size: 10px;

    font-weight: 950;
}


/* USER TEXT */

.itech-review-user > div:last-child {
    min-width: 0;
}


.itech-review-user h4 {
    margin:
        0
        0
        3px;

    color:
        var(--irs-navy);

    font-size: 11.5px;

    font-weight: 900;
}


.itech-review-user span {
    display: block;

    color:
        var(--irs-muted);

    font-size: 8.5px;

    font-weight: 600;
}


/* =========================================================
   INFINITE MOVEMENT
========================================================= */

@keyframes itechReviewMove {

    from {
        transform:
            translateX(0);
    }

    to {
        transform:
            translateX(
                calc(
                    -1 * (360px + 16px) * 6
                )
            );
    }

}


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

.itech-review-slider-section.itech-review-ready
.itech-review-slider-head {
    opacity: 0;

    filter:
        blur(12px);

    transform:
        translateY(30px)
        scale(.96);
}


.itech-review-slider-section.itech-review-ready
.itech-review-slider-wrap {
    opacity: 0;

    filter:
        blur(14px);

    transform:
        perspective(1100px)
        scale(.94)
        rotateX(8deg);
}


.itech-review-slider-section.itech-review-ready
.itech-review-slider-head.itech-review-show,
.itech-review-slider-section.itech-review-ready
.itech-review-slider-wrap.itech-review-show {
    opacity: 1;

    filter: blur(0);

    transform:
        translateY(0)
        scale(1)
        rotateX(0);

    transition:
        opacity 1.15s ease,
        filter 1.4s ease,
        transform 1.65s
        cubic-bezier(.16,.8,.22,1);
}


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

@media (max-width: 991px) {

    .itech-review-slider-section {
        padding:
            72px
            0
            82px;
    }


    .itech-review-slide {
        width: 330px;

        flex-basis: 330px;
    }


    @keyframes itechReviewMove {

        from {
            transform:
                translateX(0);
        }

        to {
            transform:
                translateX(
                    calc(
                        -1 * (330px + 16px) * 6
                    )
                );
        }

    }

}


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

@media (max-width: 767px) {

    .itech-review-slider-section {
        padding:
            58px
            0
            68px;
    }


    .itech-review-slider-head {
        margin-bottom: 28px;

        padding:
            0
            15px;
    }


    .itech-review-slider-head h2 {
        font-size:
            clamp(
                30px,
                9vw,
                38px
            );

        letter-spacing:
            -1.3px;
    }


    .itech-review-slider-head > p {
        font-size: 13.5px;
    }


    .itech-review-slider-wrap::before,
    .itech-review-slider-wrap::after {
        width: 40px;
    }


    .itech-review-slide {
        width: 290px;

        min-height: 225px;

        flex-basis: 290px;

        padding: 20px;
    }


    .itech-review-slider-track {
        gap: 12px;

        animation-duration: 48s;
    }


    @keyframes itechReviewMove {

        from {
            transform:
                translateX(0);
        }

        to {
            transform:
                translateX(
                    calc(
                        -1 * (290px + 12px) * 6
                    )
                );
        }

    }

}


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

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

    .itech-review-slider-track {
        animation: none !important;
    }


    .itech-review-slider-head,
    .itech-review-slider-wrap {
        opacity: 1 !important;

        filter: none !important;

        transform: none !important;
    }

}


/* =========================================================
   ITECH FAQ SECTION
========================================================= */

.itech-faq-section {

    --ifaq-navy: #071426;
    --ifaq-navy-soft: #102443;

    --ifaq-blue: #1d70f5;
    --ifaq-blue-dark: #0d5fe4;

    --ifaq-white: #ffffff;

    --ifaq-bg: #f5f8fd;
    --ifaq-soft: #edf4ff;

    --ifaq-muted: #66758a;

    position: relative;

    width: 100%;

    padding: 90px 20px 100px;

    overflow: hidden;

    isolation: isolate;

    background:
        linear-gradient(
            135deg,
            #f2f6fd 0%,
            #ffffff 50%,
            #edf4ff 100%
        );
}


.itech-faq-section *,
.itech-faq-section *::before,
.itech-faq-section *::after {
    box-sizing: border-box;
}


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

.itech-faq-section::before {

    content: "";

    position: absolute;

    z-index: -3;

    width: 500px;
    height: 500px;

    left: -270px;
    top: -210px;

    border-radius: 50%;

    background:
        rgba(29,112,245,.085);
}


.itech-faq-section::after {

    content: "";

    position: absolute;

    z-index: -3;

    width: 360px;
    height: 360px;

    right: -190px;
    bottom: -170px;

    border-radius: 50%;

    background:
        rgba(7,20,38,.04);
}


/* =========================================================
   CONTAINER
========================================================= */

.itech-faq-container {

    position: relative;

    z-index: 3;

    width: 100%;

    max-width: 1180px;

    margin: 0 auto;
}


/* =========================================================
   LAYOUT
========================================================= */

.itech-faq-layout {

    display: grid;

    grid-template-columns:
        minmax(330px,.72fr)
        minmax(0,1.28fr);

    align-items: start;

    gap: 70px;

    perspective: 1400px;
}


/* =========================================================
   LEFT
========================================================= */

.itech-faq-content {

    position: sticky;

    top: 120px;

    max-width: 445px;
}


/* TAG */

.itech-faq-tag {

    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 18px;

    padding:
        8px
        14px
        8px
        9px;

    border-radius: 50px;

    background:
        var(--ifaq-blue);

    color:
        var(--ifaq-white);

    font-size: 11px;

    font-weight: 850;

    box-shadow:
        0 9px 22px
        rgba(29,112,245,.18);
}


.itech-faq-tag span {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--ifaq-white);

    box-shadow:
        0 0 0 5px
        rgba(255,255,255,.16);

    animation:
        itechFaqPulse
        4.5s
        ease-in-out
        infinite;
}


/* TITLE */

.itech-faq-content h2 {

    max-width: 430px;

    margin:
        0
        0
        18px;

    color:
        var(--ifaq-navy);

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

    line-height: 1.08;

    letter-spacing: -2px;

    font-weight: 950;
}


.itech-faq-content h2 span {

    display: block;

    margin-top: 5px;

    color:
        var(--ifaq-blue);
}


/* DESCRIPTION */

.itech-faq-content > p {

    max-width: 420px;

    margin:
        0
        0
        26px;

    color:
        var(--ifaq-muted) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 14px;

    line-height: 1.72;

    font-weight: 500;
}


/* =========================================================
   HELP ROW
========================================================= */

.itech-faq-help {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 22px;

    padding:
        13px;

    border-radius: 14px;

    background:
        var(--ifaq-white);

    border:
        1px solid
        rgba(29,112,245,.12);

    box-shadow:
        0 11px 28px
        rgba(7,20,38,.06);
}


.itech-faq-help-icon {

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 11px;

    background:
        var(--ifaq-soft);

    color:
        var(--ifaq-blue);

    font-size: 17px;
}


.itech-faq-help > div:last-child {

    display: flex;

    flex-direction: column;
}


.itech-faq-help small {

    color:
        var(--ifaq-muted);

    font-size: 8.5px;
}


.itech-faq-help strong {

    margin-top: 2px;

    color:
        var(--ifaq-navy);

    font-size: 11px;

    font-weight: 850;
}


/* =========================================================
   BUTTON
========================================================= */

.itech-faq-btn {

    min-height: 50px;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        6px
        7px
        6px
        18px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--ifaq-blue),
            var(--ifaq-blue-dark)
        );

    color:
        var(--ifaq-white);

    text-decoration: none;

    font-size: 12px;

    font-weight: 850;

    box-shadow:
        0 15px 31px
        rgba(29,112,245,.24);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.itech-faq-btn > span {

    width: 35px;
    height: 35px;

    display: grid;

    place-items: center;

    border-radius: 8px;

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

    transition:
        transform .45s ease;
}


.itech-faq-btn:hover {

    color:
        var(--ifaq-white);

    transform:
        translateY(-2px);

    box-shadow:
        0 20px 40px
        rgba(29,112,245,.32);
}


.itech-faq-btn:hover span {

    transform:
        rotate(45deg);
}


/* =========================================================
   FAQ LIST
========================================================= */

.itech-faq-list {

    display: grid;

    gap: 10px;

    perspective: 1100px;
}


/* =========================================================
   FAQ ITEM
========================================================= */

.itech-faq-item {

    position: relative;

    width: 100%;

    overflow: hidden;

    border-radius: 15px;

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

    border:
        1px solid
        rgba(29,112,245,.12);

    box-shadow:
        0 9px 26px
        rgba(7,20,38,.045);

    transform-style: preserve-3d;

    transition:
        border-color .3s ease,
        box-shadow .35s ease,
        background .35s ease;
}


.itech-faq-item::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background:
        var(--ifaq-blue);

    transform:
        scaleY(0);

    transform-origin:
        top;

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


.itech-faq-item:hover {

    border-color:
        rgba(29,112,245,.28);

    box-shadow:
        0 15px 35px
        rgba(7,20,38,.08);
}


.itech-faq-item.active {

    border-color:
        rgba(29,112,245,.32);

    background:
        var(--ifaq-white);

    box-shadow:
        0 18px 42px
        rgba(7,20,38,.09);
}


.itech-faq-item.active::before {

    transform:
        scaleY(1);
}


/* =========================================================
   QUESTION
========================================================= */

.itech-faq-question {

    position: relative;

    z-index: 3;

    width: 100%;

    min-height: 72px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        18px
        19px;

    border: 0;

    outline: 0;

    background:
        transparent;

    cursor: pointer;

    text-align: left;

    font-family: inherit;
}


.itech-faq-question > span {

    color:
        var(--ifaq-navy);

    font-size: 13.5px;

    line-height: 1.42;

    font-weight: 850;
}


/* PLUS ICON */

.itech-faq-question > i {

    width: 33px;
    height: 33px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 9px;

    background:
        var(--ifaq-soft);

    color:
        var(--ifaq-blue);

    font-size: 13px;

    transition:
        transform .42s
        cubic-bezier(.2,.8,.2,1),
        background .35s ease,
        color .35s ease;
}


.itech-faq-item.active
.itech-faq-question > i {

    background:
        var(--ifaq-blue);

    color:
        var(--ifaq-white);

    transform:
        rotate(45deg);
}


/* =========================================================
   ANSWER
========================================================= */

.itech-faq-answer {

    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows .45s
        cubic-bezier(.2,.8,.2,1);
        /* display: none; */
}


.itech-faq-answer > div {

    overflow: hidden;
}


.itech-faq-item.active
.itech-faq-answer {

    grid-template-rows: 1fr;
}


.itech-faq-answer p {

    width: 100%;

    max-width: 100%;

    margin: 0;

    padding:
        0
        19px
        20px;

    color:
        var(--ifaq-muted) !important;

    opacity: 1 !important;

    visibility: visible !important;

    white-space: normal;

    overflow-wrap: anywhere;

    font-size: 11.5px;

    line-height: 1.65;

    font-weight: 500;
}


/* =========================================================
   SAFE DEFAULT
========================================================= */

.itech-faq-content,
.itech-faq-item {

    opacity: 1;

    visibility: visible;

    filter: none;

    transform: none;
}


/* =========================================================
   INITIAL SCROLL STATE
========================================================= */

.itech-faq-section.itech-faq-ready
.itech-faq-content {

    opacity: 0;

    filter:
        blur(14px);

    transform:
        perspective(1200px)
        translateY(38px)
        scale(.93)
        rotateX(10deg);
}


.itech-faq-section.itech-faq-ready
.itech-faq-item {

    opacity: 0;

    filter:
        blur(11px);

    transform:
        perspective(900px)
        translateY(35px)
        scale(.92)
        rotateX(10deg);
}


/* =========================================================
   SHOW
========================================================= */

.itech-faq-section.itech-faq-ready
.itech-faq-content.itech-faq-show,

.itech-faq-section.itech-faq-ready
.itech-faq-item.itech-faq-show {

    opacity: 1;

    filter:
        blur(0);

    transform:
        perspective(1000px)
        translateY(0)
        scale(1)
        rotateX(0deg);

    transition:
        opacity 1.05s ease,
        filter 1.3s ease,
        transform 1.5s
        cubic-bezier(.16,.8,.22,1);
}


/* =========================================================
   PULSE
========================================================= */

@keyframes itechFaqPulse {

    0%,
    100% {

        box-shadow:
            0 0 0 5px
            rgba(255,255,255,.15);
    }

    50% {

        box-shadow:
            0 0 0 9px
            rgba(255,255,255,.03);
    }

}


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

@media (max-width: 991px) {

    .itech-faq-section {

        padding:
            72px
            20px
            82px;
    }


    .itech-faq-layout {

        grid-template-columns: 1fr;

        gap: 45px;

        max-width: 760px;

        margin: 0 auto;
    }


    .itech-faq-content {

        position: relative;

        top: auto;

        max-width: 650px;

        margin: 0 auto;

        text-align: center;
    }


    .itech-faq-tag {

        margin-left: auto;
        margin-right: auto;
    }


    .itech-faq-content h2,
    .itech-faq-content > p {

        margin-left: auto;
        margin-right: auto;
    }


    .itech-faq-help {

        max-width: 380px;

        margin:
            0
            auto
            22px;

        text-align: left;
    }

}


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

@media (max-width: 767px) {

    .itech-faq-section {

        padding:
            58px
            15px
            68px;
    }


    .itech-faq-content h2 {

        font-size:
            clamp(
                30px,
                9vw,
                38px
            );

        letter-spacing: -1.3px;
    }


    .itech-faq-content > p {

        font-size: 13.5px;
    }


    .itech-faq-question {

        min-height: 65px;

        padding:
            15px
            16px;
    }


    .itech-faq-question > span {

        font-size: 12.5px;
    }


    .itech-faq-answer p {

        padding:
            0
            16px
            17px;
    }

}


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

@media (max-width: 480px) {

    .itech-faq-btn {

        width: 100%;

        justify-content:
            space-between;
    }


    .itech-faq-question {

        gap: 12px;
    }


    .itech-faq-question > i {

        width: 30px;
        height: 30px;
    }

}


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

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

    .itech-faq-content,
    .itech-faq-item {

        opacity: 1 !important;

        visibility: visible !important;

        filter: none !important;

        transform: none !important;

        transition: none !important;
    }


    .itech-faq-answer {

        transition: none !important;
    }

}







/*-----------------------------latest blog---------------------------*/

.simple-blog-section {
  position: relative;

  overflow: hidden;

  padding: 100px 20px;

  background: var(--white-color);
}

.simple-blog-section::before {
  content: "";

  position: absolute;

  width: 460px;

  height: 460px;

  right: -220px;

  top: 90px;

  border-radius: 50%;

  background: rgba(21, 101, 216, 0.06);

  pointer-events: none;
}

.simple-blog-section::after {
  content: "";

  position: absolute;

  width: 330px;

  height: 330px;

  left: -150px;

  bottom: 70px;

  border-radius: 50%;

  background: rgba(16, 183, 201, 0.07);

  pointer-events: none;
}

.simple-blog-section .container {
  max-width: 1200px;

  margin: 0 auto;

  position: relative;

  z-index: 2;
}

.simple-blog-section .blog-head {
  max-width: 760px;

  margin: 0 auto 55px;

  text-align: center;

  opacity: 0;

  transform: translateY(35px);

  transition: 0.9s ease;
}

.simple-blog-section.site-animate-active .blog-head {
  opacity: 1;

  transform: translateY(0);
}

.simple-blog-section .blog-tag {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  padding: 10px 17px;

  border-radius: 50px;

  background: var(--light-bg);

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

  color: var(--secondary-color);

  font-size: 13px;

  font-weight: 850;

  margin-bottom: 18px;
}

.simple-blog-section .blog-tag span {
  width: 8px;

  height: 8px;

  background: var(--accent-color);

  border-radius: 50%;

  box-shadow: 0 0 0 7px rgba(16, 183, 201, 0.13);
}

.simple-blog-section .blog-title {
  font-size: 46px;

  line-height: 1.14;

  letter-spacing: -1.6px;

  font-weight: 950;

  color: var(--primary-color);

  margin: 0 0 16px;
}

.simple-blog-section .blog-title span {
  background: var(--gradient-main);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;
}

.simple-blog-section .blog-text {
  font-size: 16px;

  line-height: 1.75;

  color: var(--muted-color);

  font-weight: 600;

  margin: 0;
}

.simple-blog-section .blog-grid {
  display: grid;

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

  gap: 26px;
}

.simple-blog-section .blog-card {
  position: relative;

  overflow: hidden;

  background: var(--white-color);

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

  border-radius: 30px;

  box-shadow: 0 16px 42px rgba(7, 27, 58, 0.07);

  opacity: 0;

  transform: translateY(45px);

  transition: 0.75s ease;
}

.simple-blog-section.site-animate-active .blog-card {
  opacity: 1;

  transform: translateY(0);
}

.simple-blog-section.site-animate-active .blog-card:nth-child(1) {
  transition-delay: 0.12s;
}

.simple-blog-section.site-animate-active .blog-card:nth-child(2) {
  transition-delay: 0.24s;
}

.simple-blog-section.site-animate-active .blog-card:nth-child(3) {
  transition-delay: 0.36s;
}

.simple-blog-section .blog-card:hover {
  transform: translateY(-10px);

  box-shadow: 0 28px 65px rgba(7, 27, 58, 0.14);

  border-color: rgba(21, 101, 216, 0.22);
}

.simple-blog-section .blog-img {
  position: relative;

  height: 245px;

  overflow: hidden;

  background: var(--light-bg);
}

.simple-blog-section .blog-img img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  transition: 0.45s ease;
}

.simple-blog-section .blog-card:hover .blog-img img {
  transform: scale(1.08);
}

.simple-blog-section .blog-category {
  position: absolute;

  left: 18px;

  bottom: 18px;

  padding: 9px 15px;

  border-radius: 50px;

  background: var(--gradient-main);

  color: var(--white-color);

  font-size: 12px;

  font-weight: 850;

  box-shadow: 0 12px 28px rgba(21, 101, 216, 0.28);
}

.simple-blog-section .blog-content {
  padding: 26px;
}

.simple-blog-section .blog-meta {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 12px;

  margin-bottom: 14px;
}

.simple-blog-section .blog-meta span {
  font-size: 12px;

  color: var(--muted-color);

  font-weight: 750;
}

.simple-blog-section .blog-content h3 {
  font-size: 22px;

  line-height: 1.32;

  font-weight: 950;

  color: var(--primary-color);

  margin: 0 0 12px;
}

.simple-blog-section .blog-content p {
  font-size: 14px;

  line-height: 1.7;

  color: var(--muted-color);

  font-weight: 600;

  margin: 0 0 20px;
}

.simple-blog-section .blog-link {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: var(--secondary-color);

  text-decoration: none;

  font-size: 14px;

  font-weight: 950;
}

.simple-blog-section .blog-link span {
  transition: 0.25s ease;
}

.simple-blog-section .blog-link:hover span {
  transform: translateX(5px);
}

.simple-blog-section .blog-btn-wrap {
  text-align: center;

  margin-top: 45px;

  opacity: 0;

  transform: translateY(35px);

  transition: 0.8s ease 0.38s;
}

.simple-blog-section.site-animate-active .blog-btn-wrap {
  opacity: 1;

  transform: translateY(0);
}

.simple-blog-section .blog-view-btn {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  min-height: 54px;

  padding: 0 28px;

  border-radius: 50px;

  background: var(--gradient-main);

  color: var(--white-color);

  text-decoration: none;

  font-size: 15px;

  font-weight: 900;

  box-shadow: 0 18px 38px rgba(21, 101, 216, 0.3);

  transition: 0.3s ease;
}

.simple-blog-section .blog-view-btn:hover {
  transform: translateY(-4px);

  box-shadow: 0 22px 44px rgba(21, 101, 216, 0.4);
}

@media (max-width: 991px) {
  .simple-blog-section {
    padding: 80px 20px;
  }

  .simple-blog-section .blog-title {
    font-size: 38px;
  }

  .simple-blog-section .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .simple-blog-section {
    padding: 65px 15px;
  }

  .simple-blog-section .blog-title {
    font-size: 32px;

    letter-spacing: -1px;
  }

  .simple-blog-section .blog-grid {
    grid-template-columns: 1fr;
  }

  .simple-blog-section .blog-img {
    height: 230px;
  }

  .simple-blog-section .blog-card {
    border-radius: 24px;
  }

  .simple-blog-section .blog-content {
    padding: 22px;
  }
}

@media (max-width: 480px) {
  .simple-blog-section .blog-title {
    font-size: 29px;
  }

  .simple-blog-section .blog-view-btn {
    width: 100%;
  }
}

/*-----------------------footer----------------------------------*/

/* =========================================================
   SITE FOOTER - FINAL PREMIUM DESIGN
========================================================= */

.site-footer {

    --footer-navy: #06101f;
    --footer-navy-soft: #0c1c34;

    --footer-blue: #1d70f5;
    --footer-blue-dark: #0d5fe4;

    --footer-white: #ffffff;

    --footer-text: #d5dfeb;
    --footer-muted: #8fa0b5;

    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 78px 20px 0;

    isolation: isolate;

    background:
        linear-gradient(
            145deg,
            #06101f 0%,
            #09182d 50%,
            #071426 100%
        );

    color:
        var(--footer-white);
}


/* =========================================================
   RESET
========================================================= */

.site-footer *,
.site-footer *::before,
.site-footer *::after {
    box-sizing: border-box;
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.site-footer::before {

    content: "";

    position: absolute;

    z-index: -2;

    width: 480px;
    height: 480px;

    right: -250px;
    top: -210px;

    border-radius: 50%;

    background:
        rgba(29,112,245,.16);

    filter:
        blur(5px);

    pointer-events: none;
}


.site-footer::after {

    content: "";

    position: absolute;

    z-index: -2;

    width: 360px;
    height: 360px;

    left: -210px;
    bottom: -120px;

    border-radius: 50%;

    background:
        rgba(29,112,245,.08);

    pointer-events: none;
}


/* =========================================================
   CONTAINER
========================================================= */

.site-footer .footer-container {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1240px;

    margin: 0 auto;
}


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

.site-footer .footer-top-box {

    position: relative;

    display: grid;

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

    align-items: center;

    gap: 35px;

    padding:
        30px
        32px;

    margin-bottom: 58px;

    overflow: hidden;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.035)
        );

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

    box-shadow:
        0 22px 55px
        rgba(0,0,0,.18);

    backdrop-filter:
        blur(14px);
}


/* TOP BLUE LINE */

.site-footer .footer-top-box::before {

    content: "";

    position: absolute;

    top: 0;
    left: 32px;

    width: 100px;
    height: 4px;

    border-radius:
        0 0 20px 20px;

    background:
        var(--footer-blue);
}


/* CTA GLOW */

.site-footer .footer-top-box::after {

    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    right: -130px;
    bottom: -130px;

    border-radius: 50%;

    background:
        rgba(29,112,245,.15);

    pointer-events: none;
}


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

.site-footer .footer-cta-tag {

    display: inline-block;

    margin-bottom: 8px;

    color:
        #84b0ff;

    font-size: 10px;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .7px;
}


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

.site-footer
.footer-cta-content h2 {

    max-width: 620px;

    margin:
        0
        0
        9px;

    color:
        var(--footer-white);

    font-size:
        clamp(
            28px,
            2.7vw,
            38px
        );

    line-height: 1.13;

    letter-spacing: -1.2px;

    font-weight: 950;
}


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

.site-footer
.footer-cta-content p {

    max-width: 670px;

    margin: 0;

    color:
        var(--footer-muted) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 13px;

    line-height: 1.65;

    font-weight: 500;
}


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

.site-footer
.footer-cta-btn {

    position: relative;

    z-index: 3;

    min-height: 50px;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        6px
        7px
        6px
        18px;

    border-radius: 12px;

    background:
        var(--footer-white);

    color:
        var(--footer-navy);

    text-decoration: none;

    white-space: nowrap;

    font-size: 12px;

    font-weight: 850;

    box-shadow:
        0 15px 34px
        rgba(0,0,0,.18);

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


.site-footer
.footer-cta-btn > span {

    width: 36px;
    height: 36px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            var(--footer-blue),
            var(--footer-blue-dark)
        );

    color:
        var(--footer-white);

    transition:
        transform .45s ease;
}


.site-footer
.footer-cta-btn:hover {

    color:
        var(--footer-blue);

    transform:
        translateY(-3px);

    box-shadow:
        0 20px 42px
        rgba(0,0,0,.25);
}


.site-footer
.footer-cta-btn:hover span {

    transform:
        rotate(45deg);
}


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

.site-footer .footer-main {

    display: grid;

    grid-template-columns:
        minmax(260px,1.25fr)
        .72fr
        .95fr
        1.05fr;

    gap: 50px;

    padding-bottom: 52px;
}


/* =========================================================
   BRAND
========================================================= */

.site-footer
.footer-brand {

    max-width: 365px;
}


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

.site-footer
.footer-logo {

    display: inline-flex;

    align-items: center;

    margin-bottom: 20px;

    text-decoration: none;
}


.site-footer
.footer-brand img {

    display: block;

    width: 100%;

    max-width: 220px;

    padding:
        9px
        13px;

    border-radius: 11px;

    background:
        var(--footer-white);

    box-shadow:
        0 12px 32px
        rgba(0,0,0,.18);
}


/* =========================================================
   BRAND P
========================================================= */

.site-footer
.footer-brand > p {

    max-width: 345px;

    margin:
        0
        0
        23px;

    color:
        var(--footer-muted) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 12.5px;

    line-height: 1.72;

    font-weight: 500;
}


/* =========================================================
   SOCIAL
========================================================= */

.site-footer
.footer-social {

    display: flex;

    align-items: center;

    gap: 9px;
}


.site-footer
.footer-social a {

    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 10px;

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

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

    color:
        var(--footer-text);

    text-decoration: none;

    font-size: 14px;

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


.site-footer
.footer-social a:hover {

    background:
        var(--footer-blue);

    border-color:
        var(--footer-blue);

    color:
        var(--footer-white);

    transform:
        translateY(-4px)
        rotate(-4deg);

    box-shadow:
        0 12px 28px
        rgba(29,112,245,.25);
}


/* =========================================================
   COLUMN TITLE
========================================================= */

.site-footer
.footer-col h4 {

    position: relative;

    margin:
        2px
        0
        20px;

    padding-bottom: 10px;

    color:
        var(--footer-white);

    font-size: 15px;

    font-weight: 900;
}


.site-footer
.footer-col h4::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 30px;
    height: 2px;

    border-radius: 20px;

    background:
        var(--footer-blue);
}


/* =========================================================
   LINKS
========================================================= */

.site-footer
.footer-links {

    display: grid;

    gap: 11px;
}


.site-footer
.footer-links a {

    position: relative;

    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color:
        var(--footer-muted);

    text-decoration: none;

    font-size: 12px;

    line-height: 1.45;

    font-weight: 550;

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


.site-footer
.footer-links a::before {

    content: "";

    width: 5px;
    height: 5px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        rgba(143,160,181,.55);

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


.site-footer
.footer-links a:hover {

    color:
        var(--footer-white);

    transform:
        translateX(4px);
}


.site-footer
.footer-links a:hover::before {

    background:
        var(--footer-blue);

    transform:
        scale(1.5);
}


/* =========================================================
   CONTACT LIST
========================================================= */

.site-footer
.footer-contact-list {

    display: grid;

    gap: 14px;
}


/* =========================================================
   CONTACT ITEM
========================================================= */

.site-footer
.footer-contact-item {

    display: grid;

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

    align-items: center;

    gap: 11px;

    min-width: 0;
}


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

.site-footer
.footer-contact-icon {

    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    background:
        rgba(29,112,245,.13);

    border:
        1px solid
        rgba(29,112,245,.22);

    color:
        #7eaeff;

    font-size: 14px;

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


.site-footer
.footer-contact-item:hover
.footer-contact-icon {

    background:
        var(--footer-blue);

    color:
        var(--footer-white);

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


/* =========================================================
   CONTACT TEXT
========================================================= */

.site-footer
.footer-contact-text {

    min-width: 0;
}


.site-footer
.footer-contact-text span {

    display: block;

    margin-bottom: 2px;

    color:
        #708198;

    font-size: 8.5px;

    font-weight: 750;

    text-transform: uppercase;

    letter-spacing: .35px;
}


.site-footer
.footer-contact-text a,

.site-footer
.footer-contact-text p {

    display: block;

    width: 100%;

    max-width: 100%;

    margin: 0;

    color:
        var(--footer-text) !important;

    opacity: 1 !important;

    visibility: visible !important;

    text-decoration: none;

    font-size: 11.5px;

    line-height: 1.45;

    font-weight: 600;

    white-space: normal;

    overflow-wrap: anywhere;

    transition:
        color .3s ease;
}


.site-footer
.footer-contact-text a:hover {

    color:
        #83b0ff !important;
}


/* =========================================================
   NEWSLETTER
========================================================= */

.site-footer
.footer-newsletter {

    margin-top: 22px;

    padding:
        15px;

    border-radius: 14px;

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

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


.site-footer
.footer-newsletter h5 {

    margin:
        0
        0
        4px;

    color:
        var(--footer-white);

    font-size: 12px;

    font-weight: 850;
}


.site-footer
.footer-newsletter > p {

    margin:
        0
        0
        11px;

    color:
        var(--footer-muted) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 9px;

    line-height: 1.45;

    font-weight: 500;
}


/* =========================================================
   NEWSLETTER FORM
========================================================= */

.site-footer
.newsletter-form {

    display: flex;

    align-items: center;

    gap: 7px;
}


.site-footer
.newsletter-form input {

    width: 100%;

    min-width: 0;

    height: 43px;

    padding:
        0
        13px;

    border-radius: 10px;

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

    outline: none;

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

    color:
        var(--footer-white);

    font-family: inherit;

    font-size: 10.5px;

    transition:
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


.site-footer
.newsletter-form input::placeholder {

    color:
        #738399;
}


.site-footer
.newsletter-form input:focus {

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

    border-color:
        rgba(29,112,245,.55);

    box-shadow:
        0 0 0 3px
        rgba(29,112,245,.10);
}


/* =========================================================
   NEWSLETTER BUTTON
========================================================= */

.site-footer
.newsletter-form button {

    width: 43px;
    height: 43px;

    flex: 0 0 43px;

    display: grid;

    place-items: center;

    border: 0;

    outline: 0;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            var(--footer-blue),
            var(--footer-blue-dark)
        );

    color:
        var(--footer-white);

    cursor: pointer;

    font-size: 14px;

    box-shadow:
        0 10px 24px
        rgba(29,112,245,.18);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.site-footer
.newsletter-form button:hover {

    transform:
        translateX(3px)
        rotate(-5deg);

    box-shadow:
        0 14px 30px
        rgba(29,112,245,.28);
}


/* =========================================================
   BOTTOM
========================================================= */

.site-footer
.footer-bottom {

    position: relative;

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

    padding:
        21px
        0;
}


/* =========================================================
   BOTTOM INNER
========================================================= */

.site-footer
.footer-bottom-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


/* =========================================================
   COPYRIGHT
========================================================= */

.site-footer
.footer-bottom p {

    margin: 0;

    color:
        #76879d !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 10.5px;

    font-weight: 550;
}


/* =========================================================
   BOTTOM LINKS
========================================================= */

.site-footer
.footer-bottom-links {

    display: flex;

    align-items: center;

    gap: 18px;

    flex-wrap: wrap;
}


.site-footer
.footer-bottom-links a {

    color:
        #76879d;

    text-decoration: none;

    font-size: 10.5px;

    font-weight: 550;

    transition:
        color .3s ease;
}


.site-footer
.footer-bottom-links a:hover {

    color:
        #89b5ff;
}


/* =========================================================
   FORCE P VISIBILITY
========================================================= */

.site-footer p {

    visibility: visible !important;

    opacity: 1 !important;
}


/* =========================================================
   1050
========================================================= */

@media (max-width: 1050px) {

    .site-footer
    .footer-main {

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

        gap:
            42px
            55px;
    }


    .site-footer
    .footer-brand {

        max-width: 100%;
    }

}


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

@media (max-width: 991px) {

    .site-footer {

        padding:
            70px
            20px
            0;
    }


    .site-footer
    .footer-top-box {

        grid-template-columns: 1fr;

        gap: 22px;

        text-align: center;

        padding: 28px;
    }


    .site-footer
    .footer-top-box::before {

        left: 50%;

        transform:
            translateX(-50%);
    }


    .site-footer
    .footer-cta-content h2,

    .site-footer
    .footer-cta-content p {

        margin-left: auto;

        margin-right: auto;
    }


    .site-footer
    .footer-cta-btn {

        margin: 0 auto;
    }

}


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

@media (max-width: 767px) {

    .site-footer {

        padding:
            58px
            15px
            0;
    }


    .site-footer
    .footer-top-box {

        margin-bottom: 45px;

        padding:
            25px
            20px;

        border-radius: 20px;
    }


    .site-footer
    .footer-cta-content h2 {

        font-size:
            27px;

        letter-spacing:
            -.8px;
    }


    .site-footer
    .footer-main {

        grid-template-columns: 1fr;

        gap: 34px;

        padding-bottom: 42px;
    }


    .site-footer
    .footer-brand {

        max-width: 100%;
    }


    .site-footer
    .footer-brand img {

        max-width: 200px;
    }


    .site-footer
    .footer-bottom-inner {

        flex-direction: column;

        align-items: center;

        text-align: center;
    }


    .site-footer
    .footer-bottom-links {

        justify-content: center;
    }

}


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

@media (max-width: 480px) {

    .site-footer
    .footer-cta-btn {

        width: 100%;

        justify-content:
            space-between;
    }


    .site-footer
    .newsletter-form {

        flex-direction: row;
    }


    .site-footer
    .footer-bottom-links {

        gap:
            10px
            14px;
    }

}
/*---------------------------------about page start-------------------------------------------------*/
/* =========================================================
   ABOUT PREMIUM HERO - FULL WIDTH COMPLETE CSS
========================================================= */

.about-premium-hero {

    --aph-navy: #06152c;
    --aph-navy-two: #0a2346;

    --aph-blue: #1474ff;
    --aph-blue-dark: #075bd6;

    --aph-white: #ffffff;

    --aph-light: #f5f8fd;

    --aph-muted: #a8b5c8;

    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 0 0 72px;

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

    isolation: isolate;
}


.about-premium-hero *,
.about-premium-hero *::before,
.about-premium-hero *::after {
    box-sizing: border-box;
}


/* =========================================================
   FULL WIDTH SHELL
========================================================= */

.about-premium-shell {

    position: relative;

    width: 100%;

    max-width: none;

    margin: 0;

    padding-bottom: 86px;
}


/* =========================================================
   MAIN HERO
========================================================= */

.about-premium-main {

    position: relative;

    width: 100%;

    min-height: 660px;

    display: grid;

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

    align-items: stretch;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 37% 33%,
            rgba(20,116,255,.15),
            transparent 36%
        ),
        linear-gradient(
            125deg,
            #071a35 0%,
            #06152c 52%,
            #081c39 100%
        );

    box-shadow:
        0 30px 70px
        rgba(6,21,44,.12);
}


/* =========================================================
   BACKGROUND DECOR CIRCLE
========================================================= */

.about-premium-main::before {

    content: "";

    position: absolute;

    width: 560px;
    height: 560px;

    left: 28%;
    top: -340px;

    border-radius: 50%;

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

    pointer-events: none;
}


.about-premium-main::after {

    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    left: 5%;

    bottom: -170px;

    border-radius: 50%;

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

    pointer-events: none;
}


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

.about-premium-content {

    position: relative;

    z-index: 6;

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-width: 0;

    padding:
        72px
        70px
        125px
        max(6vw, 72px);
}


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

.about-premium-breadcrumb {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 38px;
}


.about-premium-breadcrumb a {

    display: inline-flex;

    align-items: center;

    gap: 8px;

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

    text-decoration: none;

    font-size: 12px;

    font-weight: 600;

    transition:
        color .3s ease;
}


.about-premium-breadcrumb a:hover {

    color:
        var(--aph-blue);
}


.about-premium-breadcrumb > i {

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

    font-size: 8px;
}


.about-premium-breadcrumb > span {

    color:
        var(--aph-blue);

    font-size: 12px;

    font-weight: 700;
}


/* =========================================================
   SMALL LABEL
========================================================= */

.about-premium-label {

    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 23px;

    padding:
        9px
        16px;

    border-radius: 50px;

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

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

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

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .2px;

    backdrop-filter:
        blur(12px);
}


.about-premium-label-dot {

    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--aph-blue);

    box-shadow:
        0 0 0 5px
        rgba(20,116,255,.12);

    animation:
        aphDotPulse
        3.8s
        ease-in-out
        infinite;
}


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

.about-premium-title {

    max-width: 690px;

    margin:
        0
        0
        22px;

    color:
        var(--aph-white);

    font-size:
        clamp(
            46px,
            4.5vw,
            68px
        );

    line-height: 1.06;

    letter-spacing:
        -2.6px;

    font-weight: 900;
}


.about-premium-title span {

    display: block;

    margin-top: 5px;

    color:
        var(--aph-blue);
}


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

.about-premium-description {

    max-width: 610px;

    margin:
        0
        0
        31px;

    color:
        var(--aph-muted) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 14px;

    line-height: 1.8;

    font-weight: 500;
}


/* =========================================================
   ACTIONS
========================================================= */

.about-premium-actions {

    display: flex;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;
}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.about-premium-primary {

    min-height: 54px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    padding:
        6px
        7px
        6px
        22px;

    border-radius: 50px;

    background:
        linear-gradient(
            135deg,
            var(--aph-blue),
            var(--aph-blue-dark)
        );

    color:
        var(--aph-white);

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;

    box-shadow:
        0 18px 38px
        rgba(20,116,255,.25);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.about-premium-primary > span {

    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        var(--aph-white);

    color:
        var(--aph-blue);

    transition:
        transform .4s ease;
}


.about-premium-primary:hover {

    color:
        var(--aph-white);

    transform:
        translateY(-3px);

    box-shadow:
        0 23px 48px
        rgba(20,116,255,.35);
}


.about-premium-primary:hover > span {

    transform:
        translateX(3px)
        rotate(-8deg);
}


/* =========================================================
   SECONDARY BUTTON
========================================================= */

.about-premium-secondary {

    min-height: 54px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    padding:
        0
        23px;

    border-radius: 50px;

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

    color:
        var(--aph-white);

    text-decoration: none;

    font-size: 13px;

    font-weight: 750;

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

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


.about-premium-secondary:hover {

    color:
        var(--aph-white);

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

    border-color:
        var(--aph-white);

    transform:
        translateY(-3px);
}


.about-premium-secondary i {

    transition:
        transform .3s ease;
}


.about-premium-secondary:hover i {

    transform:
        translateX(4px);
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.about-premium-visual {

    position: relative;

    min-width: 0;

    min-height: 660px;

    perspective:
        1400px;
}


/* =========================================================
   BLUE ARC
========================================================= */

.about-premium-blue-arc {

    position: absolute;

    z-index: 1;

    width: 730px;
    height: 730px;

    left: -105px;
    top: -35px;

    border-radius: 50%;

    border:
        22px solid
        var(--aph-blue);

    border-right-color:
        transparent;

    border-bottom-color:
        transparent;

    transform:
        rotate(-25deg);

    opacity: .96;

    pointer-events: none;
}


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

.about-premium-image-wrap {

    position: absolute;

    z-index: 2;

    top: 0;
    right: 0;
    bottom: 0;
    left: 42px;

    overflow: hidden;

    border-radius:
        48% 0 0 48%;

    background:
        var(--aph-navy);

    transform-style:
        preserve-3d;

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


.about-premium-image-wrap img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position:
        center;

    transform:
        scale(1.03);
}


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

.about-premium-image-shade {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(6,21,44,.22) 0%,
            rgba(6,21,44,.07) 30%,
            transparent 60%
        );

    pointer-events: none;
}


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

.about-premium-float {

    position: absolute;

    z-index: 7;

    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 225px;

    padding:
        14px
        17px;

    border-radius: 14px;

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

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

    box-shadow:
        0 20px 48px
        rgba(6,21,44,.20);

    backdrop-filter:
        blur(12px);
}


.about-premium-float-icon {

    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        var(--aph-blue);

    color:
        var(--aph-white);

    font-size: 18px;

    box-shadow:
        0 10px 25px
        rgba(20,116,255,.24);
}


.about-premium-float > div:last-child {

    min-width: 0;

    display: flex;

    flex-direction: column;
}


.about-premium-float strong {

    color:
        var(--aph-navy);

    font-size: 11.5px;

    line-height: 1.3;

    font-weight: 850;
}


.about-premium-float span {

    margin-top: 3px;

    color:
        #63748a;

    font-size: 8.5px;

    line-height: 1.4;
}


/* =========================================================
   FLOAT POSITIONS
========================================================= */

.about-premium-float-one {

    top: 90px;

    left: 58px;

    animation:
        aphFloatOne
        7s ease-in-out
        infinite;
}


.about-premium-float-two {

    right: 48px;

    bottom: 88px;

    animation:
        aphFloatTwo
        8s ease-in-out
        infinite;
}


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

.about-premium-dots {

    position: absolute;

    z-index: 6;

    display: grid;

    grid-template-columns:
        repeat(4,6px);

    gap: 7px;
}


.about-premium-dots span {

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--aph-blue);

    opacity: .65;
}


.about-premium-dots-one {

    top: 64px;

    right: 60px;
}


.about-premium-dots-two {

    grid-template-columns:
        repeat(3,6px);

    left: 5px;

    bottom: 82px;
}


/* =========================================================
   BOTTOM SERVICE STRIP
========================================================= */

.about-premium-services {

    position: absolute;

    z-index: 20;

    left:
        max(5vw, 70px);

    right:
        max(5vw, 70px);

    bottom: 0;

    min-height: 146px;

    display: grid;

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

    align-items: center;

    padding:
        22px
        20px;

    border-radius: 20px;

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

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

    box-shadow:
        0 24px 58px
        rgba(6,21,44,.12);

    backdrop-filter:
        blur(14px);
}


/* =========================================================
   SERVICE ITEM
========================================================= */

.about-premium-service {

    position: relative;

    display: flex;

    align-items: center;

    gap: 14px;

    min-width: 0;

    padding:
        4px
        24px;
}


.about-premium-service:not(:last-child)::after {

    content: "";

    position: absolute;

    right: 0;

    top: 50%;

    width: 1px;
    height: 68px;

    transform:
        translateY(-50%);

    background:
        rgba(6,21,44,.09);
}


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

.about-premium-service-icon {

    width: 54px;
    height: 54px;

    flex: 0 0 54px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    border:
        1px solid
        rgba(20,116,255,.26);

    background:
        #f7faff;

    color:
        var(--aph-blue);

    font-size: 21px;

    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease,
        box-shadow .35s ease;
}


.about-premium-service:hover
.about-premium-service-icon {

    background:
        var(--aph-blue);

    color:
        var(--aph-white);

    transform:
        translateY(-4px)
        rotate(-5deg);

    box-shadow:
        0 14px 30px
        rgba(20,116,255,.22);
}


/* =========================================================
   SERVICE TEXT
========================================================= */

.about-premium-service > div:last-child {

    min-width: 0;
}


.about-premium-service h4 {

    margin:
        0
        0
        5px;

    color:
        var(--aph-navy);

    font-size: 13.5px;

    line-height: 1.3;

    font-weight: 850;
}


.about-premium-service p {

    width: 100%;

    max-width: 190px;

    margin: 0;

    color:
        #687a90 !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 9.5px;

    line-height: 1.5;

    font-weight: 500;

    white-space: normal;

    overflow-wrap: anywhere;
}


/* =========================================================
   DEFAULT VISIBLE STATE
========================================================= */

.about-premium-content,
.about-premium-visual,
.about-premium-services {

    opacity: 1;

    visibility: visible;

    filter: none;

    transform: none;
}


/* =========================================================
   INITIAL ANIMATION
========================================================= */

.about-premium-hero.aph-ready
.about-premium-content {

    opacity: 0;

    filter:
        blur(14px);

    transform:
        perspective(1200px)
        translateY(35px)
        scale(.94)
        rotateX(9deg);
}


.about-premium-hero.aph-ready
.about-premium-visual {

    opacity: 0;

    filter:
        blur(14px);

    transform:
        perspective(1200px)
        scale(.90)
        rotateX(11deg)
        rotateY(7deg);
}


.about-premium-hero.aph-ready
.about-premium-services {

    opacity: 0;

    filter:
        blur(12px);

    transform:
        perspective(1000px)
        translateY(40px)
        scale(.94)
        rotateX(9deg);
}


/* =========================================================
   SHOW ANIMATION
========================================================= */

.about-premium-hero.aph-ready
.about-premium-content.aph-show,

.about-premium-hero.aph-ready
.about-premium-visual.aph-show,

.about-premium-hero.aph-ready
.about-premium-services.aph-show {

    opacity: 1;

    filter:
        blur(0);

    transform:
        perspective(1200px)
        translateY(0)
        scale(1)
        rotateX(0deg)
        rotateY(0deg);

    transition:
        opacity 1.15s ease,
        filter 1.4s ease,
        transform 1.7s
        cubic-bezier(.16,.8,.22,1);
}


/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes aphDotPulse {

    0%,
    100% {

        box-shadow:
            0 0 0 5px
            rgba(20,116,255,.12);
    }

    50% {

        box-shadow:
            0 0 0 9px
            rgba(20,116,255,.02);
    }

}


@keyframes aphFloatOne {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(-1deg);
    }

    50% {

        transform:
            translateY(-7px)
            rotate(1deg);
    }

}


@keyframes aphFloatTwo {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(1deg);
    }

    50% {

        transform:
            translateY(7px)
            rotate(-1deg);
    }

}


/* =========================================================
   VERY LARGE DESKTOP
========================================================= */

@media (min-width: 1600px) {

    .about-premium-main {

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


    .about-premium-content {

        padding-left:
            9vw;

        padding-right:
            90px;
    }


.about-premium-title {
    max-width: 754px;
    font-size: 48px;
}

    .about-premium-description {

        max-width: 650px;
    }


    .about-premium-services {

        left: 8vw;

        right: 8vw;
    }

}


/* =========================================================
   1200PX
========================================================= */

@media (max-width: 1200px) {

    .about-premium-main {

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


    .about-premium-content {

        padding-left: 45px;

        padding-right: 35px;
    }


    .about-premium-title {

        font-size:
            clamp(
                44px,
                4.5vw,
                60px
            );
    }


    .about-premium-services {

        left: 35px;

        right: 35px;
    }


    .about-premium-service {

        padding:
            4px
            15px;
    }

}


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

@media (max-width: 991px) {

    .about-premium-hero {

        padding-bottom: 55px;
    }


    .about-premium-shell {

        padding-bottom: 0;
    }


    .about-premium-main {

        min-height: auto;

        grid-template-columns: 1fr;
    }


    .about-premium-content {

        padding:
            60px
            30px
            55px;

        text-align: center;

        align-items: center;
    }


    .about-premium-breadcrumb {

        margin-bottom: 32px;

        justify-content: center;
    }


    .about-premium-description {

        margin-left: auto;

        margin-right: auto;
    }


    .about-premium-actions {

        justify-content: center;
    }


    .about-premium-visual {

        min-height: 500px;
    }


    .about-premium-image-wrap {

        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        border-radius:
            70px 70px 0 0;
    }


    .about-premium-blue-arc {

        display: none;
    }


    .about-premium-float-one {

        left: 30px;
    }


    .about-premium-float-two {

        right: 30px;
    }


    .about-premium-services {

        position: relative;

        left: auto;
        right: auto;
        bottom: auto;

        margin:
            18px
            20px
            0;

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

        gap:
            18px
            0;
    }


    .about-premium-service:nth-child(2)::after {

        display: none;
    }

}


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

@media (max-width: 767px) {

    .about-premium-content {

        padding:
            48px
            18px
            43px;
    }


    .about-premium-label {

        font-size: 9px;
    }


    .about-premium-title {

        font-size:
            clamp(
                36px,
                10.5vw,
                48px
            );

        letter-spacing:
            -1.5px;
    }


    .about-premium-description {

        font-size: 13px;

        line-height: 1.7;
    }


    .about-premium-actions {

        width: 100%;

        flex-direction: column;
    }


    .about-premium-primary,
    .about-premium-secondary {

        width: 100%;

        justify-content:
            space-between;
    }


    .about-premium-visual {

        min-height: 390px;
    }


    .about-premium-image-wrap {

        min-height: 390px;
    }


    .about-premium-float {

        min-width: 190px;

        padding:
            10px
            12px;
    }


    .about-premium-float-one {

        top: 35px;

        left: 15px;
    }


    .about-premium-float-two {

        right: 15px;

        bottom: 35px;
    }


    .about-premium-services {

        grid-template-columns: 1fr;

        margin:
            15px
            15px
            0;

        padding:
            14px
            20px;
    }


    .about-premium-service {

        padding:
            14px
            0;
    }


    .about-premium-service:not(:last-child)::after {

        width: 100%;

        height: 1px;

        left: 0;

        right: auto;

        top: auto;

        bottom: 0;

        transform: none;
    }

}


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

@media (max-width: 480px) {

    .about-premium-title {

        font-size: 35px;
    }


    .about-premium-visual {

        min-height: 330px;
    }


    .about-premium-image-wrap {

        min-height: 330px;
    }


    .about-premium-float,
    .about-premium-dots {

        display: none;
    }


    .about-premium-services {

        margin-left: 10px;

        margin-right: 10px;
    }


    .about-premium-service-icon {

        width: 48px;

        height: 48px;

        flex-basis: 48px;

        font-size: 18px;
    }

}


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

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

    .about-premium-content,
    .about-premium-visual,
    .about-premium-services {

        opacity: 1 !important;

        visibility: visible !important;

        filter: none !important;

        transform: none !important;

        transition: none !important;
    }


    .about-premium-float,
    .about-premium-label-dot {

        animation: none !important;
    }

}

/*------------------------------------------------------------------------------------*/
/* =========================================================
   WHO WE ARE / OUR STORY
========================================================= */

.itech-story-section {

    --is-navy: #06152c;
    --is-navy-soft: #0a2346;

    --is-blue: #1474ff;
    --is-blue-dark: #075bd6;

    --is-white: #ffffff;
    --is-soft: #edf4ff;

    --is-muted: #66758a;

    position: relative;

    width: 100%;

    padding: 95px 20px 100px;

    overflow: hidden;

    isolation: isolate;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7faff 52%,
            #eef4ff 100%
        );
}


.itech-story-section *,
.itech-story-section *::before,
.itech-story-section *::after {
    box-sizing: border-box;
}


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

.itech-story-section::before {

    content: "";

    position: absolute;

    z-index: -2;

    width: 430px;
    height: 430px;

    right: -230px;
    top: -190px;

    border-radius: 50%;

    background:
        rgba(20,116,255,.07);
}


.itech-story-section::after {

    content: "";

    position: absolute;

    z-index: -2;

    width: 300px;
    height: 300px;

    left: -170px;
    bottom: -150px;

    border-radius: 50%;

    background:
        rgba(6,21,44,.04);
}


/* =========================================================
   CONTAINER
========================================================= */

.itech-story-container {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1240px;

    margin: 0 auto;
}


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

.itech-story-grid {

    display: grid;

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

    align-items: center;

    gap: 75px;

    perspective: 1400px;
}


/* =========================================================
   LEFT VISUAL
========================================================= */

.itech-story-visual {

    position: relative;

    width: 100%;

    min-height: 560px;

    perspective: 1400px;
}


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

.itech-story-image-wrap {

    position: relative;

    width: calc(100% - 55px);

    height: 500px;

    margin-left: auto;

    overflow: hidden;

    border-radius:
        26px
        90px
        26px
        26px;

    background:
        var(--is-navy);

    box-shadow:
        0 34px 70px
        rgba(6,21,44,.20);

    transform-style:
        preserve-3d;

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


.itech-story-image-wrap img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;
}


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

.itech-story-image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(6,21,44,0) 35%,
            rgba(6,21,44,.08) 58%,
            rgba(6,21,44,.90) 100%
        );
}


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

.itech-story-image-label {

    position: absolute;

    z-index: 3;

    left: 26px;
    right: 26px;
    bottom: 26px;
}


.itech-story-image-label span {

    display: inline-flex;

    margin-bottom: 9px;

    padding: 6px 10px;

    border-radius: 8px;

    background:
        var(--is-blue);

    color:
        var(--is-white);

    font-size: 9px;

    font-weight: 800;
}


.itech-story-image-label h3 {

    max-width: 360px;

    margin: 0;

    color:
        var(--is-white);

    font-size: 24px;

    line-height: 1.16;

    letter-spacing: -.7px;

    font-weight: 900;
}


/* =========================================================
   SIDE ACCENT
========================================================= */

.itech-story-side-accent {

    position: absolute;

    z-index: 1;

    left: 0;
    top: 48px;

    width: 9px;
    height: 330px;

    border-radius: 20px;

    background:
        linear-gradient(
            180deg,
            var(--is-blue),
            var(--is-blue-dark)
        );

    box-shadow:
        0 14px 32px
        rgba(20,116,255,.24);
}


/* =========================================================
   FLOATING NOTE
========================================================= */

.itech-story-floating-note {

    position: absolute;

    z-index: 6;

    left: 0;
    bottom: 18px;

    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        12px
        15px;

    border-radius: 14px;

    background:
        var(--is-white);

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

    box-shadow:
        0 18px 42px
        rgba(6,21,44,.13);

    animation:
        itechStoryFloat
        7s ease-in-out
        infinite;
}


.itech-story-note-icon {

    width: 41px;
    height: 41px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 11px;

    background:
        var(--is-blue);

    color:
        var(--is-white);

    font-size: 16px;
}


.itech-story-floating-note > div:last-child {

    display: flex;

    flex-direction: column;
}


.itech-story-floating-note small {

    color:
        var(--is-muted);

    font-size: 8px;
}


.itech-story-floating-note strong {

    margin-top: 2px;

    color:
        var(--is-navy);

    font-size: 10.5px;

    font-weight: 850;
}


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

.itech-story-content {

    width: 100%;

    max-width: 570px;
}


/* =========================================================
   TAG
========================================================= */

.itech-story-tag {

    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 18px;

    padding:
        8px
        14px
        8px
        9px;

    border-radius: 50px;

    background:
        var(--is-blue);

    color:
        var(--is-white);

    font-size: 10.5px;

    font-weight: 850;

    box-shadow:
        0 9px 22px
        rgba(20,116,255,.18);
}


.itech-story-tag span {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--is-white);

    box-shadow:
        0 0 0 5px
        rgba(255,255,255,.15);
}


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

.itech-story-content h2 {

    max-width: 550px;

    margin:
        0
        0
        19px;

    color:
        var(--is-navy);

    font-size:
        clamp(
            39px,
            3.6vw,
            38px
        );

    line-height: 1.08;

    letter-spacing:
        -2px;

    font-weight: 950;
}


.itech-story-content h2 span {

    display: block;

    margin-top: 5px;

    color:
        var(--is-blue);
}


/* =========================================================
   LEAD TEXT
========================================================= */

.itech-story-lead {

    max-width: 550px;

    margin:
        0
        0
        14px;

    color:
        var(--is-navy) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 14.5px;

    line-height: 1.72;

    font-weight: 650;
}


/* =========================================================
   SECOND TEXT
========================================================= */

.itech-story-text {

    max-width: 550px;

    margin:
        0
        0
        25px;

    color:
        var(--is-muted) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 13px;

    line-height: 1.7;

    font-weight: 500;
}


/* =========================================================
   POINTS
========================================================= */

.itech-story-points {

    display: grid;

    gap: 12px;

    margin-bottom: 28px;
}


/* =========================================================
   POINT ITEM
========================================================= */

.itech-story-point {

    display: grid;

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

    align-items: flex-start;

    gap: 11px;

    padding:
        12px
        0;

    border-bottom:
        1px solid
        rgba(6,21,44,.07);
}


.itech-story-point:last-child {

    border-bottom: 0;
}


/* CHECK */

.itech-story-point > span {

    width: 30px;
    height: 30px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    background:
        var(--is-soft);

    color:
        var(--is-blue);

    font-size: 11px;

    font-weight: 900;
}


/* POINT TEXT */

.itech-story-point > div {

    min-width: 0;
}


.itech-story-point h4 {

    margin:
        0
        0
        4px;

    color:
        var(--is-navy);

    font-size: 13px;

    font-weight: 900;
}


.itech-story-point p {

    width: 100%;

    margin: 0;

    color:
        var(--is-muted) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 10.5px;

    line-height: 1.55;

    font-weight: 500;
}


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

.itech-story-btn {

    min-height: 52px;

    display: inline-flex;

    align-items: center;

    gap: 11px;

    padding:
        6px
        7px
        6px
        20px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--is-blue),
            var(--is-blue-dark)
        );

    color:
        var(--is-white);

    text-decoration: none;

    font-size: 12.5px;

    font-weight: 850;

    box-shadow:
        0 15px 31px
        rgba(20,116,255,.23);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.itech-story-btn > span {

    width: 37px;
    height: 37px;

    display: grid;

    place-items: center;

    border-radius: 9px;

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

    transition:
        transform .4s ease;
}


.itech-story-btn:hover {

    color:
        var(--is-white);

    transform:
        translateY(-3px);

    box-shadow:
        0 21px 42px
        rgba(20,116,255,.31);
}


.itech-story-btn:hover span {

    transform:
        rotate(45deg);
}


/* =========================================================
   DEFAULT
========================================================= */

.itech-story-visual,
.itech-story-content {

    opacity: 1;

    visibility: visible;

    filter: none;

    transform: none;
}


/* =========================================================
   INITIAL ANIMATION
========================================================= */

.itech-story-section.itech-story-ready
.itech-story-visual {

    opacity: 0;

    filter:
        blur(14px);

    transform:
        perspective(1200px)
        scale(.91)
        rotateX(10deg)
        rotateY(-7deg);
}


.itech-story-section.itech-story-ready
.itech-story-content {

    opacity: 0;

    filter:
        blur(14px);

    transform:
        perspective(1200px)
        translateY(38px)
        scale(.94)
        rotateX(9deg);
}


/* =========================================================
   SHOW
========================================================= */

.itech-story-section.itech-story-ready
.itech-story-visual.itech-story-show,

.itech-story-section.itech-story-ready
.itech-story-content.itech-story-show {

    opacity: 1;

    filter:
        blur(0);

    transform:
        perspective(1200px)
        translateY(0)
        scale(1)
        rotateX(0deg)
        rotateY(0deg);

    transition:
        opacity 1.15s ease,
        filter 1.4s ease,
        transform 1.7s
        cubic-bezier(.16,.8,.22,1);
}


/* =========================================================
   FLOAT
========================================================= */

@keyframes itechStoryFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-1deg);
    }

    50% {
        transform:
            translateY(-7px)
            rotate(1deg);
    }

}


/* =========================================================
   1100
========================================================= */

@media (max-width: 1100px) {

    .itech-story-grid {

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

        gap: 48px;
    }


    .itech-story-image-wrap {

        height: 460px;
    }

}


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

@media (max-width: 991px) {

    .itech-story-section {

        padding:
            75px
            20px
            82px;
    }


    .itech-story-grid {

        grid-template-columns: 1fr;

        gap: 55px;
    }


    .itech-story-visual {

        max-width: 650px;

        min-height: 520px;

        margin: 0 auto;
    }


    .itech-story-content {

        max-width: 650px;

        margin: 0 auto;

        text-align: center;
    }


    .itech-story-tag {

        margin-left: auto;
        margin-right: auto;
    }


    .itech-story-content h2,
    .itech-story-lead,
    .itech-story-text {

        margin-left: auto;
        margin-right: auto;
    }


    .itech-story-points {

        text-align: left;
    }

}


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

@media (max-width: 767px) {

    .itech-story-section {

        padding:
            58px
            15px
            68px;
    }


    .itech-story-visual {

        min-height: auto;
    }


    .itech-story-image-wrap {

        width: 100%;

        height: 380px;

        border-radius:
            22px
            58px
            22px
            22px;
    }


    .itech-story-side-accent {

        display: none;
    }


    .itech-story-floating-note {

        left: 14px;

        bottom: 14px;
    }


    .itech-story-content h2 {

        font-size:
            clamp(
                31px,
                9vw,
                39px
            );

        letter-spacing:
            -1.3px;
    }


    .itech-story-lead {

        font-size: 13.5px;
    }


    .itech-story-btn {

        width: 100%;

        justify-content:
            space-between;
    }

}


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

@media (max-width: 480px) {

    .itech-story-image-wrap {

        height: 320px;
    }


    .itech-story-image-label {

        left: 18px;
        right: 18px;
        bottom: 18px;
    }


    .itech-story-image-label h3 {

        font-size: 20px;
    }


    .itech-story-floating-note {

        display: none;
    }

}


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

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

    .itech-story-visual,
    .itech-story-content {

        opacity: 1 !important;

        visibility: visible !important;

        filter: none !important;

        transform: none !important;

        transition: none !important;
    }


    .itech-story-floating-note {

        animation: none !important;
    }

}

/* =========================================================
   MISSION & VISION SECTION
========================================================= */

.itech-mission-section {

    --im-navy: #06152c;
    --im-navy-two: #0b2447;

    --im-blue: #1474ff;
    --im-blue-dark: #075bd6;

    --im-white: #ffffff;

    --im-soft: #edf4ff;

    --im-muted: #69798e;

    position: relative;

    width: 100%;

    padding: 92px 20px 105px;

    overflow: hidden;

    isolation: isolate;

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


.itech-mission-section *,
.itech-mission-section *::before,
.itech-mission-section *::after {
    box-sizing: border-box;
}


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

.itech-mission-section::before {

    content: "";

    position: absolute;

    z-index: -2;

    width: 520px;
    height: 520px;

    right: -300px;
    top: -240px;

    border-radius: 50%;

    background:
        rgba(20,116,255,.075);
}


.itech-mission-section::after {

    content: "";

    position: absolute;

    z-index: -2;

    width: 340px;
    height: 340px;

    left: -200px;
    bottom: -160px;

    border-radius: 50%;

    background:
        rgba(6,21,44,.04);
}


/* =========================================================
   CONTAINER
========================================================= */

.itech-mission-container {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1240px;

    margin: 0 auto;
}


/* =========================================================
   HEAD
========================================================= */

.itech-mission-head {

    max-width: 790px;

    margin: 0 auto 44px;

    text-align: center;
}


/* TAG */

.itech-mission-tag {

    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin: 0 auto 16px;

    padding:
        8px 14px 8px 9px;

    border-radius: 50px;

    background:
        var(--im-blue);

    color:
        var(--im-white);

    font-size: 10.5px;

    font-weight: 850;

    box-shadow:
        0 9px 22px
        rgba(20,116,255,.18);
}


.itech-mission-tag span {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--im-white);

    box-shadow:
        0 0 0 5px
        rgba(255,255,255,.15);

    animation:
        missionPulse
        4s ease-in-out
        infinite;
}


/* TITLE */

.itech-mission-head h2 {

    max-width: 760px;

    margin: 0 auto 15px;

    color:
        var(--im-navy);

    font-size:
        clamp(39px,3.6vw,51px);

    line-height: 1.08;

    letter-spacing: -2px;

    font-weight: 950;
}


.itech-mission-head h2 span {

    display: block;

    margin-top: 5px;

    color:
        var(--im-blue);
}


/* DESCRIPTION */

.itech-mission-head > p {

    max-width: 690px;

    margin: 0 auto;

    color:
        var(--im-muted) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 14px;

    line-height: 1.72;

    font-weight: 500;
}


/* =========================================================
   MAIN PANEL
========================================================= */

.itech-mission-panel {

    position: relative;

    display: grid;

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

    min-height: 520px;

    overflow: hidden;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            var(--im-navy) 0%,
            #081d3a 48%,
            var(--im-navy-two) 100%
        );

    box-shadow:
        0 35px 75px
        rgba(6,21,44,.18);

    perspective: 1400px;
}


/* =========================================================
   CENTER DIVIDER
========================================================= */

.itech-mission-panel::before {

    content: "";

    position: absolute;

    z-index: 2;

    top: 55px;
    bottom: 55px;
    left: 50%;

    width: 1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255,255,255,.14),
            rgba(20,116,255,.35),
            rgba(255,255,255,.14),
            transparent
        );
}


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

.itech-mission-center {

    position: absolute;

    z-index: 6;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%,-50%);
}


.itech-mission-center-ring {

    width: 74px;
    height: 74px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(6,21,44,.96);

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

    box-shadow:
        0 0 0 10px
        rgba(20,116,255,.07);
}


.itech-mission-center-icon {

    width: 50px;
    height: 50px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--im-blue),
            var(--im-blue-dark)
        );

    color:
        var(--im-white);

    font-size: 20px;

    box-shadow:
        0 12px 28px
        rgba(20,116,255,.28);

    animation:
        missionCenterFloat
        5s ease-in-out
        infinite;
}


/* =========================================================
   BLOCK
========================================================= */

.itech-mission-block {

    position: relative;

    z-index: 3;

    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        58px
        70px;

    transform-style:
        preserve-3d;
}


.itech-mission-left {

    padding-right: 85px;
}


.itech-mission-right {

    padding-left: 85px;
}


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

.itech-mission-number {

    position: absolute;

    top: 35px;
    right: 40px;

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

    font-size: 70px;

    line-height: 1;

    font-weight: 950;

    pointer-events: none;
}


.itech-mission-right
.itech-mission-number {

    left: 40px;
    right: auto;
}


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

.itech-mission-icon {

    width: 55px;
    height: 55px;

    display: grid;

    place-items: center;

    margin-bottom: 18px;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            var(--im-blue),
            var(--im-blue-dark)
        );

    color:
        var(--im-white);

    font-size: 21px;

    box-shadow:
        0 13px 29px
        rgba(20,116,255,.24);

    transform:
        translateZ(26px);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}


.itech-mission-block:hover
.itech-mission-icon {

    transform:
        translateZ(45px)
        rotate(-7deg)
        scale(1.08);

    box-shadow:
        0 18px 38px
        rgba(20,116,255,.34);
}


/* =========================================================
   LABEL
========================================================= */

.itech-mission-label {

    width: fit-content;

    display: inline-flex;

    margin-bottom: 11px;

    padding:
        6px
        10px;

    border-radius: 7px;

    background:
        rgba(20,116,255,.13);

    border:
        1px solid
        rgba(20,116,255,.21);

    color:
        #8db9ff;

    font-size: 9px;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .5px;
}


/* =========================================================
   BLOCK TITLE
========================================================= */

.itech-mission-block h3 {

    max-width: 430px;

    margin:
        0
        0
        15px;

    color:
        var(--im-white);

    font-size:
        clamp(27px,2.2vw,34px);

    line-height: 1.13;

    letter-spacing: -1px;

    font-weight: 900;
}


.itech-mission-block h3 span {

    display: block;

    margin-top: 4px;

    color:
        #75a8ff;
}


/* =========================================================
   BLOCK TEXT
========================================================= */

.itech-mission-block > p {

    width: 100%;

    max-width: 450px;

    margin:
        0
        0
        24px;

    color:
        rgba(255,255,255,.64) !important;

    opacity: 1 !important;

    visibility: visible !important;

    white-space: normal;

    overflow-wrap: anywhere;

    font-size: 12.5px;

    line-height: 1.72;

    font-weight: 500;
}


/* =========================================================
   POINTS
========================================================= */

.itech-mission-points {

    display: grid;

    gap: 9px;
}


.itech-mission-points > div {

    display: flex;

    align-items: center;

    gap: 9px;

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

    font-size: 10.5px;

    line-height: 1.45;

    font-weight: 600;
}


.itech-mission-points i {

    width: 24px;
    height: 24px;

    flex: 0 0 24px;

    display: grid;

    place-items: center;

    border-radius: 7px;

    background:
        rgba(20,116,255,.14);

    color:
        #83b1ff;

    font-size: 9px;
}


/* =========================================================
   HOVER PANEL LIGHT
========================================================= */

.itech-mission-block::before {

    content: "";

    position: absolute;

    z-index: -1;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background:
        rgba(20,116,255,.08);

    opacity: 0;

    transition:
        opacity .5s ease,
        transform .5s ease;
}


.itech-mission-left::before {

    left: -160px;
    bottom: -130px;
}


.itech-mission-right::before {

    right: -160px;
    top: -130px;
}


.itech-mission-block:hover::before {

    opacity: 1;

    transform:
        scale(1.2);
}


/* =========================================================
   SAFE DEFAULT
========================================================= */

.itech-mission-head,
.itech-mission-block {

    opacity: 1;

    visibility: visible;

    filter: none;

    transform: none;
}


/* =========================================================
   INITIAL SCROLL STATE
========================================================= */

.itech-mission-section.itech-mission-ready
.itech-mission-head {

    opacity: 0;

    filter:
        blur(13px);

    transform:
        perspective(1100px)
        translateY(30px)
        scale(.95)
        rotateX(8deg);
}


.itech-mission-section.itech-mission-ready
.itech-mission-left {

    opacity: 0;

    filter:
        blur(14px);

    transform:
        perspective(1100px)
        scale(.90)
        rotateX(11deg)
        rotateY(-8deg);
}


.itech-mission-section.itech-mission-ready
.itech-mission-right {

    opacity: 0;

    filter:
        blur(14px);

    transform:
        perspective(1100px)
        scale(.90)
        rotateX(11deg)
        rotateY(8deg);
}


/* =========================================================
   SHOW
========================================================= */

.itech-mission-section.itech-mission-ready
.itech-mission-head.itech-mission-show,

.itech-mission-section.itech-mission-ready
.itech-mission-block.itech-mission-show {

    opacity: 1;

    filter: blur(0);

    transform:
        perspective(1100px)
        translateY(0)
        scale(1)
        rotateX(0deg)
        rotateY(0deg);

    transition:
        opacity 1.1s ease,
        filter 1.4s ease,
        transform 1.7s
        cubic-bezier(.16,.8,.22,1);
}


/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes missionPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 5px
            rgba(255,255,255,.15);
    }

    50% {
        box-shadow:
            0 0 0 9px
            rgba(255,255,255,.03);
    }

}


@keyframes missionCenterFloat {

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

    50% {
        transform:
            translateY(-4px)
            rotate(-5deg);
    }

}


/* =========================================================
   1100
========================================================= */

@media (max-width: 1100px) {

    .itech-mission-block {

        padding:
            50px
            55px;
    }


    .itech-mission-left {

        padding-right: 72px;
    }


    .itech-mission-right {

        padding-left: 72px;
    }

}


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

@media (max-width: 991px) {

    .itech-mission-section {

        padding:
            75px
            20px
            85px;
    }


    .itech-mission-panel {

        grid-template-columns: 1fr;

        min-height: auto;
    }


    .itech-mission-panel::before {

        top: 50%;
        bottom: auto;

        left: 45px;
        right: 45px;

        width: auto;
        height: 1px;

        transform: none;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(20,116,255,.30),
                transparent
            );
    }


    .itech-mission-center {

        left: 50%;
        top: 50%;
    }


    .itech-mission-block {

        min-height: 430px;

        padding:
            55px
            60px;
    }


    .itech-mission-left,
    .itech-mission-right {

        padding-left: 60px;
        padding-right: 60px;
    }


    .itech-mission-right
    .itech-mission-number {

        left: auto;
        right: 40px;
    }

}


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

@media (max-width: 767px) {

    .itech-mission-section {

        padding:
            58px
            15px
            68px;
    }


    .itech-mission-head {

        margin-bottom: 32px;
    }


    .itech-mission-head h2 {

        font-size:
            clamp(31px,9vw,39px);

        letter-spacing: -1.3px;
    }


    .itech-mission-head > p {

        font-size: 13.5px;
    }


    .itech-mission-panel {

        border-radius: 22px;
    }


    .itech-mission-center {

        display: none;
    }


    .itech-mission-panel::before {

        left: 25px;
        right: 25px;
    }


    .itech-mission-block {

        min-height: auto;

        padding:
            42px
            25px;
    }


    .itech-mission-left,
    .itech-mission-right {

        padding-left: 25px;
        padding-right: 25px;
    }


    .itech-mission-number {

        top: 25px;
        right: 25px;

        font-size: 55px;
    }


    .itech-mission-right
    .itech-mission-number {

        right: 25px;
    }


    .itech-mission-block h3 {

        font-size: 27px;
    }

}


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

@media (max-width: 480px) {

    .itech-mission-block {

        padding:
            37px
            20px;
    }


    .itech-mission-icon {

        width: 50px;
        height: 50px;

        font-size: 19px;
    }


    .itech-mission-number {

        font-size: 48px;
    }

}


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

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

    .itech-mission-head,
    .itech-mission-block {

        opacity: 1 !important;

        visibility: visible !important;

        filter: none !important;

        transform: none !important;

        transition: none !important;
    }


    .itech-mission-tag span,
    .itech-mission-center-icon {

        animation: none !important;
    }

}

/*-----------------------------------service page*------------------------------------------------*/
/* =========================================================
   SERVICES HERO WITH FORM
========================================================= */

.itech-service-form-hero {

    --isfh-navy: #06152c;
    --isfh-navy-2: #0b2345;

    --isfh-blue: #1474ff;
    --isfh-blue-dark: #075bd6;

    --isfh-white: #ffffff;

    --isfh-muted: #a5b2c4;
    --isfh-form-muted: #687a90;

    --isfh-soft: #edf4ff;

    position: relative;

    width: 100%;

    min-height: 650px;

    display: flex;

    align-items: center;

    overflow: hidden;

    isolation: isolate;

    background:
        radial-gradient(
            circle at 73% 18%,
            rgba(20,116,255,.20),
            transparent 27%
        ),
        radial-gradient(
            circle at 20% 100%,
            rgba(20,116,255,.08),
            transparent 31%
        ),
        linear-gradient(
            120deg,
            #06152c 0%,
            #071a35 51%,
            #0a2346 100%
        );
}


.itech-service-form-hero *,
.itech-service-form-hero *::before,
.itech-service-form-hero *::after {
    box-sizing: border-box;
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.itech-service-form-hero::before {

    content: "";

    position: absolute;

    width: 620px;
    height: 620px;

    right: -300px;
    top: -360px;

    border-radius: 50%;

    border:
        1px solid
        rgba(20,116,255,.18);

    pointer-events: none;
}


.itech-service-form-hero::after {

    content: "";

    position: absolute;

    width: 340px;
    height: 340px;

    left: -190px;
    bottom: -180px;

    border-radius: 50%;

    background:
        rgba(20,116,255,.055);

    pointer-events: none;
}


/* =========================================================
   INNER
========================================================= */

.itech-service-form-inner {

    position: relative;

    z-index: 3;

    width: 100%;

    max-width: 1450px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0,.9fr)
        minmax(500px,1.1fr);

    align-items: center;

    gap: 70px;

    padding:
        70px
        max(5vw,60px)
        75px;

    perspective: 1500px;
}


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

.itech-service-form-content {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 610px;
}


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

.itech-service-form-breadcrumb {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 28px;
}


.itech-service-form-breadcrumb a {

    display: inline-flex;

    align-items: center;

    gap: 7px;

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

    text-decoration: none;

    font-size: 10.5px;

    font-weight: 600;

    transition:
        color .3s ease;
}


.itech-service-form-breadcrumb a:hover {

    color:
        var(--isfh-blue);
}


.itech-service-form-breadcrumb > i {

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

    font-size: 8px;
}


.itech-service-form-breadcrumb > span {

    color:
        #78aaff;

    font-size: 10.5px;

    font-weight: 750;
}


/* =========================================================
   LABEL
========================================================= */

.itech-service-form-label {

    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 20px;

    padding:
        8px
        14px;

    border-radius: 50px;

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

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

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

    font-size: 9.5px;

    font-weight: 800;

    backdrop-filter:
        blur(10px);
}


.itech-service-form-label span {

    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--isfh-blue);

    box-shadow:
        0 0 0 5px
        rgba(20,116,255,.13);

    animation:
        serviceFormPulse
        4s ease-in-out
        infinite;
}


/* =========================================================
   H1 - SMALLER
========================================================= */

.itech-service-form-content h1 {

    max-width: 600px;

    margin:
        0
        0
        20px;

    color:
        var(--isfh-white);

    font-size:
        clamp(
            40px,
            3.8vw,
            56px
        );

    line-height: 1.06;

    letter-spacing:
        -2px;

    font-weight: 950;
}


.itech-service-form-content h1 span {

    display: block;

    margin-top: 5px;

    color:
        var(--isfh-blue);
}


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

.itech-service-form-description {

    max-width: 570px;

    margin:
        0
        0
        25px;

    color:
        var(--isfh-muted) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 13.5px;

    line-height: 1.75;

    font-weight: 500;
}


/* =========================================================
   POINTS
========================================================= */

.itech-service-form-points {

    display: grid;

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

    gap:
        10px
        18px;

    max-width: 560px;

    margin-bottom: 27px;
}


.itech-service-form-points > div {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 8px;

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

    font-size: 10.5px;

    line-height: 1.4;

    font-weight: 650;
}


.itech-service-form-points > div > span {

    width: 24px;
    height: 24px;

    flex: 0 0 24px;

    display: grid;

    place-items: center;

    border-radius: 7px;

    background:
        rgba(20,116,255,.14);

    color:
        #84b1ff;

    font-size: 8px;
}


/* =========================================================
   BOTTOM HELP
========================================================= */

.itech-service-form-bottom {

    display: flex;

    align-items: center;

    gap: 11px;

    max-width: 445px;

    padding-top: 19px;

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


.itech-service-form-bottom-icon {

    width: 40px;
    height: 40px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 11px;

    background:
        var(--isfh-blue);

    color:
        var(--isfh-white);

    font-size: 15px;

    box-shadow:
        0 10px 23px
        rgba(20,116,255,.22);
}


.itech-service-form-bottom > div:last-child {

    display: flex;

    flex-direction: column;
}


.itech-service-form-bottom small {

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

    font-size: 8px;
}


.itech-service-form-bottom strong {

    margin-top: 2px;

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

    font-size: 10.5px;

    font-weight: 800;
}


/* =========================================================
   RIGHT SIDE
========================================================= */

.itech-service-form-side {

    position: relative;

    width: 100%;

    max-width: 610px;

    margin-left: auto;

    perspective:
        1500px;
}


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

.itech-service-form-card {

    position: relative;

    z-index: 4;

    width: 100%;

    overflow: hidden;

    padding:
        29px
        30px
        27px;

    border-radius: 25px;

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

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

    box-shadow:
        0 32px 75px
        rgba(0,0,0,.24);

    transform-style:
        preserve-3d;

    backdrop-filter:
        blur(18px);

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


/* =========================================================
   BLUE TOP ACCENT
========================================================= */

.itech-service-form-card::before {

    content: "";

    position: absolute;

    z-index: 3;

    top: 0;
    left: 30px;

    width: 115px;
    height: 4px;

    border-radius:
        0 0
        15px 15px;

    background:
        linear-gradient(
            90deg,
            var(--isfh-blue),
            var(--isfh-blue-dark)
        );
}


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

.itech-service-form-card-glow {

    position: absolute;

    z-index: 0;

    width: 240px;
    height: 240px;

    right: -130px;
    top: -125px;

    border-radius: 50%;

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

    pointer-events: none;
}


/* =========================================================
   FORM HEAD
========================================================= */

.itech-service-form-card-head {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 12px;
}


.itech-service-form-card-icon {

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            var(--isfh-blue),
            var(--isfh-blue-dark)
        );

    color:
        var(--isfh-white);

    font-size: 18px;

    box-shadow:
        0 11px 25px
        rgba(20,116,255,.22);

    transform:
        translateZ(25px);
}


.itech-service-form-card-head > div:last-child {

    min-width: 0;
}


.itech-service-form-card-head span {

    display: block;

    margin-bottom: 3px;

    color:
        var(--isfh-blue);

    font-size: 8.5px;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .55px;
}


.itech-service-form-card-head h3 {

    margin: 0;

    color:
        var(--isfh-navy);

    font-size: 24px;

    line-height: 1.15;

    letter-spacing: -.7px;

    font-weight: 900;
}


/* =========================================================
   FORM INTRO
========================================================= */

.itech-service-form-card-intro {

    position: relative;

    z-index: 2;

    max-width: 485px;

    margin:
        0
        0
        21px;

    color:
        var(--isfh-form-muted) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 10.5px;

    line-height: 1.58;

    font-weight: 500;
}


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

.itech-service-form-card form {

    position: relative;

    z-index: 2;

    display: grid;

    gap: 14px;
}


/* =========================================================
   FORM ROW
========================================================= */

.itech-service-form-row {

    display: grid;

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

    gap: 12px;
}


/* =========================================================
   FIELD
========================================================= */

.itech-service-field {

    min-width: 0;
}


.itech-service-field label {

    display: block;

    margin-bottom: 6px;

    color:
        var(--isfh-navy);

    font-size: 9.5px;

    font-weight: 800;
}


/* =========================================================
   INPUT
========================================================= */

.itech-service-input {

    position: relative;

    width: 100%;
}


.itech-service-input > i {

    position: absolute;

    z-index: 3;

    left: 13px;
    top: 50%;

    transform:
        translateY(-50%);

    color:
        var(--isfh-blue);

    font-size: 13px;

    pointer-events: none;
}


.itech-service-input input,
.itech-service-input select,
.itech-service-input textarea {

    width: 100%;

    outline: none;

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

    border-radius: 11px;

    background:
        #f7f9fd;

    color:
        var(--isfh-navy);

    font-family: inherit;

    font-size: 10.5px;

    font-weight: 500;

    transition:
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


.itech-service-input input,
.itech-service-input select {

    height: 47px;

    padding:
        0
        12px
        0
        39px;
}


.itech-service-input select {

    cursor: pointer;
}


.itech-service-textarea > i {

    top: 15px;

    transform: none;
}


.itech-service-input textarea {

    min-height: 105px;

    resize: vertical;

    padding:
        13px
        13px
        13px
        39px;

    line-height: 1.5;
}


.itech-service-input input::placeholder,
.itech-service-input textarea::placeholder {

    color:
        #98a6b8;

    opacity: 1;
}


.itech-service-input input:focus,
.itech-service-input select:focus,
.itech-service-input textarea:focus {

    background:
        var(--isfh-white);

    border-color:
        rgba(20,116,255,.48);

    box-shadow:
        0 0 0 4px
        rgba(20,116,255,.075);
}


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

.itech-service-submit {

    min-height: 50px;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding:
        6px
        7px
        6px
        18px;

    border: 0;

    outline: 0;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            var(--isfh-blue),
            var(--isfh-blue-dark)
        );

    color:
        var(--isfh-white);

    cursor: pointer;

    font-family: inherit;

    font-size: 11.5px;

    font-weight: 850;

    box-shadow:
        0 14px 30px
        rgba(20,116,255,.22);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.itech-service-submit > span {

    width: 36px;
    /* height: 36px; */

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 9px;

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

    transition:
        transform .4s ease;
}


.itech-service-submit:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 19px 39px
        rgba(20,116,255,.31);
}


.submiticon-span:hover span {

    transform:
        rotate(45deg);
}


/* =========================================================
   SECURITY NOTE
========================================================= */

.itech-service-form-secure {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    margin-top: 13px;

    color:
        #8391a4;

    font-size: 8px;

    line-height: 1.4;

    text-align: center;
}


.itech-service-form-secure i {

    color:
        var(--isfh-blue);
}


/* =========================================================
   FLOATING BADGE
========================================================= */

.itech-service-form-floating {

    position: absolute;

    z-index: 7;

    left: -38px;

    bottom: 38px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        11px
        14px;

    border-radius: 13px;

    background:
        var(--isfh-white);

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

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

    animation:
        serviceFormFloat
        7s ease-in-out
        infinite;
}


.itech-service-form-floating > div {

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 10px;

    background:
        var(--isfh-blue);

    color:
        var(--isfh-white);

    font-size: 15px;
}


.itech-service-form-floating > span {

    display: flex;

    flex-direction: column;
}


.itech-service-form-floating small {

    color:
        #75849a;

    font-size: 7.5px;
}


.itech-service-form-floating strong {

    margin-top: 2px;

    color:
        var(--isfh-navy);

    font-size: 9.5px;

    font-weight: 850;
}


/* =========================================================
   SAFE DEFAULT
========================================================= */

.itech-service-form-content,
.itech-service-form-side,
.itech-service-field {

    opacity: 1;

    visibility: visible;

    filter: none;

    transform: none;
}


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

.itech-service-form-hero.isfh-ready
.itech-service-form-content {

    opacity: 0;

    filter:
        blur(14px);

    transform:
        perspective(1200px)
        translateY(38px)
        scale(.93)
        rotateX(10deg)
        rotateY(-4deg);
}


.itech-service-form-hero.isfh-ready
.itech-service-form-side {

    opacity: 0;

    filter:
        blur(15px);

    transform:
        perspective(1300px)
        translateY(44px)
        scale(.88)
        rotateX(12deg)
        rotateY(9deg);
}


.itech-service-form-hero.isfh-ready
.itech-service-field {

    opacity: 0;

    filter:
        blur(7px);

    transform:
        translateY(15px)
        scale(.96);
}


/* =========================================================
   SHOW
========================================================= */

.itech-service-form-hero.isfh-ready
.itech-service-form-content.isfh-show,

.itech-service-form-hero.isfh-ready
.itech-service-form-side.isfh-show {

    opacity: 1;

    filter:
        blur(0);

    transform:
        perspective(1200px)
        translateY(0)
        scale(1)
        rotateX(0deg)
        rotateY(0deg);

    transition:
        opacity 1.2s ease,
        filter 1.5s ease,
        transform 1.8s
        cubic-bezier(.16,.8,.22,1);
}


.itech-service-form-hero.isfh-ready
.itech-service-field.isfh-field-show {

    opacity: 1;

    filter:
        blur(0);

    transform:
        translateY(0)
        scale(1);

    transition:
        opacity .75s ease,
        filter .9s ease,
        transform 1s
        cubic-bezier(.16,.8,.22,1);
}


/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes serviceFormPulse {

    0%,
    100% {

        box-shadow:
            0 0 0 5px
            rgba(20,116,255,.13);
    }

    50% {

        box-shadow:
            0 0 0 9px
            rgba(20,116,255,.02);
    }
}


@keyframes serviceFormFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(-1deg);
    }

    50% {

        transform:
            translateY(-7px)
            rotate(1deg);
    }
}


/* =========================================================
   LARGE SCREEN
========================================================= */

@media (min-width: 1600px) {

    .itech-service-form-inner {

        max-width: 1550px;

        padding-left: 7vw;

        padding-right: 7vw;
    }


    .itech-service-form-content {

        max-width: 650px;
    }


    .itech-service-form-side {

        max-width: 640px;
    }

}


/* =========================================================
   1200
========================================================= */

@media (max-width: 1200px) {

    .itech-service-form-inner {

        grid-template-columns:
            minmax(0,.9fr)
            minmax(470px,1.1fr);

        gap: 40px;

        padding-left: 40px;

        padding-right: 40px;
    }


    .itech-service-form-content h1 {

        font-size:
            clamp(
                39px,
                4vw,
                52px
            );
    }


    .itech-service-form-floating {

        left: -20px;
    }

}


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

@media (max-width: 991px) {

    .itech-service-form-hero {

        min-height: auto;
    }


    .itech-service-form-inner {

        grid-template-columns: 1fr;

        gap: 50px;

        padding:
            58px
            24px
            68px;
    }


    .itech-service-form-content {

        max-width: 690px;

        margin: 0 auto;

        text-align: center;
    }


    .itech-service-form-breadcrumb {

        justify-content: center;
    }


    .itech-service-form-label {

        margin-left: auto;

        margin-right: auto;
    }


    .itech-service-form-description {

        margin-left: auto;

        margin-right: auto;
    }


    .itech-service-form-points {

        max-width: 580px;

        margin-left: auto;

        margin-right: auto;

        text-align: left;
    }


    .itech-service-form-bottom {

        margin-left: auto;

        margin-right: auto;

        text-align: left;
    }


    .itech-service-form-side {

        max-width: 680px;

        margin: 0 auto;
    }


    .itech-service-form-floating {

        left: -15px;

        bottom: 32px;
    }

}


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

@media (max-width: 767px) {

    .itech-service-form-inner {

        padding:
            47px
            15px
            58px;
    }


    .itech-service-form-content h1 {

        font-size:
            clamp(
                34px,
                10vw,
                43px
            );

        letter-spacing:
            -1.5px;
    }


    .itech-service-form-description {

        font-size: 13px;
    }


    .itech-service-form-points {

        grid-template-columns: 1fr;

        max-width: 400px;
    }


    .itech-service-form-card {

        padding:
            25px
            20px
            23px;

        border-radius: 20px;
    }


    .itech-service-form-row {

        grid-template-columns: 1fr;
    }


    .itech-service-form-floating {

        display: none;
    }

}


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

@media (max-width: 480px) {

    .itech-service-form-breadcrumb {

        margin-bottom: 24px;
    }


    .itech-service-form-label {

        font-size: 9px;
    }


    .itech-service-form-content h1 {

        font-size: 34px;
    }


    .itech-service-form-card {

        padding:
            23px
            16px
            21px;
    }


    .itech-service-form-card-head h3 {

        font-size: 21px;
    }


    .itech-service-form-card-icon {

        width: 44px;
        height: 44px;

        flex-basis: 44px;

        font-size: 16px;
    }

}


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

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

    .itech-service-form-content,
    .itech-service-form-side,
    .itech-service-field {

        opacity: 1 !important;

        visibility: visible !important;

        filter: none !important;

        transform: none !important;

        transition: none !important;
    }


    .itech-service-form-label span,
    .itech-service-form-floating {

        animation: none !important;
    }

}

/* =========================================================
   SERVICE OVERVIEW SECTION
========================================================= */

.itech-service-overview {

    --iso-navy: #06152c;
    --iso-navy-soft: #0c2343;

    --iso-blue: #1474ff;
    --iso-blue-dark: #075bd6;

    --iso-white: #ffffff;

    --iso-bg: #f6f9fe;
    --iso-soft: #edf4ff;

    --iso-muted: #66758a;

    position: relative;

    width: 100%;

    padding: 95px 20px 100px;

    overflow: hidden;

    isolation: isolate;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7faff 52%,
            #eef4ff 100%
        );
}


.itech-service-overview *,
.itech-service-overview *::before,
.itech-service-overview *::after {
    box-sizing: border-box;
}


/* BACKGROUND */

.itech-service-overview::before {

    content: "";

    position: absolute;

    z-index: -2;

    width: 460px;
    height: 460px;

    right: -250px;
    top: -210px;

    border-radius: 50%;

    background:
        rgba(20,116,255,.07);
}


.itech-service-overview::after {

    content: "";

    position: absolute;

    z-index: -2;

    width: 300px;
    height: 300px;

    left: -175px;
    bottom: -150px;

    border-radius: 50%;

    background:
        rgba(6,21,44,.035);
}


/* =========================================================
   CONTAINER
========================================================= */

.itech-service-overview-container {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1240px;

    margin: 0 auto;
}


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

.itech-service-overview-grid {

    display: grid;

    grid-template-columns:
        minmax(0,.84fr)
        minmax(520px,1.16fr);

    align-items: center;

    gap: 75px;

    perspective: 1400px;
}


/* =========================================================
   LEFT
========================================================= */

.itech-service-overview-content {

    width: 100%;

    max-width: 545px;
}


/* TAG */

.itech-service-overview-tag {

    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 18px;

    padding:
        8px
        14px
        8px
        9px;

    border-radius: 50px;

    background:
        var(--iso-blue);

    color:
        var(--iso-white);

    font-size: 10.5px;

    font-weight: 850;

    box-shadow:
        0 9px 22px
        rgba(20,116,255,.17);
}


.itech-service-overview-tag span {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--iso-white);

    box-shadow:
        0 0 0 5px
        rgba(255,255,255,.15);
}


/* TITLE */

.itech-service-overview-content h2 {

    max-width: 540px;

    margin:
        0
        0
        19px;

    color:
        var(--iso-navy);

    font-size:
        clamp(38px,3.4vw,50px);

    line-height: 1.08;

    letter-spacing: -1.9px;

    font-weight: 950;
}


.itech-service-overview-content h2 span {

    display: block;

    margin-top: 5px;

    color:
        var(--iso-blue);
}


/* LEAD */

.itech-service-overview-lead {

    max-width: 520px;

    margin:
        0
        0
        12px;

    color:
        var(--iso-navy) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 14px;

    line-height: 1.7;

    font-weight: 650;
}


/* TEXT */

.itech-service-overview-text {

    max-width: 520px;

    margin:
        0
        0
        23px;

    color:
        var(--iso-muted) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 12.5px;

    line-height: 1.72;

    font-weight: 500;
}


/* =========================================================
   NOTE
========================================================= */

.itech-service-overview-note {

    display: grid;

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

    align-items: center;

    gap: 11px;

    margin-bottom: 25px;

    padding:
        13px;

    border-radius: 14px;

    background:
        var(--iso-white);

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

    box-shadow:
        0 11px 28px
        rgba(6,21,44,.05);
}


.itech-service-overview-note > div {

    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    background:
        var(--iso-soft);

    color:
        var(--iso-blue);

    font-size: 17px;
}


.itech-service-overview-note p {

    width: 100%;

    margin: 0;

    color:
        var(--iso-muted) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 10.5px;

    line-height: 1.55;

    font-weight: 550;
}


/* =========================================================
   BUTTON
========================================================= */

.itech-service-overview-btn {

    min-height: 51px;

    display: inline-flex;

    align-items: center;

    gap: 11px;

    padding:
        6px 7px 6px 19px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--iso-blue),
            var(--iso-blue-dark)
        );

    color:
        var(--iso-white);

    text-decoration: none;

    font-size: 12px;

    font-weight: 850;

    box-shadow:
        0 15px 30px
        rgba(20,116,255,.22);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.itech-service-overview-btn > span {

    width: 36px;
    height: 36px;

    display: grid;

    place-items: center;

    border-radius: 9px;

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

    transition:
        transform .4s ease;
}


.itech-service-overview-btn:hover {

    color:
        var(--iso-white);

    transform:
        translateY(-3px);

    box-shadow:
        0 21px 40px
        rgba(20,116,255,.30);
}


.itech-service-overview-btn:hover span {

    transform:
        translateY(3px);
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.itech-service-overview-visual {

    position: relative;

    width: 100%;

    padding:
        31px;

    overflow: hidden;

    border-radius:
        28px
        70px
        28px
        28px;

    background:
        linear-gradient(
            145deg,
            var(--iso-navy),
            var(--iso-navy-soft)
        );

    box-shadow:
        0 32px 70px
        rgba(6,21,44,.17);

    transform-style:
        preserve-3d;
}


/* TOP ACCENT */

.itech-service-overview-visual::before {

    content: "";

    position: absolute;

    top: 0;
    right: 35px;

    width: 120px;
    height: 4px;

    border-radius:
        0 0
        20px 20px;

    background:
        var(--iso-blue);
}


/* GLOW */

.itech-service-overview-visual::after {

    content: "";

    position: absolute;

    width: 270px;
    height: 270px;

    right: -150px;
    bottom: -125px;

    border-radius: 50%;

    background:
        rgba(20,116,255,.13);

    pointer-events: none;
}


/* =========================================================
   VISUAL HEAD
========================================================= */

.itech-service-overview-heading {

    position: relative;

    z-index: 2;

    margin-bottom: 24px;
}


.itech-service-overview-heading small {

    display: block;

    margin-bottom: 7px;

    color:
        #83b1ff;

    font-size: 8.5px;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .6px;
}


.itech-service-overview-heading h3 {

    max-width: 460px;

    margin: 0;

    color:
        var(--iso-white);

    font-size: 27px;

    line-height: 1.16;

    letter-spacing: -.8px;

    font-weight: 900;
}


.itech-service-overview-heading h3 span {

    display: block;

    margin-top: 3px;

    color:
        #79aaff;
}


/* =========================================================
   LANES
========================================================= */

.itech-service-overview-lanes {

    position: relative;

    z-index: 3;

    display: grid;

    gap: 8px;

    perspective: 1000px;
}


/* =========================================================
   LANE
========================================================= */

.itech-service-overview-lane {

    position: relative;

    display: grid;

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

    align-items: center;

    gap: 11px;

    min-width: 0;

    padding:
        11px 13px;

    border-radius: 12px;

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

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

    transform-style:
        preserve-3d;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease;
}


.itech-service-overview-lane:hover {

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

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

    transform:
        translateX(6px);
}


/* NUMBER */

.itech-service-lane-number {

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

    font-size: 10px;

    font-weight: 850;
}


/* ICON */

.itech-service-lane-icon {

    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    background:
        rgba(20,116,255,.14);

    color:
        #83b1ff;

    font-size: 16px;

    transform:
        translateZ(18px);

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


.itech-service-overview-lane:hover
.itech-service-lane-icon {

    background:
        var(--iso-blue);

    color:
        var(--iso-white);

    transform:
        translateZ(30px)
        rotate(-5deg)
        scale(1.06);
}


/* TEXT */

.itech-service-overview-lane > div:last-child {

    min-width: 0;
}


.itech-service-overview-lane h4 {

    margin:
        0
        0
        3px;

    color:
        var(--iso-white);

    font-size: 11.5px;

    line-height: 1.35;

    font-weight: 850;
}


.itech-service-overview-lane p {

    width: 100%;

    margin: 0;

    color:
        rgba(255,255,255,.55) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 9px;

    line-height: 1.48;

    font-weight: 500;

    white-space: normal;

    overflow-wrap: anywhere;
}


/* =========================================================
   SAFE DEFAULT
========================================================= */

.itech-service-overview-content,
.itech-service-overview-visual,
.itech-service-overview-lane {

    opacity: 1;

    visibility: visible;

    filter: none;

    transform: none;
}


/* =========================================================
   INITIAL
========================================================= */

.itech-service-overview.iso-ready
.itech-service-overview-content {

    opacity: 0;

    filter:
        blur(13px);

    transform:
        perspective(1100px)
        translateY(35px)
        scale(.94)
        rotateX(9deg);
}


.itech-service-overview.iso-ready
.itech-service-overview-visual {

    opacity: 0;

    filter:
        blur(14px);

    transform:
        perspective(1200px)
        scale(.91)
        rotateX(10deg)
        rotateY(7deg);
}


.itech-service-overview.iso-ready
.itech-service-overview-lane {

    opacity: 0;

    filter:
        blur(8px);

    transform:
        translateY(16px)
        scale(.96);
}


/* =========================================================
   SHOW
========================================================= */

.itech-service-overview.iso-ready
.itech-service-overview-content.iso-show,

.itech-service-overview.iso-ready
.itech-service-overview-visual.iso-show {

    opacity: 1;

    filter: blur(0);

    transform:
        perspective(1200px)
        translateY(0)
        scale(1)
        rotateX(0deg)
        rotateY(0deg);

    transition:
        opacity 1.1s ease,
        filter 1.4s ease,
        transform 1.65s
        cubic-bezier(.16,.8,.22,1);
}


.itech-service-overview.iso-ready
.itech-service-overview-lane.iso-lane-show {

    opacity: 1;

    filter: blur(0);

    transform:
        translateY(0)
        scale(1);

    transition:
        opacity .7s ease,
        filter .9s ease,
        transform 1s
        cubic-bezier(.16,.8,.22,1);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .itech-service-overview-grid {

        grid-template-columns:
            minmax(0,.9fr)
            minmax(470px,1.1fr);

        gap: 45px;
    }

}


@media (max-width: 991px) {

    .itech-service-overview {

        padding:
            75px
            20px
            82px;
    }


    .itech-service-overview-grid {

        grid-template-columns: 1fr;

        gap: 50px;
    }


    .itech-service-overview-content {

        max-width: 650px;

        margin: 0 auto;

        text-align: center;
    }


    .itech-service-overview-tag {

        margin-left: auto;

        margin-right: auto;
    }


    .itech-service-overview-content h2,
    .itech-service-overview-lead,
    .itech-service-overview-text {

        margin-left: auto;

        margin-right: auto;
    }


    .itech-service-overview-note {

        max-width: 510px;

        margin-left: auto;

        margin-right: auto;

        text-align: left;
    }


    .itech-service-overview-visual {

        max-width: 680px;

        margin: 0 auto;
    }

}


@media (max-width: 767px) {

    .itech-service-overview {

        padding:
            58px
            15px
            68px;
    }


    .itech-service-overview-content h2 {

        font-size:
            clamp(31px,9vw,39px);

        letter-spacing: -1.3px;
    }


    .itech-service-overview-lead {

        font-size: 13.5px;
    }


    .itech-service-overview-btn {

        width: 100%;

        justify-content:
            space-between;
    }


    .itech-service-overview-visual {

        padding:
            24px
            18px;

        border-radius:
            22px
            48px
            22px
            22px;
    }


    .itech-service-overview-heading h3 {

        font-size: 23px;
    }

}


@media (max-width: 480px) {

    .itech-service-overview-lane {

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

        gap: 8px;

        padding:
            10px;
    }


    .itech-service-lane-icon {

        width: 39px;
        height: 39px;

        font-size: 14px;
    }

}


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

    .itech-service-overview-content,
    .itech-service-overview-visual,
    .itech-service-overview-lane {

        opacity: 1 !important;

        visibility: visible !important;

        filter: none !important;

        transform: none !important;

        transition: none !important;
    }

}

/* =========================================================
   DARK CORE SERVICES
========================================================= */

.itech-dark-services {

    --ids-navy: #06152c;
    --ids-navy-2: #081f43;

    --ids-blue: #176cff;
    --ids-blue-dark: #0758df;

    --ids-white: #ffffff;

    --ids-card-text: #53617a;

    position: relative;

    width: 100%;

    padding:
        90px 20px
        105px;

    overflow: hidden;

    isolation: isolate;

    background:
        radial-gradient(
            circle at 18% 10%,
            rgba(50,45,255,.35),
            transparent 25%
        ),
        radial-gradient(
            circle at 83% 25%,
            rgba(23,108,255,.25),
            transparent 25%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(23,108,255,.12),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #071129 0%,
            #081a3b 50%,
            #06152c 100%
        );
}


.itech-dark-services *,
.itech-dark-services *::before,
.itech-dark-services *::after {
    box-sizing: border-box;
}


/* =========================================================
   BACKGROUND LIGHT
========================================================= */

.itech-dark-services::before {

    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    left: -290px;
    top: 210px;

    border-radius: 50%;

    border:
        1px solid
        rgba(90,122,255,.18);

    box-shadow:
        0 0 90px
        rgba(45,85,255,.06);

    z-index: -2;
}


.itech-dark-services::after {

    content: "";

    position: absolute;

    width: 480px;
    height: 480px;

    right: -280px;
    top: -120px;

    border-radius: 50%;

    border:
        1px solid
        rgba(60,105,255,.14);

    z-index: -2;
}


/* =========================================================
   CONTAINER
========================================================= */

.itech-dark-services-container {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1240px;

    margin: 0 auto;
}


/* =========================================================
   HEAD
========================================================= */

.itech-dark-services-head {

    max-width: 760px;

    margin:
        0 auto
        45px;

    text-align: center;
}


/* =========================================================
   TAG
========================================================= */

.itech-dark-services-tag {

    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin:
        0 auto
        17px;

    padding:
        9px
        17px;

    border-radius: 50px;

    background:
        rgba(23,108,255,.14);

    border:
        1px solid
        rgba(76,124,255,.33);

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

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .75px;

    backdrop-filter:
        blur(10px);
}


.itech-dark-services-tag span {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--ids-blue);

    box-shadow:
        0 0 0 5px
        rgba(23,108,255,.15);

    animation:
        idsTagPulse
        4s ease-in-out
        infinite;
}


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

.itech-dark-services-head h2 {

    margin:
        0
        0
        14px;

    color:
        var(--ids-white);

    font-size:
        clamp(
            39px,
            3.6vw,
            52px
        );

    line-height: 1.08;

    letter-spacing:
        -2px;

    font-weight: 950;
}


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

.itech-dark-services-head > p {

    max-width: 680px;

    margin: 0 auto;

    color:
        rgba(255,255,255,.68) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 13.5px;

    line-height: 1.72;

    font-weight: 500;
}


/* =========================================================
   CENTER LINE
========================================================= */

.itech-dark-services-head-line {

    position: relative;

    width: 90px;
    height: 1px;

    margin:
        22px auto
        0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(23,108,255,.85),
            transparent
        );
}


.itech-dark-services-head-line span {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--ids-blue);

    transform:
        translate(-50%,-50%);

    box-shadow:
        0 0 14px
        rgba(23,108,255,.85);
}


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

.itech-dark-services-grid {

    display: grid;

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

    gap: 18px;

    perspective:
        1500px;
}


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

.itech-dark-service-card {

    position: relative;

    min-height: 330px;

    display: flex;

    flex-direction: column;

    padding:
        25px
        25px
        24px;

    overflow: hidden;

    border-radius: 20px;

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

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

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

    transform-style:
        preserve-3d;

    will-change:
        transform;

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


/* bottom subtle wave */

.itech-dark-service-card::before {

    content: "";

    position: absolute;

    width: 340px;
    height: 125px;

    right: -120px;
    bottom: -82px;

    border-radius: 50%;

    background:
        rgba(23,108,255,.055);

    transform:
        rotate(-8deg);

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


/* blue bottom accent */

.itech-dark-service-card::after {

    content: "";

    position: absolute;

    left: 25px;
    bottom: 0;

    width: 42px;
    height: 3px;

    border-radius: 20px;

    background:
        var(--ids-blue);

    transition:
        width .4s ease;
}


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

.itech-dark-service-card:hover {

    border-color:
        rgba(23,108,255,.28);

    box-shadow:
        0 30px 65px
        rgba(0,0,0,.26);
}


.itech-dark-service-card:hover::before {

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

    transform:
        rotate(-8deg)
        scale(1.35);
}


.itech-dark-service-card:hover::after {

    width: 105px;
}


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

.itech-dark-service-number {

    position: absolute;

    top: 23px;
    right: 23px;

    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--ids-blue),
            var(--ids-blue-dark)
        );

    color:
        var(--ids-white);

    font-size: 11px;

    font-weight: 850;

    box-shadow:
        0 11px 22px
        rgba(23,108,255,.25);

    transform:
        translateZ(30px);

    transition:
        transform .4s ease;
}


.itech-dark-service-card:hover
.itech-dark-service-number {

    transform:
        translateZ(48px)
        rotate(8deg)
        scale(1.06);
}


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

.itech-dark-service-icon {

    position: relative;

    z-index: 3;

    width: 86px;
    height: 86px;

    display: grid;

    place-items: center;

    margin-bottom: 24px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 25%,
            #78a4ff 0%,
            #386ef7 43%,
            #244be0 100%
        );

    color:
        var(--ids-white);

    font-size: 33px;

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

    box-shadow:
        inset 0 7px 13px
        rgba(255,255,255,.18),
        inset 0 -7px 14px
        rgba(0,0,70,.15),
        0 15px 30px
        rgba(23,73,220,.25);

    transform:
        translateZ(34px);

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


/* glossy spot */

.itech-dark-service-icon::before {

    content: "";

    position: absolute;

    width: 30px;
    height: 16px;

    left: 14px;
    top: 11px;

    border-radius: 50%;

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

    filter:
        blur(5px);
}


/* background circle */

.itech-dark-service-icon::after {

    content: "";

    position: absolute;

    inset: -7px;

    z-index: -1;

    border-radius: 50%;

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


.itech-dark-service-card:hover
.itech-dark-service-icon {

    transform:
        translateZ(55px)
        rotate(-8deg)
        scale(1.08);

    box-shadow:
        inset 0 7px 13px
        rgba(255,255,255,.23),
        inset 0 -7px 14px
        rgba(0,0,70,.18),
        0 22px 40px
        rgba(23,73,220,.34);
}


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

.itech-dark-service-card h3 {

    position: relative;

    z-index: 3;

    margin:
        0
        0
        9px;

    color:
        var(--ids-navy);

    font-size: 17px;

    line-height: 1.3;

    font-weight: 900;

    transform:
        translateZ(16px);
}


/* =========================================================
   P
========================================================= */

.itech-dark-service-card > p {

    position: relative;

    z-index: 3;

    width: 100%;

    margin:
        0
        0
        20px;

    color:
        var(--ids-card-text) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 11px;

    line-height: 1.65;

    font-weight: 500;

    transform:
        translateZ(10px);
}


/* =========================================================
   LINK
========================================================= */

.itech-dark-service-link {

    position: relative;

    z-index: 3;

    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: auto;

    color:
        var(--ids-blue);

    text-decoration: none;

    font-size: 11px;

    font-weight: 850;

    transform:
        translateZ(15px);

    transition:
        color .3s ease;
}


.itech-dark-service-link i {

    transition:
        transform .35s ease;
}


.itech-dark-service-card:hover
.itech-dark-service-link i {

    transform:
        translateX(6px);
}


/* =========================================================
   HEADSET DECOR
========================================================= */

.itech-dark-services-headset {

    position: absolute;

    z-index: 2;

    left: 7%;

    top: 55px;

    width: 145px;
    height: 145px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color:
        var(--ids-white);

    font-size: 72px;

    background:
        radial-gradient(
            circle at 35% 30%,
            #688cff,
            #3245df 52%,
            #151e86
        );

    box-shadow:
        inset 0 6px 12px
        rgba(255,255,255,.20),
        0 22px 55px
        rgba(35,55,220,.35);

    transform:
        rotate(-12deg);

    animation:
        idsHeadsetFloat
        7s ease-in-out
        infinite;
}


/* =========================================================
   CHAT DECOR
========================================================= */

.itech-dark-services-chat {

    position: absolute;

    z-index: 2;

    right: 9%;

    top: 70px;

    width: 130px;
    height: 105px;

    display: grid;

    place-items: center;

    border-radius: 30px;

    color:
        var(--ids-white);

    font-size: 48px;

    background:
        linear-gradient(
            145deg,
            #738cff,
            #3848dd
        );

    box-shadow:
        inset 0 6px 11px
        rgba(255,255,255,.19),
        0 20px 48px
        rgba(35,55,220,.32);

    transform:
        rotate(9deg);

    animation:
        idsChatFloat
        8s ease-in-out
        infinite;
}


/* =========================================================
   DOT PATTERN
========================================================= */

.itech-dark-dot-pattern {

    position: absolute;

    z-index: 1;

    display: grid;

    grid-template-columns:
        repeat(4,4px);

    gap: 10px;
}


.itech-dark-dot-pattern span {

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background:
        rgba(63,105,255,.55);
}


.dark-dot-left {

    left: 2%;

    top: 118px;
}


.dark-dot-right {

    right: 2%;

    top: 110px;
}


/* =========================================================
   SAFE DEFAULT
========================================================= */

.itech-dark-services-head,
.itech-dark-service-card {

    opacity: 1;

    visibility: visible;

    filter: none;

    transform: none;
}


/* =========================================================
   INITIAL SCROLL REVEAL
========================================================= */

.itech-dark-services.ids-ready
.itech-dark-services-head {

    opacity: 0;

    filter:
        blur(13px);

    transform:
        perspective(1100px)
        translateY(35px)
        scale(.94)
        rotateX(10deg);
}


.itech-dark-services.ids-ready
.itech-dark-service-card {

    opacity: 0;

    filter:
        blur(15px);

    transform:
        perspective(1100px)
        translateY(55px)
        scale(.84)
        rotateX(15deg)
        rotateY(7deg);

    clip-path:
        inset(
            12% 8% 12% 8%
            round 22px
        );
}


/* =========================================================
   SHOW
========================================================= */

.itech-dark-services.ids-ready
.itech-dark-services-head.ids-show,

.itech-dark-services.ids-ready
.itech-dark-service-card.ids-show {

    opacity: 1;

    filter:
        blur(0);

    transform:
        perspective(1100px)
        translateY(0)
        scale(1)
        rotateX(0deg)
        rotateY(0deg);

    clip-path:
        inset(
            0 0 0 0
            round 0
        );

    transition:
        opacity 1.05s ease,
        filter 1.35s ease,
        transform 1.65s
        cubic-bezier(.16,.8,.22,1),
        clip-path 1.5s
        cubic-bezier(.16,.8,.22,1);
}


/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes idsTagPulse {

    0%,
    100% {

        box-shadow:
            0 0 0 5px
            rgba(23,108,255,.15);
    }

    50% {

        box-shadow:
            0 0 0 9px
            rgba(23,108,255,.03);
    }

}


@keyframes idsHeadsetFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(-12deg);
    }

    50% {

        transform:
            translateY(-12px)
            rotate(-7deg);
    }

}


@keyframes idsChatFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(9deg);
    }

    50% {

        transform:
            translateY(10px)
            rotate(5deg);
    }

}


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

@media (max-width: 1050px) {

    .itech-dark-services-grid {

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


    .itech-dark-services-headset {

        width: 105px;
        height: 105px;

        font-size: 50px;

        left: 3%;
    }


    .itech-dark-services-chat {

        width: 95px;
        height: 80px;

        font-size: 35px;

        right: 3%;
    }

}


/* =========================================================
   991
========================================================= */

@media (max-width: 991px) {

    .itech-dark-services {

        padding:
            75px 20px
            82px;
    }


    .itech-dark-services-headset,
    .itech-dark-services-chat {

        opacity: .45;
    }

}


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

@media (max-width: 767px) {

    .itech-dark-services {

        padding:
            58px 15px
            68px;
    }


    .itech-dark-services-head {

        margin-bottom: 32px;
    }


    .itech-dark-services-head h2 {

        font-size:
            clamp(
                31px,
                9vw,
                39px
            );

        letter-spacing: -1.3px;
    }


    .itech-dark-services-head > p {

        font-size: 13px;
    }


    .itech-dark-services-grid {

        grid-template-columns: 1fr;

        gap: 14px;
    }


    .itech-dark-service-card {

        min-height: 295px;

        padding: 22px;

        border-radius: 18px;
    }


    .itech-dark-service-number {

        top: 21px;
        right: 21px;
    }


    .itech-dark-service-icon {

        width: 78px;
        height: 78px;

        margin-bottom: 21px;

        font-size: 29px;
    }


    .itech-dark-services-headset,
    .itech-dark-services-chat,
    .itech-dark-dot-pattern {

        display: none;
    }

}


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

@media (max-width: 480px) {

    .itech-dark-service-card {

        min-height: 280px;
    }


    .itech-dark-service-card h3 {

        font-size: 16px;
    }


    .itech-dark-service-card > p {

        font-size: 10.7px;
    }

}


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

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

    .itech-dark-services-head,
    .itech-dark-service-card {

        opacity: 1 !important;

        visibility: visible !important;

        filter: none !important;

        transform: none !important;

        clip-path: none !important;

        transition: none !important;
    }


    .itech-dark-services-headset,
    .itech-dark-services-chat,
    .itech-dark-services-tag span {

        animation: none !important;
    }

}

/* =========================================================
   HOW WE WORK
========================================================= */

.itech-work-process {

    --iwp-navy: #06152c;
    --iwp-navy-soft: #102746;

    --iwp-blue: #176cff;
    --iwp-blue-dark: #0758df;

    --iwp-white: #ffffff;

    --iwp-muted: #66758a;
    --iwp-soft: #edf4ff;

    position: relative;

    width: 100%;

    padding: 92px 20px 100px;

    overflow: hidden;

    isolation: isolate;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(23,108,255,.07),
            transparent 24%
        ),
        radial-gradient(
            circle at 90% 88%,
            rgba(23,108,255,.06),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5f8fd 100%
        );
}


.itech-work-process *,
.itech-work-process *::before,
.itech-work-process *::after {
    box-sizing: border-box;
}


/* =========================================================
   BACKGROUND DECOR
========================================================= */

.itech-work-process::before {

    content: "";

    position: absolute;

    z-index: -2;

    width: 430px;
    height: 430px;

    left: -250px;
    bottom: -210px;

    border-radius: 50%;

    border:
        1px solid rgba(23,108,255,.08);
}


.itech-work-process::after {

    content: "";

    position: absolute;

    z-index: -2;

    width: 340px;
    height: 340px;

    right: -200px;
    top: -150px;

    border-radius: 50%;

    background:
        rgba(23,108,255,.045);
}


/* =========================================================
   CONTAINER
========================================================= */

.itech-work-process-container {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1240px;

    margin: 0 auto;
}


/* =========================================================
   HEAD
========================================================= */

.itech-work-process-head {

    max-width: 790px;

    margin: 0 auto 60px;

    text-align: center;
}


.itech-work-process-tag {

    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin: 0 auto 16px;

    padding:
        8px 14px 8px 9px;

    border-radius: 50px;

    background:
        var(--iwp-blue);

    color:
        var(--iwp-white);

    font-size: 10px;

    font-weight: 850;

    letter-spacing: .6px;

    box-shadow:
        0 9px 22px
        rgba(23,108,255,.18);
}


.itech-work-process-tag span {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--iwp-white);

    box-shadow:
        0 0 0 5px
        rgba(255,255,255,.15);

    animation:
        iwpPulse 4s ease-in-out infinite;
}


.itech-work-process-head h2 {

    max-width: 760px;

    margin: 0 auto 15px;

    color:
        var(--iwp-navy);

    font-size:
        clamp(38px,3.5vw,50px);

    line-height: 1.08;

    letter-spacing: -2px;

    font-weight: 950;
}


.itech-work-process-head h2 span {

    display: block;

    margin-top: 5px;

    color:
        var(--iwp-blue);
}


.itech-work-process-head > p {

    max-width: 700px;

    margin: 0 auto;

    color:
        var(--iwp-muted) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 13.5px;

    line-height: 1.72;

    font-weight: 500;
}


/* =========================================================
   PROCESS WRAP
========================================================= */

.itech-work-process-wrap {

    position: relative;

    display: grid;

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

    gap: 24px;

    padding-top: 48px;

    perspective: 1400px;
}


/* =========================================================
   BASE LINE
========================================================= */

.itech-work-process-line {

    position: absolute;

    z-index: 0;

    top: 24px;

    left: 12.5%;
    right: 12.5%;

    height: 2px;

    overflow: hidden;

    border-radius: 20px;

    background:
        #dfe7f4;
}


.itech-work-process-progress {

    display: block;

    width: 0;
    height: 100%;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            var(--iwp-blue),
            #5a94ff
        );

    box-shadow:
        0 0 14px
        rgba(23,108,255,.35);

    transition:
        width 2.2s
        cubic-bezier(.16,.8,.22,1);
}


.itech-work-process.iwp-active
.itech-work-process-progress {

    width: 100%;
}


/* =========================================================
   STEP
========================================================= */

.itech-work-step {

    position: relative;

    min-width: 0;

    padding:
        30px
        18px
        20px;

    text-align: center;

    transform-style:
        preserve-3d;
}


/* =========================================================
   MARKER
========================================================= */

.itech-work-step-marker {

    position: absolute;

    z-index: 5;

    top: -37px;
    left: 50%;

    width: 50px;
    height: 50px;

    display: grid;

    place-items: center;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        var(--iwp-white);

    border:
        2px solid
        #dfe7f4;

    box-shadow:
        0 7px 18px
        rgba(6,21,44,.07);

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


.itech-work-step-marker::before {

    content: "";

    position: absolute;

    inset: 6px;

    border-radius: 50%;

    background:
        var(--iwp-soft);

    transition:
        background .4s ease;
}


.itech-work-step-marker span {

    position: relative;

    z-index: 2;

    color:
        var(--iwp-blue);

    font-size: 10px;

    font-weight: 900;
}


.itech-work-step:hover
.itech-work-step-marker {

    border-color:
        var(--iwp-blue);

    transform:
        translateX(-50%)
        translateY(-5px)
        scale(1.07);

    box-shadow:
        0 12px 27px
        rgba(23,108,255,.17);
}


.itech-work-step:hover
.itech-work-step-marker::before {

    background:
        var(--iwp-blue);
}


.itech-work-step:hover
.itech-work-step-marker span {

    color:
        var(--iwp-white);
}


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

.itech-work-step-icon {

    position: relative;

    width: 83px;
    height: 83px;

    display: grid;

    place-items: center;

    margin:
        0 auto
        22px;

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f0f5ff
        );

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

    color:
        var(--iwp-blue);

    font-size: 29px;

    box-shadow:
        0 15px 35px
        rgba(6,21,44,.08);

    transform:
        translateZ(25px);

    transition:
        transform .45s
        cubic-bezier(.2,.8,.2,1),
        background .4s ease,
        color .4s ease,
        box-shadow .4s ease;
}


.itech-work-step-icon::after {

    content: "";

    position: absolute;

    width: 27px;
    height: 27px;

    right: 6px;
    bottom: 6px;

    border-radius: 50%;

    background:
        rgba(23,108,255,.08);
}


.itech-work-step:hover
.itech-work-step-icon {

    color:
        var(--iwp-white);

    background:
        linear-gradient(
            145deg,
            var(--iwp-blue),
            var(--iwp-blue-dark)
        );

    transform:
        translateZ(45px)
        translateY(-7px)
        rotate(-6deg)
        scale(1.06);

    box-shadow:
        0 22px 45px
        rgba(23,108,255,.23);
}


/* =========================================================
   LABEL
========================================================= */

.itech-work-step-label {

    display: block;

    margin-bottom: 6px;

    color:
        var(--iwp-blue);

    font-size: 9px;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .7px;
}


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

.itech-work-step-content h3 {

    margin:
        0
        0
        10px;

    color:
        var(--iwp-navy);

    font-size: 16px;

    line-height: 1.35;

    font-weight: 900;
}


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

.itech-work-step-content p {

    width: 100%;

    margin: 0 auto;

    color:
        var(--iwp-muted) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 10.5px;

    line-height: 1.65;

    font-weight: 500;
}


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

.itech-work-process-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-top: 48px;

    padding:
        20px
        22px;

    border-radius: 17px;

    background:
        var(--iwp-navy);

    box-shadow:
        0 20px 45px
        rgba(6,21,44,.14);
}


.itech-work-process-bottom > div {

    min-width: 0;

    display: flex;

    flex-direction: column;
}


.itech-work-process-bottom > div > span {

    margin-bottom: 3px;

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

    font-size: 9px;

    font-weight: 600;
}


.itech-work-process-bottom > div > strong {

    color:
        var(--iwp-white);

    font-size: 13px;

    font-weight: 800;
}


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

.itech-work-process-btn {

    min-height: 48px;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        6px
        7px
        6px
        17px;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            var(--iwp-blue),
            var(--iwp-blue-dark)
        );

    color:
        var(--iwp-white);

    text-decoration: none;

    white-space: nowrap;

    font-size: 10.5px;

    font-weight: 850;

    box-shadow:
        0 13px 28px
        rgba(23,108,255,.23);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.itech-work-process-btn > span {

    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    border-radius: 8px;

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

    transition:
        transform .4s ease;
}


.itech-work-process-btn:hover {

    color:
        var(--iwp-white);

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 36px
        rgba(23,108,255,.31);
}


.itech-work-process-btn:hover span {

    transform:
        rotate(45deg);
}


/* =========================================================
   DEFAULT
========================================================= */

.itech-work-process-head,
.itech-work-step,
.itech-work-process-bottom {

    opacity: 1;

    visibility: visible;

    filter: none;

    transform: none;
}


/* =========================================================
   INITIAL ANIMATION
========================================================= */

.itech-work-process.iwp-ready
.itech-work-process-head {

    opacity: 0;

    filter: blur(12px);

    transform:
        perspective(1100px)
        translateY(30px)
        scale(.95)
        rotateX(8deg);
}


.itech-work-process.iwp-ready
.itech-work-step {

    opacity: 0;

    filter: blur(11px);

    transform:
        perspective(1000px)
        translateY(45px)
        scale(.88)
        rotateX(15deg);
}


.itech-work-process.iwp-ready
.itech-work-process-bottom {

    opacity: 0;

    filter: blur(11px);

    transform:
        perspective(1000px)
        translateY(30px)
        scale(.94)
        rotateX(8deg);
}


/* =========================================================
   SHOW
========================================================= */

.itech-work-process.iwp-ready
.itech-work-process-head.iwp-show,

.itech-work-process.iwp-ready
.itech-work-step.iwp-show,

.itech-work-process.iwp-ready
.itech-work-process-bottom.iwp-show {

    opacity: 1;

    filter: blur(0);

    transform:
        perspective(1100px)
        translateY(0)
        scale(1)
        rotateX(0deg);

    transition:
        opacity 1s ease,
        filter 1.25s ease,
        transform 1.5s
        cubic-bezier(.16,.8,.22,1);
}


/* =========================================================
   KEYFRAME
========================================================= */

@keyframes iwpPulse {

    0%,
    100% {

        box-shadow:
            0 0 0 5px
            rgba(255,255,255,.15);
    }

    50% {

        box-shadow:
            0 0 0 9px
            rgba(255,255,255,.03);
    }

}


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

@media (max-width: 991px) {

    .itech-work-process {

        padding:
            75px 20px
            82px;
    }


    .itech-work-process-wrap {

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

        gap:
            55px
            25px;

        padding-top: 0;
    }


    .itech-work-process-line {

        display: none;
    }


    .itech-work-step {

        padding:
            20px
            20px
            10px;

        border-radius: 18px;

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

        border:
            1px solid
            rgba(23,108,255,.08);
    }


    .itech-work-step-marker {

        position: relative;

        top: auto;
        left: auto;

        margin:
            0 auto
            16px;

        transform: none;
    }


    .itech-work-step:hover
    .itech-work-step-marker {

        transform:
            translateY(-5px)
            scale(1.07);
    }

}


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

@media (max-width: 767px) {

    .itech-work-process {

        padding:
            58px 15px
            68px;
    }


    .itech-work-process-head {

        margin-bottom: 35px;
    }


    .itech-work-process-head h2 {

        font-size:
            clamp(31px,9vw,39px);

        letter-spacing:
            -1.3px;
    }


    .itech-work-process-head > p {

        font-size: 13px;
    }


    .itech-work-process-wrap {

        grid-template-columns: 1fr;

        gap: 15px;
    }


    .itech-work-step {

        display: grid;

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

        align-items: center;

        gap: 12px;

        padding: 17px;

        text-align: left;
    }


    .itech-work-step-marker {

        width: 46px;
        height: 46px;

        margin: 0;
    }


    .itech-work-step-icon {

        width: 61px;
        height: 61px;

        margin: 0;

        border-radius: 17px;

        font-size: 22px;
    }


    .itech-work-step-content p {

        font-size: 10px;
    }


    .itech-work-process-bottom {

        flex-direction: column;

        align-items: stretch;

        text-align: center;

        margin-top: 30px;
    }


    .itech-work-process-btn {

        width: 100%;

        justify-content:
            space-between;
    }

}


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

@media (max-width: 480px) {

    .itech-work-step {

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

        gap:
            10px
            12px;
    }


    .itech-work-step-marker {

        grid-column: 1;

        grid-row:
            1 / span 2;
    }


    .itech-work-step-icon {

        display: none;
    }


    .itech-work-step-content {

        grid-column: 2;
    }


    .itech-work-step-content h3 {

        font-size: 14px;
    }

}


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

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

    .itech-work-process-head,
    .itech-work-step,
    .itech-work-process-bottom {

        opacity: 1 !important;

        visibility: visible !important;

        filter: none !important;

        transform: none !important;

        transition: none !important;
    }


    .itech-work-process-progress {

        width: 100% !important;

        transition: none !important;
    }


    .itech-work-process-tag span {

        animation: none !important;
    }

}

/* =========================================================
   WHY CHOOSE ITECH
========================================================= */

.itech-why-section {

    --iws-navy: #06152c;
    --iws-navy-soft: #0a2346;

    --iws-blue: #176cff;
    --iws-blue-dark: #0758df;

    --iws-white: #ffffff;

    --iws-muted: #66758a;
    --iws-soft: #edf4ff;

    position: relative;

    width: 100%;

    padding: 95px 20px 100px;

    overflow: hidden;

    isolation: isolate;

    background:
        radial-gradient(
            circle at 87% 12%,
            rgba(23,108,255,.08),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #ffffff 52%,
            #f2f6fd 100%
        );
}


.itech-why-section *,
.itech-why-section *::before,
.itech-why-section *::after {
    box-sizing: border-box;
}


/* =========================================================
   DECOR
========================================================= */

.itech-why-section::before {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -230px;
    bottom: -180px;

    border-radius: 50%;

    background:
        rgba(23,108,255,.055);

    z-index: -2;
}


.itech-why-section::after {

    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    right: -180px;
    top: -160px;

    border-radius: 50%;

    border:
        1px solid
        rgba(23,108,255,.08);

    z-index: -2;
}


/* =========================================================
   CONTAINER
========================================================= */

.itech-why-container {

    width: 100%;

    max-width: 1240px;

    margin: 0 auto;

    position: relative;

    z-index: 3;
}


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

.itech-why-grid {

    display: grid;

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

    align-items: center;

    gap: 75px;

    perspective: 1500px;
}


/* =========================================================
   VISUAL
========================================================= */

.itech-why-visual {

    position: relative;

    min-height: 575px;

    perspective: 1400px;
}


.itech-why-image {

    position: relative;

    width: calc(100% - 45px);

    height: 520px;

    margin-left: auto;

    overflow: hidden;

    border-radius:
        70px 24px
        24px 24px;

    background:
        var(--iws-navy);

    box-shadow:
        0 34px 70px
        rgba(6,21,44,.19);

    transform-style: preserve-3d;

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


.itech-why-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;
}


.itech-why-image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(6,21,44,0) 36%,
            rgba(6,21,44,.10) 55%,
            rgba(6,21,44,.90) 100%
        );
}


/* BLUE EDGE */

.itech-why-image::before {

    content: "";

    position: absolute;

    z-index: 4;

    top: 28px;
    left: 0;

    width: 5px;
    height: 150px;

    border-radius:
        0 20px 20px 0;

    background:
        var(--iws-blue);
}


/* IMAGE CONTENT */

.itech-why-image-content {

    position: absolute;

    z-index: 5;

    left: 28px;
    right: 28px;
    bottom: 27px;
}


.itech-why-image-content > span {

    display: inline-flex;

    margin-bottom: 9px;

    padding:
        6px 10px;

    border-radius: 8px;

    background:
        var(--iws-blue);

    color:
        var(--iws-white);

    font-size: 8.5px;

    font-weight: 800;
}


.itech-why-image-content h3 {

    max-width: 400px;

    margin: 0;

    color:
        var(--iws-white);

    font-size: 26px;

    line-height: 1.16;

    letter-spacing: -.8px;

    font-weight: 900;
}


/* =========================================================
   FLOAT
========================================================= */

.itech-why-floating {

    position: absolute;

    z-index: 8;

    left: 0;
    bottom: 12px;

    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        12px
        15px;

    border-radius: 14px;

    background:
        var(--iws-white);

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

    box-shadow:
        0 18px 42px
        rgba(6,21,44,.14);

    animation:
        iwsFloat 7s ease-in-out infinite;
}


.itech-why-floating-icon {

    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 11px;

    background:
        var(--iws-blue);

    color:
        var(--iws-white);

    font-size: 16px;
}


.itech-why-floating > div:last-child {

    display: flex;

    flex-direction: column;
}


.itech-why-floating small {

    color:
        var(--iws-muted);

    font-size: 8px;
}


.itech-why-floating strong {

    margin-top: 2px;

    color:
        var(--iws-navy);

    font-size: 10.5px;

    font-weight: 850;
}


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

.itech-why-content {

    width: 100%;

    max-width: 570px;
}


/* TAG */

.itech-why-tag {

    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 17px;

    padding:
        8px 14px 8px 9px;

    border-radius: 50px;

    background:
        var(--iws-blue);

    color:
        var(--iws-white);

    font-size: 10px;

    font-weight: 850;

    letter-spacing: .5px;

    box-shadow:
        0 9px 22px
        rgba(23,108,255,.18);
}


.itech-why-tag span {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--iws-white);

    box-shadow:
        0 0 0 5px
        rgba(255,255,255,.15);
}


/* TITLE */

.itech-why-content h2 {

    max-width: 570px;

    margin:
        0 0 18px;

    color:
        var(--iws-navy);

    font-size:
        clamp(
            38px,
            3.5vw,
            50px
        );

    line-height: 1.08;

    letter-spacing: -2px;

    font-weight: 950;
}


.itech-why-content h2 span {

    display: block;

    margin-top: 5px;

    color:
        var(--iws-blue);
}


/* INTRO */

.itech-why-intro {

    max-width: 550px;

    margin:
        0 0 27px;

    color:
        var(--iws-muted) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 13px;

    line-height: 1.72;

    font-weight: 500;
}


/* =========================================================
   LIST
========================================================= */

.itech-why-list {

    display: grid;

    gap: 9px;

    margin-bottom: 27px;

    perspective: 1100px;
}


/* ITEM */

.itech-why-item {

    position: relative;

    display: grid;

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

    align-items: center;

    gap: 11px;

    min-width: 0;

    padding:
        13px 14px;

    overflow: hidden;

    border-radius: 14px;

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

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

    box-shadow:
        0 8px 22px
        rgba(6,21,44,.04);

    transform-style: preserve-3d;

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


.itech-why-item::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background:
        var(--iws-blue);

    transform:
        scaleY(0);

    transform-origin:
        center;

    transition:
        transform .35s ease;
}


.itech-why-item:hover {

    transform:
        translateX(5px);

    border-color:
        rgba(23,108,255,.28);

    box-shadow:
        0 15px 34px
        rgba(6,21,44,.09);
}


.itech-why-item:hover::before {

    transform:
        scaleY(1);
}


/* NUMBER */

.itech-why-number {

    color:
        rgba(6,21,44,.20);

    font-size: 10px;

    font-weight: 900;
}


/* ICON */

.itech-why-icon {

    width: 43px;
    height: 43px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    background:
        var(--iws-soft);

    color:
        var(--iws-blue);

    font-size: 16px;

    transform:
        translateZ(18px);

    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease,
        box-shadow .35s ease;
}


.itech-why-item:hover
.itech-why-icon {

    background:
        var(--iws-blue);

    color:
        var(--iws-white);

    transform:
        translateZ(30px)
        rotate(-5deg)
        scale(1.06);

    box-shadow:
        0 12px 25px
        rgba(23,108,255,.20);
}


/* ITEM TEXT */

.itech-why-item-content {

    min-width: 0;
}


.itech-why-item h4 {

    margin:
        0 0 3px;

    color:
        var(--iws-navy);

    font-size: 12px;

    font-weight: 900;
}


.itech-why-item p {

    width: 100%;

    margin: 0;

    color:
        var(--iws-muted) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 9.5px;

    line-height: 1.55;

    font-weight: 500;
}


/* =========================================================
   BUTTON
========================================================= */

.itech-why-btn {

    min-height: 51px;

    display: inline-flex;

    align-items: center;

    gap: 11px;

    padding:
        6px 7px 6px 19px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--iws-blue),
            var(--iws-blue-dark)
        );

    color:
        var(--iws-white);

    text-decoration: none;

    font-size: 11.5px;

    font-weight: 850;

    box-shadow:
        0 15px 31px
        rgba(23,108,255,.22);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.itech-why-btn > span {

    width: 36px;
    height: 36px;

    display: grid;

    place-items: center;

    border-radius: 9px;

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

    transition:
        transform .4s ease;
}


.itech-why-btn:hover {

    color:
        var(--iws-white);

    transform:
        translateY(-3px);

    box-shadow:
        0 21px 40px
        rgba(23,108,255,.30);
}


.itech-why-btn:hover span {

    transform:
        rotate(45deg);
}


/* =========================================================
   ANIMATION SAFE STATE
========================================================= */

.itech-why-visual,
.itech-why-content,
.itech-why-item {

    opacity: 1;

    visibility: visible;

    filter: none;

    transform: none;
}


/* =========================================================
   INITIAL
========================================================= */

.itech-why-section.iws-ready
.itech-why-visual {

    opacity: 0;

    filter:
        blur(14px);

    transform:
        perspective(1200px)
        scale(.90)
        rotateX(11deg)
        rotateY(-7deg);
}


.itech-why-section.iws-ready
.itech-why-content {

    opacity: 0;

    filter:
        blur(13px);

    transform:
        perspective(1100px)
        translateY(35px)
        scale(.94)
        rotateX(9deg);
}


.itech-why-section.iws-ready
.itech-why-item {

    opacity: 0;

    filter:
        blur(8px);

    transform:
        translateY(15px)
        scale(.95);
}


/* SHOW */

.itech-why-section.iws-ready
.itech-why-visual.iws-show,

.itech-why-section.iws-ready
.itech-why-content.iws-show {

    opacity: 1;

    filter: blur(0);

    transform:
        perspective(1200px)
        translateY(0)
        scale(1)
        rotateX(0deg)
        rotateY(0deg);

    transition:
        opacity 1.1s ease,
        filter 1.4s ease,
        transform 1.7s
        cubic-bezier(.16,.8,.22,1);
}


.itech-why-section.iws-ready
.itech-why-item.iws-item-show {

    opacity: 1;

    filter: blur(0);

    transform:
        translateY(0)
        scale(1);

    transition:
        opacity .7s ease,
        filter .9s ease,
        transform 1s
        cubic-bezier(.16,.8,.22,1);
}


/* =========================================================
   FLOAT
========================================================= */

@keyframes iwsFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-1deg);
    }

    50% {
        transform:
            translateY(-7px)
            rotate(1deg);
    }

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .itech-why-grid {

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

        gap: 50px;
    }


    .itech-why-image {

        height: 480px;
    }

}


@media (max-width: 991px) {

    .itech-why-section {

        padding:
            75px 20px
            82px;
    }


    .itech-why-grid {

        grid-template-columns: 1fr;

        gap: 55px;
    }


    .itech-why-visual {

        max-width: 650px;

        min-height: 520px;

        margin: 0 auto;
    }


    .itech-why-content {

        max-width: 650px;

        margin: 0 auto;

        text-align: center;
    }


    .itech-why-tag {

        margin-left: auto;
        margin-right: auto;
    }


    .itech-why-content h2,
    .itech-why-intro {

        margin-left: auto;
        margin-right: auto;
    }


    .itech-why-list {

        text-align: left;
    }

}


@media (max-width: 767px) {

    .itech-why-section {

        padding:
            58px 15px
            68px;
    }


    .itech-why-visual {

        min-height: auto;
    }


    .itech-why-image {

        width: 100%;

        height: 380px;

        border-radius:
            48px 20px
            20px 20px;
    }


    .itech-why-floating {

        left: 14px;
        bottom: 14px;
    }


    .itech-why-content h2 {

        font-size:
            clamp(31px,9vw,39px);

        letter-spacing: -1.3px;
    }


    .itech-why-intro {

        font-size: 13px;
    }


    .itech-why-btn {

        width: 100%;

        justify-content:
            space-between;
    }

}


@media (max-width: 480px) {

    .itech-why-image {

        height: 320px;
    }


    .itech-why-image-content {

        left: 18px;
        right: 18px;
        bottom: 18px;
    }


    .itech-why-image-content h3 {

        font-size: 20px;
    }


    .itech-why-floating {

        display: none;
    }


    .itech-why-item {

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

        gap: 10px;
    }


    .itech-why-number {

        display: none;
    }


    .itech-why-icon {

        width: 38px;
        height: 38px;
    }

}


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

    .itech-why-visual,
    .itech-why-content,
    .itech-why-item {

        opacity: 1 !important;

        visibility: visible !important;

        filter: none !important;

        transform: none !important;

        transition: none !important;
    }


    .itech-why-floating {

        animation: none !important;
    }

}

/*----------------------------------contact page-----------------------------------*/

/* =========================================================
   CONTACT HERO
========================================================= */

.itech-contact-hero {

    --ich-navy: #06152c;
    --ich-navy-2: #0a2346;

    --ich-blue: #176cff;
    --ich-blue-dark: #0758df;

    --ich-white: #ffffff;

    --ich-muted: #a7b4c6;
    --ich-form-muted: #687a90;

    position: relative;

    width: 100%;

    min-height: 650px;

    display: flex;

    align-items: center;

    overflow: hidden;

    isolation: isolate;

    background:
        radial-gradient(
            circle at 80% 18%,
            rgba(23,108,255,.23),
            transparent 27%
        ),
        radial-gradient(
            circle at 13% 88%,
            rgba(23,108,255,.09),
            transparent 27%
        ),
        linear-gradient(
            120deg,
            #06152c 0%,
            #071a35 52%,
            #0a2346 100%
        );
}


.itech-contact-hero *,
.itech-contact-hero *::before,
.itech-contact-hero *::after {
    box-sizing: border-box;
}


/* BACKGROUND DECOR */

.itech-contact-hero::before {

    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    right: -330px;
    top: -350px;

    border-radius: 50%;

    border:
        1px solid rgba(23,108,255,.18);

    pointer-events: none;
}


.itech-contact-hero::after {

    content: "";

    position: absolute;

    width: 340px;
    height: 340px;

    left: -190px;
    bottom: -180px;

    border-radius: 50%;

    background:
        rgba(23,108,255,.055);

    pointer-events: none;
}


/* =========================================================
   INNER
========================================================= */

.itech-contact-hero-inner {

    position: relative;

    z-index: 3;

    width: 100%;

    max-width: 1450px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0,.9fr)
        minmax(500px,1.1fr);

    align-items: center;

    gap: 70px;

    padding:
        70px
        max(5vw,60px)
        75px;

    perspective: 1500px;
}


/* =========================================================
   LEFT
========================================================= */

.itech-contact-hero-content {

    width: 100%;

    max-width: 610px;
}


/* BREADCRUMB */

.itech-contact-breadcrumb {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 28px;
}


.itech-contact-breadcrumb a {

    display: inline-flex;

    align-items: center;

    gap: 7px;

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

    text-decoration: none;

    font-size: 10.5px;

    font-weight: 600;
}


.itech-contact-breadcrumb > i {

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

    font-size: 8px;
}


.itech-contact-breadcrumb > span {

    color:
        #7eaeff;

    font-size: 10.5px;

    font-weight: 750;
}


/* LABEL */

.itech-contact-label {

    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 20px;

    padding:
        8px 14px;

    border-radius: 50px;

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

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

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

    font-size: 9.5px;

    font-weight: 850;

    letter-spacing: .6px;
}


.itech-contact-label span {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--ich-blue);

    box-shadow:
        0 0 0 5px rgba(23,108,255,.13);

    animation:
        ichPulse 4s ease-in-out infinite;
}


/* TITLE */

.itech-contact-hero-content h1 {

    max-width: 600px;

    margin:
        0 0
        20px;

    color:
        var(--ich-white);

    font-size:
        clamp(40px,3.8vw,56px);

    line-height: 1.06;

    letter-spacing: -2px;

    font-weight: 950;
}


.itech-contact-hero-content h1 span {

    display: block;

    margin-top: 5px;

    color:
        var(--ich-blue);
}


/* INTRO */

.itech-contact-hero-content > p {

    max-width: 570px;

    margin:
        0 0
        27px;

    color:
        var(--ich-muted) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 13.5px;

    line-height: 1.75;

    font-weight: 500;
}


/* =========================================================
   QUICK CONTACTS
========================================================= */

.itech-contact-quick-list {

    display: grid;

    gap: 10px;

    max-width: 500px;
}


.itech-contact-quick-item {

    display: grid;

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

    align-items: center;

    gap: 11px;

    padding:
        11px 12px;

    border-radius: 13px;

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

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

    text-decoration: none;

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


a.itech-contact-quick-item:hover {

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

    border-color:
        rgba(23,108,255,.28);

    transform:
        translateX(5px);
}


.itech-contact-quick-item > div {

    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    background:
        rgba(23,108,255,.15);

    color:
        #81afff;

    font-size: 15px;
}


.itech-contact-quick-item > span {

    min-width: 0;

    display: flex;

    flex-direction: column;
}


.itech-contact-quick-item small {

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

    font-size: 7.5px;

    text-transform: uppercase;

    letter-spacing: .4px;
}


.itech-contact-quick-item strong {

    margin-top: 2px;

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

    font-size: 10.5px;

    line-height: 1.4;

    font-weight: 800;

    overflow-wrap: anywhere;
}


/* =========================================================
   RIGHT
========================================================= */

.itech-contact-hero-form-wrap {

    position: relative;

    width: 100%;

    max-width: 610px;

    margin-left: auto;

    perspective: 1500px;
}


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

.itech-contact-form-card {

    position: relative;

    z-index: 4;

    width: 100%;

    overflow: hidden;

    padding:
        29px 30px
        26px;

    border-radius: 25px;

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

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

    box-shadow:
        0 32px 75px rgba(0,0,0,.24);

    backdrop-filter: blur(18px);

    transform-style: preserve-3d;

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


.itech-contact-form-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 30px;

    width: 115px;
    height: 4px;

    border-radius:
        0 0 15px 15px;

    background:
        linear-gradient(
            90deg,
            var(--ich-blue),
            var(--ich-blue-dark)
        );
}


.itech-contact-form-glow {

    position: absolute;

    width: 240px;
    height: 240px;

    right: -130px;
    top: -125px;

    border-radius: 50%;

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

    pointer-events: none;
}


/* =========================================================
   FORM HEAD
========================================================= */

.itech-contact-form-head {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 12px;
}


.itech-contact-form-icon {

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            var(--ich-blue),
            var(--ich-blue-dark)
        );

    color:
        var(--ich-white);

    font-size: 18px;

    box-shadow:
        0 11px 25px rgba(23,108,255,.22);

    transform:
        translateZ(25px);
}


.itech-contact-form-head span {

    display: block;

    margin-bottom: 3px;

    color:
        var(--ich-blue);

    font-size: 8.5px;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .55px;
}


.itech-contact-form-head h3 {

    margin: 0;

    color:
        var(--ich-navy);

    font-size: 24px;

    line-height: 1.15;

    letter-spacing: -.7px;

    font-weight: 900;
}


.itech-contact-form-intro {

    position: relative;

    z-index: 2;

    max-width: 500px;

    margin:
        0 0
        20px;

    color:
        var(--ich-form-muted) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 10.5px;

    line-height: 1.58;

    font-weight: 500;
}


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

.itech-contact-form-card form {

    position: relative;

    z-index: 2;

    display: grid;

    gap: 14px;
}


.itech-contact-form-row {

    display: grid;

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

    gap: 12px;
}


.itech-contact-field {

    min-width: 0;
}


.itech-contact-field label {

    display: block;

    margin-bottom: 6px;

    color:
        var(--ich-navy);

    font-size: 9.5px;

    font-weight: 800;
}


.itech-contact-input {

    position: relative;

    width: 100%;
}


.itech-contact-input > i {

    position: absolute;

    z-index: 3;

    left: 13px;
    top: 50%;

    transform:
        translateY(-50%);

    color:
        var(--ich-blue);

    font-size: 13px;

    pointer-events: none;
}


.itech-contact-input input,
.itech-contact-input select,
.itech-contact-input textarea {

    width: 100%;

    outline: none;

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

    border-radius: 11px;

    background:
        #f7f9fd;

    color:
        var(--ich-navy);

    font-family: inherit;

    font-size: 10.5px;

    font-weight: 500;

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}


.itech-contact-input input,
.itech-contact-input select {

    height: 47px;

    padding:
        0 12px 0 39px;
}


.itech-contact-textarea > i {

    top: 15px;

    transform: none;
}


.itech-contact-input textarea {

    min-height: 105px;

    resize: vertical;

    padding:
        13px 13px 13px 39px;

    line-height: 1.5;
}


.itech-contact-input input::placeholder,
.itech-contact-input textarea::placeholder {

    color: #98a6b8;
}


.itech-contact-input input:focus,
.itech-contact-input select:focus,
.itech-contact-input textarea:focus {

    background:
        var(--ich-white);

    border-color:
        rgba(23,108,255,.48);

    box-shadow:
        0 0 0 4px rgba(23,108,255,.075);
}


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

.itech-contact-submit {

    width: 100%;

    min-height: 50px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding:
        6px 7px
        6px 18px;

    border: 0;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            var(--ich-blue),
            var(--ich-blue-dark)
        );

    color:
        var(--ich-white);

    font-family: inherit;

    font-size: 11.5px;

    font-weight: 850;

    cursor: pointer;

    box-shadow:
        0 14px 30px rgba(23,108,255,.22);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.itech-contact-submit > span {

    width: 36px;
    height: 36px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 9px;

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

    transition:
        transform .4s ease;
}


.itech-contact-submit:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 19px 39px rgba(23,108,255,.31);
}


.itech-contact-submit:hover span {

    transform: rotate(45deg);
}


/* NOTE */

.itech-contact-form-note {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    margin-top: 13px;

    color: #8391a4;

    font-size: 8px;

    text-align: center;
}


.itech-contact-form-note i {

    color:
        var(--ich-blue);
}


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

.itech-contact-floating-card {

    position: absolute;

    z-index: 7;

    left: -38px;
    bottom: 40px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        11px 14px;

    border-radius: 13px;

    background:
        var(--ich-white);

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

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

    animation:
        ichFloat 7s ease-in-out infinite;
}


.itech-contact-floating-card > div {

    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 10px;

    background:
        var(--ich-blue);

    color:
        var(--ich-white);

    font-size: 15px;
}


.itech-contact-floating-card > span {

    display: flex;

    flex-direction: column;
}


.itech-contact-floating-card small {

    color: #75849a;

    font-size: 7.5px;
}


.itech-contact-floating-card strong {

    margin-top: 2px;

    color:
        var(--ich-navy);

    font-size: 9.5px;

    font-weight: 850;
}


/* =========================================================
   ANIMATION STATES
========================================================= */

.itech-contact-hero-content,
.itech-contact-hero-form-wrap,
.itech-contact-field {

    opacity: 1;

    visibility: visible;

    filter: none;

    transform: none;
}


.itech-contact-hero.ich-ready
.itech-contact-hero-content {

    opacity: 0;

    filter: blur(14px);

    transform:
        perspective(1200px)
        translateY(38px)
        scale(.93)
        rotateX(10deg)
        rotateY(-4deg);
}


.itech-contact-hero.ich-ready
.itech-contact-hero-form-wrap {

    opacity: 0;

    filter: blur(15px);

    transform:
        perspective(1300px)
        translateY(45px)
        scale(.88)
        rotateX(12deg)
        rotateY(9deg);
}


.itech-contact-hero.ich-ready
.itech-contact-field {

    opacity: 0;

    filter: blur(7px);

    transform:
        translateY(15px)
        scale(.96);
}


.itech-contact-hero.ich-ready
.itech-contact-hero-content.ich-show,

.itech-contact-hero.ich-ready
.itech-contact-hero-form-wrap.ich-show {

    opacity: 1;

    filter: blur(0);

    transform:
        perspective(1200px)
        translateY(0)
        scale(1)
        rotateX(0deg)
        rotateY(0deg);

    transition:
        opacity 1.2s ease,
        filter 1.5s ease,
        transform 1.8s
        cubic-bezier(.16,.8,.22,1);
}


.itech-contact-hero.ich-ready
.itech-contact-field.ich-field-show {

    opacity: 1;

    filter: blur(0);

    transform:
        translateY(0)
        scale(1);

    transition:
        opacity .75s ease,
        filter .9s ease,
        transform 1s
        cubic-bezier(.16,.8,.22,1);
}


/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes ichPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 5px rgba(23,108,255,.13);
    }

    50% {
        box-shadow:
            0 0 0 9px rgba(23,108,255,.02);
    }
}


@keyframes ichFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-1deg);
    }

    50% {
        transform:
            translateY(-7px)
            rotate(1deg);
    }
}


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

@media (max-width: 1200px) {

    .itech-contact-hero-inner {

        grid-template-columns:
            minmax(0,.9fr)
            minmax(470px,1.1fr);

        gap: 40px;

        padding-left: 40px;
        padding-right: 40px;
    }

}


@media (max-width: 991px) {

    .itech-contact-hero {

        min-height: auto;
    }


    .itech-contact-hero-inner {

        grid-template-columns: 1fr;

        gap: 50px;

        padding:
            58px 24px
            68px;
    }


    .itech-contact-hero-content {

        max-width: 680px;

        margin: 0 auto;

        text-align: center;
    }


    .itech-contact-breadcrumb {

        justify-content: center;
    }


    .itech-contact-label {

        margin-left: auto;
        margin-right: auto;
    }


    .itech-contact-hero-content > p {

        margin-left: auto;
        margin-right: auto;
    }


    .itech-contact-quick-list {

        margin:
            0 auto;

        text-align: left;
    }


    .itech-contact-hero-form-wrap {

        max-width: 680px;

        margin: 0 auto;
    }

}


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

@media (max-width: 767px) {

    .itech-contact-hero-inner {

        padding:
            47px 15px
            58px;
    }


    .itech-contact-hero-content h1 {

        font-size:
            clamp(34px,10vw,43px);

        letter-spacing: -1.5px;
    }


    .itech-contact-hero-content > p {

        font-size: 13px;
    }


    .itech-contact-form-card {

        padding:
            25px 20px
            23px;

        border-radius: 20px;
    }


    .itech-contact-form-row {

        grid-template-columns: 1fr;
    }


    .itech-contact-floating-card {

        display: none;
    }

}


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

@media (max-width: 480px) {

    .itech-contact-hero-content h1 {

        font-size: 34px;
    }


    .itech-contact-form-card {

        padding:
            23px 16px
            21px;
    }


    .itech-contact-form-head h3 {

        font-size: 21px;
    }

}


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

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

    .itech-contact-hero-content,
    .itech-contact-hero-form-wrap,
    .itech-contact-field {

        opacity: 1 !important;

        visibility: visible !important;

        filter: none !important;

        transform: none !important;

        transition: none !important;
    }


    .itech-contact-label span,
    .itech-contact-floating-card {

        animation: none !important;
    }

}

/* =========================================================
   CONTACT PROCESS SECTION
========================================================= */

.itech-contact-process {

    --icp-navy: #06152c;
    --icp-navy-soft: #0c2445;

    --icp-blue: #176cff;
    --icp-blue-dark: #0758df;

    --icp-white: #ffffff;

    --icp-soft: #edf4ff;
    --icp-muted: #66758a;

    position: relative;

    width: 100%;

    padding: 95px 20px 100px;

    overflow: hidden;

    isolation: isolate;

    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(23,108,255,.07),
            transparent 24%
        ),
        radial-gradient(
            circle at 92% 88%,
            rgba(23,108,255,.055),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f4f8fe 100%
        );
}


.itech-contact-process *,
.itech-contact-process *::before,
.itech-contact-process *::after {
    box-sizing: border-box;
}


/* =========================================================
   BACKGROUND DECOR
========================================================= */

.itech-contact-process::before {

    content: "";

    position: absolute;

    z-index: -2;

    width: 460px;
    height: 460px;

    left: -270px;
    bottom: -220px;

    border-radius: 50%;

    border:
        1px solid
        rgba(23,108,255,.08);
}


.itech-contact-process::after {

    content: "";

    position: absolute;

    z-index: -2;

    width: 360px;
    height: 360px;

    right: -200px;
    top: -170px;

    border-radius: 50%;

    background:
        rgba(23,108,255,.045);
}


/* =========================================================
   CONTAINER
========================================================= */

.itech-contact-process-container {

    position: relative;

    z-index: 3;

    width: 100%;

    max-width: 1240px;

    margin: 0 auto;
}


/* =========================================================
   HEAD
========================================================= */

.itech-contact-process-head {

    max-width: 790px;

    margin:
        0 auto
        58px;

    text-align: center;
}


/* TAG */

.itech-contact-process-tag {

    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin:
        0 auto
        16px;

    padding:
        8px
        14px
        8px
        9px;

    border-radius: 50px;

    background:
        var(--icp-blue);

    color:
        var(--icp-white);

    font-size: 10px;

    font-weight: 850;

    letter-spacing: .6px;

    box-shadow:
        0 9px 22px
        rgba(23,108,255,.18);
}


.itech-contact-process-tag span {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--icp-white);

    box-shadow:
        0 0 0 5px
        rgba(255,255,255,.15);

    animation:
        contactProcessPulse
        4s ease-in-out
        infinite;
}


/* TITLE */

.itech-contact-process-head h2 {

    max-width: 760px;

    margin:
        0 auto
        15px;

    color:
        var(--icp-navy);

    font-size:
        clamp(
            38px,
            3.5vw,
            50px
        );

    line-height: 1.08;

    letter-spacing:
        -2px;

    font-weight: 950;
}


.itech-contact-process-head h2 span {

    display: block;

    margin-top: 5px;

    color:
        var(--icp-blue);
}


/* TEXT */

.itech-contact-process-head > p {

    max-width: 700px;

    margin: 0 auto;

    color:
        var(--icp-muted) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 13.5px;

    line-height: 1.72;

    font-weight: 500;
}


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

.itech-contact-process-track {

    position: relative;

    display: grid;

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

    gap: 20px;

    padding-top: 42px;

    perspective: 1400px;
}


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

.itech-contact-process-line {

    position: absolute;

    z-index: 0;

    top: 24px;

    left: 12%;
    right: 12%;

    height: 2px;

    overflow: hidden;

    border-radius: 20px;

    background:
        #dfe8f5;
}


.itech-contact-process-line > span {

    display: block;

    width: 0;
    height: 100%;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            var(--icp-blue),
            #6ba2ff
        );

    box-shadow:
        0 0 12px
        rgba(23,108,255,.25);

    transition:
        width 2.3s
        cubic-bezier(.16,.8,.22,1);
}


.itech-contact-process.icp-line-active
.itech-contact-process-line > span {

    width: 100%;
}


/* =========================================================
   STEP
========================================================= */

.itech-contact-process-step {

    position: relative;

    min-width: 0;

    min-height: 300px;

    padding:
        45px
        22px
        24px;

    border-radius: 20px;

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

    border:
        1px solid
        rgba(23,108,255,.09);

    box-shadow:
        0 13px 32px
        rgba(6,21,44,.05);

    text-align: center;

    transform-style:
        preserve-3d;

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


/* BLUE BOTTOM LINE */

.itech-contact-process-step::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 36px;
    height: 3px;

    transform:
        translateX(-50%);

    border-radius: 20px;

    background:
        var(--icp-blue);

    transition:
        width .4s ease;
}


/* HOVER */

.itech-contact-process-step:hover {

    border-color:
        rgba(23,108,255,.27);

    box-shadow:
        0 24px 50px
        rgba(6,21,44,.11);
}


.itech-contact-process-step:hover::after {

    width: 95px;
}


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

.itech-contact-process-number {

    position: absolute;

    z-index: 6;

    top: -25px;
    left: 50%;

    width: 50px;
    height: 50px;

    display: grid;

    place-items: center;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        var(--icp-white);

    border:
        2px solid
        #dfe8f5;

    color:
        var(--icp-blue);

    font-size: 10px;

    font-weight: 900;

    box-shadow:
        0 8px 20px
        rgba(6,21,44,.07);

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


.itech-contact-process-step:hover
.itech-contact-process-number {

    background:
        var(--icp-blue);

    color:
        var(--icp-white);

    border-color:
        var(--icp-blue);

    transform:
        translateX(-50%)
        translateY(-5px)
        scale(1.06);

    box-shadow:
        0 13px 28px
        rgba(23,108,255,.20);
}


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

.itech-contact-process-icon {

    position: relative;

    width: 76px;
    height: 76px;

    display: grid;

    place-items: center;

    margin:
        0 auto
        20px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #eef4ff
        );

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

    color:
        var(--icp-blue);

    font-size: 27px;

    box-shadow:
        0 13px 30px
        rgba(6,21,44,.07);

    transform:
        translateZ(25px);

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


.itech-contact-process-icon::after {

    content: "";

    position: absolute;

    width: 24px;
    height: 24px;

    right: 5px;
    bottom: 5px;

    border-radius: 50%;

    background:
        rgba(23,108,255,.08);
}


.itech-contact-process-step:hover
.itech-contact-process-icon {

    background:
        linear-gradient(
            145deg,
            var(--icp-blue),
            var(--icp-blue-dark)
        );

    color:
        var(--icp-white);

    transform:
        translateZ(45px)
        translateY(-6px)
        rotate(-6deg)
        scale(1.06);

    box-shadow:
        0 20px 40px
        rgba(23,108,255,.22);
}


/* =========================================================
   STEP COPY
========================================================= */

.itech-contact-process-copy > span {

    display: block;

    margin-bottom: 6px;

    color:
        var(--icp-blue);

    font-size: 8.5px;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .7px;
}


.itech-contact-process-copy h3 {

    margin:
        0
        0
        9px;

    color:
        var(--icp-navy);

    font-size: 15px;

    line-height: 1.35;

    font-weight: 900;
}


.itech-contact-process-copy p {

    width: 100%;

    margin: 0;

    color:
        var(--icp-muted) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 10px;

    line-height: 1.62;

    font-weight: 500;
}


/* =========================================================
   BOTTOM BAR
========================================================= */

.itech-contact-process-bottom {

    display: grid;

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

    align-items: center;

    gap: 14px;

    margin-top: 42px;

    padding:
        18px
        20px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            var(--icp-navy),
            var(--icp-navy-soft)
        );

    box-shadow:
        0 20px 45px
        rgba(6,21,44,.15);
}


/* ICON */

.itech-contact-process-bottom-icon {

    width: 46px;
    height: 46px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    background:
        var(--icp-blue);

    color:
        var(--icp-white);

    font-size: 18px;

    box-shadow:
        0 11px 24px
        rgba(23,108,255,.22);
}


/* COPY */

.itech-contact-process-bottom-copy {

    min-width: 0;

    display: flex;

    flex-direction: column;
}


.itech-contact-process-bottom-copy > span {

    margin-bottom: 3px;

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

    font-size: 8px;

    text-transform: uppercase;

    letter-spacing: .45px;
}


.itech-contact-process-bottom-copy strong {

    color:
        var(--icp-white);

    font-size: 12px;

    line-height: 1.45;

    font-weight: 800;
}


/* =========================================================
   BUTTON
========================================================= */

.itech-contact-process-btn {

    min-height: 48px;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        6px
        7px
        6px
        17px;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            var(--icp-blue),
            var(--icp-blue-dark)
        );

    color:
        var(--icp-white);

    text-decoration: none;

    white-space: nowrap;

    font-size: 10.5px;

    font-weight: 850;

    box-shadow:
        0 13px 27px
        rgba(23,108,255,.23);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.itech-contact-process-btn > span {

    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    border-radius: 8px;

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

    transition:
        transform .4s ease;
}


.itech-contact-process-btn:hover {

    color:
        var(--icp-white);

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 36px
        rgba(23,108,255,.31);
}


.itech-contact-process-btn:hover span {

    transform:
        rotate(45deg);
}


/* =========================================================
   ANIMATION DEFAULT
========================================================= */

.itech-contact-process-head,
.itech-contact-process-step,
.itech-contact-process-bottom {

    opacity: 1;

    visibility: visible;

    filter: none;

    transform: none;
}


/* =========================================================
   INITIAL
========================================================= */

.itech-contact-process.icp-ready
.itech-contact-process-head {

    opacity: 0;

    filter:
        blur(12px);

    transform:
        perspective(1100px)
        translateY(30px)
        scale(.95)
        rotateX(8deg);
}


.itech-contact-process.icp-ready
.itech-contact-process-step {

    opacity: 0;

    filter:
        blur(12px);

    transform:
        perspective(1000px)
        translateY(45px)
        scale(.87)
        rotateX(14deg);
}


.itech-contact-process.icp-ready
.itech-contact-process-bottom {

    opacity: 0;

    filter:
        blur(10px);

    transform:
        perspective(1000px)
        translateY(30px)
        scale(.94)
        rotateX(8deg);
}


/* =========================================================
   SHOW
========================================================= */

.itech-contact-process.icp-ready
.itech-contact-process-head.icp-show,

.itech-contact-process.icp-ready
.itech-contact-process-step.icp-show,

.itech-contact-process.icp-ready
.itech-contact-process-bottom.icp-show {

    opacity: 1;

    filter:
        blur(0);

    transform:
        perspective(1100px)
        translateY(0)
        scale(1)
        rotateX(0deg);

    transition:
        opacity 1s ease,
        filter 1.25s ease,
        transform 1.5s
        cubic-bezier(.16,.8,.22,1);
}


/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes contactProcessPulse {

    0%,
    100% {

        box-shadow:
            0 0 0 5px
            rgba(255,255,255,.15);
    }

    50% {

        box-shadow:
            0 0 0 9px
            rgba(255,255,255,.03);
    }
}


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

@media (max-width: 991px) {

    .itech-contact-process {

        padding:
            75px 20px
            82px;
    }


    .itech-contact-process-track {

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

        gap:
            55px
            20px;
    }


    .itech-contact-process-line {

        display: none;
    }


    .itech-contact-process-bottom {

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


    .itech-contact-process-btn {

        grid-column:
            1 / -1;

        width: 100%;

        justify-content:
            space-between;

        margin-top: 4px;
    }

}


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

@media (max-width: 767px) {

    .itech-contact-process {

        padding:
            58px
            15px
            68px;
    }


    .itech-contact-process-head {

        margin-bottom: 45px;
    }


    .itech-contact-process-head h2 {

        font-size:
            clamp(
                31px,
                9vw,
                39px
            );

        letter-spacing:
            -1.3px;
    }


    .itech-contact-process-head > p {

        font-size: 13px;
    }


    .itech-contact-process-track {

        grid-template-columns: 1fr;

        gap: 40px;
    }


    .itech-contact-process-step {

        min-height: auto;

        padding:
            42px
            20px
            22px;
    }


    .itech-contact-process-copy p {

        max-width: 440px;

        margin-left: auto;
        margin-right: auto;
    }

}


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

@media (max-width: 480px) {

    .itech-contact-process-bottom {

        grid-template-columns: 1fr;

        text-align: center;
    }


    .itech-contact-process-bottom-icon {

        margin: 0 auto;
    }


    .itech-contact-process-btn {

        grid-column: auto;
    }

}


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

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

    .itech-contact-process-head,
    .itech-contact-process-step,
    .itech-contact-process-bottom {

        opacity: 1 !important;

        visibility: visible !important;

        filter: none !important;

        transform: none !important;

        transition: none !important;
    }


    .itech-contact-process-line > span {

        width: 100% !important;

        transition: none !important;
    }


    .itech-contact-process-tag span {

        animation: none !important;
    }
}


/*----------------------------------*/
/* =========================================================
   PRIVACY POLICY PAGE
========================================================= */

.avk-content-policy-section {

    --avk-navy: #06152c;
    --avk-navy-2: #0a2346;

    --avk-blue: #176cff;
    --avk-blue-dark: #0758df;

    --avk-white: #ffffff;

    --avk-text: #53647b;
    --avk-heading: #071a35;

    --avk-soft: #edf4ff;
    --avk-border: rgba(23, 108, 255, 0.11);

    position: relative;

    width: 100%;

    padding: 95px 20px 110px;

    overflow: hidden;

    isolation: isolate;

    background:
        radial-gradient(
            circle at 8% 9%,
            rgba(23,108,255,.07),
            transparent 22%
        ),
        radial-gradient(
            circle at 93% 82%,
            rgba(23,108,255,.055),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f6f9fe 100%
        );
}


.avk-content-policy-section *,
.avk-content-policy-section *::before,
.avk-content-policy-section *::after {
    box-sizing: border-box;
}


/* =========================================================
   BACKGROUND DECOR
========================================================= */

.avk-content-policy-section::before {

    content: "";

    position: absolute;

    z-index: -2;

    width: 500px;
    height: 500px;

    left: -300px;
    bottom: -220px;

    border-radius: 50%;

    border:
        1px solid
        rgba(23,108,255,.08);

    pointer-events: none;
}


.avk-content-policy-section::after {

    content: "";

    position: absolute;

    z-index: -2;

    width: 380px;
    height: 380px;

    right: -210px;
    top: -160px;

    border-radius: 50%;

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

    pointer-events: none;
}


/* =========================================================
   YOUR EXISTING ABOUT CONTAINER
========================================================= */

.avk-content-policy-section .about-container {

    width: 100%;

    max-width: 1240px;

    margin: 0 auto;

    position: relative;

    z-index: 3;
}


/* =========================================================
   MAIN POLICY BOX
========================================================= */

.avk-content-policy-box {

    position: relative;

    width: 100%;

    max-width: 980px;

    margin: 0 auto;

    padding:
        48px
        56px;

    border-radius: 28px;

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

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

    box-shadow:
        0 28px 70px
        rgba(6,21,44,.08);

    backdrop-filter: blur(14px);

    overflow: hidden;
}


/* TOP BLUE DETAIL */

.avk-content-policy-box::before {

    content: "";

    position: absolute;

    top: 0;
    left: 56px;

    width: 130px;
    height: 4px;

    border-radius:
        0 0 20px 20px;

    background:
        linear-gradient(
            90deg,
            var(--avk-blue),
            var(--avk-blue-dark)
        );
}


/* SUBTLE GLOW */

.avk-content-policy-box::after {

    content: "";

    position: absolute;

    z-index: 0;

    width: 280px;
    height: 280px;

    right: -175px;
    top: -165px;

    border-radius: 50%;

    background:
        rgba(23,108,255,.055);

    pointer-events: none;
}


/* =========================================================
   INTRO
========================================================= */

.avk-content-policy-intro {

    position: relative;

    z-index: 2;

    padding-bottom: 34px;

    margin-bottom: 34px;

    border-bottom:
        1px solid
        var(--avk-border);
}


/* LAST UPDATED BADGE */

.avk-content-policy-intro span {

    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 16px;

    padding:
        8px
        14px;

    border-radius: 50px;

    background:
        var(--avk-soft);

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

    color:
        var(--avk-blue);

    font-size: 10px;

    line-height: 1;

    font-weight: 850;

    letter-spacing: .4px;

    text-transform: uppercase;
}


.avk-content-policy-intro span::before {

    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--avk-blue);

    box-shadow:
        0 0 0 5px
        rgba(23,108,255,.10);

    animation:
        avkPolicyPulse
        4s ease-in-out
        infinite;
}


/* INTRO TITLE */

.avk-content-policy-intro h2 {

    max-width: 700px;

    margin:
        0
        0
        14px;

    color:
        var(--avk-heading);

    font-size:
        clamp(
            38px,
            4vw,
            50px
        );

    line-height: 1.08;

    letter-spacing:
        -2px;

    font-weight: 950;
}


/* INTRO TEXT */

.avk-content-policy-intro p {

    max-width: 820px;

    margin: 0;

    color:
        var(--avk-text) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 14px;

    line-height: 1.8;

    font-weight: 500;
}


/* =========================================================
   POLICY BLOCK
========================================================= */

.avk-policy-content-block {

    position: relative;

    z-index: 2;

    margin-bottom: 0;

    padding:
        30px
        0;

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

    transition:
        background .35s ease,
        padding .35s ease,
        transform .35s ease;
}


.avk-policy-content-block:last-child {

    padding-bottom: 0;

    border-bottom: none;
}


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

.avk-policy-content-block h3 {

    position: relative;

    display: flex;

    align-items: center;

    width: fit-content;

    gap: 11px;

    margin:
        0
        0
        15px;

    padding: 0;

    color:
        var(--avk-heading);

    font-size: 20px;

    line-height: 1.35;

    font-weight: 900;
}


/* REMOVE OLD UNDERLINE */

.avk-policy-content-block h3::after {
    display: none;
}


/* SMALL BLUE LINE BEFORE TITLE */

.avk-policy-content-block h3::before {

    content: "";

    width: 30px;
    height: 4px;

    flex-shrink: 0;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            var(--avk-blue),
            var(--avk-blue-dark)
        );

    box-shadow:
        0 4px 12px
        rgba(23,108,255,.16);

    transition:
        width .35s ease;
}


.avk-policy-content-block:hover h3::before {

    width: 45px;
}


/* =========================================================
   PARAGRAPH
========================================================= */

.avk-policy-content-block p {

    width: 100%;

    margin:
        0
        0
        13px;

    color:
        var(--avk-text) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 13.5px;

    line-height: 1.8;

    font-weight: 500;

    overflow-wrap: anywhere;
}


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


/* =========================================================
   LIST
========================================================= */

.avk-policy-content-block ul {

    display: grid;

    gap: 9px;

    margin:
        15px
        0
        2px;

    padding: 0;

    list-style: none;
}


.avk-policy-content-block ul li {

    position: relative;

    display: grid;

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

    align-items: flex-start;

    gap: 9px;

    margin: 0;

    color:
        #40516a;

    font-size: 13px;

    line-height: 1.65;

    font-weight: 550;
}


/* CUSTOM CHECK */

.avk-policy-content-block ul li::before {

    content: "✓";

    width: 24px;
    height: 24px;

    display: grid;

    place-items: center;

    margin-top: 0;

    border-radius: 7px;

    background:
        var(--avk-soft);

    color:
        var(--avk-blue);

    font-size: 10px;

    line-height: 1;

    font-weight: 900;
}


.avk-policy-content-block ul li::marker {
    display: none;
}


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

@media (hover: hover) {

    .avk-policy-content-block:hover {

        padding-left: 17px;

        padding-right: 17px;

        background:
            linear-gradient(
                90deg,
                rgba(23,108,255,.028),
                rgba(23,108,255,.012),
                transparent
            );

        border-radius: 14px;

        transform:
            translateX(3px);
    }

}


/* =========================================================
   CONTACT SECTION SPECIAL
========================================================= */

.avk-policy-content-block:last-child {

    margin-top: 22px;

    padding:
        25px;

    border-radius: 18px;

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

    background:
        linear-gradient(
            135deg,
            #f8fbff,
            #eef4ff
        );
}


.avk-policy-content-block:last-child h3 {

    color:
        var(--avk-navy);
}


.avk-policy-content-block:last-child p {

    margin-bottom: 6px;

    color:
        #50617a !important;
}


/* =========================================================
   LINK SUPPORT
========================================================= */

.avk-policy-content-block a {

    color:
        var(--avk-blue);

    text-decoration: none;

    font-weight: 750;

    transition:
        color .25s ease;
}


.avk-policy-content-block a:hover {

    color:
        var(--avk-blue-dark);
}


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

.about-banner {

    --policy-banner-navy: #06152c;
    --policy-banner-blue: #176cff;

    position: relative;

    width: 100%;

    min-height: 275px;

    display: flex;

    align-items: center;

    overflow: hidden;

    isolation: isolate;

    background:
        radial-gradient(
            circle at 78% 30%,
            rgba(23,108,255,.24),
            transparent 25%
        ),
        radial-gradient(
            circle at 22% 120%,
            rgba(23,108,255,.10),
            transparent 32%
        ),
        linear-gradient(
            125deg,
            #06152c 0%,
            #071b39 55%,
            #0b254c 100%
        );
}


/* BANNER DECOR */

.about-banner::before {

    content: "";

    position: absolute;

    width: 480px;
    height: 480px;

    right: -200px;
    top: -310px;

    border-radius: 50%;

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

    pointer-events: none;
}


.about-banner::after {

    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    left: -100px;
    bottom: -170px;

    border-radius: 50%;

    background:
        rgba(23,108,255,.08);

    pointer-events: none;
}


/* EXISTING CONTAINER */

.about-banner .about-container {

    position: relative;

    z-index: 3;

    width: 100%;

    max-width: 1240px;

    margin: 0 auto;

    padding:
        0 20px;
}


/* BANNER CONTENT */

.about-banner-content {

    position: relative;

    max-width: 750px;

    padding:
        70px
        0;
}


/* BLUE LINE */

.about-banner-content::before {

    content: "LEGAL";

    display: inline-flex;

    align-items: center;

    margin-bottom: 16px;

    padding:
        7px
        13px;

    border-radius: 50px;

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

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

    color:
        #8cb7ff;

    font-size: 9px;

    line-height: 1;

    font-weight: 850;

    letter-spacing: .8px;
}


/* BANNER TITLE */

.about-banner-content h1 {

    margin: 0;

    color:
        #ffffff;

    font-size:
        clamp(
            42px,
            5vw,
            62px
        );

    line-height: 1.05;

    letter-spacing:
        -2.3px;

    font-weight: 950;
}


/* =========================================================
   SAFE VISIBLE STATE
========================================================= */

.avk-content-policy-intro,
.avk-policy-content-block,
.about-banner-content {

    opacity: 1;

    visibility: visible;

    filter: none;

    transform: none;
}


/* =========================================================
   INITIAL 3D ANIMATION
========================================================= */

.site-animate-section.avk-content-policy-section
.avk-content-policy-intro {

    opacity: 0;

    filter:
        blur(12px);

    transform:
        perspective(1000px)
        translateY(35px)
        scale(.95)
        rotateX(8deg);

    transition:
        opacity 1s ease,
        filter 1.25s ease,
        transform 1.45s
        cubic-bezier(.16,.8,.22,1);
}


.site-animate-section.avk-content-policy-section
.avk-policy-content-block {

    opacity: 0;

    filter:
        blur(9px);

    transform:
        perspective(1000px)
        translateY(35px)
        scale(.96)
        rotateX(7deg);

    transition:
        opacity .9s ease,
        filter 1.1s ease,
        transform 1.35s
        cubic-bezier(.16,.8,.22,1);
}


/* BANNER INITIAL */

.about-banner.site-animate-section
.about-banner-content {

    opacity: 0;

    filter:
        blur(12px);

    transform:
        perspective(1200px)
        translateY(30px)
        scale(.94)
        rotateX(8deg);

    transition:
        opacity 1.1s ease,
        filter 1.3s ease,
        transform 1.6s
        cubic-bezier(.16,.8,.22,1);
}


/* =========================================================
   ACTIVE
========================================================= */

.site-animate-section.site-animate-active
.avk-content-policy-intro,

.site-animate-section.site-animate-active
.avk-policy-content-block,

.about-banner.site-animate-active
.about-banner-content {

    opacity: 1;

    visibility: visible;

    filter: blur(0);

    transform:
        perspective(1000px)
        translateY(0)
        scale(1)
        rotateX(0deg);
}


/* =========================================================
   STAGGER
========================================================= */

.site-animate-section.site-animate-active
.avk-content-policy-intro {
    transition-delay: .08s;
}


.site-animate-section.site-animate-active
.avk-policy-content-block:nth-of-type(2) {
    transition-delay: .13s;
}


.site-animate-section.site-animate-active
.avk-policy-content-block:nth-of-type(3) {
    transition-delay: .19s;
}


.site-animate-section.site-animate-active
.avk-policy-content-block:nth-of-type(4) {
    transition-delay: .25s;
}


.site-animate-section.site-animate-active
.avk-policy-content-block:nth-of-type(5) {
    transition-delay: .31s;
}


.site-animate-section.site-animate-active
.avk-policy-content-block:nth-of-type(6) {
    transition-delay: .37s;
}


.site-animate-section.site-animate-active
.avk-policy-content-block:nth-of-type(7) {
    transition-delay: .43s;
}


.site-animate-section.site-animate-active
.avk-policy-content-block:nth-of-type(8) {
    transition-delay: .49s;
}


.site-animate-section.site-animate-active
.avk-policy-content-block:nth-of-type(9) {
    transition-delay: .55s;
}


.site-animate-section.site-animate-active
.avk-policy-content-block:nth-of-type(10) {
    transition-delay: .61s;
}


/* =========================================================
   PULSE
========================================================= */

@keyframes avkPolicyPulse {

    0%,
    100% {

        box-shadow:
            0 0 0 5px
            rgba(23,108,255,.10);
    }

    50% {

        box-shadow:
            0 0 0 9px
            rgba(23,108,255,.02);
    }

}


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

@media (max-width: 991px) {

    .avk-content-policy-section {

        padding:
            75px
            20px
            85px;
    }


    .avk-content-policy-box {

        padding:
            40px
            40px;

        border-radius: 24px;
    }


    .avk-content-policy-box::before {

        left: 40px;
    }


    .about-banner {

        min-height: 245px;
    }


    .about-banner-content {

        padding:
            60px
            0;
    }

}


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

@media (max-width: 767px) {

    .avk-content-policy-section {

        padding:
            58px
            15px
            68px;
    }


    .avk-content-policy-section .about-container {

        padding: 0;
    }


    .avk-content-policy-box {

        padding:
            31px
            24px;

        border-radius: 20px;
    }


    .avk-content-policy-box::before {

        left: 24px;

        width: 90px;
    }


    .avk-content-policy-intro {

        padding-bottom: 27px;

        margin-bottom: 20px;
    }


    .avk-content-policy-intro h2 {

        font-size:
            clamp(
                31px,
                9vw,
                39px
            );

        letter-spacing:
            -1.3px;
    }


    .avk-content-policy-intro p {

        font-size: 13px;

        line-height: 1.72;
    }


    .avk-policy-content-block {

        padding:
            25px
            0;
    }


    .avk-policy-content-block h3 {

        font-size: 18px;
    }


    .avk-policy-content-block p {

        font-size: 12.5px;

        line-height: 1.72;
    }


    .avk-policy-content-block ul li {

        font-size: 12.5px;
    }


    .avk-policy-content-block:last-child {

        padding: 20px;
    }


    .about-banner {

        min-height: 215px;
    }


    .about-banner .about-container {

        padding:
            0
            20px;
    }


    .about-banner-content {

        padding:
            52px
            0;
    }


    .about-banner-content h1 {

        font-size:
            clamp(
                36px,
                11vw,
                48px
            );

        letter-spacing:
            -1.5px;
    }

}


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

@media (max-width: 480px) {

    .avk-content-policy-box {

        padding:
            27px
            18px;
    }


    .avk-content-policy-box::before {

        left: 18px;
    }


    .avk-content-policy-intro span {

        font-size: 8.5px;
    }


    .avk-policy-content-block h3 {

        gap: 8px;

        font-size: 17px;
    }


    .avk-policy-content-block h3::before {

        width: 22px;
    }


    .avk-policy-content-block ul li {

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


    .avk-policy-content-block ul li::before {

        width: 22px;
        height: 22px;
    }

}


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

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

    .avk-content-policy-intro,
    .avk-policy-content-block,
    .about-banner-content {

        opacity: 1 !important;

        visibility: visible !important;

        filter: none !important;

        transform: none !important;

        transition: none !important;
    }


    .avk-content-policy-intro span::before {

        animation: none !important;
    }

}