/* =============== Google Fonts ================ */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Satisfy&display=swap');

@import url('https://fonts.cdnfonts.com/css/poppins');

/* ============= Define CSS Variables ============== */
:root {
  --header-height: 3.5rem;

  /* ------- Colors ------- */
  --primary-color: #ffba00;
  --secondary-color: #057738;
  --tertiary-color: #c03333;

  --scrlBar-color-1: #1e232e;
  --scrlBar-color-2: #213044;
  --scrlBar-color-3: #474e5f;

  --title-color: #fff;
  --text-color: #d7dbe4;
  --text-color-light: #afb5c0;

  --body-color: #0f0f0f;
  
  /* shadow */
  --big-bx-shadow: 0 4px 36px 9px rgba(0, 0, 0, 0.9);
  --small-bx-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  --element-shadow: drop-shadow(0 0 24px rgba(0, 0, 0, 0.4));
  --shadow1: -4px 8px 24px rgba(0, 0, 0, 0.5);
  --shadow2: 0 16px 30px rgba(0, 0, 0, 0.5);
  --shadow3: 0 16px 40px rgba(0, 0, 0, 0.5);
  --shadow4: 0 25px 50px rgba(0, 0, 0, 0.5);
  --shadow5: 0 24px 80px rgba(0, 0, 0, 0.5);
  
  --bgr1: rgba(38, 38, 38, 1); /* abu abu lembut */
  --bgr2: rgba(191, 191, 191, 1); /* putih lembut */
  --bgr3: rgba(255, 175, 218, 1); /* merah lembut */
  --bgr4: rgb(255, 213, 175, 1); /* kuning lembut */
  --bgr5: rgb(175, 255, 175, 1); /* hijau lembut */
  --bgr6: rgba(175, 175, 255, 1); /* biru lembut */
  
  /* warm */
  --warm1: rgba(254, 216, 7, 0.5); /* kuning hangat */
  --warm2: rgba(255, 168, 8, 0.5); /* kekuningan hangat */
  --warm3: rgba(254, 75, 8, 0.5); /* jingga hangat */
  --warm4: rgba(254, 9, 8, 0.5); /* merah hangat */
  --warm5: rgba(221, 26, 66, 0.5); /* pink hangat */
  
  /* cool */
  --cool1: rgba(50, 159, 91, 0.6); /* hijau 60%*/
  --cool2: rgba(43, 132, 76, 0.7); /* hijau 70%*/
  --cool3: rgba(35, 107, 60, 0.8); /* hijau 80%*/
  --cool4: rgba(26, 80, 46, 0.9); /* hijau 90%*/
  --cool5: rgba(21, 53, 32, 1); /* hijau 100%*/
  --cool6: rgba(100, 170, 255, 0.6);
  --cool7: rgba(100, 100, 255, 0.7);
  --cool8: rgba(73, 73, 197, 0.8);
  --cool9: rgba(48, 48, 97, 0.9);
  --cool10: rgba(21, 22, 53, 1);


  /* ------- Font and Typography ------- */
  /* 0.5rem = 8px | 1rem = 16px */

  --body-font: "Raleway", sans-serif;
  --second-font: "Satisfy", cursive;

  --biggest-font-size: 2.3rem;
  --bigger-font-size: 1.55rem;
  --big-font-size: 1.4rem;
  --h1-font-size: 1.4rem;
  --h2-font-size: 1.2rem;
  --h3-font-size: 1rem;
  --normal-font-size: 0.95rem;
  --small-font-size: 0.85rem;

  --font-regular: 400;
  --font-semi-bold: 500;
  --font-bold: 600;


  /* ------- z-index ------- */
  --z-tooltip: 10;
  --z-fixed: 100;
}

/* ========= Responsive Font and Typography ========== */
@media screen and (min-width: 1024px) {
  :root {
    --biggest-font-size: 3rem;
    --bigger-font-size: 2.3rem;
    --big-font-size: 2rem;
  }
}

@media screen and (min-width: 1150px) {
  :root {
    --biggest-font-size: 3.3rem;
    --bigger-font-size: 2.5rem;
    --big-font-size: 1.7rem;
    --h1-font-size: 1.7rem;
    --h2-font-size: 1.3rem;
    --h3-font-size: 1.1rem;
    --normal-font-size: 1.05rem;
    --small-font-size: 0.95rem;
  }
}


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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--body-color);
  color: var(--text-color);
}

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

