@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
    box-sizing: border-box;
    /* outline: 1px solid red; */
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* 2. Remove default margin */
/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* outline: 2px solid red; */
}

html {
    scroll-behavior: smooth;
}
body {
    /* 3. Add accessible line-height */
    line-height: 1.5;
    /* 4. Improve text rendering */
    -webkit-font-smoothing: antialiased;

    &.landing-page {
        overflow-x: hidden;
    }
}

/* 5. Improve media defaults */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/* 6. Inherit fonts for form controls */
input,
button,
textarea,
select {
    font: inherit;
}

/* 7. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/* 8. Improve line wrapping */
p {
    text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

/*
    9. Create a root stacking context
  */
#root,
#__next {
    isolation: isolate;
}

@font-face {
    font-family: "EurostileCandyLTPro";
    src: url("assets-ppc/fonts/EUROSTILECANDYLTPRO-REGULAR.OTF") format("opentype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "EurostileCandyLTProSB";
    src: url("assets-ppc/fonts/EUROSTILECANDYLTPRO-SMBD.OTF") format("opentype");
    font-weight: 600; 
    font-style: normal;
}

@font-face {
    font-family: "EurostileCandyLTProB";
    src: url("assets-ppc/fonts/EUROSTILECANDYLTPRO-BOLD.OTF") format("opentype");
    font-weight: 700;
    font-style: normal;
}

:root {
    /* Fonts */

    /* EurostileCandyLTPro family - can be used for headings, etc. */
    --font-family-eurostile-regular: "EurostileCandyLTPro", sans-serif; /* Weight 400 */
    --font-family-eurostile-semi-bold: "EurostileCandyLTProSB", sans-serif; /* Weight 600 */
    --font-family-eurostile-bold: "EurostileCandyLTProB", sans-serif; /* Weight 700 */
    /* --font-family-eurostile-semi-bold: "EurostileCandyProSemibold", sans-serif; /* Weight 600

    /* Univers family - can be used for body text, etc. */
    --font-family-univers-regular: "Inter", sans-serif; /* Weight 400 */
    --font-family-univers-light: "Inter", sans-serif; /* Weight 300 */
    --font-family-univers-bold: "Inter", sans-serif; /* Weight 700 */
    --font-family-inter-regular: "Inter", sans-serif; /* Weight 400 */
    --font-family-inter-light: "Inter", sans-serif; /* Weight 300 */
    --font-family-inter-bold: "Inter", sans-serif; /* Weight 700 */

    /* If you'd like to pick a single "default" family from these, 
     just use one variable for primary fonts: */
    --font-family-primary: "Univers", sans-serif;
    --font-family-heading: "EurostileCandyLTPro", sans-serif;

     --color-black: #000;
    --color-black-light: rgba(0, 0, 0, 0.6);

    --color-white: #fff;
    --color-white-smoke: #f1f1f1;
    --color-pale-grey: #f8f8f8;
    --color-pale-grey-2: #f2f2f2;
    --color-pale-grey-3 : #F9F9F9;
    --color-pale-grey-4: #FBFBFB;
    --color-grey-dark: #595959;
    --color-platinum: #e2e2e2;
    --color-dove-gray: #707070;

    --color-blue: #2557c6;
    --color-orange: #f66135;
    --color-red: #d90000;
    --color-green: #00d959;
    --color-text: #000;
    --color-subtext: #555;

    --color-gray: #818181;

    --input-border: #c1c1c1;
    --border-orange: #e5753e;
    --border-gray: #cccccc;

    --gradient-bg: linear-gradient(135deg, #fafafa 0%, #f0f0f3 100%);
    --hero-gradient: linear-gradient(135deg, #ffffff 0%, #f2f2f5 100%);

    /* Radius */
    --border-radius-52: 52px;
    --border-radius-24: 24px;
    --border-radius-18: 18px;
    --border-radius-12: 12px;
    --border-radius-8: 8px;

    /* Font-sizes */

    --sb-track-color: #c3d0d6;
    --sb-thumb-color: #757979;
    --sb-size: 6px;
}

/* Navbar */
header {
    background-color: transparent;
    padding-block: 20px;
    transition: background-color 0.15s;
    background-color: var(--color-white);

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

        .logo img {
            height: 40px;
            @media only screen and (max-width: 480px) {
                width: 80%;
                object-fit: contain;
            }
        }
        .nav-links {
            padding: unset;
            margin-inline: auto 50px;
            margin-right: 26px;
            margin-left: auto;
            list-style-type: none;
            display: flex;
            gap: 49px;
            isolation: isolate;
            z-index: 10;
            margin-bottom: 0px;
            transition: transform 0.5s ease-in-out;

            li {
                position: relative;
                .parent-item {
                    text-decoration: none;
                    color: var(--color-black);
                    font-family: var(--font-family-inter-bold);
                    font-size: 16px;
                    display: flex;
                    align-items: center;
                    gap: 7px;
                    font-weight: 700;

                    &.active {
                        color: var(--color-orange);

                        .arrow {
                            border: solid var(--color-orange);
                            border-width: 0 2px 2px 0;
                        }

                        & ~ .submenu {
                            visibility: visible;
                            opacity: 1;
                            pointer-events: auto;
                            transition: opacity 0.3s ease, visibility 0s;
                        }
                    }

                    @media screen and (max-width: 1280px) {
                        font-size: 2.5rem;
                    }

                    @media screen and (max-width: 768px) {
                        font-size: 2rem;
                    }
                }
            }

            @media only screen and (max-width: 1280px) {
                position: fixed;
                bottom: 0px;
                left: 0;
                width: 100%;
                background-color: var(--color-white);
                flex-direction: column;
                gap: 10px;

                text-align: center;
                align-items: start;

                overflow: hidden;
                /* height: calc(100dvh - 75px); */
                /* height: calc(100dvh - 68px);  */
                height: calc(100dvh - 66px); 
                padding-block: 10dvh;
                padding-left: 30px;

                transform: translateX(-100dvw);
                &.active {
                    display: flex;
                    margin-right: 0px;

                    transform: translateX(0dvw);
                }
            }

            @media only screen and (max-width: 768px) {
                padding-block: 0dvh;
                font-size: 1.5rem;

                transform: translateX(-110dvh);
                &.active {
                    display: flex;
                    margin-right: 0px;
                    /* height: calc(100dvh - 80px); */
                    height: calc(100dvh - 65px);
                    padding-block: 16dvh;
                    transform: translateX(0dvh);
                    position: fixed;
                }
            }
        }

        .button {
            @media screen and (max-width: 1281px) {
                display: none;
            }

            &.nav-view {
                display: block;
                font-size: 28px;

                @media screen and (min-width: 1281px) {
                    display: none;
                }
            }
        }
    }

    @media screen and (max-width: 1350px) {
        .nav-links {
            gap: 24px;
        }
    }
}

section {
    scroll-margin-top: 20px;
}

.main-container {
    max-width: 1366px;
    margin-inline: auto;
    padding-inline: 62px;

    /* @media screen and (max-width: 1400px) {
        padding-inline: 30px !important;
    } */

    @media screen and (max-width: 1020px) {
        padding-inline: 30px !important;
    }

    @media screen and (max-width: 600px) {
        padding-inline: 20px !important;
    }
}

.client-and-logos {
    @media screen and (max-width: 1400px) {
        padding-inline: 0 !important;
    }
}

.hero-section {
    height: 100dvh;

    display: flex;
    align-items: center;
    justify-content: center;

    .main-container, .hero-content {
        height: 100%;
        width: 100%;
    }

    .hero-content {
        display: flex;
        align-items: center;
        gap: 60px;
        width: 100%;

        .text-content {
            flex: 1;

            .title {
                font-family: var(--font-family-eurostile-semi-bold);
                color: var(--color-black);
                font-size: 41px;
                line-height: 50px;
                margin-bottom: 18px;
                max-width: 519px;
    
                span {
                    color: var(--color-orange);
                    display: block;
                }

                @media screen and (max-width: 600px) {
                    font-size: 28px;
                    line-height: 35px;
                }
            }

            .sub-title {
                font-family: var(--font-family-inter-bold);
                color: var(--color-black);
                font-size: 18px;
                font-weight: bold;
                margin-bottom: 18px;
            }
    
            .description {
                font-family: var(--font-family-inter-regular);
                color: var(--color-black);
                font-size: 18px;
                line-height: 21px;
                margin-bottom: 18px;
                max-width: 505px;
            }

            @media screen and (max-width: 1024px) {
                width: 100%;

                .title, .description {
                    max-width: 100%;
                }

                .title {
                    font-size: 46px;
                    line-height: 50px;
                }

                .sub-title {
                    font-size: 22px;
                }

                .description {
                    font-size: 28px;
                    line-height: 35px;
                }

                .button {
                    font-size: 22px;
                }
            }

            @media screen and (max-width: 600px) {
                .title {
                    font-size: 28px;
                    line-height: 40px;
                }

                .sub-title {
                    font-size: 18px;
                }

                .description {
                    font-size: 18px;
                    line-height: 25px;
                }

                .button {
                    font-size: 18px;
                }
            }
        }

        .image-content {
            flex: 1;
            height: 100%;
            position: relative;

            .model {
                position: absolute;
                /* bottom: 0; */
                bottom: 80px;
                right: -15px;
            }

            .flexible-hiring {
                position: absolute;
                top: 25%;
                left: -50px;
                animation: float 6s ease-in-out infinite;
            }

            .time-zone {
                position: absolute;
                left: 0px;
                bottom: 115px;
                animation: float 6s ease-in-out infinite;
            }

            .experienced-developers {
                position: absolute;
                top: 17%;
                right: 170px;
                animation: float-revrse 6s ease-in-out infinite;
            }

            .faster-onboarding {
                position: absolute;
                right: 69px;
                bottom: 200px;
                z-index: -1;
                animation: float 6s ease-in-out infinite;
            }

            @media screen and (min-height: 800px) { 
                .experienced-developers {
                    top: 27%;
                }

                .flexible-hiring {
                    top: 32%;
                }
            }

            @media screen and (min-height: 850px) { 
                .experienced-developers {
                    top: 30%;
                }

                .flexible-hiring {
                    top: 32%;
                }
            }

            @media screen and (min-height: 950px) { 
                .model {
                    bottom: 70px;
                }

                .time-zone {
                    bottom: 175px;
                }

                .faster-onboarding {
                    bottom: 265px;
                }
            }

            @media screen and (min-height: 1050px) {
                .model {
                    bottom: unset;
                    top: 30%;
                    right: -15px;
                }
    
                .flexible-hiring {
                    top: 30%;
                    left: -50px;
                }
    
                .time-zone {
                    left: 0px;
                    bottom: 315px;
                }
    
                .experienced-developers {
                    top: 24%;
                    right: 170px;
                }
    
                .faster-onboarding {
                    right: 69px;
                    bottom: 403px;
                }
            }

            @media screen and (max-width: 1350px) {
                .flexible-hiring {
                    left: -70px;
                }

                .experienced-developers {
                    right: 145px;
                }
            }

            @media screen and (max-width: 1250px) {
                .faster-onboarding {
                    right: 40px;
                    bottom: 185px;
                }

                .experienced-developers {
                    top: 21%;
                    right: 125px;
                }
            }

            @media screen and (max-width: 1100px) {
                .faster-onboarding {
                    right: 15px;
                    bottom: 185px;
                }

                .experienced-developers {
                    top: 21%;
                    right: 125px;
                }
            }

            @media screen and (max-width: 1024px) {
                display: none;
            }
        }
    }

    @media screen and (max-width: 1024px) {
        height: auto;
        padding-block: 70px;
        padding-top: 140px;
    }
}

@keyframes float {
	0% {
		/* box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); */
		transform: translatey(0px);
	}
	50% {
		/* box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2); */
		transform: translatey(-20px);
	}
	100% {
		/* box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); */
		transform: translatey(0px);
	}
}

@keyframes float-revrse {
	0% {
		/* box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); */
        transform: translatey(-20px);
	}
	50% {
		/* box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2); */
		transform: translatey(0px);
	}
	100% {
		/* box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); */
        transform: translatey(-20px);
	}
}

.client-and-logos {
    padding-top: 48px;
    padding-bottom: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--color-white-smoke);

    .heading {
        text-align: center;
        font-family: var(--font-family-inter-bold);
        font-weight: 600;
        font-size: 30px;
        margin-bottom: 0;
        color: var(--border-orange);
    }

    .marquee {
        overflow: hidden;
        background-color: var(--color-white-smoke);
        padding-inline: 62px;
        padding-block: 34px;
        padding-bottom: 0;
        white-space: nowrap;
        position: relative;
        width: 100%;

        .marquee-content {
            display: flex;
            align-items: center;
            gap: 75px;
            width: max-content;
            animation: marquee 100s linear infinite;

            img {
                width: auto;
                flex-shrink: 0;
                filter: grayscale(1);
            }
        }
    }

    button {
        width: max-content;
    }

    @media screen and (max-width: 1020px) {
        margin-bottom: 0;
    }
}

.why-choose-us, .who-we-are, .why-hire-us {
    padding-top: 62px;
    padding-bottom: 62px;
    background-color: var(--color-white-smoke);
    /* padding-inline: 62px; */

    .offers-container {
        background-color: var(--color-white);
        display: flex;
        align-items: center;
        /* gap: 24px; */
        gap: 43px;
        height: 641px;
        border-radius: 27px;

        .image-container {
            flex: 1;
            width: 100%;
            min-width: 566px;
            height: 100%;
            background-image: linear-gradient(
                    196deg, #0000001F 0%, #000000 100%
                ),
                url("./assets-ppc/images/pngs/what-we-offer-bg.png");
            background-size: cover;
            background-position: top;
            display: flex;
            align-items: flex-end;
            padding: 24px;
            border-radius: 27px;

            .text-content {
                .heading {
                    font-family: var(--font-family-eurostile-semi-bold);
                    font-size: 36px;
                    color: var(--color-white);
                    margin-bottom: 12px;

                    @media screen and (max-width: 600px) {
                        font-size: 28px;
                    }
                }

                .description {
                    font-family: var(--font-family-inter-regular);
                    font-size: 18px;
                    color: var(--color-white);
                    margin-bottom: 12px;
                }
            }

            @media screen and (max-width: 1330px) {
                min-width: unset;
            }

            @media screen and (max-width: 1020px) {
                min-height: 641px;
            }

            @media screen and (max-width: 600px) {
                background-size: cover;
                min-height: 550px;
                border-radius: 17px;
            }
        }

        .scrollable-container {
            flex: 1;
            width: 100%;
            min-width: 628px;
            padding-block: 43px;
            margin-right: 26px;

            height: 100%;
            overflow-y: auto;
            scroll-behavior: smooth;
            scrollbar-width: none;

            .heading {
                font-family: var(--font-family-inter-bold);
                font-weight: 600;
                font-size: 62px;
                margin-bottom: 29px;
                line-height: 75px;

                @media screen and (max-width: 600px) {
                    font-size: 28px;
                    line-height: 30px;
                }
            }

            .sub-heading {
                font-family: var(--font-family-inter-bold);
                font-size: 24px;
                color: var(--color-orange);
                line-height: 29px;
                margin-bottom: 29px;
                font-weight: 600;
            }

            .offer-list {
                display: flex;
                flex-direction: column;
                gap: 29px;

                .list-title {
                    font-family: var(--font-family-inter-bold);
                    font-weight: 600;
                    font-size: 24px;
                    margin-bottom: 0;
                }
                .list-item {
                    display: flex;
                    align-items: center;
                    gap: 10px;

                    p {
                        font-size: 18px;
                        font-family: var(--font-family-inter-bold);
                        font-weight: 600;
                        margin-bottom: 0;

                        span {
                            font-weight: 500;
                        }
                    }

                    img {
                        width: 20px;
                    }
                }
            }

            @media screen and (max-width: 1330px) {
                min-width: unset;
            }

            @media screen and (max-width: 1020px) {
                /* margin-inline: 26px; */
                margin-inline: 0;
                min-width: unset;
                width: calc(100% - 52px);
                /* margin-inline: auto; */
            }

            @media screen and (max-width: 600px) {
                width: calc(100% - 28px);
                padding-top: 0;
            }
        }

        @media screen and (max-width: 1020px) {
            flex-direction: column;
            height: auto;
        }
    }

    .scrollable-container {
        margin-right: 0;
        padding-left: 26px;
    }
}

.why-choose-us {
    background-color: var(--color-white);

    .offers-container {
        background-color: var(--color-white-smoke);
    }
}

.who-we-are {
    background-color: var(--color-white);
    .offers-container {
        background-color: var(--color-white-smoke);

        .scrollable-container {
            margin-right: 0;
            padding-left: 26px;

            .heading {
                font-family: var(--font-family-eurostile-semi-bold);
                font-size: 42px;
                margin-bottom: 18px;
                color: var(--color-orange);
            }

            .sub-heading {
                font-family: var(--font-family-inter-bold);
                font-weight: 600;
                font-size: 24px;
                line-height: 29px;
                margin-bottom: 18px;
                color: var(--color-black);
            }

            .description {
                font-family: var(--font-family-inter-regular);
                font-size: 18px;
                line-height: 21px;
                margin-bottom: 43px;
            }

            .offer-list {
                .list-title {
                    color: var(--color-orange);
                }

                .list-item {
                    display: flex;
                    align-items: flex-start;

                    img {
                        margin-top: 5px;
                        width: 20px;
                    }
                }
            }

            @media screen and (max-width: 600px) {
                width: calc(100% - 28px);
                padding-top: 40px;
                padding-left: 0;
                padding-bottom: 0;
                padding-right: 20px;
            }
        }

        .image-container {
            background-image: url('./assets-ppc/images/pngs/who-we-are-banner.png');
        }
    }
}

.service-we-offer {
    padding-top: 62px;
    padding-bottom: 62px;
    background-color: var(--color-white);

    .main-container {
        .heading {
            text-align: left;
            margin-bottom: 30px;
            font-size: 38px;
            font-family: var(--font-family-eurostile-semi-bold);
            color: var(--color-black);
            line-height: 50px;
            color: var(--color-orange);

            @media screen and (max-width: 850px) {
                margin-bottom: 15px;
            }

            @media screen and (max-width: 600px) {
                font-size: 28px;
                margin-bottom: 20px;
                margin-bottom: 0;
            }
        }

        .service-container {
            display: flex;
            align-items: center;
            gap: 24px;

    
            .text-content {
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 33px;
    
                .list-container {
                    border-radius: 18px;
                    padding-inline: 0px;
                    padding-block: 25px;
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(395px, 1fr));
                    gap: 30px;
    
                    .list-item {
                        display: flex;
                        align-items: center;
                        gap: 30px;
    
                        img {
                            width: 32px;
                            height: auto;
                        }
    
                        p {
                            font-size: 24px;
                            font-family: var(--font-family-inter-bold);
                            font-weight: bold;
                            margin-bottom: 0;

                            @media screen and (max-width: 600px) {
                                font-size: 20px;
                            }

                             @media screen and (max-width: 480px) {
                                font-size: 18px;
                             }
                        }
                    }

                    @media screen and (max-width: 894px) {
                        grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
                    }

                    @media screen and (max-width: 600px) {
                        display: flex;
                        flex-direction: column;
                        gap: 20px;
                    }
                }
    
                .call-container {
                    background-color: var(--color-white-smoke);
                    border-radius: 18px;
                    padding: 30px;
                    padding-block: 20px;
    
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 10px;
    
                    p {
                        font-size: 24px;
                        color: var(--color-black);
                        line-height: 29px;
                        font-family: var(--font-family-inter-regular);
                        margin-bottom: 0;
                        font-weight: 400;
                        max-width: calc(100% - 200px);
    
                        span {
                            font-weight: bold;
                        }

                        @media screen and (max-width: 1324px) {
                            max-width: unset;
                            font-size: 16px;
                        }

                        @media screen and (max-width: 1260px) {
                            max-width: unset;
                            font-size: 18px;
                        }
                    }

                    button {
                        padding-inline: 33px;
                        font-size: 20px;

                        @media screen and (max-width: 700px) {
                            font-size: 16px;
                        }
                    }

                    @media screen and (max-width: 700px) {
                        flex-direction: column;
                        gap: 20px;
                        text-align: center;
                        padding-block: 30px;
                    }
                }

                @media screen and (max-width: 600px) {
                    gap: 20px;
                }
            }
        }
    }
}

