/* FONT */
@font-face {
    font-family: 'Poppins';
    src: url(../fonts/Poppins/Poppins-Regular.ttf);
    font-weight: 400;
}

@font-face {
    font-family: 'Poppins';
    src: url(../fonts/Poppins/Poppins-Light.ttf);
    font-weight: 300;
}

@font-face {
    font-family: 'Poppins';
    src: url(../fonts/Poppins/Poppins-ExtraLight.ttf);
    font-weight: 200;
}

body {
    font-family: 'Poppins', sans-serif;
    display: flex;
    flex-direction: column;
}

.font-bold {
    font-weight: bold;
}

.font-400 {
    font-weight: 400;
}

.font-300 {
    font-weight: 300;
}

.font-200 {
    font-weight: 200;
}

.font-mini {
    font-size: .9rem;
}

.font-little {
    font-size: 1.3rem;
}

.font-medium {
    font-size: 2rem;
}

.font-big {
    font-size: 3rem;
}

/* HERO */
#hero {
    position: relative;
}

.hero-img img {
    width: 100%;
}

.hero-download-destkop {
    display: none;
}

.hero-download button {
    width: 100%;
    background-color: #4CB050;
    border: none;
    color: white;
    padding: .5rem 0;
}

.hero-tour button {
    width: 100%;
    background-color: black;
    border: none;
    color: white;
    padding: .5rem 0;
}

/* PADDING GENERAL */
#app,
#clarity,
#pricing {
    padding: 0 1rem;
}

/* APP */
#app {
    padding-top: 3rem;
}

#app h1 span {
    display: block;
    color: #4CB050;
    margin-bottom: .5rem;
}

#app p:nth-child(3) {
    margin: 1rem 0;
}

#app .fa-brands:nth-child(1) {
    color: #4CB050;
}

#app .fa-brands:nth-child(2) {
    color: #010002;
}

#app .fa-brands:nth-child(3) {
    color: #2196F3;
}

#app button {
    display: block;
    margin: 0 auto 1rem;
    border: none;
    background-color: white;
}

.app-preview {
    margin: 0 1rem;
}

/* CLARITY */

#clarity h2 span {
    display: block;
    color: #F34335;
    margin-bottom: .5rem;
}

.clarity-img {
    display: none;
}

#clarity {
    background-color: #F1F1F1;
    margin-top: 3rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* FEATURES */
#features {
    background-color: #616161;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    gap: 2rem;
    padding: 3rem 0;
    color: white;
}

#features .features-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.features-icons .icon {
    width: 14%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}

#features .features-icons .icon:nth-child(1) i {
    color: #FF9801;
}

#features .features-icons .icon:nth-child(2) i {
    color: #F54337;
}

#features .features-icons .icon:nth-child(3) i {
    color: #D1BE0F;
}

#features .features-icons .icon:nth-child(4) i {
    color: #4CB050;
}

#features .features-icons .icon:nth-child(5) i {
    color: #FFFFFF;
}

#features .features-icons .icon:nth-child(6) i {
    color: #2196F3;
}

#features .features-icons .icon:nth-child(7) i {
    color: #FFC108;
}

#features .features-icons .icon:nth-child(8) i {
    color: #00BCD2;
}

#features .features-icons .icon:nth-child(9) i {
    color: #FDF6E6;
}

#features .features-icons .icon:nth-child(10) i {
    color: #FF9801;
}

#features .features-icons .icon:nth-child(11) i {
    color: #757575;
}

#features .features-icons .icon:nth-child(12) i {
    color: #EA1E63;
}

/* PRICING */
#pricing {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1rem;
    gap: 2rem;
}

.pricing-text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pricing-basic,
.pricing-premium {
    background-color: #F1F1F1;
    width: 100%;
    padding-bottom: 1rem;
    
}

.pricing-plans {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
}

#pricing ul {
    display: flex;
    flex-direction: column;
}

#pricing li {
    padding: 1rem;
}

#pricing li:last-child {
    color: #8C8C8C;
}

.pricing-basic li {
    background-color: white;
    padding: .3rem;
}

.pricing-basic li:nth-child(1) {
    background-color: #616161;
    color: white;
    padding: 1rem 2rem;
}

.pricing-premium li {
    background-color: white;
}

.pricing-premium li:nth-child(1) {
    background-color: red;
    color: white;
    padding: 1rem 2rem;
}

#pricing button {
    background-color: black;
    color: white;
    padding: .3rem .5rem;
    margin-top: 1rem;
}

/* FOOTER */
footer {
    background-color: #F1F1F1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 0
}

/* MEDIA QUERIES*/

/* Mobile */
@media (min-width: 320px) {}

/* Tablet */
@media (min-width: 768px) {}

/* Desktop */
@media (min-width: 1024px) {

    /* HERO */
    .hero-download {
        position: absolute;
        top: 50%;
        left: 1vw;
        transform: translateY(-50%);
        width: 30vw;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        background-color: black;
        color: white;
        padding: 1.5rem;
        opacity: 60%;
        border-radius: .5rem;
    }

    .hero-download:hover {
        opacity: 100%;
    }

    .hero-download p:first-child {
        text-decoration: underline;
        text-underline-offset: 1rem;
    }

    .hero-download-destkop {
        display: flex;
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .hero-tour {
        position: absolute;
        right: 1vw;
        top: 50%;
        transform: translateY(-50%);
    }

    .hero-tour button {
        padding: .5rem;
        border-radius: .5rem;
    }

    /* APP */
    #app {
        display: flex;
    }

    .app-content {
        width: 70vw;
    }

    .app-preview {
        width: 30vw;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #app button {
        margin: 0;
        background-color: #F1F1F1;
        padding: .5rem 1rem;
    }

    /* CLARITY */
    #clarity {
        display: flex;
    }

    .clarity-img {
        display: block;
    }

    .clarity-text {
        width: 70vw;
        padding: 5rem;
    }

    /* FEATURES */

    .features-icons {
        margin: 3rem;
        width: 100%;
    }

    .features-icons .icon {
        width: 20%;
    }

    .features-icons .icon i {
        font-size: 3rem;
    }

    /* PRICING */
    .pricing-plans {
        flex-direction: row;
        justify-content: center;
    }



}