/* --- THEME VARIABLES SETUP --- */
  :root {
      /* Default Navy Theme (#162f6a) */
      --brand-50: #f0f9ff;
      --brand-100: #e0f2fe;
      --brand-600: #162f6a;
      /* User Specified Navy */
      --brand-800: #0e1e45;
      --brand-900: #0a1530;
  }

  /* Teal Theme */
  [data-theme="teal"] {
      --brand-50: #f0fdfd;
      --brand-100: #ccfbfb;
      --brand-600: #bdadeb;
      --brand-800: #4c1d95;
      --brand-900: #2e1065;
  }

  /* User Specific Theme (Replaces Brown) */
  [data-theme="brown"] {
      --brand-50: #f0fdfd;
      --brand-100: #cfefef;
      --brand-600: #76c3c3;
      --brand-800: #4a8f8f;
      --brand-900: #254e4e;
  }

  body {
      font-family: 'Outfit', 'Mukta Malar', sans-serif;
      transition: background-color 0.3s, color 0.3s;
  }

  /* Grayscale Mode */
  html.grayscale-mode {
      filter: grayscale(100%);
  }

  /* Theme Switcher Circles */
  .theme-circle {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      cursor: pointer;
      border: 2px solid rgba(255, 255, 255, 0.3);
      transition: transform 0.2s, border-color 0.2s;
  }

  .theme-circle:hover,
  .theme-circle.active {
      transform: scale(1.2);
      border-color: #fff;
      box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
  }

  /* Dropdown Animation */
  .nav-item .dropdown-menu {
      display: none;
      transform-origin: top;
      animation: scaleIn 0.2s ease-out forwards;
  }

  .nav-item:hover .dropdown-menu {
      display: block;
  }

  @keyframes scaleIn {
      from {
          opacity: 0;
          transform: scaleY(0.95);
      }

      to {
          opacity: 1;
          transform: scaleY(1);
      }
  }

  .fs-15 {
      font-size: 15px !important;
  }

  /* Marquee */
  .marquee-container {
      overflow: hidden;
      white-space: nowrap;
  }

  .marquee-content {
      display: inline-block;
      animation: scroll 25s linear infinite;
  }

  .marquee-container:hover .marquee-content {
      animation-play-state: paused;
  }

  @keyframes scroll {
      0% {
          transform: translateX(0);
      }

      100% {
          transform: translateX(-100%);
      }
  }

  @media (max-width: 768px) {
      .logo-width {
          width: 250px;
          height: 40px !important;
      }

      .sm-order-1 {
          order: 1 !important;

      }
  }

  @keyframes scrollUp {
      0% {
          transform: translateY(0%);
      }

      100% {
          transform: translateY(-50%);
      }
  }

  .vertical-scroll-container {
      animation: scrollUp 15s linear infinite;
  }

  .scroll-wrapper:hover .vertical-scroll-container {
      animation-play-state: paused;
  }

  .goog-te-banner-frame.skiptranslate {
      display: none !important;
  }

  iframe.skiptranslate {
      display: none !important;
  }

  body {
      top: 0px !important;
  }

  .goog-logo-link {
      display: none !important;
  }

  .goog-te-gadget {
      height: 0 !important;
      overflow: hidden;
  }

  /* ----- gallery style start ----  */

  .perspective-container {
      perspective: 1000px;
  }

  .flip-box-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.6s;
      transform-style: preserve-3d;
  }

  .group:hover .flip-box-inner {
      transform: rotateY(180deg);
  }

  /* Front & Back Common Styles */
  .flip-front,
  .flip-back {
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      /* Safari */
      border-radius: 0.75rem;
      overflow: hidden;
  }

  .flip-front {
      width: 100%;
      height: auto;
      z-index: 2;
  }

  /* BACK: Absolute position + SOLID COLOR */
  .flip-back {
      position: absolute;
      inset: 0;
      transform: rotateY(180deg);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      z-index: 1;
      background-color: #111827;
  }


  /* ---- gallery style end ----  */

  @media (max-width: 768px) {
      .md\:flex {
          display: none !important;
      }
  }

  @media (max-width: 1024px) {
      .lg\:flex {
          display: flex !important;
      }
  }

  @media (min-width: 1025px) {
      .cm-logo {
          display: flex !important;
      }
  }


  @media (max-width: 1024px) {
      .cm-logo {
          display: none !important;
      }
  }