/* ================= MOBILE ================= */
@media (max-width: 768px) {

    /* Общие */
    .container {
        font-size: 24px;
        padding: 0 2%;
        top: 2%;
    }

    /* Intro */
    .intro #greetings {
        font-size: 36px;
        text-align: center;
    }

    .author {
        font-size: 14px;
        top: 15px;
    }

    /* Меню убираем (оно сломает мобилку) */
    .menu {
        display: none;
    }

    .lightMode {
        display: none;
    }

    /* Header */
    .header {
        height: auto;
    }

    .logoAndService {
        flex-direction: column;
        gap: 10px;
    }

    #logoIcon {
        display: flex;
        align-items: start;
        justify-content: center;
        width: 15vw;
    }

    /* Front text */
    .front-endDev span {
        font-size: 28px;
        text-align: center;
        /* color: red; */
    }

    .lineFront-end {
        height: 4px;
        width: 20px;
    }

    .service span {
        display: block;
        justify-content: flex-end;
    }

    /* ===== CASES ===== */
    .cases-wrap {
        padding: 80px 0;
    }

    .cases-wrap .cases {
        justify-self: center;
        flex-direction: column;
        gap: 40px;
    }

    .cases-wrap .cases .lineAmazingCases {
        position: absolute;
        /* transform: translateY(-5px); */

        left: 68%;
        top: 16%;
        height: 4px;
        width: 30px;
    }

    .casesGrid {
        flex-direction: column;
        margin-left: 0;
        gap: 30px;
    }

    .case {
        margin-left: 0;
    }

    .case img {
        width: 100%;
    }

    .cases .casesTitle {
        position: static;

        align-self: center;
        transform: none;
        font-size: 28px;
    }

    .case span {
        position: relative;
        margin-top: 3%;
        font-size: 16px;
        font-weight: 500;
        text-transform: lowercase;
        margin-left: 30px;
    }

    /* ===== PROJECTS ===== */
    .projectsGrid {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-top: 100px;
    }

    .personalProjects-wrap {
        padding: 7% 0;
    }

    .linePersonalProjects {
        position: relative;
        height: 4px;
        width: 30px;
        background-color: var(--line-color);
        margin-top: 6px;
        /* margin-left: 10px; */
    }


    .personalProjects .projectsTitle {
        font-size: 28px;
    }

    .project {
        flex-direction: column;
    }

    .project img {
        width: 100%;
    }

    .projectName {
        font-size: 18px;
    }

    .projectDesc {
        font-size: 13px;
    }

    /* ===== ABOUT ===== */
    .aboutMe {
        flex-direction: column;
        gap: 40px;
    }

    .lineAboutMe {
        position: relative;
        height: 4px;
        width: 35px;
    }


    .aboutMeInfo {
        flex-direction: column;
        gap: 20px;
    }

    .aboutMeImgWraper {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 15%;
    }

    .aboutMeImgWraper img {
        width: 100%;
    }

    .aboutMeSocials span:hover .lineAboutMeSocials {
        display: none;
    }

    .aboutMeSpeech {
        display: flex;
        flex-direction: column;
        /* align-items: center; 
        justify-content: center; */
    }

    .aboutMeSpeech>.aboutMeAuthor {
        font-size: 24px;
    }

    .aboutMeSpeech>.aboutMeBio {
        font-size: 16px;
    }

    .aboutMeSpeech>.aboutMeSocials {
        position: relative;
        font-size: 18px;
        gap: 3%;
    }

    .expTitle {
        margin-top: 15px;
        font-size: 15px;
    }

    .expInfo ul li {
        display: flex;
        font-size: 12px;
        font-weight: 300;
        opacity: var(--opacity);
        max-width: 420px;
        line-height: 1.4;

        margin-top: 10px;
        gap: 10px;
    }



    /* ===== CONTACT ===== */
    .contactMeSocials {
        flex-direction: flex;
        gap: 15%;
        margin-top: 120px;
    }

    .contactMe-wrap {
        padding: 50% 0 20% 0;
    }

    .contactMeTitle {
        font-size: 28px;
    }

    .lineContactMe {
        display: flex;

        position: relative;
        height: 4px;
        width: 60px;
        background-color: var(--line-color);
        margin-top: 6px;
    }

    /* ===== CLOUDS (отключаем — жрут экран) ===== */
    .cloudOne,
    .cloudTwo,
    .cloudThree,
    .cloudFour,
    .cloudFive {
        display: none;
    }

    .first-cloud-intro,
    .second-cloud-intro,
    .thrid-cloud-intro {
        display: none;
    }

}