/* HERO SECTION */
/* ===========================
   HERO SECTION (Desktop)
=========================== */
.hero-section {
  display: flex;
  align-items: center;
  border-radius: 10px;
  height: 500px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 30px;
  box-sizing: border-box;

  background-image: url(assets/Gemini_Generated_Image_xtb06xxtb06xxtb0.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}


.text-section {
  position:relative;
  max-width: 50%;
  top: 50%;
  left: 75px;
  transform: translateY(-50%); /* ✅ vertically center text */
  z-index: 1;
}

.hero-section .text-section p {
  color: rgb(36, 15, 2);
  font-family: 'Quintessential', serif;
  font-weight: bolder;
  font-size: 1.5rem;
  -webkit-text-stroke: 0.05px black;
  margin-bottom: 10px;
}

.hero-section .text-section h1 {
  color: rgb(255, 255, 255);
  font-size: 7rem;
  font-family: serif;
  line-height: 1.1;
  margin: 0;
}

.hero-buttons {
  margin-top: 20px;
}

.hero-buttons button {
  padding: 10px 25px;
  margin: 10px;
  border-radius: 90px;
  border: none;
  color: gold;
  cursor: pointer;
  background-color: black;
  font-family: serif;
  font-size: 1rem;
  font-weight: bold;
  transition: 0.3s ease;
}

.hero-buttons button:hover {
  background-color: rgb(253, 199, 5);
  color: black;
  transform: scale(1.05);
}
.hero-section-mobile{
  background-image: url(assets/Untitled\ design.png);
  background-size: cover;
  height: 800px;
}
.hero-section-mobile h1{
  font-size:15vw;
  font-family:serif;
}
.hero-section-mobile p{
  font-family: Quintessential serif;
  font-size: 5vw;
  color: rgb(248, 248, 248);
}
.hero-section-mobile .text-section-mobile{
  position: relative;
  top: 150px;

}
/*text shimmer effect*/
.shimmer{
  display: inline-block;
  font-size: 72px;
  font-weight: 800;
  letter-spacing: .5px;
  color: transparent;                     /* show background through letters */
  -webkit-text-fill-color: transparent;   /* Safari */
  -webkit-background-clip: text;
  background-clip: text;

  /* 1) top layer = beam (narrow), 2) bottom layer = gold fill */
  background-image:
    linear-gradient(120deg,
      rgba(255,255,255,0.0) 0%,
      rgba(255,255,255,0.95) 50%,
      rgba(255,255,255,0.0) 100%),
    linear-gradient(90deg, #daab13 0%, #ffd700 50%, #d3b260 100%);

  /* beam is narrow, gold fills whole text */
  background-size: 40% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;

  /* start the beam off the left so it sweeps across */
  background-position: -40% 0, 0 0;

  /* animate only the beam (first background layer) */
  animation: beamMove 7s linear infinite;
}

/* move the beam from left to right */
@keyframes beamMove {
  0%   { background-position: -40% 0, 0 0; }
  100% { background-position: 140% 0, 0 0; }
}


.hero-image{
    max-width: 800px;
    height: fit-content;
}
.hero-image img{
    position: absolute;
    right: 125px;
    max-width:48vh;
    overflow: hidden;
    bottom:0px;
}
@font-face {
    font-family:quintessentail;
    src: url(assets/fonts/Quintessential-Regular.ttf);
}

/*carousel*/

.carousel-section {
  max-width: 1350px;
  width: 100%;
  padding: 20px;
 background-color: rgb(234, 227, 189);
  margin: 10px auto;
  border-radius: 30px;
  overflow: hidden;
}

.carousel-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.carousel-container h2 {
  color: gold;
  font-size: 50px;
  margin-bottom: 10px;
  font-family: serif;
}

.carousel-container p {
  color: white;
  margin-bottom: 20px;
  font-family: 'Quintessential', serif;
  font-size: 30px;
}

/* Wrapper to hide overflow */
.carousel-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Track */
.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

/* Items */
.carousel-item {
  flex: 0 0 33.3333%; /* 3 per row on large screens */
  display: flex;
  justify-content: center;
}

.carousel-item img {
  width: 90%;
  border-radius: 10%;
  object-fit: cover;
  background-color: black;
  transition: transform 0.3s ease;
}

.carousel-item img:hover {
  transform: scale(1.05);
}

/* Buttons */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 30px;
  border-radius: 50%;
  z-index: 2;
  transition: background 0.3s ease;
}

.carousel-btn:hover {
  background-color: rgba(0,0,0,0.8);
}

.carousel-btn.prev {
  left: 10px;
}

.carousel-btn.next {
  right: 10px;
}

/* 🔸 Responsive */
@media (max-width: 1024px) {
  .carousel-item {
    flex: 0 0 50%; /* 2 per view */
  }

  .carousel-container h2 {
    font-size: 40px;
  }

  .carousel-container p {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .carousel-item {
    flex: 0 0 100%; /* 1 per view */
  }

  .carousel-container h2 {
    font-size: 32px;
  }

  .carousel-container p {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .carousel-container h2 {
    font-size: 24px;
  }

  .carousel-container p {
    font-size: 18px;
  }
}


/*place order section*/
.place-order-card p{
  font-size: 15vw;
  font-family:Quintessential;
  font-weight: bolder;
  color:gold;
  -webkit-text-stroke:( 0.5rem gold);
  margin-bottom: 30px;
}
.place-order-section{
  background-image: url(assets/wang-yan-QY0qR938qL8-unsplash.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  height:fit-content;
  min-height: 180px;
  min-width: fit-content;
  margin: 0 auto;
  position: relative;
}
.place-order-section button{
  position:relative;
  bottom: 2px;
  background-color: black;
  color: gold;
  display: block;
  min-width: 100%;
  border-radius: 90px;
  font-family: serif;
  font-size: 7vw;
  border: none;
  cursor: pointer;
}
.place-order-section button:hover{
  background-color: gold;
  color: black;
}


/*socails-section*/
.socails-flex{
  display: flex;
  flex-direction:row;
  align-items: center;
  width:70%;
  justify-content: space-evenly;
 
}
.socail-flex-item{
  max-width: 400px;
  width:fit-content;
}
.socail-flex-item img{
  margin: 0 auto;
  display: block;
}
.socail-section{
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.socail-flex-item p{
  margin: 0 auto;
  color: black;
  text-align: center;
  display: inline;
  font-size:20px;
}
.socail-flex-item a {
  display: flex;
  flex-direction: column;   
  align-items: center;      
  text-decoration: none;   
  color: inherit;           
}




.location-section {
  padding: 60px 20px;
  background-color: #f9f9f9;
  text-align: center;
}

.location-section h2 {
  font-size: 2rem;
  margin-bottom: 10px;
}

.location-section p {
  font-size: 1rem;
  margin-bottom: 25px;
  color: #555;
}

.map-container {
  max-width: 900px;
  margin: 0 auto;
  border: 2px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
}






@media (max-width: 992px) {


  /*hero section*/
  .hero-section{
    display: none;
  }
  .location-section p {
  font-size: 4vw;
  width: 90%;
  margin-bottom: 25px;
  color: #555;
}
.socail-flex-item p{
  margin: 0 auto;
  color: black;
  text-align: center;
  display: inline;
  font-size: 3vw;
}
}
/* Mobile */
@media (max-width: 600px) {

}
@media(min-width:992px){
.hero-section-mobile{
  display: none;
}
}
@media(max-width:350px){
.hero-section-mobile{
  background-position: center;
}
.hero-section-mobile p{
  font-size: 5vh;
}
.socail-section{
  justify-content: space-between;
}
.socail-section a{
  justify-content: space-between;
}
.socails-flex{
  justify-content: space-between;
}
}