html {
    scroll-behavior: smooth;
  }
    /*-----------------------------------FOR LANDING PAGE ONLY-----------------------------------*/

  * {margin: 0;padding: 0;box-sizing: border-box;}
  
  body, html {width: 100%;height: 100%;font-family: 'Arial', sans-serif;overflow: hidden; }
  
  /* Background Video */
    #bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;   /* instead of min-width */
  height: 100%;  /* instead of min-height */
  object-fit: cover; /* cover ensures no black borders */
  z-index: -2;
}

  
  /* Landing Section */
  #landing {position: fixed;width: 100%;height: 100%;background: transparent;display: flex;justify-content: center;align-items: center;z-index: 10;}
  
  #brand-name {font-size: 8rem;font-weight: bold;letter-spacing: 8px;font-family: 'Playfair+Display', serif; /* 👈 change this line */background: linear-gradient(45deg, #d4af37, #ffd700, #fff8dc, #b8860b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;animation: shine 3s linear infinite;transition: transform 2s ease, opacity 2s ease;background-clip: none;}
  /*media querry for landing page on small screens.*/
  @media screen and (max-width: 768px) {
    #brand-name {
      font-size: 4rem;
      letter-spacing: 2px;
    }
  }
  /* Gold shimmer animation */
  @keyframes shine {
    0% {
      background-position: 0% center;
    }
    100% {
      background-position: 200% center;
    }
  }
  /* -------------------------------------------------Homepage Section------------------------------------------------- */
  #homepage {display: none;background: transparent !important;color: #000000;height: 100vh;padding: 40px;}
  
  /* Zoom animation */
  .zoom-out {transform: scale(10);opacity: 0;}
  
  /* --- HOME PAGE---*/
  @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
  @import url('https://fonts.cdnfonts.com/css/ica-rubrik-black');
  @import url('https://fonts.cdnfonts.com/css/poppins');
  

  /* ----------------------------------------------------ANNOUNCEMENT BAR SETTINGS------------------------------------------*/

  .announcement-bar {position: fixed;top: 0;left: 0;width: 100%;background-color: #ffffff;color: #000000;font-size: 14px;padding: 1px 0;z-index: 1000;text-align: center;font-family: 'Poppins', sans-serif;overflow: hidden;font-weight: bold;}
  .rotating-text {position: relative;height: 24px; /* adjust to match font-size + padding */}
  .rotating-text span {position: absolute;left: 50%;transform: translateX(-50%);opacity: 0;animation: fadeInOut 16s infinite;}
  
  /* Each message is shown at a different part of the animation cycle */
  .rotating-text span:nth-child(1) {
    animation-delay: 0s;
  }
  .rotating-text span:nth-child(2) {
    animation-delay: 2s;
  }
  .rotating-text span:nth-child(3) {
    animation-delay: 4s;
  }
  .rotating-text span:nth-child(4) {
    animation-delay: 8s;
  }
 
  header{width: 1140px;max-width: 100%;/*margin-left: 14%;*/height: 10px;display: flex;align-items: center;position: relative;z-index: 1002;margin: auto;height: 50px;display: flex;}
header a{color: #ffffff;margin-right: 45px;margin-left: 35px;}

header a:hover {color: #f1b73a;text-decoration: underline;}
  .text-slider {display: flex;align-items: center;justify-content: center;gap: 15px;}
  .text-wrapper {overflow: hidden;width: 70%;height: 24px;position: relative;}
  .text-slide {position: absolute;width: 100%;text-align: center;opacity: 0;transition: opacity 0.5s ease-in-out;}
  .text-slide.active {opacity: 1;}
  
  .prev-btn,
  .next-btn {background: transparent;border: none;color: rgb(0, 0, 0);font-size: 20px;cursor: pointer;padding: 5px 10px;transition: transform 0.2s;}
  .prev-btn:hover,
  .next-btn:hover {transform: scale(1.2);}
   
  /* -----------------------------------------------------------TIARA Heading Styling-------------------------------------------- */
  .tiara-heading {font-size: 150px;font-weight: 900;font-family: 'Georgia', serif;background: linear-gradient(135deg,  #5c4400 0%,  #a87e00 40%,  #8a6f1a 70%,  #5c4400 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;text-align: center;z-index: 2;transform: translateZ(0);text-shadow: none; /* Removed blur */background-clip: none;}
  
  /* ---------------------------------------------------------Centering the "TIARA" text--------------------------------------------- */
  .center-tiara {position: absolute;top: 35%;left: 50%;transform: translate(-50%, -50%);z-index: 1; /* text is behind the rotating images */pointer-events: none;}
  
  /* ---------------------------------------------------------Banner and slider settings---------------------------------------------- */
  .banner {width: 100%;height: 100vh;text-align: center;overflow: hidden;position: relative;margin-top: 40px; /* Ensuring slider starts below the announcement bar */}
  
  /* Rotating Slider Settings */
  .banner .slider {position: absolute;width: 200px;height: 250px;top: 10%;left: calc(50% - 100px);transform-style: preserve-3d;transform: perspective(1000px);animation: autoRun 40s linear infinite;z-index: 2; /* images in front of TIARA */}
  
  @keyframes autoRun {
      from {
          transform: perspective(1000px) rotateX(-16deg) rotateY(0deg);
      }
      to {
          transform: perspective(1000px) rotateX(-16deg) rotateY(360deg);
      }
  }
  
  /* Slider Item Rotation */
  .banner .slider .item {position: absolute;inset: 0;transform: rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))translateZ(550px);}
  /*BANNER SHAPE AND SIZE STYLING*/

  .banner .slider .item img {width: 100%;height: 100%;object-fit: cover;border-radius: 60% 40% 50% 70% / 60% 40% 70% 50%; /* Amoeba-like shape */transition: transform 0.3s ease, filter 0.3s ease;transform: scale(1);filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));}
  .banner .slider .item img:hover {transform: scale(1.1);filter: drop-shadow(0 6px 16px rgba(0,0,0,0.5));}
  
  /* Responsive adjustments */
  @media screen and (max-width: 1023px) {
      .banner .slider {
          width: 160px;
          height: 200px;
          left: calc(50% - 80px);
      }
      .banner .slider .item {
          transform: rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg)) translateZ(300px);
      }
  }
  @media screen and (max-width: 767px)
   {
      .banner .slider {
          width: 100px;
          height: 150px;
          left: calc(50% - 50px);
      }
      .banner .slider .item {
          transform: rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg)) translateZ(180px);
      }
      .banner .content h1 {
          font-size: 5em;
      }
   }

