:root{
    --font-mono: 'Poppins';
    --font-head: 'M PLUS 1';
    --color-white: #fff;
    --color-black: #000;
    --color-gray: #e4e4e4;
    --color-dark: #0C2949;
    --color-gray: #EAEAEA;
    --color-skyblue: #4A6ABF;
    --color-theme-blue: #2BADFF;
    --color-text-dark: #282938;
    --color-pink: #FAAAAA;
    --color-yellow: #E5C95F;
    --color-purple: #9883C3;
    --color-green: #47CF9D;
    --color-mauve: #798CED;
    --color-light-green: #F7FAFE;
    --color-light-mauve: #A1B5CA;


}
body{
    margin: 0;
    padding: 0;
    font-family: var(--font-mono);
}
*{
    box-sizing: border-box;
}

ul,li{
    padding: 0;
    margin: 0;
    list-style: none;
}
a{
    text-decoration: none;
    transition: all 0.3s;
}
button{
    all: unset;
}
h1, h2, h3, h4, h5, h6{
    color: var(--color-dark);
}

.container{
    width: min(1800px, 90%);
    max-width: 100%;
}
@media (min-width: 1800px){
    .container{
        max-width: 1620px;
    }
}
@media (min-width: 2000px){
    .container{
        max-width: 1820px;
    }
}


.header-main, .header-main.fixed, .btn__theme, a, button, svg, svg path, .hero__top-rect{
        transition-property: transform, background, background-position, background-color, color, height, width, box-shadow, opacity, 
        filter, backdrop-filter !important;
        transition-duration: .6s !important;
    }

/*----------------------------------------header---------------------------------------*/
.header-main{
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 8;
    background: transparent;
    transition: box-shadow .4s ease-in-out, background .4s ease-in-out;
    font-family: var(--font-head);
}
.header-main__container{
    display: flex;
    justify-content: space-between;
}
.nav__wrapper{
    display: flex;
    gap: 30px;
    align-items: center;
}
.header-main__navbar{
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 8;
    padding: 20px 0px;
}
.menu__list{
    display: flex;
    gap: 35px;
}

.menu__list li a{
    font-size: 18px;
    color: var(--color-white);
    text-transform: capitalize;
    position: relative;
    font-weight: 500;
    transition: text-shadow .4s ease-in-out;
}

.menu__list li:hover a, .menu__list li.active a{
    text-shadow: 1px 0px 1px var(--color-white);
    transition: text-shadow .4s ease-in-out;
}
.btn__theme{
    background: var(--color-dark);
    font-size: 22px;
    color: var(--color-white);
    display: inline-block;
    padding: 10px 40px;
    border-radius: 30px;
    transition: all .4s ease-in;
}
.btn__theme:hover, .btn__theme:focus{
    background: rgba(15, 54, 96, .8);
    color: var(--color-white);
}
.header__highlight .btn__theme{
    padding: 10px 20px;
    font-size: 18px;
    font-weight: 500;
}
.header-main__logo{
    display: flex;
    justify-content: space-between;
}
.menu__icon{
    display: none;
}
.header-main.fixed{
    box-shadow: 0px 1px 4px rgba(0, 0, 0, .1);
    background: rgba(43, 173, 255, .6);
    backdrop-filter: blur(10px);
}
#selectedMenu{
    display: none;
}


/*---------------------------------hero section-------------------------------*/
.banner-main{
    width: 100%;
    display: inline-block;
    position: relative;
    padding: 160px 0px 70px;
}
.section__block{
    position: relative;
}
.banner-main::before{
    background: linear-gradient(311.45deg, #0C2949 -3.08%, #1C6BA4 41.28%, #2BADFF 85.64%);
}
.section__block::before{
    content: "";
    width: 100%;
    position: absolute;
    inset: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%);
}

.banner__grid{
    display: grid;
    grid-template-columns: 38% 1fr;
    gap: 30px;
    align-items: center;
    margin-top: 30px;
    position: relative;
}

