@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Space+Grotesk:wght@300..700&display=swap');
/* Root */
:root {
    --primary-color: hsl(23, 100%, 46%);
    --secondary-color: hsl(23, 100%, 65%);
    --accent-color: hsla(43, 56%, 91%, 0.2);
    --background-color: hsl(0, 0%, 15%);
    --text-color: hsl(43, 56%, 91%);
    --text-primary-color: hsl(0, 0%, 15%);
    --text-secondary-color: hsl(43, 56%, 70%);
    --box-shadow: rgba(0, 0, 0, 0.1);
    --box-shadow-hover: rgba(0, 0, 0, 0.2);
}
html{
    scroll-behavior: smooth;
}
/* Reset */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Figtree,sans-serif;
}
body{
    background-color: var(--background-color);
    color: var(--text-color);
    font-size: 16px;
    line-height: 1.5;
}

h1,h2,h3,h4,h5,h6{
    font-family: "Space Grotesk";
}

img{
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: .25rem;
}

nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    background-color: var(--accent-color);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px var(--box-shadow);
    position: sticky;
    width: 100%;
    top: 0;
    z-index: 10;
    img{
      height: 80px;
    }
    i{
        color: var(--text-primary-color);
        font-size: 1.5rem;
        cursor: pointer;
    }
}
.menu{
    position: absolute;
    width: 100%;
    top: 5rem;
    left: 0;
    padding-block: 1rem;
    /* padding: 1rem; */
    display: gird;
    gap: 1rem;
    background-color: var(--primary-color);
    ul{
      margin: 0;
      padding: 0;
      padding-inline: 2rem;
    }
    li{
        list-style: none;
        padding: .5rem;
        border-radius: 0.25rem;
        transition: background-color 0.3s ease;
        &:hover{
            background-color: var(--secondary-color);
        }
    }
    a{
        display: inline-block;
        width: 100%;
        color: var(--text-primary-color);
        text-decoration: none;
        font-weight: 500;
        transition: color 0.3s ease;
        &:hover{
            color: var(--text-color);
        }
    }
}

/* Hero section mobile */
.hero-mobile{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-color);
    height: 60vh;
    background-image: url('/assets/images/bg-mobile.jpg');
    background-size: cover;
    background-position: center;
}
.hero-mobile .tag{
    color: var(--text-secondary-color);
    margin-bottom: 1rem;
}
.btn-custom{
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: var(--primary-color);
    color: var(--text-color);
    border-radius: 0.25rem;
    text-decoration: none;
}
.btn-custom:hover{
    background-color: var(--secondary-color);
}

.process{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 2rem 1rem;
    h1{
        grid-column: 1 / -1;
    }
    div{
      background-color: var(--primary-color);
      padding: .5rem;
      border-radius: .25rem;
    }
}

.menu-list{
    background-color: var(--primary-color);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 2rem 1rem;
    h1{
        grid-column: 1 / -1;
    }
}
.float-right-top{
  position: absolute;
  width: 100px;
  right: 0;
  top: -1rem;
}
.float-left-bottom{
  position: absolute;
  width: 100px;
  left: 0;
  bottom: -3rem;
}
.float-background-menu{
  position: absolute;
  inset: 0;
}