span{
  color: var(--primary-color);
  font-size: var(--h1-font-size);
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

p{
  text-align: justify;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
textarea,
button {
  font-size: var(--normal-font-size);
  border: none;
  outline: none;
}


/* ============== Re-usable CSS Classes =============== */
.container {
  max-width: 1920px;
  margin-inline: 1.5rem;
}

.grid {
  display: grid;
  gap: 1.5rem;
}

.section {
  padding-block: 5rem 1rem;
}

.section-Title {
  text-align: center;
  font-size: var(--h1-font-size);
  font-weight: var(--font-bold);
  letter-spacing: 1px;
  margin-bottom: 3rem;
}

.main {
  overflow: hidden;
}



/* ============== Header & Nav =============== */
header{
    position: fixed;
    width: 100%;
    background-color: var(--body-color);
    z-index: var(--z-fixed);
}

nav{
    position: relative;
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-Logo{
  color: var(--title-color);
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  font-family: var(--second-font);
}

.nav-Logo img{
  width: 36px;
}

.nav-Logo div{
  font-size: var(--h2-font-size);
}

.nav-Close,
.nav-Toggle{
  display: flex;
  font-size: 1.5rem;
  color: var(--primary-color);
  cursor: pointer;
}

/* Navigation Bar for Mobile devices */
@media screen and (max-width: 1920px) {
  .nav-Menu{
    position: fixed;
    width: 100%;
    background-color: var(--body-color);
    top: -100%;
    left: 0;
    padding-block: 7.5rem 3.5rem;
    box-shadow: var(--big-bx-shadow);
    transition: top 0.5s ease-in-out;
  }  
}

.nav-List{
  text-align: center;
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}

.nav-Link{
  position: relative;
  color: var(--title-color);
  box-shadow: var(--big-bx-shadow);
  font-weight: var(--font-semi-bold);
  letter-spacing: 1px;
}

.nav-Link::after{
  content: '';
  position: absolute;
  width: 0%;
  height: 2px;
  background-color: var(--primary-color);
  left: 0;
  bottom: -0.3rem;
  transition: width 0.3s;
}

.nav-Link:hover::after{
  width: 60%;
}

.nav-Btn,
.nav-Close{
  position: absolute;
  top: 1rem;
}

.nav-Btn{
  left: 1.5rem;
}

.nav-Close{
  right: 1.5rem;
}
/* Active Link */

/* Show menu */
.show-Menu{
  top: 0;
}

/* Add Header Shadow */


/* ================ Button ================ */
.button{
  display: inline-flex;
  justify-content: center;
  background-color: var(--primary-color);
  color: var(--body-color);
  padding: 0.8rem 1.5rem;
  border-radius: 0.2rem;
  font-weight: var(--font-semi-bold);
  transition: scale 0.3s;
}

.button:hover{
  scale: 1.05;
}


/* ================ Home Section ================ */
.banner{
    width: 100%;
    height: 100vh;
    text-align: center;
    overflow: hidden;
    position: relative;
}
.banner .slider{
    position: absolute;
    width: 200px;
    height: 250px;
    top: 20%;
    left: calc(50% - 100px);
    transform-style: preserve-3d;
    transform: perspective(1000px) rotateX(0deg);
    z-index: 2;
}

.banner .slider .item{
    position: absolute;
    inset: 0 0 0 0;
    transform: 
        rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
        translateZ(450px);
}

@keyframes move {
    0% {
        transform: rotateY(-20deg) rotateX(-5deg);
    }
    25% {
        transform: rotateY(20deg) rotateX(-5deg);
    }
    50% {
        transform: rotateY(20deg) rotateX(5deg);
    }
    75% {
        transform: rotateY(-20deg) rotateX(5deg);
    }
    100% {
        transform: rotateY(-20deg) rotateX(-5deg);
    }
}

.banner .slider .item img{
    aspect-ratio: 9/14;
    width: 100%;
    max-width: 70vmin;
    top: 15%;
    object-fit: cover;
    animation: move 10s ease-in-out infinite;
    border-radius: 15px;
    transform-style: preserve-3d;
}

.wrapper {
    position: absolute; /* Posisi absolut agar menutupi seluruh kontainer */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    animation: move 10s ease-in-out infinite;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #f5f5f5;
    text-align: center;
    letter-spacing: 0.1em;
}

.wrapper h2 {
    font-size: 1.6rem; /* Ukuran font besar untuk judul */
    font-family: 'Poppins', sans-serif;
    margin: -10px 0 100px;
    text-transform: uppercase;
    transform: translateX(3px);
    white-space: nowrap;
    background-image: url('https://images2.imgbox.com/98/52/PPS7G0YW_o.jpg');
    background-size: cover;
    background-position: center;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.wrapper h2::before{
    content: attr(data-title);
    position: absolute;
    color: #ff671c;
    -webkit-text-fill-color: initial;
    mix-blend-mode: overlay;
    opacity: 1;
    filter: drop-shadow(0px 0px 20px rgba(0, 0 ,0 ,1));
    border-radius: 6vmin;
}

.wrapper .tagline {
    font-size: 0.75rem; 
    margin: 10px 0 0px;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    transform: translateX(3px);
    text-align: center;
}
#gambar-pop {
    position: absolute; /* Gunakan relative agar gambar tetap dalam alur flex */
    width: 100%;
    filter: drop-shadow(0px 0px 40px rgba(0,0,0,0.4));
    object-fit: contain;
    height: auto;
}



/* ================ About Section ================ */



/* ================ Menu Section ================ */



/* ================ Delivery Section ================ */



/* ================ Contact Section ================ */



/* ================ Footer ================ */



/* ================ Scroll Up ================ */

/* Show Scroll up */



/* ================ ScrollBar ================ */



/* ================ Break-points ================ */
/* for small devices */
@media screen and (max-width: 350px) {
  .banner{
    width: 100%;
    height: 100vh;
    text-align: center;
    overflow: hidden;
    position: relative;
}
.banner .slider{
    position: absolute;
    width: 180px;
    height: 230px;
    top: 6%;
    left: calc(50% - 100px);
    transform-style: preserve-3d;
    transform: perspective(1000px) rotateX(0deg);
    z-index: 2;
}

.banner .slider .item{
    position: absolute;
    inset: 0 0 0 0;
    transform: 
        rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
        translateZ(300px);
}

@keyframes move {
    0% {
        transform: rotateY(-20deg) rotateX(-5deg);
    }
    25% {
        transform: rotateY(20deg) rotateX(-5deg);
    }
    50% {
        transform: rotateY(20deg) rotateX(5deg);
    }
    75% {
        transform: rotateY(-20deg) rotateX(5deg);
    }
    100% {
        transform: rotateY(-20deg) rotateX(-5deg);
    }
}

.banner .slider .item img{
    aspect-ratio: 9/14;
    width: 100%;
    max-width: 70vmin;
    top: 15%;
    object-fit: cover;
    animation: move 10s ease-in-out infinite;
    border-radius: 15px;
    transform-style: preserve-3d;
}

.wrapper {
    position: absolute; /* Posisi absolut agar menutupi seluruh kontainer */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    animation: move 10s ease-in-out infinite;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #f5f5f5;
    text-align: center;
    letter-spacing: 0.1em;
}

.wrapper h2 {
    font-size: 1rem; /* Ukuran font besar untuk judul */
    font-family: 'Poppins', sans-serif;
    margin: -10px 0 100px;
    text-transform: uppercase;
    transform: translateX(3px);
    white-space: nowrap;
    background-image: url('https://images2.imgbox.com/98/52/PPS7G0YW_o.jpg');
    background-size: cover;
    background-position: center;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.wrapper h2::before{
    content: attr(data-title);
    position: absolute;
    color: #ff671c;
    -webkit-text-fill-color: initial;
    mix-blend-mode: overlay;
    opacity: 1;
    filter: drop-shadow(0px 0px 20px rgba(0, 0 ,0 ,1));
    border-radius: 6vmin;
}

.wrapper .tagline {
    font-size: 0.6rem; 
    margin: 10px 0 10px;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    transform: translateX(3px);
    text-align: center;
}
#gambar-pop {
    position: absolute; /* Gunakan relative agar gambar tetap dalam alur flex */
    width: 100%;
    filter: drop-shadow(0px 0px 40px rgba(0,0,0,0.4));
    object-fit: contain;
    height: auto;
}
}


/* for medium devices */
@media screen and (min-width: 540px) {
  .banner{
    width: 100%;
    height: 100vh;
    text-align: center;
    overflow: hidden;
    position: relative;
}
.banner .slider{
    position: absolute;
    width: 200px;
    height: 250px;
    top: 6%;
    left: calc(50% - 100px);
    transform-style: preserve-3d;
    transform: perspective(1000px) rotateX(0deg);
    z-index: 2;
}

.banner .slider .item{
    position: absolute;
    inset: 0 0 0 0;
    transform: 
        rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
        translateZ(450px);
}

@keyframes move {
    0% {
        transform: rotateY(-20deg) rotateX(-5deg);
    }
    25% {
        transform: rotateY(20deg) rotateX(-5deg);
    }
    50% {
        transform: rotateY(20deg) rotateX(5deg);
    }
    75% {
        transform: rotateY(-20deg) rotateX(5deg);
    }
    100% {
        transform: rotateY(-20deg) rotateX(-5deg);
    }
}

.banner .slider .item img{
    aspect-ratio: 9/14;
    width: 100%;
    max-width: 70vmin;
    top: 15%;
    object-fit: cover;
    animation: move 10s ease-in-out infinite;
    border-radius: 15px;
    transform-style: preserve-3d;
}

.wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    animation: move 10s ease-in-out infinite;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #f5f5f5;
    text-align: center;
    letter-spacing: 0.1em;
}

.wrapper h2 {
    font-size: 1.2rem;
    font-family: 'Poppins', sans-serif;
    margin: -10px 0 100px;
    text-transform: uppercase;
    transform: translateX(3px);
    white-space: nowrap;
    background-image: url('https://images2.imgbox.com/98/52/PPS7G0YW_o.jpg');
    background-size: cover;
    background-position: center;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.wrapper h2::before{
    content: attr(data-title);
    position: absolute;
    color: #ff671c;
    -webkit-text-fill-color: initial;
    mix-blend-mode: overlay;
    opacity: 1;
    filter: drop-shadow(0px 0px 20px rgba(0, 0 ,0 ,1));
    border-radius: 6vmin;
}

.wrapper .tagline {
    font-size: 0.7rem; 
    margin: 10px 0 10px;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    transform: translateX(3px);
    text-align: center;
}
#gambar-pop {
    position: absolute; /* Gunakan relative agar gambar tetap dalam alur flex */
    width: 100%;
    filter: drop-shadow(0px 0px 40px rgba(0,0,0,0.4));
    object-fit: contain;
    height: auto;
}
}

@media screen and (min-width: 768px) {
.banner{
    width: 100%;
    height: 100vh;
    text-align: center;
    overflow: hidden;
    position: relative;
}
.banner .slider{
    position: absolute;
    width: 200px;
    height: 250px;
    top: 6%;
    left: calc(50% - 100px);
    transform-style: preserve-3d;
    transform: perspective(1000px) rotateX(0deg);
    z-index: 2;
}

.banner .slider .item{
    position: absolute;
    inset: 0 0 0 0;
    transform: 
        rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
        translateZ(450px);
}

@keyframes move {
    0% {
        transform: rotateY(-20deg) rotateX(-5deg);
    }
    25% {
        transform: rotateY(20deg) rotateX(-5deg);
    }
    50% {
        transform: rotateY(20deg) rotateX(5deg);
    }
    75% {
        transform: rotateY(-20deg) rotateX(5deg);
    }
    100% {
        transform: rotateY(-20deg) rotateX(-5deg);
    }
}

.banner .slider .item img{
    aspect-ratio: 9/14;
    width: 100%;
    max-width: 70vmin;
    top: 15%;
    object-fit: cover;
    animation: move 10s ease-in-out infinite;
    border-radius: 15px;
    transform-style: preserve-3d;
}

.wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    animation: move 10s ease-in-out infinite;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #f5f5f5;
    text-align: center;
    letter-spacing: 0.1em;
}

.wrapper h2 {
    font-size: 1.2rem;
    font-family: 'Poppins', sans-serif;
    margin: -10px 0 100px;
    text-transform: uppercase;
    transform: translateX(3px);
    white-space: nowrap;
    background-image: url('https://images2.imgbox.com/98/52/PPS7G0YW_o.jpg');
    background-size: cover;
    background-position: center;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.wrapper h2::before{
    content: attr(data-title);
    position: absolute;
    color: #ff671c;
    -webkit-text-fill-color: initial;
    mix-blend-mode: overlay;
    opacity: 1;
    filter: drop-shadow(0px 0px 20px rgba(0, 0 ,0 ,1));
    border-radius: 6vmin;
}

.wrapper .tagline {
    font-size: 0.7rem; 
    margin: 10px 0 10px;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    transform: translateX(3px);
    text-align: center;
}
#gambar-pop {
    position: absolute; /* Gunakan relative agar gambar tetap dalam alur flex */
    width: 100%;
    filter: drop-shadow(0px 0px 40px rgba(0,0,0,0.4));
    object-fit: contain;
    height: auto;
}
}


/* for large devices */
@media screen and (min-width: 1024px) {
  
}

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