:root{

    --ff1: 'Montserrat', sans-serif;

    --ff2: 'Story Script', sans-serif

}



html {

    scroll-behavior: smooth;

}



body {

    margin: 0;

    opacity: 0;

    animation: fadeInPage 1s forwards;

}

@keyframes fadeInPage {

    to {

        opacity: 1;

    }

}

@keyframes fadeDown {

    0% {

        opacity: 0;

        transform: translateY(-20px);

    }



    100% {

        opacity: 1;

        transform: translateY(0);

    }

}

.logo {

    opacity: 0;

    animation: fadeDown 0.6s ease forwards;

    animation-delay: 0.2s;

}



@media (min-width:1025px) {

    .container-header ul {

        opacity: 0;

        animation: fadeDown 0.6s ease forwards;

        animation-delay: 0.4s;

    }

}



.contattaci {

    opacity: 0;

    animation: fadeDown 0.6s ease forwards;

    animation-delay: 0.6s;

}



.lingua {

    opacity: 0;

    animation: fadeDown 0.6s ease forwards;

    animation-delay: 0.8s;

}



* {

    box-sizing: border-box;

}



img {

    max-width: 100%;

    height: auto;

    display: block;

}



header {

    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    z-index: 1000;

    background-color: transparent;

    transition: background .4s ease;

}





    header.bob {

        background: linear-gradient(180deg, white, transparent);

        

    }



.lingua {

    display: flex;

    gap: 10px;

    align-items: center;

}



    .lingua img {

        width: 18px;

        cursor: pointer;

    }



header .container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px;

    width: 100%;

}



.container-header {

    display: flex;

    align-items: center;

    gap: 15px;

}



.logo {

    max-width: 180px;

    width: 100%;

    filter: invert(1)

}



.bob img.logo {

    filter: invert(0);

}







.container-header ul{

    display:flex;

    gap:30px;

    padding-right:15px

}



ul{

    list-style:none

}



a{

    text-decoration:none

}

.container-header a{

    color:white;

    font-family: var(--ff1);

    font-size:17px;

    font-weight:500;

    line-height:1.2;

}