.about{
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.testimonials{
  padding: 2rem 1rem;
  .owl-carousel{
    margin-top: 2rem;
  }
  .item{
    background-color: var(--accent-color);
    padding: 2rem 1rem;
    border-radius: 0.25rem;
    position: relative;
    min-height: 13rem;
  }
  .item::before {
    content: "\f262";
    position: absolute;
    top: -1rem;
    right: 1rem;
    font-family: "bootstrap-icons"; /* must match */
    font-style: normal;
    font-weight: normal;
    font-size: 2rem;
    color: var(--primary-color);
    pointer-events: none;
  }
}

.owl-dots .owl-dot{
  background-color: var(--secondary-color) !important;
  width: 10px !important;
  height: 5px;
  border-radius: 5px ;
  margin-right: 2px;
  transition: all 0.3s ease;
}
.owl-dots .owl-dot.active{
  background-color: var(--primary-color) !important;
  width: 20px !important;
}
.special-foods{
  padding: 1rem;
   > div{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
  }
  .ccard{
    border: 1px solid var(--secondary-color);
    border-radius: 0.25rem;
    img{
      aspect-ratio: 4/3;
      object-fit: cover;
    }
    div{
      padding: 1rem;
    }
  }
}
.packages{
  padding: 1rem;
  .item{
    background-color: var(--primary-color);
    padding: 3rem 1rem;
    border-radius: 0.25rem;
    position: relative;
    min-height: 13rem;
    h3{
      margin-bottom: 1rem;
    }
    .price{
      font-size: 2.5rem;
      font-weight: bold;
      color: var(--text-secondary-color);
      position: absolute;
      right: -3rem;
      bottom: 2rem;
      rotate: 270deg;
      background-color: var(--secondary-color);
      padding-inline: 3rem;
    }
    .btn-custom{
      background-color: var(--background-color);
    }
  }
}
.contact{
  padding: 1rem;
}
.contact-info{
  padding-bottom: 1rem;
}
.form-control{
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--secondary-color);
  border-radius: 0.25rem;
  background-color: var(--text-primary-color);
  color: var(--text-secondary-color);
  font-size: 1rem;
}
.form-control::placeholder{
  color: var(--text-secondary-color);
  opacity: 0.8;
}
.form-control:focus{
  border-color: var(--primary-color);
  background-color: var(--text-primary-color);
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
  color: var(--text-color);
}
.contact-form{
  padding-top: 2rem;
  border-top: 1px solid var(--secondary-color);
}
footer{
  padding: 1rem;
  background-color: var(--primary-color);
  text-align: center;
  color: var(--text-color);
  .social-icons{
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
  }
  a{
    color: var(--text-color);
    text-decoration: none;
    &:hover{
      text-decoration: underline;
    }
  }
}
.quick-buttons{
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 10;
  ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  li:nth-child(1){
    background-color: hsla(120, 100%, 62%, 0.6);
  }
  li:nth-child(2){
    /* background-color: hsla(224, 100%, 50%, 0.6); */
    background-color: hsla(0, 0%, 0%, 0.6);
  }
  li:nth-child(3){
    background-color: hsla(0, 0%, 0%, 0.6);
  }
  li{
    backdrop-filter: blur(15px);
    border-radius: 50%;
    font-size: 1.3rem;
    padding: .8rem 1.12rem;
    box-shadow: 0 2px 10px var(--box-shadow);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    &:hover{
      box-shadow: 0 4px 20px var(--box-shadow-hover);
    }
    a{
      color: var(--text-color);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
  }
}
/* Animestia */
.tilt-in-fwd-tr {
	-webkit-animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2025-5-28 1:33:47
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tilt-in-fwd-tr
 * ----------------------------------------
 */
@-webkit-keyframes tilt-in-fwd-tr {
  0% {
    -webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
            transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
            transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}
@keyframes tilt-in-fwd-tr {
  0% {
    -webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
            transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
            transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}

.tilt-in-top-1 {
	-webkit-animation: tilt-in-top-1 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: tilt-in-top-1 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2025-5-28 1:41:16
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tilt-in-top-1
 * ----------------------------------------
 */
@-webkit-keyframes tilt-in-top-1 {
  0% {
    -webkit-transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
            transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0deg) translateY(0) skewY(0deg);
            transform: rotateY(0deg) translateY(0) skewY(0deg);
    opacity: 1;
  }
}
@keyframes tilt-in-top-1 {
  0% {
    -webkit-transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
            transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0deg) translateY(0) skewY(0deg);
            transform: rotateY(0deg) translateY(0) skewY(0deg);
    opacity: 1;
  }
}

.swing-in-top-fwd {
	-webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
	        animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2025-5-28 1:43:15
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation swing-in-top-fwd
 * ----------------------------------------
 */
@-webkit-keyframes swing-in-top-fwd {
  0% {
    -webkit-transform: rotateX(-100deg);
            transform: rotateX(-100deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 1;
  }
}
@keyframes swing-in-top-fwd {
  0% {
    -webkit-transform: rotateX(-100deg);
            transform: rotateX(-100deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 1;
  }
}