.why-hire-us {
    background-color: var(--color-white);
    .offers-container {
        background-color: var(--color-white-smoke);
        height: 351px;
        gap: 24px;

        .scrollable-container {
            margin-right: 0;
            padding-left: 26px;
            padding-block: 40px;

            .heading {
                font-family: var(--font-family-eurostile-semi-bold);
                font-size: 42px;
                margin-bottom: 18px;
                line-height: 50px;
                color: var(--color-orange);

                @media screen and (max-width: 600px) {
                    font-size: 28px;
                }
            }

            .description {
                font-family: var(--font-family-inter-regular);
                font-size: 18px;
                line-height: 30px;
                margin-bottom: 0;

                span {
                    font-weight: 700;
                }
            }

            @media screen and (max-width: 1020px) {
                padding-bottom: 0;
                padding-left: 0;
                margin-left: 0;
            }

            @media screen and (max-width: 600px) {
                width: calc(100% - 28px);
                padding-top: 40px;
                padding-left: 0;
                padding-bottom: 0;
                padding-right: 20px;
            }
        }

        .image-container {
            background-image: url('./assets-ppc/images/pngs/why-hire-from-us-bg.png');
            background-size: cover;
            background-repeat: no-repeat;

            @media screen and (max-width: 1020px) {
                padding-top: 0;
            }
        }

        @media screen and (max-width: 1020px) {
            height: auto;
        }
    }
}

