/* Apply box-sizing globally */
*,
*::before,
*::after {
    box-sizing: border-box;
}

@font-face {
    font-family: 'Croogla 4F';
    src: url('.././public/fonts/Croogla4F.woff2') format('truetype'),
    url('.././public/fonts/Croogla4F.woff') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


body {

    font-family: 'Outfit', sans-serif;
    margin: 0;
}
main{
    margin-top: 20px;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    /**/
}


.hero {
    display: flex;
    gap: 90px;
    position: relative;
    padding-left: 40px;
    min-height: 500px;
    padding-top: 50px;
}



.hero .hero-image img{
    position: absolute;
    right: 0;
    top: 50px;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: flex-end;

}

.hero-mobile-image img {
    display: none;
}

.hero .hero-text {
    font-weight: 600;
    font-size: 48px;
    line-height: 110%;
    text-align: left;
    margin-top: 10px;
    color: #010202;
    display: flex;
    flex: 0 0 57%;
    flex-direction: column;
}
.hero-text .highlight {
    color: #F46200;
    font-weight: 400;
}

.hero-text .no-highlight {
    color: grey;
    font-weight: 400;
}



.hero-text .small-text {
    font-weight: 400;
    font-size: 22px;
    line-height: 30px;
    color: #333333;
    display: flex;
    margin-top: 40px;
}

.actions {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-top: 77px;
}

.btn-outline {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: 2px solid;
    border-radius: 10px;
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
    background-color: transparent;
    text-decoration: none;
}

.btn-filled-orange{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 50px;
    border-radius: 10px;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
    text-decoration: none;
    border: none;
    background: linear-gradient(135deg, #F2B200 7.32%, #F2AA00 9.88%, #F38300 27.81%, #F36A00 41.46%, #F46200 50%, #EB5F02 64.51%, #D25908 87.56%, #CC580A 92.68%);

}

.transparent-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 50px;
    border-radius: 10px;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
    text-decoration: none;
    border: 1px solid #fff;
    background-color: transparent  !important;
    max-height: 45px;
}

.action-holder {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    gap: 30px;
}

#qr-code img {
    height: 200px; /* Set the desired height */
    width: 200px; /* Maintain aspect ratio */
}


.box {
    /*height: 300px;*/
    display: flex;
    justify-content: center;
    align-items: start;
    padding: 20px 70px;
}

.box-wrapper .box:last-child {
    padding-bottom: 60px;
}



.special-box {
    background: linear-gradient(180deg, #FEEFE5 0%, #FFFFFF 50%);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 60px;
}

.special-box .centered-image img {
    height: 500px;
}

.box .image-holder {
    height: 80%;
    background-size: cover;
    background-position: center;
    flex: 0 0 40%;
    justify-content: start;
}

.right-side-content {
    justify-content: end !important;
    display: flex;
}

.image-holder img {
    height: 300px
    /*width: 400px;*/
}

.box .text-holder{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    flex: 0 0 60%;
    align-self: center;
    gap: 10px;
}

.box .spl-text-holder{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 0 0 60%;
    align-self: center;
    gap: 10px;
}

.text-holder .text-header {
    font-weight: 600;
    font-size: 48px;
    line-height: 100%;
    flex-direction: row;
}

.text-holder .para-wrapper {
    display: flex;
    flex-direction: column;
    margin-top: 15px;
    font-weight: 400;
    font-size: 24px;
    line-height: 36px;
    justify-content: center;
    align-items: center;
}

.para-wrapper span {
    width: 70%;
    text-align: center;
}

.text {
    font-weight: 400;
    font-size: 24px;
    line-height: 36px;
    width: 90%;
}

.para-wrapper .text {
    align-self: start;
    flex-direction: row;
    display: flex;
}



.orange-text {
    color: #F46200;
    margin-left: 5px;
    display: inline;
}

.no-margin {
    margin: 0;
}

.text-header .custom_bayze_text {
    color: #F46200;
    font-family: 'Croogla 4F', sans-serif;
    font-weight: 400;
    font-size: 48px;
    padding: 6px 5px 0 5px;
}

.bayze_text {
    color: #F46200;
    font-family: 'Croogla 4F', sans-serif;
    margin-top: 5px;
}



.text-header .orange_text {
    color: #F46200;
    font-weight: 600;
    font-size: 48px;
    padding-right: 5px;
    /*padding: 6px 5px 0 5px;*/

}

.text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 5px;
    /*padding-right: 100px;*/
}