.container-header ul a {

    background-image: linear-gradient(#3b290d, #3b290d);

    background-size: 0% 2px;

    background-position: left bottom;

    background-repeat: no-repeat;

    transition: background-size 0.3s ease;

}



.container-header ul a:hover{

    background-size: 100% 2px;

}



.bob .container-header ul a{

    color:black

}



.contattaci {

    border-radius: 40px;

    background-color: #3b290d;

    padding: 10px 20px;

    transition: all .3s ease;

    cursor: pointer;

}



    .contattaci a {

        display: inline-block;

        transition: transform .3s ease;

    }



    .contattaci:hover {

        background-color: #5a3d16;

        transform: scale(1.08);

    }



        .contattaci:hover a {

            transform: scale(0.93);

        }





.menu-toggle {

    display: none;

    flex-direction: column;

    cursor: pointer;

    gap: 5px;

    position: relative;

    z-index: 2000;

}



    .menu-toggle span {

        width: 28px;

        height: 3px;

        border-radius:3px;

        background: white;

        transition: 0.3s;

    }



header.bob .menu-toggle span {

    background: black;

}



    .menu-toggle.active span:nth-child(1) {

        transform: rotate(45deg) translate(5px,5px);

    }



    .menu-toggle.active span:nth-child(2) {

        opacity: 0;

    }



    .menu-toggle.active span:nth-child(3) {

        transform: rotate(-45deg) translate(6px,-6px);

    }



.menu-contact {

    display: none;

}



@keyframes menuFade {

    0% {

        opacity: 0;

        transform: translateY(-20px);

    }



    100% {

        opacity: 1;

        transform: translateY(0);

    }

}

.container-header ul li {

    opacity: 1;

}





@media (max-width:1024px) {



    img {

        max-width: 100%;

        height: auto;

        display: block;

    }



    



    .container-header ul.active li {

        animation: menuFade 0.4s ease forwards;

    }

        .container-header ul.active li:nth-child(1) {

            animation-delay: 0.3s;

        }



        .container-header ul.active li:nth-child(2) {

            animation-delay: 0.4s;

        }



        .container-header ul.active li:nth-child(3) {

            animation-delay: 0.5s;

        }



        .container-header ul.active li:nth-child(4) {

            animation-delay: 0.6s;

        }



        .container-header ul.active li:nth-child(5) {

            animation-delay: 0.7s;

        }

    header .container{

        align-items:center

    }



    .container-header {

        flex: 1;

        justify-content: flex-end;

        gap:0

    }



    .logo {

        width: 100%;

        max-width:140px

    }



    .container {

        display: flex;

        justify-content: space-between;

        align-items: center;

        margin: 0 !important;

        padding: 20px;

        width: 100%;

    }



    .lingua {

        display: flex;

         gap: 0 !important;

        align-items: center;

    }



    .text .contattaci {

        width: auto;

        display: inline-block;

    }



    .text {

        z-index: 3;

        padding-left: 20px !important;

        padding-right: 20px !important;

    }



        .container {

            padding: 20px 20px

        }



        .menu-contact {

            display: block;

        }



        .container-header > .contattaci {

            display: none;

        }



        .menu-contact a {

            border: 2px solid white;

            padding: 10px 25px;

            border-radius: 40px;

        }



    .mid,

    .container-servizi,

    .cont-dovesiamo {

        padding-left: 20px !important;

        padding-right: 20px !important;

    }



    .container-servizi{

        gap:50px !important;

        padding-bottom:50px !important

    }



    .container-header ul a {

        background-image: linear-gradient(white, white);

        background-size: 0% 2px;

        background-position: center bottom;

        background-repeat: no-repeat;

        transition: background-size 0.3s ease;

    }



        .container-header ul a:hover {

            background-size: 100% 2px;

        }



    .container-header ul {

        gap: 20px;

        padding-top: 100px;

    }



        .container-header a {

            font-size: 14px;

        }



        .contattaci {

            padding: 8px 16px;

        }



    .lingua img {

        width: 21px;

        padding-left: 10px;

    }



        .menu-toggle {

            display: flex;

        }



        .container-header ul {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100vh;

            margin:0;

            background: #3b290d;

            flex-direction: column;

            justify-content: flex-start;

            align-items: center;

            gap: 40px;

            padding-top: 120px;

            transform: translateY(-100%);

            opacity: 0;

            pointer-events: none;

            transition: transform 0.4s ease, opacity 0.4s ease;

        }



            .container-header ul.active {

                transform: translateY(0);

                opacity: 1;

                pointer-events: auto;

            }



            .container-header ul a {

                color: white;

                font-size: 20px;

            }



    .mid {

        flex-direction: column;

    }



    .left-cont {

        order: 1;

    }



    .right-cont {

        order: 2;

    }



    h2 {

        font-size: 19px !important;

        padding-top: 20px !important;

        padding-bottom: 10px !important;

    

    }

    .about {

        font-size: 7px !important;

        margin: 0;

        padding-top: 10px;

    

    }



    .paragraf2 {

        font-size: 14px !important;

        font-weight: 400 !important;

        line-height: 1.3 !important;

    }



    .paragraf3 {

        font-size: 14px !important;

        font-weight: 400 !important;

        line-height: 1.3 !important;

        padding-top:20px !important;

        padding-bottom:30px !important

    }





  



        .paesaggio-casentino,

        .paesaggio-arezzo,

        .cucina-arezzo,

        .eventi-arezzo {

            flex-direction: column;

            gap: 20px;

            padding: 0 20px;

        }



        .par-subbiano,

        .par-arezzo,

        .par-cucina,

        .par-eventi {

            order: 1;

            border-left: none;

            padding-top: 15px;

            padding-left: 0;

        }



        .fotosubb,

        .fotoarezz,

        .fotocucina,

        .fotoeventi {

            order: 2;

        }



        .par-subbiano{

            flex: none !important

        }



    .par-arezzo {

        flex: none !important

    }



    .par-cucina {

        flex: none !important

    }



    .par-eventi {

        flex: none !important

    }



    .cont-left{

        padding:0 !important;

        flex:none !important;

        padding-bottom:20px!important

    }



    .cont-right{

        padding-left:0 !important

    }



    .tit-cont{

        padding-bottom:0!important

    }



    .logo-footer{

        width:50% !important

    }

    .footer-col {

        flex: 0 0 100%;

    }



    .cont-contattaci .contattaci {

        width: 33% !important;

    }



    .cont-contattaci{

        display:block !important;

    }



    body .css-cont{

        font-size:18px !important

    }



    .en-cont{

        gap:20px !important

    }



    .en-right {

        flex: 0 0 40% !important;

        padding-left: 5%;

    }



    .slider {

        overflow: hidden;

    }



    .left,

    .right {

        width: 150px;

    }



    .center {

        width: 280px;

    }





    .sottoparagraf1 {

        font-size: 13px !important;

        width:100% !important;

        padding-bottom:40px !important

    }

    

    .paragraf1{

        font-size:16px !important

    }



    h1{

        font-size:40px !important;

        padding-bottom:30px

    }





    footer {

        padding: 40px 20px !important;

    }

    .footer-container {

        flex-direction: column !important;

        gap: 30px!important;

    }



    .paragraf-tel {

        flex-direction: column!important;

        gap: 5px !important;

    }



    .box img {

        height: 230px !important;

    }



    .gallery {

        padding: 30px !important;

    }



   



    .tit-subb{

        font-size:20px !important

    }



    .par-subb {

        font-size: 13px !important;

        line-height: 1.3!important;

    }



    .par-arezz {

        font-size: 13px !important;

        line-height: 1.3 !important;

    }



    .tit-cuci{

        font-size:20px !important

    }



    .par-cuci {

        font-size: 13px !important;

        line-height: 1.3 !important;

    }



    .tit-event{

        font-size:20px !important

    }



    .par-event{

        font-size:13px !important;

        line-height: 1.3 !important

    }



   .en-css{

       width:44% !important

   }



    }