/* =================== GOOGLE FONTS ====================*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Raleway:wght@500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;550;600;700&display=swap');
/* =================== VARIABLES CSS ===================*/

/* CSS variables can have a global or local scope.

   Global variables can be accessed/used through the entire document, 
   while local variables can be used only inside the selector where it is declared.

   To create a variable with global scope, declare it inside the :root selector. 
   The :root selector matches the document's root element. */

:root {

    --header-height: 3.5rem; /* 1rem equals the font size of the html element */
                           /* Equal to the computed value of font-size on the root element */

    /* ----------------- Colors -------------------*/

    /* change favorite color to match images */
    /* green dark 190 - green 171 - green blue 200 - blue 213*/

    --hue-color: 213;

    /* HSL color mode */
    --first-color: hsl(var(--hue-color), 64%, 22%);
    --first-color-light: hsl(var(--hue-color), 96%, 69%);
    --first-color-second: hsl(var(--hue-color), 64%, 22%);
    --first-color-alt: hsl(var(--hue-color), 64%, 15%);
    --title-color: hsl(var(--hue-color), 64%, 18%);
    --text-color: hsl(var(--hue-color), 24%, 35%);
    --text-color-light: hsl(var(--hue-color), 8%, 60%);
    --input-color: hsl(var(--hue-color), 24%, 97%);
    --body-color: hsl(var(--hue-color), 100%, 99%);
    --coin-border-color: hsl(var(--hue-color), 14%, 96%);
    --white-color: #FFF;
    --red-color: hsl(358, 60%, 43%);
    --red-color-alt: hsl(357, 62%, 30%);
    --scroll-bar-color: hsl(var(--hue-color), 12%, 90%);
    --scroll-thumb-color: hsl(var(--hue-color), 12%, 75%);
    --logo-color: hsl(215, 69%, 26%);
    --logo-color-light: hsl(202, 73%, 52%);
    --input-border-color: hsl(213deg 8% 60% / 14%);
    --footer-text-color: hsl(213deg 64% 18% / 88%);

    /* -------------- font and typography -------------*/
    
    --body-font: 'Open Sans', sans-serif;
    --title-font: 'Raleway', sans-serif;
    --pricing-font: 'Rubik', sans-serif;
    --biggest-font-size: 2.5rem;
    --h1-font-size: 1.5rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1rem;
    --normal-font-size: .938rem;
    --small-font-size: .813rem;
    --smaller-font-size: .75rem;

    /* ------------------ font weight -----------------*/

    --font-medium: 500;
    --font-semi-bold: 600;

    /* ----------------- margenes bottom --------------*/

    --mb-0-25: .25rem;
    --mb-0-5: .5rem;
    --mb-0-75: .75rem;
    --mb-1: 1rem;
    --mb-1-25: 1.25rem;
    --mb-1-5: 1.5rem;
    --mb-2: 2rem;
    --mb-2-5: 2.5rem;

    /* -------------------- z index -------------------*/

    --z-tooltip: 10;
    --z-fixed: 100; /* que está estático*/

    /* ----------------- hover overlay ----------------*/

    --img-transition: .3s;
    --img-hidden: hidden;
    --img-scale: scale(1.1);
}

@media screen and (min-widht: 968px) { 

    /* What this query really means, is 
    “If [device width] is greater than or equal to 968px, then do {…}” */

    :root {
        --biggest-font-size: 4rem;
        --h1-font-size: 2.25rem;
        --h2-font-size: 1.75rem;
        --h3-font-size: 1.25rem;
        --normal-font-size: 1rem;
        --small-font-size: .875rem;
        --smaller-font-size: .813rem;
    }
}

/* ==================== BASE ======================= */
/* resetenado el html */
/* asignando las variables al estilo de la página */

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
html
{
    scroll-behavior: smooth;
}
body
{
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
    color: var(--text-color);
}
h1, h2, h3
{
    color: var(--title-color);
    font-weight: var(--font-semi-bold);
    font-family: var(--title-font);

}
ul
{
    list-style: none;
}
a
{
    text-decoration: none;
}
img
{
    max-width: 100%;
    height: auto;
}
button, 
input
{
    border: none;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
}
button 
{
    cursor: pointer;
}
input
{
    outline: none;
}
main 
{
    overflow-x: hidden;
}


/*=============== REUSABLE CSS CLASSES =================*/

.section
{
    padding: 4.5rem 0 2.5rem;
    /* top | horizontal | bottom */
}
.section__title
{
    font-size: var(--h2-font-size);
    color: var(--title-color);
    text-align: center;
    margin-bottom: var(--mb-2);
}
.container
{
    max-width: 968px;
    margin-left: var(--mb-1);
    margin-right: var(--mb-1);
}
.grid
{
    display: grid;
    gap: 1.5rem;
}

