/* ==========================================================================
   Головна сторінка (main_page.html) — обгортки секцій.
   Самі секції стилізуються у: style_header.css (меню), style_main_container.css
   (герой), style_services.css (спеціалізація), style_about_us.css (керівник),
   style_news.css (новини).
   ========================================================================== */

#primary_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100%;
}

#main_container {
    width: 60%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom, #EEEAE4, #FFFFFF);

}

#practise_container {
    width: 60%;
    display: flex;
    flex-direction: column;
    /*margin-top: 2em;*/
    background: linear-gradient(to bottom, #FFFFFF, #EEEAE4, #FFFFFF);
}

#about_us {
    width: 60%;
    /*margin-top: 2em;*/
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom, #FFFFFF, #EEEAE4, #FFFFFF);
}

#projects {
    width: 60%;
    /*margin-top: 2em;*/
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom, #FFFFFF, #EEEAE4, #FFFFFF);
}

#news {
    width: 60%;
    /*margin-top: 2em;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(to bottom, #FFFFFF, #EEEAE4, #FFFFFF);
    border: #b20821;
}

#contacts {
    width: 60%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom, #FFFFFF, #EEEAE4);
}

@media screen and (max-width: 480px) {
    #main_container,
    #about_us,
    #contacts,
    #news,
    #practise_container {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
    }

    /* на телефоне первый экран не растягиваем до высоты окна:
       иначе под кнопкой остаётся пустота (height: 100vh задан выше) */
    #main_container {
        height: auto;
        min-height: 0;
    }
}