* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}


.fieldControl:focus,
.fieldSelect:focus {
    box-shadow: initial !important;
    outline: none !important;
    border: 2px solid var(--primarycolor);
}

@font-face {
    font-family: "poppinsbold";
    src: url("../fonts/poppins-bold.eot");
    src: url("../fonts/poppins-bold.eot?#iefix") format("embedded-opentype"),
        url("../fonts/poppins-bold.woff2") format("woff2"),
        url("../fonts/poppins-bold.woff") format("woff"),
        url("../fonts/poppins-bold.ttf") format("truetype"),
        url("../fonts/poppins-bold.svg") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "poppinsextrabold";
    src: url("../fonts/poppins-extrabold.eot");
    src: url("../fonts/poppins-extrabold.eot?#iefix") format("embedded-opentype"),
        url("../fonts/poppins-extrabold.woff2") format("woff2"),
        url("../fonts/poppins-extrabold.woff") format("woff"),
        url("../fonts/poppins-extrabold.ttf") format("truetype"),
        url("../fonts/poppins-extrabold.svg") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "poppinsextralight";
    src: url("../fonts/poppins-extralight.eot");
    src: url("../fonts/poppins-extralight.eot?#iefix") format("embedded-opentype"),
        url("../fonts/poppins-extralight.woff2") format("woff2"),
        url("../fonts/poppins-extralight.woff") format("woff"),
        url("../fonts/poppins-extralight.ttf") format("truetype"),
        url("../fonts/poppins-extralight.svg") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "poppinslight";
    src: url("../fonts/poppins-light.eot");
    src: url("../fonts/poppins-light.eot?#iefix") format("embedded-opentype"),
        url("../fonts/poppins-light.woff2") format("woff2"),
        url("../fonts/poppins-light.woff") format("woff"),
        url("../fonts/poppins-light.ttf") format("truetype"),
        url("../fonts/poppins-light.svg") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "poppinsmedium";
    src: url("../fonts/poppins-medium.eot");
    src: url("../fonts/poppins-medium.eot?#iefix") format("embedded-opentype"),
        url("../fonts/poppins-medium.woff2") format("woff2"),
        url("../fonts/poppins-medium.woff") format("woff"),
        url("../fonts/poppins-medium.ttf") format("truetype"),
        url("../fonts/poppins-medium.svg") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "poppinsregular";
    src: url("../fonts/poppins-regular.eot");
    src: url("../fonts/poppins-regular.eot?#iefix") format("embedded-opentype"),
        url("../fonts/poppins-regular.woff2") format("woff2"),
        url("../fonts/poppins-regular.woff") format("woff"),
        url("../fonts/poppins-regular.ttf") format("truetype"),
        url("../fonts/poppins-regular.svg") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "poppinssemibold";
    src: url("../fonts/poppins-semibold.eot");
    src: url("../fonts/poppins-semibold.eot?#iefix") format("embedded-opentype"),
        url("../fonts/poppins-semibold.woff2") format("woff2"),
        url("../fonts/poppins-semibold.woff") format("woff"),
        url("../fonts/poppins-semibold.ttf") format("truetype"),
        url("../fonts/poppins-semibold.svg") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "poppinsthin";
    src: url("../fonts/poppins-thin.eot");
    src: url("../fonts/poppins-thin.eot?#iefix") format("embedded-opentype"),
        url("../fonts/poppins-thin.woff2") format("woff2"),
        url("../fonts/poppins-thin.woff") format("woff"),
        url("../fonts/poppins-thin.ttf") format("truetype"),
        url("../fonts/poppins-thin.svg") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


:root {
    --ffpoppinsthin: 'poppinsthin';
    --ffpoppinsxl: 'poppinsextralight';
    --ffpoppinsl: 'poppinslight';
    --ffpoppinsr: 'poppinsregular';
    --ffpoppinsm: 'poppinsmedium';
    --ffpoppinssb: 'poppinssemibold';
    --ffpoppinsb: 'poppinsbold';
    --ffpoppinsxb: 'poppinsextrabold';



    --blackcolor: #ffffff;
    --whitecolor: #ffffff;
    --primarycolor: #0870c3;
    --secondarycolor: #d7eef7;

    --fs16: 16px;
    --fs24: 24px;
    --fs32: 32px;
    --fs40: 40px;
    --fs50: 50px;
    --fs60: 60px;
    --fs80: 80px;
}

h1 {
    font-family: var(--ffpoppinsr);
}

body {
    height: 100vh;
    /* overflow: hidden; */
    background-color: var(--secondarycolor);
}

.wrapper {
    max-width: 600px;
    margin: 0 auto;
    background: url('../img/bg-gradient.png') no-repeat top center/cover;
    height: 100%;
}

.wrapper .header {
    padding: 30px;
}

.wrapper .header .imgLogo {
    max-width: 250px;
}

.wrapper .mainContent {
    padding: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 101px);
}

