:root{
        /* Colors */
        --background-color: #1f2937;  /*Header, Hero, Footer BG */
        --primary-text: #F9FAF8; /*Background Color Title */
        --secondary-text: #E5E7EB; /*Header list and Hero Secondary */
        --logo-text:var(--primary-text); /*Logo color */
        --cta-button: #3882f6; /*CTA and Button Color */
        --soft-text: var(--background-color); /* Info and Quote Text */
        --quote-back: var(--secondary-text); /*Quote BG*/

        /* Fonts */
        --main-font: 'Roboto', sans-serif;
        --hero-size: 48px;
        --hero-seco: 18px;
        --header-logo: 24px;
        --info-head: 36px;
        --quote-text: 36px;
        --weight-heavy: 900;
        --weight-light: 300;
    }

    /* CSS Resets, Ul, A and Img */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .container{
        margin: 0 auto;
    }

    ul{
        list-style: none;
    }

    a{
        text-decoration: none;
        color: inherit;
    }

    img{
        height: 182px;
        width: 182px;
        display: block;
        border: 2px solid #3882f6;
        border-radius: 8px;
    }

    .body{
        min-width: 100vh;
        margin: 0;
    }

    /* Styles  */
    body{
        font-family: var(--main-font);
    }

    .header,
    .hero,
    .footer{
        background-color: var(--background-color);
    }

    .hero-title{
        font-size: var(--hero-size);
        color: var(--primary-text);
        font-weight: var(--weight-heavy);
    }

    .hero-text,
    .links{
        font-size: var(--hero-seco);
        color: var(--secondary-text);
    }

    .logo{
        font-size: var(--header-logo);
        color: var(--logo-text);
        font-weight: var(--weight-heavy);
    }

    .hero-button,
    .cta-button,
    .cta-grp{
        background-color: var(--cta-button);
        color: var(--secondary-text);
    }

    .info-title{
        font-size: var(--info-head);
        color: var(--soft-text);
        font-weight: var(--weight-heavy);
        text-align: center;
    }

    .quo{
        background-color: var(--quote-back);

    }

    blockquote{
        font-size: var(--quote-text);
        color: var(--background-color);
        font-weight: var(--weight-light);
        font-style: italic;
    }

    figcaption{
        font-weight: var(--weight-heavy);
        text-align: right;
    }

    .footer{
        text-align: center;
        color: var(--primary-text);
    }

    /* Flexbox setup padres*/

    .container{
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .header,
    .hero,
    .info,
    .quo,
    .cta,
    .footer{    
        display: flex;
    }

    /* Propiedades Flex Padres */

    .header{
        flex: 1;
        justify-content: space-between;
        align-items: center;
        padding-top: 30px;
        padding-left: 400px;
        padding-right: 400px;
        flex-wrap: wrap;
    }

    .hero{
        justify-content: space-between;
        flex: 1;
        gap: 32px;
        padding-top: 100px;
        padding-bottom: 100px;
        padding-left: 400px;
        padding-right: 400px;
        flex-wrap: wrap;
    }

    .info{
        flex: 1;
        flex-flow: column wrap;
        justify-content: space-evenly;
        gap: 60px;
        padding-top: 28px;
        padding-bottom: 100px;
        padding-left: 400px;
        padding-right: 400px;
    }

    .quo{
        flex: 1;
        flex-flow: column wrap;
        align-items: center;
        padding-top: 100px;
        padding-bottom: 100px;
        padding-left: 400px;
        padding-right: 400px;
    }

    .cta{
        flex: 1;
        justify-content: center;
        align-items: center;
        padding-top: 100px;
        padding-bottom: 100px;
        padding-left: 400px;
        padding-right: 400px;
        flex-wrap: wrap;
    }

    .footer{
        flex: 1;
        justify-content: center;
        align-items: center;
        padding: 35px;
    }

    /* Flex hijos con propiedades */

    ul,
    .nav{
        display: flex;
        flex-direction: row;
        padding: 0;
        margin: 0;
        list-style: none;
        gap: 36px;
        align-items: center;
    }

    .hero-left{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 16px;
    }

    .hero1{
        width: 300px;;
    }

    .hero-title{
        max-width: 500px;
    }

    .hero-text{
        max-width: 450px;
    }


    .hero-button{
        padding: 8px 28px;
        border-radius: 5px;
        border: none;
        font-weight: var(--weight-heavy);
        font-size: var(--hero-seco);
    }

    .info-card{
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        flex-wrap: wrap;
    }
    .info-s1,
    .info-s2,
    .info-s3,
    .info-s4{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .info-stx1,
    .info-stx2,
    .info-stx3,
    .info-stx4{
        max-width: 152px;
        text-align: center;
    }

    .quote{
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: 775px;

    }

    .cta-grp{
        display: flex;
        flex:1;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        border-radius: 15px;
        padding: 48px ;
        gap: 218px;
    }

    .cta-button{
        padding: 8px 22px;
        border-radius: 6px;
        border: 2px solid var(--primary-text);
        font-weight: var(--weight-heavy);
        font-size: var(--hero-seco);

    }