/* ==================================================

   COLORS

================================================== */



:root {



    --navy: #0a234f;



    --navy-dark: #061735;



    --navy-light: #183765;



    --orange: #ff7a00;



    --orange-dark: #e86900;



    --orange-light: #fff2e6;



    --white: #ffffff;



    --bg: #f7f9fc;



    --text: #102b57;



    --grey: #68758d;



    --border: #e6eaf1;



    --shadow:

        0 20px 50px rgba(5, 28, 65, 0.13);



}





/* ==================================================

   RESET

================================================== */



* {



    margin: 0;



    padding: 0;



    box-sizing: border-box;



}





html {



    scroll-behavior: smooth;



}





body {



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



    background: var(--bg);



    color: var(--text);



}





a {



    text-decoration: none;



}





/* ==================================================

   COMPLETE HEADER

================================================== */



.site-header {



    position: sticky;



    top: 0;



    z-index: 9999;



}





/* ==================================================

   UNIQUE TOP HEADER

================================================== */



.top-header {



    width: 100%;



    color: white;



    background:



        linear-gradient(

            105deg,

            #061735 0%,

            #0a234f 55%,

            #15396e 100%

        );



    position: relative;



    overflow: hidden;



}





/* decorative orange line */



.top-header::after {



    content: "";



    position: absolute;



    right: 0;



    bottom: 0;



    height: 2px;



    width: 35%;



    background:



        linear-gradient(

            90deg,

            transparent,

            var(--orange)

        );



}





.top-container {



    max-width: 1480px;



    min-height: 42px;



    margin: auto;



    padding: 0 30px;



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 30px;



}





.top-left,

.top-right {



    display: flex;



    align-items: center;



}





.top-left {



    gap: 18px;



}





.top-right {



    gap: 25px;



}





.top-info {



    color:

        rgba(255, 255, 255, 0.87);



    font-size: 12px;



    font-weight: 500;



    display: flex;



    gap: 8px;



    align-items: center;



    transition: 0.25s;



}





.top-info:hover {



    color: var(--orange);



}





.top-icon {



    width: 25px;



    height: 25px;



    display: grid;



    place-items: center;



    border-radius: 50%;



    color: var(--orange);



    background:

        rgba(255,255,255,.08);



}





.top-divider {



    width: 1px;



    height: 16px;



    background:

        rgba(255,255,255,.18);



}





.working-hours {



    font-size: 12px;



    color:

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



    display: flex;



    align-items: center;



    gap: 8px;



}





.status-dot {



    width: 7px;



    height: 7px;



    background: #35d879;



    border-radius: 50%;



    box-shadow:

        0 0 0 4px

        rgba(53,216,121,.12);



}





.top-help-link {



    font-size: 12px;



    font-weight: 600;



    color: white;



    display: flex;



    align-items: center;



    gap: 7px;



}





.top-help-link span {



    color: var(--orange);



    transition: .2s;



}





.top-help-link:hover span {



    transform: translateX(4px);



}





/* ==================================================

   MAIN HEADER

================================================== */



.main-header {



    background:

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



    box-shadow:

        0 7px 30px

        rgba(8, 32, 70, .07);



    backdrop-filter: blur(15px);



}





.header-container {



    max-width: 1480px;



    min-height: 88px;



    margin: auto;



    padding: 0 30px;



    display: flex;



    align-items: center;



    gap: 22px;



}





/* ==================================================

   LOGO

================================================== */



.logo {



    flex:

        0 0 230px;



    width: 230px;



}





.logo img {



    width: 100%;



    display: block;



    height: auto;



}





/* ==================================================

   NAVBAR

================================================== */



.navbar {



    margin-left: auto;



}





.nav-list {



    display: flex;



    align-items: center;



    gap: 3px;



    list-style: none;



}





.nav-item {



    position: relative;



}





/* ==================================================

   MAIN NAV LINKS

================================================== */



.nav-link {



    border: 0;



    background: transparent;



    padding: 13px 12px;



    color: var(--navy);



    font-family: inherit;



    font-size: 13.5px;



    font-weight: 600;



    cursor: pointer;



    border-radius: 9px;



    display: flex;



    align-items: center;



    gap: 8px;



    white-space: nowrap;



    transition:

        color .2s,

        background .2s;



}





.nav-link:hover {



    background:

        var(--orange-light);



    color:

        var(--orange);



}





/* ==================================================

   + / - ICON

================================================== */



.plus-icon {



    width: 12px;



    height: 12px;



    position: relative;



    display: inline-block;



    flex-shrink: 0;



}





/* horizontal line */



.plus-icon::before {



    content: "";



    position: absolute;



    width: 10px;



    height: 1.5px;



    background:

        currentColor;



    left: 1px;



    top: 5px;



    border-radius: 10px;



}





/* vertical line */



.plus-icon::after {



    content: "";



    position: absolute;



    width: 1.5px;



    height: 10px;



    background:

        currentColor;



    left: 5px;



    top: 1px;



    border-radius: 10px;



    transition:

        opacity .2s,

        transform .2s;



}





/* REMOVE VERTICAL LINE ON HOVER */



.has-dropdown:hover

> .nav-link

.plus-icon::after {



    opacity: 0;



    transform:

        rotate(90deg);



}





/* ==================================================

   DROPDOWN

================================================== */



.dropdown-menu {



    position: absolute;



    top:

        calc(100% + 11px);



    left: 0;



    min-width: 245px;



    padding: 8px;



    border:

        1px solid var(--border);



    background:

        rgba(255,255,255,.99);



    border-radius: 13px;



    box-shadow:

        var(--shadow);



    opacity: 0;



    visibility: hidden;



    transform:

        translateY(8px);



    transition:

        opacity .18s,

        transform .18s,

        visibility .18s;



}





/* triangle */



.dropdown-menu::after {



    content: "";



    position: absolute;



    top: -6px;



    left: 28px;



    width: 11px;



    height: 11px;



    background: white;



    border-left:

        1px solid var(--border);



    border-top:

        1px solid var(--border);



    transform:

        rotate(45deg);



}





/* hover bridge */



.dropdown-menu::before {



    content: "";



    position: absolute;



    top: -15px;



    left: 0;



    height: 15px;



    width: 100%;



}





.has-dropdown:hover

> .dropdown-menu {



    opacity: 1;



    visibility: visible;



    transform:

        translateY(0);



}





/* ==================================================

   DROPDOWN LINKS

================================================== */



.dropdown-link,

.submenu-toggle {



    width: 100%;



    min-height: 42px;



    padding:

        10px 12px;



    border: none;



    background:

        transparent;



    border-radius: 8px;



    color:

        var(--text);



    font-family: inherit;



    font-size: 13.5px;



    font-weight: 500;



    cursor: pointer;



    text-align: left;



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 15px;



    transition: .2s;



}





.dropdown-link:hover,

.submenu-toggle:hover,

.has-submenu:hover

> .submenu-toggle {



    color:

        var(--orange);



    background:

        var(--orange-light);



}





/* ==================================================

   CUSTOM CHEVRON

================================================== */



.chevron-icon {



    width: 8px;



    height: 8px;



    border-right:

        1.7px solid currentColor;



    border-top:

        1.7px solid currentColor;



    transform:

        rotate(45deg);



    margin-right: 3px;



    transition:

        transform .2s;



}





/* ==================================================

   SUBMENU

================================================== */



.has-submenu {



    position: relative;



}





.submenu {



    position: absolute;



    top: -8px;



    left:

        calc(100% + 9px);



    min-width: 285px;



    padding: 8px;



    background: white;



    border:

        1px solid var(--border);



    border-radius: 13px;



    box-shadow:

        var(--shadow);



    opacity: 0;



    visibility: hidden;



    transform:

        translateX(8px);



    transition:

        .18s ease;



}





.submenu::before {



    content: "";



    position: absolute;



    width: 12px;



    height: 100%;



    left: -12px;



    top: 0;



}





.has-submenu:hover

> .submenu {



    opacity: 1;



    visibility: visible;



    transform:

        translateX(0);



}





.submenu a {



    min-height: 42px;



    padding:

        10px 12px;



    display: flex;



    align-items: center;



    border-radius: 8px;



    color:

        var(--text);



    font-size: 13.5px;



    font-weight: 500;



    white-space: nowrap;



    transition: .2s;



}





.submenu a:hover {



    color:

        var(--orange);



    background:

        var(--orange-light);



}





/* menu widths */



.cloud-dropdown {



    min-width: 285px;



}





.business-dropdown {



    min-width: 315px;



}





.consultancy-dropdown {



    min-width: 250px;



}





/* CONSULTANCY SUBMENU OPEN LEFT */



.submenu-left {



    left: auto;



    right:

        calc(100% + 9px);



    transform:

        translateX(-8px);



}





.has-submenu:hover

> .submenu-left {



    transform:

        translateX(0);



}





/* ==================================================

   CTA

================================================== */



.support-button {



    display: flex;



    align-items: center;



    gap: 9px;



    color: white;



    background:



        linear-gradient(

            135deg,

            var(--orange),

            #ff972f

        );



    border-radius: 10px;



    padding:

        8px 15px 8px 8px;



    font-size: 13px;



    font-weight: 700;



    flex-shrink: 0;



    box-shadow:



        0 8px 20px

        rgba(255,122,0,.22);



    transition: .2s;



}





.support-button:hover {



    transform:

        translateY(-2px);



    box-shadow:



        0 12px 28px

        rgba(255,122,0,.30);



}





.support-circle {



    width: 31px;



    height: 31px;



    border-radius: 8px;



    display: grid;



    place-items: center;



    background:

        rgba(255,255,255,.18);



    font-size: 17px;



}





/* ==================================================

   MOBILE TOGGLE

================================================== */



.mobile-toggle {



    display: none;



    width: 43px;



    height: 43px;



    background: white;



    border:

        1px solid var(--border);



    border-radius: 9px;



    padding: 9px;



    cursor: pointer;



}





.mobile-toggle span {



    display: block;



    width: 100%;



    height: 2px;



    background:

        var(--navy);



    margin: 5px 0;



    border-radius: 10px;



    transition:

        .25s;



}





/* ==================================================

   DEMO

================================================== */



.demo-section {



    min-height: 70vh;



    display: grid;



    place-items: center;



    text-align: center;



    padding: 70px 20px;



    background:



        radial-gradient(

            circle at 20% 10%,

            rgba(255,122,0,.09),

            transparent 30%

        ),



        radial-gradient(

            circle at 90% 30%,

            rgba(10,35,79,.08),

            transparent 35%

        ),



        #f7f9fc;



}





.demo-label {



    color: var(--orange);



    font-weight: 700;



}





.demo-section h1 {



    margin:

        12px 0;



    color:

        var(--navy);



    font-size:

        clamp(36px, 6vw, 64px);



}





.demo-section p {



    color:

        var(--grey);



}





/* ==================================================

   LAPTOP RESPONSIVE

================================================== */



@media(max-width: 1280px) {



    .header-container {



        padding:

            0 18px;



        gap: 12px;



    }





    .logo {



        flex-basis: 190px;



        width: 190px;



    }





    .nav-link {



        font-size: 12.5px;



        padding:

            12px 8px;



        gap: 6px;



    }





    .support-button {



        padding:

            7px 11px 7px 7px;



    }



}





/* ==================================================

   MOBILE / TABLET

================================================== */



@media(max-width: 1050px) {



    .top-container {



        padding:

            0 18px;



    }





    .header-container {



        min-height: 78px;



        flex-wrap: wrap;



        padding:

            8px 18px;



    }





    .logo {



        width: 205px;



        flex-basis: 205px;



    }





    .mobile-toggle {



        display: block;



        margin-left: auto;



    }





    .support-button {



        order: 2;



    }





    .navbar {



        display: none;



        width: 100%;



        order: 3;



        margin: 0;



        border-top:

            1px solid var(--border);



    }





    .site-header.menu-open

    .navbar {



        display: block;



    }





    .nav-list {



        display: block;



        width: 100%;



        padding:

            8px 0;



        max-height:

            calc(100vh - 130px);



        overflow-y: auto;



    }





    .nav-item {



        border-bottom:

            1px solid var(--border);



    }





    .nav-link {



        width: 100%;



        min-height: 48px;



        padding:

            13px 11px;



        font-size: 14px;



        justify-content:

            space-between;



    }





    /* MOBILE + TO - */



    .has-dropdown.open

    > .nav-link

    .plus-icon::after {



        opacity: 0;



    }





    /* stop desktop hover */



    .has-dropdown:hover

    > .dropdown-menu {



        opacity: 1;



        visibility: visible;



    }





    .dropdown-menu {



        position: static;



        min-width: 100%;



        display: none;



        opacity: 1;



        visibility: visible;



        transform: none;



        border: none;



        border-radius: 0;



        box-shadow: none;



        padding:

            0 0 8px 12px;



    }





    .dropdown-menu::before,

    .dropdown-menu::after {



        display: none;



    }





    .has-dropdown.open

    > .dropdown-menu {



        display: block;



    }





    .dropdown-link,

    .submenu-toggle {



        min-height: 42px;



        font-size: 13.5px;



    }





    /* nested accordion */



    .submenu {



        position: static;



        display: none;



        width: 100%;



        min-width: 100%;



        opacity: 1;



        visibility: visible;



        transform: none !important;



        border: none;



        box-shadow: none;



        border-radius: 0;



        padding:

            2px 0 5px 13px;



        margin-left: 7px;



        border-left:

            2px solid

            var(--orange-light);



    }





    .has-submenu.open

    > .submenu {



        display: block;



    }





    .has-submenu.open

    > .submenu-toggle

    .chevron-icon {



        transform:

            rotate(135deg);



    }





    .submenu a {



        white-space: normal;



    }





    .submenu-left {



        position: static;



    }



}





/* ==================================================

   SMALL MOBILE

================================================== */



@media(max-width: 650px) {



    .top-header {



        display: none;



    }





    .header-container {



        padding:

            7px 13px;



    }





    .logo {



        width: 175px;



        flex-basis: 175px;



    }





    .support-button {



        display: none;



    }





    .mobile-toggle {



        margin-left: auto;



    }



}





/* =====================================================

   BOOTSTRAP HEADER CONFLICT FIX

   Keep this at the END of style.css

===================================================== */



html,

body {

    width: 100%;

    max-width: 100%;

    overflow-x: hidden;

}





/* =====================================================

   HEADER RESET AGAINST BOOTSTRAP

===================================================== */



.site-header,

.site-header *,

.site-header *::before,

.site-header *::after {

    box-sizing: border-box;

}



.site-header {

    width: 100%;

    overflow: visible;

}



.site-header ul,

.site-header li {

    margin: 0;

    padding: 0;

    list-style: none;

}



.site-header a {

    text-decoration: none;



}

.site-header .nav-item a{

    color: #ff8b1c;

}

.site-header button {

    margin: 0;

    border: 0;

    box-shadow: none;

    font-family: inherit;

}





/* =====================================================

   HEADER CONTAINERS

===================================================== */



.site-header .header-container,

.site-header .top-container {

    width: 100%;

    max-width: 1480px;



    margin-left: auto;

    margin-right: auto;

}





/* =====================================================

   NAV FIX

===================================================== */



.site-header .navbar {

    margin-left: auto;

}



.site-header .nav-list {

    display: flex;

    align-items: center;

    gap: 3px;



    margin: 0;

    padding: 0;

}



.site-header .nav-item {

    position: relative;

}





/* =====================================================

   MAIN NAV LINK

===================================================== */



.site-header .nav-link {

    width: auto;



    display: flex;

    align-items: center;



    padding: 13px 11px;



    border: 0;

    border-radius: 9px;



    background: transparent;



    color: var(--navy);



    font-family: inherit;

    font-size: 13.5px;

    line-height: 1.2;

    font-weight: 600;



    white-space: nowrap;



    box-shadow: none;



    cursor: pointer;



    transition:

        color .2s ease,

        background .2s ease;

}



.site-header .nav-link:hover,

.site-header .nav-link:focus {

    color: var(--orange);

    background: var(--light-orange);

    box-shadow: none;

}





/* =====================================================

   FIRST LEVEL DROPDOWN

===================================================== */



.site-header .dropdown-menu {

    position: absolute;



    top: calc(100% + 10px);

    left: 0;



    display: block;



    min-width: 245px;



    margin: 0;

    padding: 8px;



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

    border-radius: 13px;



    background: #fff;



    box-shadow: var(--shadow);



    opacity: 0;

    visibility: hidden;



    transform: translateY(8px);



    transition:

        opacity .18s ease,

        visibility .18s ease,

        transform .18s ease;

}



.site-header .dropdown-menu::before {

    content: "";



    position: absolute;



    top: -12px;

    left: 0;



    width: 100%;

    height: 12px;

}



