*{

    font-family: "inter";
    scroll-padding-top: 250px;
}

:root
{
    --primaryColor:#EEC643;
    --secondaryColor:#0D21A1;
    --activeNavWidth: 110px;
    --activeNavHeight: 40px;
    --activeNavX: -1000px;
    --activeNavY: -5px;
    --activeNavOpacity: 0;

    --angle: 0deg;

    --bs-border-radius: 12px !important;
    --serviceBorderHeight:30px;

}

html
{
    scroll-snap-type: y proximity;
    height: 100dvh;
}

section
{
    width: 100%;
    padding-block: 100px;
    overflow-x: clip;
}

ul {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}

p {
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 0px;
    color: #171717;
}

.title {
    font-size: 60px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.1;
    color: #303030;

    @media (max-width: 767px) {
        font-size: 48px;
    }

    @media (max-width: 575px) {
        font-size: 36px;
    }
}

.title-shadow {
    background: linear-gradient(198.35deg, rgb(51 51 51 / 7%) -90.01%, rgb(153 153 153 / 7%) 87.55%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
    font-size: 273.48px;
    line-height: 0.72;
    letter-spacing: -1px;
    text-transform: uppercase;
    position: absolute;
    top: -100px;

    @media (max-width: 1399px) {
        font-size: 223.48px;
    }

    @media (max-width: 1199px) {
        font-size: 188.48px;
    }

    @media (max-width: 991px) {
        font-size: 140.48px;
        top: -50px;
    }

    @media (max-width: 767px) {
        font-size: 104.48px;
    }

    @media (max-width: 425px) {
        font-size: 77.48px;
        top: -30px;
    }
}

.btn-secondary {
    color: #ffffff;
    font-size: 16px;
    letter-spacing: 0px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border: 0.5px solid #FFFFFF;
    border-radius: 8px;
    padding: 5px 20px 5px 5px;
    transition: all .5s ease;

    /* svg {
        transition: all .5s ease;
    }

    div {
        transition: all .5s ease;
    }

    &:hover {
        background-color: #ffffff;
        
        div {
            color: #000000;
        }
    } */
}

.btn-primary {
    background: linear-gradient(90deg, #2D368F 0%, #453288 17.01%, #832976 54.03%, #D91B5D 100.05%);
    color: #FBFBFB;
    font-size: 16px;
    letter-spacing: 0px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border-radius: 8px;
    padding: 5px 5px 5px 20px;
    transition: all .5s ease;

    /* svg {
        transition: all .5s ease;

        rect {
            transition: all .5s ease;
        }

        path {
            transition: all .5s ease;
        }
    }

    div {
        transition: all .5s ease;
    }

    &:hover {
        background: #ffffff;

        svg {
            rect {
                fill: #303030;
            }

            path {
                stroke: #ffffff;
            }
        }
        
        div {
            color: #303030;
        }
    } */
}

.general-shape {
    position: absolute;
    top: -140px;
    left: -120px;
    animation: rotate360 15s infinite linear;

    @media (max-width: 991px) {
        display: none;
    }
}

.general-shape-1 {
    position: absolute;
    top: -140px;
    right: -120px;
    animation: rotate360 15s infinite linear;

    @media (max-width: 991px) {
        display: none;
    }
}

.general-shape-2 {
    position: absolute;
    top: 40px;
    left: -70px;
    animation: rotate360 15s infinite linear;

    @media (max-width: 1440px) {
        left: -90px;
        top: -60px;
    }

    @media (max-width: 991px) {
        display: none;
    }
}

/**** WEBSITE HEADER ****/
header {
    position: absolute;
    width: 100%;
    padding: 50px 0 0;
    z-index: 100;

    @media (max-width: 767px) {
        padding: 30px 0 0;
    }

    & .main-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;

        & .main-nav ul {
            display: flex;
            align-items: center;
            gap: 30px;

            li{

                a {
                    font-size: 16px;
                    font-weight: 400;
                    color: #ffffff;
                    position: relative;
                    transition: all .5s ease;

                    &::before {
                        content: '';
                        width: 0%;
                        height: 2px;
                        background-color: #ffffff;
                        position: absolute;
                        bottom: -5px;
                        transition: all .5s;
                    }

                    &:hover {

                        &::before {
                            width: 100%;
                        }
                    }

                    &.active {
                        &::before {
                            width: 100%;
                        }
                    }
                }
                
            }
        }

        & .contact-info {

            a {
                font-size: 16px;
                color: #ffffff;
            }

            .email-cta {
                color: #fff;
                background: linear-gradient(135deg, rgba(78, 157, 255, 1) 0%, rgba(20, 99, 197, 1) 40%, rgba(32, 44, 67, 1) 100%);
                border-radius: 100px;
                display: inline-block;
                padding: 4px 14px 4px 4px;
                margin-left: 10px;
            }
        }
    }
}

@keyframes enter {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

#topHeader {
    transition: all .5s;
}

.nav-sticky {
    background-color: #ffffff;
    width: 100%;
    padding: 15px 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    animation: enter .5s ;

    & .main-header {

        &::after {
            content: none;
        }

        & .logo {
            svg {
                width: 200px;

                & .sticky-logo {
                    fill: #000000;
                    /* stroke: #000000; */
                }
            }
        }

        & .main-nav ul {
            & li {
                & a {
                    color: #000000;

                    &::before {
                        background-color: #000000;
                    }

                    &:hover {
                        color: #000000;
                    }

                    &.active {
                        color: #000000 !important;
                    }
                }
            }
        }

        & .contact-info {
            a {
                color: #000000;
            }

            .btn-secondary {
                border: 0.5px solid #000000;
            }
        }
    }
}

@keyframes bgRotate {
0%
{
   
    transform: rotate(0deg);

}
100% {
    
    transform: rotate(360deg);
}
}

.main-nav li
{
    cursor: pointer;
}

.dropdown
{
    position: relative;
}

.dropdown:hover 
{

    & a.main
    {
        /* font-weight: 700; */
        opacity: 1;
    }

    & a {
        color: #000;
    }

    & .menu-dropdown {
        opacity: 1;
        height: auto;
        display: block;

        & .ul .li .a.active {
            color: #000000;

            &::before {
                width: 0%;
            }
        }
    }
}

.menu-dropdown {
    position: absolute;
    top: 24px;
    width: max-content;
    left: -22px;
    opacity: 0;
    transition: all 0.5s;
    height: 0;
    display: none;
    z-index: 11;

    & .ul {
        display: block !important;
        padding: 22px 24px 14px 22px;
        background-color: #ffffff;
        border: 1px solid #408FF11A;
        border-radius: 20px;
        margin-top: 18px;

        & .li {
            transition: all .5s;
            padding: 5px 0px;
            border-bottom: 1px solid #3D3D3D26;

            &:first-child {
                padding-top: 0;
            }

            & .a {
                font-size: 16px;
                color: #5A5A5A;
                opacity: 1;
                /* transition: all .5s; */

                &:hover {
                    &::before {
                        width: 0%;
                    }
                }
            }

            &:hover {
                /* background-color: #ffffff;
                border-radius: 50px;
                color: #000; */

                .a {
                    color: #000;
                }
            }
        }

        & .li:last-child
        {
            border:0px;
        }
    }
}

.main-footer {
    background: #0F0F0F;
    /* border-radius: 30px 30px 0 0; */

    .top-footer {
        padding: 100px 0;

        @media (max-width: 991px) {
            padding: 100px 0 50px;
        }

        @media (max-width: 767px) {
            padding: 100px 0 30px;
        }

        .footer-title {
            font-size: 120px;
            font-weight: 700;
            letter-spacing: -2px;
            color: #ffffff;
            line-height: 1;
            margin-bottom: 30px;

            @media (max-width: 1440px) {
                font-size: 100px;
            }

            @media (max-width: 1399px) {
                font-size: 80px;
            }

            @media (max-width: 767px) {
                font-size: 60px;
            }

            @media (max-width: 767px) {
                font-size: 48px;
            }
        }

        .footer-shape {
            animation: rotate360 15s infinite linear;
        }

        .social-links {
            li {
                text-align: end;

                @media (max-width: 991px) {
                    text-align: start;
                }

                @media (max-width: 767px) {
                    text-align: center;
                }

                a {
                    color: #ffffff;
                    font-size: 22px;
                    letter-spacing: -2px;
                    text-align: end;
                }
            }
        }
    }

    & .middle-footer {
        padding: 0 0 30px;

        /* @media (max-width: 767px) {
            padding: 0 0 20px;
        } */

        .footer-nav-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;

            @media (max-width: 767px) {
                flex-wrap: wrap;
                gap: 30px;
                justify-content: center;
            }

            .footer-main-nav {

                ul {
                    display: inline-flex;
                    align-items: center;
                    gap: 35px;

                    @media (max-width: 991px) {
                        gap: 25px;
                    }

                    li {

                        a {
                            color: #ffffff;
                            font-size: 18px;
                            font-weight: 400;
                            letter-spacing: 0px;
                            line-height: 1;

                            @media (max-width: 991px) {
                                font-size: 16px;
                            }
                        }
                    }
                }
            }
        }
    }

    & .bottom-footer {
        border-top: 2px solid #FFFFFF38;
        padding: 30px 0;

        /* @media (max-width: 767px) {
            padding: 20px 0;
        } */

        .copyright {
            font-size: 16px;
            color: #ffffff;
            letter-spacing: 0px;
            line-height: 1;

            @media (max-width: 767px) {
                text-align: center;
                margin-bottom: 10px;
            }
        }

        .bottom-links {
            ul {
                display: flex;
                justify-content: end;
                align-items: center;
                gap: 10px;

                @media (max-width: 767px) {
                    justify-content: center;
                }
                
                li {
                    color: #ffffff;

                    a {
                        color: #ffffff;
                    }
                }
            }
        }
    }
}