.text-wrapper div {
    align-self: start;
}

.box-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Adds a 50px gap between the images */
    background: #FFF0E6;
    min-height: 300px;
    padding-top: 50px;
}

.white-box-wrapper {
    background: #FFFFFF;
}

.box-wrapper .notify {
    width: max-content;
    height: 41px;
    padding: 8px 16px;
    gap: 8px;
    border-radius: 40px;
    background: #FFF0E6;
    border: 1px solid #CCB8AB;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
}

.box-wrapper .notify img {
    height: 10px;
    width: 10px;
}

.white-box-wrapper .notify {
    width: max-content;
    height: 41px;
    padding: 8px 16px;
    gap: 8px;
    border-radius: 40px;
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
}

.orange-footer {
    background: #F46200;
    display: flex;
    /*height: 400px;*/
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    gap: 30px;
    padding-top: 100px;
}

.orange-footer .note {
    display: flex;
    flex-direction: column;
    color: #FFFFFF;
}

.orange-footer .note .prio {
    font-family: Outfit;
    font-weight: 600;
    font-size: 40px;
    line-height: 60px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.orange-footer .note .prio img{
   height: 20px;
}

.orange-footer .note .bayze_text_white {
    font-family: 'Croogla 4F', sans-serif;
    font-weight: 200;
    font-size: 20px;
    line-height: 60px;
    text-align: center;

}

.orange-footer .buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-direction: row;
    padding-bottom: 20px;
}

.buttons .download_buttons {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.buttons .qr_button img{
    height: 230px;
}




@media (max-width: 768px) {

    .hero {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding-right: 20px;
        padding-left: 20px;
        padding-top: 0;
    }

    .hero .hero-text {
        text-align: center;
        align-items: center;
        flex: 0 0 100%;
        font-size: 24px;
    }

    .hero .hero-text .small-text {
        font-size: 16px;
    }

    .hero-mobile-image {
        padding-bottom: 20px;
    }

    .hero .hero-image img{
        display: none !important;
    }

    .hero-mobile-image img {
        display: block;
        height: 200px;
    }

    .actions {
        margin-top: 50px;
    }

    .special-box .centered-image img {
        height: 230px;
    }

    .orange-footer img {

    }

    #mobiles_img {
        height: 130px;
    }

    #qr-code {
        display: none;
        visibility: hidden;
    }

    .box {
        flex-direction: column;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        gap: 25px;
    }

    .box .text-holder {
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .image-holder img {
        height: 200px;
        /*width: 250px;*/
    }

    .text-holder .para-wrapper {
        font-size: 16px;
        line-height: 25px;
    }

    .text {
        font-size: 16px;
        line-height: 25px;
        width: 99%;
    }




    .action-holder {
        gap: 20px;
    }

    .action-holder img {
        height: 50px;
    }

    .phone img{
        width: 364px;
        height: 550px;
    }

    .text-holder .text-header {
        font-size: 23px;
        align-self: center;
        display: block;
    }

    .text-header .custom_bayze_text {
        font-size: 23px;
        padding: 4px 4px 0 4px;
    }

    .text-header .orange_text {
        font-size: 23px;
    }

    .reverse-box {
            flex-direction: column-reverse;
    }

    .note {
        align-items: center;
    }

    .orange-footer .note .bayze_text_white {
        font-size: 16px;
    }
    .orange-footer .note .prio {
        font-size: 23px;
        line-height: 36px;
    }

    .qr_button img{
        display: none;
        visibility: hidden;
    }

    .buttons .download_buttons {
        flex-direction: row;
        gap: 20px;
    }

    .download_buttons img {
        height: 50px;
    }

    .orange-footer .buttons {
        gap: 0;
    }
}