.site-header .dropdown-parent:hover > .dropdown-menu,

.site-header .has-dropdown:hover > .dropdown-menu {

    opacity: 1;

    visibility: visible;



    transform: translateY(0);

}





/* =====================================================

   DROPDOWN LINKS

===================================================== */



.site-header .dropdown-menu > a,

.site-header .submenu-toggle {

    width: 100%;



    min-height: 42px;



    display: flex;

    align-items: center;

    justify-content: space-between;



    padding: 10px 12px;



    border: 0;

    border-radius: 8px;



    background: transparent;



    color: var(--text);



    font-family: inherit;

    font-size: 13.5px;

    line-height: 1.35;

    font-weight: 500;



    text-align: left;



    box-shadow: none;



    cursor: pointer;



    transition:

        background .18s ease,

        color .18s ease;

}



.site-header .dropdown-menu > a:hover,

.site-header .submenu-toggle:hover,

.site-header .submenu-parent:hover > .submenu-toggle,

.site-header .has-submenu:hover > .submenu-toggle {

    color: var(--orange);

    background: var(--light-orange);

}





/* =====================================================

   IMPORTANT

   REMOVE ONLY INNER SUBMENU ARROWS

===================================================== */



/* Custom chevron */

.site-header .submenu-toggle .chevron-icon {

    display: none !important;

}



/* If inner arrow is span with › */

.site-header .submenu-toggle > span:last-child:not(:first-child) {

    display: none !important;

}



/* Common nested arrow classes */

.site-header .submenu-toggle .arrow,

.site-header .submenu-toggle .submenu-arrow,

.site-header .submenu-toggle .dropdown-arrow {

    display: none !important;

}



/* Bootstrap may generate dropdown caret */

.site-header .submenu-toggle.dropdown-toggle::after {

    display: none !important;

    content: none !important;

}



/* Keep text aligned after arrow removal */

.site-header .submenu-toggle {

    justify-content: flex-start !important;

    gap: 0 !important;

}





/* =====================================================

   NESTED SUBMENU

===================================================== */



.site-header .submenu-parent,

.site-header .has-submenu {

    position: relative;

}



.site-header .submenu {

    position: absolute;



    top: -8px;

    left: calc(100% + 9px);



    display: block;



    min-width: 275px;



    margin: 0;

    padding: 8px;



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

    border-radius: 13px;



    background: #fff;



    box-shadow: var(--shadow);



    opacity: 0;

    visibility: hidden;



    transform: translateX(8px);



    transition:

        opacity .18s ease,

        visibility .18s ease,

        transform .18s ease;

}



.site-header .submenu::before {

    content: "";



    position: absolute;



    top: 0;

    left: -10px;



    width: 10px;

    height: 100%;

}



.site-header .submenu-parent:hover > .submenu,

.site-header .has-submenu:hover > .submenu {

    opacity: 1;

    visibility: visible;



    transform: translateX(0);

}





/* =====================================================

   SUBMENU LINKS

===================================================== */



.site-header .submenu a {

    display: flex;

    align-items: center;



    min-height: 40px;



    padding: 9px 11px;



    border-radius: 8px;



    color: var(--text);



    font-size: 13px;

    line-height: 1.35;

    font-weight: 500;



    text-decoration: none;



    transition:

        color .18s ease,

        background .18s ease;

}



.site-header .submenu a:hover {

    color: var(--orange);

    background: var(--light-orange);

}





/* =====================================================

   RIGHT SIDE MENU FIX

===================================================== */



.site-header .consultancy-menu,

.site-header .consultancy-dropdown {

    left: auto;

    right: 0;

}



.site-header .consultancy-menu .submenu,

.site-header .consultancy-dropdown .submenu,

.site-header .submenu-left {

    left: auto;



    right: calc(100% + 9px);

}





/* =====================================================

   BOOTSTRAP CARET FIX

   Keep main dropdown icons as your own design

===================================================== */



/*

Bootstrap .dropdown-toggle::after may create

an unwanted second arrow.

Remove Bootstrap's generated caret only.

*/



.site-header .nav-link.dropdown-toggle::after {

    display: none !important;

    content: none !important;

}





/* =====================================================

   MOBILE / TABLET

===================================================== */



@media(max-width: 1050px) {



    .site-header .navbar {

        width: 100%;

        margin: 0;



        display: none;



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

    }



    .site-header.menu-open .navbar,

    .site-header.mobile-open .navbar {

        display: block;

    }





    .site-header .nav-list {

        display: block;



        width: 100%;



        max-height: calc(100vh - 100px);



        overflow-y: auto;

        overflow-x: hidden;



        padding: 8px 0;

    }





    .site-header .nav-item {

        width: 100%;



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

    }





    .site-header .nav-link {

        width: 100%;



        min-height: 48px;



        padding: 13px 11px;



        justify-content: space-between;



        font-size: 14px;

    }





    /* MAIN DROPDOWN */



    .site-header .dropdown-menu {

        position: static;



        display: none;



        width: 100%;

        min-width: 0;



        margin: 0;



        padding: 0 0 8px 12px;



        border: 0;

        border-radius: 0;



        box-shadow: none;



        opacity: 1;

        visibility: visible;



        transform: none;

    }





    .site-header .dropdown-menu::before {

        display: none;

    }





    .site-header .dropdown-parent:hover > .dropdown-menu,

    .site-header .has-dropdown:hover > .dropdown-menu {

        display: none;

    }





    .site-header .dropdown-parent.open > .dropdown-menu,

    .site-header .has-dropdown.open > .dropdown-menu {

        display: block;

    }





    /* NESTED */



    .site-header .submenu {

        position: static;



        display: none;



        width: 100%;

        min-width: 0;



        margin-left: 7px;



        padding: 2px 0 5px 12px;



        border: 0;



        border-left:

            2px solid var(--light-orange);



        border-radius: 0;



        box-shadow: none;



        opacity: 1;

        visibility: visible;



        transform: none;

    }





    .site-header .submenu::before {

        display: none;

    }





    .site-header .submenu-parent:hover > .submenu,

    .site-header .has-submenu:hover > .submenu {

        display: none;

    }





    .site-header .submenu-parent.open > .submenu,

    .site-header .has-submenu.open > .submenu {

        display: block;

    }





    /* INNER SUBMENU ARROWS REMAIN REMOVED */



    .site-header .submenu-toggle {

        justify-content: flex-start !important;

    }



}





/* =====================================================

   SMALL MOBILE

===================================================== */



@media(max-width: 650px) {



    .site-header .top-header {

        display: none;

    }





    .site-header .support-button {

        display: none;

    }



}

/* =====================================================

   BOOTSTRAP HEADER CONFLICT FIX

   Keep this at the END of style.css

===================================================== */



html,

body {

    width: 100%;

    max-width: 100%;

    overflow-x: hidden;

}





/* =====================================================

   HEADER RESET AGAINST BOOTSTRAP

===================================================== */



.site-header,

.site-header *,

.site-header *::before,

.site-header *::after {

    box-sizing: border-box;

}



.site-header {

    width: 100%;

    overflow: visible;

}



.site-header ul,

.site-header li {

    margin: 0;

    padding: 0;

    list-style: none;

}



.site-header a {

    text-decoration: none;

}



.site-header button {

    margin: 0;

    border: 0;

    box-shadow: none;

    font-family: inherit;

}





/* =====================================================

   HEADER CONTAINERS

===================================================== */



.site-header .header-container,

.site-header .top-container {

    width: 100%;

    max-width: 1480px;



    margin-left: auto;

    margin-right: auto;

}





/* =====================================================

   NAV FIX

===================================================== */



.site-header .navbar {

    margin-left: auto;

}



.site-header .nav-list {

    display: flex;

    align-items: center;

    gap: 3px;



    margin: 0;

    padding: 0;

}



.site-header .nav-item {

    position: relative;

}





/* =====================================================

   MAIN NAV LINK

===================================================== */



.site-header .nav-link {

    width: auto;



    display: flex;

    align-items: center;



    padding: 13px 11px;



    border: 0;

    border-radius: 9px;



    background: transparent;



    color: var(--navy);



    font-family: inherit;

    font-size: 13.5px;

    line-height: 1.2;

    font-weight: 600;



    white-space: nowrap;



    box-shadow: none;



    cursor: pointer;



    transition:

        color .2s ease,

        background .2s ease;

}



.site-header .nav-link:hover,

.site-header .nav-link:focus {

    color: var(--orange);

    background: var(--light-orange);

    box-shadow: none;

}





/* =====================================================

   FIRST LEVEL DROPDOWN

===================================================== */



.site-header .dropdown-menu {

    position: absolute;



    top: calc(100% + 10px);

    left: 0;



    display: block;



    min-width: 245px;



    margin: 0;

    padding: 8px;



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

    border-radius: 13px;



    background: #fff;



    box-shadow: var(--shadow);



    opacity: 0;

    visibility: hidden;



    transform: translateY(8px);



    transition:

        opacity .18s ease,

        visibility .18s ease,

        transform .18s ease;

}



.site-header .dropdown-menu::before {

    content: "";



    position: absolute;



    top: -12px;

    left: 0;



    width: 100%;

    height: 12px;

}



.site-header .dropdown-parent:hover > .dropdown-menu,

.site-header .has-dropdown:hover > .dropdown-menu {

    opacity: 1;

    visibility: visible;



    transform: translateY(0);

}





/* =====================================================

   DROPDOWN LINKS

===================================================== */



.site-header .dropdown-menu > a,

.site-header .submenu-toggle {

    width: 100%;



    min-height: 42px;



    display: flex;

    align-items: center;

    justify-content: space-between;



    padding: 10px 12px;



    border: 0;

    border-radius: 8px;



    background: transparent;



    color: var(--text);



    font-family: inherit;

    font-size: 13.5px;

    line-height: 1.35;

    font-weight: 500;



    text-align: left;



    box-shadow: none;



    cursor: pointer;



    transition:

        background .18s ease,

        color .18s ease;

}



.site-header .dropdown-menu > a:hover,

.site-header .submenu-toggle:hover,

.site-header .submenu-parent:hover > .submenu-toggle,

.site-header .has-submenu:hover > .submenu-toggle {

    color: var(--orange);

    background: var(--light-orange);

}





/* =====================================================

   IMPORTANT

   REMOVE ONLY INNER SUBMENU ARROWS

===================================================== */



/* Custom chevron */

.site-header .submenu-toggle .chevron-icon {

    display: none !important;

}



/* If inner arrow is span with › */

.site-header .submenu-toggle > span:last-child:not(:first-child) {

    display: none !important;

}



/* Common nested arrow classes */

.site-header .submenu-toggle .arrow,

.site-header .submenu-toggle .submenu-arrow,

.site-header .submenu-toggle .dropdown-arrow {

    display: none !important;

}



/* Bootstrap may generate dropdown caret */

.site-header .submenu-toggle.dropdown-toggle::after {

    display: none !important;

    content: none !important;

}



/* Keep text aligned after arrow removal */

.site-header .submenu-toggle {

    justify-content: flex-start !important;

    gap: 0 !important;

}





/* =====================================================

   NESTED SUBMENU

===================================================== */



.site-header .submenu-parent,

.site-header .has-submenu {

    position: relative;

}



.site-header .submenu {

    position: absolute;



    top: -8px;

    left: calc(100% + 9px);



    display: block;



    min-width: 275px;



    margin: 0;

    padding: 8px;



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

    border-radius: 13px;



    background: #fff;



    box-shadow: var(--shadow);



    opacity: 0;

    visibility: hidden;



    transform: translateX(8px);



    transition:

        opacity .18s ease,

        visibility .18s ease,

        transform .18s ease;

}



.site-header .submenu::before {

    content: "";



    position: absolute;



    top: 0;

    left: -10px;



    width: 10px;

    height: 100%;

}



.site-header .submenu-parent:hover > .submenu,

.site-header .has-submenu:hover > .submenu {

    opacity: 1;

    visibility: visible;



    transform: translateX(0);

}





/* =====================================================

   SUBMENU LINKS

===================================================== */



.site-header .submenu a {

    display: flex;

    align-items: center;



    min-height: 40px;



    padding: 9px 11px;



    border-radius: 8px;



    color: var(--text);



    font-size: 13px;

    line-height: 1.35;

    font-weight: 500;



    text-decoration: none;



    transition:

        color .18s ease,

        background .18s ease;

}



.site-header .submenu a:hover {

    color: var(--orange);

    background: var(--light-orange);

}





/* =====================================================

   RIGHT SIDE MENU FIX

===================================================== */



.site-header .consultancy-menu,

.site-header .consultancy-dropdown {

    left: auto;

    right: 0;

}



.site-header .consultancy-menu .submenu,

.site-header .consultancy-dropdown .submenu,

.site-header .submenu-left {

    left: auto;



    right: calc(100% + 9px);

}





/* =====================================================

   BOOTSTRAP CARET FIX

   Keep main dropdown icons as your own design

===================================================== */



/*

Bootstrap .dropdown-toggle::after may create

an unwanted second arrow.

Remove Bootstrap's generated caret only.

*/



.site-header .nav-link.dropdown-toggle::after {

    display: none !important;

    content: none !important;

}





/* =====================================================

   MOBILE / TABLET

===================================================== */



@media(max-width: 1050px) {



    .site-header .navbar {

        width: 100%;

        margin: 0;



        display: none;



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

    }



    .site-header.menu-open .navbar,

    .site-header.mobile-open .navbar {

        display: block;

    }





    .site-header .nav-list {

        display: block;



        width: 100%;



        max-height: calc(100vh - 100px);



        overflow-y: auto;

        overflow-x: hidden;



        padding: 8px 0;

    }





    .site-header .nav-item {

        width: 100%;



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

    }





    .site-header .nav-link {

        width: 100%;



        min-height: 48px;



        padding: 13px 11px;



        justify-content: space-between;



        font-size: 14px;

    }





    /* MAIN DROPDOWN */



    .site-header .dropdown-menu {

        position: static;



        display: none;



        width: 100%;

        min-width: 0;



        margin: 0;



        padding: 0 0 8px 12px;



        border: 0;

        border-radius: 0;



        box-shadow: none;



        opacity: 1;

        visibility: visible;



        transform: none;

    }





    .site-header .dropdown-menu::before {

        display: none;

    }





    .site-header .dropdown-parent:hover > .dropdown-menu,

    .site-header .has-dropdown:hover > .dropdown-menu {

        display: none;

    }





    .site-header .dropdown-parent.open > .dropdown-menu,

    .site-header .has-dropdown.open > .dropdown-menu {

        display: block;

    }





    /* NESTED */



    .site-header .submenu {

        position: static;



        display: none;



        width: 100%;

        min-width: 0;



        margin-left: 7px;



        padding: 2px 0 5px 12px;



        border: 0;



        border-left:

            2px solid var(--light-orange);



        border-radius: 0;



        box-shadow: none;



        opacity: 1;

        visibility: visible;



        transform: none;

    }





    .site-header .submenu::before {

        display: none;

    }





    .site-header .submenu-parent:hover > .submenu,

    .site-header .has-submenu:hover > .submenu {

        display: none;

    }





    .site-header .submenu-parent.open > .submenu,

    .site-header .has-submenu.open > .submenu {

        display: block;

    }





    /* INNER SUBMENU ARROWS REMAIN REMOVED */



    .site-header .submenu-toggle {

        justify-content: flex-start !important;

    }



}





/* =====================================================

   SMALL MOBILE

===================================================== */



@media(max-width: 650px) {



    .site-header .top-header {

        display: none;

    }





    .site-header .support-button {

        display: none;

    }



}





/* =========================================

   SHOW INNER SUBMENU ARROWS AGAIN

========================================= */



.site-header .submenu-toggle {

    justify-content: space-between !important;

    gap: 12px !important;

}





/* custom chevron */

.site-header .submenu-toggle .chevron-icon {

    display: inline-block !important;



    width: 7px;

    height: 7px;



    flex-shrink: 0;



    border-top: 1.6px solid currentColor;

    border-right: 1.6px solid currentColor;



    transform: rotate(45deg);



    margin-right: 4px;



    transition:

        transform .2s ease,

        color .2s ease;

}





/* agar arrow simple span me hai */

.site-header .submenu-toggle > span:last-child:not(:first-child) {

    display: inline-flex !important;



    align-items: center;



    margin-left: auto;

}





/* Bootstrap ka extra caret fir bhi hide rahe */

.site-header .submenu-toggle.dropdown-toggle::after {

    display: none !important;

    content: none !important;

}





/* hover */

.site-header .submenu-parent:hover > .submenu-toggle .chevron-icon,

