/* Font import */
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');

:root{
    /* Color variables */
    --cyan-600: #4d96a9;
    --cyan-300: #8FE3F9;
    --purple-600: #855FB1;
    --purple-300: #D9B8FF;
    --slate-900: #28283D;
    --slate-600: #87879D;
    --slate-300: #D1D1DF;
    --white: #FAFAFA;

    /* Spacing Variables */
    --spacing-1400: 7rem;
    --spacing-1000: 5rem;
    --spacing-900: 4.5rem;
    --spacing-800: 4rem;
    --spacing-700: 3.5rem;
    --spacing-600: 3rem;
    --spacing-500: 2.5rem;
    --spacing-400: 2rem;
    --spacing-300: 1.5rem;
    --spacing-200: 1rem;
    --spacing-100: .5rem;
    --spacing-50: .25rem;
}

/* Global styles */
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Red Hat Display', sans-serif;
}

html{
    scroll-behavior: smooth;
}

body{
    background-color: var(--white);
}


/* Hero Styles */

.hero{
    position: relative;
    padding: var(--spacing-400);
    display: grid;
    gap: var(--spacing-600) var(--spacing-200);
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto auto;
    overflow: hidden;
}

.logo{
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    justify-self: center;
    padding: var(--spacing-200) 0;
    width: 50%;
    max-width: 118px;
}

.hero-image-left{
    width: 140%;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    position: absolute;
    right: 0;
}

.hero-image-right{
    width: 140%;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.hero-text{
    width: 100%;
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    text-align: center;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-300) 0;
}

.hero-text__title{
    width: 90%;
    margin: 0 auto;
    /* font-size: 2.5rem; */
    font-size: clamp(2.5rem, 1.972rem + 2.254vw, 4rem);
    font-weight: 900;
    line-height: 110%;
    color: var(--slate-900);
}

.hero-text__description{
    font-size: 1rem;
    font-weight: 500;
    line-height: 150%;
    color: var(--slate-600);
}

.hero .buttons-container{
    width: 63.27868852459016%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    gap: var(--spacing-200);
}

.btn-1{
    display: inline-block;
    padding: var(--spacing-200) var(--spacing-500);
    background-color: var(--cyan-600);
    color: var(--white);
    text-decoration: none;
    font-size: 1rem;
    line-height: 150%;
    font-weight: 900;
    border-radius: 29px;
    transition: background-color .2s ease-in-out;
}

.btn-1 .version{
    color: var(--cyan-300);
}

.btn-1:hover{
    background-color: #71C0D4;
}
.btn-1:active{
    background-color: #71C0D4;
    scale: 1.05;
}

.btn-2{
    display: inline-block;
    padding: var(--spacing-200) var(--spacing-500);
    background-color: var(--purple-600);
    color: var(--white);
    text-decoration: none;
    font-size: 1rem;
    line-height: 150%;
    font-weight: 900;
    border-radius: 29px;
    transition: background-color .2s ease-in-out;
}

.btn-2 .version{
    color: var(--purple-300);
}

.btn-2:hover{
    background-color: #B18BDD;
}
.btn-2:active{
    background-color: #B18BDD;
    scale: 1.05;
}

/* Main: Features section Styles */
.container .features{
    width: 100%;
    padding: var(--spacing-400);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-800);
}
.timeline-step{
    z-index: 1;
}

.timeline-step .line{
    width: .0625rem;
    height: 5rem;
    background-color: var(--slate-300);
    margin: 0 auto;
}

.timeline-step .circle{
    display: inline-block;
    width: 3.5rem;
    height: 3.5rem;
    padding: var(--spacing-200);
    border: .0625rem solid var(--slate-300);
    border-radius: 50%;
    text-align: center;
    font-size: 1rem;
    font-weight: 900;
    color: var(--slate-600);
    background-color: white;
}

.features-pictures{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: var(--spacing-200);
}

.features-pictures img{
    width: 100%;
    border-radius: 8px;
    margin: 0 auto;
}

.features-text__subtitle{
    font-size: .75rem;
    font-weight: 900;
    line-height: 110%;
    letter-spacing: .25rem;
    color:var(--cyan-600);
    text-transform: uppercase;
    text-align: center;
    padding-bottom: var(--spacing-200);
}