.testimoinals {
    padding-top: 62px;
    padding-bottom: 62px;
    background-color: var(--color-white);

    .testimonial-container {
        display: flex;
        flex-direction: column;

        h2 {
            font-family: var(--font-family-eurostile-semi-bold);
            font-size: 42px;
            color: var(--color-orange);
            line-height: 50px;
            text-align: center;
            margin-bottom: 72px;

            @media screen and (max-width: 600px) {
                font-size: 28px;
            }
        }

        .video-container {
            width: 100%;
            max-width: 884px;
            max-height: 499px;
            height: 499px;
            border-radius: 20px;
            margin-inline: auto;
            position: relative;

            video {
                width: 100%;
                display: block;
            }

            .video-thumbnail {
                width: 100%;
                filter: brightness(0.5);
                cursor: pointer;
                height: 100%;
                object-fit: cover;
                border-radius: 20px;
            }

            .video-container:hover video::-webkit-media-controls {
                display: flex !important;
            }

            video {
                border-radius: 18px;
            }

            /* Show controls when hovered */
            .video-container:hover video::-webkit-media-controls {
                display: flex !important;
            }

            .play-button {
                width: 108px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            .video-container:hover .play-button {
                opacity: 0.7;
            }
            
            @media screen and (max-width: 1000px) {
                max-width: 100%;
            }
        }
    }
}

.our-offshore-solution {
    padding-top: 62px;
    padding-bottom: 62px;
    background-color: var(--color-white-smoke);
    text-align: center;

    .offshore-container {
        display: flex;
        flex-direction: row;
        gap: 40px;
        align-items: center;
        /* box-shadow: 0px 3px 26px #00000033; */
        /* padding: 40px; */
        border-radius: 32px;
        text-align: left;

        .left {
            display: flex;
            flex-direction: column;
            gap: 20px;
            flex: 1;

            .heading {
                font-size: 42px;
                font-family: var(--font-family-eurostile-semi-bold);
                color: var(--color-orange);
                line-height: 50px;
                margin-bottom: 0;
            }
    
            .description {
                font-size: 18px;
                font-family: var(--font-family-inter-regular);
                line-height: 21px;
                margin-bottom: 0;
            }

            .button {
                width: max-content;

                @media screen and (max-width: 800px) {
                    display: none;
                }
            }
        }


        .solution-points {
            display: flex;
            align-items: stretch;
            gap: 20px;
            flex-wrap: wrap;
            flex: 1;

            .point {
                display: flex;
                align-items: center;
                gap: 10px;
                background-color: var(--color-white);
                padding: 24px;
                border-radius: 18px;
                font-weight: 500;
                flex: 1;
                min-width: 300px;
                font-family: var(--font-family-inter-bold);
                background-color: var(--color-white);
            }
        }

        .hideable-btn {
            display: none;

            @media screen and (max-width: 800px) {
                display: block;
                margin-right: auto;
            }
        }

        @media screen and (max-width: 800px) {
            flex-direction: column;
        }
    }
}

.comparison-table-section {
    padding-top: 62px;
    padding-bottom: 62px;
    text-align: center;
    background-color: var(--color-white-smoke);

    .comparison-container {
        overflow-x: auto;

        .heading {
            font-family: var(--font-family-eurostile-semi-bold);
            font-size: 42px;
            color: var(--color-black);
            margin-bottom: 63px;

            @media screen and (max-width: 600px) {
                font-size: 28px;
                margin-bottom: 30px;
            }
        }

        .table-container {
            display: grid;
            grid-template-columns: 1fr 1.5fr 1fr;
            gap: 10px;
            overflow: hidden;

            .cell {
                padding: 17px 29px;
                font-size: 18px;
                font-family: var(--font-family-inter-regular);
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: var(--color-white);
                border-radius: 5px;


                &.bg-smoke {
                    /* background-color: var(--border-gray); */
                    background-color: #e7e7e7;
                }

                &.heading {
                    font-size: 24px;
                    font-family: var(--font-family-inter-bold);
                    margin-bottom: 0;
                    font-weight: 600;
                    background-color: var(--color-orange);
                    color: var(--color-white);
                }

                &.orange {
                    color: var(--color-orange);
                }

                &.nbr {
                    border-right: none;
                }

                &.nbb {
                    border-bottom: none;
                }

                &.bg {
                    background: linear-gradient(to right, #F6F5FB, #F9EEF0);
                }
            }

            @media screen and (max-width: 940px) {
                width: 870px;
            }
        }
    }
}

.pricing-model {
    padding-block: 44px;
    background-color: var(--color-white);

    .heading {
        font-family: var(--font-family-eurostile-semi-bold);
        color: var(--color-orange);
        font-size: 42px;
        margin-bottom: 30px;

        span {
            color: var(--color-black);
        }

        @media screen and (max-width: 600px) {
            font-size: 28px;
        }
    }

    .description {
        font-family: var(--font-family-inter-regular);
        color: var(--color-black);
        font-size: 18px;
        margin-bottom: 42px;
        max-width: 848px;
        margin-inline: auto;
        line-height: 21px;
    }

    .pricing-container {
        display: flex;
        align-items: stretch;
        flex-wrap: wrap;
        gap: 24px;

        .pricing {
            flex: 1;
            width: 100%;
            min-width: 300px;
            border-radius: 28px;
            /* box-shadow: 0px 3px 26px #00000021; */

            &.fixed-fee {
                background: linear-gradient(to bottom, #FBF4F9, #E6E4EE);
            }

            &.dedicated {
                background: linear-gradient(to bottom, #F5F2F8, #E4E1E9);
            }

            .header {
                padding: 28px;
                border-bottom: 2px solid #D6D6D6;
                height: 144px;

                .title {
                    font-family: var(--font-family-inter-bold);
                    color: var(--color-orange);
                    font-size: 30px;
                    font-weight: bold;
                    text-align: left;

                    @media screen and (max-width: 600px) {
                        font-size: 28px;
                    }
                }

                .sub-title {
                    margin-bottom: 0;
                    font-family: var(--font-family-inter-bold);
                    font-size: 18px;
                    line-height: 21px;
                }

                @media screen and (max-width: 1295px) {
                    height: 170px;
                }

                @media screen and (max-width: 1071px) {
                    height: 144px;
                }

                @media screen and (max-width: 600px) {
                    padding-block: 18px;
                }
            }

            .body {
                padding: 28px;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                height: calc(100% - 144px);

                .description {
                    font-family: var(--font-family-inter-regular);
                    color: var(--color-black);
                    font-size: 16px;
                    line-height: 21px;
                    margin-bottom: 30px;
                    text-align: left;
                }

                .points-list {
                    display: flex;
                    flex-direction: column;
                    gap: 20px;
                    margin-bottom: 37px;

                    .list-item {
                        display: flex;
                        align-items: center;
                        gap: 12px;

                        .icon {
                            width: 18px;

                            img {
                                width: 100%;
                                height: auto;
                            }
                        }

                        .text {
                            font-family: var(--font-family-inter-bold);
                            color: var(--color-black);
                            font-size: 18px;
                            line-height: 21px;
                            margin-bottom: 0;
                            font-weight: 500;
                        }
                    }
                }

                .button {
                    width: max-content;
                    margin-top: auto;
                }

                @media screen and (max-width: 1295px) {
                    height: calc(100% - 170px);
                }

                @media screen and (max-width: 1071px) {
                    height: calc(100% - 144px);
                }
            }

            @media screen and (max-width: 1200px) {
                /* min-width: unset; */
                /* max-height: unset; */
            }
        }

        @media screen and (max-width: 850px) {
            flex-direction: column;
        }
    }
}

.faq {
    padding-block: 44px;
    background-color: var(--color-white-smoke);

    .faq-container {
        .heading {
            font-family: var(--font-family-eurostile-semi-bold);
            color: var(--color-orange);
            font-size: 42px;
            margin-bottom: 30px;
            text-align: center;
    
            @media screen and (max-width: 600px) {
                font-size: 28px;
            }
        }

        .accordion {
            .accordion-button:focus{
                box-shadow: unset;
            }

            .accordion-button:not(.collapsed) {
                box-shadow: unset;
                color: var(--color-orange);
                background-color: var(--color-white-smoke);
                font-size: 18px;
            }

            .accordion-button.collapsed {
                background-color: var(--color-white);
                color: var(--black);
                font-size: 18px;
            }

            .accordion-button::after {
                background-image: url("./assets-ppc/images/svgs/dropdown.svg");
            }
            
            /* Change arrow color when the accordion is expanded */
            .accordion-button:not(.collapsed)::after {
                background-image: url("./assets-ppc/images/svgs/dropdown-active.svg");
            }

            .accordion-body {
                .description {
                    font-size: 16px;
                    font-family: var(--font-family-inter-regular);
                }
            }
        }
    }
}

.our-development-kit {
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: var(--color-white-smoke);

    .heading {
        font-family: var(--font-family-eurostile-semi-bold);
        color: var(--color-orange);
        font-size: 42px;
        margin-bottom: 30px;

        @media screen and (max-width: 600px) {
            font-size: 28px;
        }
    }

    .description {
        font-family: var(--font-family-inter-regular);
        color: var(--color-black);
        font-size: 18px;
        margin-bottom: 42px;
        max-width: 934px;
        margin-inline: auto;
        line-height: 21px;
    }

    .tech-and-tools {
        .accordion {
            .accordion-button:focus{
                box-shadow: unset;
            }

            .accordion-button:not(.collapsed) {
                box-shadow: unset;
                color: var(--color-orange);
                background-color: var(--color-white-smoke);
                font-size: 18px;
            }

            .accordion-button.collapsed {
                background-color: var(--color-white);
                color: var(--black);
                font-size: 18px;
            }

            .accordion-button::after {
                background-image: url("./assets/images/svgs/dropdown.svg");
            }
            
            /* Change arrow color when the accordion is expanded */
            .accordion-button:not(.collapsed)::after {
                background-image: url("./assets/images/svgs/dropdown-active.svg");
            }

            .accordion-body{
                .images-grid{
                    display: flex;
                    gap: 2rem;
                    justify-content: center;
                    flex-wrap: wrap;
                    .img{
                        display: flex;
                        flex-direction: column;
                        gap: 8px;
                        justify-content: center;
                        align-items: center;
                        position: relative;
                        img {
                            max-width: 50px;
                            max-height: 50px;
                            width: 100%;
                            height: 100%;
                            display: block;
                        }
                    }

                }
            }

            @media screen and (min-width: 1080px) {
                display: none;
            }
        }

        .listings-and-grid {
            display: grid;
            background-color: var(--color-white);
            position: relative;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;

            .listing {
                overflow-y: auto;
                max-height: 54rem;
                padding-bottom: 20px;
                position: relative;
                overflow: visible;
                
                li {
                    padding-left: 40px;
                    list-style: none;
                    padding-block: 3dvh;
                    border-bottom: 1px solid rgba(112, 112, 112, 0.5);
                    cursor: pointer;
                    font-size: 20px;
                    z-index: 1;
                    transition: all 0.5ms ease-in-out;
                    padding-left: 0;
                    position: relative;

                    h3 {
                        font-family: var(--font-family-inter-bold);
                        text-align: left;
                        color: rgba(0, 0, 0, 0.6);
                        font-weight: 600;
                        font-size: 20px;
                        line-height: clamp(1.65rem, 4.052vw + -0.862rem, 4rem);
                        margin-bottom: 0;
                    }

                    &.active {
                        h3 {
                            color: var(--color-orange);
                        }

                        &::before {
                            background-color: var(--color-orange);
                        }

                        /* &:first-child::before {
                            background: linear-gradient(to bottom, #dadada 0% 12%, var(--color-orange) 12% 100%);
                        } */

                        &:last-child::before {
                            /* background: linear-gradient(to bottom, var(--color-orange) 0% 69%, #dadada 69% 100%); */
                        }

                        &::after {
                            border-left: 10px solid var(--color-orange);
                        }
                    }

                    &::before {
                        content: '';
                        position: absolute;
                        height: 100%;
                        width: 3px;
                        background-color: #dadada;
                        /* left: -20px; */
                        left: -50px;
                        top: 0;
                    }

                    &:last-child::before {
                        /* height: 145%; */
                    }

                    &::after {
                        content: '';
                        position: absolute;
                        top: 50%;
                        /* left: -17px; */
                        left: -47px;
                        transform: translateY(-50%);
                        width: 0;
                        height: 0;
                        border-top: 7px solid transparent;
                        border-bottom: 7px solid transparent;
                        border-left: 10px solid transparent;
                    }

                    @media screen and (max-width: 1600px) {
                        padding-block: 2dvh;
                    }
                    @media screen and (max-width: 480px) {
                        font-size: 1.1rem;
                        padding-block: 1.3dvh;
                    }

                    &:hover{
                        color: var(--color-orange);
                    }
                }

                /* Scrollbar */

                &::-webkit-scrollbar {
                   width: var(--sb-size);
                }

                &::-webkit-scrollbar-track {
                    background: var(--sb-track-color);
                    border-radius: 3px;
                }
                &::-webkit-scrollbar-thumb {
                    background: var(--sb-thumb-color);
                    border-radius: 3px;
                }

                @media screen and (max-width:1600px){
                    max-height:32rem;
                }
            }

            .images-grid {
                grid-template-columns: repeat(4, 1fr);
                grid-auto-rows: max-content;

                padding: 65px 37px 65px 51px;
                background-color: var(--color-white);
                border-radius: var(--border-radius-18);
                row-gap: 4dvh;
                box-shadow: 0px 3px 26px #00000021;

                display: grid;
                max-width: 50%;
                width: 100%;

                position: absolute;
                right: 0px;
                top: 0px;
                bottom: 0px;
              
                overflow-y: auto;
                overflow-x: hidden;
                max-height: 54rem;
              
                /* Scrollbar */

                &::-webkit-scrollbar {
                width: var(--sb-size);
                }

                &::-webkit-scrollbar-track {
                    background: var(--sb-track-color);
                    border-radius: 3px;
                }
                &::-webkit-scrollbar-thumb {
                    background: var(--sb-thumb-color);
                    border-radius: 3px;
                }

                .img {
                    display: flex;
                    flex-direction: column;
                    gap: 8px;
                    justify-content: center;
                    align-items: center;
                    position: relative;
                 
                   
                    opacity: 0; 
                    transform: scale(0.5); 
                    transition: opacity 0.3s ease, transform 0.3s ease; 

                    &.active{
                        animation: fadeInImages 0.5s forwards; 
                    }

                    p {
                        font-size: 18px;
                        font-family: var(--font-family-inter-bold);
                        line-height: 23px;
                        text-align: center;
                        margin-bottom: 0px;
                        font-weight: 700;
                        padding-inline: 1rem;

                        @media screen and (max-width: 768px) {
                            font-size: 14px;
                        }
                    }
                    @media screen and (min-width: 1280px) {
                        &:not(:nth-child(4n)) {
                            border-right: 2px solid var(--color-platinum);
                        }
                    }
                    @media screen and (max-width: 1280px) {
                        &:not(:nth-child(3n)) {
                            border-right: 2px solid var(--color-platinum);
                        }
                    }

                  

                  

                    img {
                        max-width: 100px;
                        max-height: 100px;
                        width: 100%;
                        height: 100%;
                        display: block;

                        @media screen and (max-width: 1600px) {
                            max-width: 70px;
                            max-height: 70px;
                        }

                        @media screen and (max-width: 768px) {
                            max-width: 50px;
                            max-height: 50px;
                        }
                    }
                }

                @media screen and (max-width:1600px){
                    max-height: 33rem;
                }
                @media screen and (max-width: 1280px) {
                    grid-template-columns: repeat(3, 1fr);

                    padding-inline: 1rem;
                }
              
              
                

            }
            border-radius: var(--border-radius-18);
            @media screen and (max-width: 1080px) {
                display: none;
            }
        }

        @media screen and (max-width: 1600px) {
            /* padding-inline: 60px; */
        }

        @media screen and (max-width: 768px) {
            padding-block: 30px;
        }
        @media screen and (max-width: 600px) {
            padding-block: 0px;
        }
    }
}

.portfolio-section {
    background-color: var(--color-white);
    margin-top: 40px;
    /* padding-inline: 62px; */
    padding-top: 40px;
    padding-bottom: 31px;

    .owl-nav {
        position: absolute;
        top: 47%;
        left: -22px;
        right: -22px;
        transform: translate(0, -41%);
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 0;

        .owl-prev, .owl-next {
            width: 49px;
            height: 49px;
            border-radius: 50%;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background-color: var(--color-orange) !important;
            transition: all 0.15s;
            position: relative;
            margin: 0;

            &:hover {
                background-color: var(--color-white) !important;
                border: 1px solid var(--border-orange) !important;

                span {
                    color: var(--color-orange);
                }
            }

            span {
                color: var(--color-black);
                font-size: 45px;
                position: absolute;
                top: 37%;
                left: 50%;
                transform: translate(-50%, -50%);
                transition: all 0.15s;
            }
        }

        .owl-next {
            span {
                left: 55%;
            }
        }

        @media screen and (max-width: 950px) {
            top: 42%;
            transform: translate(0, -42%);
        }

        @media screen and (max-width: 600px) {
            left: -15px;
            right: -15px;
        }

        @media screen and (max-width: 550px) {
            display: none;
        }
    }

    .owl-dots {
        margin-top: 20px;
    }

    .heading {
        font-family: var(--font-family-eurostile-semi-bold);
        color: var(--color-orange);
        font-size: 42px;
        margin-bottom: 30px;

        @media screen and (max-width: 600px) {
            font-size: 28px;
        }
    }

    .tabs-content-container {
        display: flex;
        overflow-x: hidden;
        scroll-behavior: smooth;
        transition: all 0.15s;
        overflow: visible;

        .tab-content {
            width: 100%;
            flex-shrink: 0;
            display: flex;
            align-items: stretch;
            gap: 23px;

            .left-content, .right-content {
                flex: 1;
                background-color: var(--color-white);
                border-radius: 12px;
                padding: 30px;
            }

            .left-content {
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 35px;
                background-color: var(--color-white-smoke);

                .image-container {
                    height: 310px;
                    border-radius: 28px;

                    img {
                        width: 100%;
                        height: 100%;
                    }

                    @media screen and (max-width: 950px) {
                        height: auto;
                    }
                }

                .image-row {
                    display: flex;
                    align-items: stretch;
                    gap: 20px;

                    .item-left {
                        padding: 50px 20px;
                        border-radius: 18px;
                        background-color: var(--color-white);
                        display: flex;
                        align-self: center;
                        justify-content: center;
                        width: 120px;
                        flex: 1;
                        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
                        height: 145px;

                        &.bh-logo {
                            @media screen and (max-width: 600px) {
                                img {
                                    width: 94px;
                                    object-fit: contain;
                                }
                            }

                            @media screen and (max-width: 500px) {
                                padding: 40px 20px;
                                img {
                                    width: 70px;
                                }
                            }

                            @media screen and (max-width: 430px) {
                                padding: 46px 20px;
                            }

                            @media screen and (max-width: 400px) {
                                padding: 40px 20px;
                            }
                        }

                        img {
                            object-fit: contain;

                            @media screen and (max-width: 600px) {
                                object-fit: none;
                            }

                            @media screen and (max-width: 430px) {
                                object-fit: contain;
                            }
                        }
                    }

                    .item-right {
                        padding: 50px 40px;
                        border-radius: 18px;
                        background-color: var(--color-pale-grey-2);
                        display: flex;
                        align-self: center;
                        justify-content: center;
                        width: 320px;
                        flex: 2;
                        box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2);
                        height: 145px;

                        &.bh-text-logo, &.x-text-logo {
                            img {
                                object-fit: cover;
                            }

                            @media screen and (max-width: 600px) {
                                img {
                                    width: 160px;
                                    object-fit: cover;
                                }
                            }

                            @media screen and (max-width: 500px) {
                                padding: 40px 20px;
                                img {
                                    width: 125px;
                                }
                            }

                            @media screen and (max-width: 430px) {
                                padding: 43px 20px;
                            }

                            @media screen and (max-width: 400px) {
                                padding: 36px 20px;
                            }
                        }

                        &.x-text-logo {
                            img {
                                object-fit: contain;
                            }

                             @media screen and (max-width: 600px) {
                                img {
                                    width: 260px;
                                    object-fit: cover;
                                }
                            }
                        }

                        img {
                            object-fit: contain;
                        }

                        @media screen and (max-width: 600px) {
                            img {
                                object-fit: none;
                            }
                        }
                        @media screen and (max-width: 430px) {
                            img {
                                object-fit: contain;
                            }
                        }
                    }

                    @media screen and (max-width: 600px) {
                        flex-direction: column;

                        .item-left, .item-right {
                            flex: 1;
                            width: 100%;
                        }
                    }
                }
            }

            .right-content {
                flex: 1;
                background-color: var(--color-white-smoke);

                .logo-container {
                    width: 219px;
                    margin-bottom: 26px;

                    img {
                        width: 100%;
                        height: auto;
                    }
                }

                .title {
                    font-family: var(--font-family-inter-bold);
                    font-size: 22px;
                    font-weight: bold;
                    color: var(--color-black);
                    margin-bottom: 13px;
                    text-align: left;
                }

                .description {
                    font-family: var(--font-family-inter-regular);
                    font-size: 18px;
                    color: var(--color-black);
                    line-height: 22px;
                    margin-bottom: 105px;
                    text-align: left;
                }

                .features-container {
                    display: flex;
                    flex-direction: column;
                    gap: 18px;

                    .feature {
                        display: flex;
                        align-items: center;
                        gap: 18px;

                        .icon {
                            width: 46px;
                            height: 46px;

                            img {
                                width: 100%;
                                height: auto;
                            }
                        }

                        .feature-text {
                            font-family: var(--font-family-inter-bold);
                            color: var(--color-black);
                            font-weight: bold;
                            line-height: 22px;
                            max-width: 262px;
                            text-align: left;
                            margin-bottom: 0;
                        }
                    }
                }
            }

            @media screen and (max-width: 950px) {
                flex-direction: column;
            }
        }
    } 

}

.how-we-work {
    padding-block: 41px;
    background-color: var(--color-white-smoke);

    .heading {
        font-family: var(--font-family-eurostile-semi-bold);
        color: var(--color-orange);
        font-size: 42px;
        line-height: 50px;
        margin-bottom: 0;

        span {
            color: var(--color-black);
        }

        @media screen and (max-width: 600px) {
            font-size: 28px;
        }
    }

    .guide-text {
        font-family: var(--font-family-inter-bold);
        font-weight: bold;
        font-size: 22px;
        margin-bottom: 69px;
    }

    .description {
        font-family: var(--font-family-inter-regular);
        color: var(--color-black);
        font-size: 18px;
        margin-bottom: 42px;
        max-width: 934px;
        margin-inline: auto;
        line-height: 21px;
    }

    .grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(538px, 1fr));
        column-gap: 24px;
        row-gap: 32px;

        .grid-item {
            background-color: var(--color-white);
            border-radius: 18px;
            padding: 33px;
            padding-right: 40px;
            box-shadow: 0px 3px 26px #00000021;

            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px;

            .text-content {
                text-align: left;

                .step {
                    font-family: var(--font-family-inter-bold);
                    color: var(--color-orange);
                    font-size: 18px;
                    margin-bottom: 14px;
                }

                .title {
                    font-family: var(--font-family-inter-bold);
                    color: var(--color-black);
                    font-weight: bold;
                    font-size: 22px;
                    line-height: 26px;
                    margin-bottom: 14px;
                }

                .step-text {
                    font-family: var(--font-family-inter-regular);
                    color: var(--color-black);
                    font-size: 18px;
                    line-height: 21px;
                    max-width: 237px;

                    @media screen and (max-width: 1176px) {
                        /* max-width: calc(100% - 320px); */
                    }

                    @media screen and (max-width: 1140px) {
                        max-width: 500px;
                    }

                    @media screen and (max-width: 700px) {
                        max-width: 237px;
                    }

                    @media screen and (max-width: 600px) {
                        max-width: 100%;
                    }
                }
            }

            .image-content {
                width: 85px;

                img {
                    width: 100%;
                    height: auto;
                }

                @media screen and (max-width: 600px) {
                    display: none;
                }
            }

            @media screen and (max-width: 600px) {
                padding: 20px;
                border-radius: 12px;
            }
        }

        @media screen and (max-width: 600px) {
            grid-template-columns: 1fr;
        }
    }
}

.contact-us {
    height: 635px;
    position: relative;
    margin-bottom: 200px;

    &.form-error {
        @media screen and (max-width: 1100px) {
            margin-bottom: 445px;
        }

        @media screen and (max-width: 850px) {
            margin-bottom: 620px;
        }
    }

    .header {
        height: 357px;
        background-image: url("./assets-ppc/images/pngs/contact-us-bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top;
        padding-top: 40px;
        text-align: center;

        .heading {
            font-family: var(--font-family-eurostile-semi-bold);
            color: var(--color-black);
            font-size: 42px;
            margin-bottom: 14px;

            @media screen and (max-width: 600px) {
                font-size: 28px;
            }
        }
    
        .description {
            font-family: var(--font-family-inter-regular);
            color: var(--color-black);
            font-size: 18px;
            margin-bottom: 42px;
            max-width: 934px;
            margin-inline: auto;
            line-height: 21px;
        }

        @media screen and (max-width: 950px) {
            padding-inline: 20px;
        }
    }

    .form-container {
        position: absolute;
        top: 135px;
        left: 50%;
        transform: translate(-50%);
        width: 100%;
        max-width: 1023px;
        /* height: 521px; */
        height: 660px;
        background-color: var(--color-white);
        border-radius: 32px;
        padding: 45px;
        box-shadow: 0px 3px 26px #00000033;
        display: flex;
        flex-direction: column;
        gap: 45px;

        .form-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 28px;

            &.submit-row {
                justify-content: space-between;
            }

            .form-field {
                display: flex;
                flex-direction: column;
                gap: 8px;
                width: 100%;
                max-width: 280px;

                &.text-area {
                    max-width: 100%;
                }

                .title {
                    font-family: var(--font-family-inter-bold);
                    font-weight: bold;
                    font-size: 22px;
                    margin-bottom: 0;
                }

                .select-wrapper {
                    position: relative;

                    &::after {
                        content: "▼";
                        font-size: 12px;
                        position: absolute;
                        right: 15px;
                        top: 50%;
                        transform: translateY(-50%);
                        pointer-events: none;
                        color: #000;
                    }
                }

                #mobile, #mobilePhone {
                    padding-left: 105px;
                }

                .iti-arrow {
                    right: -7px;
                }

                .form-input {
                    padding: 16px 12px;
                    border: 1px solid #E2E2E2;
                    outline: none;
                    font-size: 18px !important;
                    color: var(--color-black);
                    border-radius: 12px;
                    font-weight: 500;
                    width: 100%;
                    
                    &.textarea {
                        resize: none;
                    }

                    &.select {
                        font-weight: 400;
                        appearance: none;
                        -webkit-appearance: none; /* Safari */
                        -moz-appearance: none; /* Firefox */
                    }


                    &.number {
                        padding-left: 85px;
                    }

                    &::placeholder {
                        color: #808080;
                        font-size: 18px !important;
                        font-weight: 500;
                    }

                    &:focus {
                        border-color: var(--color-black);
                    }
                }

                @media screen and (max-width: 850px) {
                    max-width: 100%;
                }
            }

            .button {
                max-width: max-content;
                display: flex;
                align-items: center;
                gap: 10px;
                font-size: 24px;
                padding: 7px 15px;
                font-size: 18px;

                &:hover {
                    svg {
                        path {
                            fill: #000;
                            stroke: #000;
                        }
                    }
                }

                svg {
                    transform: rotate(45deg);
                    width: 28px;
                    height: 28px;

                    path {
                        fill: #fff;
                        stroke: #fff;
                    }
                }
            }
        }

        @media screen and (max-width: 1100px) {
            max-width: 720px;
            height: max-content;
        }

        @media screen and (max-width: 850px) {
            max-width: 500px;
            padding: 30px;
            border-radius: 20px;
        }

        @media screen and (max-width: 600px) {
            max-width: 400px;
        }

        @media screen and (max-width: 480px) {
            max-width: 350px;
            padding: 20px;
        }
    }

    @media screen and (max-width: 1100px) {
        margin-bottom: 325px;
    }

    @media screen and (max-width: 850px) {
        /* margin-bottom: 415px; UI Value*/ 
        margin-bottom: 460px; 
    }
}

