@import url('https://fonts.googleapis.com/css2?family=Clicker+Script&family=Epilogue&family=Fredoka+One&family=Poppins:wght@200;300;400;500;600&display=swap');

/* VARIABLE CSS */
:root{
    --header-height: 5.5rem;

    /* COLORS */
--first-color:  hsl(42, 100%, 53%);
--second-color: hsl(0, 85%, 55%);
--title-color: hsl(0, 0%, 0%);
--text-color: hsl(0, 0%, 33%);
--body-color: hsl(0, 0%, 100%);
--container-color: hsl(218, 67%, 98%);

/* FONT AND TYROGRAPHY */

--body-font: 'Epilogue', sans-serif;
--second-font: 'Fredoka One', sans-serif;
--biggest-font-size: 5.5rem;
--bigger-font-size: 3.75rem;
--h1-font-size: 2.5rem;
--h2-font-size: 1.75rem;
--h3-font-size: 1.5rem;
--larger-font-size: 1.25rem;
--large-font-size: 1.125rem;
--normal-font-size: 1rem;
/* FONT WEIGHT */
--weight-400:400;

/* ========================TRANSITION================= */
--transition: ease-in-out;
 }

 /* ============BASE====================== */
 *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
 }

 html{
   scroll-behavior: smooth;
 }

 input,
 button,
 body{
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
 }

 body{
    background-color: var(--body-color);
    color: var(--text-color);
 }

 input,
 button{
    outline: none;
    border: none;
    background-color: transparent;
 }

 h1,h2,h3,h3{
    color: var(--title-color);
    font-family: var(--second-font);
    font-weight: var(--weight-400);
 }

 ul{
    list-style: none;
 }
 
 a{
    text-decoration: none;
 }

 p{
    line-height: 1.875rem;
 }

 img{
    max-width: 100%;
 }

 /* ================REUSEABLE CSS CLASSES============== */

 .container{
    max-width: 1320px;
    padding-inline: 0.75rem;
    margin-inline: auto;
 }
 .grid{
    display: grid;
    gap: 1.5rem;
 }
.section{
   padding-block: 7.5rem;
}
.section__container{
   grid-template-columns: repeat(2, 1fr);
   margin-bottom: 3rem;
}
.section__title{
   font-size: var(--bigger-font-size);
}

.section__title,
.section__description{
   width: 80%;
}
.title-center{
   max-width: 800px;
   margin-inline: auto;
   width: 100%;
   margin-bottom: 5rem;
   text-align: center;
   position: relative;
}
.title-center::after{
   content: '';
   position: absolute;
   left: 50%;
   bottom: -1.25rem;
   transform: translateX(-50%);
   width: 270px;
   height: 12px;
   border: 1.5rem;
   background-color: var(--first-color);
}
.section__subtitle{
   display: block;  
   color: var(--second-color);
   font-family: var(--second-font);
   font-size: var(--large-font-size);
   font-weight: var(--weight-400);
   text-transform: uppercase;
   letter-spacing: 2px;
   margin-bottom: .25rem;
}
.section__description{
   margin-bottom: 1.5rem;
}
.section__data{
   display: flex;
   align-items: center;
   column-gap: 1.25rem;
}
.section__img{
   border-radius: 50%;
}
.section__data-title{
   font-size: var(--h3-font-size);
}

.main{
   overflow: hidden;
}


/* ================HEADER & NAV =========== */
.header{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
}

.nav,
.nav__list{
    display: flex;
}
.nav{
   height: calc(var(--header-height) + 1.5rem);
   align-items: center;
   justify-content: space-between;
}
.nav__list{
   column-gap: 3rem;
}
.nav__link{
   color: var(--body-color);
   font-family: var(--second-font);
   font-size: var(--large-font-size);
   font-weight: var(--weight-400);
   transition: all .3s var(--transition);
}
.nav__close,
.logo__mobile,
.nav__toggle{
    display: none;
}
/* =====================ACTIVE LINKS================ */

.active-link,
.nav__link:hover{
   color: var(--second-color);
}

 /* ======================HOME==================== */
