@import url("https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap");
@import url("custom-classes.css");
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.img_wrap img {
    width: 100%;
    height: 450px;
    object-fit: cover;
}
.img_wrap_2 img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}
#card_view .col-md-7 {
    width: 60%;
}
#card_view .col-md-2 {
    width: 20%;
}
#card_view #big img {
    width: 100%;
    height: 230px;
    object-fit: cover;
}
#card_view img.small_img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}
.img_wrap::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(15deg, black, transparent);
}
.img_wrap_2::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(15deg, black, transparent);
}
.img_wrap_3 {
    height: 100px;
    /* width: 280px; */

    & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}
.img_wrap_women img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    aspect-ratio: 1;
}
.wrap_women {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}
#email.form-control,
#email.form-control:focus {
    background-color: var(--white);
    border: 1px solid var(--grey);
    border-radius: 0px;
    box-shadow: unset;
    padding: 10px 15px;
    margin-top: 20px;
}
#submit.form-control,
#submit.form-control:focus {
    background-color: var(--black);
    color: var(--white);
    width: 100%;
    border-radius: 0px;
    padding: 10px 15px;
    font-weight: 600;
    font-size: 14px;
    margin-top: 15px;
}
.wrap_sub img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    aspect-ratio: 1;
}
.logo img {
    width: 150px;
}
.main-nav .side-menu {
    position: absolute;
    background-color: var(--white);
    top: 0;
    left: -300px;
    width: 300px;
    transition: 0.3s;
}
.main-nav .side-menu .social .fb {
    background-color: #516eab;
}
.main-nav .side-menu .social .twitter {
    background-color: #29c5f6;
}
.main-nav .side-menu .social .youtube {
    background-color: #e14e42;
}
.main-nav .search-wrap {
    height: 0;
    background: var(--white);
    width: 100%;
    bottom: -103px;
    opacity: 0;
    z-index: 99999999;
    display: none;
}

.search-wrap::before {
    content: "";
    width: 15px;
    height: 15px;
    background: #ffffff;
    position: absolute;
    top: -4.5px;
    right: 0px;
    rotate: 45deg;
}
/* .main-nav .news-mega {
    position: absolute;
    background: transparent;
    width: 100%;
    height: 300px;
    z-index: 999;
    left: 0;
    bottom: -275px;
    padding-top: 29px;
    display: none;
} */
/* .btn-mega-news:hover{
    & .news-mega{
        display: block;
    }
}
.news-mega:hover{
    display: block;
} */

.slickArrowButtons .btnSlick {
    background-color: var(--blue);
    color: var(--white);
    width: 25px;
    aspect-ratio: 1;
    text-align: center;
    line-height: 25px;
    cursor: pointer;
    font-size: 12px;
}
.slickArrowButtons .btnSlick.slick-disabled {
    opacity: 0.5;
    pointer-events: none;
}
.background::after {
    /* content: url(../images/banner.png); */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    opacity: 7%;
}
.img_wrap_category img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    aspect-ratio: 1;
}
.social_icons a {
    background-color: var(--blue);
    width: 40px;
    height: 40px;
    display: grid;
    place-content: center;
    color: #fff;
    margin: 0;
}
.banner_wrap img {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    aspect-ratio: 1/0;
}
.author_socials a {
    background-color: var(--yellow);
    color: var(--white);
    height: 30px;
    width: 30px;
    display: grid;
    place-content: center;
}
#contact-form .form-control {
    border: 1px solid #d8d7d7;
    font-family: "Red Hat Display", sans-serif;
    font-size: 13px;
}

.contact-wrap .banner .sayHello {
    font-size: 10vw;
    text-align: center;
    font-weight: bold;
}
.contact-wrap .formCard {
    cursor: pointer;
    transition: 0.3s;
}
.formCard:hover,
.formCard.active {
    background-color: var(--blue);
    color: var(--white);
    transition: 0.3s;
}
.form-wrap input:not([type="checkbox"]),
.form-wrap textarea {
    width: 100%;
    border: none;
    border-bottom: 2px solid;
    font-size: 1.5vw;
}
.placeholder {
    font-style: italic;
    font-size: 14px;
    font-weight: bold;
}
input:focus-visible,
textarea:focus-visible {
    outline: none;
}

/* checkbox */
/* Hide the default checkbox */
input[type="checkbox"] {
    position: relative;
    width: 20px;
    height: 35px;
}

/* Create the custom checkbox with ::before */
input[type="checkbox"]::before {
    content: "";
    position: relative;
    display: inline-block;
    width: 20px; /* Size of the custom checkbox */
    height: 20px;
    border: 2px solid var(--blue); /* Border color */
    background-color: #fff; /* Background color */
    border-radius: 4px; /* Rounded corners */
    vertical-align: middle;
    margin-right: 10px; /* Space between checkbox and text */
}