.site-header .has-submenu:hover > .submenu-toggle .chevron-icon {

    color: var(--orange);



    transform:

        translateX(2px)

        rotate(45deg);

}





/* =========================================

   MOBILE

========================================= */



@media (max-width: 1050px) {



    .site-header .submenu-toggle {

        justify-content: space-between !important;

    }



    .site-header .submenu-toggle .chevron-icon {

        transform: rotate(45deg);

    }



    /* open submenu par arrow down */

    .site-header .submenu-parent.open > .submenu-toggle .chevron-icon,

    .site-header .has-submenu.open > .submenu-toggle .chevron-icon {

        transform: rotate(135deg);

    }

}

@media (max-width: 1050px) {



    .site-header .header-container {

        display: flex;

        align-items: center;

        width: 100%;

    }



    .site-header .logo {

        margin-right: auto;

    }



    .site-header .menu-toggle,

    .site-header .mobile-toggle {

        margin-left: auto !important;

        margin-right: 0 !important;



        flex-shrink: 0;

    }



}













































































/* =====================================================

   FOOTER

===================================================== */



.siteFooter {

    position: relative;



    width: 100%;



    background:

        #04142f;



    color: white;

}





/* =====================================================

   TOP CTA STRIP

===================================================== */



.siteFooter__top {

    position: relative;



    z-index: 2;



    padding:

        0 0 0;

}





.siteFooter__topWrap {

    position: relative;



    min-height: 105px;



    margin-bottom:

        -52px;



    padding:

        20px 23px;



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 25px;



    overflow: hidden;



    border-radius: 18px;



    background:

        linear-gradient(

            135deg,

            var(--hero-orange),

            var(--hero-orange-light)

        );



    box-shadow:

        0 18px 45px

        rgba(255,121,0,.20);

}





.siteFooter__topWrap::before {

    content: "";



    position: absolute;



    width: 180px;

    height: 180px;



    right: 140px;

    top: -120px;



    border-radius: 50%;



    background:

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

}





.siteFooter__topContent {

    position: relative;



    z-index: 2;



    display: flex;



    align-items: center;



    gap: 13px;

}





.siteFooter__topIcon {

    width: 48px;

    height: 48px;



    flex:

        0 0 48px;



    display: grid;



    place-items: center;



    border-radius: 12px;



    background:

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

}





.siteFooter__topIcon svg {

    width: 22px;

    height: 22px;



    fill: none;



    stroke: white;



    stroke-width: 1.7;



    stroke-linecap: round;



    stroke-linejoin: round;

}





.siteFooter__topContent span {

    display: block;



    margin-bottom: 3px;



    color:

        rgba(255,255,255,.74);



    font-size: 11px;



    font-weight: 600;

}





.siteFooter__topContent strong {

    display: block;



    color: white;



    font-size:

        clamp(

            17px,

            1.5vw,

            22px

        );



    line-height: 1.25;

}





.siteFooter__topBtn {

    position: relative;



    z-index: 2;



    min-height: 48px;



    display: inline-flex;



    align-items: center;



    gap: 10px;



    padding:0 7px 0 15px;



    border-radius: 9px;



    background:

        var(--hero-navy);



    color: white;



    text-decoration: none;



    font-size: 12px;



    font-weight: 700;



    white-space: nowrap;



    transition: .25s ease;

}





.siteFooter__topBtn i {

    width: 33px;

    height: 33px;



    display: grid;



    place-items: center;



    border-radius: 7px;



    background:

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



    font-style: normal;



    transition: .25s;

}





.siteFooter__topBtn:hover {

    color: white;



    transform:

        translateY(-2px);

}





.siteFooter__topBtn:hover i {

    transform:

        translateX(3px);

}





/* =====================================================

   MAIN FOOTER

===================================================== */



.siteFooter__main {

    position: relative;



    overflow: hidden;



    padding:

        105px 0 25px;



    background:

        linear-gradient(

            145deg,

            #04142f 0%,

            #061a3d 100%

        );

}





.siteFooter__main::before {

    content: "";



    position: absolute;



    width: 380px;

    height: 380px;



    right: -220px;

    top: -160px;



    border-radius: 50%;



    background:

        radial-gradient(

            circle,

            rgba(255,121,0,.10),

            transparent 70%

        );

}





.siteFooter__main::after {

    content: "";



    position: absolute;



    inset: 0;



    opacity: .06;



    pointer-events: none;



    background-image:

        linear-gradient(

            rgba(255,255,255,.07) 1px,

            transparent 1px

        ),

        linear-gradient(

            90deg,

            rgba(255,255,255,.07) 1px,

            transparent 1px

        );



    background-size:

        60px 60px;



    mask-image:

        linear-gradient(

            to bottom,

            #000,

            transparent 88%

        );

}





/* =====================================================

   BRAND

===================================================== */



.siteFooter__brand,

.siteFooter__column,

.siteFooter__bottom {

    position: relative;



    z-index: 2;

}





.siteFooter__logo {

    display: inline-block;



    width: 220px;



    margin-bottom: 17px;

}



.siteFooter__logo img {

    display: block;

    width: 100%;

    height: auto;

    background: #fff;

    padding: 13px;

    border-radius: 10px;

}



.siteFooter__brand p {

    max-width: 390px;



    margin:

        0 0 20px;



    color:

        rgba(255,255,255,.55);



    font-size: 14px;



    line-height: 1.7;

}





/* =====================================================

   SOCIAL

===================================================== */



.siteFooter__socials {

    display: flex;



    gap: 8px;

}





.siteFooter__socials a {

    width: 38px;

    height: 38px;



    display: grid;



    place-items: center;



    border:

        1px solid

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



    border-radius: 10px;



    background:

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



    color:

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



    text-decoration: none;



    font-size: 11px;



    font-weight: 700;



    transition:

        transform .25s ease,

        background .25s ease,

        border-color .25s ease,

        color .25s ease;

}





.siteFooter__socials a:hover {

    color: white;



    border-color:

        var(--hero-orange);



    background:

        var(--hero-orange);



    transform:

        translateY(-3px);

}





/* =====================================================

   COLUMN HEADINGS

===================================================== */



.siteFooter__column h4 {

    position: relative;



    margin:

        0 0 19px;



    padding-bottom: 10px;



    color: white;



    font-size: 16px;



    line-height: 1.2;



    font-weight: 700;

}





.siteFooter__column h4::after {

    content: "";



    position: absolute;



    left: 0;

    bottom: 0;



    width: 32px;

    height: 2px;



    border-radius: 20px;



    background:

        var(--hero-orange);

}





/* =====================================================

   LINKS

===================================================== */



.siteFooter__column ul {

    margin: 0;



    padding: 0;



    list-style: none;

}





.siteFooter__column li {

    margin-bottom: 10px;

}





.siteFooter__column li:last-child {

    margin-bottom: 0;

}





.siteFooter__column li a {

    position: relative;



    display: inline-flex;



    align-items: center;



    gap: 7px;



    color:

        rgba(255,255,255,.55);



    text-decoration: none;



    font-size: 13px;



    line-height: 1.4;



    transition:

        color .25s ease,

        transform .25s ease;

}





.siteFooter__column li a::before {

    content: "";



    width: 5px;

    height: 5px;



    flex:

        0 0 5px;



    border-radius: 50%;



    background:

        rgba(255,121,0,.40);



    transition: .25s;

}





.siteFooter__column li a:hover {

    color: white;



    transform:

        translateX(4px);

}





.siteFooter__column li a:hover::before {

    background:

        var(--hero-orange);



    box-shadow:

        0 0 0 4px

        rgba(255,121,0,.08);

}





/* =====================================================

   CONTACT

===================================================== */



.siteFooter__contact {

    display: grid;



    align-content: start;



    gap: 0;

}





.siteFooter__contactItem {

    display: flex;



    align-items: center;



    gap: 10px;



    margin-bottom: 10px;



    padding:

        10px;



    border:

        1px solid

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



    border-radius: 11px;



    background:

        rgba(255,255,255,.035);



    color: white;



    text-decoration: none;



    transition:

        transform .25s ease,

        border-color .25s ease,

        background .25s ease;

}





a.siteFooter__contactItem:hover {

    color: white;



    transform:

        translateX(3px);



    border-color:

        rgba(255,121,0,.22);



    background:

        rgba(255,121,0,.055);

}





.siteFooter__contactIcon {

    width: 35px;

    height: 35px;



    flex:

        0 0 35px;



    display: grid;



    place-items: center;



    border-radius: 9px;



    background:

        rgba(255,121,0,.09);



    color:

        var(--hero-orange);



    font-size: 12px;

}





.siteFooter__contactItem small {

    display: block;



    margin-bottom: 2px;



    color:

        rgba(255,255,255,.40);



    font-size: 8px;

}





.siteFooter__contactItem strong {

    display: block;



    color:

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



    font-size: 11px;



    line-height: 1.35;



    font-weight: 600;



    overflow-wrap: anywhere;

}





/* =====================================================

   BOTTOM BAR

===================================================== */



.siteFooter__bottom {

    margin-top: 45px;



    padding-top: 21px;



    border-top:

        1px solid

        rgba(255,255,255,.08);



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 20px;

}





.siteFooter__bottom p {

    margin: 0;



    color:

        rgba(255,255,255,.40);



    font-size: 11px;

}





.siteFooter__legal {

    display: flex;



    align-items: center;



    gap: 11px;

}





.siteFooter__legal a {

    color:

        rgba(255,255,255,.42);



    text-decoration: none;



    font-size: 10px;



    transition:

        color .25s ease;

}





.siteFooter__legal a:hover {

    color:

        var(--hero-orange);

}





.siteFooter__legal span {

    width: 3px;

    height: 3px;



    border-radius: 50%;



    background:

        rgba(255,255,255,.22);

}





/* =====================================================

   REVEAL

===================================================== */



.footerReveal {

    opacity: 0;



    transform:

        translateY(26px);



    will-change:

        opacity,

        transform;



    transition:

        opacity .7s ease

        var(--footer-delay,0ms),



        transform .75s

        cubic-bezier(.2,.75,.2,1)

        var(--footer-delay,0ms);

}





.footerReveal.footerShow {

    opacity: 1;



    transform:

        translateY(0);

}





/* =====================================================

   TABLET

===================================================== */



@media(max-width: 991.98px) {



    .siteFooter__topWrap {

        min-height: 95px;

    }





    .siteFooter__main {

        padding-top: 95px;

    }





    .siteFooter__logo {

        width: 200px;

    }



}





/* =====================================================

   MOBILE

===================================================== */



@media(max-width: 575.98px) {



    .siteFooter__topWrap {

        min-height: auto;



        margin-bottom: -45px;



        padding: 17px;



        align-items: stretch;



        flex-direction: column;



        border-radius: 15px;

    }





    .siteFooter__topBtn {

        width: 100%;



        justify-content: space-between;

    }





    .siteFooter__main {

        padding:

            85px 0 20px;

    }





    .siteFooter__logo {

        width: 180px;

    }





    .siteFooter__brand p {

        font-size: 14px;

    }





    .siteFooter__column h4 {

        font-size: 15px;

    }





    .siteFooter__bottom {

        margin-top: 32px;



        align-items: flex-start;



        flex-direction: column;



        gap: 12px;

    }





    .siteFooter__legal {

        flex-wrap: wrap;



        gap: 8px;

    }



}





/* =====================================================

   VERY SMALL

===================================================== */



@media(max-width: 390px) {



    .siteFooter__topContent {

        align-items: flex-start;

    }





    .siteFooter__topIcon {

        width: 42px;

        height: 42px;



        flex-basis: 42px;

    }





    .siteFooter__topContent strong {

        font-size: 16px;

    }



}





/* =====================================================

   REDUCED MOTION

===================================================== */



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



    .footerReveal {

        opacity: 1 !important;



        transform: none !important;



        transition: none !important;

    }



}

/*------------------service css------------------------------*/

/* =====================================================

   SERVICE PAGE ROOT

===================================================== */



:root {



    --service-navy: #071c43;

    --service-navy-dark: #04142f;

    --service-navy-light: #0b2858;



    --service-orange: #ff7900;

    --service-orange-light: #ff9a35;



    --service-white: #ffffff;



    --service-text: #566375;

    --service-text-light: #8b95a3;



    --service-light-bg: #f7f9fd;

    --service-soft-bg: #fafbfd;



    --service-border: #e4e9f0;



    --service-green: #40d984;

    --service-error: #d84c4c;



    --service-shadow:

        0 20px 50px rgba(7,28,67,.10);



    --service-shadow-lg:

        0 30px 65px rgba(7,28,67,.16);



    --service-orange-shadow:

        0 12px 28px rgba(255,121,0,.22);

}





/* =====================================================

   SERVICE BANNER

===================================================== */



.serviceBanner {

    position: relative;

    overflow: hidden;



    min-height: 600px;



    display: flex;

    align-items: center;



    padding: 65px 0;



    background:

        linear-gradient(

            135deg,

            var(--service-navy-dark) 0%,

            var(--service-navy) 53%,

            var(--service-navy-light) 100%

        );

}





/* =====================================================

   BACKGROUND GRID

===================================================== */



.serviceBanner__grid {

    position: absolute;

    inset: 0;



    opacity: .07;



    pointer-events: none;



    background-image:

        linear-gradient(

            rgba(255,255,255,.08) 1px,

            transparent 1px

        ),

        linear-gradient(

            90deg,

            rgba(255,255,255,.08) 1px,

            transparent 1px

        );



    background-size:

        56px 56px;



    mask-image:

        linear-gradient(

            to right,

            #000,

            transparent 95%

        );

}





/* =====================================================

   GLOWS

===================================================== */



.serviceBanner__glow {

    position: absolute;



    border-radius: 50%;



    pointer-events: none;

}





.serviceBanner__glow--one {

    width: 450px;

    height: 450px;



    right: -190px;

    top: -230px;



    background:

        radial-gradient(

            circle,

            rgba(255,121,0,.21),

            transparent 68%

        );



    animation:

        serviceBgFloat

        8s ease-in-out infinite;

}





.serviceBanner__glow--two {

    width: 330px;

    height: 330px;



    left: -180px;

    bottom: -210px;



    background:

        radial-gradient(

            circle,

            rgba(255,255,255,.055),

            transparent 70%

        );



    animation:

        serviceBgFloat

        10s ease-in-out infinite reverse;

}





@keyframes serviceBgFloat {



    0%,

    100% {

        transform:

            translateY(0)

            scale(1);

    }



    50% {

        transform:

            translateY(-15px)

            scale(1.05);

    }



}





/* =====================================================

   LEFT CONTENT

===================================================== */



.serviceBanner__content {

    position: relative;



    z-index: 5;



    max-width: 720px;

}





/* =====================================================

   BREADCRUMB

===================================================== */



.serviceBanner__breadcrumb {

    display: flex;



    align-items: center;



    flex-wrap: wrap;



    gap: 8px;



    margin-bottom: 18px;



    font-size: 13px;

}





.serviceBanner__breadcrumb a {

    color:

        rgba(255,255,255,.52);



    text-decoration: none;



    transition:

        color .25s ease;

}





.serviceBanner__breadcrumb a:hover {

    color:

        var(--service-orange);

}





.serviceBanner__breadcrumb > span {

    color:

        rgba(255,255,255,.24);

}





.serviceBanner__breadcrumb strong {

    color:

        var(--service-orange);



    font-weight: 600;

}





/* =====================================================

   TAG

===================================================== */



.serviceBanner__tag {

    width: fit-content;



    display: flex;



    align-items: center;



    gap: 9px;



    margin-bottom: 16px;



    padding:

        8px 12px;



    border:

        1px solid

        rgba(255,121,0,.22);



    border-radius: 100px;



    background:

        rgba(255,121,0,.08);



    color:

        var(--service-orange);



    font-size: 16px;



    font-weight: 700;

}





.serviceBanner__tag > span {

    width: 8px;

    height: 8px;



    flex: 0 0 8px;



    border-radius: 50%;



    background:

        var(--service-orange);



    box-shadow:

        0 0 0 5px

        rgba(255,121,0,.10);



    animation:

        serviceTagPulse

        2s infinite;

}





@keyframes serviceTagPulse {



    50% {

        box-shadow:

            0 0 0 10px

            rgba(255,121,0,0);

    }



}





/* =====================================================

   HEADING

===================================================== */



.serviceBanner h1 {

    max-width: 700px;



    margin:

        0 0 19px;



    color:

        var(--service-white);



    font-size:

        clamp(

            41px,

            4.1vw,

            59px

        );



    line-height: 1.04;



    letter-spacing: -1.7px;



    font-weight: 700;

}





.serviceBanner h1 span {

    display: block;



    margin-top: 5px;



    color:

        var(--service-orange);

}





