:root {
    --app-height: 100%;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.ttf') format('truetype');
    font-style: normal;
}

@font-face {
    font-family: 'PoppinsBlack';
    src: url('../fonts/Poppins-Black.ttf') format('truetype');
    font-style: normal;
}

@font-face {
    font-family: 'PoppinsBold';
    src: url('../fonts/Poppins-Bold.ttf') format('truetype');
    font-style: normal;
}

@font-face {
    font-family: 'PoppinsSemiBold';
    src: url('../fonts/Poppins-SemiBold.ttf') format('truetype');
    font-style: normal;
}

.banner {
    width: 100%;
}

html {
    font-family: 'Poppins';
    background-color: #090909;
    scroll-snap-type: y mandatory;
}

.modal-header,
.modal-body {
    font-family: "Poppins";
}

body {
    position: fixed;
    height: 100%
}

.logo-image {
    width: 130px;
    height: 45.23px !important;
}

.subtitle {
    line-height: 24px;
    font-size: 14px;
}

.welcome {
    font-size: 38px;
    font-family: 'PoppinsSemiBold';
}

#home {
    padding: 28px 58px 22px 28px;
}

.video-box {
    display: flex;
    align-items: start;
    justify-content: center;
    scroll-snap-align: start;
    background-color: #000;
    height: var(--app-height);
}

.video-box video {
    box-sizing: border-box;
    margin: 0;
    /* height: 100vh; */
    /* max-width: 100%; */
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* .video-box img {
    box-sizing: border-box;
    padding: 8px;
    margin: 0 auto;
    height: 100vh;
    max-width: 100%;
} */

.ab {
    position: absolute;
    z-index: 11;
    width: 100vw;
    text-align: center;
}

.bounce2 {
    animation: bounce2 2s ease infinite;
}

@keyframes bounce2 {
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

.shake {
    animation: shake 2s ease infinite;
}

@keyframes shake {
    0%,
    100% {
        transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-10px);
    }
    20%,
    40%,
    60%,
    80% {
        transform: translateX(10px);
    }
}

.swing {
    transform-origin: top center;
    animation: swing 2s ease infinite;
}

@keyframes swing {
    20% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(5deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.hithere {
    animation: 1s hithere ease-in-out infinite;
}

@keyframes hithere {
    30% {
        transform: scale(1.2);
    }
    40%,
    60% {
        transform: rotate(-20deg) scale(1.2);
    }
    50% {
        transform: rotate(20deg) scale(1.2);
    }
    70% {
        transform: rotate(0deg) scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.bounce {
    animation: bounce 2s ease infinite;
}

@keyframes bounce {
    70% {
        transform: translateY(0%);
    }
    80% {
        transform: translateY(-15%);
    }
    90% {
        transform: translateY(0%);
    }
    95% {
        transform: translateY(-7%);
    }
    97% {
        transform: translateY(0%);
    }
    99% {
        transform: translateY(-3%);
    }
    100% {
        transform: translateY(0);
    }
}

.btn-wa {
    position: fixed;
    right: 20px;
    bottom: 20px;
    border-radius: 22px;
    color: #fff;
    background-image: linear-gradient(120deg, #52EC6E, #31CD4E);
    padding: 8px 12px 8px 12px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    text-decoration: none;
}

.btn-wa1 {
    border-radius: 22px;
    color: #fff;
    background-image: linear-gradient(120deg, #52EC6E, #31CD4E);
    padding: 8px 12px 8px 12px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    text-decoration: none;
    width: 100% !important;
}

.cfixed {
    position: absolute;
    z-index: 11;
    width: 100%;
    top: 0;
    left: 0;
    height: 92px;
    padding: 28px 24px 12px 24px;
    align-self: center;
}

.cfixedb {
    position: absolute;
    z-index: 11;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 28px 0px 22px 16px;
    align-self: center;
}

.cfixed1 {
    position: absolute;
    z-index: 11;
    width: 100%;
    top: calc(var(--app-height));
    left: 0;
    height: 92px;
    padding: 28px 24px 12px 24px;
    align-self: center;
}

.cfixedb1 {
    position: absolute;
    z-index: 11;
    width: 100%;
    bottom: calc(-1*var(--app-height));
    left: 0;
    padding: 28px 0px 22px 16px;
    align-self: center;
}

.cfixed2 {
    position: absolute;
    z-index: 11;
    width: 100%;
    top: calc(2*var(--app-height));
    left: 0;
    height: 92px;
    padding: 28px 24px 12px 24px;
    align-self: center;
}

.cfixedb2 {
    position: absolute;
    z-index: 11;
    width: 100%;
    bottom: calc(-2*var(--app-height));
    left: 0;
    padding: 28px 0px 22px 16px;
    align-self: center;
}

.cflex {
    position: flex;
    height: 100%;
    justify-content: space-between;
}

.cflex img {
    width: 130px;
}

marquee {
    color: #fff;
    margin-left: auto;
}

.cfixed a {
    position: absolute;
    z-index: 11;
    right: 24px;
}

.btn-nb {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    padding: 7px 12px 7px 12px;
    pointer-events: none;
}

.h7 {
    font-size: 13px;
}

.gelatine {
    animation: gelatine 0.5s infinite;
}

@keyframes gelatine {
    from,
    to {
        transform: scale(1, 1);
    }
    25% {
        transform: scale(0.9, 1.1);
    }
    50% {
        transform: scale(1.1, 0.9);
    }
    75% {
        transform: scale(0.95, 1.05);
    }
}

.counter {
    background-color: #fff8f0;
    padding: 20px 0;
    border-radius: 38px;
}

.count-title {
    font-size: 40px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 0;
    text-align: center;
    font-family: "Poppins";
}

.count-text {
    font-size: 13px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 0;
    text-align: center;
    font-family: "Poppins";
}

.fa-2x {
    margin: 0 auto;
    float: none;
    display: table;
    color: #F1723C;
}

.main-title {
    font-size: 12px;
    font-family: 'Poppins';
    color: #fff;
}