@charset "UTF-8";

.bg-apple-10 {
    background-color: #78bd43; /* fallback for old browsers */
    background: rgba(120, 189, 67, 0.1);
}

.bg-apple-20 {
    background-color: #78bd43; /* fallback for old browsers */
    background: rgba(120, 189, 67, 0.2);
}

.bg-apple-30 {
    background-color: #78bd43; /* fallback for old browsers */
    background: rgba(120, 189, 67, 0.3);
}

.bg-apple-40 {
    background-color: #78bd43; /* fallback for old browsers */
    background: rgba(120, 189, 67, 0.4);
}

.bg-apple-50 {
    background-color: #78bd43; /* fallback for old browsers */
    background: rgba(120, 189, 67, 0.5);
}

.bg-apple-60 {
    background-color: #78bd43; /* fallback for old browsers */
    background: rgba(120, 189, 67, 0.6);
}

.bg-apple-70 {
    background-color: #78bd43; /* fallback for old browsers */
    background: rgba(120, 189, 67, 0.7);
}

.bg-apple-80 {
    background-color: #78bd43; /* fallback for old browsers */
    background: rgba(120, 189, 67, 0.8);
}

.bg-apple-90 {
    background-color: #78bd43; /* fallback for old browsers */
    background: rgba(120, 189, 67, 0.9);
}

.bg-apple-100 {
    background-color: #78bd43; /* fallback for old browsers */
    background: rgba(120, 189, 67, 1);
}

.bg-apple-grad {
    background-color: #78bd43; /* fallback for old browsers */
    background: linear-gradient(0deg, rgba(120, 189, 67, 0.4), rgba(120, 189, 67, 0));
}

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

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

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

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

.hero-apple-circle-wrapper .hero-apple-circle-one {
    border: 0.786px solid #00964C;
    background-color: #00964C;
}

.footer-7::before {
    border: 1px solid #78bd43;
    opacity: 0.2;
    background: radial-gradient(55.14% 55.9% at 50% 35.04%, #78bd43 0%, rgba(120, 189, 67, 0) 76.7%);
}

.clr-primary-key {
    color: #78bd43;
}

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

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

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

.dark-overlay::after {
    background: linear-gradient(90deg, #b8d9a3  0%, rgba(175, 211, 152, 0) 48.35%, #b8d9a3 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-apple-grad {
    background-color: #78bd43; /* fallback for old browsers */
    background: linear-gradient(0deg, rgba(120, 189, 67, 0.9), rgba(120, 189, 67, 0.6));
}

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

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

}


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

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

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

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

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

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

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

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

.hero-apple .hero-apple-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-apple .hero-apple-main-cirlce {
        inset-block-start: -128%;
    }
}

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

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

.hero-apple .hero-apple-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: #77be43;
    z-index: -1;
}

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

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

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

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

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

.hero-apple-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: #C9BFFF;
    z-index: -1;
}

.hero-apple-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, #78BD43 0%, rgba(174, 43, 255, 0) 100%);
    z-index: -1;
    filter: blur(200px);
}

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

@media (min-width: 576px) {
    .hero-apple-video-wrapper .hero-apple-video-wrapper-inner {
        height: 302px;
        background-color: #48454E;
    }
}

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

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

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

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

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

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

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

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

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

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

.hero-apple-circle-wrapper .hero-apple-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 #CB3694;
    background-color: #CB3694;
    opacity: 1;
    z-index: -3;
}

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

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

.hero-apple-circle-wrapper .hero-apple-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-apple-circle-wrapper .hero-apple-radar {
        width: 320px;
        height: 320px;
    }
}

.hero-apple-circle-wrapper .hero-apple-radar::before {
    position: absolute;
    content: "";
    inset-block-start: 0;
    inset-inline-start: 0;
    background: linear-gradient(247deg, #78BD43 -50.02%, rgba(120, 189, 67, 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-apple-circle-wrapper .hero-apple-radar .animated-text-wrapper {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 9;
    margin-top: 2.375rem;
}

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

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

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

.hero-apple-circle-wrapper .hero-apple-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, #2FA0DA 4.85%, #CB3694 95.15%);
    z-index: -1;
}

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

/*End Mobile Portrait*/