@font-face {
    font-family: EmperorTen;
    src: url(../fonts/emperorten-regular.ttf);
}

:root {
    --vh: 1vh;
}

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

.home-page {
    width: 100%;
    min-height: 100vh; /* Fallback for browsers that do not support Custom Properties */
    position: relative;
}

.bg-color {
    position: fixed;
    width: 100%;
    min-height: 100vh; /* Fallback for browsers that do not support Custom Properties */
    z-index: -10;
    background: linear-gradient(to bottom, white, black 60%);
}

.water-btn {
    position: absolute;
    z-index: 2;
    right: 0;
    width: 60%;
}

.water{
    display: none;
}

.home-page-content-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.2rem 0.8rem;
    gap: 2rem;
    min-height: 100vh;
}

.home-heading {
    position: absolute;
    z-index: 10;
    font-family: EmperorTen, sans-serif;
    font-weight: bolder;
    top: 70px;
    left: 30px;
    width: 90%;
    height: 100px;
}

.logo-container{
    width: max-content;
    margin: 0 auto 0 1rem;
}

.logo-container .logo {
    display: none;
    width: 140px;
}

.logo-container .logo-s {
    width: 100px;
}

.home-cards {
    width: 95%;
    margin: 60px auto 0;
}

.expedition-text {
    z-index: 50;
    position: absolute;
    top: 70px;
    width: 100%;
}

.home-cards img {
    border-radius: 13%;
}

.card-wrapper {
    position: relative;
    border-radius: 13%;
    overflow: hidden;
}

.home-cards .text {
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: 1rem;
    bottom: 2rem;
    border-radius: 0;
    max-width: 75%;
    opacity: 0;
    transition: .3s;
    transition-delay: .4s;
}


.h-effect {
    position: absolute;
    width: 40px;
    height: 200%;
    transform: rotateZ(-45deg);
    z-index: 2;
    background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
    /*animation-name: hover-animate;*/
    /*animation-duration: 2s;*/
    transition: 1.5s;
    top: -100%;
    right: -50px;
}

.home-cards img {
    width: 300px;
    transition: 1.2s;
}

.card-wrapper:hover > .h-effect, .card-wrapper:active > .h-effect {
    top: 40%;
    right: 300px;
}


.card-wrapper:hover > .text, .card-wrapper:active > .text {
    opacity: 1;
}

.card-wrapper:hover > .card-img, .card-wrapper:active > .card-img {
    transform: scale(1.2);
}

.logo-wrapper {
    position: relative;
}

.about {
    position: absolute;
}

@media only screen and (min-width: 540px) {

    .expedition-text {
        top: 85px;
    }

    .home-cards {
        margin-top: 80px;
    }

    .logo-container .logo-s {
        width: 140px;
    }

    .home-cards {
        width: 80%;
    }

    .home-cards .text {
        left: 1.2rem;
        right: 1.2rem;
        top: 1.2rem;
        bottom: 1.2rem;
    }

    .water-btn {
        right: 20px ;
        width: 55%;
    }
}

@media only screen and (min-width: 668px) {

    .home-cards {
        margin-top: 80px;
    }

    .card-wrapper {
        width: initial;
    }

    .water-btn {
        right: 40px;
        width: 50%;
    }

    .home-cards img {
        width: initial;
    }

    .home-page-content-wrapper {
        gap: 2rem;
        padding: 2rem;
    }

    .home-heading {
        height: 100px;
    }
}


@media only screen and (min-width: 786px) {

    .water-btn {
        right: 40px;
        width: 45%;
    }

    .home-cards {
        margin-top: 100px;
        width: 75%;
    }

    .home-cards .text {
        left: 1.5rem;
        right: 1.5rem;
        top: 1.5rem;
        bottom: 1.5rem;
    }

}

@media only screen and (min-width: 820px) {
    .expedition-text {
        top: 50px;
    }

    .water-btn {
        right: 80px;
        width: 35%;
    }

    .home-cards {
        width: 70%;
    }
}

@media only screen and (min-width: 992px) {


    .logo-container{
        width: initial;
    }

    .expedition-text {
        display: none;
    }

    .logo-container .logo {
        width: 90%;
        display: inline-block;
        margin-top: -24px;
    }

    .logo-container .logo-s {
        display: none;
    }

    .water-btn {
        z-index: 100;
        left: 0;
        right: 0;
        width: 30%;
        top: 20%;
    }

    .water-btn .water-m {
        display: none;
    }

    .water-btn .water{
        display: initial;
    }

    .home-page-content-wrapper {
        padding: 2rem 4rem;
    }

    .home-cards {
        margin-top: -40px;
        margin-left: 25% !important;
        max-width: 60%;
    }

    .supproted-by-container {
        position: absolute;
        width: 100svw;
        right: 2rem;
        bottom: 2.5rem;
    }

}

/*@media screen and (max-width: 990px) and (min-width: 280px) {*/


/*    .logo-container img {*/

/*        width: 100% !important;*/
/*        max-width: 100% !important;*/

/*    }*/
/*    .water-btn {*/
/*    }*/

/*}*/

/*@media screen and (max-width: 350px) and (min-width: 300px) {*/

/*    .water-btn {*/

/*        top: 7%;*/
/*        width: 30% !important;*/

/*    }*/
/*}*/

/*@media screen and (max-width: 400px) and (min-width: 351px) {*/

/*    .water-btn {*/