/*====================== HEADER ======================*/
.header
{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-fixed);
    background-color: transparent;
}
.nav
{
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav__toggle
{
    color: var(--white-color);
}
.nav__logo
{
    cursor: pointer;
    width: 9.25rem;
    padding-top: .5rem;
}
.nav__logo-hidden
{
    position: absolute;
    right: -100%;
}
.nav__toggle
{
    font-size: 1.3rem;
    cursor: pointer;
    padding-top: .5rem;
    padding-right: .2rem;
}
.nav__menu
{
    position: relative;
}
/*======================MENU DESPLEGABLE======================*/
@media screen and (max-width: 767px){

    /* What this query really means, is 
    “If [device width] is smaller than or equal to 767px, then do {…}” */

    .nav__menu
    {
        position: fixed;
        background-color: var(--body-color);
        top: 0; /*positionates the menu at the top*/
        right: -100%; /* hides the menu (when it's not activated) */
        width: 70%;
        height: 100%;
        box-shadow: -1px 0 4px hsla(var(--hue-color), 64%, 15%, .15);
        padding: 3rem;
        transition: .5s;
    } 
}
.nav__list
{
    display: flex;
    flex-direction: column;
    margin-top: 1.25rem;
    gap: 2.5rem;
}
.nav__link
{
    color: var(--text-color-light);
    font-weight: var(--font-semi-bold);
    text-transform: uppercase;
}
.nav__link:hover
{
    color: var(--text-color);
}
#login__item
{
    display: flex;
    flex-direction: column;
    margin-bottom: 1.25rem;
}
.nav__close
{
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.7rem;
    color: var(--title-color);
    cursor: pointer;
}

/* ====================== SHOW MENU ===================*/
.show-menu
{
    right: 0;
}
/* Change background header */
.scroll-header
{
    background-color: var(--body-color);
    box-shadow: 0 0 4px hsla(var(--hue-color), 64%, 15%, .15);
}
.scroll-header .nav__toggle
{
    color: var(--title-color);
}
/* Active link */
.active-link
{
    position: relative;
    color: var(--title-color);
}
.active-link::before
{
    content: '';
    position: absolute;
    background-color: var(--title-color);
    width: 100%;
    height: 2px;
    bottom: -.65rem;
    left: 0;
}
/* ======================== HOME ====================== */
.home__img
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    object-fit: cover;  /*This property tells the content to fill the container in a variety of ways; such as "preserve that aspect ratio" or "stretch up and take up as much space as possible".*/
                        /* https://www.w3schools.com/css/css3_object-fit.asp */
    object-position: 0;   /* object-position property is used to specify how an <img> or <video> should be positioned within its container. */
}
.home__container
{
    display: flex;
    position: relative;
    height: 100vh; 
    padding-top: 20vh;
    justify-content: flex-start;
    align-content: center;

}
.home__data-subtitle,
.home__data-title,
.home__social-link,
.home__info
{
    color: var(--white-color);
}
.home__data-subtitle
{
    display: block;
    font-weight: var(--font-semi-bold);
    margin-bottom: var(--mb-0-75);
}
.home__data-title
{
    font-size: var(--biggest-font-size);
    font-weight: var(--font-medium);
    margin-bottom: var(--mb-2-5);
}
.home__info
{
    background-color: var(--first-color);
    display: flex;
    padding: 1.5rem 1rem;
    align-items: center;
    column-gap: .5rem;
    position: absolute;
    right: 0;
    bottom: 1rem;
    width: 228px;
}
.home__info-title
{
    display: block;
    font-size: var(--small-font-size);
    font-weight: var(--font-semi-bold);
    margin-bottom: var(--mb-0-75);
    width: 90px;
}
.home__info-button
{
    font-size: var(--smaller-font-size);
}
.home__info-overlay
{
    overflow: var(--img-hidden); /*scrollbar controls what happens to content that is too big to fit into an area.*/
}
.home__info-img
{
    /*width: 145px; /*borrar*/
    transition: var(--img-transition);
}
.home__info-img:hover
{
    transform: var(--img-scale);
}

/*=============================== BUTTONS =============================*/
.button
{
    display: inline-block;
    text-align: center;
    background-color: var(--first-color);
    color: var(--white-color);
    padding: 1rem 2rem;
    font-weight: var(--font-semi-bold);
    transition: var(--img-transition);
}
.button:hover
{
    background-color: var(--first-color-alt);
}
.button-alt
{
    background-color: var(--red-color);
}
.button-alt:hover
{
    background-color: var(--red-color-alt);
}
.button--flex
{
    display: flex;
    align-items: center;
    column-gap: .25rem;
}
.button--link
{
    background: none;
    padding: 0;
}
.button--link:hover
{
    background: none;
}
/* =============================== ABOUT ================================ */
.about__data
{
    text-align: center;
}
.about__container
{
    gap: 2.5rem;
}
.about__description
{
    margin-bottom: var(--mb-2);
}
.about__img
{
    display: flex;
    column-gap: 1rem;
    align-items: center;
    justify-content: center;
}
.about__img-overlay
{
    overflow: var(--img-hidden);
}
.about__img-one
{
    width: 150px;
}
.about__img-two
{
    width: 180px;
}
.about__img-one,
.about__img-two
{
    transition: var(--img-transition);
}
.about__img-one:hover,
.about__img-two:hover
{
    transform: var(--img-scale);
}

