@media (max-width: 1200px){

    html, body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        box-sizing: border-box;
      }
      
    .sidepanel{
        display: none;
    }
    .openbtn{
        display: none;
    }
    .nav{
        display: flex;
    }
}

@media (max-width: 998px) {
    .sidepanel{
        display: none;
    }
    .openbtn{
        display: none;
    }
    .nav{
        display: flex;
        justify-content: flex-start;
        position: fixed; /* якщо хочеш, щоб меню завжди було зверху */
        top: 0;
         left: 0;
        width: 100%;
        /* background: rgba(0,0,0,0.8); */
        z-index: 1000;  
    }
    .header {
        width: 100%;
        height: auto; /* fit-content замінено на auto */
      

    }
      
    .header__main {
        width: 100%;
        display: flex;
        flex-direction: column; /* для мобільних */
        margin: auto;
        align-items: center;
        justify-content: center;
      }
   
      .header__text {
        margin-top: 40px; /* менше відступу */
        margin-left: 0;
        text-align: center;
        justify-content: center;
        align-items: center;
        height: auto;
        width: 90%; /* адаптивна ширина */
        max-width: 600px; /* обмеження */
        z-index: 2; /* щоб текст був поверх */
        position: relative; /* щоб працював z-index */

      }
      
      .header__text p {
        text-align: center; /* вирівнювання по центру */
        width: 100%;
        max-width: 500px;
        height: auto;
        color: white;
        font-size: 21px;
        margin: 20px auto;
      }

      .header__text__icons{
        box-sizing: border-box;
    }

      .header__text span {
        color: white;
        font-size: 21px;
        margin-top: 20px;
        margin-bottom: 40px;
      }

      .header__img {
        width: 100%;
        max-width: 400px;
        margin: auto;
        margin-top: 60px;
        opacity: 0.9;
        position: relative; /* щоб картинка мала свій шар */
        z-index: 1;

      }
      
      .header__img img {
        width: 100%;
        height: auto;
        border-radius: 4px;
        opacity: 0.9;
      }
      
      .header__welcome__item {
        margin: 20px auto;
        text-align: center;
        color: white;
      }
      
      .header__social__contacts__icons {
        display: flex;
        justify-content: center;
        margin: 20px auto;
      }
      
    
    /* END */

    /* SERVICE START */
    .service__block{
        height: fit-content;
        flex-direction: column;
        align-items: center;
    }
    .service__block div{
        width: 342px;
        margin-right: 78px;
        margin-top: 20px;
    }
    .service__block span{
        position: static;
        margin-top: 20px;
        align-self:baseline;
        margin-bottom: 32px;
        margin-left: 20px;
    }

    /* END */

    /* Gallary block START */

    .gallery__text{
        align-items: center;
    }
    .gallery__container {
        width: 100%;
        margin: 0 auto;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 5px;
      }
    
    
    .large, .small_2, .small_3 {
        max-width: 100%;
        height: auto;
      }
    
    .opened-img {
        margin: 0 auto; /* прибрано margin-left: 604px */
      }
    
      .opened-img img {
        position: relative;
        left: 0;
        top: 0;
        max-width: 100%;
        height: auto;
      }
    
    /* END */

    /* ARTICLES BLOCK START */
    .articles {
        display: grid;
        grid-template-columns: 1fr 1fr; /* дві рівні колонки */
        grid-auto-rows: auto;          /* висота автоматично */
        grid-gap: 20px;
        margin: 0 auto;
        width: 100%;                   /* займає всю ширину */
        max-width: 900px;              /* обмеження для великих екранів */
      }
    
      .articles h3 {
        margin: 0;
        text-align: center;
      }
    
      .articles p {
        font-size: 15px;
        text-align: center;
        width: 100%;
      }
    
      .img01, .img02 {
        position: relative; /* залишаємо відносне */
      }
    
      .img01 img,
      .img02 img {
        position: static;   /* прибираємо absolute */
        width: 100%;        /* адаптивна ширина */
        height: auto;       /* висота автоматично */
        border-radius: 4px; /* для краси */
        display: block;
        margin: 0 auto;
      }
    
    
    /* END */
    /* ABOUT ME BLOCK START */
    .about__me__text {
        width: 100%;
        margin: 0 auto;
        text-align: center;
        align-items: center;
        display: flex;
        flex-direction: column;
      }
    
      .about__me__text img {
        position: relative;
        left: 0;
        top: 0;
        max-width: 100%;
        height: auto;
      }
    
    .about__me__text p{
       
        text-align: center;
    }
    
    /* END */

}

