@font-face {
    font-family: "LaughingFont Normal";
    src: url("/assets/fonts/LaughingFont-Bounce.woff2") format("woff2"), url("/assets/fonts/LaughingFont-Bounce.otf") format("otf")
}

@font-face {
    font-family: "LaughingFont Bold";
    src: url("/assets/fonts/LaughingFont-Bold.woff2") format("woff2"), url("/assets/fonts/LaughingFont-Bold.otf") format("otf")
}

/* You can add global styles to this file, and also import other style files */
html,
body {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

.error {
    font-family: 'LaughingFont Bold';
    color: #000000;
    font-size: 10px;
    font-style: italic;
}

.error-main {
    font-family: 'LaughingFont Bold';
    color: #000000;
    font-size: 15px;
    font-style: italic;
    text-align: center;
}

.filename {
    font-family: 'LaughingFont Bold';
    color: #FFFFFF;
    font-size: 10px;
}

.error-div {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.text-normal {
    font-family: 'LaughingFont Normal';
}

.text-bold {
    font-family: 'LaughingFont Bold';
}

.text-center {
    text-align: center;
}

.text-blue {
    color: #4A6EB4;
}

.text-red {
    color: #E42313;
}

.text-yellow {
    color: #FFED00;
}

.text-white {
    color: #FFFFFF;
}

.text-title-white, .text-title-white-md {
    font-family: 'LaughingFont Bold';
    color: #FFFFFF;
    text-shadow: #00000091 0px 5px 4px;
    -webkit-text-stroke: 1px #E42313;
    text-stroke: 4px #E42313;
    text-transform: uppercase;
}

.text-title-blue, .text-title-blue-md {
    font-family: 'LaughingFont Bold';
    color: #647cbb;
    text-shadow: #00000091 0px 5px 4px;
    -webkit-text-stroke: 1px #ffffff;
    text-stroke: 4px #ffffff;
    text-transform: uppercase;
}

.text-box-red {
    text-shadow: #00000091 0px 5px 4px;
    -webkit-text-stroke: 0.3px #E42313;
    text-stroke: 4px #E42313;
}

.text-label-form {
    font-family: 'LaughingFont Bold';
    font-size: 12px;
    text-shadow: #00000091 0px 5px 4px;
    -webkit-text-stroke: 0.3px #E42313;
    text-stroke: 4px #E42313;
    color: #FFFFFF;
}

.text-box-white {
    text-shadow: 2px 0 #FFFFFF, -2px 0 #FFFFFF, 0 2px #FFFFFF, 0 -2px #FFFFFF, 1px 1px #FFFFFF, -1px -1px #FFFFFF, 1px -1px #FFFFFF, -1px 1px #FFFFFF;
}

.text-uppercase {
    text-transform: uppercase;
}

.text-rotation-m3 {
    transform: rotate(-3deg);
}

.ft-italic {
    font-style: italic;
}

.ftz-8 {
    font-size: 8px;
}

.ftz-10 {
    font-size: 10px;
}

.ftz-11 {
    font-size: 11px;
}

.ftz-12 {
    font-size: 12px;
}

.ftz-13 {
    font-size: 13px;
}

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

.ftz-25 {
    font-size: 25px;
}

.ftz-32 {
    font-size: 32px;
}

.grid-col-1 {
    grid-column: 1;
}

.grid-col-2 {
    grid-column: 2;
}

.grid-col-3 {
    grid-column: 3;
}

.grid-col-4 {
    grid-column: 4;
}

.grid-col-5 {
    grid-column: 5;
}

.grid-col-6 {
    grid-column: 6;
}



.button-vqr {
    background-color: #FFFFFF;
    border-radius: 8px;
    border: none;
    color: #647CBB;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    font-family: 'LaughingFont Bold';
    width: fit-content;
}

.button-vqr-inverse {
    background-color: #647CBB;
    border-radius: 8px;
    border: none;
    color: #FFFFFF;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    font-family: 'LaughingFont Bold';
    width: fit-content;
}

.button-vqr-small {
    background-color: #FFFFFF;
    border-radius: 8px;
    border: none;
    color: #647CBB;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 16px;
    padding-left: 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    font-family: 'LaughingFont Bold';
    width: fit-content;
}

.button-vqr-small-inverse {
    background-color: #647CBB;
    border-radius: 8px;
    border: none;
    color: #FFFFFF;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 16px;
    padding-left: 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    font-family: 'LaughingFont Bold';
    width: fit-content;
}


.header-container {
    width: 100%;
    z-index: 10;
}

.header-logo {
    position: absolute;
}

.header-logo50s-container {
    display: flex;
    justify-content: center;
}

.header-logo-50 {
    width: 250px;
    height: 166px;
    position: relative;
    transform: translateY(10px);
}


.header-center-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 5px;
    align-items: center;
    text-align: center;
}

.footer-conainter {
    z-index: 11;
}

.footer-container-desktop {
    position: fixed;
    bottom: 0;
    background-color: #FFFFFF;
    width: 100%;
    height: 100px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    justify-content: center;
}

.footer-container-mobile-parent {
    display: flex;
    position: fixed;
    bottom: 0;
    background-color: #FFFFFF;
    justify-content: center;
    width: 100%;
    height: 90px;
    max-height: 90px;
}

.footer-container-mobile {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-content: center;
}

.footer-container-desktop>div, .footer-container-mobile>div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-logo-left {
    width: 100px;
    height: 100px;
    position: absolute;
    bottom: 50px;
}

.footer-logo-mobile-left {
    width: 60px;
}

.footer-logo-right {
    width: 155px;
    position: absolute;
    bottom: 60px;
}

.footer-logo-mobile-right {
    width: 120px;
}

.footer-container-mobile-logos {
    display: flex;
    position: absolute;
    bottom: 90px;
    z-index: 900000;
    justify-content: space-between;
    width: 95%;
    bottom: 60px;
}

.footer-container {
    z-index: 11;
}

.cursor-pointer {
    cursor: pointer;
}

.body-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

input[type=text] {
    background-color: #FFFFFF;
    color: black;
    border-radius: 8px;
    border: none;
    padding: 6px;
    width: 230px;
}

input[type="checkbox"] {
    height: 20px;
    border: none;
    border-radius: 8px;
    background-color: #FFFFFF;
    accent-color: red;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
}

input[type="checkbox"]:checked {
    appearance: auto;
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
    background-color: red;
}


.bgimg-content {
    position: absolute;
    top: 0;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}





/* 
  ##Device = Desktops
  ##Screen = 1631px to higher resolution desktops  extra large
*/

@media (min-width: 1631px) {
    .made-with-container {
        display: flex;
        gap: 3px;
        align-items: center;
        justify-content: flex-end;
        position: absolute;
        bottom: 10px;
        font-size: 12px;
        text-align: center;
    }


    .dsi-img {
        width: 20px;
    }

    .header-center-container {
        font-size: 20px;
    }

    .header-logo {
        width: 150px;
        height: 150px;
        top: 105px
    }

    .footer-container-mobile-parent {
        display: none;
    }

    .footer-container-mobile-logos {
        display: none
    }

    .header-container {
        height: 200px;
    }

    .footer-container {
        height: 120px;
    }

    .header-logo-container-desktop {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        justify-content: center;
        height: 200px;
    }

    .header-logo-container-mobile {
        display: none;
    }

    .main-logo {
        width: 200px;
        height: 200px;
    }

    input[type=text] {
        width: 100%;
    }

    input[type="checkbox"] {
        width: 20px;
    }

    .bgimg-content-mobile {
        display: none;
    }

    .text-title-white {
        font-size: 35px;
    }

    .text-title-white-md {
        font-size: 27px;
    }

    .text-title-blue {
        font-size: 35px;
    }

    .text-title-blue-md {
        font-size: 27px;
    }

    .text-title-small {
        font-size: 25px;
    }

    .body-container {
        padding-top: 200px;
    }

}



/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) and (max-width: 1630px) {
    .made-with-container {
        display: flex;
        gap: 3px;
        align-items: center;
        justify-content: flex-end;
        position: absolute;
        bottom: 10px;
        font-size: 12px;
        text-align: center;
    }


    .dsi-img {
        width: 20px;
    }

    .header-center-container {
        font-size: 16px;
    }

    .header-logo {
        width: 150px;
        height: 150px;
        top: 105px
    }

    .footer-container-mobile-parent {
        display: none;
    }

    .footer-container-mobile-logos {
        display: none
    }

    .header-container {
        height: 200px;
    }

    .footer-container {
        height: 120px;
    }

    .header-logo-container-desktop {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        justify-content: center;
        height: 200px;
    }

    .header-logo-container-mobile {
        display: none;
    }

    .main-logo {
        width: 200px;
        height: 200px;
    }

    input[type=text] {
        width: 100%;
    }

    input[type="checkbox"] {
        width: 20px;
    }

    .bgimg-content-mobile {
        display: none;
    }

    .text-title-white {
        font-size: 35px;
    }

    .text-title-white-md {
        font-size: 27px;
    }

    .text-title-blue {
        font-size: 35px;
    }

    .text-title-blue-md {
        font-size: 27px;
    }

    .text-title-small {
        font-size: 25px;
    }

    .body-container {
        padding-top: 140px;
    }

}