/* =====================================================

   DESCRIPTION

===================================================== */



.serviceBanner__text {

    max-width: 660px;



    margin:

        0 0 23px;



    color:

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



    font-size: 16px;



    line-height: 1.7;

}





/* =====================================================

   POINTS

===================================================== */



.serviceBanner__points {

    display: flex;



    align-items: center;



    flex-wrap: wrap;



    gap:

        10px 17px;



    margin-bottom: 28px;

}





.serviceBanner__points div {

    display: flex;



    align-items: center;



    gap: 7px;



    color:

        rgba(255,255,255,.76);



    font-size: 13px;



    font-weight: 600;

}





.serviceBanner__points i {

    width: 23px;

    height: 23px;



    flex:

        0 0 23px;



    display: grid;



    place-items: center;



    border-radius: 50%;



    background:

        rgba(255,121,0,.11);



    color:

        var(--service-orange);



    font-size: 9px;



    font-style: normal;

}





/* =====================================================

   TRUST NOTE

===================================================== */



.serviceBanner__trust {

    width: fit-content;



    display: flex;



    align-items: center;



    gap: 11px;



    padding:

        11px 13px;



    border:

        1px solid

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



    border-radius: 12px;



    background:

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

}





.serviceBanner__trustIcon {

    width: 39px;

    height: 39px;



    flex:

        0 0 39px;



    display: grid;



    place-items: center;



    border-radius: 10px;



    background:

        rgba(255,121,0,.09);

}





.serviceBanner__trustIcon svg {

    width: 19px;

    height: 19px;



    fill: none;



    stroke:

        var(--service-orange);



    stroke-width: 1.7;



    stroke-linecap: round;



    stroke-linejoin: round;

}





.serviceBanner__trust small {

    display: block;



    margin-bottom: 3px;



    color:

        rgba(255,255,255,.42);



    font-size: 9px;

}





.serviceBanner__trust strong {

    display: block;



    color:

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



    font-size: 11px;



    font-weight: 600;

}





/* =====================================================

   RIGHT FORM BOX

===================================================== */



.serviceLeadBox {

    position: relative;



    z-index: 6;



    width: 100%;

    max-width: 445px;



    margin-left: auto;



    overflow: hidden;



    padding: 24px;



    border:

        1px solid

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



    border-radius: 21px;



    background:

        rgba(255,255,255,.975);



    box-shadow:

        0 30px 68px

        rgba(0,0,0,.20);

}





.serviceLeadBox::before {

    content: "";



    position: absolute;



    width: 170px;

    height: 170px;



    right: -105px;

    top: -110px;



    border-radius: 50%;



    background:

        var(--service-orange);



    opacity: .065;

}





/* =====================================================

   FORM HEADER

===================================================== */



.serviceLeadBox__top {

    position: relative;



    z-index: 2;



    display: flex;



    align-items: center;



    gap: 12px;



    margin-bottom: 13px;

}





.serviceLeadBox__icon {

    width: 48px;

    height: 48px;



    flex:

        0 0 48px;



    display: grid;



    place-items: center;



    border-radius: 12px;



    background:

        var(--service-navy);



    box-shadow:

        0 10px 24px

        rgba(7,28,67,.14);

}





.serviceLeadBox__icon svg {

    width: 22px;

    height: 22px;



    fill: none;



    stroke:

        var(--service-orange);



    stroke-width: 1.7;



    stroke-linecap: round;



    stroke-linejoin: round;

}





.serviceLeadBox__top span {

    display: block;



    margin-bottom: 3px;



    color:

        var(--service-orange);



    font-size: 9px;



    font-weight: 700;



    text-transform: uppercase;



    letter-spacing: .55px;

}





.serviceLeadBox__top h2 {

    margin: 0;



    color:

        var(--service-navy);



    font-size: 22px;



    line-height: 1.2;



    font-weight: 700;

}





/* =====================================================

   STATUS

===================================================== */



.serviceLeadBox__status {

    position: relative;



    z-index: 2;



    display: flex;



    align-items: center;



    gap: 7px;



    margin-bottom: 16px;



    padding:

        8px 10px;



    border:

        1px solid

        rgba(64,217,132,.17);



    border-radius: 9px;



    background:

        rgba(64,217,132,.06);



    color:

        #33895c;



    font-size: 9px;



    font-weight: 600;

}





.serviceLeadBox__status > span {

    width: 7px;

    height: 7px;



    flex:

        0 0 7px;



    border-radius: 50%;



    background:

        var(--service-green);



    box-shadow:

        0 0 0 4px

        rgba(64,217,132,.10);



    animation:

        serviceOnlinePulse

        1.8s infinite;

}





@keyframes serviceOnlinePulse {



    50% {

        box-shadow:

            0 0 0 9px

            rgba(64,217,132,0);

    }



}





/* =====================================================

   FORM

===================================================== */



.serviceLeadForm {

    position: relative;



    z-index: 2;

}





/* =====================================================

   FIELD

===================================================== */



.serviceField {

    position: relative;



    margin-bottom: 12px;

}





.serviceField label {

    display: block;



    margin-bottom: 6px;



    color:

        var(--service-navy);



    font-size: 11px;



    font-weight: 700;

}





.serviceField__wrap {

    position: relative;

}





.serviceField__icon {

    position: absolute;



    z-index: 2;



    left: 12px;

    top: 50%;



    width: 19px;

    height: 19px;



    display: grid;



    place-items: center;



    transform:

        translateY(-50%);



    pointer-events: none;

}





.serviceField__icon svg {

    width: 17px;

    height: 17px;



    fill: none;



    stroke:

        #98a2af;



    stroke-width: 1.6;



    stroke-linecap: round;



    stroke-linejoin: round;



    transition:

        stroke .2s ease;

}





/* =====================================================

   INPUTS

===================================================== */



.serviceField input,

.serviceField select,

.serviceField textarea {

    width: 100%;



    outline: none;



    border:

        1px solid

        var(--service-border);



    border-radius: 9px;



    background:

        var(--service-soft-bg);



    color:

        var(--service-navy);



    font-family: inherit;



    font-size: 12px;



    transition:

        border-color .22s ease,

        box-shadow .22s ease,

        background .22s ease;

}





.serviceField input,

.serviceField select {

    height: 44px;



    padding:

        0 37px 0 40px;

}





.serviceField textarea {

    min-height: 88px;



    padding:

        12px 12px 12px 40px;



    resize: vertical;



    line-height: 1.5;

}





.serviceField input::placeholder,

.serviceField textarea::placeholder {

    color:

        #9ba4b0;

}





.serviceField select {

    appearance: none;



    cursor: pointer;

}





/* TEXTAREA ICON */



.serviceField__icon--textarea {

    top: 12px;



    transform: none;

}





/* SELECT ARROW */



.serviceField__wrap--select::after {

    content: "";



    position: absolute;



    right: 14px;

    top: 50%;



    width: 7px;

    height: 7px;



    border-right:

        1.5px solid #8d96a4;



    border-bottom:

        1.5px solid #8d96a4;



    transform:

        translateY(-70%)

        rotate(45deg);



    pointer-events: none;

}





/* =====================================================

   FOCUS

===================================================== */



.serviceField__wrap:focus-within input,

.serviceField__wrap:focus-within select,

.serviceField__wrap:focus-within textarea {

    border-color:

        rgba(255,121,0,.54);



    background:

        var(--service-white);



    box-shadow:

        0 0 0 4px

        rgba(255,121,0,.065);

}





.serviceField__wrap:focus-within

.serviceField__icon svg {

    stroke:

        var(--service-orange);

}





/* =====================================================

   ERROR

===================================================== */



.serviceField__error {

    display: none;



    margin-top: 4px;



    color:

        var(--service-error);



    font-size: 9px;

}





.serviceField.has-error

.serviceField__error {

    display: block;

}





.serviceField.has-error input,

.serviceField.has-error select,

.serviceField.has-error textarea {

    border-color:

        rgba(216,76,76,.55);



    background:

        rgba(216,76,76,.025);

}





/* =====================================================

   SUBMIT BUTTON

===================================================== */



.serviceLeadForm__submit {

    width: 100%;



    min-height: 48px;



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 10px;



    margin-top: 3px;



    padding:

        0 7px 0 15px;



    border: 0;



    border-radius: 9px;



    background:

        linear-gradient(

            135deg,

            var(--service-orange),

            var(--service-orange-light)

        );



    color:

        var(--service-white);



    font-family: inherit;



    font-size: 12px;



    font-weight: 700;



    cursor: pointer;



    box-shadow:

        var(--service-orange-shadow);



    transition:

        transform .25s ease,

        box-shadow .25s ease;

}





.serviceLeadForm__submit i {

    width: 34px;

    height: 34px;



    flex:

        0 0 34px;



    display: grid;



    place-items: center;



    border-radius: 7px;



    background:

        rgba(255,255,255,.18);



    font-style: normal;



    transition:

        transform .25s ease;

}





.serviceLeadForm__submit:hover {

    transform:

        translateY(-2px);



    box-shadow:

        0 16px 32px

        rgba(255,121,0,.27);

}





.serviceLeadForm__submit:hover i {

    transform:

        translateX(3px);

}





.serviceLeadForm__submit:disabled {

    cursor: default;



    opacity: .85;



    transform: none;

}





/* =====================================================

   PRIVACY

===================================================== */



.serviceLeadForm__privacy {

    display: flex;



    align-items: flex-start;



    justify-content: center;



    gap: 6px;



    margin-top: 11px;



    color:

        var(--service-text-light);



    font-size: 8px;



    line-height: 1.45;



    text-align: center;

}





.serviceLeadForm__privacy svg {

    width: 13px;

    height: 13px;



    flex:

        0 0 13px;



    fill: none;



    stroke:

        var(--service-orange);



    stroke-width: 1.8;



    stroke-linecap: round;



    stroke-linejoin: round;

}





/* =====================================================

   SUCCESS

===================================================== */



.serviceLeadSuccess {

    display: none;



    align-items: center;



    gap: 9px;



    margin-top: 12px;



    padding:

        10px;



    border:

        1px solid

        rgba(64,217,132,.18);



    border-radius: 9px;



    background:

        rgba(64,217,132,.065);

}





.serviceLeadSuccess.show {

    display: flex;



    animation:

        serviceSuccessIn

        .4s ease;

}





@keyframes serviceSuccessIn {



    from {

        opacity: 0;



        transform:

            translateY(6px);

    }



    to {

        opacity: 1;



        transform:

            translateY(0);

    }



}





.serviceLeadSuccess > span {

    width: 30px;

    height: 30px;



    flex:

        0 0 30px;



    display: grid;



    place-items: center;



    border-radius: 50%;



    background:

        var(--service-green);



    color:

        var(--service-white);



    font-size: 11px;



    font-weight: 700;

}





.serviceLeadSuccess strong {

    display: block;



    margin-bottom: 2px;



    color:

        #247247;



    font-size: 10px;

}





.serviceLeadSuccess small {

    display: block;



    color:

        #60816d;



    font-size: 8px;

}





/* =====================================================

   BOTTOM ACCENT

===================================================== */



.serviceBanner__bottomLine {

    position: absolute;



    left: 0;

    bottom: 0;



    width: 100%;

    height: 3px;



    opacity: .58;



    background:

        linear-gradient(

            90deg,

            transparent,

            var(--service-orange),

            transparent

        );

}





/* =====================================================

   PAGE LOAD REVEAL

===================================================== */



.serviceBannerReveal {

    opacity: 0;



    transform:

        translateY(26px);



    animation:

        serviceBannerReveal

        .75s

        cubic-bezier(.2,.75,.2,1)

        forwards;



    animation-delay:

        var(--service-delay,0ms);

}





.serviceBannerReveal--right {

    transform:

        translateX(38px)

        scale(.98);

}





@keyframes serviceBannerReveal {



    to {

        opacity: 1;



        transform:

            translate(0,0)

            scale(1);

    }



}





/* =====================================================

   LARGE LAPTOP

===================================================== */



@media(max-width:1199.98px) {



    .serviceBanner h1 {

        font-size: 49px;

    }





    .serviceLeadBox {

        padding: 21px;

    }



}





/* =====================================================

   TABLET

===================================================== */



@media(max-width:991.98px) {



    .serviceBanner {

        min-height: auto;



        padding:

            58px 0;

    }





    .serviceBanner__content {

        max-width: 800px;

    }





    .serviceLeadBox {

        max-width: 610px;



        margin:

            14px auto 0;

    }



}





/* =====================================================

   MOBILE

===================================================== */



@media(max-width:575.98px) {



    .serviceBanner {

        padding:

            43px 0 48px;

    }





    .serviceBanner__breadcrumb {

        margin-bottom: 14px;



        gap: 6px;



        font-size: 11px;

    }





    .serviceBanner__tag {

        font-size: 16px;

    }





    .serviceBanner h1 {

        font-size: 34px;



        line-height: 1.08;



        letter-spacing: -1px;

    }





    .serviceBanner__text {

        font-size: 16px;

    }





    .serviceBanner__points {

        display: grid;



        gap: 9px;

    }





    .serviceBanner__trust {

        width: 100%;

    }





    .serviceLeadBox {

        padding:

            18px 15px;



        border-radius: 17px;

    }





    .serviceLeadBox__top {

        align-items: flex-start;

    }





    .serviceLeadBox__icon {

        width: 43px;

        height: 43px;



        flex-basis: 43px;

    }





    .serviceLeadBox__top h2 {

        font-size: 19px;

    }





    .serviceField input,

    .serviceField select {

        height: 46px;

    }





    .serviceField textarea {

        min-height: 100px;

    }



}





/* =====================================================

   SMALL MOBILE

===================================================== */



@media(max-width:390px) {



    .serviceBanner h1 {

        font-size: 30px;

    }





    .serviceLeadBox__top h2 {

        font-size: 18px;

    }



}





/* =====================================================

   REDUCED MOTION

===================================================== */



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



    .serviceBannerReveal {

        opacity: 1 !important;



        transform: none !important;



        animation: none !important;

    }





    .serviceBanner__glow,

    .serviceBanner__tag > span,

    .serviceLeadBox__status > span {

        animation: none !important;

    }



}



/*------------------------------------------------*/

/* =====================================================

   COMPUTER SUPPORT SERVICES

===================================================== */



.serviceSupportSec {

    position: relative;

    overflow: hidden;



    padding: 76px 0;



    background:

        linear-gradient(

            135deg,

            var(--service-white) 0%,

            var(--service-light-bg) 100%

        );

}





/* =====================================================

   BACKGROUND GLOW

===================================================== */



.serviceSupportSec__glow {

    position: absolute;



    border-radius: 50%;



    pointer-events: none;

}





.serviceSupportSec__glow--one {

    width: 380px;

    height: 380px;



    right: -210px;

    top: -220px;



    background:

        radial-gradient(

            circle,

            rgba(255,121,0,.10),

            transparent 70%

        );



    animation:

        supportSecGlow

        8s ease-in-out infinite;

}





.serviceSupportSec__glow--two {

    width: 330px;

    height: 330px;



    left: -200px;

    bottom: -210px;



    background:

        radial-gradient(

            circle,

            rgba(7,28,67,.05),

            transparent 70%

        );



    animation:

        supportSecGlow

        10s ease-in-out infinite reverse;

}





@keyframes supportSecGlow {



    0%,

    100% {

        transform:

            translateY(0)

            scale(1);

    }



    50% {

        transform:

            translateY(-15px)

            scale(1.05);

    }



}





/* =====================================================

   HEADING

===================================================== */



.serviceSupportHead {

    position: relative;



    z-index: 3;



    max-width: 820px;



    margin:

        0 auto 42px;



    text-align: center;

}





/* TAG */



.serviceSupportHead__tag {

    width: fit-content;



    display: inline-flex;



    align-items: center;



    gap: 9px;



    margin-bottom: 15px;



    padding:

        8px 12px;



    border:

        1px solid

        rgba(255,121,0,.16);



    border-radius: 100px;



    background:

        rgba(255,121,0,.065);



    color:

        var(--service-orange);



    font-size: 16px;



    font-weight: 700;

}





.serviceSupportHead__tag > span {

    width: 8px;

    height: 8px;



    flex:

        0 0 8px;



    border-radius: 50%;



    background:

        var(--service-orange);



    box-shadow:

        0 0 0 5px

        rgba(255,121,0,.09);



    animation:

        supportTagPulse

        2s infinite;

}





@keyframes supportTagPulse {



    50% {

        box-shadow:

            0 0 0 10px

            rgba(255,121,0,0);

    }



}





/* HEADING */