@media (max-width: 768px) {
    .nav {
        display: none;
    }

    /* SIDEPANNEL START */
    .sidepanel {
        font-family: 'Ubuntu', sans-serif;
        text-align: center;
        display: block;
        width: 0;
        position: fixed;
        z-index: 4;
        height: 250px;
        top: 0;
        left: 0;
        background-color: #111;
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 60px;
        opacity: 0.8;
    }

    .sidepanel a {
        padding: 8px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }

    .sidepanel a:hover {
        color: #f1f1f1;
    }

    .sidepanel .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
    }
    /* END */

    /* OPENED BUTTON START */
    .openbtn {
        display: block;
        position: fixed;
        top: 0;
        width: 100%;
        font-size: 20px;
        text-align: left;
        cursor: pointer;
        background-color: grey;
        color: white;
        padding: 10px 15px;
        border: none;
        border-radius: 2px;
        z-index: 50;
    }

    .openbtn:hover {
        background-color: #444;
    }
    /* END */

    /* HEADER BLOCK START */
    .header__main {
        margin: 0 auto; /* замість margin-left */
        width: 100%;
    }

    /* Service Block START */
    .service__block {
        align-items: center; /* вирівнювання по центру */
        flex-direction: column;
        height: auto;
    }

    .service__block img {
        width: 87px;
        height: 80px;
        margin: 20px auto;
    }

    .service__block div {
        margin: 10px auto;
    }

    .service__block h2 {
        color: white;
        width: auto;
        border-bottom: 2px solid whitesmoke;
        margin: 20px auto;
        padding: 21px;
        font-weight: 900;
        font-size: 28px;
        text-align: center;
    }
    /* END */

    /* ARTICLES BLOCK START */
    .articles {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .articles h3 {
        margin: 0;
    }

    .articles p {
        font-size: 15px;
    }

    .articles div {
        max-width: 100%; /* замість width: 500px */
    }

    .articles div:nth-child(5) img {
        height: auto;
        max-width: 100%;
    }

    .articles__text p {
        margin-bottom: 10px;
    }

    .img01 img,
    .img02 img {
        position: static;
        max-width: 100%;
        height: auto;
    }
    /* END */

    /* Gallery Block Start */
    .gallery__text {
        align-items: center;
    }

    .gallery__container {
        justify-content: center;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 5px;
        width: 100%;
        height: auto;
        align-items: center;
        margin: 0 auto;
    }

    .small_2,
    .small_3 {
        max-width: 100%;
        height: auto;
    }

    .opened-img {
        margin: 20px auto; /* прибрано margin-left: 604px */
    }

    .opened-img img {
        position: relative;
        top: 0;
        left: 0;
        max-width: 100%;
        height: auto;
    }
    /* END */

    /* ABOUT ME BLOCK START */
    .about__me__block {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: center; /* замість flex-end */
        height: auto;
    }

    .about__me__text {
        display: flex;
        flex-direction: column; /* картинка зверху, текст під нею */
        align-items: center;
        width: 100%;
        height: auto;
        font-size: 18px;
        background-color: rgba(104, 119, 114, 0.647);
        color: whitesmoke;
        text-shadow: rgb(32, 31, 31) 0 1px;
        border-radius: 0.4%;
        /* padding: 10px; */
        text-align: center;
    }

    .about__me__text p {
        max-width: 600px;
        /* margin: 0 auto; */
        width: 100%;
        height: auto;
        text-align: center;
     
    }

    .about__me__text img {
        position: relative;
        top: 10px;
        left: 0;
        max-width: 100%;
        height: auto;
        border-radius: 0.4%;
    }
    /* END */

    /* CONTACTS BLOCK START */
    
    /* END */

    .footer {
        width: 100%;
    }
}


