/*===========================*/
/*         VARIABLES         */
/*===========================*/

:root {

    --gray-50: #fafafa;
    --gray-500: #696969;
    --gray-950: #141414;

    --font-primary: 'Epilogue', Arial, Helvetica, sans-serif;

}



/*===========================*/
/*           GERALS          */
/*===========================*/

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

img {
    max-width: 100%;
}

body {
    width: 100%;
    min-height: 100vh;
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 1rem;
    font-display: swap;
    background-color: var(--gray-50);
}




/*===========================*/
/*           HEADER          */
/*===========================*/

#header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 100;
    background-color: var(--gray-50);
}

#header .container-fluid {
    padding: 1rem;
}

.navbar * {
    color: var(--gray-500);
}

.navbar *:hover {
    color: var(--gray-950);
}

.navbar *:focus {
    color: var(--gray-950);
    box-shadow: none;
}

.navbar-toggler {
    border: none;
    z-index: 100;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-toggler[aria-expanded="true"] .toggler-icon::after {
    content: url('../images/icon-close-menu.svg');
}

.toggler-icon::after {
    content: url('../images/icon-menu.svg');
}

#navbarNav.show {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    position: absolute;
    top: 0;
    right: 0;
    height: 100vh;
    width: 60vw;
    padding: 4rem 1.5rem;
    background-color: var(--gray-50);
    box-shadow: 0 0px 0px 40vw rgba(0, 0, 0, 0.55);
}


 .actions-content {
    display: flex;
    gap: 2rem;
}

#navbarNav.show .actions-content {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

#navbarNav.show .actions-content .btn {
    width: 100%;
}

.btn-login:hover,
.btn-register:hover {
    font-weight: 700;
}

.btn-register:hover,
.btn-register:focus {
    outline: 2px solid var(--gray-950);
}

.dropdown-menu {
    border: none;
}

.dropdown-toggle::after {
    border: none;
    content: url('../images/icon-arrow-down.svg');
}

.dropdown:has(.dropdown-menu.show) .dropdown-toggle::after {
    content: url('../images/icon-arrow-up.svg');
}

.actions-content .btn {
    padding: 0.65rem 1.5rem;
    border-radius: 0.875rem;
}

.btn-register {
    border: 1px solid var(--gray-950);
}


/*===========================*/
/*            MAIN           */
/*===========================*/

#main .container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 0;
}

.content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.content--body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
}

.title {
    font-size: clamp(2rem, calc(-0.534rem + 10.811vw), 2.25rem);
    font-weight: 700;
    color: var(--gray-950);
    text-align: center;
}

.subtitle {
    font-size: clamp(1rem, calc(0.41rem + 2.778vw), 1.125rem);
    font-weight: 500;
    color: var(--gray-500);
    text-align: center;
}

.btn-learn-more {
    padding: 0.65rem 1.5rem;
    font-size: clamp(1rem, calc(0.41rem + 2.778vw), 1.125rem);
    font-weight: 700;
    color: var(--gray-50);
    border-radius: 0.875rem;
    background-color: var(--gray-950);
}

.btn-learn-more:hover {
    font-weight: 700;
    outline: 2px solid var(--gray-950);
}

.btn-learn-more:focus {
    outline: 2px solid var(--gray-950);
    outline-offset: 4px;
    box-shadow: none;
}

.content--footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    gap: 1rem;
}

.content--footer-logo {
    width: calc(25% - 1rem);
}



/*=====================================*/
/*      -----    DESKTOP    -----      */
/*=====================================*/

@media (min-width: 60em) {
    
    /*===========================*/
    /*           HEADER          */
    /*===========================*/

    #header .container-fluid {
        gap: 1.25rem;
        padding: 2rem 3rem;
    }

    #logo {
        width: 7rem;
    }

    .navbar-nav {
        gap: 1.25rem;
    }

    #navbarNav {
        justify-content: space-between;
    }

    #navbarNav .nav-item {
        display: flex;
        align-items: center;
    }

    .dropdown-menu.show {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem;
        box-shadow: 0 3px 30px 3px rgba(0, 0, 0, 0.1);
    }



    /*===========================*/
    /*            MAIN           */
    /*===========================*/

    #main .container {
        flex-direction: row-reverse;
        justify-content: space-evenly;
        gap: 0;
    }

    .image-content {
        flex-grow: 1;
        max-width: 20rem;
    }

    .content {
        flex-grow: 1;
        justify-content: flex-end;
        gap: 0;
        width: 50%;
        max-width: 25rem;
    }

    .content--body {
        align-items: flex-start;
        gap: 0;
    }

    .title {
        font-size: 3.45rem;
        text-align: left;
        line-height: 1;
    }

    .subtitle {
        text-align: left;
    }

    .content--footer {
        padding-bottom: 0;
    }

}

@media (min-width: 80em) {
    
    /*===========================*/
    /*            MAIN           */
    /*===========================*/

    .image-content {
        max-width: 24rem;
    }

    .content {
        gap: 3rem;
        max-width: 30rem;
    }

    .content--body {
        gap: 1rem;
    }

    .title {
        font-size: 4.1rem;
    }

}

@media (min-width: 90em) {

    /*===========================*/
    /*            MAIN           */
    /*===========================*/

    #main .container {
        justify-content: space-between;
        gap: 10rem;
    }

    .image-content {
        max-width: 33rem;
    }

    .content {
        gap: 6rem;
        max-width: 35rem;
    }

    .content--body {
        gap: 2rem;
    }

    .title {
        font-size: 4.85rem;
    }

    
}