.slick-track {
    display: flex!important;
    gap: 12px;
}

.slick-list {
    padding-left: 24px;;
}

.container-xxxl {
    width: 100%;
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    max-width: 1920px;
    margin-right: auto;
    margin-left: auto;
    padding-right: calc(var(--bs-gutter-x)* .5);
    padding-left: calc(var(--bs-gutter-x)* .5);
}

.bg-blur {
    backdrop-filter: blur(40px);
    background-color: rgba(255, 255, 255, .7)
}

.bg-blur-dark {
    backdrop-filter: blur(40px);
    -webkit-mask-image: linear-gradient(to top,black 50%,transparent 100%);
    mask-image: linear-gradient(to top,black 50%,transparent 100%);
}

.text-blend {
    color: rgba(255, 255, 255, .9);
    mix-blend-mode: screen;
}

.navbar-toolbar {
    padding-right: 16px;;
}

.sg-object {
    position: relative;
    max-height: 50vh;
    max-width: 480px;
}

.moveup {
    transform: translateY(-15vh);
    transition: all .6s ease-in-out;
}


.service-icon-lg {
    width: 6rem;
    height: 6rem;
    border-radius: 1.4rem;
    font-size: 2.625rem;
    line-height: 2.625rem;
    font-weight: 600;
    color: var(--bs-primary);
    background-color: var(--bs-bg-lvl1);
    overflow: hidden;
}

.service-icon-md {
    width: 3rem;
    height: 3rem;
    border-radius: 10px;
    font-size: 20px;
    line-height: 20px;
    font-weight: 600;
    color: var(--bs-primary);
    background-color: var(--bs-bg-lvl1);
    overflow: hidden;
}

.service-icon-var {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 1rem;
    font-size: 2rem;
    line-height: 2rem;
    font-weight: 600;
    color: var(--bs-primary);
    background-color: var(--bs-bg-lvl1);
    overflow: hidden;
}

.p-auto {
    padding-left: 24px;
    padding-top: 24px;
    padding-right: 24px;
    padding-bottom: 24px;
}

.px-auto {
    padding-left: 24px;
    padding-right: 24px;
}

.py-auto {
    padding-top: 24px;
    padding-bottom: 24px;
}

.ps-auto {
    padding-left: 24px;
}

.pe-auto {
    padding-right: 24px;
}

.pb-auto {
    padding-bottom: 24px;
}

.ps-xxxl-0 {
    padding-left: 24px;
}

.pe-xxxl-0 {
    padding-right: 24px;
}

.bg-brand {
    background-color: rgb(198, 54, 27);
}

.text-brand {
    color: rgb(198, 54, 27);
}

.brand-heading { 
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    line-height: 1;
    font-weight: 900;
}

.brand-heading-sm { 
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    line-height: 1;
    font-weight: 900;
}

.brand-page-title { 
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
}

.page-header {
    height: 25vh;
}

.subtitle {
    font-size: 20px;
    line-height: 26px;
    font-weight: 500;
}

.heading-var {
    font-size: 40px;
    line-height: 42px;
}

.h5-var {
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
}

.tagline {
    font-size: 14px;
    font-weight: 500;
    color: rgb(229, 95, 80);
    letter-spacing: 0.1em;
}

.text-truncate-3 {
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
}

.text-truncate-5 {
    display: -webkit-box !important;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
}

.card-title-var {
    font-size: 24px;
}

.grid-card-title {
    font-size: 32px;
}

.card-label-var {
    font-size: 14px;
    font-weight: 500;
}

.card-text-var {
    font-size: 14px;
}

.number-stat {
    font-size: 68px;
    line-height: 68px;
}

.minimise {
    background-color: rgba(107,107,107,0);
}

.minimise .navbar-navigation {
    display: none;
}
   
.full {
    backdrop-filter: blur(32px);
    background-color: rgba(255, 255, 255, .8);
}

.full .navbar-navigation {
    display: flex;
}

.stage1 {
    background-color: var(--bs-bg-lvl1);
}

.stage1 .logo {
    display: none;
}

.stage1 .nav-link {
    display: block;
    padding-top: 30px;
    padding-bottom: 16px;
}

.stage1 .menu-heading {
    display: none;
}

.stage2 {
    backdrop-filter: blur(32px);
    background-color: rgba(255, 255, 255, .8);
}

.stage2 .logo {
    display: flex;
}

.stage2 .nav-link {
    display: flex;
    height: 100%;
}

.stage2 .menu-heading {
    display: flex;
}
    
.transition {
    -webkit-transition: all .3s ease-in-out; /* For Safari 3.1 to 6.0 */
    transition: all .3s ease-in-out;
}


.catagory-card {
    border-width: 0 1px 1px 0;
    border-color: rgb(226, 226, 226);
    border-style: solid;
}

.service-spotlight-card {
    width: calc((100vw - 64px));
}

.horizontal-scroll {
    overflow-x: scroll;
    scroll-snap-type: x;
    scrollbar-width: none !important;
    padding-left: 24px;
    padding-right: 24px;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
}

.horizontal-scroll::-webkit-scrollbar {
    display: none;
}

.solution-icon {
    width: 3rem; 
    height: 3rem;
}

.solution-icon .icon{
    font-size: 30px;
}




@media (min-width: 720px) { 

    .brand-heading { 
        font-size: 24px;
    }

    .service-spotlight-card {
        max-width: calc((100vw - 152px)/2);
    }

    .number-stat {
        font-size: 80px;
        line-height: 80px;
    }

    .grid-card-title {
        font-size: 52px;
    }

    .slick-track {
        gap: 12px;
    }

    .slick-list {
        padding-left: 24px!important;
    }

}