@media (max-width: 576px) {
    .main__container {
        width: 100%;
        font-family: 'Ubuntu', sans-serif;
        overflow-x: hidden; /* замість visible */
        box-sizing: border-box;
    }

    .header__text {
        margin: 0 auto; /* прибрано -17px */
        text-align: center;
    }

    .header__text p {
        display: block;
        text-align: center;
    }

    .header__welcome__item {
        margin: 10px auto; /* прибрано -62px */
        text-align: center;
    }

    /* Gallery block START */
    .gallery__text {
        align-items: center;
        width: 100%; /* замість 430px */
        overflow-x: hidden;
    }

    .gallery__text h2 {
        align-self: center;
    }

    .gallery__container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        width: 100%;
        margin: 0 auto;
    }

    .large,
    .small_2,
    .small_3 {
        max-width: 100%; /* замість 530px */
        height: auto;
    }

    .opened-img img {
        max-width: 100%; /* замість 550px */
        height: auto;    /* адаптивна висота */
    }
    /* END */

    /* ARTICLES BLOCK START */
    .articles div {
        max-width: 100%; /* замість 450px */
        margin: 0 auto;
    }
    /* END */

    /* ABOUT ME BLOCK START */
    .about__me__block {
        flex-direction: column;
        align-items: center; /* замість flex-end */
        height: auto;
    }


    .about__me__text p {
        box-sizing: border-box;
        max-width: 100%;
        width: auto;
        height: auto;
        margin-right: 19px;
        overflow-wrap: break-word;
        word-wrap: break-word;
        hyphens: auto;

    }

    .about__me__text img {
        position: relative;
        top: 10px;
        left: 0;
        max-width: 100%; /* замість 328px */
        height: auto;    /* адаптивна висота */
        border-radius: 0.4%;
    }
    

    /* END */

    /* Contacts block START */
    .contacts__group {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center; /* вирівнювання по центру */
    }

    .contacts__right__side {
        display: none;
    }

    .contacts__left__side {
        font-size: 19px;
        /* text-align: center; */
    }

    .footer p {
        max-width: 100%; /* замість 300px */
        margin: 0 auto;
        text-align: center;
    }
}


@media (max-width: 490px) {
    .main__container {
        width: 100%;
        overflow-x: hidden; /* замість visible */
        box-sizing: border-box;
    }

    .header__text p {
        font-size: 16px;
        line-height: 20px;
        max-width: 100%; /* замість 420px */
        margin: 0 auto;  /* прибрано -31px */
        text-align: center;
        word-wrap: break-word;
    }

    .articles div {
        max-width: 100%; /* замість 444px */
        margin: 0 auto;
    }

    .about__me__text img {
        position: relative;
        top: 10px;
        left: 0;
        max-width: 100%; /* замість 328px */
        height: auto;    /* адаптивна висота */
        border-radius: 0.4%;
    }

    .about__me__text {
        margin: 0 auto;
        text-align: center;
    }

    .about__me__text p {
        max-width: 100%; /* замість 439px */
        margin-right: 22px;
        text-align: center;
    }

}

@media (max-width: 461px) {
    .main__container {
        width: 100%;
        overflow-x: hidden; /* замість visible */
        box-sizing: border-box;
    }

    .header__text p {
        font-size: 16px;
        line-height: 20px;
        max-width: 100%; /* замість 460px */
        margin: 0 auto;  /* прибрано margin-left: 14px */
        text-align: center;
        word-wrap: break-word;
    }

    .articles div {
        max-width: 100%; /* замість 430px */
        margin: 0 auto;
    }

    .about__me__text img {
        position: relative;
        top: 10px;
        left: 0;
        max-width: 100%; /* замість 328px */
        height: auto;
        border-radius: 0.4%;
    }

    .about__me__text p {
        max-width: 100%; /* замість 416px */
    
        text-align: center;
        height: auto;
    }

    .contacts__group {
        height: auto; /* замість fit-content для кращої адаптивності */
    }
}


@media (max-width: 450px) {
    .main__container {
        width: 100%;
        overflow-x: hidden; /* замість visible */
        box-sizing: border-box;
    }

    .header__text p {
        font-size: 16px;
        line-height: 20px;
        max-width: 100%; /* замість 405px */
        margin: 0 auto;  /* прибрано -50px */
        text-align: center;
        word-wrap: break-word;
    }

    .articles div {
        max-width: 100%; /* замість 394px */
        margin: 0 auto;
    }

    .service__block span {
        max-width: 100%; /* замість 340px */
        margin: 0 auto;
        display: block;
        text-align: center;
    }

    .about__me__text img {
        position: relative;
        top: 10px;
        left: 0;
        max-width: 100%; /* замість 328px */
        height: auto;
        border-radius: 0.4%;
    }

    .about__me__text p {
        max-width: 100%; /* замість 425px */
        text-align: center;
    }
}

@media (max-width: 430px) {
    .main__container {
        width: 100%;
        overflow-x: hidden; /* замість visible */
        box-sizing: border-box;
    }

    .header__text p {
        font-size: 16px;
        line-height: 20px;
        max-width: 100%; /* замість 332px */
        margin: 0 auto;  /* прибрано -108px */
        text-align: center;
        word-wrap: break-word;
    }

    .articles div {
        max-width: 100%; /* замість 372px */
        margin: 0 auto;
    }

    .about__me__text img {
        position: relative;
        top: 10px;
        left: 0;
        max-width: 100%; /* замість 328px */
        height: auto;
        border-radius: 0.4%;
    }

    .about__me__text p {
        max-width: 100%; /* замість 370px */
        text-align: center;
    }
}