.serviceSupportHead h2 {

    margin:

        0 0 14px;



    color:

        var(--service-navy);



    font-size:

        clamp(

            35px,

            3.3vw,

            48px

        );



    line-height: 1.09;



    letter-spacing:

        -1.25px;



    font-weight: 700;

}





.serviceSupportHead h2 span {

    display: block;



    margin-top: 4px;



    color:

        var(--service-orange);

}





/* TEXT */



.serviceSupportHead p {

    max-width: 750px;



    margin:

        0 auto;



    color:

        var(--service-text);



    font-size: 16px;



    line-height: 1.7;

}





/* =====================================================

   SERVICE GRID

===================================================== */



.serviceSupportGrid {

    position: relative;



    z-index: 3;



    display: grid;



    grid-template-columns:

        repeat(3, minmax(0,1fr));



    gap: 15px;

}





/* =====================================================

   SERVICE CARD

===================================================== */



.serviceSupportCard {

    position: relative;



    min-height: 256px;



    display: flex;



    flex-direction: column;



    overflow: hidden;



    padding: 21px;



    border:

        1px solid

        var(--service-border);



    border-radius: 17px;



    background:

        var(--service-white);



    box-shadow:

        0 10px 30px

        rgba(7,28,67,.045);



    transition:

        transform .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;



    isolation: isolate;

}





/* TOP CORNER GLOW */



.serviceSupportCard::before {

    content: "";



    position: absolute;



    z-index: -1;



    width: 120px;

    height: 120px;



    right: -82px;

    top: -82px;



    border-radius: 50%;



    background:

        var(--service-orange);



    opacity: .045;



    transform:

        scale(.7);



    transition:

        transform .45s ease,

        opacity .45s ease;

}





/* BOTTOM ACCENT */



.serviceSupportCard::after {

    content: "";



    position: absolute;



    left: 18px;

    right: 18px;

    bottom: 0;



    height: 2px;



    border-radius:

        30px 30px 0 0;



    background:

        linear-gradient(

            90deg,

            transparent,

            var(--service-orange),

            transparent

        );



    transform:

        scaleX(0);



    transition:

        transform .4s ease;

}





.serviceSupportCard:hover {

    transform:

        translateY(-7px);



    border-color:

        rgba(255,121,0,.23);



    box-shadow:

        0 20px 43px

        rgba(7,28,67,.09);

}





.serviceSupportCard:hover::before {

    opacity: .10;



    transform:

        scale(1.6);

}





.serviceSupportCard:hover::after {

    transform:

        scaleX(1);

}





/* =====================================================

   CARD TOP

===================================================== */



.serviceSupportCard__top {

    display: flex;



    align-items: flex-start;



    justify-content: space-between;



    gap: 15px;



    margin-bottom: 21px;

}





/* ICON */



.serviceSupportCard__icon {

    width: 52px;

    height: 52px;



    flex:

        0 0 52px;



    display: grid;



    place-items: center;



    border:

        1px solid

        rgba(255,121,0,.13);



    border-radius: 13px;



    background:

        rgba(255,121,0,.08);



    transition:

        background .3s ease,

        transform .3s ease,

        box-shadow .3s ease;

}





.serviceSupportCard__icon svg {

    width: 23px;

    height: 23px;



    fill: none;



    stroke:

        var(--service-orange);



    stroke-width: 1.65;



    stroke-linecap: round;



    stroke-linejoin: round;



    transition:

        stroke .3s ease,

        transform .3s ease;

}





.serviceSupportCard:not(.serviceSupportCard--featured):hover

.serviceSupportCard__icon {

    background:

        var(--service-orange);



    transform:

        rotate(-5deg)

        translateY(-2px);



    box-shadow:

        0 12px 25px

        rgba(255,121,0,.18);

}





.serviceSupportCard:not(.serviceSupportCard--featured):hover

.serviceSupportCard__icon svg {

    stroke:

        var(--service-white);



    transform:

        rotate(5deg);

}





/* NUMBER */



.serviceSupportCard__number {

    color:

        #c0c7d1;



    font-size: 11px;



    font-weight: 700;



    transition:

        color .3s ease;

}





.serviceSupportCard:hover

.serviceSupportCard__number {

    color:

        var(--service-orange);

}





/* =====================================================

   EYEBROW

===================================================== */



.serviceSupportCard__eyebrow {

    display: block;



    margin-bottom: 6px;



    color:

        var(--service-orange);



    font-size: 10px;



    font-weight: 700;



    letter-spacing: .2px;

}





/* =====================================================

   TITLE

===================================================== */



.serviceSupportCard h3 {

    margin:

        0 0 10px;



    color:

        var(--service-navy);



    font-size: 20px;



    line-height: 1.28;



    font-weight: 700;

}





/* =====================================================

   BODY TEXT

===================================================== */



.serviceSupportCard > p {

    margin:

        0 0 20px;



    color:

        var(--service-text);



    font-size: 14px;



    line-height: 1.62;

}





/* =====================================================

   NORMAL CARD BOTTOM

===================================================== */



.serviceSupportCard__bottom {

    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 10px;



    margin-top: auto;



    padding-top: 14px;



    border-top:

        1px solid #edf0f4;

}





.serviceSupportCard__bottom > span {

    color:

        var(--service-orange);



    font-size: 10px;



    font-weight: 700;

}





.serviceSupportCard__bottom > i {

    width: 31px;

    height: 31px;



    flex:

        0 0 31px;



    display: grid;



    place-items: center;



    border-radius: 8px;



    background:

        rgba(255,121,0,.07);



    color:

        var(--service-orange);



    font-style: normal;



    transition:

        transform .3s ease,

        background .3s ease,

        color .3s ease;

}





.serviceSupportCard:hover

.serviceSupportCard__bottom > i {

    color:

        var(--service-white);



    background:

        var(--service-orange);



    transform:

        translateX(3px);

}





/* =====================================================

   FEATURED CARD

===================================================== */



.serviceSupportCard--featured {

    grid-row:

        span 1;



    border-color:

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



    background:

        linear-gradient(

            145deg,

            var(--service-navy-dark),

            var(--service-navy-light)

        );



    box-shadow:

        0 20px 45px

        rgba(7,28,67,.17);

}





.serviceSupportCard--featured::before {

    display: none;

}





.serviceSupportCard--featured::after {

    background:

        linear-gradient(

            90deg,

            transparent,

            var(--service-orange),

            transparent

        );



    transform:

        scaleX(1);

}





/* GRID OVERLAY */



.serviceSupportCard__featuredBg {

    position: absolute;



    inset: 0;



    z-index: -1;



    opacity: .08;



    pointer-events: none;



    background-image:

        linear-gradient(

            rgba(255,255,255,.07) 1px,

            transparent 1px

        ),

        linear-gradient(

            90deg,

            rgba(255,255,255,.07) 1px,

            transparent 1px

        );



    background-size:

        38px 38px;

}





/* FEATURED GLOW */



.serviceSupportCard__featuredBg::after {

    content: "";



    position: absolute;



    width: 180px;

    height: 180px;



    right: -95px;

    top: -110px;



    border-radius: 50%;



    background:

        radial-gradient(

            circle,

            rgba(255,121,0,.35),

            transparent 70%

        );

}





/* FEATURED ICON */



.serviceSupportCard--featured

.serviceSupportCard__icon {

    border-color:

        rgba(255,121,0,.20);



    background:

        rgba(255,121,0,.13);

}





.serviceSupportCard--featured

.serviceSupportCard__icon svg {

    stroke:

        var(--service-orange);

}





.serviceSupportCard--featured

.serviceSupportCard__number {

    color:

        rgba(255,255,255,.27);

}





/* LABEL */



.serviceSupportCard__featuredLabel {

    width: fit-content;



    margin-bottom: 7px;



    padding:

        5px 8px;



    border:

        1px solid

        rgba(255,121,0,.18);



    border-radius: 6px;



    background:

        rgba(255,121,0,.08);



    color:

        var(--service-orange);



    font-size: 9px;



    font-weight: 700;

}





.serviceSupportCard--featured h3 {

    color:

        var(--service-white);



    font-size: 22px;

}





.serviceSupportCard--featured > p {

    color:

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



    font-size: 14px;

}





/* =====================================================

   FEATURED MINI FEATURES

===================================================== */



.serviceSupportCard__features {

    display: flex;



    flex-wrap: wrap;



    gap: 7px;



    margin-bottom: 18px;

}





.serviceSupportCard__features span {

    display: inline-flex;



    align-items: center;



    gap: 5px;



    padding:

        6px 7px;



    border:

        1px solid

        rgba(255,255,255,.08);



    border-radius: 7px;



    background:

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



    color:

        rgba(255,255,255,.68);



    font-size: 9px;



    font-weight: 600;

}





.serviceSupportCard__features i {

    color:

        var(--service-orange);



    font-style: normal;

}





/* =====================================================

   FEATURED BUTTON

===================================================== */



.serviceSupportCard__featuredBtn {

    min-height: 42px;



    display: inline-flex;



    align-items: center;



    justify-content: space-between;



    gap: 10px;



    margin-top: auto;



    padding:

        0 6px 0 13px;



    border-radius: 8px;



    background:

        linear-gradient(

            135deg,

            var(--service-orange),

            var(--service-orange-light)

        );



    color:

        var(--service-white);



    text-decoration: none;



    font-size: 10px;



    font-weight: 700;



    box-shadow:

        0 10px 24px

        rgba(255,121,0,.20);



    transition:

        transform .25s ease,

        box-shadow .25s ease;

}





.serviceSupportCard__featuredBtn > i {

    width: 30px;

    height: 30px;



    display: grid;



    place-items: center;



    border-radius: 7px;



    background:

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



    font-style: normal;



    transition:

        transform .25s ease;

}





.serviceSupportCard__featuredBtn:hover {

    color:

        var(--service-white);



    transform:

        translateY(-2px);



    box-shadow:

        0 14px 28px

        rgba(255,121,0,.27);

}





.serviceSupportCard__featuredBtn:hover i {

    transform:

        translateX(3px);

}





/* =====================================================

   BOTTOM CTA

===================================================== */



.serviceSupportBottom {

    position: relative;



    z-index: 3;



    margin-top: 18px;



    min-height: 85px;



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 20px;



    padding:

        15px 17px;



    overflow: hidden;



    border:

        1px solid

        var(--service-border);



    border-radius: 15px;



    background:

        var(--service-white);



    box-shadow:

        0 12px 30px

        rgba(7,28,67,.045);

}





.serviceSupportBottom::before {

    content: "";



    position: absolute;



    width: 160px;

    height: 160px;



    right: -100px;

    top: -105px;



    border-radius: 50%;



    background:

        var(--service-orange);



    opacity: .045;

}





/* CONTENT */



.serviceSupportBottom__content {

    position: relative;



    z-index: 2;



    display: flex;



    align-items: center;



    gap: 11px;

}





.serviceSupportBottom__icon {

    width: 44px;

    height: 44px;



    flex:

        0 0 44px;



    display: grid;



    place-items: center;



    border-radius: 11px;



    background:

        rgba(255,121,0,.08);

}





.serviceSupportBottom__icon svg {

    width: 21px;

    height: 21px;



    fill: none;



    stroke:

        var(--service-orange);



    stroke-width: 1.7;



    stroke-linecap: round;



    stroke-linejoin: round;

}





.serviceSupportBottom__content span {

    display: block;



    margin-bottom: 3px;



    color:

        var(--service-orange);



    font-size: 10px;



    font-weight: 700;

}





.serviceSupportBottom__content strong {

    display: block;



    color:

        var(--service-navy);



    font-size: 13px;



    line-height: 1.4;

}





/* CTA */



.serviceSupportBottom__btn {

    position: relative;



    z-index: 2;



    min-height: 43px;



    display: inline-flex;



    align-items: center;



    gap: 9px;



    flex-shrink: 0;



    padding:

        0 6px 0 14px;



    border-radius: 8px;



    background:

        var(--service-navy);



    color:

        var(--service-white);



    text-decoration: none;



    font-size: 10px;



    font-weight: 700;



    transition:

        transform .25s ease,

        background .25s ease;

}





.serviceSupportBottom__btn i {

    width: 31px;

    height: 31px;



    display: grid;



    place-items: center;



    border-radius: 7px;



    background:

        rgba(255,255,255,.08);



    color:

        var(--service-orange);



    font-style: normal;



    transition:

        transform .25s ease;

}





.serviceSupportBottom__btn:hover {

    color:

        var(--service-white);



    background:

        var(--service-orange);



    transform:

        translateY(-2px);

}





.serviceSupportBottom__btn:hover i {

    color:

        var(--service-white);



    transform:

        translateX(3px);

}





/* =====================================================

   REVEAL

===================================================== */



.serviceSupportReveal {

    opacity: 0;



    transform:

        translateY(28px);



    will-change:

        opacity,

        transform;



    transition:

        opacity .7s ease

        var(--support-delay,0ms),



        transform .75s

        cubic-bezier(.2,.75,.2,1)

        var(--support-delay,0ms);

}





.serviceSupportReveal.serviceSupportShow {

    opacity: 1;



    transform:

        translateY(0);

}





/* =====================================================

   TABLET

===================================================== */



@media(max-width:991.98px) {



    .serviceSupportSec {

        padding:

            60px 0;

    }





    .serviceSupportGrid {

        grid-template-columns:

            repeat(2,minmax(0,1fr));

    }





    .serviceSupportCard {

        min-height: 285px;

    }



}





/* =====================================================

   MOBILE

===================================================== */



@media(max-width:575.98px) {



    .serviceSupportSec {

        padding:

            45px 0;

    }





    .serviceSupportHead {

        margin-bottom: 30px;



        text-align: left;

    }





    .serviceSupportHead__tag {

        font-size: 16px;

    }





    .serviceSupportHead h2 {

        font-size: 31px;



        line-height: 1.13;

    }





    .serviceSupportHead p {

        font-size: 16px;

    }





    .serviceSupportGrid {

        grid-template-columns:

            1fr;



        gap: 12px;

    }





    .serviceSupportCard {

        min-height: auto;



        padding: 18px;

    }





    .serviceSupportCard--featured h3 {

        font-size: 21px;

    }





    .serviceSupportBottom {

        align-items: stretch;



        flex-direction: column;



        padding: 15px;

    }





    .serviceSupportBottom__btn {

        width: 100%;



        justify-content: space-between;

    }



}





/* =====================================================

   REDUCED MOTION

===================================================== */



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



    .serviceSupportReveal {

        opacity: 1 !important;



        transform: none !important;



        transition: none !important;

    }





    .serviceSupportSec__glow,

    .serviceSupportHead__tag > span {

        animation: none !important;

    }



}



/* =====================================================

   SUPPORT EXPERIENCE SECTION

===================================================== */



.supportExperienceSec {

    position: relative;

    overflow: hidden;



    padding: 50px 0;



    background:

        linear-gradient(

            135deg,

            var(--service-white) 0%,

            var(--service-light-bg) 100%

        );

}





/* =====================================================

   GLOW

===================================================== */



.supportExperienceSec__glow {

    position: absolute;



    border-radius: 50%;



    pointer-events: none;

}





.supportExperienceSec__glow--one {

    width: 360px;

    height: 360px;



    right: -190px;

    top: -210px;



    background:

        radial-gradient(

            circle,

            rgba(255,121,0,.10),

            transparent 70%

        );



    animation:

        supportExperienceGlow

        8s ease-in-out infinite;

}





.supportExperienceSec__glow--two {

    width: 320px;

    height: 320px;



    left: -180px;

    bottom: -210px;



    background:

        radial-gradient(

            circle,

            rgba(7,28,67,.05),

            transparent 70%

        );



    animation:

        supportExperienceGlow

        10s ease-in-out infinite reverse;

}





@keyframes supportExperienceGlow {



    0%,

    100% {

        transform:

            translateY(0)

            scale(1);

    }



    50% {

        transform:

            translateY(-14px)

            scale(1.04);

    }



}





/* =====================================================

   LEFT VISUAL

===================================================== */



.supportExperienceVisual {

    position: relative;



    min-height: 545px;



    padding:

        0 55px 45px 0;

}





/* =====================================================

   MAIN IMAGE

===================================================== */



.supportExperienceVisual__main {

    position: relative;



    z-index: 3;



    width: 92%;

    height: 480px;



    overflow: hidden;



    border-radius:

        28px 28px 85px 28px;



    background:

        #e9edf2;



    box-shadow:

        0 30px 65px

        rgba(7,28,67,.15);



    transition:

        transform .5s ease,

        box-shadow .5s ease;

}





.supportExperienceVisual:hover

.supportExperienceVisual__main {

    transform:

        translateY(-5px);



    box-shadow:

        0 36px 75px

        rgba(7,28,67,.19);

}