/*=============================== DISCOVER ============================*/
.discover__card
{
    position: relative;
    width: 200px;
    overflow: var(--img-hidden);
}
.discover__data
{
    position: absolute;
    bottom: 1.5rem;
    left: 1rem;
}
.discover__data__overlay
{
    position: absolute;
    bottom: 10px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5); /* Black see-through */
    height: 22%;
    width: 100%;
    opacity: 1;
}
.discover__title,
.discover__description
{
    color: var(--white-color);
}
.discover__title{
    font-size: var(--h3-font-size);
    margin-bottom: var(--mb-0-25);
}
.discover__description
{
    display: block;
    font-size: var(--smaller-font-size);
}
.discover__img
{
    transition: var(--img-transition);
}
.discover__img:hover
{
    transform: var(--img-scale);
}
/* ============================= EXPERIENCE ==========================*/
.experience__container
{
    gap: 2.5rem;
    justify-content: center; /*center vertically*/
    justify-items: center; /*center horizontally*/
}
.experience__content
{
    grid-template-columns: repeat(3,1fr); /* 3 frames at 1 frame size*/
    column-gap: 1rem;
    justify-items: center;
    padding: 0 2rem;
}
.experience__number
{
    font-size: var(--h2-font-size);
    font-weight: var(--font-semi-bold);
    margin-bottom: var(--mb-0-25);
}
.experience__description
{
    font-size: var(--small-font-size);
}
.experience__img
{
    position: relative;
    padding-bottom: 2rem;
}
.experience__overlay:nth-child(1) /*will only change css style from the first element of it's type*/
{
    width: 263px;
    margin-right: 2rem;
}
.experience__overlay:nth-child(2)
{
    width: 120px;
    position: absolute;
    top: 2rem;
    right:0;
}
.experience__img-one,
.experience__img-two
{
    transition: var(--img-transition);
}
.experience__img-one:hover,
.experience__img-two:hover
{
    transform: var(--img-scale);
}
.experience__overlay
{
    overflow: var(--img-hidden);
}
/*=========================== CARD PRICING ========================*/
.card
{
    padding: 3rem 0;
    align-items: center;
}
.card__section
{
    justify-items: center;
    margin-left: var(--mb-1-5);
    margin-right: var(--mb-1-5);
}
.card__container
{
    gap: 3rem 1.25rem;
}
.card__content
{
    position: relative;
    gap: 0;
    background-color: var(--white-color);
    padding: 1.5rem 1.5rem 2rem;
    border-radius: 1rem;
    box-shadow: 0 12px 24px hsla(var(--hue-color), 64%, 16%, .1);
    transition: .4s;
    max-width: 320px;
}
.card__content:hover
{
    box-shadow: 0 16px 24px hsla(var(--hue-color), 64%, 16%, .17);
}
.card__header-img
{
    width: 30px;
    height: 30px;
}
.card__header-circle
{
    width: 40px;
    height: 40px;
    background-color: var(--coin-border-color);
    border-radius: 50%;
    margin-bottom: var(--mb-1);
    place-items: center;
}
.card__header-subtitle
{
    display: block;
    font-size: var(--small-font-size);
    color: var(--text-color-light);
    text-transform: uppercase;
    margin-bottom: var(--mb-0-5);
}
.card__header-title
{
    font-size: var(--h1-font-size);
    color: var(--title-color);
    margin-bottom: var(--mb-1);
}
.card__pricing
{
    position: absolute;
    background: linear-gradient(157deg, var(--logo-color-light) -12%, var(--first-color) 109%);
    width: 60px;
    height: 88px;
    right: 1.5rem;
    top: -1rem;
    padding-top: 1.25rem;
    text-align: center;
}
.card__pricing-number
{
    font-family: var(--pricing-font);
    font-size: var(--h2-font-size);
}
.card__pricing-symbol
{
    font-size: var(--small-font-size);
}
.card__pricing-month
{
    display: block;
    font-size: var(--small-font-size);
}
.card__pricing-number,
.card__pricing-month
{
    color: var(--white-color);
}
/* LITTLE ARROWS TO MANAGE THE PRICING IMAGE */
.card__pricing::before,
.card__pricing::after
{
    content: '';
    position: absolute;
}
.card__pricing::after
{
    width: 100%;
    height: 14px;
    background-color: var(--white-color);
    left: 0;
    bottom: 0;
    clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.card__pricing::before
{
    width: 14px;
    height: 16px;
    background-color: var(--first-color);
    top: 0;
    left: -14px;
    clip-path: polygon(0 100%, 100% 0, 100% 100%)
}
.card__list
{
    row-gap: .5rem;
    margin-bottom: var(--mb-2);

}
.card__list-item /* Align paragraphs and check signs */
{
    display: flex;
    align-items: center;
}
.card__list-icon
{
    color: var(--first-color-light);
    font-size: var(--h2-font-size);
    margin-right: var(--mb-0-5);
}
.card__button
{
    padding: 1.25rem;
    border: none;
    font-size: var(--normal-font-size);
    border-radius: .5rem;
    background: linear-gradient(157deg, var(--logo-color-light)-12%, var(--first-color) 109%);
    color: var(--white-color);
    cursor: pointer;
    transition: .4s;
}
.card__button:hover
{
    box-shadow: 0 12px 24px hsla(var(--hue-color), 97%, 54%, .2)
}
/*==== MEDIA QUERIES =====*/
/* For small devices */
@media screen and (max-width: 320px){
    .container
    {
        margin-left: var(--mb-1);
        margin-right: var(--mb-1);
    }
    .card__content
    {
        padding: 1.25rem 1.25rem;
        border-radius: 1rem;
    }
}
/* For medium devices */
@media screen and (min-width: 568px){
    .card__container
    {
        grid-template-columns: repeat(2, 1fr);
    }
    .card__content
    {
        grid-template-rows: repeat(2, max-content);
    }
    .card__button
    {
        align-self: flex-end;
    }
}
/* For large devides */
@media screen and (min-width: 968px){
    .container
    {
        margin-left: auto;
        margin-right: auto;
    }
    .card
    {
        height: 100vh;
        align-items: center;
    }
    .card__container
    {
        grid-template-columns: repeat(3, 1fr);
    }
    .card__header-circle
    {
        margin-bottom: var(--mb-1-25);
    }
    .card__header-subtitle
    {
        font-size: var(--small-font-size);
    }
}
/*=========================== SUBSCRIBE =============================*/

.subscribe__bg
{
    background-color: var(--first-color);
    padding: 2.5rem 0;
    width: 100%;
}
.subscribe__container
{
    position: relative;
    text-align: center;
}
.form__container
{
    grid-template-columns: repeat(auto-fit, minmax(188px, 1fr));
    gap: 1rem;
    margin: auto;
    justify-items: center;
    padding: 0 0;
    width: 100%;
    max-width: 500px;
}
.subscribe__title,
.subscribe__description
{
    color: var(--white-color);
}
.subscribe__description
{
    text-align: center;
    margin-bottom: var(--mb-2-5);
}
.subscribe__form
{
    display: flex;
    flex-direction: column;
    column-gap: 1rem;
    margin-bottom: 1rem;
    row-gap: 1rem;
}
.subscribe__input
{
    width: 100%;
    padding: .5rem;
    padding-left: .7rem;
    background-color: var(--input-color);
    color: var(--text-color);
}
.subscribe__input::placeholder
{
    color: var(--text-color);
}
.name__form
{
    margin: 0 auto 0 auto;
    width: 100%;
    max-width: 500px;
}
/*=========================== SPONSOR ====================================*/
.sponsor__container
{
    grid-template-columns: repeat(auto-fit, minmax(188px, 1fr));
    justify-items: center;
    align-items: center;
    row-gap: 3.5rem;
}
.sponsor__img
{
    max-height: 54px;
    filter: opacity(.5);
    transition: var(--img-transition);
}
.sponsor__content:hover .sponsor__img
{
    filter: opacity(.7);
}
.discount__container
{
    margin-top: 2rem;
    text-align: center;
}
.discount__container p
{
    font-weight: 700;
    margin: auto;
    color: black;
    width: 180px;
    cursor: pointer;
    filter: opacity(.5);
    transition: var(--img-transition);

}
.discount__container p:hover
{
    filter: opacity(.7);
}

/*================================= FOOTER ==============================*/
hr
{
    border: 0;
    border-top: 1px solid rgb(220, 220, 220);
}
.footer
{
    padding-bottom: 0;
    width: 100%;
    margin: 0;
    max-width: 100%;
}
.footer__container
{
    text-align: center;
    background-color: hsl(210, 14%, 95%);
    padding: 1rem 1rem 0 1rem;
    row-gap: 0.7rem;
    max-width: 100%;
    margin: 0;
    color: var(--footer-text-color);
    font-size: var(--small-font-size);
}
.footer__slogan
{
    
    font-size: var(--small-font-size);
    margin-right: 1rem;
    margin-left: 1rem;
}
.footer__copy
{
    font-size: var(--smaller-font-size);
}
#made-by, #made-by *
{
    font-size: var(--smaller-font-size);
    text-align: end;
    color: var(--footer-text-color);
}
#made-by *
{
    font-weight: 900;
}
#rif
{
    margin-right: -5rem;
    margin-top: -1rem;
}
/*=================================SCROLL UP=========================*/
.scrollup
{
    position: fixed;
    right: 1rem;
    bottom: -20%;
    background-color: var(--first-color);
    padding: .5rem;
    display: flex;
    opacity: .9;
    z-index: var(--z-tooltip);
    transition: .4s;
}
.scrollup__icon
{
    color: var(--white-color);
}
.scrollup:hover
{
    background-color: var(--first-color-alt);
    opacity: 1;
}
/* Show scroll up button*/
.show-scroll
{
    bottom: 4rem;
}

/*=========================== SCROLL BAR =======================*/
::-webkit-scrollbar
{
    width: .70rem;
    height: .7rem;
    background-color: var(--scroll-bar-color);
}
::-webkit-scrollbar-thumb
{
    background-color: var(--scroll-thumb-color);
}
::-webkit-scrollbar-thumb:hover
{
    background-color: var(--text-color-light);
}

/*========================= MEDIA QUERIES ===========================*/
/* For small devices */
@media screen and (max-width: 340px){
    body
    {
        margin: 0;
    }
    .nav__menu
    {
        padding: 2rem;
    }
    .experience__content
    {
        padding: 0;
    }
    .experience__overlay:nth-child(1)
    {
        width: 190px;
    }
    .experience__overlay:nth-child(2)
    {
        width: 80px;
    }
    .home__container
    {
        height: 100vh;
    }
    .home__info
    {
        width: 190px;
        padding: .7rem;
    }
    .experience__img
    {
        padding:0;
    }
}
/* For medium devices */
@media screen and (min-width: 768px){
    .nav
    {
        height: calc(var(--header-height) + 1.5rem);
    }
    .nav__logo
    {
        width: 10rem;
    }
    .nav__link
    {
        color: var(--white-color);
        text-transform: initial;
    }
    .nav__link:hover
    {
        color: var(--white-color);
    }
    .nav__menu
    {
        display: flex;
        flex-direction: row-reverse;
        column-gap: 3rem;
    }
    #login{
        display:flex;
        flex-direction: row;
    }
    #login__item
    {
        margin-bottom: 0;
    }
    .nav__list
    {
        flex-direction: row;
        column-gap: 3rem;
        margin-top: 0;
    }
    .nav__item
    {
        font-size: var(--h3-font-size);
    }
    .nav__toggle,
    .nav__close,
    .nav__hr
    {
        display: none;
    }
    .active-link::before
    {
        background-color: var(--white-color);
    }
    .scroll-header .nav__link
    {
        color: var(--text-color);
    }
    .scroll-header .active-link
    {
        color: var(--title-color);
    }
    .scroll-header .active-link::before
    {
        background-color: var(--title-color);
    }
    .section
    {
        padding: 7rem 0 2rem;
    }
    .footer
    {
        padding-bottom: 0;
    }
    .hide
    {
        display: none;
    }
    .about__container
    {
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
    }
    .about__data,
    .about__title
    {
        text-align: initial;
    }
    .about__title
    {
        margin-bottom: var(--mb-1-5);
    }
    .about__description
    {
        margin-bottom: var(--mb-2);
    }
    .discover__container
    {
        width: 750px;
        margin-left: auto;
        margin-right: auto;
        padding-top: 2rem;
    }
    .experience__overlay:nth-child(1)
    {
        width: 363px;
        margin-right: 4rem;
    }
    .experience__overlay:nth-child(2)
    {
        width: 160px;
    }
    .subscribe__bg
    {
        background: none;
        padding: 0;
    }
    .subscribe__container
    {
        background-color: var(--first-color-second);
        padding: 3.5rem 0;
    }
    .subscribe__description
    {
        padding-left: 3rem;
        padding-right: 3rem;
    }
    .footer__slogan
    {
        font-size: var(--normal-font-size);
    }
    .footer__copy
    {
        font-size: var(--small-font-size) !important;
    }
}
/* For large devices */
@media screen and (min-width: 1024px){
    .container
    {
        margin-left: auto;
        margin-right: auto;
    }
    .home__data-subtitle
    {
        font-size: var(--h1-font-size);
    }
    .home__data-title
    {
        font-size: 4rem;
    }
    .home__info
    {
        width: 328px;
        grid-template-columns: 1fr 2fr;
        column-gap: 2rem;
    }
    .home__info-title
    {
        font-size: var(--normal-font-size);
    }
    .home__info-img
    {
        width: 240px;
    }
    .about__img-one
    {
        width: 240px;
    }
    .about__img-two
    {
        width: 290px;
    }
    .discover__card
    {
        width: 237px;
    }
    .discover__container
    {
        width: 697px;
    }
    .discover__data
    {
        left: 1.5rem;
        bottom: 2rem;
    }
    .discover__title
    {
        font-size: var(--h2-font-size);
    }
    .experience__content
    {
        margin: var(--mb-1) 0;
        column-gap: 3.5rem;
    }
    .experience__overlay:nth-child(1)
    {
        width: 463px;
        margin-right: 7rem;
    }
    .experience__overlay:nth-child(2)
    {
        width: 220px;
        top: 3rem;
    }
    .experience__number
    {
        font-size: var(--h1-font-size);
    }
    .experience__description
    {
        font-size: var(--font-medium);
    }
}
@media screen and (min-width: 1200px){
    .container
    {
        max-width: 1024px;
    }
    .footer__container
    {
        max-width: 100%;

    }
}