/*---------------------------------------------------------------FOOTER-wave animation------------------------------------------------*/

footer{position: relative;width: 100%;background:#ffffff;min-height: 100px;padding: 20px 50px;display: flex;justify-content: center;align-items:center;flex-direction: column;margin-top: 30%;}
footer .social_icon,
footer .menu{position: relative;display: flex;justify-content: center;align-items: center;margin: 10px 0;flex-wrap: wrap;}
footer .social_icon li,footer .menu li{list-style: none;}
footer .social_icon li a{font-size: 2em;color: #000000;margin: 0 10px;display: inline-block;transition: 0.5s;}
footer .social_icon li a:hover{transform: translateY(-20px);}
footer .menu li a{font-size: 0.8em;color: #000000;margin: 0 10px;display: inline-block;text-decoration: none;opacity: 1.0;}
footer .menu li a:hover{opacity: 1;color: #f1b73a;}
footer p{color: #000000;text-align: center;margin-top: 15px;margin-bottom: 10px;font-size: 0.8em;}
footer .wave{position: absolute;top: -100px;left: 0;width: 100%;height: 55%;background: url(images/wave-white.png);background-size: 1000px 100px;}
footer .wave#wave1{z-index: 1000;opacity: 1;bottom: 0;animation: animatewave 4s linear infinite;}
footer .wave#wave2{z-index: 999;opacity: 0.5;bottom: 10px;animation: animatewave_02 4s linear infinite;}
footer .wave#wave3{z-index: 1000;opacity: 0.2;bottom: 15px;animation:  animatewave 3s linear infinite;}
footer .wave#wave4{z-index: 999;opacity: 0.7;bottom: 20%;animation: animatewave_02 3s linear infinite;}
@keyframes animatewave
{
    0%
    {
        background-position-x: 1000px;
    }
    100%
    {
        background-position-x: 0px;
    }
}
@keyframes animatewave_02
{
    0%
    {
        background-position-x: 0px;
    }
    100%
    {
        background-position-x: 1000px;
    }
}

/* ===== HEADER NAVIGATION ===== */
header {width: 100%;/*background: rgba(0, 0, 0, 0.7);backdrop-filter: blur(5px);*/display: flex;justify-content: left;align-items: center;padding: 0px 0px;position: fixed;z-index: 1000;margin-right: 100px;}
.main-nav {display: flex;gap: 0px;align-items: left;}
.main-nav > a,
/* ===== DROPDOWN ===== */
.dropdown {
  position: relative;
}

/* Hidden by default */
.dropdown-3d {
  display: none; /* ✅ hides it initially */
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(5px);
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(190, 190, 190, 0.15);
  padding: 15px;
  min-width: 350px; 
  z-index: 999;

  /* Grid layout but stays hidden until hover */
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;

  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Show on hover */
.dropdown:hover .dropdown-3d {
  display: grid;
  opacity: 1;
  transform: translateY(0);
}

/* Child category items */
.dropdown-3d a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  padding: 10px;
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background: rgba(59, 59, 59, 0.7);
}

.dropdown-3d a img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 5px;
  transition: transform 0.3s ease;
}

.dropdown-3d a:hover {
  color: #ffd700;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.dropdown-3d a:hover img {
  transform: scale(1.05);
}

/* ===== SEARCH BAR STYLING ===== */
.search-bar-3d {
  display: none;
  position: absolute;
  top: 100%;
  right: 20px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  min-width: 300px;
  animation: searchFade 0.3s ease forwards;
  z-index: 1001;
}

.search-bar-3d form {
  display: flex;
  gap: 8px;
}

.search-bar-3d input {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 6px 10px;
  outline: none;
}

.search-bar-3d button {
  border-radius: 8px;
}
/* Hide search bar initially */
.search-container {
  display: none; /* completely hidden */
}

/* Show search bar when active (we'll toggle this via JS) */
.search-container.active {
  display: block;
}

@keyframes searchFade {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Navbar right-side icon buttons */
.icon-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    gap: 0px;
}
.icon-btn:hover {
    background: #f1b73a;
    color: #000;
    transform: scale(1.1);
}