.wrapper .mainContent .innerContent {
    height: calc(100vh - 101px);
    width: 100%;
    max-width: 500px;
    padding: 100px 0;
}

.wrapper .mainContent .innerContent .headTitle {
    color: var(--primarycolor);
    font-size: var(--fs60);
    font-family: var(--ffpoppinsxb);
    margin: 0 0 50px;
}

.wrapper .mainContent .innerContent .thumbnail {
    height: 400px;
    width: 300px;
}

.wrapper .mainContent .innerContent .thumbnail .imgThumb {
    aspect-ratio: 5/9;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wrapper .mainContent .innerContent .fillForm {
    width: 100%;
    height: 100%;
    padding: 0 10px;
    max-width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.wrapper .mainContent .innerContent .fillForm .formGrp {
    width: 100%;
}

.wrapper .mainContent .innerContent .fillForm .formGrp:not(:last-child) {
    margin: 0 0 30px;
}

.wrapper .mainContent .innerContent .fillForm .formGrp .fieldControl,
.fieldSelect {
    height: 40px;
    border-radius: 10px;
    border: 2px solid var(--primarycolor);
    color: var(--primarycolor);
    font-family: var(--ffpoppinssb);
    font-size: var(--fs16);
    background-color: transparent;
    outline: none;
    width: 100%;
    padding: 10px;
    text-align: center;
    caret-color: var(--primarycolor);
}

.fieldSelect {
    padding: 0 10px;
    margin:0 auto;

}

.wrapper .mainContent .innerContent .fillForm .formGrp .fieldControl::placeholder {
    color: var(--primarycolor)
}

.wrapper .mainContent .innerContent .fillForm .formGrp .fieldControl.required::placeholder::after {
    /* Style for the asterisk */
    content: "*";
    color: red;
    margin-left: 2px;
    /* Adjust as needed */
}


.btnPrimary {
    background-color: var(--primarycolor);
    border: 2px solid var(--primarycolor);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--whitecolor);
    font-size: var(--fs16);
    font-family: var(--ffpoppinsr);
    padding: 10px 40px;
    outline: 2px solid var(--primarycolor) !important;
    outline-offset: 3px !important;
    border-radius: 10px;
    cursor: pointer;
}

.hasAsterisk::after {
    content: "*";
    color: red;
    margin-left: 2px;
}

/*------------------------------------------ validation toast style ----------------------------------- */

#snackbar {
    visibility: hidden;
    min-width: 300px;
    background-color: var(--primarycolor);
    color: var(--whitecolor);
    text-align: center;
    border-radius: 16px;
    padding: 16px;
    position: fixed;
    z-index: 9999999;
    left: 50%;
    top: 30px;
    font-size: 14px;
    transform: translate(-50%, -10%);
    opacity: 0;
    transition: 0.25s all ease;
    font-weight: 600;
    font-family: var(--ffpoppinsb);
}

/* START > PRELOADER */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    background-color: #000000ba;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.spinner {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: conic-gradient(#0000 10%, var(--secondarycolor));
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
    animation: s3 1s infinite linear;
}

@keyframes s3 {
    to {
        transform: rotate(1turn);
    }
}

