@media (min-width: 1281px) {
  /* CSS */
}

/* 
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
  */

@media (min-width: 1025px) and (max-width: 1280px) {
  /* CSS */
}

/* 
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1024px
  */

@media (min-width: 878px) and (max-width: 1024px) {
  /* CSS */
}

/* 
    ##Device = Tablets, Ipads (landscape)
    ##Screen = B/w 768px to 1024px
  */

@media (min-width: 590px) and (max-width: 877px){
  /* CSS */

  .hero h2 {
    font-size: 3.0rem;
  }

  
  .servicii-card .card-text{
    width: 100%
    }

    .servicii-gallery-item{
        min-width: 320px;
    }

  .noi-card .card-text{
    width: 100%;
  }

  .noi-gallery-item{
    min-width: 320px;
  }


}


@media (min-width:320px) and (max-width: 589px) {
  /* CSS */


  body {
    flex-direction: column-reverse;
  }

  .page{
    height: 100vh;
  }


  /*

Call Bar
  
  */

  .right-call-bar {
    width: 100vw;
    bottom: 0;
    position: fixed;

    background-color: #D34013;
  }

  .call-bar-text {
    transform: rotate(0deg);
    font-size: 1.6rem;
    margin-left: 0rem;
    margin-top: 0;

    padding-right: 2rem;
    padding-left: 2rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;

    display: flex;
    flex-direction: row;
    width: auto;
  }

  .call-bar-text a {
    padding-bottom: 2px;
  }
    /*

Hero


*/

.racheta {
    padding-top: 3vh;
    padding-bottom: 3vh;
    flex-grow: 1;
    flex-shrink: 1;
    transform: rotate(-35deg);
    height: auto;
  }
  
  .hero {
    height: 100vh;
    padding-bottom: 7vh;
    width: auto;
    display: flex;
    height: calc(85vh - 49px);
    padding-left: 1.0rem;
    padding-right: 1.0rem;
  }
  
  .hero h3 {
    margin-top: -100px;
    font-size: 1.8rem;
  }
  .hero h2 {
    font-size: 2.4rem;
    padding-bottom: 2rem;
  }


  
  .servicii-card .card-text{
    width: 100%
    }

    .servicii-gallery-item{
        padding-left: 2.0rem;
        padding-right: 2.0rem;
        width: 100%;    
        min-width: 100%;
    }

    .nav-container{
        margin-right: 0;
        width: 100%;
    }

  .noi-card .card-text{
    width: 100%;

    .noi-gallery-item{
        padding-left: 2.0rem;
        padding-right: 2.0rem;
        width: 100%;    
        min-width: 100%;
    }

    .nav-container{
        margin-right: 0;
        width: 100%;
    }
  }

  
  .cookie-consent{
    bottom:60px !important;
  }
}

@media (min-width: 320px) and (max-width: 877px) {
  /*

Layout

*/

  .mobile-only {
    display: inline;
  }

  .mobile-hidden {
    display: none;
  }
  /*

Navbar

*/

  .nav-container {
    padding-right: 0px;
  }

  .navigation {
    padding-left: 0rem;
    padding-right: 0.3rem;
  }

  .navigation a {
    font-size: 2rem;

    padding-left: 20px;
    padding-right: 20px;
    padding-top: 0rem;
    padding-bottom: 0rem;

    height: 46px;

    color: #180a35;
    border-left: 1px solid #180a35;
  }

  .navigation button {
    font-size: 2rem;

    padding-left: 20px;
    padding-right: 20px;
    padding-top: 0rem;
    padding-bottom: 0rem;

    height: 46px;

    color: #180a35;
    border-left: 1px solid #180a35;
  }

  .dark-mode .navigation button {
    color: white;
    border-left: 1px solid white;
  }

  .navigation .nav-links {
    display: flex;
    height: fit-content;
  }

  .logo img {
    height: 27px;
  }

  .dark-mode-switch {
    margin-top: 2rem;
    width: 46px;
    height: 46px;
    margin-left: 1.0rem;
  }

  .dark-mode-switch img {
    height: 33px;
    width: 33px;
  }



  /*
  
  Sections

  */
  
  .section-text h2{
    font-size: 2.4rem;
  }

    .section-text p{
        font-size: 1.4rem;
    }

    .section-text{
        padding-left: 3.0rem;
        padding-right: 3.0rem;
        margin-left: 0.0rem;
    }

    .container-section{
        width: 100%;
    }

    .proiecte-gallery-item{
        padding-left: 2.0rem;
        padding-right: 2.0rem;
        width: 100%;
        flex-grow: 1;
        align-items: center;
        justify-content: center;
    }

    .proiecte-gallery-item.t1{
        flex-direction: column-reverse;
    }

    .proiecte-gallery-item.t2{
        flex-direction: column-reverse;
    }

    .proj-img-container{
        width: 90%;
    }

    .card p{
        font-size: 1.4rem;
    }

    .card h3{
        font-size: 2.0rem;
    }

    .proiecte-card .card-text{
        width: 100%
    }
    
    .proiecte-card{
        width: 100%;
    }
    

    .gallery{
        margin-left: 25px;
        margin-right: 25px;
    }

    .contact-section iframe{
        width: calc(100% - 4.0rem);

    }

    .footer{
        margin-bottom: 49px;
        padding-left: 1.0rem;
        padding-right: 1.0rem;
    }

    .footer-text{
        display: flex;
        flex-direction: row;
        font-size: 1.4rem;
        gap:2.0rem
    }

    .footer-links{
        display: flex;
        flex-direction: column;
    }

    .footer-links a{
        margin-top:0;
    }

    .mobile-nav.mobile-only{
        display: flex;

    }

    
    .servicii-card{
        height: auto !important;
    }

    .noi-card{
        height: auto !important;
    }

    .card-text{
        gap:1.0rem;
    }

}