@font-face{
    font-family: "Katibeh";
    src: url('Katibeh-Regular.ttf') format('truetype');
}


body {
     
    
    vertical-align:middle;
    margin: 0;
    font-family: "Katibeh", sans-serif;
    
    font-weight: 400;
    text-align:center;
}

html {
    scroll-behavior: smooth;
    margin: 0;
    background-color: #B8733B;
}

#container{
    display:flex;
    flex-direction:column;
    margin-left:auto;
    margin-right:auto;
}


#header{
    background-color: #AF5A19;
    width:100%;
    max-width:100%;
    position: fixed;
    top: 0;
    box-shadow: 0 2px 8px 0px #ebd1b5;
    z-index: 10;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}

.prodotti-container{
    display:grid;
    justify-items: center;
    gap:20px;
}

.prodotto{
    width:100%;
}

.prodotto-img{
    height:auto;
    width:100%;
    border-radius:30px;
    aspect-ratio: 1/1;
}


#menu-button,
#close-button {

    position: fixed;
    right: 5%;
    z-index: 20;
    cursor: pointer;
}

#close-button {
    top: 3%;
}



#overlay-menu {
    position: fixed;
    top:0;
    bottom:0;
    left: 100%;
    width: 100%;
    height: 100%;
    background-color: #ebd1b5;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateX(0);
    transition: transform 800ms cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 10;
    background-image: url('ellissi.svg'), url('decorazioni\ gialle.svg'), url('decorazione\ in\ basso.svg');
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: center, left top, left bottom;
}

#overlay-menu.active {
    transform: translateX(-100%);
    height: 100%;
}

#overlay-menu ul {
    list-style: none;
    padding: 0;
    text-align: center;
    z-index: 2;
}

#overlay-menu ul li a {
    text-decoration: none;
    color: #631d10;
}


#home img {
    max-width: 100%;
    width: 100%;
    display: block;
}


#home-img {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


#home-text,
#prodotti,
#contatti {
    max-width: 95%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}


.uno, .due, .prodotto-description, .cinque, .sei{
    color: #ebd1b5;
}

.tre, #prodotti-title p, .prodotto-name, .quattro, a{
    color: #631d10 !important;
}

#prodotti-title p, .prodotto-name{
    background-color: #ebd1b5;
    border-radius: 50px;
}




.tre, #numeri{
    background-image: url('home\ decoration.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

footer{
    background-color: #AF5A19;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
}

a{
    text-decoration: none;
}


.cont{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap:10px;
    padding:5px 0px;
}


#prodotti-title p,
.prodotto-name {
   
    padding: 8px; /* Uniforma il padding */
      
}









@media screen and (min-width:320px) and (max-width:375px) {
    
    #header{
        
        padding: 10px 0px;
    }

    #logo-container {
        width: 100%;
        max-width: 50%;
    }

    .prodotti-container{
        grid-template-columns: repeat(1, 1fr);
    }

    #menu-icon, #close-icon{
        width:22px;
        height:16px;
    }

    
    .icons {
        height: 24px;
        width: 24px;
    }

    #overlay-menu ul li {
        margin: 20px 0;
    }

    
    #overlay-menu ul li a, .uno{
        font-size: 28px;
    }


    .due, .tre, .prodotto-description, .quattro, a, .cinque, .sei{
        font-size:16px;
    }

    #prodotti-title p, .prodotto-name{
        font-size: 20px;
    }

    #prodotti-title p, .prodotto-name, .cont a{
        padding-top: 5px; /* Uniforma il padding */
    }


    #prodotti-title p,
    .prodotto-name {
   
        padding: 10px 8px  0  8px; /* Uniforma il padding */
      
    }

    .cont a{
        padding-top:8px;
    }

    

    .uno{
        padding: 70px 0px;
    }

    .due, #numeri{
        padding: 35px 0px 35px;
    }

    .tre{
        padding:100px 0px;
    }

    footer{
        margin:70px 0 0 0;
        padding-bottom: 20px;
    }

    #overlay-menu {

        background-size: 75%, 50%, 85%;
    }


}

@media screen and (min-width:376px) and (max-width:425px){

    #header{
        
        padding: 11px 0px;
    }

    .prodotti-container{
        grid-template-columns: repeat(1, 1fr);
    }

    #menu-icon, #close-icon{
        width:26px;
        height:18px;
    }

    .icons {
        height: 28px;
        width: 28px;
    }

    #logo-container {
        width: 100%;
        max-width: 49%;
    }


    #overlay-menu ul li {
        margin: 22px 0;
    }

    #overlay-menu ul li a, .uno{
        font-size: 30px;
    }


    .due, .tre, .prodotto-description, .quattro, a, .cinque, .sei{
        font-size:18px;
    }

    #prodotti-title p, .prodotto-name{
        font-size: 22px;
    }

    

    .uno{
        padding: 80px 0px;
    }

    .due, #numeri{
        padding: 40px 0px 40px;
    }

    .tre{
        padding:115px 0px;
    }

    footer{
        margin:80px 0 0 0;
        padding-bottom: 25px;
    }

    #overlay-menu {

        background-size: 75%, 50%, 85%;
    }

    #prodotti-title p,
    .prodotto-name {
   
        padding: 10px 8px  0  8px; /* Uniforma il padding */
      
    } 
    .cont a{
        padding-top:8px;
    }

}