.home{
    background-image: url(../images/home-bg.jpg);
    padding-block: 10.5rem 3.25rem;
    position: relative;
}
.home::before{
    content: '';
    position: absolute;
    right: 0;
    top: 30%;
    width: 880px;
    height: 400px;
    background-color: var(--second-color);
    border-radius: 12rem 0 0 12rem;
}
 .home__content{
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
 }
 .home__subtitle{
    color: var(--second-color);
    font-size: var(--h3-font-size);
 }
 .home__title{
    color: var(--first-color);
    font-size: var(--biggest-font-size);
    margin-bottom: .5rem;
 }

 .home__description{
    color: var(--body-color);
    max-width: 420px;
    font-size: var(--larger-font-size);
    margin-bottom: 3.75rem;
 }

 /*================ SWIPER ==============*/
 .swiper-pagination{
    position: initial;
    margin-top: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: .25rem;
 }
 .swiper-pagination-bullet{
    opacity: 1;
    width: 14px;
    height: 14px;
    background-color: hsl(0, 0%, 71%);
 }
 .swiper-pagination-bullet-active{
    border: 5px solid var(--second-color);
    background-color: transparent;
    padding: .25rem;
 }
 .swiper-button-next::after,
 .swiper-button-prev::after{
content: '';
 }
 .swiper-button-next,
 .swiper-button-prev{
    border: 1px solid var(--body-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--body-color);
    font-size: var(--larger-font-size);
    top: 95%;
    transition: all 0.3s var(--transition);
 }
 .swiper-button-next:hover,
 .swiper-button-prev:hover{
    background-color: var(--second-color);
    border-color: var(--second-color);
 }
 .swiper-button-next{
    right: 1rem;
 }
 .swiper-button-prev{
    left: 1rem;
 }
 /* ===========BUTTON ============*/

 .button{
    display: inline-block;
    color: var(--body-color);
    background-color: var(--second-color);
    padding: 1.25rem 2.5rem;
    font-family: var(--second-font);
    position: relative;
 }
 .button::before{
    content: '';
    position: absolute;
    inset-block: -0.5rem;
    right: -0.5rem;
    border: 3px solid var(--second-color);
    width: calc(100% - 1rem);
    z-index: -1;
    transition: all 0.3s var(--transition);
 }

 .button,
 .button::before{
    border-radius: 0.75rem;
 }

 .button:hover::before{
    width: 30%;
 }

 /* ============ABOUT=================== */

 .about__container{
   grid-template-columns: repeat(3, 1fr);
 }
 .about__item{
   position: relative;
 }
 .about__img{
   width: 100%;
   vertical-align: middle;
 }
 .about__top,
 .about__hover{
   position: absolute;
 }
 .about__top{
   inset: 1.25rem;
   border: 4px solid var(--first-color);
   transition: all 0.3s var(--transition);
 }
 .about__item:hover .about__top{
   opacity: 0;
 }
 .about__top-title{
   background-color: var(--first-color);
   padding-block: .75rem;
   font-size: var(--h3-font-size);
   text-align: center;
   position: absolute;
   bottom: -1px;
   inset-inline: -2px;
 }
 .about__top,
 .about__top-title,
 .about__img,
 .about__hover{
   border-radius: 1.75rem;
 }
 .about__hover{
   inset: 0;
   background-color: hsla(349, 89%, 55%, 0.9);
   padding-inline: 2.5rem;
   text-align: center;
   display: flex;
   align-items: center;
   transform: rotateY(90deg)  scale(0.5);
   transition: all 0.3s var(--transition);
 }
  .about__item:hover .about__hover{
   transform: rotateY(0deg) scale(1); 
 }
 .about__hover-title,
 .about__description{
   color: var(--body-color);
 }
 .about__hover-title{
   font-size: var(--h2-font-size);
 }
 .about__description{
   margin-block: 1.25rem 2.5rem;
 }
 .about__btn{
   background-color: var(--body-color);
   color: var(--text-color);
 }
 .about__btn::before{
   all: unset;
 }

 /* ==================MENU================= */
.menu{
   background-color: var(--container-color);
}
 .menu-one .menu__container{
   grid-template-columns: repeat(3, 1fr);
   align-items: flex-start;
 }
 .menu__item{
   background-color: var(--body-color);
   border-radius: 1.5rem;
   position: relative;
   
 }
 .menu-one .menu__item{
   margin-left: 5.25rem;
   padding: 3.25rem 1.5rem 3.25rem 7.5rem;
 }

 .menu__img-wrapper,
 .menu__img-wrapper::before{
   position: absolute;
 }

 .menu-one .menu__img-wrapper,
 .menu-one .menu__img-wrapper::before{
   top: 50%;
   transform: translateY(-50%);
 }
 .menu-one .menu__img-wrapper{
   left: -5.25rem;
 }

 .menu__img-wrapper::before{
   content: '';
   background-color: var(--second-color);
   border-radius: 5.5rem;
 }

 .menu-one .menu__img-wrapper::before{
   left: 0;
   width: 70%;
   height: 115%;
 }
 .menu__img{
   z-index: 10;
   position: relative;
 }
