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

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


/* Define the light theme variables in :root */
:root {
    /* colors  */
    --primary: #DF6951;
    --primary-dark: #a34b3a;
    --secondary: #181E4B;
    --secondary-2: #5E6282;
    --yellow: #f4cc07;
    --yellow-dark: #e4bf05;
    --white: #ffffff
}

@font-face {
    font-family: ProductSans-Regular;
    src: url(/assets/font/ProductSans-Regular.ttf);
}

@font-face {
    font-family: ProductSans-Medium;
    src: url(/assets/font/ProductSans-Medium.ttf);
}


@font-face {
    font-family: ProductSans-Bold;
    src: url(/assets/font/ProductSans-Bold.ttf);
}

/* body */
html {
    overflow-x: hidden;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-size: var(--heading-7);
    font-family: "Poppins", sans-serif;
    font-family: ProductSans-Medium;
}

p {
    font-family: ProductSans-Regular;
    color: var(--secondary-2);
}

h1 {
    font-family: "Volkhov", serif;
    font-weight: 800 !important;
    color: var(--secondary);
}



/* navbar  */

nav .right-link .signup {
    border: 1px solid #000;
    border-radius: 0.5vw;
    padding: 1vw 3vw;
}

/* header  */
.header {
    position: relative;
}

.header::before {
    content: "";
    background-image: url('../images/Decore.png');
    width: 50vw;
    height: 100%;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}


/* header left_side  */


.header .left_side h3 {
    font-size: 1.5vw;
    font-family: ProductSans-Bold;
    color: var(--primary);
}

.header .left_side h1 {
    font-size: 5.76vw;
    color: var(--secondary);
    font-family: "Volkhov", serif;
    font-weight: 800;
    line-height: 7vw;
    margin-top: 0.5vw;
    position: relative;
}

.header .left_side p {
    font-size: 1.2vw;
    color: var(--secondary-2);
    font-weight: 800;
    margin: 2vw 0;
}

.header .left_side h1 span::before {
    content: "";
    background-image: url('../images/line.png');
    width: 100%;
    max-width: 200vw;
    height: 1.2vw;
    display: inline-block;
    position: absolute;
    background-repeat: no-repeat;
    left: 10vw;
    top: 5vw;
    z-index: -1;
    object-fit: contain;
}

.header .left_side .find_more {
    background-color: var(--yellow);
    padding: 1.3vw 3vw;
    border-radius: 0.8vw;
    transition: all 0.3s ease-in-out;
    box-shadow: #f1a50171 0px 10px 50px 0px;
}

.header .left_side .find_more:hover {
    background-color: var(--yellow-dark);
}

.header .left_side .play_btn {
    display: flex;
    align-items: center;
    gap: 2vw;
    color: var(--secondary-2);

}

.header .left_side .play_btn span {
    background-color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
    box-shadow: #df695160 0px 15px 30px 0px;
}

.header .left_side .play_btn span:hover {
    background-color: var(--primary-dark);
}


/* header right_side  */


.header .airplane {
    position: absolute;
    top: 10%;
    left: -0px;
    transform: translateY(-50%), ;
    width: 10vw;
    animation: flyAcross 15s linear infinite;
    z-index: -1;
}

/* Keyframe animation */
@keyframes flyAcross {
    0% {
        left: -0px;
        /* Starting point (off-screen) */
    }

    100% {
        left: 100%;
        /* Ending point (off-screen on the other side) */
    }
}

.header .airplane_2 {
    position: absolute;
    top: 40%;
    right: -0px;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    width: 10vw;
    animation: flyAcross_2 15s linear infinite;
    z-index: -1;
}

/* Keyframe animation */
@keyframes flyAcross_2 {
    0% {
        right: -0px;
        /* Starting point (off-screen from the right) */
    }

    100% {
        right: 100%;
        /* Ending point (off-screen on the left side) */
    }
}



.main-box {
    position: relative;
    cursor: pointer;

}

.main-box:hover {
    box-shadow: rgba(17, 12, 46, 0.034) 0px 24px 100px 0px;
}

.main-box::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: -10px;
    width: 100%;
    height: 0;
    transition: height 0.3s ease-in-out;
    border-top-left-radius: 16px;
    border-bottom-right-radius: 8px;
}

.main-box:hover::after {
    height: 5vw;
    width: 5vw;
    z-index: -999;
    background-color: #DF6951;
}


.card {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
}

.brand:hover {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
}

.join button {
    background-image: linear-gradient(#FF946D, #FF7D68);
}

.brand img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.join {
    position: relative;
    overflow: hidden;
}

.join::after {
    content: "";
    display: block;
    background-image: url('../images/join-after.png');
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -10vw;
    z-index: 0;
}

.join::before {
    content: "";
    display: block;
    background-image: url('../images/join-after.png');
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: 17vw;
    top: -2vw;
    right: -20vw;
    z-index: 0;
    transform: rotate(190deg);
}


@media screen and (max-width: 480px) {

    html {
        overflow-x: hidden;
    }

    .header {
        overflow-x: hidden;
    }

    /* header right_side  */
    .header .right_side {
        position: relative;
    }

    .header .left_side h3 {
        font-size: 3vw;
    }

    .header .left_side h1 {
        font-size: 10vw;
        line-height: 12vw;
        text-transform: uppercase;
        margin-top: 2vw;
    }

    .header .left_side p {
        font-size: 3vw;
    }

    .header .left_side .find_more {
        font-size: 3vw;
    }

    .header .left_side h1 span::before {
        width: 100%;
        max-width: 50vw;
        height: 1.2vw;
        left: 30vw;
        top: 10vw;
    }

    .header .left_side .play_btn span {
        width: 36px;
        height: 36px;
    }

    .header .left_side .play_btn {
        font-size: 4vw;
    }

    .main-box:hover::after {
        height: 10vw;
        width: 10vw;
    }



    .join::before {
        width: 100%;
        height: 17vw;
        top: -0vw;
        right: -0vw;
    }
}