/* Small devices (landscape phones, 576px and up) */
@media (max-width: 390px) {
    nav { height: auto; flex-direction: column; justify-content: center; padding: 0; position: relative; }
    nav img { width: 20%; }
    nav .links { flex-direction: column; }
    nav .buttons-container { justify-content: center; margin: 0; }

    header { background-image: none; }
    .main { width: 100%; height: 100%; align-items: center; }
    .main .title { text-align: center; font-size: 2rem; }
    .main .description { text-align: center; }
    .main .main-buttons { justify-content: center; }

    .sticky { position: relative; }

    section { height: auto; }
    section .description { padding: 0; }
    section .items { flex-direction: column; }

    .p-container { background-image: none; }
    .p-container .p { width: 100%; align-items: center;  }
    .p-container .p .title { text-align: center; }

    .c-container { background-image: none; }
    .c-container .c { width: 100%; align-items: center;  }
    .c-container .c .title { text-align: center; }

    .tab-container button { height: auto; }
}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {
    nav { height: auto; flex-direction: column; justify-content: center; padding: 0; position: relative; }
    nav img { width: 20%; }
    nav .links { flex-direction: column; }
    nav .buttons-container { justify-content: center; margin: 0; }

    header { background-image: none; }
    .main { width: 100%; height: 100%; align-items: center; }
    .main .title { text-align: center; font-size: 2rem; }
    .main .description { text-align: center; }
    .main .main-buttons { justify-content: center; }

    .sticky { position: relative; }

    section { height: auto; }
    section .description { padding: 0; }
    section .items { flex-direction: column; }

    .p-container { background-image: none; }
    .p-container .p { width: 100%; align-items: center;  }
    .p-container .p .title { text-align: center; }

    .c-container { background-image: none; }
    .c-container .c { width: 100%; align-items: center;  }
    .c-container .c .title { text-align: center; }

    .tab-container button { height: auto; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    
}