/* ==========================================================
   АКАДЕМИЯ КОСМОС
   COMPLETE RESPONSIVE CSS
   ========================================================== */

/* ---------- ОСНОВНО ---------- */

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

section,
header,
footer,
main,
div {
    max-width: 100%;
}


/* ==========================================================
   КОНТЕЙНЕР
   ========================================================== */

.container {
    width: min(1200px, calc(100% - 40px));
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================
   HEADER
   ========================================================== */

header {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

header .container {
    width: min(1200px, calc(100% - 40px));

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}

.logo {
    min-width: 0;
    flex-shrink: 1;
}

.logo-text {
    min-width: 0;
}

.logo-text h1 {
    margin: 0;
    white-space: normal;
    overflow-wrap: break-word;
}

.logo-text p {
    margin: 0;
    white-space: normal;
    overflow-wrap: break-word;
}

nav {
    min-width: 0;
    flex: 0 1 auto;
}

nav ul {
    margin: 0;
    padding: 0;

    display: flex;
    flex-wrap: wrap;

    align-items: center;
    justify-content: center;

    gap: 15px 25px;

    list-style: none;
}

nav a {
    white-space: nowrap;
}


/* ==========================================================
   HERO
   ========================================================== */

.hero {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.hero h1,
.hero p {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
}

.hero .overlay {
    width: 100%;
    max-width: 100%;
}


/* ==========================================================
   ABOUT
   ========================================================== */

.about {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.about .container {
    width: min(1200px, calc(100% - 40px));

    display: grid;
    grid-template-columns: minmax(250px, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);

    gap: 45px;

    align-items: center;
}

.about h2,
.about p {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
}


/* ==========================================================
   КУРСОВЕ
   ========================================================== */

.courses {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.courses .container {
    width: min(1200px, calc(100% - 40px));
}

.cards {
    width: 100%;

    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 25px;

    align-items: stretch;
}

.card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    align-items: center;

    text-align: center;
}

.card h3,
.card p {
    width: 100%;
    max-width: 100%;

    white-space: normal;

    overflow-wrap: break-word;
    word-break: normal;
}

.card h3 {
    line-height: 1.25;
}

.card p {
    line-height: 1.5;
}

.card .price {
    max-width: 100%;

    white-space: nowrap;

    overflow: visible;

    line-height: 1.1;
}


/* ==========================================================
   ПРЕПОДАВАТЕЛИ
   ========================================================== */

.teachers {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.teachers .container {
    width: min(1200px, calc(100% - 40px));
}

.teachers h2 {
    width: 100%;
    max-width: 100%;

    text-align: center;

    overflow-wrap: break-word;
}


/* САМА КАРТА */

.teacher-card {
    width: 100% !important;
    max-width: 1100px !important;

    min-width: 0 !important;

    margin: 0 auto 40px;

    padding: 35px;

    display: grid !important;

    grid-template-columns:
        minmax(250px, 320px)
        minmax(0, 1fr) !important;

    gap: 45px;

    align-items: start;

    overflow: hidden;

    border-radius: 20px;
}


/* ЛЯВА ЧАСТ */

.teacher-left {
    width: 100% !important;
    min-width: 0 !important;

    display: flex;

    justify-content: center;
    align-items: flex-start;

    overflow: hidden;
}

.teacher-left img {
    display: block;

    width: 100%;
    max-width: 280px;

    height: auto;

    object-fit: cover;

    margin: 0 auto;
}


/* ДЯСНА ЧАСТ */

.teacher-right {
    width: 100% !important;
    min-width: 0 !important;

    overflow: hidden;
}

.teacher-right h3 {
    width: 100%;

    margin-top: 0;
    margin-bottom: 20px;

    font-size: 32px;

    line-height: 1.2;

    text-align: left;

    white-space: normal;

    overflow-wrap: break-word;
    word-break: normal;
}

.teacher-right p {
    width: 100%;

    margin-top: 0;
    margin-bottom: 20px;

    font-size: 18px;

    line-height: 1.6;

    text-align: left;

    white-space: normal;

    overflow-wrap: break-word;
    word-break: normal;
}


/* СПИСЪК С ПРЕДМЕТИ */

.subjects-list {
    width: 100% !important;

    max-width: 100% !important;

    margin: 20px 0 0;
    padding: 0;

    list-style: none;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px 25px;
}

.subjects-list li {
    width: 100% !important;
    min-width: 0 !important;

    margin: 0;
    padding: 0;

    font-size: 17px;

    line-height: 1.5;

    white-space: normal;

    overflow-wrap: break-word;
    word-break: normal;
}


/* ==========================================================
   РЕЗУЛТАТИ
   ========================================================== */

.results {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.results .container {
    width: min(1200px, calc(100% - 40px));
}

.results > .container,
.results .stats,
.results .result-grid {
    min-width: 0;
    max-width: 100%;
}

.results * {
    max-width: 100%;
    overflow-wrap: break-word;
}


/* ==========================================================
   КОНТАКТИ
   ========================================================== */

.contacts {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.contacts .container {
    width: min(1200px, calc(100% - 40px));

    min-width: 0;
}

.contacts * {
    max-width: 100%;

    overflow-wrap: break-word;
    word-break: normal;
}


/* ==========================================================
   FOOTER
   ========================================================== */

footer {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

footer * {
    max-width: 100%;

    overflow-wrap: break-word;
}


/* ==========================================================
   TABLET
   769px - 1100px
   ========================================================== */

@media screen and (min-width: 769px) and (max-width: 1100px) {

    .container,
    header .container,
    .about .container,
    .courses .container,
    .teachers .container,
    .results .container,
    .contacts .container {
        width: calc(100% - 40px);
    }


    /* HEADER */

    header .container {
        flex-wrap: wrap;

        justify-content: center;

        gap: 20px;
    }

    nav ul {
        justify-content: center;
    }


    /* ABOUT */

    .about .container {
        grid-template-columns:
            1fr 1fr;

        gap: 30px;
    }

    .about .container > :first-child {
        grid-column: 1 / -1;
        text-align: center;
    }


    /* COURSES */

    .cards {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }


    /* TEACHERS */

    .teacher-card {
        grid-template-columns:
            240px minmax(0, 1fr) !important;

        gap: 30px;

        padding: 25px;
    }

    .teacher-left img {
        max-width: 220px;
    }

    .subjects-list {
        grid-template-columns:
            1fr;
    }
}


/* ==========================================================
   МОБИЛНА ВЕРСИЯ
   до 768px
   ========================================================== */

@media screen and (max-width: 768px) {

    html,
    body {
        width: 100%;
        max-width: 100%;

        overflow-x: hidden !important;
    }


    /* ---------- КОНТЕЙНЕР ---------- */

    .container,
    header .container,
    .about .container,
    .courses .container,
    .teachers .container,
    .results .container,
    .contacts .container {

        width: calc(100% - 30px) !important;

        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    /* ======================================================
       HEADER
       ====================================================== */

    header {
        width: 100% !important;

        overflow: hidden !important;
    }

    header .container {

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 15px !important;

        text-align: center;
    }

    .logo {
        width: 100% !important;

        max-width: 100% !important;

        display: flex;

        justify-content: center;

        align-items: center;
    }

    .logo-text {
        max-width: 100% !important;

        text-align: center;
    }

    .logo-text h1 {
        font-size: 30px !important;

        line-height: 1.15 !important;

        white-space: normal !important;
    }

    .logo-text p {
        font-size: 14px !important;

        line-height: 1.3 !important;

        white-space: normal !important;
    }

    nav {
        width: 100% !important;

        max-width: 100% !important;
    }

    nav ul {
        width: 100% !important;

        display: flex !important;

        flex-wrap: wrap !important;

        justify-content: center !important;

        align-items: center !important;

        gap: 10px 16px !important;

        padding: 0 !important;

        margin: 0 !important;
    }

    nav a {
        font-size: 15px !important;

        white-space: nowrap !important;
    }


    /* ======================================================
       HERO
       ====================================================== */

    .hero {
        width: 100% !important;

        max-width: 100% !important;

        min-height: 600px !important;

        overflow: hidden !important;
    }

    .hero h1 {
        width: 100% !important;

        max-width: 100% !important;

        font-size: 36px !important;

        line-height: 1.15 !important;

        text-align: center !important;

        overflow-wrap: break-word !important;
    }

    .hero p {
        width: 100% !important;

        max-width: 100% !important;

        font-size: 17px !important;

        line-height: 1.5 !important;

        text-align: center !important;
    }

    .hero .overlay {
        width: calc(100% - 30px) !important;

        max-width: 100% !important;

        margin-left: auto !important;

        margin-right: auto !important;
    }


    /* ======================================================
       ABOUT
       ====================================================== */

    .about {
        width: 100% !important;

        overflow: hidden !important;
    }

    .about .container {

        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;

        gap: 30px !important;

        text-align: center;
    }

    .about .container > * {

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;
    }

    .about h2 {
        font-size: 32px !important;

        line-height: 1.2 !important;

        text-align: center !important;
    }

    .about p {

        font-size: 17px !important;

        line-height: 1.6 !important;

        text-align: center !important;

        white-space: normal !important;

        overflow-wrap: break-word !important;
    }


    /* ======================================================
       КУРСОВЕ / ЦЕНИ
       ====================================================== */

    .courses {
        width: 100% !important;

        overflow: hidden !important;
    }

    .courses .container {

        width: calc(100% - 30px) !important;

        max-width: 100% !important;
    }

    .courses h2 {

        width: 100% !important;

        max-width: 100% !important;

        font-size: 34px !important;

        line-height: 1.2 !important;

        text-align: center !important;

        overflow-wrap: break-word !important;
    }

    .cards {

        width: 100% !important;

        max-width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;

        gap: 22px !important;

        margin: 0 !important;

        padding: 0 !important;
    }

    .card {

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding: 30px 20px !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        text-align: center !important;

        overflow: hidden !important;

        border-radius: 20px !important;
    }

    .card h3 {

        width: 100% !important;

        max-width: 100% !important;

        font-size: 25px !important;

        line-height: 1.3 !important;

        text-align: center !important;

        white-space: normal !important;

        overflow-wrap: break-word !important;

        word-break: normal !important;
    }

    .card p {

        width: 100% !important;

        max-width: 100% !important;

        font-size: 17px !important;

        line-height: 1.55 !important;

        text-align: center !important;

        white-space: normal !important;

        overflow-wrap: break-word !important;

        word-break: normal !important;
    }

    .card .price {

        width: auto !important;

        max-width: 100% !important;

        margin-top: 20px !important;

        font-size: 50px !important;

        line-height: 1 !important;

        white-space: nowrap !important;

        overflow: visible !important;
    }


    /* ======================================================
       ПРЕПОДАВАТЕЛИ
       ====================================================== */

    .teachers {

        width: 100% !important;

        max-width: 100% !important;

        overflow: hidden !important;
    }

    .teachers .container {

        width: calc(100% - 30px) !important;

        max-width: 100% !important;

        display: block !important;
    }

    .teachers h2 {

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 0 30px !important;

        font-size: 34px !important;

        line-height: 1.2 !important;

        text-align: center !important;

        white-space: normal !important;

        overflow-wrap: break-word !important;
    }


    /* ВАЖНО:
       КАРТАТА СТАВА ЕДНА КОЛОНА */

    .teacher-card {

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0 0 30px !important;

        padding: 25px 18px !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        gap: 25px !important;

        overflow: hidden !important;

        border-radius: 20px !important;
    }


    /* СНИМКА */

    .teacher-left {

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        display: flex !important;

        justify-content: center !important;

        align-items: center !important;

        overflow: hidden !important;
    }

    .teacher-left img {

        display: block !important;

        width: 170px !important;

        max-width: 80% !important;

        height: auto !important;

        margin: 0 auto !important;

        object-fit: cover !important;
    }


    /* ИНФОРМАЦИЯ */

    .teacher-right {

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        display: block !important;

        overflow: hidden !important;
    }

    .teacher-right h3 {

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 0 18px !important;

        padding: 0 !important;

        font-size: 30px !important;

        line-height: 1.2 !important;

        text-align: center !important;

        white-space: normal !important;

        overflow-wrap: break-word !important;

        word-break: normal !important;
    }

    .teacher-right p {

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 0 20px !important;

        padding: 0 !important;

        font-size: 17px !important;

        line-height: 1.55 !important;

        text-align: center !important;

        white-space: normal !important;

        overflow-wrap: break-word !important;

        word-break: normal !important;
    }


    /* ПРЕДМЕТИ */

    .subjects-list {

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;

        gap: 10px !important;

        margin: 20px 0 0 !important;

        padding: 0 !important;

        list-style: none !important;
    }

    .subjects-list li {

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        font-size: 16px !important;

        line-height: 1.5 !important;

        text-align: left !important;

        white-space: normal !important;

        overflow-wrap: break-word !important;

        word-break: normal !important;
    }


    /* ======================================================
       РЕЗУЛТАТИ
       ====================================================== */

    .results {

        width: 100% !important;

        max-width: 100% !important;

        overflow: hidden !important;
    }

    .results .container {

        width: calc(100% - 30px) !important;

        max-width: 100% !important;
    }

    .results * {

        max-width: 100% !important;

        overflow-wrap: break-word !important;
    }


    /* ======================================================
       КОНТАКТИ
       ====================================================== */

    .contacts {

        width: 100% !important;

        max-width: 100% !important;

        overflow: hidden !important;
    }

    .contacts .container {

        width: calc(100% - 30px) !important;

        max-width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 30px !important;
    }

    .contacts .container > * {

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;
    }

    .contacts p,
    .contacts h2,
    .contacts h3 {

        max-width: 100% !important;

        overflow-wrap: break-word !important;

        word-break: normal !important;
    }


    /* ======================================================
       FOOTER
       ====================================================== */

    footer {

        width: 100% !important;

        max-width: 100% !important;

        overflow: hidden !important;
    }

    footer .container {

        width: calc(100% - 30px) !important;

        max-width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 25px !important;
    }

    footer p {

        max-width: 100% !important;

        white-space: normal !important;

        overflow-wrap: break-word !important;

        text-align: center !important;
    }
}


/* ==========================================================
   МАЛЪК ТЕЛЕФОН
   ========================================================== */

@media screen and (max-width: 480px) {

    .container,
    header .container,
    .about .container,
    .courses .container,
    .teachers .container,
    .results .container,
    .contacts .container,
    footer .container {

        width: calc(100% - 24px) !important;
    }


    /* HEADER */

    .logo-text h1 {

        font-size: 26px !important;
    }

    .logo-text p {

        font-size: 13px !important;
    }

    nav ul {

        gap: 8px 12px !important;
    }

    nav a {

        font-size: 14px !important;
    }


    /* HERO */

    .hero {

        min-height: 540px !important;
    }

    .hero h1 {

        font-size: 30px !important;
    }

    .hero p {

        font-size: 16px !important;
    }


    /* ABOUT */

    .about h2 {

        font-size: 29px !important;
    }

    .about p {

        font-size: 16px !important;
    }


    /* COURSES */

    .courses h2 {

        font-size: 30px !important;
    }

    .card {

        padding: 25px 15px !important;
    }

    .card h3 {

        font-size: 23px !important;
    }

    .card p {

        font-size: 16px !important;
    }

    .card .price {

        font-size: 45px !important;
    }


    /* TEACHERS */

    .teachers h2 {

        font-size: 30px !important;
    }

    .teacher-card {

        padding: 22px 15px !important;

        gap: 20px !important;
    }

    .teacher-left img {

        width: 145px !important;
    }

    .teacher-right h3 {

        font-size: 27px !important;
    }

    .teacher-right p {

        font-size: 16px !important;
    }

    .subjects-list li {

        font-size: 15px !important;

        line-height: 1.45 !important;
    }
}


/* ==========================================================
   ПОСЛЕДНА ЗАЩИТА ОТ ХОРИЗОНТАЛНО РАЗТЕГЛЯНЕ
   ========================================================== */

@media screen and (max-width: 768px) {

    body * {

        max-width: 100% !important;
    }

    img,
    video,
    iframe {

        max-width: 100% !important;
    }

    .teacher-card,
    .teacher-left,
    .teacher-right,
    .card,
    .cards,
    .about .container,
    .courses .container,
    .teachers .container {

        min-width: 0 !important;
    }
}