.partnership-recognition {
    padding-block: 40px;
    background-color: var(--color-white);

    .partners-content {
        display: flex;
        align-items: center;
        gap: 45px;
        background-color: var(--color-white-smoke);
        border-radius: 18px;

        .slab-container {
            padding: 46px 24px;
            background-color: var(--color-white);
            box-shadow: 0px 3px 26px #00000029;
            border-radius: 18px;

            .title {
                font-family: var(--font-family-inter-bold);
                color: var(--border-orange);
                margin-bottom: 16px;
                font-size: 22px;
                font-weight: bold;
            }

            .description {
                font-family: var(--font-family-inter-regular);
                color: var(--color-black);
                font-size: 18px;
                margin-bottom: 0;
            }
        }

        .logos-container {
            display: flex;
            align-items: center;
            gap: 46px;
            padding-block: 24px;

            .logo {
                width: 163px;

                img {
                    width: 100%;
                    height: auto;
                }
            }
        }

        @media screen and (max-width: 1366px) {

            .slab-container {
                /* border-top-left-radius: 0; */
                /* border-top-right-radius: 0; */
                padding: 24px;
                width: 355px;
            }

            .logos-container {
                justify-content: center;
                margin-left: auto;
                margin-right: 30px;

                .logo {
                    width: 135px;
                }
            }
        }

        @media screen and (max-width: 1366px) {
            .logos-container {
                .logo {
                    width: 115px;
                }
            }
        }

        @media screen and (max-width: 1366px) {
            .logos-container {
                .logo {
                    width: 115px;
                }
            }
        }

        @media screen and (max-width: 1170px) {
            .logos-container {
                .logo {
                    width: 95px;
                }
            }
        }

        @media screen and (max-width: 1090px) {

            .slab-container {
                padding: 46px 24px;
            }

            .logos-container {
                flex-wrap: wrap;

                .logo {
                    width: 115px;
                }
            }
        }

        @media screen and (max-width: 865px) {

            .slab-container {
                padding: 54px 24px;
                .title {
                    font-size: 18px;
                }

                .description {
                    font-size: 16px;
                }
            }

            .logos-container {
                .logo {
                    width: 95px;
                }
            }
        }

        @media screen and (max-width: 555px) {
            .logos-container {
                .logo {
                    width: 75px;
                }
            }
        }

        @media screen and (max-width: 511px) {

            .slab-container {
                padding: 94px 24px;
                .title {
                    font-size: 18px;
                }

                .description {
                    font-size: 16px;
                }
            }
        }
    }
}