/* 
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
  */

@media (min-width: 1025px) and (max-width: 1280px) {

    .made-with-container {
        display: flex;
        gap: 3px;
        align-items: center;
        justify-content: flex-end;
        position: absolute;
        bottom: 10px;
        font-size: 12px;
        text-align: center;
    }


    .dsi-img {
        width: 20px;
    }

    .header-center-container {
        font-size: 16px;
    }

    .header-logo {
        width: 150px;
        height: 150px;
        top: 105px
    }

    .footer-container-mobile-parent {
        display: none;
    }

    .footer-container-mobile-logos {
        display: none
    }

    .header-container {
        height: 200px;
    }

    .footer-container {
        height: 120px;
    }

    .header-logo-container-desktop {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        justify-content: center;
        height: 200px;
    }

    .header-logo-container-mobile {
        display: none;
    }

    .main-logo {
        width: 200px;
        height: 200px;
    }

    input[type=text] {
        width: 100%;
    }

    input[type="checkbox"] {
        width: 20px;
    }

    .bgimg-content-mobile {
        display: none;
    }

    .text-title-white {
        font-size: 35px;
    }

    .text-title-white-md {
        font-size: 27px;
    }

    .text-title-blue {
        font-size: 35px;
    }

    .text-title-blue-md {
        font-size: 27px;
    }

    .text-title-small {
        font-size: 25px;
    }

    .body-container {
        padding-top: 100px;
    }


}