.supportExperienceVisual__main img {

    width: 100%;

    height: 100%;



    display: block;



    object-fit: cover;



    transition:

        transform .8s

        cubic-bezier(.2,.7,.2,1);

}





.supportExperienceVisual:hover

.supportExperienceVisual__main img {

    transform:

        scale(1.045);

}





/* =====================================================

   IMAGE OVERLAY

===================================================== */



.supportExperienceVisual__overlay {

    position: absolute;



    inset: 0;



    background:

        linear-gradient(

            180deg,

            transparent 50%,

            rgba(5,20,48,.76) 100%

        );

}





/* =====================================================

   IMAGE CAPTION

===================================================== */



.supportExperienceVisual__caption {

    position: absolute;



    left: 20px;

    right: 20px;

    bottom: 20px;



    z-index: 4;



    padding:

        13px 15px;



    border:

        1px solid

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



    border-radius: 12px;



    background:

        rgba(5,22,53,.67);



    backdrop-filter:

        blur(10px);

}





.supportExperienceVisual__caption span {

    display: block;



    margin-bottom: 4px;



    color:

        var(--service-orange);



    font-size: 10px;



    font-weight: 700;

}





.supportExperienceVisual__caption strong {

    display: block;



    color:

        var(--service-white);



    font-size: 14px;



    line-height: 1.4;

}





/* =====================================================

   SMALL IMAGE

===================================================== */



.supportExperienceVisual__small {

    position: absolute;



    z-index: 6;



    width: 180px;

    height: 135px;



    right: 0;

    bottom: 0;



    overflow: hidden;



    padding: 5px;



    border-radius: 17px;



    background:

        var(--service-white);



    box-shadow:

        0 18px 42px

        rgba(7,28,67,.16);



    animation:

        supportSmallFloat

        5s ease-in-out infinite;

}





.supportExperienceVisual__small img {

    width: 100%;

    height: 100%;



    display: block;



    object-fit: cover;



    border-radius: 12px;

}





@keyframes supportSmallFloat {



    0%,

    100% {

        transform:

            translateY(0);

    }



    50% {

        transform:

            translateY(-7px);

    }



}





/* =====================================================

   SIMPLE BADGE

===================================================== */



.supportExperienceVisual__badge {

    position: absolute;



    z-index: 7;



    top: 42px;

    right: 6px;



    display: flex;



    align-items: center;



    gap: 10px;



    padding:

        10px 12px;



    border:

        1px solid

        var(--service-border);



    border-radius: 12px;



    background:

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



    box-shadow:

        0 16px 38px

        rgba(7,28,67,.13);

}





.supportExperienceVisual__badgeIcon {

    width: 36px;

    height: 36px;



    flex:

        0 0 36px;



    display: grid;



    place-items: center;



    border-radius: 9px;



    background:

        rgba(255,121,0,.09);

}





.supportExperienceVisual__badgeIcon svg {

    width: 17px;

    height: 17px;



    fill: none;



    stroke:

        var(--service-orange);



    stroke-width: 1.7;



    stroke-linecap: round;



    stroke-linejoin: round;

}





.supportExperienceVisual__badge small {

    display: block;



    margin-bottom: 2px;



    color:

        var(--service-text);



    font-size: 8px;

}





.supportExperienceVisual__badge strong {

    display: block;



    color:

        var(--service-navy);



    font-size: 10px;

}





/* =====================================================

   BACK SHAPE

===================================================== */



.supportExperienceVisual__shape {

    position: absolute;



    z-index: 1;



    width: 300px;

    height: 320px;



    right: 25px;

    top: 70px;



    border-radius:

        80px 22px 80px 22px;



    background:

        linear-gradient(

            145deg,

            rgba(255,121,0,.18),

            rgba(255,121,0,.025)

        );



    transform:

        rotate(7deg);

}





/* =====================================================

   RIGHT CONTENT

===================================================== */



.supportExperienceContent {

    width: 100%;

}





/* =====================================================

   TAG

===================================================== */



.supportExperienceContent__tag {

    width: fit-content;



    display: flex;



    align-items: center;



    gap: 9px;



    margin-bottom: 16px;



    padding:

        8px 12px;



    border:

        1px solid

        rgba(255,121,0,.16);



    border-radius: 100px;



    background:

        rgba(255,121,0,.065);



    color:

        var(--service-orange);



    font-size: 16px;



    font-weight: 700;

}





.supportExperienceContent__tag > span {

    width: 8px;

    height: 8px;



    border-radius: 50%;



    background:

        var(--service-orange);



    box-shadow:

        0 0 0 5px

        rgba(255,121,0,.09);



    animation:

        supportExperiencePulse

        2s infinite;

}





@keyframes supportExperiencePulse {



    50% {

        box-shadow:

            0 0 0 10px

            rgba(255,121,0,0);

    }



}





/* =====================================================

   HEADING

===================================================== */



.supportExperienceContent h2 {

    margin:

        0 0 17px;



    color:

        var(--service-navy);



    font-size:

        clamp(

            35px,

            3.25vw,

            48px

        );



    line-height: 1.09;



    letter-spacing:

        -1.2px;



    font-weight: 700;

}





.supportExperienceContent h2 span {

    display: block;



    margin-top: 4px;



    color:

        var(--service-orange);

}





/* =====================================================

   INTRO

===================================================== */



.supportExperienceContent__intro {

    margin:

        0 0 23px;



    color:

        var(--service-text);



    font-size: 16px;



    line-height: 1.7;

}





/* =====================================================

   ITEMS

===================================================== */



.supportExperienceItem {

    display: grid;



    grid-template-columns:

        48px 1fr;



    align-items: flex-start;



    gap: 13px;



    margin-bottom: 11px;



    padding: 14px;



    border:

        1px solid

        var(--service-border);



    border-radius: 13px;



    background:

        var(--service-white);



    box-shadow:

        0 8px 24px

        rgba(7,28,67,.035);



    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}





.supportExperienceItem:hover {

    transform:

        translateX(5px);



    border-color:

        rgba(255,121,0,.22);



    box-shadow:

        0 13px 29px

        rgba(7,28,67,.07);

}





/* NUMBER */



.supportExperienceItem__number {

    width: 46px;

    height: 46px;



    display: grid;



    place-items: center;



    border-radius: 12px;



    background:

        var(--service-navy);



    color:

        var(--service-orange);



    font-size: 11px;



    font-weight: 700;



    transition:

        background .3s ease,

        color .3s ease,

        transform .3s ease;

}





.supportExperienceItem:hover

.supportExperienceItem__number {

    color:

        var(--service-white);



    background:

        var(--service-orange);



    transform:

        rotate(-5deg);

}





/* CONTENT */



.supportExperienceItem span {

    display: block;



    margin-bottom: 3px;



    color:

        var(--service-orange);



    font-size: 9px;



    font-weight: 700;

}





.supportExperienceItem h3 {

    margin:

        0 0 5px;



    color:

        var(--service-navy);



    font-size: 16px;



    line-height: 1.35;

}





.supportExperienceItem p {

    margin: 0;



    color:

        var(--service-text);



    font-size: 13px;



    line-height: 1.55;

}





/* =====================================================

   BOTTOM NOTE

===================================================== */



.supportExperienceContent__bottom {

    display: flex;



    align-items: flex-start;



    gap: 11px;



    margin-top: 18px;



    padding:

        14px;



    border:

        1px solid

        rgba(255,121,0,.16);



    border-radius: 13px;



    background:

        linear-gradient(

            135deg,

            rgba(255,121,0,.07),

            rgba(255,255,255,.90)

        );

}





.supportExperienceContent__bottom > div {

    width: 40px;

    height: 40px;



    flex:

        0 0 40px;



    display: grid;



    place-items: center;



    border-radius: 10px;



    background:

        rgba(255,121,0,.09);

}





.supportExperienceContent__bottom svg {

    width: 19px;

    height: 19px;



    fill: none;



    stroke:

        var(--service-orange);



    stroke-width: 1.7;



    stroke-linecap: round;



    stroke-linejoin: round;

}





.supportExperienceContent__bottom p {

    margin: 0;



    color:

        var(--service-text);



    font-size: 12px;



    line-height: 1.55;

}





.supportExperienceContent__bottom strong {

    display: block;



    margin-bottom: 3px;



    color:

        var(--service-navy);



    font-size: 13px;

}





/* =====================================================

   REVEAL

===================================================== */



.supportExpReveal {

    opacity: 0;



    transform:

        translateY(28px);



    transition:

        opacity .7s ease

        var(--support-exp-delay,0ms),



        transform .75s

        cubic-bezier(.2,.75,.2,1)

        var(--support-exp-delay,0ms);

}





.supportExpReveal--left {

    transform:

        translateX(-38px)

        scale(.98);

}





.supportExpReveal.supportExpShow {

    opacity: 1;



    transform:

        translate(0,0)

        scale(1);

}





/* =====================================================

   TABLET

===================================================== */



@media(max-width:991.98px) {



    .supportExperienceSec {

        padding:

            60px 0;

    }





    .supportExperienceVisual {

        max-width: 680px;



        margin:

            0 auto 12px;

    }



}





/* =====================================================

   MOBILE

===================================================== */



@media(max-width:575.98px) {



    .supportExperienceSec {

        padding:

            45px 0;

    }





    .supportExperienceVisual {

        min-height: 390px;



        padding:

            0 24px 25px 0;

    }





    .supportExperienceVisual__main {

        width: 94%;

        height: 350px;



        border-radius:

            20px 20px 58px 20px;

    }





    .supportExperienceVisual__small {

        width: 125px;

        height: 95px;

    }





    .supportExperienceVisual__badge {

        top: 25px;

        right: 0;



        padding:

            8px 9px;

    }





    .supportExperienceVisual__badgeIcon {

        width: 30px;

        height: 30px;



        flex-basis: 30px;

    }





    .supportExperienceVisual__badge small {

        font-size: 7px;

    }





    .supportExperienceVisual__badge strong {

        font-size: 8px;

    }





    .supportExperienceVisual__shape {

        width: 220px;

        height: 245px;



        right: 8px;

        top: 65px;

    }





    .supportExperienceContent__tag {

        font-size: 16px;

    }





    .supportExperienceContent h2 {

        font-size: 31px;



        line-height: 1.13;

    }





    .supportExperienceContent__intro {

        font-size: 16px;

    }





    .supportExperienceItem {

        grid-template-columns:

            43px 1fr;



        gap: 10px;



        padding: 12px;

    }





    .supportExperienceItem__number {

        width: 41px;

        height: 41px;

    }



}





/* =====================================================

   REDUCED MOTION

===================================================== */



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



    .supportExpReveal {

        opacity: 1 !important;



        transform: none !important;



        transition: none !important;

    }





    .supportExperienceSec__glow,

    .supportExperienceVisual__small,

    .supportExperienceContent__tag > span {

        animation: none !important;

    }



}



/*---------------------------------better-----------------------------*/



    /* =====================================================

   PROBLEM TO SOLUTION SECTION

===================================================== */



.serviceProblemSolution {

    position: relative;

    overflow: hidden;



    padding: 82px 0;



    background:

        linear-gradient(

            135deg,

            #edf3fb 0%,

            #f5f8fc 48%,

            #fff7ef 100%

        );

}





/* =====================================================

   BACKGROUND PATTERN

===================================================== */



.serviceProblemSolution__pattern {

    position: absolute;

    inset: 0;



    opacity: .45;



    pointer-events: none;



    background-image:

        radial-gradient(

            rgba(7,28,67,.08) 1px,

            transparent 1px

        );



    background-size: 24px 24px;



    mask-image:

        linear-gradient(

            to bottom,

            transparent,

            #000 20%,

            #000 80%,

            transparent

        );

}





/* =====================================================

   GLOW

===================================================== */



.serviceProblemSolution__glow {

    position: absolute;



    border-radius: 50%;



    pointer-events: none;

}





.serviceProblemSolution__glow--one {

    width: 420px;

    height: 420px;



    right: -230px;

    top: -250px;



    background:

        radial-gradient(

            circle,

            rgba(255,121,0,.14),

            transparent 70%

        );



    animation:

        psGlowMove 9s ease-in-out infinite;

}





.serviceProblemSolution__glow--two {

    width: 360px;

    height: 360px;



    left: -220px;

    bottom: -230px;



    background:

        radial-gradient(

            circle,

            rgba(7,28,67,.08),

            transparent 70%

        );



    animation:

        psGlowMove 11s ease-in-out infinite reverse;

}





@keyframes psGlowMove {



    50% {

        transform:

            translateY(-14px)

            scale(1.05);

    }



}





/* =====================================================

   HEADER

===================================================== */



.serviceProblemSolution__head {

    position: relative;



    z-index: 3;



    max-width: 820px;



    margin:

        0 auto 46px;



    text-align: center;

}





.serviceProblemSolution__tag {

    width: fit-content;



    display: inline-flex;



    align-items: center;



    gap: 9px;



    margin-bottom: 15px;



    padding:

        8px 12px;



    border:

        1px solid rgba(255,121,0,.16);



    border-radius: 100px;



    background:

        rgba(255,255,255,.76);



    color:

        var(--service-orange);



    font-size: 16px;



    font-weight: 700;



    box-shadow:

        0 7px 20px

        rgba(7,28,67,.035);

}





.serviceProblemSolution__tag span {

    width: 8px;

    height: 8px;



    flex: 0 0 8px;



    border-radius: 50%;



    background:

        var(--service-orange);



    box-shadow:

        0 0 0 5px

        rgba(255,121,0,.10);



    animation:

        psTagPulse 2s infinite;

}





@keyframes psTagPulse {



    50% {

        box-shadow:

            0 0 0 10px

            rgba(255,121,0,0);

    }



}





.serviceProblemSolution__head h2 {

    margin:

        0 0 15px;



    color:

        var(--service-navy);



    font-size:

        clamp(

            36px,

            3.4vw,

            49px

        );



    line-height: 1.08;



    letter-spacing: -1.25px;



    font-weight: 700;

}





.serviceProblemSolution__head h2 span {

    display: block;



    margin-top: 4px;



    color:

        var(--service-orange);

}





.serviceProblemSolution__head p {

    max-width: 760px;



    margin:

        0 auto;



    color:

        var(--service-text);



    font-size: 16px;



    line-height: 1.7;

}





/* =====================================================

   MAIN JOURNEY

===================================================== */



.servicePSJourney {

    position: relative;



    z-index: 3;



    display: grid;



    grid-template-columns:

        minmax(0,1fr)

        105px

        minmax(0,1fr);



    gap: 18px;



    align-items: stretch;

}





/* =====================================================

   COMMON PANEL

===================================================== */



.servicePSPanel {

    position: relative;



    overflow: hidden;



    min-height: 520px;



    padding: 27px;



    border-radius: 21px;

}





/* =====================================================

   PROBLEM PANEL

===================================================== */



.servicePSPanel--problem {

    border:

        1px solid

        rgba(7,28,67,.08);



    background:

        linear-gradient(

            145deg,

            rgba(255,255,255,.91),

            rgba(241,245,251,.95)

        );



    box-shadow:

        0 22px 50px

        rgba(7,28,67,.08);

}





.servicePSPanel--problem::after {

    content: "";



    position: absolute;



    width: 190px;

    height: 190px;



    left: -110px;

    bottom: -120px;



    border-radius: 50%;



    background:

        var(--service-navy);



    opacity: .035;

}





/* =====================================================

   SOLUTION PANEL

===================================================== */



.servicePSPanel--solution {

    border:

        1px solid

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



    background:

        linear-gradient(

            145deg,

            var(--service-navy-dark),

            var(--service-navy-light)

        );



    box-shadow:

        0 25px 55px

        rgba(7,28,67,.18);

}





.servicePSPanel--solution::after {

    content: "";



    position: absolute;



    width: 220px;

    height: 220px;



    right: -130px;

    top: -135px;



    border-radius: 50%;



    background:

        radial-gradient(

            circle,

            rgba(255,121,0,.25),

            transparent 70%

        );

}





/* =====================================================

   PANEL HEADINGS

===================================================== */



.servicePSPanel__heading {

    position: relative;

    z-index: 2;



    margin-bottom: 25px;

}





.servicePSPanel__eyebrow {

    display: block;



    margin-bottom: 6px;



    color:

        var(--service-orange);



    font-size: 10px;



    font-weight: 700;

}





.servicePSPanel__heading h3 {

    margin: 0;



    color:

        var(--service-navy);



    font-size: 27px;



    line-height: 1.17;



    letter-spacing: -.5px;

}





.servicePSPanel__heading h3 strong {

    display: block;



    margin-top: 3px;



    color:

        var(--service-orange);

}