.features-text__title{
    font-size: 2rem;
    font-weight: 900;
    line-height: 110%;
    color:var(--slate-900);
    text-align: center;
    padding-bottom: var(--spacing-400);
}

.features-text__description{
    font-size: 1rem;
    font-weight: 500;
    line-height: 150%;
    color:var(--slate-600);
    text-align: center;
    padding-bottom: var(--spacing-400);
}

/* Main: Download section Styles */
.container .download{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container .download-text{
    width: 100%;
    padding: var(--spacing-800) var(--spacing-400);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-300);
    text-align: center;
    background-image: linear-gradient(rgba(77, 150, 169,.9), rgba(77, 150, 169,.9)),url(assets/mobile/image-footer.jpg);
    background-size: cover;
    background-position: center;
    margin-top: -1.75rem;
}

.download .download-text__title{
    font-size: 2rem;
    font-weight: 900;
    line-height: 110%;
    color: var(--white);
}

.download .download-text__description{
    font-size: 1rem;
    font-weight: 500;
    line-height: 150%;
    color: var(--white);
}

@media (min-width: 31.25rem){
    .hero{
        gap: var(--spacing-900) var(--spacing-400);
    }

    .hero-image-left, .hero-image-right{
        width: 117%;
    }

    .hero-text{
        width: 58.37239583333333%;
    }

    .hero-text__title{
        width: 85%;
    }

    .hero .buttons-container{
        width: 100%;
        flex-direction: row;
        justify-content: center;
    }

    .features-pictures{
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr;
        gap: 0 var(--spacing-400);
    }
    
    .features-text{
        width: 70%;
    }

    .features-text__subtitle{
        font-size: .875rem;
    }

    .features-text__title{
        width: 90%;
        font-size: 2.25rem;
        margin: 0 auto;
    }

    .container .download-text{
        background-image: linear-gradient(rgba(77, 150, 169,.9), rgba(77, 150, 169,.9)),url(assets/tablet/image-footer.jpg);
    }

    .download .download-text__title{
        font-size: 2.25rem;
    }
}

@media (min-width: 67.5rem){
    .logo{
        padding-top: var(--spacing-1000);
    }

    .hero{
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto auto;
        grid-auto-rows: min-content;
        gap: var(--spacing-800) var(--spacing-300);
        object-fit: cover;
        padding: var(--spacing-1000) var(--spacing-1000);
    }

    .logo{
        grid-column: 1 / 4;
        grid-row: 1 / 2;
        padding: 0;
    }

    .hero-image-left{
        width: 100%;
        height: auto;
        grid-column: 1 /2;
        grid-row: 2 / 3;
        margin-right: 6.5625rem;
    }

    .hero-text{
        padding: 1.5rem 0;
        width: 100%;
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        justify-content: center;
        gap: var(--spacing-400);
    }

    .hero-image-right{
        width: 100%;
        height: auto;
        grid-column: 3 / 4;
        grid-row: 2 / 3;
        margin-left: 6.5625rem;
        margin-top: 3.5625rem;
    }

    .hero-text__title{
        width: 100%;
        max-width: 25.6669rem;
    }

    .hero-text__description{
        width: 100%;
        font-size: 1.125rem;
    }

    .container .features{
        width: 88.9%;
        margin: 0 auto;
        padding: var(--spacing-700) var(--spacing-1000) var(--spacing-900);
    }
    
    .features-text{
        width: 44%;
    }

    .features-text__title{
        width: 80%;
    }

    .features-text__description{
        padding: 0;
    }

    .container .download-text{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr;
        gap: var(--spacing-400);
        padding: var(--spacing-1400) var(--spacing-1000);
        text-align: left;
        align-content: center;
        justify-content: space-evenly;
    }

    .download .download-text__title{
        font-size: 2.5rem;
        width: 90%;
    }

    .download .download-text__description{
        font-size: 1.125rem;
        width: 90%;
    }  
    
    .download .btn-2{
        width: 50%;
        justify-self: center;
        text-align: center;
    }
}