.menu__title{
   font-size: var(--h3-font-size);
   cursor: pointer;
   transition: all .3s var(--transition);
}
.menu__title:hover{
   color: var(--second-color);
}
.menu__price{
   color: var(--second-color);
   font-family: var(--second-font);
   font-size: var(--h2-font-size);
   font-weight: var(--weight-400);
   display: block;
   margin-block: 1rem 0.75rem;
}
.menu__rating{
   display: flex;
   column-gap: .375rem;
   color: var(--first-color);
   font-size: var(--large-font-size);
}
.menu__btn{
   position: absolute;
   right: 1rem;
   bottom: 1rem;
   width: 50px;
   height: 50px;
   border-radius: .5rem;
   background-color: var(--first-color);
   display: grid;
   place-items: center;
   transition: all .3s var(--transition);
}
.menu__btn:hover{
   background-color: var(--second-color);
}
.menu__btn i{
   color: var(--title-color);
   font-size: 2rem;
   transition: all .3s var(--transition);
}
.menu__btn:hover i{
   color: var(--body-color);
}
.opening{
   background-color: var(--first-color);
   padding: 2.5rem;
   border-radius: 1.5rem;
}
.opening__title{
   font-size: var(--h2-font-size);
   text-transform: uppercase;
   text-align: center;
   margin-bottom: 2.25rem;
   position: relative;
}
.opening__title::after{
   content: '';
   position: absolute;
   bottom: -0.75rem;
   left: 50%;
   transform: translateX(-50%);
   width: 60px;
   height: 5px;
   background-color: var(--title-color);
}
.opening__list{
   margin-bottom: 1.75rem;
}
.opening__list :is(dt, dd){
   color: var(--title-color);
   font-family: var(--second-font);
}
.opening__list dt{
   float: left;
}
.opening__list dd{
   text-align: right;
   margin-bottom: 1.25rem;
}
.opening__data{
   background-color: var(--second-color);
   padding: 1.25rem;
   border-radius: 1.75rem;
   text-align: center;
}
.opening__data h3,
.opening__description{
   color: var(--body-color);
}
.opening__data h3{
   border-bottom: 5px solid var(--first-color);
   font-size: var(--h2-font-size);
   display: inline;
}
.opening__description{
   font-size: var(--normal-font-size);
   margin-top: 1.25rem;
}


/* ===============SERVICES======================= */
.services .section__container{
align-items: center;
}
.services__container{
   grid-template-columns: repeat(4, 1fr);
}
.services__item{
   text-align: center;
}
.services__img-wrapper{
   width: 150px;
   height: 150px;
   border-radius: 50%;
   background-color: var(--first-color);
   outline: 5px solid var(--first-color);
   border: 5px solid var(--first-color);
   display: grid;
   place-items: center;
   margin-inline: auto;
}

.services__img{
   width: 76px;
}
.services__title{
   font-size: var(--h3-font-size);
   margin-block: 1.25rem 0.25rem;
   cursor: pointer;
   transition: all .3s var(--transition);
}
.services__title:hover{
   color: var(--second-color);
}

/* ============DEALS----------------- */
.deals{
   padding-top: 0;
}
.deals .section__title{
   margin-bottom: 3rem;
}
.deals__container{
   grid-template-columns: 5fr 7fr;
}
.tab__btns{
   background-color: var(--second-color);
   padding: 2.75rem;
   border-radius: 1.75rem;
}
.tab__btn{
   display: block;
   background-color: var(--body-color);
   color: var(--title-color);
   padding: 1.25rem;
   padding-left: 2.5rem;
   border-radius: 1rem;
   font-family: var(--second-font);
   font-size: var(--large-font-size);
   position: relative;
   cursor: pointer;
}
.tab__btn:not(:last-child){
   margin-bottom: 0.25rem;
}
.tab__btn.active-tab{
   background-color: var(--first-color);
}
.tab__btn::before{
   content: '';
   position: absolute;
   left: 1rem;
   top: 50%;
   transform: translateY(-50%);
   width: 14px;
   height: 14px;
   border-radius: 50%;
   background-color: hsl(0, 0%, 76%);
}
.tab__btn.active-tab::before{
   background-color: var(--second-color);
}
.tab__item:not(.active-tab){
   display: none;
}
.tab__item{
   border: 7px solid var(--first-color);
   border-radius: 1.25rem;
   padding: 3rem;
   padding-left: 5rem;
}
.deals__title{
   font-size: var(--h1-font-size);
   margin-top: 2rem;
}
.quality__list{
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   row-gap: 1.75rem;
   margin-bottom: 2.5rem;
}

