@charset "utf-8";

@media only screen and (max-width:800px){
    .section-contatti {
        position: relative;
        width: fit-content;
        top: 100px;
        right: 0;
        transform: translateY(-30%);
        z-index: 20;
        padding: 1em;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: 1px;
        color: var(--primary);
    }
    body {
        height: 100%;
        display: grid;
        place-items: center;
    }
    
    .menu-section {
       position: fixed;
       width: 50%;
       top: 5px;
       right: 50%;
       transform: translateY(-30%);
       z-index: 100000000;
       padding: 1em;
       display: flex;
       justify-content: space-between;
       text-transform: uppercase;
       font-size: 2rem;
       font-weight: 600;
       letter-spacing: 1px;
       color: var(--primary);
    }
    .owl-item img {
        display: block;
        width: auto !important;
        border-radius: 20px;
        margin: 0px; 
        height: 500px;
    }
    .contatti h1{
        font-size: 20px;
        font-size: 60px;
        color: var(--primary);
        
    }
    .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 0;
        width: 100%;
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);
        margin-right: inherit; 
        margin-left: auto;
    }
    .hero-section {
        position: absolute;
        top: 5%;
        left: 26%;
        transform: translateY(-30%);
        z-index: 10;
    }
    .topnav #myLinks {
        display: none;
        background-color: beige;
        height: 100vh;
        overflow: scroll;
    }   
}

@media only screen and (max-width:632px){
    .section-contatti {
        position: relative;
        width: fit-content;
        top: 800px;
        right: 0;
        transform: translateY(-30%);
        z-index: 20;
        padding: 1em;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: 1px;
        color: var(--primary);
    }
    body {
        height: 100%;
    }
    
    .menu-section {
       position: fixed;
       width: 50%;
       top: 5px;
       right: 50%;
       transform: translateY(-30%);
       z-index: 100000000;
       padding: 1em;
       display: flex;
       justify-content: space-between;
       text-transform: uppercase;
       font-size: 2rem;
       font-weight: 600;
       letter-spacing: 1px;
       color: var(--primary);
    }
    .owl-item img {
        display: block;
        border-radius: 20px;
        margin: 0px; 
        height: 100px;
    }
    .contatti h1{
        font-size: 20px;
        font-size: 60px;
        filter: none;
    }
    .slids{
        margin: 2% auto;
    }
    .owl-carousel{
        display: none !important;
    }
    .hero-section {
        position: absolute;
        top: 45%;
        left: 12%;
        transform: translateY(-30%);
        z-index: 10;
    }
    .hero-section p {
        margin: 1em 0 2em 0;
    }
   
    li {
        font-size: 60px;
    }
    .section-contatti {
        position: inherit ;
        width: min-content ;
        padding-top: 250px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: 1px;
        color: var(--primary);
        align-items: center;
    }
    .mySlides img, .mySlidescontatti img {
        border-radius: 20px;
        margin-top: 120px;
    }
    .section-contatti h2{
        margin-top: 3rem;
      }
    .section-contatti{
        display: flex;
        justify-content: center;
    }
    .hero-section a > h1 {
        font-size: 3rem!important;
        margin-top:15px !important;
    }
}