/* marque wrapper */
.marque-wrapper {
    overflow: hidden;

    & .marque-loop {
        display: inline-flex;   
        animation: fixed-loop-anim 20s linear infinite;

        & .marque-container {
            display: flex;
            align-items: center;
            gap: 120px;
            margin-right: 120px;

            @media (max-width: 767px) {
                gap: 90px;
                margin-right: 90px;
            }

            & .marque-item img{
                border-radius: 12px;
                max-width: fit-content;
            }
        }
    }

    & .marque-loop-reverse {
        display: inline-flex;   
        animation: fixed-loop-anim-reverse 20s linear infinite;

        & .marque-container {
            display: flex;
            gap: 15px;
            margin-right: 15px;

            & .marque-item img{
                border-radius: 12px;
                max-width: fit-content;
            }
        }
    }
}

/*------ Home Page ------*/

.hero-banner {
    height: 100dvh;
    position: relative;

    & .video-container {
        width: 100%;
        height: 100dvh;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;

        &::before {
            content: '';
            height: 100%;
            width: 100%;
            position: absolute;
            background-image: url(/assets/img/banner-shadow.webp);
            background-repeat: no-repeat;
            background-position: top center;
            background-size: cover;
            z-index: -1;
        }

        & .banner-video {
            height: 100dvh;
            width: 100%;
            z-index: -2;
            position: absolute;
            object-fit: cover;
        }
    }

    & .container, .row {
        height: 100%;

        .col-lg-12 {
            margin-bottom: 100px;

            @media (max-width: 1440px) {
                margin-bottom: 40px;
            }

            @media (max-width: 991px) {
                margin-bottom: 100px;
            }
        }
    }

    & h1 {
        color: #ffffff;
        font-size: 140px;
        font-weight: 500;
        letter-spacing: -8px;
        line-height: 0.9;
        max-width: 1300px;
        margin: 0 auto 20px;

        @media (max-width: 1399px) {
            font-size: 120px;
        }

        @media (max-width: 1199px) {
            font-size: 110px;
        }

        @media (max-width: 991px) {
            font-size: 80px;
        }

        @media (max-width: 767px) {
            font-size: 70px;
            letter-spacing: -3px;
            line-height: 1;
        }

        @media (max-width: 575px) {
            font-size: 60px;
        }

        & .design {
            position: relative;

            &::after {
                content: '';
                background-image: url('/assets/img/design.png');
                width: 180px;
                height: 148px;
                position: absolute;
                inset: 0;
                margin: auto;
                transform: scale(0);
                transform-origin: top left;
                transition: all .5s ease;
            }

            &:hover::after {
                transform: scale(1);
            }
        }

        & .build {
            position: relative;

            &::after {
                content: '';
                background-image: url('/assets/img/build.png');
                width: 171px;
                height: 150px;
                position: absolute;
                inset: 0;
                margin: auto;
                transform: scale(0);
                transform-origin: top left;
                transition: all .5s ease;
            }

            &:hover::after {
                transform: scale(1);
            }
        }

        & .launch {
            position: relative;

            &::after {
                content: '';
                background-image: url('/assets/img/launch.png');
                width: 122px;
                height: 150px;
                position: absolute;
                inset: 0;
                margin: auto;
                transform: scale(0);
                transform-origin: top left;
                transition: all .5s ease;
            }

            &:hover::after {
                transform: scale(1);
            }
        }
    }

    & p {
        color: #ffffff;
        font-size: 20px;
        font-weight: 400;
        letter-spacing: 0px;
        max-width: 900px;
        margin: 0 auto 30px;

        @media (max-width: 767px) {
            font-size: 18px;
        }
    }
}

.double-marque {
    padding: 30px 0;
}

