@charset "UTF-8";

.bg-lava-10 {
    background-color: #c72327; /* fallback for old browsers */
    background: rgba(199, 35, 39, 0.1);
}

.bg-lava-20 {
    background-color: #c72327; /* fallback for old browsers */
    background: rgba(199, 35, 39, 0.2);
}

.bg-lava-30 {
    background-color: #c72327; /* fallback for old browsers */
    background: rgba(199, 35, 39, 0.3);
}

.bg-lava-40 {
    background-color: #c72327; /* fallback for old browsers */
    background: rgba(199, 35, 39, 0.4);
}

.bg-lava-50 {
    background-color: #f15928; /* fallback for old browsers */
    background: rgba(241, 89, 40, 1);
}

.bg-lava-60 {
    background-color: #c72327; /* fallback for old browsers */
    background: rgba(199, 35, 39, 0.6);
}

.bg-lava-70 {
    background-color: #c72327; /* fallback for old browsers */
    background: rgba(199, 35, 39, 0.7);
}

.bg-lava-80 {
    background-color: #c72327; /* fallback for old browsers */
    background: rgba(199, 35, 39, 0.8);
}

.bg-lava-90 {
    background-color: #c72327; /* fallback for old browsers */
    background: rgba(199, 35, 39, 0.9);
}

.bg-lava-100 {
    background-color: #c72327; /* fallback for old browsers */
    background: rgba(199, 35, 39, 1);
}

.bg-lava-grad {
    background-color: #c72327; /* fallback for old browsers */
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 1))
}

h2.clr-white {
    font-size: 4rem;
}

h1.clr-white {
    font-size: 6rem;
}
.hero-lava-video-wrapper .hero-lava-video-frame {
    inset-block-end: -24%;
}

.hero-lava-video-wrapper .hero-lava-video-wrapper-inner {
    height: 462px;
}

.hero-lava-circle-wrapper .hero-lava-circle-two {
    border: 0.786px solid #f15928;
    background-color: #f15928;
}

.hero-lava-circle-wrapper .hero-lava-circle-one {
    border: 0.786px solid #84161a;
    background-color: #84161a;
}