/* 
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1024px
  */

@media (min-width: 768px) and (max-width: 1024px) {
    .made-with-container {
        display: flex;
        gap: 3px;
        align-items: center;
        justify-content: flex-end;
        position: absolute;
        bottom: 10px;
        font-size: 12px;
        text-align: center;
    }


    .dsi-img {
        width: 20px;
    }

    .header-center-container {
        font-size: 10px;
        padding: 2px;
    }

    .header-logo {
        width: 150px;
        height: 150px;
        top: 105px
    }

    .footer-container-mobile-parent {
        display: none;
    }

    .footer-container-mobile-logos {
        display: none
    }

    .header-container {
        height: 200px;
    }

    .footer-container {
        height: 120px;
    }

    .header-logo-container-desktop {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        justify-content: center;
        height: 200px;
    }

    .header-logo-container-mobile {
        display: none;
    }

    .main-logo {
        width: 200px;
        height: 200px;
    }

    input[type=text] {
        width: 100%;
    }

    input[type="checkbox"] {
        width: 20px;
    }

    .bgimg-content-mobile {
        display: none;
    }

    .text-title-white {
        font-size: 35px;
    }

    .text-title-white-md {
        font-size: 27px;
    }

    .text-title-blue {
        font-size: 35px;
    }

    .text-title-blue-md {
        font-size: 27px;
    }

    .text-title-small {
        font-size: 25px;
    }

    .body-container {
        padding-top: 10px;
    }

}