.list__item,
.deals__price{
   display: flex;
   align-items: center;
   column-gap: .625rem;
}
.list__title{
   color: var(--text-color);
   font-size: var(--large-font-size);
}
.deals__price{
   margin-bottom: 2rem;
}
.deals__price p{
   color: var(--title-color);
   font-size: var(--h1-font-size);
}
.deals__price p,
.deals__price del{
   font-family: var(--second-font);
   font-weight: var(--weight-400);
}
.deals__price p span{
   color: var(--second-color);
}
.deals__price del{
   font-size: var(--h3-font-size);
}

/* =================MENU========================== */
.menu-two .menu__container{
   grid-template-columns:repeat(4, 1fr);
}
.menu-two .menu__item{
   padding: 2.5rem;
   padding-top: 6.5rem;
   margin-top: 7rem;
}
.menu-two .menu__img-wrapper,
.menu-two .menu__img-wrapper::before{
   left: 50%;
   transform: translateX(-50%);

}
.menu-two .menu__img-wrapper{
   top: -38%;
   width: max-content;
}
.menu-two .menu__img-wrapper::before{
   width: 154%;
   height: 100px;
   top: 5rem;
}
.menu__grams{
   font-family: var(--second-font);
   font-weight: var(--weight-400);
   display: block;
   margin-bottom:  0.5rem;
}


/*======================= RESERVATION================ */
.reservation .section__title{
   max-width: 800px;
   margin-bottom: 3rem;
}
.reservation__container{
   grid-template-columns: 4fr 8fr;
}
.reservation__card{
   display: flex;
   align-items: center;
   column-gap: 1.25rem;
}
.reservation__card:not(:last-child){
   margin-bottom: 2.25rem;
}
.reservation__icon_wrapper{
   background-color: var(--first-color);
   width: 70px;
   height: 70px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
}
.reservation__icon{
   width: 40px;
}
.reservation__card-title{
   color: var(--second-color);
   font-size: var(--normal-font-size);
   margin-bottom: 0.25rem;
}

.reservation__card-data{
   color: var(--title-color);
   font-family: var(--second-font);
   font-size: var(--large-font-size);
   font-weight: var(--weight-400);

}
.reservation__form-group{
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   column-gap: 1.5rem;
}
.reservation__form-div{
   margin-bottom: 1.25rem;
}
.reservation__form-input{
   border: 3px solid hsl(0, 0%, 89%);
   padding: 1.25rem;
   width: 100%;
   border-radius: 0.5rem;
}
.reservation__button{
   margin-top: 1.25rem;
}

/*=================== gallery============*/
.gallery{
   margin-bottom: 1.25rem;
}

.gallery__container{
   grid-template-columns: repeat(5, 1fr);
   gap: 1.25rem;
}

.gallery__item{
   position: relative;
}

.gallery__img{
   vertical-align: middle;
}

.gallery__hover{
   position: absolute;
   inset: 0;
   background-color: hsla(349, 89%, 55%, 0.8);
   cursor: pointer;
   opacity: 0;
   transition: all 0.5s var(--transition);
}

.gallery__item:hover .gallery__hover{
   opacity: 1;
}

.gallery__hover::before,
.gallery__hover::after{ 
   content:""; 
   position: absolute;
   background-color: var(--body-color);
   transform: translate(-50%, -50%);
   opacity: 0;
   transition: all 0.5s var(--transition);
}

.gallery__hover::before{
   left: 50%; 
   top: 100%; 
   height: 40px; 
   width: 3px;
}
.gallery__hover::after{
   left: 100%; 
   top: 50%; 
   height: 3px; 
   width: 40px;
}

.gallery__item:hover .gallery__hover::before,
.gallery__item:hover .gallery__hover::after{
   opacity: 1;
}