.footer-7::before {
    border: 1px solid #c72327;
    opacity: 0.2;
    background: radial-gradient(55.14% 55.9% at 50% 35.04%, #c72327 0%, rgba(199, 35, 39, 0) 76.7%);
}

.clr-primary-key {
    color: #c72327;
}

.dk-bg-holder {
    z-index: -10;
    position: relative;
}

.circle-btn.welcome-img-btn {
    z-index: 1;
}

.circle-btn__text::after {
    background: linear-gradient(0deg, #3e1a0e 0%, #3e1a0e 100%);
}

.dark-overlay::after {
    background: linear-gradient(90deg, #f15928  0%, rgba(175, 211, 152, 0) 48.35%, #f15928 100.91%);
}











/*Begin Mobile Portrait*/

@media only screen and (max-width: 480px) {
    
h2.clr-white {
    font-size: 3rem;
}

h1.clr-white {
    font-size: 5rem;
}

.bg-lava-grad {
    background-color: #c72327; /* fallback for old browsers */
    background: linear-gradient(0deg, rgba(199, 35, 39, 0.9), rgba(199, 35, 39, 0.6));
}

.hero-lava-video-wrapper .hero-lava-video-frame {
    max-width: none;
    inset-inline-start: -15%;
}

.hero-lava-video-wrapper .hero-lava-video-wrapper-inner {
    height: 342px;
}

}


.hero-lava {
    padding-block-start: 4.6875rem;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.hero-lava::before,
.hero-lava::after {
    position: absolute;
    content: "";
    border-radius: 50%;
    filter: blur(97.87px);
    opacity: 0.2;
}

.hero-lava::before {
    background: linear-gradient(76deg, #f6ed1f 13.64%, #f58b22 46.53%, #e8212a 78.88%);
    width: 1301.75px;
    height: 498px;
    inset-block-start: -390px;
    inset-inline-start: 0;
    animation: gradientLeftRight 5s linear infinite;
}

.hero-lava::after {
    background: linear-gradient(95deg, #f58b22 8.97%, #e8212a 94.65%);
    width: 1045.54px;
    height: 498px;
    inset-block-start: -390px;
    inset-inline-end: 0;
    animation: gradientRightLeft 5s ease infinite;
}

.hero-lava .hero-lava-shape {
    position: absolute;
    z-index: -1;
}

.hero-lava .hero-lava-shape-top-line {
    inset-block-start: 0;
    inset-inline-start: 50%;
    transform: translateX(-50%);
}

.hero-lava .hero-lava-shape-top-dots {
    inset-block-start: 0;
    inset-inline-start: 50%;
    transform: translateX(-50%);
}

.hero-lava .hero-lava-shape-text {
    inset-inline-start: 50%;
    inset-block-start: 13%;
    transform: translateX(-50%);
}

.hero-lava .hero-lava-main-cirlce {
    position: absolute;
    inset-block-start: -150%;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 2031px;
    height: 1655px;
    isolation: isolate;
}

@media (min-width: 992px) {
    .hero-lava .hero-lava-main-cirlce {
        inset-block-start: -128%;
    }
}

@media (min-width: 1200px) {
    .hero-lava .hero-lava-main-cirlce {
        inset-block-start: -112%;
    }
}

@media (min-width: 1400px) {
    .hero-lava .hero-lava-main-cirlce {
        inset-block-start: -75%;
    }
}

.hero-lava .hero-lava-main-cirlce::before {
    position: absolute;
    content: "";
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: 0.5;
    background: #c72327;
    z-index: -1;
}

.hero-lava .hero-lava-main-cirlce-left {
    position: absolute;
    width: 491.624px;
    height: 420.945px;
    transform: rotate(23.505deg);
    background-color: #84161a;
    opacity: 0.3;
    filter: blur(100px);
    inset-block-end: 2%;
    inset-inline-start: 0;
    z-index: -2;
    animation: bgAnimeOne 5s infinite linear;
}

.hero-lava .hero-lava-main-cirlce-right {
    position: absolute;     
    width: 491.624px;
    height: 420.945px;
    transform: rotate(23.505deg);
    background-color: #3e1a0e;
    opacity: 0.3;
    filter: blur(100px);
    inset-block-end: 2%;
    inset-inline-end: 0;
    z-index: -2;
    animation: bgAnimeTwo 5s infinite linear;
}

.hero-lava-video-main {
    position: relative;
    z-index: 3;
    margin-block-start: -165px;
}

@media (min-width: 576px) {
    .hero-lava-video-main {
        margin-block-start: -400px;
    }
}

.hero-lava-video-wrapper {
    position: relative;
    padding-block: 1.125rem;
    padding-inline: 1.0625rem;
    isolation: isolate;
}

.hero-lava-video-wrapper::before {
    position: absolute;
    content: "";
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    border-radius: 1.5rem;
    opacity: 0.1;
    background-color: #8a5e3b;
    z-index: -1;
}

.hero-lava-video-wrapper::after {
    position: absolute;
    content: "";
    inset-block-start: 90%;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 1168px;
    height: 497px;
    border-radius: 1168px;
    opacity: 0.5;
    background: linear-gradient(180deg, #c72327 0%, rgba(174, 43, 255, 0) 100%);
    z-index: -1;
    filter: blur(200px);
}

.hero-lava-video-wrapper .hero-lava-video-wrapper-inner {
    height: 220px;
    border-radius: 1.5rem;
    overflow: hidden;
}

@media (min-width: 576px) {
    .hero-lava-video-wrapper .hero-lava-video-wrapper-inner {
        height: 302px;
        background-color: #8a5e3b;
    }
}

@media (min-width: 768px) {
    .hero-lava-video-wrapper .hero-lava-video-wrapper-inner {
        height: 414px;
    }
}

@media (min-width: 992px) {
    .hero-lava-video-wrapper .hero-lava-video-wrapper-inner {
        height: 367px;
    }
}

@media (min-width: 1200px) {
    .hero-lava-video-wrapper .hero-lava-video-wrapper-inner {
        height: 439px;
    }
}

@media (min-width: 1400px) {
    .hero-lava-video-wrapper .hero-lava-video-wrapper-inner {
        height: 514px;
    }
}

.hero-lava-video-wrapper .hero-lava-video-frame {
    position: absolute;
    inset-block-end: -38%;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: -1;
}

.hero-lava-circle-wrapper {
    position: relative;
    isolation: isolate;
    width: 300px;
    height: 300px;
    margin-inline: auto;
    z-index: 1;
}

@media (min-width: 576px) {
    .hero-lava-circle-wrapper {
        width: 400px;
        height: 400px;
    }
}

@media (min-width: 1400px) {
    .hero-lava-circle-wrapper {
        width: 500px;
        height: 500px;
    }
}

.hero-lava-circle-wrapper .hero-lava-circle {
    position: absolute;
    border-radius: 50%;
}

.hero-lava-circle-wrapper .hero-lava-circle-one {
    width: 100%;
    height: 100%;
    inset-block: 0;
    inset-inline: 0;
    border: 0.786px solid #c72327;
    background-color: #c72327    ;
    opacity: 1;
    z-index: -4;
}

.hero-lava-circle-wrapper .hero-lava-circle-two {
    position: absolute;
    width: calc(100% - 70px);
    height: calc(100% - 70px);
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    border: 0.786px solid #f15928;
    background-color: #f15928;
    opacity: 1;
    z-index: -3;
}

@media (min-width: 1400px) {
    .hero-lava-circle-wrapper .hero-lava-circle-two {
        width: calc(100% - 150px);
        height: calc(100% - 150px);
    }
}

.hero-lava-circle-wrapper .hero-lava-circle-three {
    position: absolute;
    width: 407px;
    height: 407px;
    background: linear-gradient(180deg, #c72327 0%, rgba(199, 35, 39, 0) 100%);
    filter: blur(200px);
    border-radius: 50%;
    inset-block-start: 60%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    z-index: -2;
}

.hero-lava-circle-wrapper .hero-lava-radar {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    overflow: hidden;
}

@media (min-width: 576px) {
    .hero-lava-circle-wrapper .hero-lava-radar {
        width: 320px;
        height: 320px;
    }
}

.hero-lava-circle-wrapper .hero-lava-radar::before {
    position: absolute;
    content: "";
    inset-block-start: 0;
    inset-inline-start: 0;
    background: linear-gradient(247deg, #f6ed1f -50.02%, rgba(2465, 237, 31, 0) 54.9%);
    -webkit-clip-path: polygon(0 0, 50% 50%, 100% 0);
    clip-path: polygon(0 0, 50% 50%, 100% 0);
    width: 100%;
    height: 100%;
    animation: radar 5s infinite linear;
}

.hero-lava-circle-wrapper .hero-lava-radar .animated-text-wrapper {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 9;
    margin-top: 2.375rem;
}

.hero-lava-circle-wrapper .hero-lava-radar .animated-text-wrapper .cd-headline {
    border-radius: 8px;
    background: rgba(246, 147, 33, 0.12);
    font-size: 0.75rem;
    font-weight: 700;
    color: hsl(var(--white));
    padding-block: 0.25rem;
    padding-inline: 1rem;
}

.hero-lava-circle-wrapper .hero-lava-logo-wrapper {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    width: 106px;
    height: 106px;
}

.hero-lava-circle-wrapper .hero-lava-logo-wrapper::before {
    position: absolute;
    content: "";
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    border-radius: 40px;
    background: #f6ed1f;
    z-index: -1;
}

.hero-lava-circle-wrapper .hero-lava-logo-wrapper::after {
    position: absolute;
    content: "";
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 28px;
    background: linear-gradient(45deg, #f69321 4.85%, #f15928 95.15%);
    z-index: -1;
}

.hero-lava-circle-wrapper .hero-lava-logo-wrapper img {
    max-width: 40px;
    max-height: 30px;
}

.footer-7.black {
    background: rgba(0, 0, 0, 0.85);
}

@media (min-width: 1200px) {
    .footer-7 .footer-7-wrapper {
        background-image: url("../img/footer-lava-shape-bottom.png");
        border: none;
        background-color: transparent;
    }
}

.radar-logo-wrapper .radar::before {
    position: absolute;
    content: "";
    inset-block-start: 0;
    inset-inline-start: 0;
    background: linear-gradient(247deg, #f6ed1f -50.02%, rgba(2465, 237, 31, 0) 54.9%);
    -webkit-clip-path: polygon(0 0, 50% 50%, 100% 0);
    clip-path: polygon(0 0, 50% 50%, 100% 0);
    width: 100%;
    height: 100%;
    animation: radar 5s infinite linear;
}



/*End Mobile Portrait*/