/* 
    ##Device = Tablets, Ipads (landscape)
    ##Screen = B/w 768px to 1024px
  */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .made-with-container {
        display: flex;
        gap: 3px;
        align-items: center;
        justify-content: flex-end;
        position: absolute;
        bottom: 10px;
        font-size: 12px;
        text-align: center;
    }


    .dsi-img {
        width: 20px;
    }

    .header-center-container {
        font-size: 13px;
    }

    .header-logo {
        width: 150px;
        height: 150px;
        top: 105px
    }

    .footer-container-mobile-parent {
        display: none;
    }

    .footer-container-mobile-logos {
        display: none
    }

    .header-container {
        height: 200px;
    }

    .footer-container {
        height: 120px;
    }

    .header-logo-container-desktop {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        justify-content: center;
        height: 200px;
    }

    .header-logo-container-mobile {
        display: none;
    }

    .main-logo {
        width: 200px;
        height: 200px;
    }

    input[type=text] {
        width: 100%;
    }

    input[type="checkbox"] {
        width: 20px;
    }

    .bgimg-content-mobile {
        display: none;
    }

    .text-title-white {
        font-size: 35px;
    }

    .text-title-white-md {
        font-size: 27px;
    }

    .text-title-blue {
        font-size: 35px;
    }

    .text-title-blue-md {
        font-size: 27px;
    }

    .text-title-small {
        font-size: 25px;
    }

    .body-container {
        padding-top: 50px;
    }

}

/* 
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
  */

@media (min-width: 481px) and (max-width: 767px) {
    .made-with-container {
        width: 100%;
        display: flex;
        gap: 3px;
        align-items: center;
        justify-content: flex-end;
        position: absolute;
        bottom: -15px;
        font-size: 10px;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }


    .dsi-img {
        width: 17px;
    }

    .header-logo {
        width: 100px;
        height: 100px;
        top: 100px;
    }

    .footer-container-desktop {
        display: none;
    }

    .footer-container-mobile>div {
        padding: 5px;
        text-align: center;
    }

    .header-container {
        height: 190px;
    }

    .footer-container {
        height: 100px;
    }

    .main-logo {
        width: 200px;
        height: 200px;
    }

    .header-logo-container-desktop {
        display: none;
    }

    .header-logo-container-mobile {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: center;
        height: 120px;
    }

    .body-container {
        padding: 140px;
    }

    input[type=text] {
        width: 100%;
    }

    input[type="checkbox"] {
        width: 50px;
    }

    .bgimg-content-desktop {
        display: none;
    }


    .text-title-white {
        font-size: 15px;
    }

    .text-title-blue {
        font-size: 15px;
    }

    .text-title-small {
        font-size: 13px;
    }

    .header-center-container {
        font-size: 16px;
        padding: 2px;
    }

}

/* 
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
  */

@media (min-width: 320px) and (max-width: 480px) {
    .made-with-container {
        width: 100%;
        display: flex;
        gap: 3px;
        align-items: center;
        justify-content: flex-end;
        position: absolute;
        bottom: -15px;
        font-size: 10px;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }


    .dsi-img {
        width: 17px;
    }

    .header-logo {
        width: 100px;
        height: 100px;
        top: 100px;
    }

    .footer-container-desktop {
        display: none;
    }

    .footer-container-mobile>div {
        padding: 5px;
        text-align: center;
    }

    .header-container {
        height: 190px;
    }

    .footer-container {
        height: 100px;
    }

    .main-logo {
        width: 200px;
        height: 200px;
    }

    .header-logo-container-desktop {
        display: none;
    }

    .header-logo-container-mobile {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: center;
        height: 120px;
    }

    .body-container {
        padding: 0px 32px 60px 32px;
    }

    input[type=text] {
        width: 100%;
    }

    input[type="checkbox"] {
        width: 50px;
    }

    .bgimg-content-desktop {
        display: none;
    }


    .text-title-white {
        font-size: 15px;
    }

    .text-title-blue {
        font-size: 15px;
    }

    .text-title-small {
        font-size: 13px;
    }

    .header-center-container {
        font-size: 10px;
        padding: 2px;
    }

}