.gallery__item:hover .gallery__hover::before{
   top: 50%;
}
.gallery__item:hover .gallery__hover::after{
   left: 50%;
}
/* =============FOOTER================= */

.footer{
   background-image: url(../images/footer-bg.jpg);
}
.footer__container{
   grid-template-columns: 8fr 5fr;
   column-gap: 6rem;
   position: relative;
   z-index: 10;
}
.footer__description,
.footer__title,
.newsletter__description{
color: var(--body-color);
}

.footer__description{
   font-size: var(--large-font-size);
   margin-block: 2rem 3.75rem;
}

.footer__title{
   font-size: var(--h3-font-size);
   border-bottom: 6px solid var(--first-color);
   margin-bottom: 2.5rem;
   display: inline-block;
}
.newsletter__description{
   margin-bottom: 1rem;
}
.footer__subscribe{
   display: flex;
   flex-wrap: wrap;
   column-gap: 1.25rem;
   row-gap: 1.75rem;
}
.footer__input{
   color: var(--body-color);
   border: 1px solid hsl(0, 0%, 38%);
   padding: 1.25rem;
   border-radius: .5rem;
   flex-grow: 1;

}
.footer__list{
   margin-bottom: 2.5rem;
}
.footer__list dt{
   float: left;
}
.footer__list :is(dt, dd){
color: var(--body-color);
font-family: var(--second-font);
}
.footer__list dd{
   margin-left: 7rem;
}

.footer .reservation__card-data{
   color: var(--body-color);
}

.footer__copy{
   background-color: var(--title-color);
   padding-block: 2rem;
   text-align: center;
   color: var(--body-color);
   font-family: var(--second-font);
   font-size: var(--large-font-size);
}

.footer__copy span{
   color: var(--second-color);
}

/* --------------Scroll up---------------- */

.scrollup{
   position: fixed;
   right: 1rem;
   bottom: -100%;
   height: 70px;
   width: 70px;
   border-radius: 50%;
   background-color: var(--body-color);
   border: 8px solid var(--second-color);
   display: grid;
   place-items: center;
   z-index: 100;
   transition: all 0.4s var(--transition);
}

.scrollup__icon{
   font-size: 1.75rem;
   color: var(--title-color);
}

/* Show Scroll Up */

.show-scroll{
   bottom: 1.5rem;
}


/* ================BREAKPOINTS============ */

/* For Large Devices */

@media screen and (max-width:1400px) {
   .container{
      max-width: 1140px;
   }

   :root{
      --biggest-font-size: 4.5rem;
      --bigger-font-size: 3rem;
      --h1-font-size: 2rem;
      --h2-font-size: 1.5rem;
      --h3-font-size: 1.25rem;
      --larger-font-size: 1.125rem;
      --large-font-size: 1rem;
      --normal-font-size: .9375rem;
   }

   .home::before { 
      width: 680px; 
      height: 340px; 
   }

   .title-center::after{
      width: 240px;
      height: 10px;
   }

   .menu-one .menu__item{
      margin-left: 4rem;
   }

   .menu-one .menu__img-wrapper{
      left: -4rem;
      width: 184px;
      height: 167px;
   }

   .menu__btn { 
      width: 40px; 
      height: 40px;
   }
   .menu__btn i { 
     font-size: 1.5rem;
   }

   .opening{
      padding: 2rem;
   }

   .opening__list dd{
      margin-bottom: 1rem;
   }

   .menu-two .menu__img-wrapper{
      width: 175px;
   }
   .menu-two .menu__img-wrapper::before{
      width: 145%;
   }
}