.thankyou-section {
    padding-block: 70px;
    padding-top: 150px;

    .main-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;

        .heading {
            font-family: var(--font-family-inter-bold);
            color: var(--color-orange);
            font-size: 52px;
            line-height: 63px;
            margin-bottom: 12px;
            font-weight: bold;

            span {
                font-family: var(--font-family-eurostile-semi-bold);
                color: var(--color-black);
            }

            @media screen and (max-width: 600px) {
                font-size: 28px;
                line-height: 40px;
            }
        }

        .description {
            font-size: 18px;
            font-family: var(--font-family-inter-regular);
            line-height: 21px;
            max-width: 680px;
            margin-bottom: 70px;
        }

        .button {
            font-size: 24px;
            font-family: var(--font-family-inter-bold);

            max-width: max-content;
            margin-inline: auto;
            display: flex;
            align-items: center;
            gap: 40px;

            &:hover {
                svg {
                    path {
                        fill: #fff;
                        stroke: #fff;
                    }
                }
            }

            svg {
                transform: rotate(45deg);
                
                path {
                    fill: #000;
                    stroke: #000;
                }
            }

            @media screen and (max-width: 600px) {
                font-size: 18px;

                svg {
                    display: none;
                }
            }
        }
    }

    @media screen and (max-height: 830px) {
        padding-top: 90px;
    }
}