.who-we-are {
    background: linear-gradient(180deg, rgba(245, 245, 245, 0.09) 29.17%, #F5F5F5 100%);
    padding: 100px 0 0;

    @media (max-width:767px) {
        padding: 70px 0 0;
    }

    @media (max-width:575px) {
        padding: 40px 10px 0;
    }

    & .second-col {
        margin: 0 0 100px;
    }

    & .who-shadow {
        background: linear-gradient(198.35deg, rgb(51 51 51 / 12%) -90.01%, rgb(153 153 153 / 12%) 87.55%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 900;
        font-size: 195.53px;
        line-height: 0.72;
        letter-spacing: -1px;
        text-align: right;
        text-transform: uppercase;
        max-width: 510px;

        @media (max-width: 1199px) {
            font-size: 174.53px;
        }

        @media (max-width: 575px) {
            font-size: 144.53px;
        }
    }

    & .about-img {
        position: absolute;
        bottom: 0;
        right: 0;
        text-align: end;

        img {

            @media (max-width:1399px) {
                width: 100%;
            }

            @media (max-width:991px) {
                width: 80%;
            }

            @media (max-width:767px) {
                width: 100%;
            }
        }
    }

    & .cube-glass-shape {
        position: absolute;
        top: 0;
        right: 10px;
        animation: rotate360 15s infinite linear;

        @media (max-width: 1199px) {
            top: 100px;
        }

        @media (max-width:991px) {
            top: 0px;
        }
    }
}

.services {
    background-image: url('/assets/img/home/services/service-bg.png');
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    margin-top: 100px;

    @media (max-width: 575px) {
        padding: 0 10px 80px;
    }

    & .bg-video {
        position: absolute;
        top: -90px;
        right: -500px;

        @media (max-width:991px) {
            display: none;
        }
        
        &::after {
            content: '';
            width: 100%;
            height: 100%;
            background: rgb(255 255 255 / 40%);
            backdrop-filter: blur(10px);
            background-blend-mode: multiply;
            position: absolute;
            top: 0;
            left: 0;
        } 
    }

    & .service-box {
        width: 100%;
        height: 595px;
        background-repeat: no-repeat;
        background-position: top;
        border-radius: 20px;
        padding: 40px 40px 0;
        margin-bottom: 24px;
        text-align: center;
        overflow: clip;

        @media (max-width: 1399px) {
            padding: 40px 30px 0;
        }

        @media (max-width:991px) {
            background-size: cover;
            height: 565px;
        }

        @media (max-width:767px) {
            height: auto;
            padding: 40px 30px;
        }

        & .sr-title {
            color: #303030;
            font-size: 40px;
            font-weight: 600;
            letter-spacing: -1px;
            line-height: 1;

            @media (max-width: 1199px) {
                font-size: 32px;
            }
        }

        & .sr-desc {
            color: #403B38;
            font-size: 14px;
            font-weight: 400;
        }
    }

    & .web-app {
        background-image: url('/assets/img/home/services/app-bg.png');
        transition: all .5s ease;

        & .sr-img {
            transform: translateY(49%);
            transition: all .5s ease;

            @media (max-width:767px) {
                transform: translateY(10%);
            }
        }

        &:hover .sr-img {
            transform: translateY(5%);

            @media (max-width:767px) {
                transform: translateY(10%);
            }
        }
    }

    & .web-dev {
        background-image: url('/assets/img/home/services/web-dev-bg.png');

        & .web-dev-img {
            margin-top: 35px;
            position: relative;

            & .layer-1 {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 180px;
                /* z-index: -1; */
                transition: all .5s ease;
            }

            & .layer-2 {
                z-index: 1;
                position: relative;
            }

            & .layer-3 {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 180px;
                /* z-index: -1; */
                transition: all .5s ease;
            }

            &:hover {
                
                .layer-1 {
                    left: 50px;
                    /* z-index: unset; */
                }

                .layer-3 {
                    right: 50px;
                    /* z-index: unset; */
                }
            }
        }
    }

    & .brand {
        background-image: url('/assets/img/home/services/brand-bg.png');
        text-align: start;
        transition: all .5s ease;

        & .brand-img {
            text-align: end;
            transform: translateX(40%);
            transition: all .5s ease;
        }

        &:hover .brand-img {
            transform: translateX(6%);
        }
    }

    & .logo {
        background-image: url('/assets/img/home/services/logo-bg.png');
        transition: all .5s ease;

        & .logo-images {
            overflow: clip;

            & .items {
                display: flex;
                flex-direction: column;
                gap: 20px;
                transform: translateY(-15%);
                transition: all .5s ease;

                @media (max-width:767px) {
                    transform: translateY(0%);
                }
            }
        }

        &:hover {
            .logo-images .items {
                transform: translateY(-40%);

                @media (max-width:767px) {
                    transform: translateY(0%);
                }
            }
        }
    }

    & .optimization {
        background-image: url('/assets/img/home/services/opti-bg.png');

        & .optimization-images {
            position: relative;
            height: 74%;
            text-align: left;

            @media (max-width:991px) {
                height: 84%;
            }

            .layer-11 {
                transform: translateY(25%) scale(1);
                transition: all .5s ease;

                @media (max-width:767px) {
                    transform: translateY(0%) scale(1);
                }
            }

            .layer-12 {
                position: absolute;
                right: 0;
                bottom: -100%;
                transition: all .5s ease;

                @media (max-width:767px) {
                    bottom: -50px;
                }
            }
        }

        &:hover {
            & .optimization-images {
                & .layer-11 {
                   transform: translateY(25%) scale(1.05);

                    @media (max-width:767px) {
                        transform: translateY(0%) scale(1);
                    }
                }
                & .layer-12 {
                    bottom: 0%;

                    @media (max-width:767px) {
                        bottom: -50px;
                    }
                }
            }
        }
    }

    & .digital {
        background-image: url('/assets/img/home/services/digital-bg.png');
        text-align: start;
        padding-top: 0;

        @media (max-width:767px) {
            padding-top: 40px;
            padding-bottom: 0;
        }

        & .digital-img {
            position: relative;

            & .layer-1 {
                position: absolute;
                bottom: 10px;
                left: 160px;
                transition: all .5s ease;
            }

            & .layer-2 {
                z-index: 1;
                position: relative;
            }

            & .layer-3 {
                position: absolute;
                bottom: 40px;
                right: 180px;
                transition: all .5s ease;
            }

            &:hover {
                
                .layer-1 {
                    left: 20px;
                    /* z-index: unset; */
                }

                .layer-3 {
                    right: 20px;
                    /* z-index: unset; */
                }
            }
        }
    }
}

.cta {
    background-image: url('/assets/img/cta-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    padding: 130px 0;

    @media (max-width: 1199px) {
        padding: 100px 0;
    }

    @media (max-width: 575px) {
        padding: 60px 10px;
    }

    .cta-img {
        position: absolute;
        top: -200px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;

        .parent_layer {
            position: relative;
            height: 700px;
            width: 470px;
            display: flex;
            justify-content: center;
            align-items: center;

            .layer_1 {
                position: absolute;
                right: 10px;
                top: 0;
                animation: layer_1 3s infinite linear;
            }

            .layer_2 {
                animation: layer_2 3s infinite linear;
            }

            .layer_3 {
                position: absolute;
                bottom: -40px;
                left: 10px;
                animation: layer_3 3s infinite linear;
            }
        }
    }
}

@keyframes layer_1 {
    0% {
        transform: translateX(0px);
    }

    50% {
        transform: translateX(-15px);
    }

    100% {
        transform: translateX(0px);
    }
}

@keyframes layer_2 {
    0% {
        transform: translate(0, 0)
    }

    50% {
        transform: translate(-15px, -15px)
    }

    100% {
        transform: translate(0, 0)
    }
}

@keyframes layer_3 {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

.portfolio {
    position: relative;
    margin-top: 100px;

    @media (max-width: 767px) {
        padding-top: 50px;
    }

    @media (max-width: 575px) {
        padding-top: 30px;
        padding-inline: 15px;
    }

    & .portfolio-title-shadow {
        background: linear-gradient(198.35deg, rgb(51 51 51 / 7%) -90.01%, rgb(153 153 153 / 7%) 87.55%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 900;
        font-size: 245px;
        line-height: 0.72;
        letter-spacing: -1px;
        text-transform: uppercase;
        position: absolute;
        top: 0;

        @media (max-width: 1399px) {
            font-size: 202px;
        }

        @media (max-width: 1199px) {
            font-size: 170px;
        }

        @media (max-width: 991px) {
            font-size: 126px;
            top: 40px;
        }

        @media (max-width: 767px) {
            font-size: 94px;
            top: 0;
        }

        @media (max-width: 425px) {
            font-size: 67px;
        }
    }

    .nav {
        padding: 10px 20px;
        justify-content: space-between;
        max-width: 950px;
        margin: 0 auto;

        @media (max-width: 991px) {
            justify-content: center;
            gap: 10px 10px;
        }

        .nav-item {

            .nav-link{
                font-size: 18px;
                font-weight: 400;
                color: #303030;
                border-radius: 8px;
                padding: 10px 15px;
                transition: all .5s ease;

                &:hover
                {
                    background-color: #fff;
                }

                &.active
                {
                    position: relative;
                    border-radius: 8px;
                    color: #ffffff;
                    font-weight: 700;
                    background: linear-gradient(90deg, #D91B5D 0%, #832976 46.03%, #453288 83.05%, #2D368F 100.05%);
                    z-index: 1;
                }
            }
        }
    }

    & .portfolio-video {
        border-radius: 7.51px;
        overflow: clip;
        height: 530px;
        max-width: 690px;

        @media (max-width: 1399px) {
            height: 430px;
        }

        @media (max-width: 1199px) {
            height: 362px;
        }

        @media (max-width: 991px) {
            height: 270px;
        }

        @media (max-width: 767px) {
            height: 408px;
        }

        @media (max-width: 425px) {
            height: 298px;
        }
        
        video {
            border-radius: 7.51px;
            object-fit: cover;
            height: 100%;
            width: 100%;
        }
    }
}

.process {
    background: #F5F5F5;

    & h4 {
        color: #303030;
        font-size: 28px;
        font-weight: 300;
        letter-spacing: 0px;
    }

    & .process-box {
        border-radius: 10px;
        border: 1px solid #9E9E9E;
        background: #FFFFFF33;
        backdrop-filter: blur(24px);
        padding: 40px;
        position: relative;

        @media (max-width: 1199px) {
            padding: 30px 20px;
        }

        &.red {
            background-image: url('/assets/img/home/process/1-bg.png');
            background-repeat: no-repeat;
            background-position: top right;
        }

        &.green {
            background-image: url('/assets/img/home/process/2-bg.png');
            background-repeat: no-repeat;
            background-position: top right;
        }

        &.yellow {
            background-image: url('/assets/img/home/process/3-bg.png');
            background-repeat: no-repeat;
            background-position: top right;
        }

        .pro-img {
            margin-bottom: 30px;
        }

        .pro-title {
            color: #303030;
            font-size: 35px;
            font-weight: 600;
            letter-spacing: -2px;
            text-transform: capitalize;
            line-height: 1;
            margin-bottom: 20px;

            @media (max-width: 575px) {
                font-size: 27px;
            }
        }

        .pro-desc {
            color: #1D1D1D;
            font-size: 18px;
            font-weight: 500;
            letter-spacing: -0.6px;
            padding: 0;
            margin-bottom: 0;
        }
    }
}

.packages {
    background-image: url('/assets/img/home/packages/packages-bg.png');
    background-repeat: no-repeat;
    background-size: cover;

    & .packages-title-shadow {
        background: linear-gradient(0deg, rgb(255 255 255 / 0) -19.06%, rgb(255 255 255 / 10%) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 900;
        font-size: 245px;
        line-height: 0.72;
        letter-spacing: -1px;
        text-transform: uppercase;
        position: absolute;
        top: 100px;
        opacity: 19%;

        @media (max-width: 1399px) {
            font-size: 202px;
        }

        @media (max-width: 1199px) {
            font-size: 170px;
        }

        @media (max-width: 991px) {
            font-size: 127px;
        }

        @media (max-width: 767px) {
            font-size: 95px;
        }

        @media (max-width: 425px) {
            font-size: 70px;
        }
    }

    & .title {
        margin-top: 70px;

        @media (max-width: 575px) {
            margin-top: 40px;
        }
    }

    & .nav {
        padding: 10px 20px;
        justify-content: space-between;
        max-width: 950px;
        margin: 0 auto;

        @media (max-width: 991px) {
            padding: 10px 0;
        }

        @media (max-width: 767px) {
            justify-content: center;
            gap: 10px 10px;
        }

        .nav-item {

            .nav-link{
                font-size: 18px;
                font-weight: 400;
                color: #ffffff;
                border-radius: 8px;
                padding: 10px 15px;
                transition: all .5s ease;

                /* &:hover
                {
                    background-color: #fff;
                    color: #303030;
                } */

                &.active
                {
                    position: relative;
                    border-radius: 8px;
                    color: #ffffff;
                    font-weight: 700;
                    background: linear-gradient(90deg, #D91B5D 0%, #832976 46.03%, #453288 83.05%, #2D368F 100.05%);
                    z-index: 1;
                }
            }
        }
    }

    & .package-box {
        background-color: #F4F0ED;
        border-radius: 20px;
        border: 1px solid #363636;
        /* overflow: clip; */

        &.yellow-bg {
            background-image: url('/assets/img/home/packages/yellow-bg.png');
            background-repeat: no-repeat;
            background-position: bottom center;

            @media (max-width: 991px) {
                background-size: cover;
            }
        }

        &.red-bg {
            background-image: url('/assets/img/home/packages/red-bg.png');
            background-repeat: no-repeat;
            background-position: bottom center;

            @media (max-width: 991px) {
                background-size: cover;
            }
        }

        &.green-bg {
            background-image: url('/assets/img/home/packages/green-bg.png');
            background-repeat: no-repeat;
            background-position: bottom center;

            @media (max-width: 991px) {
                background-size: cover;
            }
        }

        &.popular {
            position: relative;

            &::after {
                content: '';
                background-image: url('/assets/img/home/packages/popular.png');
                width: 31px;
                height: 107px;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: -14px;
            }
        }

        & .pk-header {
            background-image: url('/assets/img/home/packages/pk-header.png');
            background-repeat: no-repeat;
            background-position: top center;
            background-size: cover;
            padding: 30px 30px 20px;
            border-radius: 19px 19px 0 0;

            .pricing{
                color: #ffffff;
                font-size: 64px;
                font-weight: 600;
                line-height: 1;
                letter-spacing: -3px;
                text-align: center;

                @media (max-width: 575px) {
                   font-size: 54px;
                }

                sub {
                    font-size: 31px;
                    bottom: 2px;
                }
            }

            .cut-pricing {
                font-size: 18px;
                font-weight: 300;
                color: #FEBC2C;
                text-align: center;
                line-height: 1;
                text-decoration: line-through;
                margin-bottom: 10px;
            }

            .pk-name{
                font-size: 28px;
                font-weight: 400;
                line-height: 1;
                letter-spacing: 0;

                @media (max-width: 1399px) {
                    font-size: 24px;
                }
            }

            .pk-promo{
                color: #FFFFFF;
                font-size: 19px;
                font-weight: 400;
                line-height: 1;
                letter-spacing: 0;

                @media (max-width: 1399px) {
                    font-size: 16px;
                }
            }

            .pk-yellow {
                color: #FEBC2C;
            }

            .pk-red {
                color: #FF0004;
            }

            .pk-green {
                color: #00FF73;
            }
        }

        & .pk-body {

            .desc {
                font-size: 18px;
                color: #303030;
                letter-spacing: 0px;
                line-height: 1.3;
                padding: 20px 30px;
                text-align: center;
            }

            .points {
                padding: 40px 30px;
                border-top: 1.2px solid hsl(0deg 0% 17% / 10%);
                border-bottom: 1.2px solid hsl(0deg 0% 17% / 10%);

                ul {
                    height: 200px;
                    overflow-y: scroll;

                    &::-webkit-scrollbar {
                        width: 3px;
                        background: #303030;
                    }
                    
                    &::-webkit-scrollbar-track {
                        background: #747474;
                        border-radius: 0px; /* Add rounded corners to the track */
                    }
                    
                    &::-webkit-scrollbar-thumb {
                        background: linear-gradient(180deg, #2D368F 0%, #453288 17.01%, #832976 54.03%, #D91B5D 100.05%);
                        border-radius: 10px; 
                    }

                    p {
                        font-weight: 600;
                        margin-bottom: 8px;
                    }

                    li {
                        font-size: 18px;
                        font-weight: 500;
                        color: #303030;
                        line-height: 1.2;
                        /* display: flex;
                        align-items: center;
                        gap: 5px; */
                        margin-bottom: 8px;
                        padding-left: 24px;
                        position: relative;

                        &::before {
                            content: '';
                            background-image: url("data:image/svg+xml,%3Csvg width='19' height='19' viewBox='0 0 19 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.20801 2.89355C8.52992 2.20932 9.50328 2.20932 9.8252 2.89355C10.2684 3.83493 11.3884 4.2422 12.333 3.80566C13.0193 3.48892 13.7645 4.11479 13.5713 4.8457C13.3056 5.85181 13.902 6.88348 14.9062 7.15625C15.6357 7.35466 15.8043 8.31324 15.1865 8.74902C14.336 9.34888 14.1296 10.5234 14.7236 11.3779C15.1545 11.9986 14.6681 12.8412 13.915 12.7783C12.878 12.6912 11.9645 13.4568 11.8701 14.4932C11.8016 15.2461 10.8871 15.5795 10.3506 15.0469C9.61215 14.3135 8.42007 14.3135 7.68164 15.0469C7.14508 15.5794 6.23057 15.2461 6.16211 14.4932C6.06776 13.4569 5.15504 12.6914 4.11816 12.7783C3.36464 12.8417 2.87796 11.9979 3.30957 11.377C3.90318 10.5224 3.69603 9.34876 2.8457 8.74902C2.22791 8.31314 2.39726 7.35444 3.12695 7.15625C4.13096 6.88329 4.72665 5.85167 4.46094 4.8457C4.26772 4.11463 5.01378 3.48843 5.7002 3.80566C6.64482 4.24207 7.76493 3.83508 8.20801 2.89355Z' stroke='url(%23paint0_linear_96_1514)'/%3E%3Cpath d='M6.0108 9.01613L8.0144 10.8194L12.0216 7.21289' stroke='%23222222' stroke-width='1.20216'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_96_1514' x1='0' y1='9.01403' x2='18.0422' y2='9.01403' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D91B5D'/%3E%3Cstop offset='0.46' stop-color='%23832976'/%3E%3Cstop offset='0.83' stop-color='%23453288'/%3E%3Cstop offset='1' stop-color='%232D368F'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
                            height: 19px;
                            width: 19px;
                            position: absolute;
                            top: 0;
                            left: 0;
                        }

                        &:last-child {
                            margin-bottom: 0;
                        }
                    }
                }
                
            }

            .btns {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 20px 30px;
                flex-wrap: wrap;

                .btn-secondary {
                    color: #303030;
                    border: 0.5px solid #30303066;
                    padding: 5px 20px 5px 5px;
                    border-radius: 8px;
                }
            }
        }

        & .pk-footer {
            font-size: 16px;
            color: #303030;
            font-style: italic;
            text-align: center;
            padding: 20px 30px;
            border-top: 1.2px solid hsl(0deg 0% 17% / 10%);

            a {
                color: #303030;
                font-weight: bold;
                font-style: normal;
            }
        }
    }
}

.testimonials {
    background-image: url('/assets/img/home/testimonials/testimonial-bg.png');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    position: relative;
    margin-top: 100px;
    padding-top: 70px;
    padding-bottom: 0;

    @media (max-width: 767px) {
        padding-top: 30px;
    }

    & .testimonials-title-shadow {
        background: linear-gradient(198.35deg, rgb(51 51 51 / 7%) -90.01%, rgb(153 153 153 / 7%) 87.55%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 900;
        font-size: 180px;
        line-height: 0.72;
        letter-spacing: -1px;
        text-transform: uppercase;
        position: absolute;
        top: 0;

        @media (max-width: 1399px) {
            font-size: 145px;
        }

        @media (max-width: 1199px) {
            font-size: 122px;
        }

        @media (max-width: 991px) {
            font-size: 92px;
            top: 30px;
        }

        @media (max-width: 767px) {
            font-size: 68px;
            top: 0px;
        }

        @media (max-width: 425px) {
            font-size: 51px;
        }
    }

    & .testimonial-swiper {
        
        & .swiper-wrapper {
            margin-top: 50px;
            margin-bottom: 150px;

            @media (max-width: 767px) {
                margin-bottom: 120px;
            }

            & .swiper-slide {

                &.swiper-slide-active {

                    & .testimonial-box {
                        @media (max-width: 991px) {
                            background: #FFFFFF;
                            border: 1px solid #0000002E;
                            box-shadow: none;
                        }
                    }
                }

                &.swiper-slide-next {

                    & .testimonial-box {
                        background: #FFFFFF;
                        border: 1px solid #0000002E;
                        box-shadow: 0px 49.03px 104.32px 0px #15151526;

                        @media (max-width: 1199px) {
                            box-shadow: none;
                        }
                    }
                }
            }
        }

        & .swiper-pagination {
            bottom: 90px !important;

            @media (max-width: 575px) {
                bottom: 70px !important;
            }

            & .swiper-pagination-bullet {
                background: transparent;
                border: 1.25px solid #5C5C5C;
                width: 16px;
                height: 16px;
                opacity: 1;
                transition: all .5s ease;

                &.swiper-pagination-bullet-active {
                    background: linear-gradient(90deg, #D91B5D 0%, #832976 46.03%, #453288 83.05%, #2D368F 100.05%);
                }
            }
        }
    }

    & .testimonial-box {
        border-radius: 28px;
        padding: 30px 40px;
        position: relative;
        transition: all .5s ease;

        @media (max-width: 1399px) {
            padding: 30px 30px;
        }

        .t-header {
            display: flex;
            justify-content: end;
            align-items: center;
            margin-bottom: 20px;

            .author-img {
                position: absolute;
                left: 40px;
                top: -40px;
            }
        }

        .t-body {
            margin-bottom: 50px;
             
            P {
                color: #000000;
                text-align: start;
            }
        }

        .t-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;

            .author-name {
                font-size: 18px;
                font-weight: 800;
                color: #000000;
                text-align: start;
                margin-bottom: 3px;
            }

            .author-designation {
                font-size: 14px;
                font-weight: 400;
                line-height: 1.3;
                color: #505050;
                text-align: start;
            }

            .t-like {
                display: flex;
                align-items: center;
                gap: 8px;

                .t-text {
                    font-size: 16px;
                    font-weight: 800;
                    color: #000000;
                }
            }
        }
    }
}

.faqs {
    background: #F5F5F5;

    & .email-cta {
        background: linear-gradient(90deg, #D91B5D 0%, #832976 46.03%, #453288 83.05%, #2D368F 100.05%);
        border-radius: 18px;
        max-width: 350px;
        padding: 20px;

        h3 {
            color: #ffffff;
            font-size: 24px;
            font-weight: 700;
        }

        a {
            color: #ffffff;
            font-size: 18px;
            font-weight: 400;
        }
    }

    & .faqs-accordion {
        border-radius: 0;

        .accordion-item {
            background: transparent;
            border-width: 1.17px 0 0 0;
            border-style: solid;
            border-color: #B8AFA7;
            border-radius: 0;

            &:last-child {
                border-width: 1.17px 0 1.17px 0;
            }

            .accordion-button {
                background: transparent;
                box-shadow: none;
                font-size: 27px;
                font-weight: 500;
                color: #403B38;
                padding: 20px 0px 20px 0px;
                gap: 20px;

                 @media (max-width: 767px) {
                    font-size: 24px;
                }

                &::after {
                    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2223_798)'%3E%3Cpath d='M9.82031 0V20' stroke='%23746E68' stroke-width='2.33' stroke-linecap='round'/%3E%3Cpath d='M0 10.1777H20' stroke='%23746E68' stroke-width='2.33' stroke-linecap='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2223_798'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
                }

                &:not(.collapsed)::after {
                    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2223_798)'%3E%3Cpath d='M0 10.1777H20' stroke='%23746E68' stroke-width='2.33' stroke-linecap='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2223_798'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
                }
            }

            .accordion-body {
                padding: 0px 20px 20px 0px;
                font-size: 18px;
            }
        }
    }
}

.contact-us {
    padding-top: 70px;

    .main-contact {
        background-image: url('/assets/img/home/contact-bg.png');
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 30px 30px 0 0;
        padding: 70px 50px 0;

        @media (max-width: 1399px) {
            padding: 70px 30px 0;
        }

        @media (max-width: 767px) {
            padding: 50px 30px 0;
        }

        @media (max-width: 575px) {
            padding: 50px 20px 0;
        }

        p {
            font-weight: 400;
        }

        .contact-info {
            p {
                font-weight: 700;
            }

            a {
                color: #303030;
            }
        }

        .follow-us {

            ul {
                display: flex;
                align-items: center;
                gap: 10px;
                margin-top: 4px;
            }
        }

        .contact-form {
            height: 100%;
            background: #fff;
            border-width: 11.65px 11.65px 0;
            border-style: solid;
            border-color: #E9E9E9;
            border-radius: 24px 24px 0 0;
            padding: 40px;

            @media (max-width: 1399px) {
                padding: 30px;
            }

            @media (max-width: 575px) {
                padding: 30px 20px;
            }

            h3 {
                font-size: 40px;
                font-weight: 600;
                letter-spacing: 0px;
                color: #000000;

                @media (max-width: 1399px) {
                    font-size: 35px;
                }

                @media (max-width: 575px) {
                    font-size: 27px;
                }
            }

            .col-md-6, .col-md-12 {
                padding: 0 10px;
            }

            .input-group {
                .form-control {
                    background: #EAEAEA;
                    border: 1.17px solid #D4D4D4;
                    color: #0B0B0B;
                    font-size: 18px;
                    font-weight: 300;
                    letter-spacing: 0px;
                    border-radius: 12px;
                    padding: 13px 20px;

                    &:focus {
                        box-shadow: none;
                    }
                }
            }
        }
    }
}

.thank-you {
    background-image: url(/assets/img/bg-thank-you-hero.jpg);
    background-size: cover;
    padding: 290px 0 200px;

    & .sub-title {
        font-size: 40px;
    }

    .hh2 {
        line-height: 1.3;
    }

    p {
        /* font-size: 24px; */
        color: white;
    }

    a {
        font-size: 18px;
        color: white;
    }
}

/* scroll to top */
.progress-wrap {
    position: fixed;
    bottom: 50px;
    right: 14px;
    height: 44px;
    width: 44px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    transition: all 400ms linear;
    /* mix-blend-mode: difference; */
    background: linear-gradient(90deg, #2D368F 0%, #453288 17.01%, #832976 54.03%, #D91B5D 100.05%);

    @media (max-width: 425px) {
        bottom: 14px;
    }
}

.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);   
}

.progress-wrap::after {
    position: absolute;
    /* font-family: 'Font Awesome 5 Free';
    content: '\f077'; */
    content: '';
    text-align: center;
    /* line-height: 44px; */
    /* font-size: 13px;
    font-weight: 900; */
    color: #ffffff;
    left: 0;
    top: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.41 26L22 21.6734L26.59 26L28 24.668L22 19L16 24.668L17.41 26Z' fill='white'/%3E%3C/svg%3E%0A");
    height: 44px;
    width: 44px;
    cursor: pointer;
    display: block;
    z-index: 1;
    -webkit-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    transition: all 400ms linear;
}

.progress-wrap svg path {
    fill: none;
}

.progress-wrap svg.progress-circle path {
    stroke: #ffffff;
    stroke-width: 4;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    transition: all 400ms linear;
}

/* inner pages */

/* common */
.banner-col-margin {
    margin-bottom: 120px;

    @media (max-width: 767px) {
        margin-bottom: 100px;
    }
}

.banner-sub-title {
    color: #C0C0C0;
    font-size: 27px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 1.2;
    padding-left: 25px;
    margin-bottom: 20px;
    position: relative;

    &::before {
        content: '';
        background: linear-gradient(90deg, #D91B5D 0%, #832976 46.03%, #453288 83.05%, #2D368F 100.05%);
        width: 10px;
        height: 100%;
        border-radius: 12px;
        position: absolute;
        top: 0;
        left: 0;
    }
}

.banner-title {
    color: #ffffff;
    font-size: 75px;
    font-weight: 500;
    letter-spacing: -6px;
    line-height: 1.1;
    margin-bottom: 20px;
    text-transform: capitalize;

    @media (max-width: 1199px) {
        font-size: 65px;
    }

    @media (max-width: 767px) {
        font-size: 55px;
        letter-spacing: -3px;
    }

    @media (max-width: 575px) {
        font-size: 48px;
    }
}

.banner-desc {
    color: #ffffff;
    font-size: 20px;
    margin-bottom: 30px;

}

.process-box {
    border-radius: 10px;
    border: 1px solid #9E9E9E;
    background: #FFFFFF33;
    backdrop-filter: blur(24px);
    padding: 40px;
    position: relative;

    @media (max-width: 1199px) {
        padding: 30px 20px;
    }

    &.red {
        background-image: url('/assets/img/home/process/1-bg.png');
        background-repeat: no-repeat;
        background-position: top right;
    }

    &.green {
        background-image: url('/assets/img/home/process/2-bg.png');
        background-repeat: no-repeat;
        background-position: top right;
    }

    &.yellow {
        background-image: url('/assets/img/home/process/3-bg.png');
        background-repeat: no-repeat;
        background-position: top right;
    }

    .pro-img {
        margin-bottom: 30px;
    }

    .pro-title {
        color: #303030;
        font-size: 35px;
        font-weight: 600;
        letter-spacing: -2px;
        text-transform: capitalize;
        line-height: 1;
        margin-bottom: 20px;

        @media (max-width: 575px) {
            font-size: 27px;
        }
    }

    .pro-desc {
        color: #1D1D1D;
        font-size: 18px;
        font-weight: 500;
        letter-spacing: -0.6px;
        padding: 0;
        margin-bottom: 0;
    }
}

/* sections */
.inner-pages-banner {
    /* background-image: url(/assets/img/inner-banner-bg.png);
    background-repeat: no-repeat;
    background-size: cover; */
    position: relative;
    padding-top: 244px;

    @media (max-width: 767px) {
        padding-top: 200px;
    }

    @media (max-width: 575px) {
        padding-top: 170px;
    }

    & .banner-img {
        position: absolute;
        bottom: 0px;
        left: 110px;

        &.web-banner-img {
            width: 840px;
            right: -30px;
            left: unset;

            @media (max-width: 1399px) {
                right: -90px;
            }

            @media (max-width: 1199px) {
                right: -140px;
                width: 800px;
            }
        }

        &.marketplace-banner-img {
            left: unset;
            right: 0px;
            bottom: -40px;
            z-index: 2;

            @media (max-width: 1440px) {
                width: 750px;
                bottom: 0;
                right: -90px;
            }

            @media (max-width: 1399px) {
                bottom: 120px;
            }

            @media (max-width: 1024px) {
                width: 650px;
            }
        }

        &.digital-banner-img {
            width: 100%;
            left: 0;

            img {
                width: 100%;
            }
        }

        &.branding-banner-img {
            width: 100%;
            left: 0;

            img {
                width: 100%;
            }
        }
    }

    & .shoe-layer {
        position: absolute;
        bottom: -7px;
        left: 110px;
        z-index: 2;
    }

    & .hero-bars {
        width: 100%;
        height: 100%;
        background-image: url('/assets/img/inner-banner-bg-1.png');
        background-repeat: no-repeat;
        background-position: top;
        background-size: cover;
        padding: 0;
        position: absolute;
        top: 0;

        ul {
            perspective: 600px;
            margin: 0 auto;
            display: flex;
        }
        
        li {
            width: 100%;
            height: 799px;
            float: left;
            list-style: none;
            position: relative;
            cursor: pointer;
            counter-increment: item;

            @media (max-width: 1399px) {
                height: 911px;
            }

            div {
                width: 100%;
                height: 100%;
                position: absolute;
                transition: all .4s ease;
                backface-visibility: hidden;
                background: linear-gradient(90deg, rgba(255, 255, 255, 0.5) -43.67%, rgba(255, 255, 255, 0) 100%);
                opacity: 0.1;
            }
            
            &:hover .front {
                z-index: 0;
                transform: rotateY(180deg);
            }

            &:hover .back {
                transform: rotateY(0);
            }

            @media (max-width: 1440px) {

                &:nth-last-child(-n+3) {
                    display: none;
                } 
            }

            @media (max-width: 1199px) {

                &:nth-last-child(-n+5) {
                    display: none;
                } 
            }

            @media (max-width: 991px) {

                &:nth-last-child(-n+6) {
                    display: none;
                } 
            }

            @media (max-width: 767px) {

                &:nth-last-child(-n+7) {
                    display: none;
                } 
            }

            @media (max-width: 575px) {

                &:nth-last-child(-n+9) {
                    display: none;
                } 
            }

        }
        
        .front {
            z-index: 3;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%);
        }
        
        .back {
            transform: rotateY(180deg);
        }

    }
}

.vision {
    background: linear-gradient(180deg, rgba(245, 245, 245, 0.09) 29.17%, #F5F5F5 100%);
    
    & .yoga {
        position: absolute;
        inset: 0;
        margin: auto;
        text-align: center;

        img {
            animation: yoga 5s linear infinite;
        }
    }
}

@keyframes yoga {
    0% { transform: translateY(-70px); }
    50% { transform: translateY(0px); }
    100% { transform: translateY(-70px); }
}

.rules {

    & .bg-video {
        position: absolute;
        top: 0px;
        right: -500px;

        @media (max-width:991px) {
            display: none;
        }
        
        &::after {
            content: '';
            width: 100%;
            height: 100%;
            background: rgb(255 255 255 / 40%);
            backdrop-filter: blur(10px);
            background-blend-mode: multiply;
            position: absolute;
            top: 0;
            left: 0;
        } 
    }
}

.contact-us-inner {

    & .main-contact {
        background-image: unset;
        padding: 0;
    }
}

.contact-banner {
    padding-top: 195px;

    .banner-col-margin {
        margin-bottom: 70px;

        @media (max-width: 1399px) {
            margin-bottom: 100px;
        }
    }
}

/* terms & conditions */
.tc-banner {
    padding-bottom: 150px;

    @media (max-width: 767px) {
        padding-bottom: 100px;
    }

    .hero-bars {
        ul {
            li {
                height: 507px;
            }
        }
    }
}

.tc-desc {
    ul {
        padding-left: 18px;
        margin-bottom: 16px;

        li {
            font-size: 18px;
            color: #171717;
            font-weight: 300;
            list-style: disc;
        }
    }

    a {
        font-size: 18px;
        color: #171717;
    }
}

.v-day-popup {

    & .modal-content {
        background-image: url('/assets/img/popup-bg.png');
        background-repeat: no-repeat;
        background-position: top left;
        border-radius: 35px;
        border: none;
        outline: none;

        @media (max-width: 1199px) {
            background-size: cover;
        }

        .modal-header {
            border: none;
            padding: 0;

            .close {
                position: absolute;
                top: 20px;
                right: 20px;
                z-index: 1;
                border: none;
                box-shadow: none;
                background: transparent;
                opacity: 1;
                padding: 0;

                @media (max-width: 425px) {
                    top: 10px;
                    right: 10px;
                    
                    svg {
                        width: 70%;
                    }
                }
            }
        }

        .modal-body {
            padding: 50px 45px 50px 30px;

            @media (max-width: 1199px) {
                padding: 50px 30px 50px 30px;
            }

            @media (max-width: 425px) {
                padding: 50px 20px 40px;
            }

            .popup-img {
                position: absolute;
                bottom: 0;

                img {
                    width: 93%;
                }
            }

            .general-popup-img {
                position: absolute;
                bottom: 0;
                left: 0;
                border-radius: 35px;
                overflow: clip;

                img {
                    width: 100%;
                }
            }

            .input-group {
                .form-control {
                    background: #EAEAEA;
                    border: 1.17px solid #D4D4D4;
                    color: #0B0B0B;
                    font-size: 18px;
                    font-weight: 300;
                    letter-spacing: 0px;
                    border-radius: 12px;
                    padding: 13px 20px;

                    &:focus {
                        box-shadow: none;
                    }
                }
            }
        }

    }
}

.deal-popup {
    width: 0;

    .modal-dialog {
        align-items: end;
        margin: 0;
        height: calc(100% - 20px);
        max-width: 400px;
        position: fixed;
        bottom: 20px;
        left: 20px;
        z-index: 1;

        @media (max-width: 767.98px) {
            bottom: 10px;
            left: 10px;
        }

        @media (max-width: 425px) {
            left: 0px;
            right: 0px;
            margin: 0 auto;
        }

        .modal-content {
            background: #FDE8CD;
            border-radius: 15px;
            box-shadow: 0 0 20px 0 rgb(0 0 0 / 10%);

            @media (max-width: 767.98px) {
                height: auto;
            }

            .modal-header {
                border: none;
                padding: 0;

                .close {
                    position: absolute;
                    top: -15px;
                    right: -15px;
                    z-index: 1;
                    border: none;
                    box-shadow: none;
                    background: transparent;
                    opacity: 1;
                    padding: 0;

                    @media (max-width: 425px) {
                        top: 5px;
                        right: 5px;
                    }
                }
            }

            .modal-body {
                text-align: center;
                padding: 30px 30px;

                @media (max-width: 767.98px) {
                    padding: 20px;
                }

                .content-deal-popup {

                    & h3 {
                        color: #000000;
                        font-size: 24px;
                        font-weight: 700;
                        line-height: 93%;
                        letter-spacing: -1px;
                        text-align: center;
                        text-transform: uppercase;
                        margin-bottom: 5px;

                        @media (max-width: 767.98px) {
                            font-size: 20px;
                        }
                    }

                    & h2 {
                        background: linear-gradient(90deg, #D91B5D 0%, #832976 46.03%, #453288 83.05%, #2D368F 100.05%);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                        font-size: 48px;
                        font-weight: 900;
                        line-height: 93%;
                        letter-spacing: -1px;
                        text-align: center;
                        text-transform: uppercase;
                        margin-bottom: 0;

                        @media (max-width: 767.98px) {
                            font-size: 38px;
                        }
                    }

                    & h4 {
                        color: #000000;
                        font-size: 14px;
                        font-weight: 700;
                        line-height: 93%;
                        letter-spacing: 0px;
                        text-align: center;
                        text-transform: uppercase;
                        margin-bottom: 10px;
                    }

                    & .countdown-wrapper {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        gap: 10px;
                        
                        & .time-box {
                            color: #211451;
                            background: #ffffff;
                            box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
                            border-radius: 5px;
                            padding: 10px;
                            width: 76px;
                            height: 48px;

                            span {
                                font-size: 18px;
                                font-weight: 600;
                            }

                            sub {
                                font-size: 12px;
                                bottom: 0;
                                left: -2px;
                            }
                        }
                    }

                    & .popup-fields {
                        height: 0px;
                        opacity: 1;
                        overflow: clip;
                        /* transition: all 1s cubic-bezier(.47,1.64,.41,.8); */
                        transition: all 1s ease;

                        &.active {
                            height: 262px;
                        }
                    
                        & .input-group {
                            .form-control {
                                background: #FFFFFF;
                                border: none;
                                color: #2F2F2F;
                                font-size: 14px;
                                font-weight: 300;
                                letter-spacing: 0px;
                                border-radius: 8px;
                                padding: 12px 15px;

                                &:focus {
                                    box-shadow: none;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    &.cyber-monday-popup {

        .modal-content {
            background-color: #211451;
            background-image: url(/assets/img/deal-popup/cyber-monday-bg.png);
            background-position: center;
        }
    }

    &.black-friday-popup {

        .modal-content {
            background-color: #151515;
            background-image: url(/assets/img/deal-popup/black-friday-bg.png);
            background-position: top;
        }
    }

    &.new-year-popup {

        .modal-content {
            background-color: transparent;
            background-image: url(/assets/img/deal-popup/new-year-bg.png);
            background-position: center;
            background-size: cover;
        }
    }

    &.christmas-popup {

        .modal-content {
            background: #FFFFFF;

            & .popup-fields {
                margin-bottom: 10px;
                
                .form-control {
                    border: 1px solid #DADADA !important;
                }
            }
        }
    }
}

/* service pages */
.mobile-app-banner {
    
    & .hero-bars {
        ul {
            li {
                height: 886px;

                @media (max-width: 1399px) {
                    height: 911px;
                }
            }
        }
    }
}

.service-cta {
    /* background-image: url('/assets/img/services/mobile-app-development/service-cta-bg.png'); */
    background: url('/assets/img/services/mobile-app-development/service-cta-bg.png'), linear-gradient(180deg, rgba(245, 245, 245, 0.09) 29.17%, #F5F5F5 100%);
    background-repeat: no-repeat;
    background-size: cover;

    @media (max-width: 575px) {
        padding-top: 30px;
    }

    &.branding-service-cta {
        margin-top: 150px;
        padding-top: 0;

        @media (max-width: 1440px) {
            margin-top: 100px;
        }

        @media (max-width: 575px) {
            margin-top: 30px;
        }
    }

    & .cta-videos {

        @media (max-width: 991px) {
            margin-bottom: 40px;
        }
        
        .cv-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;            
        }

        .cv-box {
            width: 210px;
            height: 160px;
            overflow: clip;
            border-radius: 25px;

            @media (max-width: 991px) {
                width: 180px;
                height: 150px;
            }

            video {
                border-radius: 25px;
                object-fit: cover;
                height: 100%;
                width: 100%;
            }
        }
    }

    & .service-shape {
        position: absolute;
        top: 70px;
        right: -40px;
        animation: rotate360 15s infinite linear;

        @media (max-width: 1199px) {
            top: 100px;
        }

        @media (max-width: 575px) {
            right: 4px;
        }

        &.web-service-shape {
            top: -30px;
            right: unset;
            left: 0;
        }

        &.branding-service-shape {
            top: -50px;
            right: unset;
            left: 80px;

            @media (max-width: 1680px) {
                left: 170px;
            }

            @media (max-width: 1440px) {
                left: 230px;
                top: 0;
            }

            @media (max-width: 1399px) {
                left: 170px;
            }

            @media (max-width: 1199px) {
                left: 50px;
                top: -20px;
            }

            @media (max-width: 991px) {
                display: none;
            }
        }
    }

    & .service-cta-img {
        position: absolute;
        bottom: 0;
        left: 0;

        @media (max-width: 1680px) {
            width: 800px;
        }

        @media (max-width: 1440px) {
            width: 670px;
        }

        @media (max-width: 1199px) {
            width: 700px;
            left: -140px;
        }

        @media (max-width: 1024px) {
            left: -200px;
        }

        @media (max-width: 991px) {
            display: none;
        }
    }
}

.inner-services {
    position: relative;
    margin-top: 100px;

    @media (max-width: 575px) {
        margin-top: 20px;
    }

    & .inner-service-box {
        background-color: #F2F2F2;
        background-repeat: no-repeat;
        background-position: bottom;
        border-radius: 24px;
        padding: 10px;
        margin-bottom: 24px;
        position: relative;

        .is-img {
            border-radius: 24px;
            overflow: clip;
            text-align: center;

            img {
                max-width: unset;

                @media (max-width: 1399px) {
                    max-width: 100%;
                }
            }
        }

        .is-content {
            padding: 40px 30px;

            @media (max-width: 575px) {
                padding: 30px 10px;
            }

            .is-title {
                color: #303030;
                font-size: 40px;
                font-weight: 600;
                margin-bottom: 15px;
                line-height: 1.1;
                letter-spacing: -1px;

                @media (max-width: 767px) {
                    font-size: 35px;
                }

                @media (max-width: 575px) {
                    font-size: 27px;
                }
            }
        }
    }
}

.technology {
    background-image: url('/assets/img/services/mobile-app-development/technology/tech-bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    & h4 {
        color: #ffffff;
        font-size: 28px;
        font-weight: 300;
        letter-spacing: 0px;
    }

    & .tech-box-container {
        margin-top: 50px;

        .first-row {
            display: flex;
            justify-content: space-between;

            .col {
                
                @media (max-width: 575px) {
                    text-align: center;
                }
            }

            @media (max-width: 991px) {
                flex-wrap: wrap;
                gap: 40px 10px;
            }

            @media (max-width: 575px) {
                gap: 20px 10px;
            }
        }

        .second-row {
            display: flex;
            margin-top: 50px;

            .col {
                
                @media (max-width: 575px) {
                    text-align: center;
                }
            }

            @media (max-width: 991px) {
                flex-wrap: wrap;
                margin-top: 20px;
                gap: 40px 10px;
            }

            @media (max-width: 767px) {
                margin-top: 40px;
                flex-direction: row-reverse;
            }

            @media (max-width: 575px) {
                gap: 20px 10px;
                margin-top: 30px;
            }
        }
    }

    & .tech-box {
        display: inline-flex;
        align-items: flex-end;
        gap: 10px;

        &.third-child {
            position: relative;
            top: 30px;
            left: 60px;

            @media (max-width: 991px) {
                top: -50px;
                left: 50px;
            }

            @media (max-width: 767px) {
                left: 10px;
            }

            @media (max-width: 575px) {
                top: 0;
            }
        }

        &.python {
            @media (max-width: 575px) {
                margin-bottom: 20px;
            }
        }

        &.android {
            align-items: flex-start;
        }

        &.flutter {
            align-items: flex-start;
        }

        .t-icon {
            position: relative;

            .icon-circle {
                background-color: #ffffff;
                width: 130px;
                height: 130px;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                padding-left: 10px;
                position: absolute;
                top: 0;
                left: -10px;
                transition: all .4s ease;

                &.swift {
                    width: 188px;
                    height: 188px;
                    top: 10px;
                    left: 10px;

                    @media (max-width: 575px) {
                        top: 0;
                    }
                }

                &.android {
                    width: 222px;
                    height: 222px;
                    left: 0;
                    top: 10px;
                    padding-left: 0;

                    @media (max-width: 767px) {
                        width: 200px;
                        height: 200px;
                    }

                    @media (max-width: 575px) {
                        top: 0;
                        left: 10px;
                    }
                }

                &.flutter {
                    width: 260px;
                    height: 260px;
                    top: 10px;

                    @media (max-width: 767px) {
                        width: 200px;
                        height: 200px;
                    }

                    @media (max-width: 575px) {
                        top: 0;
                    }
                }

                &.python {
                    width: 204px;
                    height: 204px;
                    top: -5px;
                    left: -15px;

                    @media (max-width: 767px) {
                        width: 150px;
                        height: 150px;
                        top: 0;
                        left: 0;
                    }
                }

                &.php {
                    width: 161px;
                    height: 161px;
                }

                &.semrush {
                    img {
                        width: 70%;
                    }
                }
            }

            .orbit {
                position: relative;
                width: 130px; 
                height: 130px;

                &.swift {
                    width: 188px;
                    height: 188px;
                }

                &.android {
                    width: 242px;
                    height: 242px;

                    @media (max-width: 767px) {
                        width: 200px;
                        height: 200px;
                    }
                }

                &.flutter {
                    width: 260px;
                    height: 260px;

                    @media (max-width: 767px) {
                        width: 200px;
                        height: 200px;
                    }
                }

                &.python {
                    width: 204px;
                    height: 204px;

                    @media (max-width: 767px) {
                        width: 130px;
                        height: 130px;
                    }
                }

                &.php {
                    width: 162px;
                    height: 162px;
                }

                svg {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                }

                .small {
                    position: absolute;
                    inset: 0;
                    animation: rotate360 8s linear infinite;
                    transform-origin: center;
                    --dot-size: 12px;

                    .dot {
                        position: absolute;
                        width: var(--dot-size);
                        height: var(--dot-size);
                        background: white;
                        border-radius: 50%;
                        box-shadow: 0 0 4px 1px rgb(0 0 0 / 25%);
                        top: 50%;
                        left: -6px;
                        transform: translateY(-50%);

                        &.swift {
                            background-color: #FC4127;
                        }

                        &.kotlin {
                            background-color: #557BDE;
                        }

                        &.android {
                            background-color: #82BC01;
                        }

                        &.flutter {
                            background-color: #5FC9F8;
                        }

                        &.python {
                            background-color: #FFD540;
                        }

                        &.php {
                            background-color: #909ED2;
                        }
                        
                        &.angular {
                            background-color: #B52E31;
                        }

                        &.html {
                            background-color: #FF651E;
                        }

                        &.shopify {
                            background-color: #82BC01;
                        }

                        &.wordpress {
                            background-color: #0F8CC3;
                        }
                    }
                }
            }
        }

        .t-text {
            color: #ffffff;
            font-size: 22px;
            font-weight: 600;
            letter-spacing: 0;
            line-height: 1.1;
            margin-bottom: 10px;

            &.android {
                margin-top: 10px;
                margin-bottom: 0px;
            }

            &.flutter {
                margin-top: 10px;
                margin-bottom: 0;
            }

            &.meta {
                margin-left: 10px;
            }
        }

        &:hover {

            .t-icon .icon-circle {
                left: 0px;
                padding-left: 0px;

                &.swift {
                    top: 0;
                    left: 0;
                }

                &.android {
                    width: 242px;
                    height: 242px;
                    left: 0;
                    top: 0px;

                    @media (max-width: 767px) {
                        width: 200px;
                        height: 200px;
                    }
                }

                &.python {
                    top: 0;
                    left: 0;

                    @media (max-width: 767px) {
                        width: 130px;
                        height: 130px;
                    }
                }

                &.flutter {
                    top: 0px;
                }
            }
        }
    }
}

.industies {
    margin-top: 100px;

    @media (max-width: 991px) {
        padding-top: 80px;
    }

    @media (max-width: 767px) {
        padding-top: 60px;
    }

    @media (max-width: 575px) {
        padding-top: 40px;
    }

    & .industies-title-shadow {
        background: linear-gradient(198.35deg, rgb(51 51 51 / 7%) -90.01%, rgb(153 153 153 / 7%) 87.55%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 900;
        font-size: 228.48px;
        line-height: 0.72;
        letter-spacing: -1px;
        text-transform: uppercase;
        position: absolute;
        top: -100px;

        @media (max-width: 1399px) {
            font-size: 184.48px;
        }

        @media (max-width: 1199px) {
            font-size: 154.48px;
            top: -80px;
        }

        @media (max-width: 991px) {
            font-size: 116.48px;
            top: -60px;
        }

        @media (max-width: 767px) {
            font-size: 86.48px;
            top: -50px;
        }

        @media (max-width: 425px) {
            font-size: 64.48px;
            top: -30px;
        }
    }

    & .industries-box {
        width: 100%;
        height: 450px;
        background-color: #ffffff;
        border-radius: 48px;
        overflow: clip;

        & .i-content {
            padding: 40px 30px 0;

            .i-title {
                color: #333333;
                font-size: 35px;
                font-weight: 600;
                letter-spacing: -2px;
                text-transform: capitalize;
                line-height: 1;
                margin-bottom: 20px;

                @media (max-width: 575px) {
                    font-size: 27px;
                }
            }

            .i-desc {
                color: #333333;
                margin-bottom: 0;
            }
        }

        & .i-img {
            width: 800px;
            position: relative;
            left: 50%;
            transform: translateX(-50%) rotate(0deg);
            transition: all .5s ease;

            &.edu-img {
                width: 684px;
                transform: translateX(-50%) translateY(50px) rotate(2.68deg);
            }

            &.hospitality-img {
                width: fit-content;
                transform: translateX(-50%) translateY(50px);
            }

            &.fintech-img {
                width: 400px;
                transform: translateX(-50%) translateY(80px);
            }

            &.healthcare-img {
                width: 400px;
                transform: translateX(-50%) translateY(50px);
            }
        }

        &:hover {

            & .i-img {
                transform: translateX(-50%) rotate(5deg);

                &.edu-img {
                    transform: translateX(-50%) translateY(0px) rotate(0deg);
                }

                &.hospitality-img {
                    transform: translateX(-50%) translateY(0px);
                }

                &.fintech-img {
                    transform: translateX(-50%) translateY(40px) rotate(4deg);
                }

                &.healthcare-img {
                    transform: translateX(-50%) translateY(0px) rotate(-7deg);
                }
            }
        }
    }
}