@media screen and (min-width:426px) and (max-width:768px){

    #header{
        
        padding: 10px 0px;
    }


    .prodotti-container{
        grid-template-columns: repeat(2, 1fr);
    }

    #menu-icon, #close-icon{
        width:28px;
        height:20px;
    }

    .icons {
        height: 32px;
        width: 32px;
    }


    #logo-container {
        width: 100%;
        max-width: 35%;
    }

    #overlay-menu ul li {
        margin: 27px 0;
    }

    #overlay-menu ul li a, .uno{
        font-size: 34px;
    }

    

    .due, .tre, .prodotto-description, .quattro, a, .cinque, .sei{
        font-size:22px;
    }

    #prodotti-title p, .prodotto-name{
        font-size: 26px;
    }

   

    .uno{
        padding: 90px 0px;
    }

    .due, #numeri{
        padding: 45px 0px 45px;
    }

    .tre{
        padding:130px 0px;
    }

    footer{
        margin:90px 0 0 0;
        padding-bottom: 30px;
    }

    #overlay-menu {

        
        background-size: 45%, 50%, 80%;
    }

    #prodotti-title p,
    .prodotto-name {
   
        padding: 10px 8px  0   8px; /* Uniforma il padding */
      
    } 
    .cont a{
        padding-top:8px;
    }

}







@media screen and (min-width:769px) and (max-width:1024px){

    #header{
        
        padding: 8px 0px;
    }

    .prodotti-container{
        grid-template-columns: repeat(2, 1fr);
    }

    #menu-icon, #close-icon{
        width:30px;
        height:22px;
    }

    .icons {
        height: 36px;
        width: 36px;
    }

    #logo-container {
        width: 100%;
        max-width: 30%;
    }

    #overlay-menu ul li {
        margin: 32px 0;
    }

    #overlay-menu ul li a, .uno{
        font-size: 38px;
    }

    #home-img {
        display: flex;
        flex-direction: row;
        background-color:#ebd1b5;
        filter:opacity(0.8);
    }

    #home img{
        max-width:80%;
        width:100%;
        margin-left:auto;
        margin-right:auto;

    }

    .hide{
        display:none !important;
    }

    

    .due, .tre, .prodotto-description, .quattro, a, .cinque, .sei{
        font-size:26px;
    }

    #prodotti-title p, .prodotto-name{
        font-size: 30px;
    }

    

    .uno{
        padding: 100px 0px;
    }

    .due, #numeri{
        padding: 80px 0px 100px;
    }

    .tre{
        padding:145px 0px;
    }

    footer{
        margin:100px 0 0 0;
        padding-bottom: 35px;
    }

    #overlay-menu {
        background-size: 35%, 40%, 70%;
        height:100vh;
    }

    #prodotti-title p,
    .prodotto-name {
   
        padding: 10px 8px  0  8px; /* Uniforma il padding */
      
    }

    .cont a{
        padding-top:8px;
    }
}



@media screen and (min-width:1025px) and (max-width:1440px){

    #header{
      
        padding: 8px 0px;
    }

    .prodotti-container{
        grid-template-columns: repeat(3, 1fr);
    }

    #menu-icon, #close-icon{
        width: 32px;
        height:24px;
    }

    .icons {
        height: 40px;
        width: 40px;
    }

    #logo-container {
        width: 100%;
        max-width: 25%;
    }

    #overlay-menu ul li {
        margin: 37px 0;
    }

    #overlay-menu ul li a, .uno{
        font-size: 42px;
    }

    #home-img {
        display: flex;
        flex-direction: row;
        background-color:#ebd1b5;
        filter:opacity(0.8);
    }

    #home img{
        max-width:70%;
        width:100%;
        margin-left:auto;
        margin-right:auto;

    }

    .hide{
        display:none !important;
    }


    .due, .tre, .prodotto-description, .quattro, a, .cinque, .sei{
        font-size:30px;
    }

    #prodotti-title p, .prodotto-name{
        font-size: 34px;
    }

    .uno{
        padding: 110px 0px;
    }

    .due, #numeri{
        padding: 90px 0px 110px;
    }

    .tre{
        padding:160px 0px;
    }

    footer{
        margin:110px 0 0 0;
        padding-bottom: 40px;
    }

    #overlay-menu {
        background-size: 50%, 40%, 70%;
    }

    #prodotti-title p,
    .prodotto-name {
   
        padding: 10px 8px  0  8px; /* Uniforma il padding */
      
    }

    .cont a{
        padding-top:8px;
    }
}






@media screen and (min-width:1441px){

    #header{
       
        padding: 17px 0px;
    }

    .prodotti-container{
        grid-template-columns: repeat(3, 1fr);
    }


    #menu-icon, #close-icon{
        width:34px;
        height:26px;
    }

    .icons {
        height: 44px;
        width: 44px;
    }


    #logo-container {
        width: 100%;
        max-width: 20%;
    }

    #overlay-menu ul li {
        margin: 42px 0;
    }

    #overlay-menu ul li a, .uno{
        font-size: 42px;
    }


    #home-img {
        display: flex;
        flex-direction: row;
        background-color:#ebd1b5;
        filter:opacity(0.8);
    }

    #home img{
        max-width:70%;
        width:100%;
        margin-left:auto;
        margin-right:auto;

    }

    .hide{
        display:none !important;
    }

   

    .due, .tre, .prodotto-description, .quattro, a, .cinque, .sei{
        font-size:30px;
    }

    #prodotti-title p, .prodotto-name{
        font-size: 34px;
    }

    .uno{
        padding: 120px 0px;
    }

    .due, #numeri{
        padding: 100px 0px 120px;
    }

    .tre{
        padding:175px 0px;
    }

    footer{
        margin:120px 0 0 0;
        padding-bottom: 45px;
    }

    
    #overlay-menu {
        background-size: 30%, 25%, 60%;
    }

    #prodotti-title p,
    .prodotto-name {
   
        padding: 10px 8px  0  8px; /* Uniforma il padding */
      
    }

    .cont a{
        padding-top:8px;
    }
}