@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

:root {
    --thm-font: "Inter", sans-serif;
    --thm-font-2: "reeyregular";
    --thm-base: rgb(0,48,73);
    --thm-primary: rgb(3,40,54);
    --thm-primary-rgb: 24, 41, 120;
    --thm-gray: #515151;
    --thm-gray-rgb: 81, 81, 81;
    --thm-white: #ffffff;
    --thm-white-rgb: 255, 255, 255;
    --thm-black: #202020;
    --thm-black-rgb: 32, 32, 32;
    --thm-gray-bg: #f5f5f5;
    --thm-main-bg: #202020;
}

:root {
    --swiper-theme-color: #007aff;
}


* {
    box-sizing: border-box;
}

* {
    margin: 0;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-family: var(--thm-font);
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

#root,
#__next {
    isolation: isolate;
}

.nav{
    width: 100%;
    height: 100px;
    position: fixed;
    background-color: var(--thm-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    top: 0;
    z-index: 1000;
    

    .logo{
        width: 15%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        /* background-color: var(--thm-main-bg); */

        img{
            width: 120px;
            height: 50px;
        }
    }

    .nav-links{
        width: 60%;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;

        a{
            text-decoration: none;
            color: var(--thm-white);
            font-size: 18px;
            font-weight: 500;
            cursor: pointer;
            transition: color 0.5s;
        }

        a:hover{
            color: rgb(231,54,103);
        }

    }

    .nav-btn{
        width: 20%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        /* background-color: var(--thm-main-bg); */


        a{
            text-decoration: none;
            color: var(--thm-white);
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: color 0.5s;
        }

        .reg{
            background-color: rgb(231,54,103);
            padding: 10px 20px;
            margin-right: 15px;
            transition: background-color 0.3s;

            &:hover{
                background-color: rgb(241,88,70);
            }
        }

        .sign{
            background: linear-gradient(to right, rgb(231, 54, 103), rgb(241, 88, 70), rgb(252, 126, 25));
            padding: 10px 20px;
            transition: background-color 0.3s;

            &:hover{
                background: linear-gradient(to right, rgb(252, 126, 25), rgb(241, 88, 70), rgb(231, 54, 103));
            }
        }
    }

    .menu-bar{
        width: 5%;
        height: 100%;
        display: none;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        cursor: pointer;
        
        i{
            background-color: rgb(231,54,103);
            color: var(--thm-gray-bg);
            padding: 10px;
        }
    }
}

.rates{
    width: 100%;
    height: 100px;
    background-color: var(--thm-primary);
    position: fixed;
    top: 100px;
    z-index: 10;

    .rate{
        width: 100%;
        height: 65%;
        background-color: var(--thm-gray-bg);
    }
}

.responsive{
    width: 100%;
    height: 400px;
    background-color: var(--thm-primary);
    display: flex; 
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 100px;
    transform: translateY(-100%); 
    visibility: hidden; 
    opacity: 0; 
    transition: transform 2s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 2s ease-in-out, visibility 0s 2s; 

    
    .nav-links{
        width: 100%;
        height: 70%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;

        a{
            text-decoration: none;
            color: var(--thm-white);
            font-size: 18px;
            font-weight: 500;
            cursor: pointer;
            transition: color 0.5s;
        }

        a:hover{
            color: rgb(231,54,103);
        }

    }

    .nav-btn{
        width: 100%;
        height: 30%;
        display: flex;
        justify-content: center;
        align-items: center;
        /* background-color: var(--thm-main-bg); */


        a{
            text-decoration: none;
            color: var(--thm-white);
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: color 0.5s;
        }

        .reg{
            background-color: rgb(231,54,103);
            padding: 10px 20px;
            margin-right: 15px;
            transition: background-color 0.3s;

            &:hover{
                background-color: rgb(241,88,70);
            }
        }

        .sign{
            background: linear-gradient(to right, rgb(231, 54, 103), rgb(241, 88, 70), rgb(252, 126, 25));
            padding: 10px 20px;
            transition: background-color 0.3s;

            &:hover{
                background: linear-gradient(to right, rgb(252, 126, 25), rgb(241, 88, 70), rgb(231, 54, 103));
            }
        }
    }
}

.responsive.active {
    transform: translateY(0); 
    visibility: visible; 
    opacity: 1; 
    transition: transform 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 1s ease-in-out, visibility 0s; 
}