.location-section {
    padding: 128px 0px 128px 0px;
    overflow: hidden;
    background-color: #F9F9FB;


    position: relative;

    &::before {
        content: url("./assets-ppc/images/pngs/location-left-bg.png");
        position: absolute;
        left: 0;
        bottom: 0;
    }
    &::after {
        content: url("./assets-ppc/images/pngs/location-right-bg.png");
        /* right: 0; */
        right: -70px;
        bottom: 0;
        position: absolute;
    }

    ul {
        list-style-type: none;
        padding: 0;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 9%;

        .logo-list-item {
            @media screen and (max-width: 820px) {
                width: 100%;
            }
            img {
                width: 251px;
                height: 32px;
            }
            p {
                max-width: 100%;
                width: 351px;
                color: var(--color-black);
                font-size: 18px;
                line-height: 23px;
                font-family: var(--font-family-inter-regular);
                font-weight: 400;
                margin-top: 41px;
                @media screen and (max-width: 820px) {
                    width: 100%;
                }
            }

            @media screen and (max-width: 1105px) {
                width: 100%;

                p {
                    width: 100%;
                }
            }
        }
        li {
            margin-top: 20px;

            .header {
                font-family: var(--font-family-eurostile-semi-bold);
                font-size: 24px;
            }
            .contact-us-listing {
                display: flex;
                flex-direction: column;
                gap: 31px;
                margin-top: 20px;
                span,
                a {
                    font-family: var(--font-family-inter-regular);
                    font-weight: 400;
                    font-size: 18px;
                    line-height: 23px;
                    text-decoration: none;
                    color: var(--color-black);
                }
                p {
                    color: var(--color-gray);
                    font-size: 18px;
                    line-height: 23px;
                    font-family: var(--font-family-inter-regular);
                    font-weight: 400;
                }
            }
            ul {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 0px;
                li {
                    display: flex;
                    flex-direction: row;
                    gap: 8px;
                    align-items: center;
                    width: 100%;
                    cursor: pointer;
                    padding: 12px 0 12px 10px;
                    margin-top: 0;

                    &.selected-list {
                        background-color: #eeeeee;
                        border: 1px solid #d6d6d6;
                        border-radius: var(--border-radius-12);
                        min-width: 327px;
                        position: relative;
                        /* left: -10px; */
                        padding: 12px 0 12px 10px;
                        @media screen and (max-width: 820px) {
                            min-width: 260px;
                        }
                    }
                    img {
                        width: 42px;
                        height: 43px;
                    }
                    span {
                        font-family: var(--font-family-inter-regular);
                        font-weight: 400;
                        font-size: 24px;
                        line-height: 30px;
                    }
                }
            }
        }

        .uk-address, .usa-address, .uae-address, .Pakistan-address {
            display: none;
			width: 100%;
			max-width: 340px;
            &.show {
                display: block;
            }
        }

        .countries-flag-container, .uk-address, .usa-address, .uae-address, .Pakistan-address {
            @media screen and (max-width: 1105px) {
                display: none !important;
            }
        }

        @media screen and (max-width: 1310px) {
            gap: 10px;
            justify-content: space-between;
        }
    }

    .accordion {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 13px;

        display: none;

        @media screen and (max-width: 1105px) {
            display: flex;
        }
    }

    .accordion-item {
        border: none;
    }

    .accordion-item:last-of-type .accordion-button.collapsed {
        border-bottom-right-radius: 12px;
        border-bottom-left-radius: 12px;
    }

    .accordion-button {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 24px;
        font-family: var(--font-family-inter-regular);
        padding: 10px;

        img {
            width: 40px;
        }
    }

    .accordion-button:focus {
        box-shadow: none;
    }

    .accordion-button::after {
        display: none;
    }

    .accordion-header .accordion-button {
        background-color: #EEEEEE;
        color: var(--color-black);
        border-radius: 12px;
        border: 1px solid #D6D6D6;
    }

    .accordion-body {
        background-color: #F9F9FB;
        padding: 10px;

        .contact-us-listing {
            display: flex;
            flex-direction: column;
            gap: 31px;
            margin-top: 20px;
            span,
            a {
                font-family: var(--font-family-inter-regular);
                font-weight: 400;
                font-size: 18px;
                line-height: 23px;
                text-decoration: none;
                color: var(--color-black);
            }
            p {
                color: var(--color-gray);
                font-size: 18px;
                line-height: 23px;
                font-family: var(--font-family-inter-regular);
                font-weight: 400;
            }
        }
    }

    @media screen and (max-width: 1105px) {
        padding: 54px 0px 54px 0px;
        
        &::after,
        &::before {
            content: none;
        }
    }
}