/* For tall screens on mobiles and desktops */
@media screen and (min-height: 721px){
    body
    {
        margin: 0;
    }
    .home__container,
    .home__img
    {
        height: 640px;
    }
}

/* //////////////////////////////// LOGIN HTML //////////////////////////////// */

.login__main
{
    display: block;
    overflow-y: hidden;
}
.login__body
{
    margin: 0;
}
.login__home-img
{
    position: fixed;
    height: 100%;
    left: 0;
    bottom: -.3rem;
    z-index: -1;
}

/* ========== LOGIN HEADER =========== */ 
.login__header
{
    display: block;
    width: 100%;
    top: 0;
    left: 0;
    z-index: var(--z-fixed);
    background-color: transparent;
}
.login__logo-container
{
    display: flex;
    justify-content: center;
    height: calc(var(--header-height) + 0.5rem);
}
.login__logo
{
    cursor: pointer;
    width: 9rem;
}

/* ============ LOGIN MAIN ========== */
.login__container
{
    width: 100vw;
    height: calc(100vh - 4rem);
    min-height: 464px;
    display: flex;
    justify-content: space-between;
    padding: 0 2rem;
}
.login__img 
{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.art
{
    width: 500px;
    margin: 0 -3rem 0 3rem;
}
.avatar
{
    width: 100px;
}
.login__box-container
{
    display: flex;
    width: 50%;
    justify-content: center;
    align-items: center;
    margin: 0 5rem;
}
.login__presentation
{
    display: flex;
    flex-direction: column;;
    align-items: center;
}
.login__form
{
    display: grid;
    width: 300px;
    min-width: 200px;
    row-gap: 1rem;
}
.login__title
{
    font-size: var(--biggest-font-size); /* h1-font-size */
    margin: 15px 0;
}
.login__subtitle
{
    padding-bottom: .5rem;
}
.login__input-div
{
    display: grid;
    row-gap: 1rem;
    padding-bottom: 1rem;
}
.login__input-container
{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    column-gap: 10px;
    background-color: var(--white-color);
    padding: 0.7rem;
    border: 1px solid var(--input-border-color);
}
.login__input
{
    width: 100%;
    padding: 0;
    color: var(--text-color);
}
.i
{
    padding-top: 1px;
    width: 15px;
    height: 15px;
    color: var(--text-color-light)
}

/* ============ LOGIN FOOTER ========= */
.login__footer
{
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    top: -.7rem;
}
.login__footer-rights
{
    display: flex;
    justify-content: flex-end;
}
.login__footer-copy
{
    color: var(--text-color-light);
    font-size: var(--small-font-size);
}

/* ========= LOGIN MEDIA QUERIES =========*/
@media screen and (max-width: 647px){
    .login__home-img
    {
        display: block;
        object-fit: cover;
        object-position: 0;
        top: 30rem;
    }
}
@media screen and (max-width: 968px){
    .login__container
    {
        justify-content: center;
    }
    .login__home-img
    {
        bottom: -15rem;
    }
    .art
    {
        display: none;
    }
    .login__title
    {
        font-size: 2rem;
    }
}
@media screen and (min-width: 968px){
    .art
    {
        display: flex;
    }
    .login__logo
    {
        width: 10rem;
    }
    .login__container
    {
        min-height: 471px;
    }
}

/* =========================== DASHBOARD HTML ========================== */

:root{
    --db-hue-color: 225;
    --db-color: hsl(218, 77%, 42%);
    --db-color-alt: hsl(225, 60%, 41%);
    --db-bg: #fbfefd;
    --db-bg2: #dce5ff;
    --db-color-accent: var(--coin-border-color);
    --db-color-light-accent: hsl(240, 17%, 98%);
    --db-color-text: #4b5876;
    --db-shadow: rgba(17,17,26,0.15) 0px 4px 16px;
    --db-shadow-hover: rgba(17, 17, 26, 0.2) 0px 4px 16px;
    --db-sidebar-width: 300px;
    --db-header-height: 80px;
}

.db
{
    background: var(--db-bg);
    overflow-x: hidden;
    padding: 0;
    margin: 0;
}
.db *
{
    padding: 0;
    margin: 0;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    color: var(--text-color);
    list-style-type: none;
    box-sizing: border-box;
}
.db img
{
    max-width: 100%;
    height: auto;
}
#db__menu-toggle
{
    display: none;
}
.hidden
{
    display: none !important;
}
.show-sb
{
    left: 0;
}
.hide-sb
{
    left: -100%;
}
.extend-main
{
    margin-left: 0;
    width: 100%;
}
.reduce-main
{
    margin-left: var(--db-sidebar-width);
    width: calc(100vw - var(--db-sidebar-width));
}
.db__sidebar
{
    width: var(--db-sidebar-width);
    min-height: 449px;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    padding: 1rem 0 1rem 1rem;
    transition: .4s;
    z-index: 100;
}
.db__sidebar-container
{
    height: 100%;
    width: 100%;
    background: var(--white-color);
    border-radius: 20px;
    box-shadow: var(--db-shadow-hover);
    padding: 1.2rem;
}

.db__logo-container
{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.db__logo
{
    width: 9.25rem;
}
.db__avatar-card
{
    display: grid;
    grid-template-columns: 55px auto;
    align-items: center;
    border: 2px solid var(--db-color-accent);
    padding: .5rem .5rem .5rem .7rem;
    border-radius: 7px;
    margin: .6rem 0rem 1.65rem 0;
}
.db__avatar-container
{
    display: flex;
}
.db__avatar-info
{
    display: flex;
    align-items: center;
    margin-left: .7rem;
}
.sidebar-ul
{
    display:flex;
    flex-direction: column;
    overflow-y: auto;
    row-gap: 3px;
    padding-left: .5rem;
}
.sidebar-menu a
{
    display: flex;
    align-items: center;
    color: var(--db-color-text);
    padding: .7rem 0rem;
    transition: all .25s ease;
}
.sidebar-menu a:hover
{
    padding: .7rem;
}
.sidebar-menu a.active
{
    font-weight: var(--font-semi-bold);
    color: var(--db-color);
    padding: .7rem;
    transition: padding .25s ease;
}
.sidebar-menu a.active *
{
    color: inherit;
}
.sidebar-menu a.active i {
    font-weight: 400;
}
.sb__icon /*  icon before span */
{
    display: inline-block;
    margin-right: .8rem;
    font-size: 1.3rem;
    color: var(--db-color-text);
}
.main-content
{
    transition: all .4s ease;
    padding: 1rem 1rem 0;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: auto;
}
.db__header
{
    display: block;
    position: fixed;
    width: inherit;
    top: 0;
    right: 0;
    padding-left: 1.665rem;
    height: var(--db-header-height);
    background-color: var(--db-bg);
}
.db__nav-container
{
    display: flex;
    justify-content: space-between;
    padding-right: 1rem;
    min-width: 595px;
    align-items: center;
    height: 100%;
}
.db__header-title-container
{
    display: flex;
}
.db__header-action
{
    display: flex;
    align-items: center;
    margin: 0 12px;
}
.db__menu-icon
{
    display: inline-block;
    color: var(--db-color);
    margin-right: 1rem;
    margin-top: .5rem;
    font-size: 1.5rem;
    cursor: pointer;
    height: 25px;
}
.db__title
{
    color: var(--text-color);
    font-weight: 600;
}
.db__description
{
    color: var(--text-color);
    font-size: .9rem;
}
.db__button
{
    padding: 10px 15px;
    border: none;
    border-radius: 10px;
    background: var(--db-color);
    color: #fff;
    cursor: pointer;
    transition: .3s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 5px;
}
.db__button:hover
{
    background-color: var(--db-color-alt);
}
.header-button
{
    min-width: 156px;

}
.button-icon
{
    color: #fff;
}
.main-content section
{
    transition: all .4s ease;
    margin-top: calc(var(--header-height) + 1rem);
    padding: 0 .85rem 1rem .85rem;
    height: -webkit-fill-available;
    overflow-x: unset;
}
.analytics
{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1.5rem;
    margin: 1rem 0;
}
.analytic
{
    box-shadow: var(--db-shadow);
    padding: .7rem 1rem;
    border-radius: 10px;
    background-color: var(--white-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 121.44px;
    transition: all 300ms ease;
}
.analytic:hover
{
    box-shadow: var(--db-shadow-hover);
}
.analytic-icon
{
    min-width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: var(--db-color-accent);
    display: flex;
    justify-content: center;
    align-items: center;
}
.analytic-icon > *
{
    font-size: 20px;
    color: var(--db-color);
}
.analytic-info
{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.analytic-text
{
    display: flex;
    justify-content: center;
    width: 100%;
}
.analytic-numbers
{
    display: flex;
    justify-content: flex-end;
    margin-right: .5rem;
    margin-left: .5rem;
}
.analytic-numbers > h1
{
    font-weight: 600;
}
/* ==================== TABLE ======================= */
.success
{
    color: rgb(77, 225, 114);
}
.warning
{
    color: rgb(240, 130, 12);
}
.error
{
    color: rgb(236, 40, 76);
}
.recent-orders
{
    margin: 1.8rem 0 1rem 0;
}
.db__subtitle
{
    margin-bottom: .8rem;
}
.table 
{
    background: white;
    width: 100%;
    border-radius: 20px;
    padding: 1rem;
    text-align: center;
    box-shadow: var(--db-shadow);
    transition: all 300ms ease;
}
.table:hover
{
    box-shadow: var(--db-shadow-hover);
}
.table tr
{
    white-space: nowrap;
}
.table tbody td
{
    height: 2.5rem;
    padding: .35rem 0 .35rem 0;
    
    border-bottom: 1px solid var(--db-color-accent);
}
.show-all
{
    display: block;
    text-align: center;
    margin: 1rem auto;
    color: var(--text-color-light);
    font-weight: 100;
    transition: all 300ms ease;
}
.show-all:hover
{
    color: var(--text-color);
}
/* ================ ADD NEW CLIENTS SECTION ==============*/
.clients__section
{
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}
.db__form-container
{
    width: 100%;
    background-color: white;
    border-radius: 20px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: var(--db-shadow);
    transition: all 300ms ease;
}
.db__form{
    color: var(--text-color);
}
.form__grid
{
    gap: 1rem;
    grid-template-columns: repeat(10, 1fr);
    grid-template-areas: 
        'nam nam nam nam nam nam nam num num num'
        'nam nam nam nam nam nam nam num num num'
        'nam nam nam nam nam nam nam num num num'
        'dir dir dir dir dir dir dir dir dir dir'
        'dir dir dir dir dir dir dir dir dir dir'
        'ban ban ban ban acn acn acn acn acn acn'
        'acc acc acc acc opt opt opt opt opt opt'
        'img img img img img img img img img img'
        'btn btn btn btn btn btn btn btn btn btn';
}
.db__form input[class*='input']
{
    background-color: var(--db-color-light-accent);
    border: 1px solid var(--input-border-color);
    padding: 0.5rem 0.7rem;
    width: 100%;
}
.db__form div[class*='grid-item']
{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
input[type="file"]
{
    display:none;
}
.db__grid-div
{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.upload__title-div
{
    display: flex;
    width: 100%;
    justify-content: center;
}
.db__grid-upload
{
    display: grid;
    justify-items: center;
    grid-template-columns: repeat(2,2fr);
    gap: 1rem;
}
.upload-button
{
    background-color: white;
    color: var(--db-color);
    font-size: var(--small-font-size);
    font-weight: var(--font-semi-bold);
    min-width: 157.56px;
    max-width: 200px;
    border-radius: 0;
    border: 1px #dadce0 solid;
}
.upload-button:hover
{
    background-color: #dadce056;
}
.upload-icon
{
    color: var(--db-color);
}
.db__grid-button
{
    display: flex;
    justify-content: center;  
}
.save__button
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 5px;
}

.db__grid-opt
{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    gap: 1rem;
}
.form__grid select
{
    background-color: var(--input-color);
    border: 1px solid var(--input-border-color);
    padding: 0.5rem .4rem .5rem;
    font-size: var(--normal-font-size);
    width: 100%;
}
.form__grid select ::selection
{
    padding: 0;
    margin: 0;
}
.db__grid-opt select-items
{
    background-color: var(--db-color-light-accent);
    border-color: #fff;
}
/*===================== DATABASE TABLE ====================*/
#database-table
{
    font-size: var(--small-font-size);
    padding: .8rem;
}
#overlay
{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10;
    display: block;
    background: rgba(255, 255, 255, 0.5);
}

/* =============== DASHBOARD PAGE MEDIA QUERIES ==============*/
@media screen and (max-width: 340px){
    .hide-sb
    {
        left: -150%;
    }
    .analytics
    {
        grid-template-columns: repeat(1, 1fr);
    }
    .db__grid-opt
    {
        flex-direction: column;
    }
    .db__grid-upload
    {
        gap: .5rem;
        grid-template-columns: repeat(1,1fr);
    }
}
@media screen and (max-width: 434px){
    .db__grid-upload
    {
        gap: .5rem;
        grid-template-columns: repeat(1,1fr);
    }
    .upload__title-div
    {
        justify-content: flex-start;
        padding: 0 0 .5rem .5rem;
    }
}
@media screen and (max-width: 500px){
    :root{
        --db-header-height: 70px;
    }
    .db__sidebar
    {
        padding: .5rem 0 .5rem .5rem;
    }
    .main-content
    {
        padding: .5rem .5rem 0;
        overflow-x: hidden;
    }
    .main-content section
    {
        overflow-x: auto;
    }
    .main-content section::-webkit-scrollbar,
    .main-content section::-webkit-scrollbar-thumb
    {
        background-color: transparent;
    }
    .dashboard__section
    {
        padding: 0.3rem !important;
    }
    .analytics
    {
        margin: 0 .5rem 1rem .5rem;
    }
    .recent-orders 
    {
        padding: 0 .7rem;
        overflow-x: auto;
    }
    .recent-orders::-webkit-scrollbar,
    .recent-orders::-webkit-scrollbar-thumb
    {
        background-color: transparent;
    }
    .db__header
    {
        padding-left: 1rem;
    }
    .db__title
    {
        font-size: var(--h2-font-size);
    }
    .db__subtitle
    {
        font-size: var(--h3-font-size);
    }
    .db__description
    {
        font-size: var(--small-font-size) !important;
    }
    .upload__title-div p
    {
        font-size: .85rem !important;
    }
    .db__grid-button
    {
        padding-top: 1rem;
    }
    .form__grid
    {
        gap: .5rem !important;
        grid-template-columns: repeat(10,1fr);
        grid-template-areas: 
            'nam nam nam nam nam nam nam nam nam nam'
            'nam nam nam nam nam nam nam nam nam nam'
            'nam nam nam nam nam nam nam nam nam nam'
            'num num num num num num num num num num'
            'num num num num num num num num num num'
            'num num num num num num num num num num'
            'dir dir dir dir dir dir dir dir dir dir'
            'dir dir dir dir dir dir dir dir dir dir'
            'ban ban ban ban ban ban ban ban ban ban'
            'acc acc acc acc acc acc acc acc acc acc'
            'acn acn acn acn acn acn acn acn acn acn'
            'opt opt opt opt opt opt opt opt opt opt'
            'img img img img img img img img img img'
            'btn btn btn btn btn btn btn btn btn btn';
    }
}
@media screen and (max-width: 720px){
    .db__header
    {
        padding-left: 1.2rem;
    }
    .analytics 
    {
        grid-template-columns: repeat(2,1fr);
        font-size: var(--small-font-size);
        grid-gap: 1.2rem;
    }
    .analytic-text
    {
        justify-content: left;
    }
    .table, .db__form-container
    {
        font-size: var(--small-font-size) !important;
    }
    .header-button
    {
        display: none;
    }
    .db__grid-opt
    {
        gap: .5rem;
    }
    .db__form div[class*='grid-item'] 
    {
        gap: .5rem;
    }
    .db__form input[class*='input'],
    .form__grid select
    {
        padding: .4rem .7rem;
    }
    .form__grid
    {
        gap: 1rem;
    }
}
@media screen and (max-width: 1021px){
    .table
    {
        font-size: 14px;
    }
    .db__header
    {
        width: 100%;
    }
}
/* =============== TALL SCREENS =============*/
@media screen and (max-height: 500px){
    .db__sidebar
    {
        padding: 0;
    }
    .db__sidebar-container
    {
        padding: 0 1rem 0 1.5rem;
        border-radius: 0;
    }
    .db__avatar-card
    {
        margin: 0 0 .5rem 0;
    }
}