.servicePSPanel--solution

.servicePSPanel__heading h3 {

    color:

        var(--service-white);

}





/* =====================================================

   PROBLEMS LIST

===================================================== */



.servicePSProblems {

    position: relative;



    z-index: 2;



    display: grid;



    gap: 11px;

}





.servicePSProblem {

    display: grid;



    grid-template-columns:

        45px 1fr;



    align-items: center;



    gap: 12px;



    padding:

        13px;



    border:

        1px solid

        rgba(7,28,67,.07);



    border-radius: 12px;



    background:

        rgba(255,255,255,.76);



    transition:

        transform .3s ease,

        border-color .3s ease,

        background .3s ease,

        box-shadow .3s ease;

}





.servicePSProblem:hover {

    transform:

        translateX(5px);



    border-color:

        rgba(255,121,0,.20);



    background:

        var(--service-white);



    box-shadow:

        0 10px 24px

        rgba(7,28,67,.06);

}





.servicePSProblem__icon {

    width: 43px;

    height: 43px;



    display: grid;



    place-items: center;



    border-radius: 11px;



    background:

        rgba(7,28,67,.055);



    transition:

        background .3s ease,

        transform .3s ease;

}





.servicePSProblem__icon svg {

    width: 20px;

    height: 20px;



    fill: none;



    stroke:

        var(--service-navy);



    stroke-width: 1.65;



    stroke-linecap: round;



    stroke-linejoin: round;



    transition:

        stroke .3s ease;

}





.servicePSProblem:hover

.servicePSProblem__icon {

    background:

        var(--service-orange);



    transform:

        rotate(-5deg);

}





.servicePSProblem:hover

.servicePSProblem__icon svg {

    stroke:

        var(--service-white);

}





.servicePSProblem span {

    display: block;



    margin-bottom: 3px;



    color:

        var(--service-navy);



    font-size: 13px;



    font-weight: 700;

}





.servicePSProblem p {

    margin: 0;



    color:

        var(--service-text);



    font-size: 11px;



    line-height: 1.45;

}





/* =====================================================

   CENTER

===================================================== */



.servicePSCenter {

    position: relative;



    display: flex;



    align-items: center;



    justify-content: center;



    flex-direction: column;



    gap: 10px;

}





.servicePSCenter__line {

    position: absolute;



    top: 40px;

    bottom: 40px;



    width: 1px;



    overflow: hidden;



    background:

        rgba(7,28,67,.09);

}





.servicePSCenter__line span {

    display: block;



    width: 100%;

    height: 0;



    background:

        linear-gradient(

            to bottom,

            transparent,

            var(--service-orange),

            transparent

        );

}





.serviceProblemSolution.psActive

.servicePSCenter__line span {

    animation:

        psLineGrow

        1.4s .25s forwards;

}





@keyframes psLineGrow {



    to {

        height: 100%;

    }



}





.servicePSCenter__circle {

    position: relative;



    z-index: 3;



    width: 67px;

    height: 67px;



    display: grid;



    place-items: center;



    border:

        7px solid #f5f8fc;



    border-radius: 50%;



    background:

        linear-gradient(

            135deg,

            var(--service-orange),

            var(--service-orange-light)

        );



    box-shadow:

        0 14px 32px

        rgba(255,121,0,.23);



    animation:

        psCenterFloat

        4s ease-in-out infinite;

}





@keyframes psCenterFloat {



    50% {

        transform:

            translateY(-6px);

    }



}





.servicePSCenter__circle svg {

    width: 26px;

    height: 26px;



    fill: none;



    stroke:

        var(--service-white);



    stroke-width: 1.8;



    stroke-linecap: round;



    stroke-linejoin: round;

}





.servicePSCenter small {

    position: relative;



    z-index: 3;



    padding:

        5px 7px;



    border-radius: 6px;



    background:

        #f5f8fc;



    color:

        var(--service-orange);



    font-size: 8px;



    font-weight: 700;



    text-transform: uppercase;



    letter-spacing: .4px;

}





/* =====================================================

   SOLUTION LIST

===================================================== */



.servicePSSolutions {

    position: relative;



    z-index: 2;



    display: grid;



    gap: 12px;



    margin-bottom: 20px;

}





.servicePSSolution {

    display: grid;



    grid-template-columns:

        43px 1fr;



    gap: 12px;



    padding:

        13px;



    border:

        1px solid

        rgba(255,255,255,.075);



    border-radius: 12px;



    background:

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



    transition:

        transform .3s ease,

        border-color .3s ease,

        background .3s ease;

}





.servicePSSolution:hover {

    transform:

        translateX(5px);



    border-color:

        rgba(255,121,0,.20);



    background:

        rgba(255,121,0,.06);

}





.servicePSSolution__number {

    width: 41px;

    height: 41px;



    display: grid;



    place-items: center;



    border-radius: 10px;



    background:

        rgba(255,121,0,.10);



    color:

        var(--service-orange);



    font-size: 10px;



    font-weight: 700;



    transition:

        background .3s ease,

        color .3s ease;

}





.servicePSSolution:hover

.servicePSSolution__number {

    color:

        var(--service-white);



    background:

        var(--service-orange);

}





.servicePSSolution strong {

    display: block;



    margin-bottom: 4px;



    color:

        var(--service-white);



    font-size: 13px;

}





.servicePSSolution p {

    margin: 0;



    color:

        rgba(255,255,255,.50);



    font-size: 11px;



    line-height: 1.5;

}





/* =====================================================

   SOLUTION CTA

===================================================== */



.servicePSSolution__cta {

    position: relative;



    z-index: 2;



    min-height: 70px;



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 14px;



    padding:

        11px 11px 11px 14px;



    border-radius: 12px;



    background:

        linear-gradient(

            135deg,

            var(--service-orange),

            var(--service-orange-light)

        );



    color:

        var(--service-white);



    text-decoration: none;



    box-shadow:

        0 14px 28px

        rgba(255,121,0,.20);



    transition:

        transform .3s ease,

        box-shadow .3s ease;

}





.servicePSSolution__cta small {

    display: block;



    margin-bottom: 3px;



    color:

        rgba(255,255,255,.70);



    font-size: 8px;

}





.servicePSSolution__cta strong {

    display: block;



    color:

        var(--service-white);



    font-size: 13px;

}





.servicePSSolution__cta > span {

    width: 42px;

    height: 42px;



    flex:

        0 0 42px;



    display: grid;



    place-items: center;



    border-radius: 10px;



    background:

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



    font-size: 18px;



    transition:

        transform .3s ease;

}





.servicePSSolution__cta:hover {

    color:

        var(--service-white);



    transform:

        translateY(-3px);



    box-shadow:

        0 19px 36px

        rgba(255,121,0,.28);

}





.servicePSSolution__cta:hover > span {

    transform:

        translateX(4px);

}





/* =====================================================

   REVEAL

===================================================== */



.psReveal {

    opacity: 0;



    transform:

        translateY(30px);



    transition:

        opacity .7s ease

        var(--ps-delay,0ms),



        transform .75s

        cubic-bezier(.2,.75,.2,1)

        var(--ps-delay,0ms);

}





.psReveal.psShow {

    opacity: 1;



    transform:

        translateY(0);

}





/* =====================================================

   TABLET

===================================================== */



@media(max-width:991.98px) {



    .serviceProblemSolution {

        padding:

            62px 0;

    }





    .servicePSJourney {

        grid-template-columns:

            1fr;



        gap: 15px;

    }





    .servicePSCenter {

        min-height: 90px;



        flex-direction: row;

    }





    .servicePSCenter__line {

        left: 40px;

        right: 40px;

        top: 50%;



        width: auto;

        height: 1px;

    }





    .servicePSCenter__line span {

        width: 0;

        height: 100%;

    }





    .serviceProblemSolution.psActive

    .servicePSCenter__line span {

        animation:

            psLineGrowHorizontal

            1.4s .25s forwards;

    }





    @keyframes psLineGrowHorizontal {



        to {

            width: 100%;

        }



    }





    .servicePSPanel {

        min-height: auto;

    }



}





/* =====================================================

   MOBILE

===================================================== */



@media(max-width:575.98px) {



    .serviceProblemSolution {

        padding:

            46px 0;

    }





    .serviceProblemSolution__head {

        margin-bottom: 31px;



        text-align: left;

    }





    .serviceProblemSolution__tag {

        font-size: 16px;

    }





    .serviceProblemSolution__head h2 {

        font-size: 31px;



        line-height: 1.13;

    }





    .serviceProblemSolution__head p {

        font-size: 16px;

    }





    .servicePSPanel {

        padding: 19px;



        border-radius: 16px;

    }





    .servicePSPanel__heading h3 {

        font-size: 23px;

    }





    .servicePSCenter__circle {

        width: 57px;

        height: 57px;

    }





    .servicePSCenter small {

        display: none;

    }



}





/* =====================================================

   REDUCED MOTION

===================================================== */



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



    .psReveal {

        opacity: 1 !important;



        transform: none !important;



        transition: none !important;

    }





    .serviceProblemSolution__glow,

    .serviceProblemSolution__tag span,

    .servicePSCenter__circle {

        animation: none !important;

    }





    .servicePSCenter__line span {

        height: 100%;

    }



}

/*-------------------------------------------------------*/

/* =====================================================

   HOW SUPPORT WORKS

===================================================== */



.serviceProcessSec {

    position: relative;

    overflow: hidden;



    padding: 82px 0;



    background:

        linear-gradient(

            135deg,

            #fff7ef 0%,

            #fffaf5 45%,

            #f5f8fc 100%

        );

}





/* PATTERN */



.serviceProcessSec__pattern {

    position: absolute;

    inset: 0;



    pointer-events: none;



    opacity: .45;



    background-image:

        radial-gradient(

            rgba(255,121,0,.10) 1px,

            transparent 1px

        );



    background-size: 28px 28px;



    mask-image:

        linear-gradient(

            to bottom,

            transparent,

            #000 15%,

            #000 85%,

            transparent

        );

}





/* GLOWS */



.serviceProcessSec__glow {

    position: absolute;



    border-radius: 50%;



    pointer-events: none;

}



.serviceProcessSec__glow--one {

    width: 420px;

    height: 420px;



    right: -220px;

    top: -240px;



    background:

        radial-gradient(

            circle,

            rgba(255,121,0,.14),

            transparent 70%

        );



    animation:

        processGlow 9s ease-in-out infinite;

}



.serviceProcessSec__glow--two {

    width: 340px;

    height: 340px;



    left: -200px;

    bottom: -220px;



    background:

        radial-gradient(

            circle,

            rgba(7,28,67,.07),

            transparent 70%

        );



    animation:

        processGlow 11s ease-in-out infinite reverse;

}



@keyframes processGlow {

    50% {

        transform:

            translateY(-14px)

            scale(1.05);

    }

}





/* =====================================================

   HEADING

===================================================== */



.serviceProcessHead {

    position: relative;

    z-index: 3;



    max-width: 820px;



    margin:

        0 auto 38px;



    text-align: center;

}



.serviceProcessHead__tag {

    width: fit-content;



    display: inline-flex;



    align-items: center;



    gap: 9px;



    margin-bottom: 15px;



    padding:

        8px 12px;



    border:

        1px solid rgba(255,121,0,.17);



    border-radius: 100px;



    background:

        rgba(255,255,255,.78);



    color:

        var(--service-orange);



    font-size: 16px;



    font-weight: 700;

}



.serviceProcessHead__tag > span {

    width: 8px;

    height: 8px;



    border-radius: 50%;



    background:

        var(--service-orange);



    box-shadow:

        0 0 0 5px

        rgba(255,121,0,.10);



    animation:

        processPulse 2s infinite;

}



@keyframes processPulse {

    50% {

        box-shadow:

            0 0 0 10px

            rgba(255,121,0,0);

    }

}



.serviceProcessHead h2 {

    margin:

        0 0 14px;



    color:

        var(--service-navy);



    font-size:

        clamp(

            36px,

            3.4vw,

            49px

        );



    line-height: 1.08;



    letter-spacing: -1.25px;

}



.serviceProcessHead h2 span {

    display: block;



    margin-top: 4px;



    color:

        var(--service-orange);

}



.serviceProcessHead p {

    max-width: 760px;



    margin:

        0 auto;



    color:

        var(--service-text);



    font-size: 16px;



    line-height: 1.7;

}





/* =====================================================

   IMAGE STRIP

===================================================== */



.serviceProcessVisual {

    position: relative;



    z-index: 3;



    min-height: 245px;



    overflow: hidden;



    margin-bottom: 42px;



    border-radius: 21px;



    box-shadow:

        0 22px 50px

        rgba(7,28,67,.12);

}



.serviceProcessVisual__image {

    position: absolute;

    inset: 0;

}



.serviceProcessVisual__image img {

    width: 100%;

    height: 100%;



    object-fit: cover;



    display: block;



    transition:

        transform .8s ease;

}



.serviceProcessVisual:hover

.serviceProcessVisual__image img {

    transform:

        scale(1.04);

}



.serviceProcessVisual__overlay {

    position: absolute;

    inset: 0;



    background:

        linear-gradient(

            90deg,

            rgba(4,20,47,.92) 0%,

            rgba(4,20,47,.74) 45%,

            rgba(4,20,47,.28) 100%

        );

}



.serviceProcessVisual__content {

    position: relative;



    z-index: 2;



    max-width: 560px;



    padding:

        70px 35px;

}



.serviceProcessVisual__content span {

    display: block;



    margin-bottom: 7px;



    color:

        var(--service-orange);



    font-size: 11px;



    font-weight: 700;

}



.serviceProcessVisual__content strong {

    display: block;



    color:

        var(--service-white);



    font-size:

        clamp(

            24px,

            2.4vw,

            34px

        );



    line-height: 1.2;

}





/* =====================================================

   PROCESS RAIL

===================================================== */



.serviceProcessRail {

    position: relative;



    z-index: 3;



    display: grid;



    grid-template-columns:

        repeat(4,minmax(0,1fr));



    gap: 16px;

}





/* TRACK */



.serviceProcessRail__track {

    position: absolute;



    left: 11%;

    right: 11%;



    top: 32px;



    height: 2px;



    overflow: hidden;



    background:

        rgba(7,28,67,.09);

}



.serviceProcessRail__track > span {

    display: block;



    width: 0;

    height: 100%;



    background:

        linear-gradient(

            90deg,

            var(--service-orange),

            var(--service-orange-light)

        );

}



.serviceProcessSec.processActive

.serviceProcessRail__track > span {

    animation:

        processTrackGrow

        1.5s .25s forwards;

}



@keyframes processTrackGrow {

    to {

        width: 100%;

    }

}





/* =====================================================

   STEP

===================================================== */



.serviceProcessStep {

    position: relative;



    padding:

        54px 18px 20px;



    min-height: 290px;



    border:

        1px solid

        rgba(7,28,67,.07);



    border-radius: 16px;



    background:

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



    backdrop-filter:

        blur(10px);



    box-shadow:

        0 10px 28px

        rgba(7,28,67,.04);



    transition:

        transform .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;

}



.serviceProcessStep:hover {

    transform:

        translateY(-7px);



    border-color:

        rgba(255,121,0,.22);



    box-shadow:

        0 18px 38px

        rgba(7,28,67,.08);

}





/* NODE */



.serviceProcessStep__node {

    position: absolute;



    top: 5px;

    left: 50%;



    width: 56px;

    height: 56px;



    transform:

        translateX(-50%);



    display: grid;



    place-items: center;



    border:

        6px solid #fff7ef;



    border-radius: 50%;



    background:

        var(--service-navy);



    color:

        var(--service-orange);



    font-size: 11px;



    font-weight: 700;



    z-index: 4;



    transition:

        background .3s ease,

        color .3s ease,

        transform .3s ease;

}



.serviceProcessStep:hover

.serviceProcessStep__node {

    color:

        var(--service-white);



    background:

        var(--service-orange);



    transform:

        translateX(-50%)

        scale(1.06);

}





/* ICON */



.serviceProcessStep__icon {

    width: 48px;

    height: 48px;



    display: grid;



    place-items: center;



    margin:

        13px auto 16px;



    border-radius: 12px;



    background:

        rgba(255,121,0,.08);

}



.serviceProcessStep__icon svg {

    width: 22px;

    height: 22px;



    fill: none;



    stroke:

        var(--service-orange);



    stroke-width: 1.65;



    stroke-linecap: round;

    stroke-linejoin: round;

}





/* CONTENT */



.serviceProcessStep__label {

    display: block;



    margin-bottom: 5px;



    color:

        var(--service-orange);



    font-size: 9px;



    font-weight: 700;



    text-align: center;

}