@media (min-width: 1024px) { 

    .slick-track {
        gap: 16px;
    }

    .slick-list {
        padding-left: 32px!important;
    }

    .heading-var {
        font-size: 64px;
        line-height: 64px;;
    }

    .subtitle {
        font-size: 24px;
        line-height: 32px;
        font-weight: 500;
    }
    
    .brand-heading { 
        font-size: 30px;
        line-height: 1;
    }

    .brand-page-title { 
        font-size: 72px;
    }

    .service-icon-var {
        width: 4.5rem;
        height: 4.5rem;
        border-radius: 1rem;
        font-size: 2rem;
        line-height: 2rem;
        font-weight: 600;
        color: var(--bs-primary);
        background-color: var(--bs-bg-lvl1);
        overflow: hidden;
    }

    .service-spotlight-card {
        max-width: calc((100vw - 152px)/3);
    }

    .page-header {
        height: 192px;
    }

    .p-auto {
        padding-left: 32px;
        padding-top: 32px;
        padding-right: 32px;
        padding-bottom: 32px;
    }
    
    .px-auto {
        padding-left: 32px;
        padding-right: 32px;
    }
    
    .py-auto {
        padding-top: 32px;
        padding-bottom: 32px;
    }
    
    .ps-auto {
        padding-left: 32px;
    }
    
    .pe-auto {
        padding-right: 32px;
    }
    
    .pb-auto {
        padding-bottom: 32px;
    }
    
    .ps-xxxl-0 {
        padding-left: 32px;
    }
    
    .pe-xxxl-0 {
        padding-right: 32px;
    }

    .horizontal-scroll {
        overflow-x: scroll;
        scroll-snap-type: x;
        scrollbar-width: none !important;
        padding-left: 32px;
        padding-right: 32px;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: none;
    }

    .grid-card-title {
        font-size: 42px;
    }

    .number-stat {
        font-size: 84px;
        line-height: 84px;
    }

    .solution-icon {
        width: 4rem; 
        height: 4rem;
    }

    .solution-icon .icon{
        font-size: 42px;
    }
    

}

@media (min-width: 1440px) { 

    .slick-track {
        gap: 24px;
    }

    .slick-list {
        padding-left: 32px!important;
    }

    .heading-var {
        font-size: 60px;
        line-height: 62px;;
    }

    .subtitle {
        font-size: 26px;
        line-height: 34px;
        font-weight: 500;
    }

    .h5-var {
        font-size: 16px;
        line-height: 20px;
    }

    .card-title-var {
        font-size: 30px;
    }

    .card-label-var {
        font-size: 16px;
        font-weight: 500;
    }

    .card-text-var {
        font-size: 16px;
    }

    .grid-card-title {
        font-size: 64px;
    }

    .number-stat {
        font-size: 112px;
        line-height: 112px;
    }
    
    .brand-heading { 
        font-size: 32px;
        line-height: 1;
    }

    .brand-page-title { 
        font-size: 84px;
    }

    .page-header {
        height: 230px;
    }

    .service-icon-var {
        width: 6rem;
        height: 6rem;
        border-radius: 1.4rem;
        font-size: 2.625rem;
        line-height: 2.625rem;
        font-weight: 600;
        color: var(--bs-primary);
        background-color: var(--bs-bg-lvl1);
        overflow: hidden;
    }
    
}


@media (min-width: 1920px) { 

    .heading-var {
        font-size: 80px;
        line-height: 82px;
    }

    .subtitle {
        font-size: 30px;
        line-height: 38px;
        font-weight: 500;
    }
    
    .brand-heading { 
        font-size: 42px;
        line-height: 0.9;
    }

    .brand-page-title { 
        font-size: 96px;
    }

    .page-header {
        height: 320px;
    }

    .card-text-var {
        font-size: 18px;
    }

    .grid-card-title {
        font-size: 80px;
    }

    .number-stat {
        font-size: 112px;
        line-height: 112px;
    }

    .horizontal-scroll {
        padding-left: calc((100vw - 1920px)/2 + 40px);
    }

    .p-auto {
        padding-left: 40px;
        padding-top: 40px;
        padding-right: 40px;
        padding-bottom: 40px;
    }

    .px-auto {
        padding-left: 40px;
        padding-right: 40px;
    }

    .py-auto {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    
    .ps-auto {
        padding-left: 40px;
    }
    
    .pe-auto {
        padding-right: 40px;
    }

    .pb-auto {
        padding-right: 40px;
    }

    .ps-xxxl-0 {
        padding-left: 40px;
    }
    
    .pe-xxxl-0 {
        padding-right: 40px;
    }

    .navbar.navbar-lg {
        height: 112px;
    }

    .navbar-lg .navbar-title-link {
        padding: 0 40px 0 40px;
        min-height: 112px;
    }

    .navbar-lg .navbar-link {
        min-height: 112px;
        font-size: 16px;
    }

    .navbar-toolbar {
        padding-right: 32px;
    }

    .service-spotlight-card {
        max-width: 620px;
    }

    .slick-track {
        gap: 24px;
    }

    .slick-list {
        padding-left: calc((100vw - 1920px)/2 + 40px)!important;
    }

 }

 @media (min-width: 2048px) { 

    .ps-xxxl-0 {
        padding-left: 0px;
    }
    
    .pe-xxxl-0 {
        padding-right: 0px;
    }

    .pe-auto {
        padding-right: 40px;
    }

    .horizontal-scroll {
        padding-left: calc((100vw - 1920px)/2 - 8px);
    }

    .brand-page-title { 
        font-size: 112px;
    }

    .slick-list {
        padding-left: calc((100vw - 1920px)/2 - 8px)!important;
    }


 }