/* Create the checkmark with ::after */
input[type="checkbox"]::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 8px;
    width: 8px;
    height: 14px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
}

/* Change checkbox style when checked */
input[type="checkbox"]:checked::before {
    background-color: var(--blue);
    border-color: var(--blue) 000;
}

/* Show checkmark when checked */
input[type="checkbox"]:checked::after {
    opacity: 1; /* Show the checkmark */
}

/* footer::before
{
    content: '';
    background-image: url('../images/footer.png');
    background-repeat: no-repeat;
    background-size: 100%, contain;
    background-position: bottom;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: .1;
    z-index: 0;
} */

.enterArrow {
    rotate: 90deg;
}
.inside_wrap {
    width: 100%;
    height: 310px;
    object-fit: contain;
    aspect-ratio: 1;
}
.inside_wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.authorinner {
    margin-top: 25px;
    border: 2px solid var(--black);
    border-radius: 50%;
    padding: 20px;
    max-width: 220px;
    max-height: 220px;
}
.blog_wrap {
    width: 175px;
    /* height: 110px; */
    object-fit: contain;
    aspect-ratio: 1;
}
.blog_wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.btn-border {
    border: 2px solid var(--black);
    padding: 5px 15px;
    margin: 5px;
}
.btn-border:hover {
    background-color: var(--black);
    color: var(--white) !important;
    transition: 0.3s ease;
}
.btn-border:hover a {
    background-color: var(--black);
    color: var(--white) !important;
    transition: 0.3s ease;
}
.icon_listing li {
    margin: 10px 0px;
}
.icon_wrap {
    width: 25px;
    height: 25px;
    object-fit: contain;
    aspect-ratio: 1;
}
#newsletter {
    background-color: var(--black);
}
.newslettter_input {
    background-color: transparent !important;
    color: var(--white);
    border: 0px !important;
    max-width: 65%;
}
.newslettter_input:focus,
.newslettter_input:focus-visible,
.newslettter_input:hover {
    box-shadow: unset;
}
#newsletter .btn-blue {
    background-color: var(--blue);
    color: var(--white);
    padding: 15px 25px;
    border-radius: 0px;
}
.border-white {
    border: 2px solid var(--white);
}
.card_img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    aspect-ratio: 1;
    border: 2px solid var(--black);
    overflow: hidden;
}
/* .border{
    border: 2px solid var(--black) !important;
} */
.rotate_animation {
    animation: rotate 10s linear infinite;
}
.card_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#content_blogs a:hover {
    color: var(--blue);
    transition: 0.3s ease;
}

.icon_wrap {
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    aspect-ratio: 1;
}
.text-height {
    min-height: 100px;
}
.item_wrap {
    width: 5rem;
    height: 5rem;
    object-fit: cover;
    aspect-ratio: 1;
}
.item_wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.time p {
    opacity: 40%;
}
.border-noraml {
    border: 2px solid var(--grey-primary);
}
#pricing_card li::before {
    position: absolute;
    content: url(../images/icons/icon9.svg);
    left: 0;
    transform: scale(0.8);
}
ul#pricing_card {
    min-height: 300px;
}
#list_items_submission {
    & ul {
        position: relative !important;
        & li {
            font-size: 15px;
            color: var(--black);
        }
        & li::before {
            content: url("../images/icons/check.png");
            position: absolute;
            left: -20px;
            transform: scale(0.7);
        }
    }
}
.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 20px; /* Adjust the top offset as needed */
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.slick-slide {
    height: auto !important;
}
.startupLogos .logo-slider .slick-track {
    display: flex;
    align-items: center;
}

#features .crd .wrap {
    background: var(--gradient);
    padding: 10px;
    border-radius: 10px;
    & img {
        filter: invert(1) brightness(50);
        margin-top: 10px;
    }
    & * {
        color: white;
    }
    & p {
        min-height: 140px;
        align-content: center;
    }
}

#features .crd:hover .wrap {
    background: white;
    border: 1px solid var(--blue);
    transition: 0.3s;
    & img {
        filter: unset;
        margin-top: 10px;
    }
    & * {
        color: var(--blue);
    }
}

.h-bg {
    position: absolute;
    left: 0;
    top: 30px;
    width: 100%;
    height: 100vh;
    z-index: -1;
    & .blur-effect {
        top: 130px;
        left: 100px;
    }
    & img {
        position: absolute;
        width: 30%;
        top: 0;
        right: 0;
        filter: blur(29px);
    }
}
/* .fff *{color: white} */
section.jc-hero {
    /* min-height: 85vh; */
}