@media screen and (max-width:1200px) {
   .container{
      max-width: 960px;
   }

   .nav__logo-img,
   .footer__logo-img{
      width: 130px;
   }

   .reservation__btn{
      display: none;
   }

   .logo__mobile,
   .nav__close,
   .nav__toggle{
      display: block;
   }

   .nav__menu{
      position: fixed;
      left: -100%;
      top: 0;
      width: 500px;
      height: 100%;
      background-color: var(--body-color);
      padding: 3rem 2.5rem;
      box-shadow: 2px 0 4px hsla(0, 0%, 0%, 0.1);
      transition: all 0.4s var(--transition);
   }

   .show-menu{
      left: 0;
   }

   .logo__mobile{
      margin-bottom: 2.5rem;
   }

   .nav__list{
      flex-direction: column;
      row-gap: 1.5rem;
   }

   .nav__link:not(.active-link){
      color: var(--title-color);
   }

   .nav__link{
      font-size: var(--h3-font-size);
   }

   .nav__close,
   .nav__toggle{
      cursor: pointer;
   }

   .nav__close{
      position: absolute;
      top: 1rem;
      right: 1.25rem;
      color: var(--title-color);
      font-size: 2.5rem;
   }

   .nav__toggle{
      color: var(--body-color);
      font-size: 1.75rem;
   }

   .home__content,
   .section__container{
      grid-template-columns: 1fr;
   }

   .home__content{
      row-gap: 2.5rem;
   }

   .home::before{
      all: unset;
   }

   .home__data{
      text-align: center;
   }

   .home__description,
   .home__img{
      margin-inline: auto;
   }

   .section__container{
      row-gap: 1.25rem;
   }

   .section__title,
   .section__description{
      width: 100%;
   }

   .about__container,
   .menu-one .menu__container{
      grid-template-columns: repeat(2, 1fr);
   }

   .opening{
      padding: 1.75rem;
   }

   .opening__data{
      padding: 1rem;
   }

   .services__container,
   .menu-two .menu__container{
      grid-template-columns: repeat(3, 1fr);
   }

   .tab__btns{
      padding: 2rem;
   }

   .tab__item{
      padding: 2.5rem;
   }
}

/* For Medium Devices */
@media screen and (max-width:992px) {
   .container{
      max-width: 720px;
   }
   .menu-one .menu__container,
   .deals__container,
   .reservation__container,
   .footer__container{
      grid-template-columns: 1fr;
   }

   .services__container,
   .menu-two .menu__container{
      grid-template-columns: repeat(2, 1fr);
   }

   .deals__container,
   .footer__container{
      row-gap: 2.5rem;
   }
}

@media screen and (max-width:768px) {
   .container{
      max-width: 540px;
   }

   :root{
      --biggest-font-size: 4rem;
      --bigger-font-size: 2.5rem;
   }  

   .swiper-button-next,
   .swiper-button-prev{
      top: 97%;
   }

   .section{
      padding-block: 6rem;
   }

   .about__container,
   .services__container,
   .menu-two .menu__container{
      grid-template-columns: 1fr;
   }

   .title-center::after{
      width: 200px;
      height: 8px;
   }

   .menu-two .menu__item{
      padding: 1.5rem;
      padding-top: 6rem;
      margin-top: 6rem;
      border-radius: 1rem;
   }

   .menu-two .menu__img-wrapper{
      left: 1.5rem;
      transform: translateX(0);
   }

   .menu-two .menu__img-wrapper::before{
      all: unset;
   }

   .reservation__form-group{
      grid-template-columns: 1fr;
   }

   .gallery__container{
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
   }

   .scrollup{
      width: 50px;
      height: 50px;
      border-width: 4px;
   }

   .scrollup__icon{
      font-size: 1.5rem;
   }

}

/* For Small Devices */

@media screen and (max-width:576px) {

   .nav{
      height: calc(var(--header-height) + .5rem);
   }

   .nav__logo-img{
      width: 120px;
   }

   .nav__menu{
      width: 100%;
      padding-inline: 2rem;
   }

   .home{
      padding-block: 9rem 2.5rem;
   }

   :root{
      --biggest-font-size: 2.5rem;
      --bigger-font-size: 2rem;
      --h1-font-size: 1.75rem;
   }

   .services__img-wrapper{
      width: 120px;
      height: 120px;
   }

   .services__img{
      width: 60px;
   }

   .tab__btn::before{
      width: 12px;
      height: 12px;
   }

   .quality__list{
      grid-template-columns: 1fr;
      row-gap: 1.25rem;
   }

   .reservation__icon_wrapper{
      width: 60px;
      height: 60px;
   }

   .reservation__icon{
      width: 30px;
   }
}

@media screen and (max-width:450px) {
   .about__top{
      inset: 1rem;
   }

   .about__hover{
      padding-inline: 1.5rem;
   }

   .menu-one .menu__item{
      padding: 1.5rem;
      padding-top: 6rem;
      margin-top: 6rem;
      margin-left: 0;
      border-radius: 1rem;
   }

   .menu-one .menu__img-wrapper{
      width: 175px;
      height: 154px;
      top: -38%;
      left: 1.5rem;
      transform: translateY(0);
   }

   .tab__item{
      padding: 1.75rem;
   }

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