.footer {
    padding-block: 19px;
    padding-inline: 62px;
    background-color: var(--color-white-smoke);
    margin-top: 33px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;

    &.thankyou-page {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .logo-container {
        width: 250px;

        img {
            width: 100%;
            height: auto;
        }
    }

    .copyright {
        font-family: var(--font-family-inter-regular);
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 0;
		text-align: center;
    }

    @media screen and (max-width: 510px) {
        text-align: center;
    }
}

.button {
    background-color: black;
    color: white;
    border: none;
    padding: 11px 23px;
    cursor: pointer;
    border-radius: var(--border-radius-8);
    font-family: var(--font-family-inter-bold);
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: all 0.15s;

    &.primary {
        background-color: black;
        color: white;

        &:hover {
            background-color: var(--color-white);
            color: var(--color-black);
            border: 1px solid var(--color-black);
        }
    }

    &.secondary {
        background-color: var(--color-orange);
        color: var(--color-black);

        &:hover {
            background-color: var(--color-white);
            color: var(--color-orange);
            border: 1px solid var(--color-orange);
        }
    }

    &.invert {
        background-color: var(--color-white);
        color: var(--color-black);
        border-color: var(--color-black);

        &:hover {
            background-color: var(--color-black);
            color: var(--color-white);
            border-color: transparent;
        }
    }

    /* @media screen and (max-width: 1280px) {
        margin-inline: auto 1rem;
        padding: 0.5rem 1.5rem;
    } */
}

.checkbox {
    user-select: none;
    display: flex;

    .checkbox__svg-wrapper {
        position: relative;
        display: block;
        float: left;
        min-width: 20px;
        min-height: 20px;
        border-radius: 4px;
        border: 1px solid var(--color-black);
        transition: all 0.15s ease;
        background-color: var(--color-white);

        svg {
            position: absolute;
            width: 9px;
            height: 9px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke: #fff;
            stroke-width: 2;
            stroke-dasharray: 17;
            stroke-dashoffset: 17;
            /* transform: translate3d(0, 0, 0); */
        }
    }

    .checkbox__svg-wrapper + span {
        float: left;
        font-size: 17px;
    }

    label {
        display: flex;
        align-items: center;
        gap: 11px;
        cursor: pointer;
    }

    input[type="checkbox"] {
        display: none;
        visibility: hidden;
    }

    input[type="checkbox"]:checked + .checkbox__svg-wrapper {
        background-color: var(--color-orange);
        background-image: linear-gradient(var(--color-orange), var(--color-orange));
        border: 1px solid transparent;
    }

    input[type="checkbox"]:checked + .checkbox__svg-wrapper svg {
        stroke-dashoffset: 0;
        transition: all 0.15s ease;
    }
}

.fixed {
    position: fixed;
    top: -1px;
    left: 0;
    right: 0;
    z-index: 10;
}

.small-header {
    padding-block: 10px;

    .logo img {
        height: 30px;
    }

    .button {
        padding: 5px 11px;
    }
}

/* From Uiverse.io by JulanDeAlb */
.hamburger {
    cursor: pointer;
    display: none;
    @media only screen and (max-width: 1280px) {
        display: inline-block;
    }
}

.hamburger input {
    display: none;
}

.hamburger svg {
    /* The size of the SVG defines the overall size */
    height: 3em;
    /* Define the transition for transforming the SVG */
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* PHone number */
.input-group > .intl-tel-input.allow-dropdown {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
}

.input-group > .intl-tel-input.allow-dropdown > .flag-container {
    z-index: 4;
}

.iti-flag {
    background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.6/img/flags.png");
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min--moz-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2 / 1),
    only screen and (min-device-pixel-ratio: 2),
    only screen and (min-resolution: 192dpi),
    only screen and (min-resolution: 2dppx) {
    .iti-flag {
        background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.6/img/flags@2x.png");
    }
}
.intl-tel-input.separate-dial-code .selected-flag {
    background-color: transparent !important;
}
.intl-tel-input.separate-dial-code .selected-dial-code {
    font-size: 18px;
    font-weight: 700;
    @media only screen and (max-width: 767px) {
        font-size: 16px;
    }
}
.intl-tel-input .selected-flag .iti-arrow {
    border-style: solid;
    border-width: 0.13em 0.13em 0 0;
    content: "";
    display: inline-block;
    height: 0.5em;
    right: -2px;
    position: absolute;
    top: 21px;
    transform: rotate(135deg);
    vertical-align: top;
    width: 0.5em;
    border-top: 2px solid rgba(0, 0, 0, 0.4);
    border-right: 2px solid rgba(0, 0, 0, 0.4);
    height: 10px;
    width: 10px;
}

/* Utility classes  */
.mr-18 {
    margin-right: 18px;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@keyframes fadeInImages {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.mobile-app {
    .main-container {
        width: 100%;
        max-width: 100%;
    }
    
    .hero-section {
        .main-container {
            .hero-content {
                .text-content {
                    .title {
                        font-family: var(--font-family-inter-bold);
                        font-size: 42px;
                        font-weight: bold;
                    }
					.sub-title{
						font-weight: 400;
					}

                    @media screen and (max-width: 600px) { 
                        .title {
                            font-size: 32px;
                        }

                        .sub-title {
                            font-size: 16px;
                        }

                        button {
                            font-size: 16px;
                        }
                    }
                }
            }
            .image-content {
                flex: 1;
                position: relative;
                display: flex;
                justify-content: center;
                height: unset;
    
                .model {
                    position: relative;
                    bottom: unset;
                    right: unset;
                    width: 69%;
                }

                @media screen and (max-width: 855px) {
                    display: none;
                }
            }

            @media screen and (min-width: 1601px) and (max-width: 3000px) {
                .image-content {
                    padding-top: 80px;
                    .model {
                        width: 74%;
                    }
                }

                .hero-content {
                    .text-content {
                        .title {
                            font-size: 52px;
                            line-height: 62px;
                            max-width: unset;
                            margin-bottom: 15px;

                            span {
                                display: inline;
                            }
                        }
                        .sub-title {
                            font-size: 24px;
                            margin-bottom: 40px;
                        }
                        button {
                            font-size: 24px;
                        }
                    }
                }
            }

            @media screen and (min-width: 1280px) and (max-width: 1600px) {
                .image-content {
                    .model {
                        /* width: 74%; */
                        width: 69%;
                    }
                }
            }
        }

        @media screen and (max-width: 855px) {
            padding-top: 110px;
        }

        @media screen and (max-width: 600px) {
            padding-bottom: 35px;
        }
    }

    .our-experience-flex {
        padding-bottom: 45px;
        
        .main-container {
            .flex-items-container {
                display: grid;
                /* grid-template-columns: 1fr 1fr 1fr; */
                grid-template-columns: auto auto auto;
                row-gap: 34px;
                justify-content: space-between;

                .flex-item {
                    display: flex;
                    align-items: center;
                    gap: 10px;

                    p {
                        margin-bottom: 0;
                        font-size: 18px;
                        line-height: 21px;
                        font-weight: bold;

                        @media screen and (min-width: 1601px) and (max-width: 3000px) {
                            font-size: 24px;
                        }
                    }
                }

                @media screen and (max-width: 1070px) {
                    grid-template-columns: 1fr 1fr;
                }

                @media screen and (max-width: 680px) {
                    .flex-item {
                        p {
                            font-size: 16px;
                        }
                    }
                }

                @media screen and (max-width: 600px) {
                    grid-template-columns: 1fr;
                }
            }
        }
    }

    .client-and-logos {
        padding-block: 23px;

        .marquee {
            padding-top: 0;
            display: flex;
            align-items: center;
            position: relative;

            .marquee-title {
                padding-right: 27px;
                z-index: 1;
                background-color: var(--color-white-smoke);
                font-family: var(--font-family-inter-bold);
                padding-block: 27px;
                font-size: 28px;
                font-weight: bold;
                border-right: 2px solid #B1B1B1;
                position: absolute;
                left: 0;
                padding-left: 62px;

                @media screen and (max-width: 1020px) {
                    padding-left: 30px;
                }

                @media screen and (max-width: 600px) {
                    padding-left: 20px;
                }

                @media screen and (max-width: 500px) {
                    display: none;
                }
            }
        }
    }

    .why-work-with-us {
        padding-top: 78px;
        margin-bottom: 62px;
        text-align: center;

        .main-container {
            .heading {
                font-size: 42px;
                color: var(--color-orange);
                font-family: var(--font-family-inter-bold);
                line-height: 51px;
                font-weight: bold;
                margin-bottom: 75px;
            }

            .points-container {
                display: grid;
                /* grid-template-columns: repeat(auto-fit, minmax(394px, 1fr)); */
                grid-template-columns: 1fr 1fr 1fr;
                column-gap: 16px;
                row-gap: 49px;

                .point-container {
                    padding: 38px 22px 24px 30px;
                    border-radius: 20px;
                    background-color: var(--color-pale-grey-3);
                    text-align: left;
                    position: relative;

                    .point-icon {
                        position: absolute;
                        top: -24px;
                        left: 30px;
                        width: 47px;
                        height: 47px;

                        img {
                            width: 100%;
                            height: auto;
                        }
                    }

                    .title {
                        font-size: 24px;
                        font-weight: bold;
                        font-family: var(--font-family-inter-bold);
                    }

                    .description {
                        font-size: 18px;
                        font-family: var(--font-family-inter-regular);
                        margin-bottom: 0;
                    }
                }

                @media screen and (max-width: 950px) {
                    grid-template-columns: 1fr 1fr;
                }

                @media screen and (max-width: 650px) {
                    grid-template-columns: 1fr;
                }
            }
        }

        @media screen and (max-width: 600px) {
            margin-bottom: 0;
        }
    }

    .our-services {
        padding-top: 62px;
        padding-bottom: 62px;

        .main-container {
            .services-container {
                border-radius: 32px;
                box-shadow: 0px 3px 26px #00000033;
                height: 645px;
                display: flex;
                overflow: hidden;

                .image-container {
                    background-image: url("./assets-ppc/mobile/our-services/our-servies-bg.png");
                    width: 100%;
                    max-width: 386px;
                    height: 100%;

                    @media screen and (max-width: 900px) {
                        display: none;
                    }
                }
                
                .content-container {
                    flex: 1;
                    padding-top: 78px;
                    padding-right: 38px;
                    padding-left: 60px;
                    background-color: #F9F9F9;
                    height: 100%;
                    overflow-y: auto;
                    scrollbar-width: none;
                    padding-bottom: 20px;

                    .heading {
                        font-family: var(--font-family-inter-bold);
                        font-weight: bold;
                        font-size: 42px;
                        margin-bottom: 64px;
                        
                        span {
                            color: var(--color-orange);
                        }
                    }

                    .services {
                        display: grid;
                        grid-template-columns: repeat(auto-fit, minmax(348px, 1fr));
                        column-gap: 33px;
                        row-gap: 26px;

                        .service {
                            border-radius: 12px;
                            background-color: var(--color-white);
                            padding: 20px;
                            display: flex;
                            align-items: center;
                            gap: 12px;

                            .icon {

                            }

                            .title {
                                font-size: 18px;
                                font-family: var(--font-family-inter-bold);
                                font-weight: 600;
                                margin-bottom: 0;
                            }
                        }
                    }

                    @media screen and (max-width: 900px) {
                        padding-left: 38px;
                        padding-top: 38px;

                        .heading {
                            margin-bottom: 34px;
                        }
                    }

                    @media screen and (max-width: 500px) {
                        .services {
                            grid-template-columns: 1fr;
                        }
                    }
                }

                @media screen and (max-width: 900px) {
                    border-radius: 22px;
                }
            }
        }

    }

    .industries {
        background-color: var(--color-white-smoke);
        padding-top: 44px;
        padding-bottom: 77px;

        .main-container {
            text-align: center;

            .heading {
                font-family: var(--font-family-inter-bold);
                font-size: 42px;
                color: var(--color-orange);
                margin-bottom: 21px;
                line-height: 51px;
                font-weight: bold;
            }
            
            .description {
                font-family: var(--font-family-inter-regular);
                font-size: 18px;
                line-height: 21px;
                margin-bottom: 50px;
                font-weight: 400;
            }

            .industries-container {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 20px;
                flex-wrap: wrap;

                .industry {
                    border-radius: 12px;
                    background-color: var(--color-white);
                    padding: 28px 18px;
                    display: flex;
                    align-items: center;
                    gap: 12px;

                    .icon {

                    }

                    .title {
                        font-size: 18px;
                        font-family: var(--font-family-inter-regular);
                        font-weight: 600;
                        margin-bottom: 0;
                    }
                }

                @media screen and (max-width: 700px) {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                }

                @media screen and (max-width: 700px) {
                    grid-template-columns: 1fr;
                }
            }
        }
    }

    .tech-stack {
        padding-top: 44px;
        padding-bottom: 77px;

        .main-container {
            text-align: center;

            .heading {
                font-family: var(--font-family-inter-bold);
                font-size: 42px;
                color: var(--color-orange);
                margin-bottom: 21px;
                line-height: 51px;
                font-weight: bold;
            }
            
            .description {
                font-family: var(--font-family-inter-regular);
                font-size: 18px;
                line-height: 21px;
                margin-bottom: 50px;
                font-weight: 400;
            }

            .stacks-container {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 40px;
                flex-wrap: wrap;

                .stack {
                    border-radius: 12px;
                    box-shadow: 0px 3px 6px #00000029;
                    padding: 13px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    .icon {
                        width: 70px;
                        height: 70px;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .title {
                        font-family: var(--font-family-inter-regular);
                        font-size: 18px;
                        margin-bottom: 0;
                    }
                }
            }
        }
    }

    .portfolio-section {
        background-color: var(--color-white-smoke);

        .main-container {
            text-align: center;

            .heading {
                font-family: var(--font-family-inter-bold);
                font-weight: bold;
            }

            .tabs-content-container {
				position: relative;
				z-index: 0;
                .owl-carousel {
                    .owl-item {
                        img {
                            @media screen and (max-width: 600px) {
                                width: unset;
                            }
                        }
                    }
                }
                .left-content {
                    background-color: var(--color-white);

                    .image-row {
                        .item-left {
                            padding: 0;
                        }

                        .item-right {
                            padding: 36px;

                            &.centerpoint {
                                padding: 44px;
                            }

                            &.reteam {
                                padding: 52px;
                            }
                        }
                    }
                }
        
                .right-content {
                    background-color: var(--color-white);

                    .features-container {
                        .feature {
                            .feature-text {
                                max-width: unset;
                            }

                            .icon {
                                min-width: 46px;
                                min-height: 46px;
                            }
                        }
                    }
                }
            }
        }
    }

    .how-it-works {
        padding-top: 44px;
        padding-bottom: 77px;

        .main-container {
            text-align: center;

            .heading {
                font-family: var(--font-family-inter-bold);
                font-size: 42px;
                margin-bottom: 8px;
                line-height: 51px;
                font-weight: bold;

                span {
                    color: var(--color-orange);
                }
            }
            
            .description {
                font-family: var(--font-family-inter-regular);
                font-size: 22px;
                line-height: 21px;
                margin-bottom: 50px;
                font-weight: bold;
            }

            .steps-container {
                display: flex;
                align-items: center;
                /* align-items: stretch; */
                /* width: 100%; */
                /* height: 100%; */
                /* overflow: hidden; */

                .step {
                    border-radius: 18px;
                    padding: 28px 27px 64px 28px;
                    flex: 1;
                    /* flex: 1 1 0; */
                    /* height: 225px; */
                    height: 250px;
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 14px;
                    text-align: left;

                    /* clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%); */

                    &:nth-child(2), &:nth-child(3) {
                        border-radius: 0;
                        /* clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%, 20% 50%); */
                        clip-path: polygon(0 0, 95% 0, 100% 50%, 95% 100%, 0 100%, 10% 50%);
                        /* margin-left: -7%; */
                        margin-left: -3%;
                        padding-left: 4%;
                        /* z-index: -1; */
                    }

                    &:nth-child(4) {
                        border-radius: 0;
                        border-top-right-radius: 18px;
                        border-bottom-right-radius: 18px;
                        clip-path: polygon(0 0, 100% 0, 100% 100%, 95% 100%, 0 100%, 10% 50%);
                        margin-left: -3%;
                        padding-left: 4%;
                    }

                    &:nth-child(even) {
                        background-color: var(--color-pale-grey-4);
                        /* background-color: green; */
                    }

                    &:nth-child(odd) {
                        background-color: var(--color-pale-grey-2);
                        /* background-color: pink; */
                    }

                    .icon {
                        width: 47px;
                        height: 47px;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .step-number {
                        font-family: var(--font-family-inter-bold);
                        font-size: 18px;
                        font-weight: 600;
                        color: var(--color-orange);
                        line-height: 21px;
                        margin-bottom: 0;
                    }

                    .title {
                        font-size: 22px;
                        font-family: var(--font-family-inter-bold);
                        font-weight: bold;
                        line-height: 26px;
                        margin-bottom: 0;

                        @media screen and (max-width: 910px) {
                            font-size: 18px;
                        }
                    }

                    .description {
                        font-family: var(--font-family-inter-regular);
                        font-size: 18px;
                        font-weight: 400;
                        line-height: 21px;
                        margin-bottom: 0;

                        @media screen and (max-width: 910px) {
                            font-size: 16px;
                        }
                    }

                    @media screen and (max-width: 1020px) {
                        gap: 8px;

                        &:nth-child(1) {
                            border-bottom-right-radius: 0;
                            border-top-right-radius: 0;
                        }
                        
                        &:nth-child(2), &:nth-child(3) {
                            border-radius: 0;
                            clip-path: unset;
                            margin-left: 0;
                            padding-left: 28px;
                        }

                        &:nth-child(4) {
                            border-radius: 0;
                            border-top-right-radius: 18px;
                            border-bottom-right-radius: 18px;
                            clip-path: unset;
                            margin-left: 0;
                            padding-left: 28px;
                        }
                    }
                }

                @media screen and (max-width: 800px) {
                    gap: 20px;
                    flex-wrap: wrap;
                    align-items: stretch;

                    .step {
                        border-radius: 18px !important;
                        height: unset;
                    }
                }

                @media screen and (max-width: 650px) {
                    display: grid;
                    grid-template-columns: 1fr 1fr;

                    .step {
                        gap: 14px;
                    }
                }

                @media screen and (max-width: 500px) { 
                    grid-template-columns: 1fr;

                    .step {
                        padding-bottom: 28px;
                    }
                }
            }
        }
    }

    .pricing-model {
        background-color: var(--color-white-smoke);
        padding-bottom: 65px;
        padding-top: 50px;

        .main-container {
            .heading {
                text-align: center;
                font-family: var(--font-family-inter-bold);
                font-size: 42px;
                font-weight: bold;
            }

            .pricing-container {
                .pricing {
                    &.fixed-fee, &.dedicated {
                        background: var(--color-white);
                        box-shadow: 0px 3px 11px #70271130;
                    }
                }
            }
        }
    }

    .testimoinals {
        .main-container {
            padding-inline: 0;
            
            .testimonial-container {
                .video-container {
                    max-width: 100%;
                    border-radius: 0;
                    position: relative;

                    .overlay-container {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top: 0;
                        left: 0;
                        background-color: rgba(0, 0, 0, 0.5);
                        z-index: 1;
                    }

                    .video-thumbnail {
                        border-radius: 0;
                        background: linear-gradient(to left, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9));
                    }

                    video {
                        width: auto;
                        height: 100%;
                        margin-inline: auto;
                        border-radius: 8px;
                    }

                    .content-container {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        z-index: 2;

                        .play-button {
                            position: static;
                            width: 108px;
                            margin-bottom: 37px;
                            transform: unset;
                        }

                        .title {
                            font-family: var(--font-family-inter-bold);
                            font-size: 24px;
                            color: var(--color-orange);
                            margin-bottom: 12px;
                            text-align: center;
                        }

                        .description {
                            font-family: var(--font-family-inter-regular);
                            font-size: 18px;
                            color: var(--color-white);
                            text-align: center;
                        }
                    }
                }
            }

            @media screen and (max-width: 600px) {
                padding-inline: 0 !important;
            }

            @media screen and (max-width: 1020px) {
                padding-inline: 0 !important;
            }
        }
    }

    .faq {
        margin-bottom: 64px;

        .main-container {
            .faq-container {
                
                .heading {
                    font-family: var(--font-family-inter-bold);
                    font-weight: bold;
                    font-size: 42px;
                }
            }
        }
    }

    .contact-us {
        .header {
            .heading {
                color: var(--color-orange);
                font-family: var(--font-family-inter-bold);
                font-weight: bold;
                font-size: 42px;
            }
        }
    }

    .partnership-recognition {
        .main-container {
            .logos-container {
				
				.logo:nth-child(4) {
					img {
						height: 75.95px;
						@media screen and (max-width: 1366px) {
							height: 53.58px;
						}
						@media screen and (max-width: 865px) {
							height: 44.27px;
						}
					}
				}
				
                @media screen and (min-width: 1601px) and (max-width: 3000px) {
                    width: 100%;
                    justify-content: space-around;
                }
				
				@media screen and (max-width: 1600px) {
					width: 100%;
					justify-content: space-around;
				}
            }
        }
    }

    .location-section {
        .main-container {
            ul {
                li {
                    .header {
                        font-family: var(--font-family-inter-bold);
                        font-weight: 600;
                    }
                }
            }
        }
    }

    @media screen and (max-width: 600px) {
        .heading {
            font-size: 32px !important;
        }
    }
	
	span.wpcf7-form-control-wrap {
        label.error{
            font-size: 16px !important;
            position: absolute;
            left: 0;
            top: 40px;
        }
		.intl-tel-input{
			label.error{
				top: 60px;
			}	
		}
    }
	
	span.wpcf7-form-control-wrap{
		.wpcf7-not-valid-tip{
			display: none;
		}
	}
	
	.intl-tel-input {
    	margin-bottom: 0;
	}
}

.page-template-thank-you{
	min-height: calc(100dvh - 33px);
	display: flex;
	flex-direction: column;
	.footer{
		margin-top: auto;
	}
}