@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    max-width: 100%;
    font-family: 'Poppins', sans-serif;
    /* background-color: var(--bg);
    color: #fff; */
}

.hero {

    -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0));
    mask-image: linear-gradient(rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0));
}

.vision {
    width: 50vw;
    height: 30vh;
    mix-blend-mode: difference;

}

.mission {
    width: 90vw;
    height: 20vh;
    mix-blend-mode: difference;
}

@media (max-width: 758px) {

    .navbar .nav {
        position: absolute;
        top: 63px;
        right: -100%;
        background-color: #fff;
        width: 10rem;
        height: 200vh;
        transition: 0.5s;
        z-index: 50;
    }


    .navbar .nav.active {
        right: 0;
    }

    .vision {
        width: 100%;
        height: 100%;
    }
    
    .mission {
        width: 100%;
        height: 100%;
    }

}