@font-face {
    font-family: 'BrownStd-bold';
    src: url('./Fonts/BrownStd-Bold.woff2') format('woff2'),
        url('./Fonts/BrownStd-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BrownStd-bold-italic';
    src: url('./Fonts/BrownStd-BoldItalic.woff2') format('woff2'),
        url('./Fonts/BrownStd-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'BrownStd Alternate';
    src: url('./Fonts/BrownStd-BoldAlt.woff2') format('woff2'),
        url('./Fonts/BrownStd-BoldAlt.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BrownStd';
    src: url('./Fonts/BrownStd-Italic.woff2') format('woff2'),
        url('./Fonts/BrownStd-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'BrownStd Alternate';
    src: url('./Fonts/BrownStd-ItalicAlt.woff2') format('woff2'),
        url('./Fonts/BrownStd-ItalicAlt.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'BrownStd Alternate';
    src: url('./Fonts/BrownStd-BoldItalicAlt.woff2') format('woff2'),
        url('./Fonts/BrownStd-BoldItalicAlt.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'BrownStd Reclining';
    src: url('./Fonts/BrownStd-ReclinBold.woff2') format('woff2'),
        url('./Fonts/BrownStd-ReclinBold.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'BrownStd Reclining';
    src: url('./Fonts/BrownStd-ReclinRegular.woff2') format('woff2'),
        url('./Fonts/BrownStd-ReclinRegular.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'BrownStd';
    src: url('./Fonts/BrownStd-LightItalic.woff2') format('woff2'),
        url('./Fonts/BrownStd-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'BrownStd Reclining Alternate';
    src: url('./Fonts/BrownStd-ReclinBoldAlt.woff2') format('woff2'),
        url('./Fonts/BrownStd-ReclinBoldAlt.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'BrownStd-light';
    src: url('./Fonts/BrownStd-Light.woff2') format('woff2'),
        url('./Fonts/BrownStd-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BrownStd Regular';
    src: url('./Fonts/BrownStd-Regular.woff2') format('woff2'),
        url('./Fonts/BrownStd-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BrownStd Alternate';
    src: url('./Fonts/BrownStd-RegularAlt.woff2') format('woff2'),
        url('./Fonts/BrownStd-RegularAlt.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BrownStd';
    src: url('./Fonts/BrownStd-Thin.woff2') format('woff2'),
        url('./Fonts/BrownStd-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BrownStd Thin Reclining';
    src: url('./Fonts/BrownStd-ReclinThin.woff2') format('woff2'),
        url('./Fonts/BrownStd-ReclinThin.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'BrownStd Reclining Alternate';
    src: url('./Fonts/BrownStd-ReclinRegularAlt.woff2') format('woff2'),
        url('./Fonts/BrownStd-ReclinRegularAlt.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'BrownStd Light Reclining';
    src: url('./Fonts/BrownStd-ReclinLight.woff2') format('woff2'),
        url('./Fonts/BrownStd-ReclinLight.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'BrownStd';
    src: url('./Fonts/BrownStd-ThinItalic.woff2') format('woff2'),
        url('./Fonts/BrownStd-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}


ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

:root {
    --primary-color: #231F20;
    --secondary-color: #E4DFF0;
    --yellow-color: #FDB914;
    --light-purple: #DDF1FC;
    --light-purple-100: #BBDDF5;
    --purple-color: #645FAA;
    --purple-color-100: #B8B7F1;
    --white: #ffffff;
    --black: #000000;
    --gray: #B7B7B7;
    --font-28: 2.1875vw; /* 28px / 1280px * 100 */
    --font-21: 1.6406vw; /* 21px / 1280px * 100 */
    --font-17: 1.3281vw; /* 17px / 1280px * 100 */
    --font-16: 1.25vw; /* 16px / 1280px * 100 */
    --font-12: 0.9375vw; /* 12px / 1280px * 100 */
}

/* Global CSS */
* { box-sizing: border-box; }
body { line-height: 1; font-family: "BrownStd Regular", sans-serif; font-size: var(--font-16); }
em { font-style: italic; }
img { height: auto; max-width: 100%; }
.font-21 { font-size: var(--font-21); }
.font-17 { font-size: var(--font-17); }
.font-12 { font-size: var(--font-12); }
.fg-purple { color: var(--purple-color); }
.brownStd-light { font-family: 'BrownStd-light', sans-serif; }


.partner-slider{
  display: flex;
  flex-wrap: wrap;  
  align-items: center;
  justify-content: center;
}

.partner-slider > div{
  width: 33%;
}

.white-popup {
    position: relative;
    background: #FFF;
    padding: 20px;
    width: auto;
    width: 1620px;
    height: 800px;
    margin: 20px auto;
}

.mfp-bg{
    min-height: 100vh;
    background: #08034d;
}

.col-lg-6{
    width: 50%;
    float: left;
}

.mfp-close-btn-in .mfp-close{
    color: #fff;
    background: #000;
    opacity: 1;
    right: 5px;
    top: 5px;
    font-size: 48px;
}

    .modal-body{
        position: relative;
    }


    .white-popup .modal-content .address-box ul,
    .white-popup .address-box ul {
        padding: 0 0 0 6px;
        margin: 0;
        list-style-type: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .white-popup .modal-content .address-box ul .icon,
    .white-popup .address-box ul .icon {
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;

    }

    .white-popup .modal-content .address-box ul li,
    .white-popup .address-box ul li {
        position: relative;
        padding-left: 35px;
        font-size: 22px;
        padding-bottom: 10px;
        font-size: 1.2rem;
        line-height: 1.5;
    }

    .white-popup .modal-content .address-box ul .icon img,
    .white-popup .address-box ul .icon img {
        width: 100%;
    }

    .white-popup .left-box {

    }

    .white-popup .left-box .img-box {
        padding-bottom: 50px;
    }

    .white-popup h6, .grid-container .card .card-body h6,
    .white-popup h6 {
        font-size: 16px;

        color: #645faa;
        font-size: 22px;
        padding-bottom: 10px;
        font-size: 1.2rem;
        line-height: 1.5;
    }
    .white-popup .right-box a,
    .white-popup .left-box a{
        color: #021768;
        text-decoration: underline;

    }
    .white-popup .right-box a:hover,
    .white-popup .left-box a:hover{
        color: #294fcb;
        text-decoration: underline;

    }
    .white-popup .left-box h6,
    .white-popup h6 {
        color: #197eb9;
        margin-bottom: 4px;
        text-transform: uppercase;
        font-size: 1.2rem;
        line-height: 1.5;
    }

    .white-popup .right-box h5,
    .grid-container .card .card-body h5 {
        font-size: 22px;
        margin-bottom: 9px;
    }

    .white-popup .right-box p,
    .grid-container .card .card-body p {
        font-size: 22px;
        margin-bottom: 40px;
        font-weight: 300;
        line-height: 30px;
        margin-top: 40px;

        font-size: 1.2rem;
        line-height: 1.5;

        font-family: 'brownStd-light';
    }

    .white-popup .right-box ul,
    .grid-container .card .card-body ul {
        padding: 0 0 0 17px;
        font-weight: 300;
        color: #282728;
    }

    .white-popup .right-box ul li::marker,
    .grid-container .card .card-body ul li::marker {
        font-size: 13px;
    }

    .white-popup .right-box ul li + li,
    .grid-container .card .card-body ul li + li {
        margin-top: 9px;
    }

    .website-link a {
        font-size: 18px;
        font-weight: 600;
        color: #282728;
        display: inline-block;
        vertical-align: middle;
    }

    .liftoff-modal-content .website-link a {
        text-decoration: underline;
    }

    .white-popup .modal-content:before {
        content: "";
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        height: 200px;
        background: rgb(255,255,255);
        background: -moz-linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(232,245,253,1) 100%);
        background: -webkit-linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(232,245,253,1) 100%);
        background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(232,245,253,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#e8f5fd",GradientType=1);
        pointer-events: none;
    }

    .imageHalf img{
        width: 100%;
    }

    .imageHalf{
        background-size: cover;    
        min-height: 770px;
        background-position: center center;
    }

    .textHalf{
        padding: 10vh 5vw;
    }

    .left-box p{
        font-size: 1.2rem;
        line-height: 1.5;
        margin-bottom: 50px;
    }


    .img-box{
        max-width: 300px;
    }













.white-popup iframe{
    width: 100%;
    height: 100%;
}

.mob_show{
    display: none;
}

.spring-showcase { min-height: 100dvh; }
.site-logo {  }
.sidebar { width: 22.6563vw; /* 290px / 1280px * 100 */ background: var(--primary-color); color: var(--white); padding: 4.6875vw 2.3438vw 2.3438vw; /* 60px, 30px, 30px / 1280px * 100 */ box-shadow: 0 0.2344vw 0.4688vw rgba(0,0,0,0.38); /* 3px, 6px / 1280px */ position: relative; z-index: 1; }
.showcase-main { width: calc(100% - 22.6563vw); /* 100% - 290px */ padding: 3.2969vw; /* 55px / 1280px * 100 */ padding: 11vh 3.2969vw; }
.intro { padding-bottom: 4.8438vw; /* 62px / 1280px * 100 */ }
.category-title { color: var(--gray); }
.category-list { gap: 0.625vw; /* 8px / 1280px * 100 */ }
.category-item { background: var(--white); border: 0.2344vw solid var(--secondary-color); /* 3px / 1280px */ border-radius: 1.5625vw; /* 20px / 1280px */ width: 5.5vw; /* 108px / 1280px */ height: 5.5vw; display: flex; align-items: center; justify-content: center; transition: all ease 0.5s; cursor: pointer; }
.category-item:hover, .category-item.active { border-color: var(--yellow-color); }
.visual-map { position: relative; z-index: 1; }
.visual-map svg { width: 95%; }
.showcase-main .video-bg { pointer-events: none; z-index: 1; opacity: 0.05; mix-blend-mode: multiply; }
.svg-grp { position: relative; z-index: 11; background: transparent;isolation: isolate; }
.showcase-main { position: relative; background: var(--white); }
.popup-backdrop { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; width: calc(100% - 22.6563vw); /* 100% - 290px */ left: 22.6563vw; background: linear-gradient(to left, #EDF1FA 100%, #FFFFFF 80%, #C6E2FF 0%);}
.video-bg { position: absolute; left: 0px; top: 0px; width: 100%; min-height: 100dvh; opacity: 0.02; object-fit: cover; pointer-events: none; }
.popup-backdrop.active { display: flex; }
.popup-modal { background: var(--white); border: 0.2344vw solid rgba(161, 214, 247, 0.38); /* 3px / 1280px */ border-radius: 1.5625vw; /* 20px / 1280px */ padding: 0.2344vw 0.2344vw 3.5156vw; /* 3px, 3px, 45px / 1280px */ min-width: 25vw; /* 320px / 1280px */ width: calc(100% - 9.375vw); /* 120px / 1280px */ height: calc(100dvh - 6.5vw); overflow: auto;  box-shadow: 0 0 0.4688vw rgba(223, 192, 234, 0.55); /* 6px / 1280px */ position: relative; transition: box-shadow 0.2s; }
.popup-header { padding: 1.9531vw 5.7813vw; /* 25px, 74px / 1280px */ background: var(--light-purple); color: var(--purple-color); border-radius: 1.25vw 1.25vw 0 0; /* 16px / 1280px */ position: relative; }
.popup-title { font-size: var(--font-28); text-transform: uppercase; font-family: 'BrownStd-bold', sans-serif; }
.retention-logo { margin-right: 1.5625vw; /* 20px / 1280px */ margin-top: -3.125vw; /* -40px / 1280px */ margin-bottom: -4.6875vw; /* -60px / 1280px */ }
.retention-logo img { width: 6.25vw; height: 7.8125vw; }
.efficiency-logo { margin-right: 1.5625vw; /* Already in vw, equivalent to 20px / 1280 * 100 */ margin-top: -2.2969vw; /* -55px / 1280 * 100 */ margin-bottom: -4.125vw; /* -40px / 1280 * 100 */ }
.efficiency-logo img { width: 7.3vw; height: 9.4vw;  }
.capabilities-logo img { width: 7.8vw; height: 7.9vw; }
.acceleration-logo img { width: 8.6vw; height: 8.5vw; }
.capabilities-logo { margin-right: 1.5625vw; /* 20px / 1280 * 100 */ margin-top: -2.5vw; /* -32px / 1280 * 100 */ margin-bottom: -3.125vw; /* -40px / 1280 * 100 */ }
.acceleration-logo { margin-top: -3.125vw; /* -40px / 1280 * 100 */ margin-bottom: -4.3438vw; /* -30px / 1280 * 100 */ }
.popup-close { background: none; border: none; color: var(--purple-color-100); font-size: 2.4219vw; /* 31px / 1280px */ line-height: 1; cursor: pointer; right: 0.625vw; /* 8px / 1280px */ top: 0.625vw; position: absolute; }
.popup-content { padding: 2.8125vw 0.7813vw 0; /* 36px, 10px, 0px / 1280px */ max-width: 56.25vw; /* 720px / 1280px */ margin: 0 auto; }
.ask-your-partner-title { letter-spacing: 0.1563vw; /* 2px / 1280px */ color: var(--black); font-family: 'BrownStd-bold', sans-serif; font-size: var(--font-16); }
.retention-cat-logo img { width: 3vw; height: 6.0938vw; }
.efficiency-cat-logo img { width: 3.2vw; height: 6.4063vw; }
.capabilities-cat-logo img { width: 3.5vw; height: 5.0781vw; }
.road-cat-logo img { width: 6.0938vw; height: 5.0781vw; }
.partner-slider img{ height: 3.9063vw; /* 50px / 1280 * 100 */ width: auto; }
.logo-href { border: 0.0781vw solid #DDDDDD; /* 1px / 1280 * 100 */ padding: 1.6563vw 1.875vw; /* 34px, 24px / 1280 * 100 */ display: flex; align-items: center; justify-content: center; border-radius: 1.5625vw; /* 20px / 1280 * 100 */ margin: 0.3906vw; /* 5px / 1280 * 100 */ aspect-ratio: 16 / 6; }
.slick-dots li button:before { font-size: 0.9375vw; /* 12px / 1280 * 100 */ opacity: 1; color: var(--light-purple); }
.slick-dots li.slick-active button:before { opacity: 1; color: var(--light-purple-100); }
.partner-slider .slick-dots { bottom: -3.9063vw; /* -50px / 1280 * 100 */ }
.swiper-container { width: 100%; height: 100%; position: relative; overflow: hidden; }
.swiper-slide { display: flex; align-items: center; justify-content: center; }
.swiper-button-next, .swiper-button-prev { color: var(--purple-color); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.swiper-button-next:after, .swiper-button-prev:after { font-size: 20px; }
.swiper-button-next { right: 10px; }
.swiper-button-prev { left: 10px; }
.swiper-button-next:after, .swiper-button-prev:after { content: ""; background-image: url(../images/right-arrow.svg); background-size: 1.0938vw;   /* 14px / 1280 */ width: 1.5625vw;             /* 20px / 1280 */ height: 10.5926vh;            /* 28px / 1080 */ background-repeat: no-repeat; opacity: 1; background-position: center;}
.swiper-button-prev:after { background-image: url(../images/left-arrow.svg); }
.svg-stroke { stroke: transparent; transition: all ease 0.3s; }
.fill-none { fill: transparent; transition: all ease 0.3s;}
svg g.popup-trigger:hover .svg-stroke { stroke: #fdb914; }
svg g.popup-trigger:hover .fill-none { fill: #fdb914; }
svg g.popup-trigger { cursor:pointer; }
.partner-slider .slick-next, .partner-slider .slick-prev { display: none; }

.popup-content p{
    line-height: 34px;
}

@media (max-width: 1199px) {

    .popup-content { padding-bottom: 20px; }
    .popup-modal { padding-bottom: 0px; height: auto; margin-top: 100px; }
    .popup-backdrop .swiper-slide { align-items: flex-start; }
    .showcase-main { padding: 0px 3.2969vw; }
}
@media (max-width: 991px) {
    .intro { padding-bottom: 10px; display: none !important;}
    /* .visual-map svg { width: 90%; } */
    .popup-modal { margin: 0px; width: 100%; height: 100dvh; }
    .visual-map-mobile svg { width: 100%; height: auto; }
    .sidebar {padding: 2.6875vw 2.3438vw 1.3438vw }
    .popup-content { max-width: calc(100% - 70px); }

    .mob_show{
        display: flex;
    }

    .mob_hide{
        display: none !important;
    }

    #Group_271 #_1:hover .svg-stroke, #Group_271 #_1:focus .svg-stroke, #Group_268 #_2:hover .svg-stroke, #Group_268 #_2:focus .svg-stroke, #Group_270 #_3:hover .svg-stroke, #Group_270 #_3:focus .svg-stroke {
        stroke: #fdb914;
    }
}
@media (max-width: 767px) {
    /* .popup-modal { height: 80dvh; margin-top: 20px; margin-bottom: 20px; } */
    .popup-backdrop .swiper-slide { align-items: center; }
}
@media (max-width: 575px) {
    :root {
        --font-28: 24px; /* 28px / 1280px * 100 */
        --font-21: 18px; /* 21px / 1280px * 100 */
        --font-17: 16px; /* 17px / 1280px * 100 */
        --font-16: 16px; /* 16px / 1280px * 100 */
        --font-12: 14px; /* 12px / 1280px * 100 */
    }
    .sidebar, .showcase-main { width: 100%; }
    .sidebar { padding: 20px 32px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.38); }
    .showcase-main { overflow: hidden; padding: 3.2969vw; }
    .visual-map svg { width: 100%; }
    .popup-backdrop:not(.popup-backdrop-mobile) { display: none; }
    .popup-backdrop-mobile { display: block; position: unset; width: 100%; background: var(--white); }
    .popup-modal-mobile { height: auto; width: calc(100% - 42px); padding: 0px; background-color: #FCFCFF; margin: 0px auto 12px;  }
    .popup-modal-mobile:last-child { margin-bottom: 35px; }
    .popup-content-mobile { max-width: 100%; padding: 0px; font-size: 15px !important; line-height: 21px !important; transition: height 0.3s ease;  height: 0; opacity: 0; overflow: hidden; }
    .popup-content-mobile.open {   overflow: auto; opacity: 1; padding: 20px; }
    /* .popup-backdrop .swiper-wrapper{ flex-direction: column; } */
    .spring-showcase { min-height: unset; }
    .video-bg { height: 100%; }
    .popup-title { font-family: 'BrownStd Regular', sans-serif; color: #232020; font-size: 16px; text-transform: capitalize }
    .retention-logo,.efficiency-logo, .capabilities-logo, .acceleration-logo { margin: 0px; display: flex; align-items: center;}
    .retention-logo img { width: 25px; }
    .efficiency-logo img { width: 31px; }
    .capabilities-logo img { width: 30px; }
    .acceleration-logo img { width: 34px; }
    .retention-logo img,.efficiency-logo img, .capabilities-logo img, .acceleration-logo img { height: auto; margin-right: 12px; }
    .popup-header { padding: 8px 42px 8px 14px; border-radius: 0px; min-height: 52px; }
    .accordion-btn { position: absolute; right: 0px; background: #6598D0; height: 100%; top: 0px; width: 38px; align-items: center; justify-content: center; padding: 4px; }
    .popup-close { display: none; }
    .ask-your-partner-title { font-size: 15px; letter-spacing: 0px; }
    .popup-trigger { pointer-events: none; }
    .partner-slider .slick-dots { bottom: -30px; }
    .partner-slider.slick-dotted.slick-slider { overflow: hidden; margin-bottom: 10px; }
    .partner-slider img { height: 30px; }
    .partner-slider-mob { display: flex; }
   
  }