/* END > PRELOADER */

#snackbar.show {
    visibility: visible;
    opacity: 1;
    animation: fadein 0.25s, fadeout 0.25s 2.5s;
    transition: 0.5s all ease;
}

.customVideo,.customImg {
    max-width: 100%;
    width: 300px;
    height: 400px;
    object-fit: cover;
}

/* -------------------------------------Best View in Portrait Mobile Mode----------------------- */
@media screen and (min-aspect-ratio: 13/9) {
    .messagewapper {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        text-align: center;
        z-index: 9999999;
        display: block;
        background-color: var(--secondarycolor);
    }

    .messagewapper .box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .messagewapper .box .logo1 {
        width: 250px;
        height: auto;
        margin: 0px auto 5px auto;
    }

    .messagewapper .box h2 {
        color: white;
        font-size: var(--fs24);
        text-align: center;
        padding-top: 24px;
        font-family: var(--ffpoppinsb);
        color: var(--primarycolor)
    }

    .logo1 img {
        width: 220px;
    }
}

@media screen and (max-aspect-ratio: 13/9) {
    .messagewapper {
        display: none;
    }
}

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

@media (max-width:767px) {
    .wrapper .mainContent .innerContent .thumbnail {
        height: auto;
        width: 100%;
    }

    .wrapper .mainContent .innerContent .headTitle {
        font-size: var(--fs40);
    }

    .customVideo {
        height: 300px;
    }

    .customImg{
        height: 100%;
    }
}


/* START >>>>> IPHONE DEVICE */
/* iphone SE 326ppi */
@media all and (min-device-width: 320px) and (max-device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
    .fieldSelect {
        text-align: center !important;
        text-align: -webkit-center;
    }
}

/* iphone SE, 6, 6s, 7, 8 326ppi */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) {
    .fieldSelect {
        text-align: center !important;
        text-align: -webkit-center;
    }
}

/* iphone X , XS, 11 Pro, 12 Mini, 13 Mini, 14 Mini 476ppi */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    .fieldSelect {
        text-align: center !important;
        text-align: -webkit-center;
    }
}

/* iphone 12, 12 Pro, 13, 13 Pro, 14, 14 Pro, 14 Pro Max 460ppi */
@media only screen and (min-device-width: 390px) and (max-device-height: 844px) and (-webkit-device-pixel-ratio: 3) {
    .fieldSelect {
        text-align: center !important;
        text-align: -webkit-center;
    }
}

/* iphone 14 & 15 Pro >> 460ppi  */
@media only screen and (min-device-width: 393px) and (max-device-height: 852px) and (-webkit-device-pixel-ratio: 3) {
    .fieldSelect {
        text-align: center !important;
        text-align: -webkit-center;
    }
}

/* iphone 6+, 6s+, 7+, 8+ */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) {
    .fieldSelect {
        text-align: center !important;
        text-align: -webkit-center;
    }
}

/* iphone 11 326ppi */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
    .fieldSelect {
        text-align: center !important;
        text-align: -webkit-center;
    }
}

/* iphone XS Max, 11 Pro Max, 12 Pro Max > 458ppi */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
    .fieldSelect {
        text-align: center !important;
        text-align: -webkit-center;
    }
}

/* iphone X, XS Max, 11 Pro, 11 Pro Max, 12 Pro Max, 13 Pro Max, 14+ > 458ppi */
@media only screen and (min-device-width: 428px) and (max-device-height: 926px) and (-webkit-device-pixel-ratio: 3) {
    .fieldSelect {
        text-align: center !important;
    }
}

/* iphone 14 & 15 Pro Max>> 460ppi  */
@media only screen and (min-device-width: 430px) and (max-device-height: 932px) and (-webkit-device-pixel-ratio: 3) {
    .fieldSelect {
        text-align: center !important;
        text-align: -webkit-center;
    }
}

/* END >>>>> IPHONE DEVICE */

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .fieldSelect{
      text-align-last: center; /* Align the text within options */
      text-align: -webkit-center;
    }
  }