:root {

    --green-01: #26baa4;
    --blue-01: #6173ff;

    --gray-01: #4c545d;
    --gray-02: #9fabb2;
    --gray-03: #F5F6F8;

    --font-primary: 'Bai Jamjuree', Arial, Helvetica, sans-serif;

}

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

body {
    min-height: 100vh;
    width: 100%;
    font-family: var(--font-primary);
    font-size: 1.125rem;
    background-color: #FFFFFF
}



/* CLASS */

.download-actions {
    display: flex;
    flex-direction: column;
    gap: 1.25em;
    width: 100%;
}

.download-actions--btn {
    width: 100%;
    padding: 0.85em;
    font-weight: 600;
    color: #ffffffec;
    letter-spacing: 0.1em;
    border-radius: 30px;
    border-bottom: 3px solid black;
    background-color: var(--gray-01);
}

.download-actions--btn:hover {
    color: #ffffffec;
    border-bottom: 3px solid black;
}

.btn-ios {
    border-bottom-color: #1c8575c9;
    background-color: var(--green-01);
    box-shadow: 0px 10px 10px #26baa43a;
}

.btn-ios:hover {
    border-bottom-color: #1c8575c9;
    background-color: #26baa4ce;
}

.btn-mac {
    border-bottom-color: #404ca8cb;
    background-color: var(--blue-01);
    box-shadow: 0px 10px 10px #6173ff3a;
}

.btn-mac:hover {
    border-bottom-color: #404ca8cb;
    background-color: #6173ffc9;
}

@media (min-width: 1280px) {

    .download-actions {
        flex-direction: row;
        justify-content: center;
    }

    .download-actions--btn {
        width: 275px;
        font-size: 1.125rem;
    }

}



/* HEADER */

#header {
    background-color: #FFFFFF;
    background-image: url('../images/bg-header-mobile.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
}

.header-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5em;
    padding: 5em 0;
}

#logo {
    width: 100px;
}

.header-body {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    max-width: 800px;
    margin-top: 1em;
    text-align: center;
}

.header-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--gray-01);
}

.header-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-02);
}

@media (min-width: 1280px) {

    #header {
        background-image: url('../images/bg-header-desktop.png');
    }

    .header-content {
        padding: 7em 0;
    }

    #logo {
        width: 125px;
    }

    .header-body {
        margin-top: 2em;
    }

    .header-title {
        font-size: 3rem;
    }

    .header-text {
        font-size: 1.2rem;
    }

}



/* MAIN */

#main {
    display: flex;
    flex-direction: column;
    gap: 5em;
    padding-top: 3em;
    padding-bottom: 6em;
}

#main section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;
    text-align: center;
}

.section-header {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.section-title {
    font-size: 1.65rem;
    font-weight: 600;
    color: var(--gray-01);
}

.section-subtitle {
    font-size: 1rem;
    font-weight: 500;
    color: var(--gray-02);
}

.section-body {
    display: flex;
    flex-direction: column;
}

.section-items {
    display: flex;
    gap: 3em;
    padding: 3em 0;
}

.card {
    align-items: center;
    gap: 0.25em;
    border: none;
}

.card-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-01);
}

.card-text {
    font-size: 1rem;
    font-weight: 500;
    color: var(--gray-02);
}

/* KEEP SECTION */

#keep-img {
    width: 100%;
}

#keep-section .section-items {
    flex-direction: column;
}

/* ACCESS SECTION */

#access-img {
    width: 100%;
}

/* SUPERCHARGE SECTION */

#supercharge-section .section-items {
    flex-direction: column;
}

.supercharge-icon {
    width: 50px;
    margin-bottom: 2em;
}

.card-logo {
    width: 120px;
}

@media (min-width: 1280px) {

    #main {
        padding: 0;
        padding-bottom: 8em;
        gap: 7em;
    }

    #main section {
        gap: 3em;
    }

    .section-header {
        max-width: 750px;
        gap: 1.5em;
    }

    .section-title {
        font-size: 2.5rem;
    }

    .section-subtitle {
        font-size: 1.125rem;
    }

    .card-title {
        font-size: 1.75rem;
    }

    .card-text {
        font-size: 1.125rem;
    }

    /* KEEP SECTION */
    
    #keep-section .section-body {
        position: relative;
        flex-direction: row;
        justify-content: left;
        gap: 5em;
        width: 100%;
    }

    #keep-section .section-img {
        flex: 1;
        max-width: 50%;
    }

    #keep-img {
        width: 110%;
        object-fit: contain;
    }

    #keep-section .section-items {
        flex: 1;
        justify-content: center;
        padding: 5em;
    }
    
    .keep-card {    
        max-width: 400px;
        align-items: start;
        text-align: left;
    }

    /* SUPERCHARGE SECTION */

    #supercharge-section .section-body{
        gap: 3em;
    }

    #supercharge-section .section-items {
        flex-direction: row;
        justify-content: space-around;
    }

    .card-logo {
        width: 150px;
    }

}



/* FOOTER */

#footer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5em;
    place-items: center;
    padding: 3em 1em 1em;
    background-color: var(--gray-03);
}

#logo-footer {
    width: 50px;
}

#footer .navbar {
    text-align: center;
}

#footer .navbar-nav {
    gap: 1em;
}

#footer .nav-item {
    font-weight: 500;
    text-decoration: none;
    color: var(--gray-01);
}

#footer .nav-link:hover {
    color: var(--green-01);
}

#pages-links {
    display: grid;
    grid-template-columns: 1fr;
}

#social-links {
    display: flex;
    flex-direction: row;
    gap: 1.5em !important;
}

#social-links .nav-link i {
    font-size: 1.75rem;
}

@media (min-width: 1280px) {

    #footer {
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: 1fr;
    }
    
    #logo-footer {
        width: 70px;
    }

    #footer .navbar {
        text-align: left;
    }

    #pages-links {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: 
        "page-link-1 page-link-3 page-link-5"
        "page-link-2 page-link-4 ."
        ;
        column-gap: 5em !important;
    }

    #pages-navbar {
        justify-content: left;
        width: 100%;
    }

    

    #pages-links .nav-item:nth-child(1) {
        grid-area: page-link-1;
    }

    #pages-links .nav-item:nth-child(2) {
        grid-area: page-link-2;
    }

    #pages-links .nav-item:nth-child(3) {
        grid-area: page-link-3;
    }

    #pages-links .nav-item:nth-child(4) {
        grid-area: page-link-4;
    }

    #pages-links .nav-item:nth-child(5) {
        grid-area: page-link-5;
    }

    #social-links {
        gap: 2.5em !important;
    }

}