section.img_desktop {
    /* height: 100vh; */
}

section.img_desktop .img-wrap {
    transform: rotateX(70deg);
    opacity: 0.5;
    transform-origin: center top;
}

.card-wrap {
    position: absolute;
    top: 0;
    height: 100vh;
    /* opacity: 0; */
}
.card-wrap-1 {
    top: 100vh;
}
.card-wrap-2 {
    top: 200vh;
}
.card-wrap-3 {
    top: 300vh;
}
.card-wrap-4 {
    top: 400vh;
}

.blur-effect {
    width: 500px;
    background: radial-gradient(#01175e57, var(--blue));
    position: absolute;
    top: 50%;
    left: 50%;
    height: 500px;
    transform: translate(-50%, -50%);
    filter: blur(100px);
    border-radius: 50%;
}
#pricingRow .col-md-4:nth-child(2) {
    & .border-cards {
        background: var(--gradient);
    }
    & * {
        color: white !important;
    }
    & ul,
    li {
        background: transparent;
    }
    & li::before {
        filter: invert(1);
    }
    & .btn-blue {
        background: white;
        color: var(--blue) !important;
        padding: 10px 0 !important;
    }
}
.faq-item {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 2px solid var(--light-grey);
    & :last-child {
        margin-bottom: 0;
    }
    & .faq-question {
        font-size: 1.25rem;
        font-weight: bold;
        color: var(--black);
        margin-bottom: 5px;
    }
    & .faq-answer {
        font-size: 1rem;
        margin-top: 0px;
        color: var(--black);
        opacity: 70%;
    }
    & strong {
        color: var(--black);
    }
}
.our-purpose .row .wrap {
    height: 250px;
}
/* .our-purpose .row .wrap::before{
    content: '';
    background-image: url(../images/footer.png);
    background-repeat: no-repeat;
    background-position: bottom;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: .5;
    z-index: 0;
} */

@media (max-width: 500px) {
    .card-wrap {
        position: relative;
        top: unset;
        height: auto;
        /* opacity: 0; */
    }
    .main-nav .news-mega {
        position: relative;
        background: #fff;
        left: unset;
        bottom: unset;
        width: 85vw !important;
    }
    .splide.hero p {
        white-space: nowrap;
        width: max-content;
        font-size: 16px !important;
    }
}

.height-100vh {
    height: 100vh;
    & .video-container {
        position: absolute;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        top: 0%;
        left: 0;
    }
    & .video-container::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #000;
        opacity: 30%;
    }
}
#matter {
    position: relative;
    & img {
        opacity: 3%;
        z-index: 1;
        width: 80%;
    }
}
#impact {
    position: relative;
    & .height_350 {
        height: 350px;
    }
    & p {
        font-weight: 500;
        font-size: 17px;
        font-family: "Zilla Slab", sans-serif;
    }
    & .wrap {
        height: 250px;
    }
    & .wrap2 {
        /* height: 100%; */
        background: var(--gradient);
        border-radius: 15px;
    }
    & .wrap2 h4 {
        font-size: 38px;
        -webkit-text-fill-color: var(--blue);
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: white;
        letter-spacing: 1px;
    }
    & .wrap2 h6 {
        font-size: 18px;
    }
}

.card-flip {
    perspective: 1000px;
    height: 300px; /* Set the desired height for all cards */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.6s; /* Smooth transition for the flip effect */
    transform-style: preserve-3d; /* Ensure child elements are rendered in 3D */
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Hide the back side when not visible */
}