/*        top: 3%;*/
/*        width: 30% !important;*/

/*    }*/
/*}*/

/*@media screen and (max-width: 450px) and (min-width: 401px) {*/

/*    .water-btn {*/

/*        top: 3%;*/
/*        width: 30% !important;*/

/*    }*/
/*}*/

/*@media screen and (max-width: 500px) and (min-width: 451px) {*/

/*    .water-btn {*/

/*        top: 4%;*/
/*        width: 30% !important;*/

/*    }*/
/*}*/

/*@media screen and (max-width: 550px) and (min-width: 501px) {*/

/*    .water-btn {*/

/*        top: 4%;*/
/*        width: 30% !important;*/

/*    }*/
/*}*/

/*@media screen and (max-width: 600px) and (min-width: 551px) {*/

/*    .water-btn {*/

/*        top: 5%;*/
/*        width: 35% !important;*/

/*    }*/
/*}*/

/*@media screen and (max-width: 420px) and (min-width: 300px) {*/

/*    .home-cards {*/

/*        margin-top: 88px !important;*/


/*    }*/
/*}*/

/*@media screen and (max-width: 650px) and (min-width: 601px) {*/

/*    .water-btn {*/

/*        top: 5%;*/
/*        width: 30% !important;*/

/*    }*/
/*}*/

/*@media screen and (max-width: 700px) and (min-width: 651px) {*/

/*    .water-btn {*/

/*        top: 7%;*/
/*        width: 30% !important;*/

/*    }*/

/*    .home-cards {*/

/*        margin-top: 150px !important;*/


/*    }*/
/*}*/

/*@media screen and (max-width: 750px) and (min-width: 701px) {*/

/*    .water-btn {*/

/*        top: 7%;*/
/*        width: 30% !important;*/

/*    }*/

/*    .home-cards {*/

/*        margin-top: 150px !important;*/


/*    }*/
/*}*/

/*@media screen and (max-width: 800px) and (min-width: 751px) {*/

/*    .water-btn {*/

/*        top: 7%;*/
/*        width: 30% !important;*/

/*    }*/

/*    .home-cards {*/

/*        margin-top: 170px !important;*/


/*    }*/
/*}*/

/*@media screen and (max-width: 850px) and (min-width: 801px) {*/

/*    .water-btn {*/

/*        top: 13%;*/
/*        width: 20% !important;*/

/*    }*/

/*    .home-cards {*/

/*        margin-top: -50px !important;*/


/*    }*/
/*}*/

/*@media screen and (max-width: 900px) and (min-width: 851px) {*/

/*    .water-btn {*/

/*        top: 13%;*/
/*        width: 20% !important;*/

/*    }*/

/*    .home-cards {*/

/*        margin-top: -50px !important;*/


/*    }*/
/*}*/

/*@media screen and (max-width: 950px) and (min-width: 901px) {*/

/*    .water-btn {*/

/*        top: 14%;*/
/*        width: 20% !important;*/

/*    }*/

/*    .home-cards {*/

/*        margin-top: -50px !important;*/


/*    }*/
/*}*/

/*@media screen and (max-width: 1000px) and (min-width: 951px) {*/

/*    .water-btn {*/

/*        top: 15%;*/
/*        width: 20% !important;*/

/*    }*/

/*    .home-cards {*/

/*        margin-top: -50px !important;*/


/*    }*/
/*}*/

/*@media screen and (max-width: 1050px) and (min-width: 1001px) {*/

/*    .water-btn {*/

/*        top: 13%;*/
/*        width: 24% !important;*/

/*    }*/

/*    .home-cards {*/

/*        margin-top: -50px !important;*/


/*    }*/
/*}*/

/*@media screen and (max-width: 1100px) and (min-width: 1051px) {*/

/*    .water-btn {*/

/*        top: 13%;*/
/*        width: 24% !important;*/

/*    }*/

/*    .home-cards {*/

/*        margin-top: -50px !important;*/


/*    }*/
/*}*/

/*@media screen and (max-width: 1150px) and (min-width: 1101px) {*/

/*    .water-btn {*/

/*        top: 14%;*/
/*        width: 24% !important;*/

/*    }*/

/*    .home-cards {*/

/*        margin-top: -50px !important;*/


/*    }*/
/*}*/

/*@media screen and (max-width: 1200px) and (min-width: 1151px) {*/

/*    .water-btn {*/

/*        top: 14%;*/
/*        width: 24% !important;*/

/*    }*/

/*    .home-cards {*/

/*        margin-top: -50px !important;*/


/*    }*/
/*}*/

/*@media screen and (max-width: 1250px) and (min-width: 1201px) {*/

/*    .water-btn {*/

/*        top: 15%;*/
/*        width: 24% !important;*/

/*    }*/

/*    .home-cards {*/

/*        margin-top: -50px !important;*/


/*    }*/
/*}*/

/*@media screen and (max-width: 1300px) and (min-width: 1251px) {*/

/*    .water-btn {*/

/*        top: 16%;*/
/*        width: 24% !important;*/

/*    }*/

/*    .home-cards {*/

/*        margin-top: -50px !important;*/


/*    }*/
/*}*/

/*@media screen and (max-width: 1600px) and (min-width: 1301px) {*/

/*    .water-btn {*/

/*        top: 22%;*/
/*        width: 24% !important;*/

/*    }*/

/*    .home-cards {*/

/*        margin-top: -90px !important;*/


/*    }*/
/*}*/