@media (max-width: 1600px) {
    .galerie-proiect a img {height: 260px;}
}

@media (max-width: 1400px) {
    .galerie-proiect a img {height: 225px;}
    footer .center {width: calc(100% - 600px);}
}

@media (max-width: 1200px) {
    .galerie-proiect a img {height: 190px;}
}

@media (max-width: 992px) {
    .sigla strong {font-size: 50px;}
    nav {
        position: absolute; top: 85px; right: 0; z-index: 10;
        display: block; width: 200px;
        background: #fff;       
        border-radius: 0 0 5px 5px;
        max-height: 0;
        padding: 0 20px;
        overflow: hidden;
        transition: all 0.5s;
        border: 0;
        margin-right: 0;
    }
    nav.active {
        max-height: 325px; 
        padding: 20px; 
    }
    nav ul {display: block; width: 100%; margin: 0;}
    nav li {display: block;}
    nav a {
        display: block;
        padding: 10px 0;
        text-transform: uppercase;
        font-size: 15px;
    }
    .lang {position: static; margin: 15px 0 0 0px;}
    .lang span, .lang a {font-size: 15px;}


    .but-mobil {
        position: relative;
        display: flex; flex-wrap: wrap;
        justify-content: center; align-items: center;
        width: 60px; height: 60px;
        border-radius: 5px;
        cursor: pointer;
    }
    .but-mobil em {
        position: absolute; right: 0;
        display: flex; width: 30px; height: 3px;
        border-radius: 100px;
        background: var(--negru);
        transition: all 0.5s;
    }
    .but-mobil em:nth-of-type(1) {top: 18px;}
    .but-mobil em:nth-of-type(2) {top: 28px;}
    .but-mobil em:nth-of-type(3) {top: 38px;}

    .but-mobil.active em:nth-of-type(1) {transform: rotate(45deg); top: 29px;}
    .but-mobil.active em:nth-of-type(2) {opacity: 0;}
    .but-mobil.active em:nth-of-type(3) {transform: rotate(-45deg); top: 29px;}

    

    .h1-peste {font-size: 55px; line-height: 1;}
    .swiper img {height: 40vh;}

    .hero-negru {
        padding: 50px 0;
        font-size: 18px; line-height: 1.5;
    }

    .about {padding: 50px 0;}
    .about .left {flex: 0 0 100%;}
    .about .right {
        flex: 0 0 100%;
        padding: 0; margin: 30px 0 0 0;
        border: 0;
    }
    h2 {font-size: 40px;}
    .h3-special {
        font-size: 50px;
        margin: -23px 0 10px 0;
    }
    .about .left p {font-size: 18px;}
    .about .right p {font-size: 18px;}
    .btn {
        height: 45px;
        padding: 0px 20px;
        font-size: 16px;
    }

    h1 {font-size: 40px;}
    .portfolio {padding: 50px 0;}
    .portfolio p {font-size: 18px;}
    .semnul {top: 0;}
    .porto strong {font: 400 18px/1.2 roboto;}

    .services {padding: 50px 0;}
    p.big {font-size: 18px;}
    .serviciu .text h3 {font-size: 26px;}
    .serviciu .text p {font-size: 18px;}

    .contact {padding: 50px 0 20px 0;}

    .banner {margin-bottom: 30px;}
    .banner img {height: 55vw;}
    .proiect-header {flex-direction: column; margin-bottom: 30px;}
    .proiect-header .left {margin-bottom: 30px;}
    .proiect-header .right h3 {font-size: 22px;}
    p {font-size: 18px;}
    .galerie-proiect {
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 50px;
    }
    .galerie-proiect a img {height: 23vw;}
    .proiect-header-item {padding: 3px 0;}

    footer .container {display: block;}
    .info {text-align: left; margin: 5px 0 0 0;}

} /* end 992px */


@media (max-width: 768px) {
    .portofoliu-grup {grid-template-columns: repeat(1, 1fr); gap: 20px;}
    .porto:nth-child(4n+2), .porto:nth-child(4n+3) {
        grid-column: span 1;
    }
}


@media (max-width: 576px) {
    header {height: 80px;}
    nav {top: 70px;}
    .sigla {
        transform: scale(0.7);
        transform-origin: 0 center;
    }
    .container {padding-left: 30px; padding-right: 30px;}
    .h3-special {
        line-height: 1;
        margin: -6px 0 10px 0;
    }
    .serviciu img {
        width: 100%;
        margin-bottom: 30px;
    }
    .serviciu .text {width: 100%; padding: 0;}
    .semnul {
        right: 30px;
        gap: 3px;
        width: 30px; height: 30px;
    }
    .portofoliu-grup {display: block;}
    .porto strong {
        display: block;
        position: static;
        transform: none;
        width: 100%;
        opacity: 1;
        color: var(--negru);
        margin: 5px 0 30px 0;
        text-align: left;
    }
    .galerie-proiect {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
    .galerie-proiect a img {height: initial;}
    .prevnext a {padding: 10px;}

}