.hero__text h1{
    font-size: clamp(2.5rem, 4vw, 4.25rem);
    line-height: 1.3;
    font-weight: 800;
    color: var(--color-white);
    margin-bottom: 35px;
}
.hero__text p{
    font-size: 18px;
    line-height: 1.82;
    color: rgba(255,255,255,.73);
    margin: 0;
}
.hero__image{
    margin-bottom: -60px;
    position: relative;
    z-index: 1;
    margin-inline: auto;
}
.hero__bottom-rect{
    position: relative;
    z-index: 0;
}
.hero__bottom-rect img{
    animation: float 5s ease-in-out reverse infinite;
}
.hero__bottom-rect:after{
    content: "";
    height: calc(100% + 50px);
    width: calc(100% + 140px);
    background: url(../images/rect-lg-shadow.png) no-repeat center;
    background-size: 100%;
    position: absolute;
    top: 0;
    inset-inline: -70px;
}
.hero__map{
    position: absolute;
    left: 20px;
    top: 20px;
}
.hero__dollar{
    position: absolute;
    right: 20px;
    top: 20px;
}
.hero__map img, .hero__dollar img{
    max-width: 140px;
}

.hero__top-rect{
    position: relative;
    z-index: 1;
    width: 450px;
    margin-inline: auto;
    margin-bottom: -100px;
    
}
.hero__top-rect img{
    animation: float 4s ease-in-out infinite;
}
@keyframes float{
    0% {
        transform: translate3d(0px, 0px, 0px);
    }
    50% {
        transform: translate3d(0px, -13px, 0px);
    }
    100% {
        transform: translate3d(0px, 0px, 0px);
    }
}
.hero__top-rect:after{
    content: "";
    height: calc(100% + 30px);
    width: calc(100% + 120px);
    background: url(../images/rect-sm-shadow.png) no-repeat center;
    background-size: 100%;
    position: absolute;
    top: 30px;
    inset-inline: -60px;  
}
.hero__bullets{
    max-width: 550px;
    margin-inline: auto;
    margin-bottom: -30px;
}
.hero__bullets span{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -50px;
}
.hero__bullets span img{
    max-width: 190px;
}
.hero__image--note{
    font-size: 20px;
    color: var(--color-white);
    position: absolute;
    top: 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.hero__image--note strong{
    width: 105px;
}
.hero__image--note strong:first-child{
    width: 122px;
    text-align: right;
}
.carousel-indicators{
    margin-right: 0;
    margin-left: 30%;
    bottom: -120px;
}
.carousel-indicators [data-bs-target]{
    width: 34px;
    height: 12px;
    border-radius: 30px;
    border: none;
    background: var(--color-gray);
    opacity: 1;
}
.carousel-indicators .active{
    background: var(--color-skyblue);
}

/*--------------------------trustees--------------------------*/
.trustees{
    padding: 90px 0px;
}
.trustees::before{
    background: var(--color-white);
}
.section__heading-sm{
    font-size: clamp(0.875rem, 4vw, 1.375rem);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 15px;
    color: var(--color-theme-blue);
}
.section__heading{
    font-size: clamp(1.5625rem, 4vw, 2.625rem);
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 20px;
    color: var(--color-text-dark);
}
.trustees__brand{
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 40px 0px 60px;
}
.trustees__logo img{
    max-height: 56px;
    width: auto;
    filter: grayscale(100);
    transition: filter .3s ease-in-out;
}
.trustees__logo:hover img{
    filter: grayscale(0);
}


/*-------------------------------competitive advantage--------------------------------*/
.competion{
    padding: 180px 0px;
    margin-top: -80px;
}
.competion::before{
    background: linear-gradient(223.86deg, #2BADFF -27.36%, #0C2949 61.07%);
}
.section__block--odd::before{
    clip-path: polygon(0% 15%, 100% 0%, 100% 85%, 0 100%);
}
.advantage-box{
    padding: 15px 30px;
    border: 0.5px solid rgba(255,255,255,.48);
    border-radius: 20px;
    max-width: 1250px;
    margin: 20px auto;
    background: rgba(255,255,255,.04);
}
.advantage-box .row{
    flex-wrap: nowrap;
    width: 1180px;
}
.advantage-box__inner{
    padding: 0px 15px 15px;
    overflow-x: auto;
}
.advantage-box p{
    font-size: 18px;
    margin: 0;
}
.advantage-box__head p{
    font-weight: 600;
    color: var(--color-white);
    text-transform: uppercase;
    margin: 0 0 12px;
}
.advantage-box__list{
    align-items: center;
    padding: 8px 0px;
    border-radius: 10px;
}
.advantage-box__list:nth-of-type(odd){
    background: rgba(186, 215, 232, .29);
}
.advantage-box__list img{
    max-width: 22px;
}
.advantage-box__list p{
    font-weight: 500;
    color: rgba(255,255,255,.8);
    padding-left: 50px;
}



/*-----------------------------Services section------------------------------*/
.service{
    padding: 60px 0px 120px;
}
.section__heading-md{
    font-size: clamp(1rem, 4vw, 1.375rem);
    font-weight: 600;
    color: var(--color-text-dark);
    margin: 0;
}
.heading-indicator__box{
    display: inline-block;
    width: 34px;
    height: 30px;
    position: relative;
}
.heading-indicator__box img{
    position: relative;
    max-height: 28px;
    margin-bottom: -25px;
    margin-right: -10px;
}
.bg-pink{
    background: var(--color-pink);
}
.bg-yellow{
    background: var(--color-yellow);
}
.bg-purple{
    background: var(--color-purple);
}
.bg-green{
    background: var(--color-green);
}
.bg-mauve{
    background: var(--color-mauve);
}
.service__points{
    margin-top: 12px;
}
.service__points p{
    font-size: 18px;
    margin: 0 0 8px;
}
.service__points p span{
    font-size: 20px;
    font-weight: 500;
}
.btn__primary{
    background: var(--color-theme-blue);
    font-size: 22px;
    font-weight: 600;
    color: var(--color-white);
    display: inline-block;
    padding: 10px 40px;
    border-radius: 30px;
    transition: all .4s ease-in;
}
.service__row{
    margin-bottom: 90px;
    color: var(--color-text-dark);
}
.service__brief p{
    font-size: 20px;
    line-height: 1.6;
    font-weight: 500;
    margin: 0;
}
.btn__sm{
    padding: 7px 25px;
    font-size: 18px;
    font-weight: 500;
}
.see__more strong{
    font-size: 20px;
}
.see__more p{
    font-size: 18px;
    line-height: 1.4;
    font-weight: 500;
    margin: 8px 0 0;
}
.see__more p a{
    font-weight: 600;
    color: var(--color-theme-blue);
}

/*---------------------------------------Location Intelligence-----------------------------------------*/
.loc-intelligence{
    padding: 200px 0px 150px;
    margin-top: -220px;
    overflow: hidden;
}
.loc-intelligence::before{
    background: linear-gradient(210.83deg, #2BADFF -1.93%, #0C2949 61.13%);
}
.loc-intelligence p{
    font-size: clamp(1rem, 4vw, 1.25rem);
    line-height: 1.6;
    color: var(--color-white);
    margin: 0 0 20px;
}
.top__tiles{
    position: absolute;
    top: 80px;
    left: -5px;
}
.top__tiles img:first-child{
    position: relative;
    z-index: 1;
}
.top__tiles img:last-child{
    margin-top: -80px;
    margin-left: -90px;
}
.bottom__tiles{
    top: inherit;
    left: inherit;
    bottom: 82px;
    right: -3px;
    transform: scale(-1);
}


/*------------------------------Dynamic pricing---------------------------------*/
.dynamic__pricing{
    padding: 80px 0px 50px;
}
.content__md{
    font-size: 18px;
    line-height: 1.6;
    color: var(--color-dark);
    margin: 25px 0px;
}
.swiper-slide{
    height: auto;
}
.dynamic__pricing-card{
    background: rgba(249,249,249,1);
    background: linear-gradient(180deg, rgba(249,249,249,1) 0%, rgba(249,249,249,1) 100%);
    border-radius: 8px;
    padding: 25px 25px;
    height: 100%;
}
.dynamic__pricing-card:hover{
    background: linear-gradient(180deg, rgba(29, 98, 175, 1) 0%, rgba(12, 41, 73, 1) 100%);
}
.dynamic__pricing-card h5{
    font-size: clamp(1rem, 4vw, 1.3rem);
    font-weight: 500;
    color: var(--color-black);
    line-height: 1.4;
    margin: 0 0 12px;
}
.dynamic__pricing-card p{
    font-size: clamp(.75rem, 4vw, 1.05rem);
    line-height: 1.5;
    color: var(--color-text-dark);
    margin: 0;
}
.dynamic__pricing-card:hover h5, .dynamic__pricing-card:hover p{
    color: var(--color-white);
}
.dynamic__pricing-slider{
    margin: 50px auto 35px;
    max-width: 1150px;
}
.dynamic__pricing-indicator button{
    height: 50px;
    width: 50px;
    border-radius: 100%;
    background: var(--color-theme-blue);
}
.swiper-button-next:after, .swiper-button-prev:after{
    display: none;
}
.swiper-button-next svg, .swiper-button-prev svg {
    width: 10px;
    height: auto;
}
.swiper-button-prev{
    left: 0;
}
.swiper-button-next{
    right: 0;
}


/*-------------------------------------WorldData-------------------------------------*/
.world-data{
    padding: 80px 0px;
    background: var(--color-light-green);
    position: relative;
    overflow: hidden;
}
.world-data::before{
    content: "";
    width: 215px;
    height: 440px;
    background: url(../images/puzzle-elem-sky.png) no-repeat right;
    background-size: 100%;
    position: absolute;
    right: 0;
    top: 50px;
    z-index: 0;
    margin-right: 110px;
}
.world-data:after{
    content: "";
    width: 240px;
    height: 350px;
    background: url(../images/puzzle-elem-left.png) no-repeat left;
    background-size: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 0;
}
.world-data .section__heading-sm{
    color: var(--color-black);
}
.world-data__graphic{
    padding: 50px 0px;
    text-align: center;
    position: relative;
    z-index: 1;
}
.world-data__graphic img{
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
}
.world-data__graphic img:not(:first-child){
    display: none;
}

.world-data p{
    text-align: center;
    font-size: 16px;
    color: var(--color-black);
    margin: 0;
}



/*-------------------------Footer--------------------------*/
.footer{
    background: linear-gradient(159.76deg, #2BADFF -20.88%, #0C2949 52.26%);
    padding: 50px 0px;
}
.footer__top .section__heading-sm{
    font-size: 16px;
}

.our__status{
    width: 100%;
    max-width: 700px;
    margin: 40px auto 70px;
}
.our__status--info strong{
    font-size: 34px;
    color: var(--color-theme-blue);
    line-height: 1;
}
.our__status--info p{
    font-size: 18px;
    font-weight: 500;
    color: var(--color-white);
    margin: 4px 0px 0px;
    line-height: 1;
}

.btn__footer{
    font-size: 16px;
    font-weight: 700;
    color: var(--color-white);
    padding: 12px 25px;
    line-height: 1;
    text-transform: uppercase;
    display: inline-block;
    background: var(--color-theme-blue);
}
.btn__footer:hover, .btn__footer:focus-within{
    background: var(--color-white);
    color: var(--color-theme-blue);
}

.footer__menu h5{
    font-size: 20px;
    font-weight: 500;
    color: var(--color-white);
    line-height: 1;
    margin: 0 0 25px;
}
.footer__menu--list li{
    padding-bottom: 10px;
}
.footer__menu--list li a{
    font-size: 16px;
    line-height: 1;
    color: var(--color-light-mauve);
}
.footer__menu--list li:hover a{
   color: var(--color-white); 
}



@media (max-width: 1400px){
    .menu__list li a{
        font-size: 16px;
    }
    .header__highlight .btn__theme{
        font-size: 16px;
    }
    .logo img{
        max-width: 300px;
    }
    .hero__top-rect{
        width: 350px;
        margin-bottom: -70px;
    }
    .hero__bullets{
        max-width: 450px;
        margin-bottom: -45px;
    }
    .hero__bullets span img {
        max-width: 130px;
    }
    .hero__bullets span{
        top: -40px;
    }
    .hero__image--note{
        font-size: 16px;
    }
    .hero__image--note strong {
        width: 85px;
    }
    .hero__image--note strong:first-child {
        width: 98px;
    }
    .hero__map img, .hero__dollar img {
        max-width: 110px;
    }
    .hero__bottom-rect:after {
        width: calc(100% + 80px);
        inset-inline: -40px;
    }
    .world-data::before{
        margin: 0;
        right: -20px;
    }
}


@media (max-width: 1200px){
    .banner-main{
        padding-top: 120px;
    }
    .section__block::before {
        clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 0% 100%);
    }
    .carousel-indicators{
        margin-left: 0;
    }
    .hero__text{
        margin-bottom: 30px;
    }
    .banner__grid{
        grid-template-columns: 1fr;
    }
    .hero__text h1{
        margin-bottom: 20px;
    }
    .hero__image{
        max-width: 700px;
    }
    .logo img{
        max-width: 250px;
    }
    .menu__list li a{
        font-size: 14px;
    }
    .header__highlight .btn__theme{
        font-size: 14px;
    }
    .menu__list {
        gap: 25px;
    }
    .competion.section__block--odd::before {
        clip-path: polygon(0% 7%, 100% 0%, 100% 93%, 0 100%);
    }
    .competion {
        padding: 100px 0px;
        margin-top: -70px;
    }
    .loc-intelligence.section__block--odd::before {
        clip-path: polygon(0% 8%, 100% 0%, 100% 92%, 0 100%);
    }
    .loc-intelligence {
        padding: 120px 0px;
        text-align: center;
    }
    .loc-intelligence .img-fluid{
        width: 100%;
        max-width: 600px;
        margin-inline: auto;
    }
    .top__tiles{
        display: none;
    }
    .dynamic__pricing-indicator button{
        height: 40px;
        width: 40px;
    }
    .content__md{
        font-size: 16px;
    }
    .world-data::before{
        background-size: 70%;
    }
    
}


@media (max-width: 1025px){
    .header-main__container{
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .nav__wrapper{
        flex-direction: column-reverse;
        gap: 20px;
    }
    #selectedMenu{
        display: block;
        font-size: 20px;
        color: var(--color-white);
    }
    .menu__icon{
        display: block;
        width: 22px;
    }
    .menu__icon span{
        display: block;
        height: 2px;
        width: 100%;
        background: var(--color-white);
        background: var(--color-white);
        transition: transform .3s ease;
    }
    .menu__icon span:not(:last-child){
        margin-bottom: 5px;
    }
    .menu__icon.menu__close .menu__bar1{
        transform: translateY(6.5px) rotate(135deg);
    }
    .menu__icon.menu__close .menu__bar3{
        transform: translateY(-7.5px) rotate(-135deg);
    }
    .menu__icon.menu__close .menu__bar2{
        transform: scale(0);
    }
    .header-main__logo{
        z-index: 9;
    }
    /* .header-main__navbar{
        position: fixed;
        inset: 0;
        height: 100vh;
        background: linear-gradient(311.45deg, rgba(12, 41, 73, .75) -3.08%, rgba(28, 107, 164, .75) 41.28%, rgba(43, 173, 255, .75) 85.64%);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transform: scaleY(0);
        opacity: 0;
        transform-origin: top;
        pointer-events: none;
        transition: transform .4s ease-in-out, opacity .7s ease-in-out;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 5rem 0px 1.5rem;
    } */
     .header-main__navbar{
        position: fixed;
        top: 200px;
        left: 50%;
        width: 80%;
        background: rgba(12, 41, 73, .86);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transform: scaleY(0) translateX(-50%);
        opacity: 0;
        transform-origin: top;
        pointer-events: none;
        transition: transform .4s ease-in-out, opacity .7s ease-in-out;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 50px 0px;
     }
    
    .menu__list{
        flex-direction: column;
        text-align: center;
    }
    .header-main__navbar.show{
        pointer-events: auto;
        transform: scaleY(1)  translateX(-50%);
        opacity: 1;
        transition: transform .4s ease-in-out, opacity .7s ease-in-out;
    }
    body.overflow-hide{
        overflow: hidden;
    }
    .header-main{
        padding-bottom: 10px;
    }

    .banner-main{
        padding-top: 170px;
    }

    
}


@media (max-width: 992px){
    
    .advantage-box p{
        font-size: 16px;
    }
    .service__row{
        margin-bottom: 30px;
    }
    .service__points p{
        font-size: 16px;
    }
    .service__points p span{
        font-size: 16px;
    }
    .service__brief p{
        font-size: 16px;
    }
    .see__more p{
        font-size: 16px;
    }
    .btn__sm{
        font-size: 16px;
    }
    .btn__primary{
        font-size: 20px;
        font-weight: 500;
        padding: 8px 20px;
    }
    .btn__theme{
        font-size: 20px;
    }
    .loc-intelligence{
        margin-top: -100px;
    }
    .world-data p{
        font-size: 14px;
    }
    .footer__menu{
        text-align: center;
        padding-bottom: 30px;
    }
    .footer__menu h5{
        margin-bottom: 15px;
    }
    .world-data:after{
        background-size: 50%;
    }
}


@media (max-width: 768px){
    .hero__image{
        max-width: 550px;
    }
    .hero__top-rect {
        width: 300px;
        margin-bottom: -55px;
    }
    .hero__bullets {
        max-width: 370px;
    }
    .hero__bullets span img {
        max-width: 95px;
    }
    .hero__image--note {
        font-size: 12px;
    }
    .hero__image--note strong {
        width: 65px;
    }
    .hero__image--note strong:first-child {
        width: 75px;
    }
    .hero__text p{
        font-size: 16px;
    }
    .carousel-indicators [data-bs-target] {
        width: 26px;
        height: 8px;
    }
    .advantage-box{
        padding: 15px;
    }
    .advantage-box__list p{
        font-size: 14px;
        padding-left: 15px;
    }
    .service__points p{
        font-size: 14px;
    }
    .service__points p span{
        font-size: 14px;
    }
    .service__brief p{
        font-size: 14px;
    }
    .see__more p{
        font-size: 14px;
    }
    .btn__sm{
        font-size: 14px;
    }
    .world-data__graphic img:not(:first-child){
        display: inline-block;
    }
    .world-data__graphic img:not(:last-child){
        display: none;
    }
    .world-data p{
        font-size: 14px;
    }
    
}

@media (max-width: 576px){
    .hero__image{
        max-width: 280px;
    }
    .hero__top-rect {
        width: 165px;
        margin-bottom: -40px;
    }
    .hero__bottom-rect:after {
        width: calc(100% + 60px);
        inset-inline: -30px;
        top: -10px;
    }
    .hero__bullets {
        max-width: 200px;
        margin-bottom: -20px;   
    }
    .hero__bullets span {
        top: -20px;
    }
    .hero__bullets span img {
        max-width: 60px;
    }
    .hero__image--note {
        font-size: 10px;
        top: -20px;
        left: -20px;
        right: -20px;
        width: auto;
    }
    .hero__image--note strong {
        width: 55px;
    }
    .hero__image--note strong:first-child {
        width: 60px;
    }
    .hero__map img, .hero__dollar img {
        max-width: 70px;
    }
    .hero__map {
        left: 0px;
        top: 0px;
    }
    .hero__dollar{
        right: 0;
        top: 0;
    }
}


@media (max-width: 480px){
    .logo img {
        max-width: 200px;
    }
}