.card-front {
    z-index: 2;
    transform: rotateY(0deg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.card-back {
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0px 10px;
}

.wrap2.card-flip:hover .card-front {
    transform: rotateY(180deg);
}

.wrap2.card-flip:hover .card-back {
    transform: rotateY(0deg);
    transition: 0.3s ease-in;
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}
#local {
    position: relative;
    & .outline-text {
        -webkit-text-fill-color: var(--blue);
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: white;
    }
}

.custom-bg {
    background: linear-gradient(
        transparent 10%,
        var(--blue) 10%,
        var(--blue) 90%,
        transparent 90%
    );
}

.dyn-sec {
    & li {
        background-color: transparent;
        color: white;
        &:hover {
            color: inherit;
        }
        &.active {
            background-color: white;
            color: var(--blue);
        }
    }
}
footer {
    & *:not(i) {
        color: #fff;
    }
    & * {
        z-index: 1;
    }
    & a:hover {
        color: inherit;
    }
    & ul {
        list-style-type: "✧ ";
        padding: 0;
        list-style: none;
    }

    & .social a {
        width: 25px;
        height: 25px;
        display: flex;
        background: white;
        color: black;
        align-items: center;
        justify-content: center;
    }
}
.billboard-banner-video {
    height: 90vh;

    @media (max-width: 500px) {
        height: 35vh;
    }
}
.error-content {
    & a {
        text-decoration: underline;
    }
}
.search {
    border-left: 0;
    border-top: 0;
    border-right: 0;
}
#content_cards {
    position: relative;
    & .height_content {
        height: 80px;
    }
    & .icon_wrap {
        height: 15px;
        width: 15px;
        object-fit: contain;
    }
    & #cards {
        position: relative;
        &::before {
            content: url("../images/left-arrow.png");
            position: absolute;
            width: 40px;
            height: 40px;
            bottom: 0;
            right: 0;
            background-color: var(--blue);
            border-radius: 50%;
            padding: 7px 0 0 7px;
            transform: rotate(180deg);
            transition: 0.5s ease;
        }
        &:hover::before {
            width: 100%;
            height: 100%;
            border-radius: 0%;
            transition: 0.5s ease-in;
            /* transform: rotate(0deg); */
        }
        &:hover p {
            color: #fff !important;
            position: relative;
            z-index: 999;
        }
        &:hover h2 {
            color: #fff !important;
            position: relative;
            z-index: 999;
        }
        &:hover img {
            position: relative;
            z-index: 999;
            border: 0 !important;
            transition: 0.5s;
            filter: invert(1);
            padding: 0 !important;
            mix-blend-mode: screen;
        }
    }
}

.mentorSay {
    & .mentorSayImg {
        width: 100px;
        aspect-ratio: 1/1.25;
        object-fit: cover;
        margin-left: 50px;
        z-index: 99999;
        border-radius: 10px;
    }
    & .card {
        margin-top: -50px;
        z-index: -1;
        padding-top: 80px !important;
    }
}

#credits {
    position: fixed;
    width: 500px;
    top: 15%;
    right: 10%;
    z-index: 999;
    & img {
        height: 20px;
        width: 20px;
        object-fit: contain;
    }
    @media (max-width: 1366px) {
        width: 445px;
        right: 2%;
    }
    @media (max-width: 1000px) {
        position: relative;
        right: 0;
        width: 100%;
    }
}

#popup {
    & img {
        height: 20px;
        width: 20px;
        object-fit: contain;
    }
}
.slider-buttons {
    & ._btn {
        background-color: var(--blue);
        width: 40px;
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: white;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;

        &:hover {
            background-color: #516eab;
        }

        &.btnleft {
            left: -5%;
        }
        &.btnright {
            right: -5%;
        }
    }
}
#mission {
    position: relative;
    & .wrap img {
        height: 100%;
        width: 80%;
        object-fit: contain;
        display: block;
        margin: 0 auto;
    }
    & ul li {
        position: relative;
        padding: 5px 0px;
        &:before {
            content: url(../images/investors/tick.png);
            position: absolute;
            left: -35px;
            top: 0%;
            transform: scale(0.6);
        }
    }
}
#interation {
    position: relative;
    & .wrap {
        background-color: #01175e30;
        display: flex;
        justify-content: center;
        padding: 50px;
        margin: 0px 15px;
        border-radius: 50%;
        & img {
            height: 50px;
            width: 50px;
            object-fit: contain;
        }
    }
}
#Investing {
    margin: 150px 0px;
    & img {
        max-height: 600px;
        max-width: 400px;
        object-fit: contain;
        position: absolute;
        left: 50%;
        top: -50%;
        transform: translate(-50%, 0);
    }
}
.blur {
    position: relative;
    &:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #000;
        z-index: 99;
        background: linear-gradient(
            90deg,
            #fff 0%,
            transparent 7%,
            transparent 93%,
            #fff
        );
    }
}
#inner_blog_content {
    & .col-md-6 {
        & figure {
            margin: 0 auto;
        }
        & img {
            width: 100%;
        }
    }
}

button.loader {
    position: relative;
    pointer-events: none;
    &::before {
        content: "Loading";
        width: 100%;
        height: 100%;
        position: absolute;
        background: rgb(61, 61, 61);
        left: 0;
        top: 0;
        color: white;
        font-weight: bold;
        pointer-events: none;
        animation: dots-animation 1.5s infinite steps(4);
    }
    /* &::after {
        content: "";
        display: inline-block;
        animation: dots-animation 1.5s infinite steps(4);
        color: white;
    } */
}

@keyframes dots-animation {
    0% {
        content: "";
    }
    25% {
        content: ".";
    }
    50% {
        content: "..";
    }
    75% {
        content: "...";
    }
    100% {
        content: "";
    }
}