.serviceProcessStep h3 {

    margin:

        0 0 8px;



    color:

        var(--service-navy);



    font-size: 18px;



    line-height: 1.3;



    text-align: center;

}



.serviceProcessStep p {

    margin: 0;



    color:

        var(--service-text);



    font-size: 13px;



    line-height: 1.55;



    text-align: center;

}





/* =====================================================

   BOTTOM CTA

===================================================== */



.serviceProcessBottom {

    position: relative;



    z-index: 3;



    margin-top: 18px;



    min-height: 82px;



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 20px;



    padding:

        14px 16px;



    border:

        1px solid

        rgba(7,28,67,.08);



    border-radius: 14px;



    background:

        var(--service-white);



    box-shadow:

        0 10px 28px

        rgba(7,28,67,.045);

}



.serviceProcessBottom > div {

    display: flex;



    align-items: center;



    gap: 11px;

}



.serviceProcessBottom__icon {

    width: 44px;

    height: 44px;



    flex:

        0 0 44px;



    display: grid;



    place-items: center;



    border-radius: 11px;



    background:

        rgba(255,121,0,.08);

}



.serviceProcessBottom__icon svg {

    width: 21px;

    height: 21px;



    fill: none;



    stroke:

        var(--service-orange);



    stroke-width: 1.7;



    stroke-linecap: round;

    stroke-linejoin: round;

}



.serviceProcessBottom small {

    display: block;



    margin-bottom: 3px;



    color:

        var(--service-text);



    font-size: 9px;

}



.serviceProcessBottom strong {

    display: block;



    color:

        var(--service-navy);



    font-size: 13px;



    line-height: 1.4;

}



.serviceProcessBottom > a {

    min-height: 43px;



    display: inline-flex;



    align-items: center;



    gap: 9px;



    padding:

        0 6px 0 14px;



    border-radius: 8px;



    background:

        linear-gradient(

            135deg,

            var(--service-orange),

            var(--service-orange-light)

        );



    color:

        var(--service-white);



    text-decoration: none;



    font-size: 10px;



    font-weight: 700;



    box-shadow:

        0 10px 24px

        rgba(255,121,0,.20);



    transition:

        transform .25s ease,

        box-shadow .25s ease;

}



.serviceProcessBottom > a i {

    width: 31px;

    height: 31px;



    display: grid;



    place-items: center;



    border-radius: 7px;



    background:

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



    font-style: normal;



    transition:

        transform .25s ease;

}



.serviceProcessBottom > a:hover {

    color:

        var(--service-white);



    transform:

        translateY(-2px);



    box-shadow:

        0 15px 30px

        rgba(255,121,0,.27);

}



.serviceProcessBottom > a:hover i {

    transform:

        translateX(3px);

}





/* =====================================================

   REVEAL

===================================================== */



.serviceProcessReveal {

    opacity: 0;



    transform:

        translateY(28px);



    transition:

        opacity .7s ease

        var(--process-delay,0ms),



        transform .75s

        cubic-bezier(.2,.75,.2,1)

        var(--process-delay,0ms);

}



.serviceProcessReveal.serviceProcessShow {

    opacity: 1;



    transform:

        translateY(0);

}





/* =====================================================

   TABLET

===================================================== */



@media(max-width:991.98px) {



    .serviceProcessSec {

        padding:

            62px 0;

    }



    .serviceProcessRail {

        grid-template-columns:

            repeat(2,minmax(0,1fr));



        gap: 16px;

    }



    .serviceProcessRail__track {

        display: none;

    }



}





/* =====================================================

   MOBILE

===================================================== */



@media(max-width:575.98px) {



    .serviceProcessSec {

        padding:

            46px 0;

    }



    .serviceProcessHead {

        margin-bottom: 30px;



        text-align: left;

    }



    .serviceProcessHead__tag {

        font-size: 16px;

    }



    .serviceProcessHead h2 {

        font-size: 31px;



        line-height: 1.13;

    }



    .serviceProcessHead p {

        font-size: 16px;

    }



    .serviceProcessVisual {

        min-height: 220px;



        margin-bottom: 30px;



        border-radius: 16px;

    }



    .serviceProcessVisual__content {

        padding:

            55px 20px;

    }



    .serviceProcessRail {

        grid-template-columns:

            1fr;

    }



    .serviceProcessStep {

        min-height: auto;



        padding:

            48px 17px 18px;

    }



    .serviceProcessBottom {

        align-items: stretch;



        flex-direction: column;



        padding: 15px;

    }



    .serviceProcessBottom > a {

        width: 100%;



        justify-content: space-between;

    }



}





/* =====================================================

   REDUCED MOTION

===================================================== */



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



    .serviceProcessReveal {

        opacity: 1 !important;



        transform: none !important;



        transition: none !important;

    }



    .serviceProcessSec__glow,

    .serviceProcessHead__tag > span {

        animation: none !important;

    }



    .serviceProcessRail__track > span {

        width: 100%;

    }



}



/*----------------------------service faq----------------------------------------*/

/* =====================================================

   SERVICE FAQ SECTION

===================================================== */



.serviceFaqSec {

    position: relative;

    overflow: hidden;



    padding: 80px 0;



    background:

        linear-gradient(

            135deg,

            #eef3fa 0%,

            #f7f9fc 48%,

            #ffffff 100%

        );

}





/* =====================================================

   PATTERN

===================================================== */



.serviceFaqSec__pattern {

    position: absolute;

    inset: 0;



    opacity: .42;



    pointer-events: none;



    background-image:

        radial-gradient(

            rgba(7,28,67,.075) 1px,

            transparent 1px

        );



    background-size:

        26px 26px;



    mask-image:

        linear-gradient(

            to right,

            #000,

            transparent 85%

        );

}





/* =====================================================

   GLOWS

===================================================== */



.serviceFaqSec__glow {

    position: absolute;



    border-radius: 50%;



    pointer-events: none;

}





.serviceFaqSec__glow--one {

    width: 390px;

    height: 390px;



    right: -210px;

    top: -230px;



    background:

        radial-gradient(

            circle,

            rgba(255,121,0,.12),

            transparent 70%

        );



    animation:

        serviceFaqGlow 9s ease-in-out infinite;

}





.serviceFaqSec__glow--two {

    width: 330px;

    height: 330px;



    left: -190px;

    bottom: -210px;



    background:

        radial-gradient(

            circle,

            rgba(7,28,67,.07),

            transparent 70%

        );



    animation:

        serviceFaqGlow 11s ease-in-out infinite reverse;

}





@keyframes serviceFaqGlow {



    50% {

        transform:

            translateY(-14px)

            scale(1.04);

    }



}





/* =====================================================

   LEFT INTRO

===================================================== */



.serviceFaqIntro {

    position: sticky;



    top: 130px;

}





/* TAG */



.serviceFaqIntro__tag {

    width: fit-content;



    display: flex;



    align-items: center;



    gap: 9px;



    margin-bottom: 16px;



    padding:

        8px 12px;



    border:

        1px solid

        rgba(255,121,0,.17);



    border-radius: 100px;



    background:

        rgba(255,255,255,.78);



    color:

        var(--service-orange);



    font-size: 16px;



    font-weight: 700;



    box-shadow:

        0 7px 20px

        rgba(7,28,67,.035);

}





.serviceFaqIntro__tag > span {

    width: 8px;

    height: 8px;



    flex:

        0 0 8px;



    border-radius: 50%;



    background:

        var(--service-orange);



    box-shadow:

        0 0 0 5px

        rgba(255,121,0,.10);



    animation:

        serviceFaqPulse

        2s infinite;

}





@keyframes serviceFaqPulse {



    50% {

        box-shadow:

            0 0 0 10px

            rgba(255,121,0,0);

    }



}





/* HEADING */



.serviceFaqIntro h2 {

    margin:

        0 0 17px;



    color:

        var(--service-navy);



    font-size:

        clamp(

            35px,

            3.15vw,

            47px

        );



    line-height: 1.09;



    letter-spacing:

        -1.2px;



    font-weight: 700;

}





.serviceFaqIntro h2 em {

    display: block;



    margin-top: 4px;



    color:

        var(--service-orange);



    font-style: normal;

}





.serviceFaqIntro > p {

    margin:

        0 0 23px;



    color:

        var(--service-text);



    font-size: 16px;



    line-height: 1.7;

}





/* =====================================================

   HELP BOX

===================================================== */



.serviceFaqIntro__help {

    display: flex;



    align-items: center;



    gap: 11px;



    margin-bottom: 12px;



    padding: 13px;



    border:

        1px solid

        var(--service-border);



    border-radius: 13px;



    background:

        rgba(255,255,255,.88);



    box-shadow:

        0 10px 27px

        rgba(7,28,67,.05);

}





.serviceFaqIntro__helpIcon {

    width: 42px;

    height: 42px;



    flex:

        0 0 42px;



    display: grid;



    place-items: center;



    border-radius: 11px;



    background:

        rgba(255,121,0,.08);

}





.serviceFaqIntro__helpIcon svg {

    width: 20px;

    height: 20px;



    fill: none;



    stroke:

        var(--service-orange);



    stroke-width: 1.7;



    stroke-linecap: round;



    stroke-linejoin: round;

}





.serviceFaqIntro__help small {

    display: block;



    margin-bottom: 3px;



    color:

        var(--service-text);



    font-size: 9px;

}





.serviceFaqIntro__help strong {

    display: block;



    color:

        var(--service-navy);



    font-size: 12px;



    line-height: 1.4;

}





/* =====================================================

   LEFT BUTTON

===================================================== */



.serviceFaqIntro__btn {

    min-height: 45px;



    display: inline-flex;



    align-items: center;



    gap: 10px;



    padding:

        0 6px 0 14px;



    border-radius: 8px;



    background:

        var(--service-navy);



    color:

        var(--service-white);



    text-decoration: none;



    font-size: 10px;



    font-weight: 700;



    transition:

        transform .25s ease,

        background .25s ease,

        box-shadow .25s ease;

}





.serviceFaqIntro__btn i {

    width: 32px;

    height: 32px;



    display: grid;



    place-items: center;



    border-radius: 7px;



    background:

        rgba(255,255,255,.08);



    color:

        var(--service-orange);



    font-style: normal;



    transition:

        transform .25s ease,

        color .25s ease;

}





.serviceFaqIntro__btn:hover {

    color:

        var(--service-white);



    background:

        var(--service-orange);



    transform:

        translateY(-2px);



    box-shadow:

        0 12px 27px

        rgba(255,121,0,.22);

}





.serviceFaqIntro__btn:hover i {

    color:

        var(--service-white);



    transform:

        translateX(3px);

}





/* =====================================================

   FAQ LIST

===================================================== */



.serviceFaqList {

    position: relative;



    display: grid;



    gap: 10px;

}





/* =====================================================

   FAQ ITEM

===================================================== */



.serviceFaqItem {

    position: relative;



    overflow: hidden;



    border:

        1px solid

        var(--service-border);



    border-radius: 14px;



    background:

        rgba(255,255,255,.90);



    box-shadow:

        0 8px 22px

        rgba(7,28,67,.035);



    transition:

        border-color .3s ease,

        box-shadow .3s ease,

        transform .3s ease;

}





.serviceFaqItem:hover {

    border-color:

        rgba(255,121,0,.18);



    box-shadow:

        0 13px 30px

        rgba(7,28,67,.065);

}





.serviceFaqItem.is-open {

    border-color:

        rgba(255,121,0,.23);



    background:

        var(--service-white);



    box-shadow:

        0 15px 34px

        rgba(7,28,67,.07);

}





/* LEFT ACCENT */



.serviceFaqItem::before {

    content: "";



    position: absolute;



    left: 0;

    top: 0;

    bottom: 0;



    width: 3px;



    background:

        var(--service-orange);



    transform:

        scaleY(0);



    transform-origin: center;



    transition:

        transform .35s ease;

}





.serviceFaqItem.is-open::before {

    transform:

        scaleY(1);

}





/* =====================================================

   QUESTION

===================================================== */



.serviceFaqItem__question {

    width: 100%;



    min-height: 74px;



    display: grid;



    grid-template-columns:

        42px 1fr 38px;



    align-items: center;



    gap: 13px;



    padding:

        11px 13px 11px 15px;



    border: 0;



    outline: none;



    background: transparent;



    text-align: left;



    cursor: pointer;

}





/* NUMBER */



.serviceFaqItem__number {

    width: 40px;

    height: 40px;



    display: grid;



    place-items: center;



    border-radius: 10px;



    background:

        rgba(7,28,67,.055);



    color:

        var(--service-navy);



    font-size: 10px;



    font-weight: 700;



    transition:

        color .3s ease,

        background .3s ease,

        transform .3s ease;

}





.serviceFaqItem.is-open

.serviceFaqItem__number {

    color:

        var(--service-white);



    background:

        var(--service-orange);



    transform:

        rotate(-4deg);

}





/* QUESTION TEXT */



.serviceFaqItem__question > span {

    color:

        var(--service-navy);



    font-size: 15px;



    line-height: 1.4;



    font-weight: 700;

}





/* =====================================================

   PLUS / MINUS

===================================================== */



.serviceFaqItem__question > i {

    position: relative;



    width: 36px;

    height: 36px;



    display: grid;



    place-items: center;



    border-radius: 9px;



    background:

        rgba(255,121,0,.07);



    transition:

        background .3s ease,

        transform .3s ease;

}





.serviceFaqItem__question > i span {

    position: absolute;



    width: 12px;

    height: 2px;



    border-radius: 20px;



    background:

        var(--service-orange);



    transition:

        transform .3s ease,

        opacity .3s ease,

        background .3s ease;

}





.serviceFaqItem__question > i span:last-child {

    transform:

        rotate(90deg);

}





.serviceFaqItem.is-open

.serviceFaqItem__question > i {

    background:

        var(--service-orange);



    transform:

        rotate(180deg);

}





.serviceFaqItem.is-open

.serviceFaqItem__question > i span {

    background:

        var(--service-white);

}





.serviceFaqItem.is-open

.serviceFaqItem__question > i span:last-child {

    opacity: 0;



    transform:

        rotate(0deg);

}





/* =====================================================

   ANSWER

===================================================== */



.serviceFaqItem__answer {

    display: grid;



    grid-template-rows:

        0fr;



    opacity: 0;



    transition:

        grid-template-rows .4s

        cubic-bezier(.2,.75,.2,1),



        opacity .3s ease;

}





.serviceFaqItem.is-open

.serviceFaqItem__answer {

    grid-template-rows:

        1fr;



    opacity: 1;

}





.serviceFaqItem__answer > div {

    overflow: hidden;

}





.serviceFaqItem__answer p {

    margin:

        0;



    padding:

        0 65px 20px 70px;



    color:

        var(--service-text);



    font-size: 16px;



    line-height: 1.68;

}





/* =====================================================

   REVEAL

===================================================== */



.serviceFaqReveal {

    opacity: 0;



    transform:

        translateY(28px);



    transition:

        opacity .7s ease

        var(--faq-delay,0ms),



        transform .75s

        cubic-bezier(.2,.75,.2,1)

        var(--faq-delay,0ms);

}





.serviceFaqReveal--left {

    transform:

        translateX(-35px);

}





.serviceFaqReveal.serviceFaqShow {

    opacity: 1;



    transform:

        translate(0,0);

}





/* =====================================================

   TABLET

===================================================== */



@media(max-width:991.98px) {



    .serviceFaqSec {

        padding:

            62px 0;

    }





    .serviceFaqIntro {

        position: static;

    }



}





/* =====================================================

   MOBILE

===================================================== */



@media(max-width:575.98px) {



    .serviceFaqSec {

        padding:

            46px 0;

    }





    .serviceFaqIntro__tag {

        font-size: 16px;

    }





    .serviceFaqIntro h2 {

        font-size: 31px;



        line-height: 1.13;

    }





    .serviceFaqIntro > p,

    .serviceFaqItem__answer p {

        font-size: 16px;

    }





    .serviceFaqItem__question {

        grid-template-columns:

            37px 1fr 34px;



        gap: 9px;



        min-height: 68px;



        padding:

            10px;

    }





    .serviceFaqItem__number {

        width: 36px;

        height: 36px;

    }





    .serviceFaqItem__question > span {

        font-size: 14px;

    }





    .serviceFaqItem__question > i {

        width: 33px;

        height: 33px;

    }





    .serviceFaqItem__answer p {

        padding:

            0 15px 17px 56px;

    }



}





/* =====================================================

   REDUCED MOTION

===================================================== */



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



    .serviceFaqReveal {

        opacity: 1 !important;



        transform: none !important;



        transition: none !important;

    }





    .serviceFaqSec__glow,

    .serviceFaqIntro__tag > span {

        animation: none !important;

    }



}