::-webkit-scrollbar {
	display: none;
}

@font-face {
    font-family: 'Oak Sans'; /* Name der Schriftart */
    src: url('fonts/OakSansVF.ttf') format('truetype'); /* URL zur Font-Datei */
    font-weight: 300 800; /* Gewichtungsbereich der variablen Font */
    font-stretch: 75% 100%; /* Breitenbereich (optional, falls unterstützt) */
    font-style: normal; /* Stil, z. B. normal oder italic */
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
  --darkGreen: #004c00;
  --lightGreen: #a4f6a4;
  --purple: #4c004a;
  --pink: #ffbdf7;
  --black: #000000;
  --white: #ffffff;
  --grey: #f0f0f0;
  --blue: #00b1ff;
}


html{
    scroll-behavior: smooth;
    font-family: 'Oak Sans' !important;
    font-size: 1px;
}

@media (min-width: 320px){

    /* Header */
    header{
        background-color: var(--grey);
    }

    .headerWrapper{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        padding-top: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
        padding-right: clamp(20rem, calc(20rem + (160 - 20) * ((100vw - 320rem) / (1920 - 320))), 160rem);
        padding-bottom: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
        padding-left: clamp(20rem, calc(20rem + (160 - 20) * ((100vw - 320rem) / (1920 - 320))), 160rem);
    }

    .headerLogo a{
        color: var(--black);
        text-decoration: none;
    }

    .headerLogo h2{
        font-size: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
        font-weight: 700;
        padding-bottom: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
    }

    .headerMenu ul{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: clamp(20rem, calc(20rem + (80 - 20) * ((100vw - 320rem) / (1920 - 320))), 80rem);
        list-style-type: none;
    }

    .headerMenu a{
        font-size: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
        font-weight: 500;
        text-decoration: none;
        color: var(--black);
    }

    .headerMenuforCompanies{
        transition: all 0.25s ease-in-out;
    }

    .headerMenuforCompanies:hover{
        color: var(--lightGreen);
    }

    .headerMenuforDrivers{
        transition: all 0.25s ease-in-out;
    }

    .headerMenuforDrivers:hover{
        color: var(--pink);
    }

    /* Content */

    /* Hero Section */

    /* Hero Section Left */
    .heroSectionContainerLeft{
        background-color: var(--darkGreen);
        padding: clamp(20rem, calc(20rem + (160 - 20) * ((100vw - 320rem) / (1920 - 320))), 160rem);
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
        flex-wrap: wrap;
        transition: all .25s ease-in-out;
    }

    .heroSectionContainerLeft:hover{
        background-color: rgba(0, 76, 0, 0.9);
    }

    .heroSectionContainerLeft h2{
        max-width: 520rem;
        font-size: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
        font-weight: 700;
        color: var(--lightGreen);
        /* text-align: justify;
        text-justify: inter-word; */
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        padding-bottom: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
    }

    .heroSectionContainerLeft p{
        max-width: 490rem;
        font-size: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
        font-weight: 400;
        text-align: justify;
        text-justify: inter-word;
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        color: var(--white);
        padding-bottom: clamp(10rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
    }

    .heroSectionContainerLeft p span{
        font-weight: 700;
    }

    .heroSectionContainerLeft button{
        background-color: var(--lightGreen);
        border: none;
        border-radius: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
        padding-top: clamp(5rem, calc(5rem + (10 - 5) * ((100vw - 320rem) / (1920 - 320))), 10rem);
        padding-right: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
        padding-bottom: clamp(5rem, calc(5rem + (10 - 5) * ((100vw - 320rem) / (1920 - 320))), 10rem);
        padding-left: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
        transition: all .25s ease-in-out;
        cursor: pointer;
        font-family: 'Oak Sans';
        font-size: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
        font-weight: 500;
        color: var(--darkGreen);
        text-decoration: none;
    }

    .heroSectionContainerLeft button:hover{
        background-color: var(--darkGreen);
        color: var(--lightGreen);
    }

    /* Hero Section Right */
    .heroSectionContainerRight{
        background-color: var(--pink);
        padding: clamp(20rem, calc(20rem + (160 - 20) * ((100vw - 320rem) / (1920 - 320))), 160rem);
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
        flex-wrap: wrap;
        transition: all .25s ease-in-out;
    }

    .heroSectionContainerRight:hover{
        background-color: rgba(255, 189, 247, 0.8);
    }

    .heroSectionContainerRight h2{
        max-width: 400rem;
        font-size: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
        font-weight: 500;
        color: var(--purple);
        padding-bottom: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
    }

    .heroSectionContainerRight h2 span{
        font-weight: 700;
    }

    .heroSectionContainerRight p{
        max-width: 490rem;
        font-size: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
        font-weight: 400;
        text-align: justify;
        text-justify: inter-word;
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        color: var(--black);
        padding-bottom: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
    }

    .heroSectionContainerRight p span{
        font-weight: 700;
    }

    .heroSectionContainerRight button{
        background-color: var(--purple);
        border: none;
        border-radius: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
        padding-top: clamp(5rem, calc(5rem + (10 - 5) * ((100vw - 320rem) / (1920 - 320))), 10rem);
        padding-right: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
        padding-bottom: clamp(5rem, calc(5rem + (10 - 5) * ((100vw - 320rem) / (1920 - 320))), 10rem);
        padding-left: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
        transition: all .25s ease-in-out;
        cursor: pointer;
        font-family: 'Oak Sans';
        font-size: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
        font-weight: 500;
        color: var(--pink);
        text-decoration: none;
    }

    .heroSectionContainerRight button:hover{
        background-color: var(--pink);
        color: var(--purple);
    }

    /* For Companies */
    .forCompanies{
        padding: clamp(20rem, calc(20rem + (160 - 20) * ((100vw - 320rem) / (1920 - 320))), 160rem);
    }

    .forCompaniesWrapper h2{
        font-size: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
        font-weight: 600;
        color: var(--darkGreen);
        padding-bottom: clamp(10rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
    }

    .forCompaniesContentContainerTop{
        display: flex;
        align-items: start;
        justify-content: space-between;
        flex-wrap: wrap;
        padding-bottom: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
    }

    .forCompaniesContentContainerTopLeft h3{
        font-size: clamp(15rem, calc(15rem + (30 - 15) * ((100vw - 320rem) / (1920 - 320))), 30rem);
        font-weight: 500;
        color: var(--black);
        padding-bottom: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
    }

    .forCompaniesContentContainerTopLeft p{
        font-size: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
        font-weight: 400;
        text-align: justify;
        text-justify: inter-word;
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        color: var(--black);
        padding-right: clamp(0rem, calc(0rem + (80 - 0) * ((100vw - 320rem) / (1920 - 320))), 80rem);
        padding-bottom: clamp(20rem, calc(20rem + (80 - 20) * ((100vw - 320rem) / (1920 - 320))), 80rem);
    }

    .forCompaniesContentContainerTopRight{
        background-color: var(--darkGreen);
        border-radius: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
        padding: clamp(10rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
    }

    .forCompaniesContentContainerTopRight h3{
        font-size: clamp(15rem, calc(15rem + (30 - 15) * ((100vw - 320rem) / (1920 - 320))), 30rem);
        font-weight: 500;
        color: var(--lightGreen);
        text-align: center;
        padding-bottom: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
    }

    .forCompaniesContentContainerTopRightCardContainer{
        display: flex;
        align-items: start;
        justify-content: start;
        flex-wrap: wrap;
        gap: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
    }

    .forCompaniesAdvantagesCard h4{
        font-size: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
        font-weight: 500;
        color: var(--white);
        padding-bottom: clamp(5rem, calc(5rem + (10 - 5) * ((100vw - 320rem) / (1920 - 320))), 10rem);
    }

    .forCompaniesAdvantagesCard p{
        font-size: clamp(10rem, calc(10rem + (16 - 10) * ((100vw - 320rem) / (1920 - 320))), 16rem);
        font-weight: 400;
        text-align: justify;
        text-justify: inter-word;
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        color: var(--white);
    }

    .forCompaniesAdvantagesBulletPointsList ul{
        list-style-type: none;
        display: flex;
        align-items: start;
        justify-content: space-between;
        flex-wrap: wrap;
        padding-top: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
    }

    .forCompaniesAdvantagesBulletPointsList li{
        font-size: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
        font-weight: 500;
        text-align: justify;
        text-justify: inter-word;
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        color: var(--lightGreen);
    }

    /* For Companies Content Container Middle */
    .forCompaniesContentContainerMiddle{
        display: flex;
        align-items: start;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
        padding-bottom: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
    }

    .forCompaniesInquiryCard{
        border: clamp(5rem, calc(5rem + (10 - 5) * ((100vw - 320rem) / (1920 - 320))), 10rem) solid var(--darkGreen);
        border-radius: clamp(15rem, calc(15rem + (30 - 15) * ((100vw - 320rem) / (1920 - 320))), 30rem);
        display: flex;
        align-items: start;
        justify-content: start;
        flex-wrap: wrap;
        padding: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
        align-self: stretch;
    }

    .forCompaniesInquiryCardNumberWrapper{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
    }

    .forCompaniesInquiryCardNumber{
        width: clamp(30rem, calc(30rem + (60 - 30) * ((100vw - 320rem) / (1920 - 320))), 60rem);
        height: clamp(30rem, calc(30rem + (60 - 30) * ((100vw - 320rem) / (1920 - 320))), 60rem);
        border-radius: clamp(30rem, calc(30rem + (60 - 30) * ((100vw - 320rem) / (1920 - 320))), 60rem);
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--darkGreen);
    }

    .forCompaniesInquiryCardNumber h3{
        font-size: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
        font-weight: 600;
        color: var(--lightGreen);
    }

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

    .forCompaniesInquiryCardText h3{
        font-size: clamp(15rem, calc(15rem + (30 - 15) * ((100vw - 320rem) / (1920 - 320))), 30rem);
        font-weight: 600;
        color: var(--darkGreen);
        padding-bottom: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
    }

    .forCompaniesInquiryCardText p{
        font-size: clamp(10rem, calc(10rem + (16 - 10) * ((100vw - 320rem) / (1920 - 320))), 16rem);
        font-weight: 400;
        text-align: justify;
        text-justify: inter-word;
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        color: var(--black);
        padding-bottom: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
    }

    .forCompaniesInquiryCard button{
        background-color: var(--lightGreen);
        border: none;
        border-radius: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
        padding-top: clamp(5rem, calc(5rem + (10 - 5) * ((100vw - 320rem) / (1920 - 320))), 10rem);
        padding-right: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
        padding-bottom: clamp(5rem, calc(5rem + (10 - 5) * ((100vw - 320rem) / (1920 - 320))), 10rem);
        padding-left: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
        font-family: 'Oak Sans';
        font-size: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
        font-weight: 500;
        color: var(--darkGreen);
        transition: all .25s ease-in-out;
        cursor: pointer;
    }

    .forCompaniesInquiryCard button:hover{
        background-color: var(--darkGreen);
        color: var(--lightGreen);
    }

    /* For Companies Inquiry Popup */
    #popupOverlayCompanies {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.6);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    #popupBoxCompanies {
        position: relative;
        width: 80vw;
        height: 80vh;
        background: #fff;
        border-radius: 8px;
        overflow: hidden;
    }

    #popupBoxCompanies iframe {
        width: 100%;
        height: 100%;
        border: none;
    }

    #closePopupCompanies {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 10;
        font-size: 24px;
        background: none;
        border: none;
        cursor: pointer;
    }

    /* For Companies Costs */
    .forCompaniesContentContainerBottom h3{
        font-size: clamp(15rem, calc(15rem + (30 - 15) * ((100vw - 320rem) / (1920 - 320))), 30rem);
        font-weight: 600;
        color: var(--darkGreen);
        padding-bottom: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
    }

    .forCompaniesContentContainerBottom p{
        font-size: clamp(10rem, calc(10rem + (16 - 10) * ((100vw - 320rem) / (1920 - 320))), 16rem);
        font-weight: 400;
        text-align: justify;
        text-justify: inter-word;
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        color: var(--black);
        padding-bottom: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
    }

    .forCompaniesCostsCardWrapper{
        display: flex;
        align-items: center;
        justify-content: start;
        flex-wrap: wrap;
    }

    .forCompaniesCostsCard{
        display: flex;
        gap: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
    }

    .forCompaniesCostsNumber{
        width: clamp(30rem, calc(30rem + (60 - 30) * ((100vw - 320rem) / (1920 - 320))), 60rem);
        height: clamp(30rem, calc(30rem + (60 - 30) * ((100vw - 320rem) / (1920 - 320))), 60rem);
        border-radius: clamp(30rem, calc(30rem + (60 - 30) * ((100vw - 320rem) / (1920 - 320))), 60rem);
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--darkGreen);
    }

    .forCompaniesCostsNumber h3{
        font-size: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
        font-weight: 600;
        color: var(--lightGreen);
        padding: 0;
    }

    .forCompaniesCostsCardText{
        display: flex;
        flex-wrap: wrap;
        padding-top: clamp(7.5rem, calc(7.5rem + (12 - 7.5) * ((100vw - 320rem) / (1920 - 320))), 12rem);
    }

    .forCompaniesCostsCardText h3{
        font-size: clamp(15rem, calc(15rem + (30 - 15) * ((100vw - 320rem) / (1920 - 320))), 30rem);
        font-weight: 600;
        color: var(--darkGreen);
        padding-bottom: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
    }

    .forCompaniesCostsCardText p{
        font-size: clamp(10rem, calc(10rem + (16 - 10) * ((100vw - 320rem) / (1920 - 320))), 16rem);
        font-weight: 400;
        text-align: justify;
        text-justify: inter-word;
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        color: var(--black);
        padding-bottom: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
    }

    /* Claim */
    .claim{
        background-color: var(--purple);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .claim h2{
        font-size: clamp(30rem, calc(30rem + (60 - 30) * ((100vw - 320rem) / (1920 - 320))), 60rem);
        font-weight: 600;
        color: var(--white);
        padding-top: clamp(80rem, calc(80rem + (160 - 80) * ((100vw - 320rem) / (1920 - 320))), 160rem);
        padding-bottom: clamp(80rem, calc(80rem + (160 - 80) * ((100vw - 320rem) / (1920 - 320))), 160rem);
    }

    /* For Drivers */
    .forDrivers{
        padding: clamp(20rem, calc(20rem + (160 - 20) * ((100vw - 320rem) / (1920 - 320))), 160rem);
    }

    .forDriversWrapper h2{
        font-size: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
        font-weight: 600;
        color: var(--purple);
        padding-bottom: clamp(10rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
    }

    .forDriversContentContainerTop{
        display: flex;
        align-items: start;
        justify-content: space-between;
        flex-wrap: wrap;
        padding-bottom: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
    }

    .forDriversContentContainerTopLeft h3{
        font-size: clamp(15rem, calc(15rem + (30 - 15) * ((100vw - 320rem) / (1920 - 320))), 30rem);
        font-weight: 500;
        color: var(--black);
        padding-bottom: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
    }

    .forDriversContentContainerTopLeft p{
        font-size: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
        font-weight: 400;
        text-align: justify;
        text-justify: inter-word;
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        color: var(--black);
        padding-right: clamp(0rem, calc(0rem + (80 - 0) * ((100vw - 320rem) / (1920 - 320))), 80rem);
        padding-bottom: clamp(20rem, calc(20rem + (80 - 20) * ((100vw - 320rem) / (1920 - 320))), 80rem);
    }

    .forDriversContentContainerTopRight{
        background-color: var(--purple);
        border-radius: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
        padding: clamp(10rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
    }

    .forDriversContentContainerTopRight h3{
        font-size: clamp(15rem, calc(15rem + (30 - 15) * ((100vw - 320rem) / (1920 - 320))), 30rem);
        font-weight: 500;
        color: var(--pink);
        text-align: center;
        padding-bottom: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
    }

    .forDriversContentContainerTopRightCardContainer{
        display: flex;
        align-items: start;
        justify-content: start;
        flex-wrap: wrap;
        gap: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
    }

    .forDriversAdvantagesCard h4{
        font-size: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
        font-weight: 500;
        color: var(--white);
        padding-bottom: clamp(5rem, calc(5rem + (10 - 5) * ((100vw - 320rem) / (1920 - 320))), 10rem);
    }

    .forDriversAdvantagesCard p{
        font-size: clamp(10rem, calc(10rem + (16 - 10) * ((100vw - 320rem) / (1920 - 320))), 16rem);
        font-weight: 400;
        text-align: justify;
        text-justify: inter-word;
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        color: var(--white);
    }

    /* For Drivers Content Container Middle */
    .forDriversContentContainerMiddle{
        display: flex;
        align-items: start;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
        padding-bottom: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
    }

    .forDriversInquiryCard{
        border: clamp(5rem, calc(5rem + (10 - 5) * ((100vw - 320rem) / (1920 - 320))), 10rem) solid var(--purple);
        border-radius: clamp(15rem, calc(15rem + (30 - 15) * ((100vw - 320rem) / (1920 - 320))), 30rem);
        display: flex;
        align-items: start;
        justify-content: start;
        flex-wrap: wrap;
        padding: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
        align-self: stretch;
    }

    .forDriversInquiryCardNumberWrapper{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
    }

    .forDriversInquiryCardNumber{
        width: clamp(30rem, calc(30rem + (60 - 30) * ((100vw - 320rem) / (1920 - 320))), 60rem);
        height: clamp(30rem, calc(30rem + (60 - 30) * ((100vw - 320rem) / (1920 - 320))), 60rem);
        border-radius: clamp(30rem, calc(30rem + (60 - 30) * ((100vw - 320rem) / (1920 - 320))), 60rem);
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--purple);
    }

    .forDriversInquiryCardNumber h3{
        font-size: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
        font-weight: 600;
        color: var(--pink);
    }

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

    .forDriversInquiryCardText h3{
        font-size: clamp(15rem, calc(15rem + (30 - 15) * ((100vw - 320rem) / (1920 - 320))), 30rem);
        font-weight: 600;
        color: var(--purple);
        padding-bottom: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
    }

    .forDriversInquiryCardText p{
        font-size: clamp(10rem, calc(10rem + (16 - 10) * ((100vw - 320rem) / (1920 - 320))), 16rem);
        font-weight: 400;
        text-align: justify;
        text-justify: inter-word;
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        color: var(--black);
        padding-bottom: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
    }

    .forDriversInquiryCard button{
        background-color: var(--pink);
        border: none;
        border-radius: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
        padding-top: clamp(5rem, calc(5rem + (10 - 5) * ((100vw - 320rem) / (1920 - 320))), 10rem);
        padding-right: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
        padding-bottom: clamp(5rem, calc(5rem + (10 - 5) * ((100vw - 320rem) / (1920 - 320))), 10rem);
        padding-left: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
        font-family: 'Oak Sans';
        font-size: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
        font-weight: 500;
        color: var(--purple);
        transition: all .25s ease-in-out;
        cursor: pointer;
    }

    .forDriversInquiryCard button:hover{
        background-color: var(--purple);
        color: var(--pink);
    }

    /* For Drivers Registration Popup */
    #popupOverlayDriver {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.6);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    #popupBoxDriver {
        position: relative;
        width: 80vw;
        height: 80vh;
        background: #fff;
        border-radius: 8px;
        overflow: hidden;
    }

    #popupBoxDriver iframe {
        width: 100%;
        height: 100%;
        border: none;
    }

    #closePopupDriver {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 10;
        font-size: 24px;
        background: none;
        border: none;
        cursor: pointer;
    }

    /* For Drivers Money */
    .forDriversContentContainerBottom h3{
        font-size: clamp(15rem, calc(15rem + (30 - 15) * ((100vw - 320rem) / (1920 - 320))), 30rem);
        font-weight: 600;
        color: var(--purple);
        padding-bottom: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
    }

    .forDriversContentContainerBottom p{
        font-size: clamp(10rem, calc(10rem + (16 - 10) * ((100vw - 320rem) / (1920 - 320))), 16rem);
        font-weight: 400;
        text-align: justify;
        text-justify: inter-word;
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        color: var(--black);
        padding-bottom: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
    }

    .forDriversCostsCardWrapper{
        display: flex;
        align-items: center;
        justify-content: start;
        flex-wrap: wrap;
    }

    .forDriversCostsCard{
        display: flex;
        gap: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
    }

    .forDriversCostsNumber{
        width: clamp(30rem, calc(30rem + (60 - 30) * ((100vw - 320rem) / (1920 - 320))), 60rem);
        height: clamp(30rem, calc(30rem + (60 - 30) * ((100vw - 320rem) / (1920 - 320))), 60rem);
        border-radius: clamp(30rem, calc(30rem + (60 - 30) * ((100vw - 320rem) / (1920 - 320))), 60rem);
        background-color: var(--purple);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .forDriversCostsNumber h3{
        font-size: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
        font-weight: 600;
        color: var(--pink);
        padding: 0;
    }

    .forDriversCostsCardText{
        display: flex;
        flex-wrap: wrap;
        padding-top: clamp(7.5rem, calc(7.5rem + (12 - 7.5) * ((100vw - 320rem) / (1920 - 320))), 12rem);
    }

    .forDriversCostsCardText h3{
        font-size: clamp(15rem, calc(15rem + (30 - 15) * ((100vw - 320rem) / (1920 - 320))), 30rem);
        font-weight: 600;
        color: var(--purple);
        padding-bottom: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
    }

    .forDriversCostsCardText p{
        font-size: clamp(10rem, calc(10rem + (16 - 10) * ((100vw - 320rem) / (1920 - 320))), 16rem);
        font-weight: 400;
        text-align: justify;
        text-justify: inter-word;
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        color: var(--black);
        padding-bottom: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
    }

    /* Possible Advertisement Space */
    .stickerArea{
        padding: clamp(20rem, calc(20rem + (160 - 20) * ((100vw - 320rem) / (1920 - 320))), 160rem);
        padding-top: 0;
    }

    .stickerAreaWrapper h2{
        font-size: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
        font-weight: 600;
        color: var(--black);
        padding-bottom: clamp(10rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
    }

    .stickerAreaContentContainer{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: clamp(10rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
    }

    .stickerAreaContentContainer h3{
        width: 100%;
        font-size: clamp(15rem, calc(15rem + (30 - 15) * ((100vw - 320rem) / (1920 - 320))), 30rem);
        font-weight: 600;
        color: var(--blue);
        text-align: center;
    }

    .stickerAreaContentContainer h5{
        width: 100%;
        font-size: clamp(10rem, calc(10rem + (15 - 10) * ((100vw - 320rem) / (1920 - 320))), 15rem);
        font-weight: 400;
        color: var(--black);
        text-align: center;
        padding-bottom: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
    }

    /* Side Front Back */
    .stickerAreaSideContainer, .stickerAreaFrontContainer, .stickerAreaBackContainer{
        display: flex;
        align-items: start;
        justify-content: center;
        flex-wrap: wrap;
    }

    .stickerAreaSideImgContainer, .stickerAreaFrontImgContainer, .stickerAreaBackImgContainer{
        display: flex;
        gap: clamp(10rem, calc(10rem + (80 - 10) * ((100vw - 320rem) / (1920 - 320))), 80rem);
    }

    .stickerAreaSideImgContainer img, .stickerAreaFrontImgContainer img, .stickerAreaBackImgContainer img{
        max-height: clamp(50rem, calc(50rem + (150 - 50) * ((100vw - 320rem) / (1920 - 320))), 150rem);
    }

    /* Format Sizes */
    .formatSizes{
        padding: clamp(20rem, calc(20rem + (160 - 20) * ((100vw - 320rem) / (1920 - 320))), 160rem);
        padding-top: 0;
    }

    .formatSizes h2{
        font-size: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
        font-weight: 600;
        color: var(--black);
        padding-bottom: clamp(10rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
    }

    .formatSizesContentContainer{
        display: flex;
        align-items: start;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .formatSizesAspectRatio{
        display: flex;
        align-items: start;
        justify-content: center;
        flex-wrap: wrap;
        padding-bottom: clamp(40rem, calc(40rem + (80 - 40) * ((100vw - 320rem) / (1920 - 320))), 80rem);
    }

    .formatSizesAspectRatio h3{
        width: 100%;
        font-size: clamp(15rem, calc(15rem + (30 - 15) * ((100vw - 320rem) / (1920 - 320))), 30rem);
        font-weight: 600;
        color: var(--blue);
        text-align: center;
    }

    .formatSizesAspectRatio h5{
        width: 100%;
        font-size: clamp(10rem, calc(10rem + (15 - 10) * ((100vw - 320rem) / (1920 - 320))), 15rem);
        font-weight: 400;
        color: var(--black);
        text-align: center;
        padding-bottom: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
    }

    .formatSizesAspectRatio img{
        max-height: clamp(50rem, calc(50rem + (150 - 50) * ((100vw - 320rem) / (1920 - 320))), 150rem);
        transition: all 0.25s ease-in-out;
    }

    .formatSizesAspectRatio img:hover{
        max-height: clamp(50rem, calc(50rem + (200 - 50) * ((100vw - 320rem) / (1920 - 320))), 200rem);
    }

    /* Available Cities */
    .availableCities{
        padding: clamp(20rem, calc(20rem + (160 - 20) * ((100vw - 320rem) / (1920 - 320))), 160rem);
        padding-top: 0;
    }

    .availableCitiesWrapper h2{
        font-size: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
        font-weight: 600;
        color: var(--black);
        padding-bottom: clamp(10rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
    }

    .availableCitiesCard{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: clamp(10rem, calc(20rem + (20 - 20) * ((100vw - 320rem) / (1920 - 320))), 20rem);
    }

    .availableCitiesCard img{
        max-height: clamp(50rem, calc(50rem + (200 - 50) * ((100vw - 320rem) / (1920 - 320))), 200rem);
    }

    .availableCitiesCard h5{
        font-size: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
        font-weight: 500;
        color: var(--black);
        text-align: center;
        padding-bottom: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
    }

    /* Footer */
    .footer{
        background-color: var(--darkGreen);
        padding: clamp(20rem, calc(20rem + (80 - 20) * ((100vw - 320rem) / (1920 - 320))), 80rem);
    }

    .footerWrapper{
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: clamp(10rem, calc(10rem + (80 - 10) * ((100vw - 320rem) / (1920 - 320))), 80rem);
        flex-wrap: wrap;
    }

    .footerContainerOneTop h2{
        font-size: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
        font-weight: 600;
        color: var(--pink);
    }

    .footerContainerOneTop h4{
        font-size: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
        font-weight: 400;
        color: var(--white);
        padding-bottom: clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem);
    }

    .footerContainerOneBottom a{
        font-size: clamp(8rem, calc(8rem + (16 - 8) * ((100vw - 320rem) / (1920 - 320))), 16rem);
        font-weight: 400;
        color: var(--white);
        text-decoration: none;
    }

    .footerContainerTwo h3{
        font-size: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
        font-weight: 500;
        color: var(--white);
        padding-bottom: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
    }

    .footerContainerTwo ul{
        list-style-type: none;
        display: flex;
        flex-direction: column;
        gap: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
    }

    .footerContainerTwo a{
        font-size: clamp(8rem, calc(8rem + (16 - 8) * ((100vw - 320rem) / (1920 - 320))), 16rem);
        font-weight: 400;
        color: var(--white);
        text-decoration: none;
    }

    .footerContainerThree h3{
        font-size: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
        font-weight: 500;
        color: var(--white);
        padding-bottom: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
    }

    .footerContainerThree ul{
        list-style-type: none;
        display: flex;
        flex-direction: column;
        gap: clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem);
    }

    .footerContainerThree a{
        font-size: clamp(8rem, calc(8rem + (16 - 8) * ((100vw - 320rem) / (1920 - 320))), 16rem);
        font-weight: 400;
        color: var(--white);
        text-decoration: none;
    }

    .footerContainerFour ul{
        display: flex;
        gap: clamp(10rem, calc(10rem + (40 - 10) * ((100vw - 320rem) / (1920 - 320))), 40rem);
        flex-wrap: wrap;
        list-style-type: none;
    }

    .footerContainerFour img{
        height: clamp(10rem, calc(10rem + (30 - 10) * ((100vw - 320rem) / (1920 - 320))), 30rem);
    }
}

/* Media Query 768px */
@media (min-width: 768px) {
    /* Header */
    .headerWrapper{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .headerLogo h2{
        padding-bottom: 0;
    }

    /* Hero Section */
    .heroSectionWrapper{
        display: flex;
    }
    
    .heroSectionContainerLeft{
        width: 50%;
    }

    .heroSectionContainerRight{
        width: 50%;
    }

    /* For Companies */
    .forCompaniesContentContainerTopLeft{
        width: 50%;
    }

    .forCompaniesContentContainerTopRight{
        width: 50%;   
    }

    /* For Drivers */
    .forDriversContentContainerTopLeft{
        width: 50%;
    }

    .forDriversContentContainerTopRight{
        width: 50%;   
    }
}



/* Media Query 1024px */
@media (min-width: 1024px){
    /* For Companies */
    .forCompaniesAdvantagesCard{
        max-width: calc((100% / 2) - clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem));
    }

    .forCompaniesContentContainerMiddle{
        gap: 0;
    }
    
    .forCompaniesInquiryCard{
        width: calc((100% / 3) - clamp(20rem, calc(20rem + (24 - 20) * ((100vw - 320rem) / (1920 - 320))), 24rem));
    }

    .forCompaniesCostsCardWrapper{
        align-items: start;
        justify-content: space-between;
    }

    .forCompaniesCostsCard{
        width: calc((100% / 3) - clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem));
    }

    /* For Companies */
    .forDriversAdvantagesCard{
        max-width: calc((100% / 2) - clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem));
    }

    .forDriversContentContainerMiddle{
        gap: 0;
    }
    
    .forDriversInquiryCard{
        width: calc((100% / 3) - clamp(20rem, calc(20rem + (24 - 20) * ((100vw - 320rem) / (1920 - 320))), 24rem));
    }

    .forDriversCostsCardWrapper{
        align-items: start;
        justify-content: space-between;
    }

    .forDriversCostsCard{
        width: calc((100% / 3) - clamp(20rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem));
    }

    /* Possible Advertisement Space */
    .stickerAreaSideContainer, .stickerAreaFrontContainer, .stickerAreaBackContainer{
        /* max-width: calc((100% / 3) - clamp(10rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem)); */
    }

    /* Format Sizes */
    .formatSizesAspectRatio{
        max-width: calc((100% / 4) - clamp(10rem, calc(20rem + (40 - 20) * ((100vw - 320rem) / (1920 - 320))), 40rem));
    }
}



/* Media Query 1920px */
@media (min-width: 1920px){
    /* For Companies */
    .forCompaniesAdvantagesCard{
        max-width: calc((100% / 3) - clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem));
    }

    /* For Drivers */
    .forDriversAdvantagesCard{
        max-width: calc((100% / 3) - clamp(10rem, calc(10rem + (20 - 10) * ((100vw - 320rem) / (1920 - 320))), 20rem));
    }
}