/* ============================================================
   ROOT VARIABLES
============================================================ */
:root {
   --amber: #FE9927;
   --navy: #0F172A;
}

/* ============================================================
   BASE
============================================================ */
html {
   scroll-behavior: smooth;
}

body {
   font-family: 'Poppins', sans-serif;
   overflow-x: hidden;
}

/* ============================================================
   FONT UTILITIES
============================================================ */
.font-roboto {
   font-family: 'Roboto', sans-serif;
}

.font-karla {
   font-family: 'Karla', sans-serif;
}

.font-poppins {
   font-family: 'Poppins', sans-serif;
}

/* ============================================================
   COLOUR UTILITIES
============================================================ */
.amber {
   color: var(--amber);
}

.text-amber {
   color: var(--amber);
}

.bg-amber {
   background-color: var(--amber);
}

.bg-navy {
   background-color: var(--navy);
}

.border-amber {
   border-color: var(--amber);
}

/* ============================================================
   SECTION TITLE DECORATOR LINES
============================================================ */
.section-title-wrapper {
   position: relative;
   display: inline-block;
}

.section-title-wrapper::before,
.section-title-wrapper::after {
   content: '';
   position: absolute;
   top: 50%;
   width: 70px;
   height: 2px;
   background: var(--amber);
}

.section-title-wrapper::before {
   right: calc(100% + 12px);
}

.section-title-wrapper::after {
   left: calc(100% + 12px);
}

@media (max-width: 767px) {

   .section-title-wrapper::before,
   .section-title-wrapper::after {
      display: none;
   }

   /* =========================================
   JOURNEY ARROWS — MOBILE POSITION FIX
========================================= */
   #journey-prev-desk,
   #journey-next-desk {
      top: 62% !important;
      /* move arrows down */
      transform: translateY(-50%);
   }
}

/* ============================================================
   SERVICE CARDS
============================================================ */
.service-card {
   border-radius: 90px 0 90px 10px;
   background: #F7F7F7;
   box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.service-card-dark {
   border-radius: 90px 0 90px 10px;
   background: var(--navy);
   box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

/* ============================================================
   BEE BULLET
============================================================ */
.bee-bullet {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 33px;
   flex-shrink: 0;
}


/* ============================================================
   MEDIA CARD SHAPE
============================================================ */
.media-card {
   border-radius: 90px 0 90px 10px;
   height: 400px;
}

.media-card img {
   border-radius: 90px 0 90px 10px;
   height: 100%;
   width: 100%;
   object-fit: cover;
}

/* ============================================================
   JOURNEY CIRCLE
============================================================ */
.journey-circle {
   width: 138px;
   height: 138px;
   border-radius: 50%;
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 1.5rem;
   position: relative;
   transition: 0.3s ease;
}

/* ============================================================
   VENDOR CARD GRADIENT
============================================================ */
.vendor-card {
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(51, 79, 144, 0.20) 100%);
   border-radius: 8px;
}

/* ============================================================
   JOURNEY SLIDER (JS-powered)
============================================================ */
.journey-slider {
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
}

.journey-slide {
   scroll-snap-align: start;
   position: relative;
   z-index: 1;
}

/* Hide scrollbar for journey slider */
.no-scrollbar::-webkit-scrollbar {
   display: none;
}

.no-scrollbar {
   -ms-overflow-style: none;
   scrollbar-width: none;
}

/* ============================================================
   NAVBAR MOBILE MENU
============================================================ */
#mobile-menu {
   display: none;
}

#mobile-menu.open {
   display: flex;
}






/* ============================================================
   FLOATING AI CHAT BOT
============================================================ */
@keyframes float {

   0%,
   100% {
      transform: translateY(0px);
   }

   50% {
      transform: translateY(-8px);
   }
}

@keyframes pulse-ring {
   0% {
      transform: scale(1);
      opacity: 0.6;
   }

   100% {
      transform: scale(1.8);
      opacity: 0;
   }
}

@keyframes bounce-in {
   0% {
      transform: scale(0);
      opacity: 0;
   }

   60% {
      transform: scale(1.15);
      opacity: 1;
   }

   100% {
      transform: scale(1);
   }
}

.chat-bot-wrapper {
   animation: bounce-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.chat-bot-icon {
   animation: float 3s ease-in-out infinite;
   position: relative;
}

.chat-bot-icon::before {
   content: '';
   position: absolute;
   inset: 0;
   border-radius: 50%;
   background: #334F90;
   animation: pulse-ring 2s ease-out infinite;
   z-index: -1;
}

.chat-bot-label {
   opacity: 0;
   transform: translateY(6px);
   transition: opacity 0.25s ease, transform 0.25s ease;
}

.chat-bot-wrapper:hover .chat-bot-label {
   opacity: 1;
   transform: translateY(0);
}

.chat-bot-wrapper:hover .chat-bot-icon {
   animation-play-state: paused;
}

/* ============================================================
   NAVBAR ACTIVE LINK
============================================================ */
header nav ul li a {
   position: relative;
   padding-bottom: 4px;
}

header nav ul li a::after {
   content: '';
   position: absolute;
   bottom: -4px;
   left: 0;
   width: 0%;
   height: 3px;
   background: #FE9927;
   border-radius: 4px;
   transition: width 0.3s ease;
}

header nav ul li a.nav-active,
header nav ul li a:hover {
   color: #FE9927;
   font-weight: 600;
}

header nav ul li a.nav-active {
   color: #FE9927;
   font-weight: 600;
}

header nav ul li a.nav-active::after {
   width: 100%;
}

header nav ul li a:hover::after {
   width: 100%;
}

#media-slider {
   cursor: grab;
   height: 500px;
}

#media-slider.cursor-grabbing {
   cursor: grabbing;
}

/* ============================================================
   BENEFITS SECTION — MOBILE RESPONSIVE
============================================================ */
@media (max-width: 767px) {

   #benefits {
      padding: 48px 20px;
   }

   /* Stack the three columns vertically */
   #benefits .flex.flex-col.lg\\:flex-row {
      flex-direction: column;
      align-items: center;
      gap: 32px;
   }

   /* Left and right lists take full width */
   #benefits ul {
      width: fit-content;
      /* shrink list to content */
      margin: 0 auto;
      /* center entire list */
      align-items: flex-start;
      /* keep left alignment internally */
      gap: 16px;
   }

   /* Center icon: shrink it a bit */
   #benefits .lg\\:w-1\\.flex.justify-center img {
      width: 120px;
   }

   /* List items: keep them left-aligned and readable */

   #benefits li {
      display: flex;
      align-items: center;
      gap: 10px;

      justify-content: flex-start;
      /* IMPORTANT */
      text-align: left;

      font-size: 16px;
   }


   /* Heading spacing */
   #benefits .text-center.mb-14 {
      margin-bottom: 32px;
   }

   #benefits h2 {
      font-size: 28px;
   }

   #media-slider {
      height: 400px;
      /* ↓ reduce overall section height */
   }

   .media-card {
      height: 310px;
      /* ↓ smaller cards */
   }

   .media-card img {
      height: 100%;
      object-fit: cover;
   }
}

/* MOBILE NAV LOGO SHIFT LEFT */
@media (max-width: 767px) {
   header nav {
      position: relative;
   }

   #hamburger-btn {
      margin-left: -8px;
   }

   header nav a[href="#"] {
      margin-left: -14px;
      padding-left: 7px;
   }
}

/* ============================================================
   JOURNEY SECTION — MOBILE RESPONSIVE
============================================================ */
@media (max-width: 767px) {

   #journey {
      padding: 48px 16px;
   }

   #journey h2 {
      font-size: 22px;
      line-height: 1.35;
   }

   #journey .text-center.mb-16 {
      margin-bottom: 32px;
   }

   #journey-slider {
      padding: 0 0 16px;
      gap: 16px;
   }

   .journey-slide {
      width: 180px !important;
   }

   .journey-circle {
      width: 110px;
      height: 110px;
   }

   .journey-circle img {
      width: 48px;
      height: 48px;
   }

   .journey-slide p:first-of-type {
      font-size: 15px;
   }

   .journey-slide p:last-of-type {
      font-size: 12px;
   }

   /* Arrow row: push down with top margin, align left/right */
   #journey .flex.justify-between.mb-4 {
      margin-bottom: 20px;
      padding: 0 4px;
   }

   /* Prevent the absolute desktop buttons bleeding through on mobile */
   #journey-prev-desk,
   #journey-next-desk {
      display: none !important;
   }
}


/* ============================================================
   JOURNEY HOVER EFFECT
============================================================ */

#journey {
   overflow: visible;
}

#journey .relative {
   overflow: visible;
}

/* ============================================================
   JOURNEY FLOATING POPUP (fixed layer, above all)
============================================================ */
#journey-floating-box {
   position: fixed;
   width: 240px;
   background: #FFF2E4;
   border-radius: 18px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
   z-index: 999999;
   display: none;
   pointer-events: auto;
}

#journey-floating-box .hover-header {
   background: #ffffff;
   padding: 10px 14px;
   font-weight: 600;
   font-size: 14px;
   border-bottom: 1px solid #FE9927;
   border-radius: 18px 18px 0 0;
}

#journey-floating-box ul {
   padding: 12px 16px;
   font-size: 12px;
   color: #000;
   display: flex;
   flex-direction: column;
   gap: 6px;
   list-style: disc;
   padding-left: 28px;
}

#journey-floating-box .journey-btn */ {
   display: block;
   margin: 14px;
   padding: 10px;
   background: #FE9927;
   color: #0F172A;
   border-radius: 8px;
   font-weight: 600;
   text-decoration: none;
   text-align: center;
}

/* .relative {
   height: 350px;
} */

.journey-item {
   position: relative;
   cursor: pointer;
   z-index: 1;
}

.journey-hover-box {
   position: absolute;
   top: 180px;
   left: 50%;
   transform: translateX(-50%);
   width: 240px;
   background: #FFF2E4;
   border-radius: 18px;
   box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
   display: none !important;
   z-index: 999;
}

.journey-item.active .journey-hover-box {
   display: block;
}

.journey-btn {
   display: block;
   margin: 14px;
   /* padding: 10px;
   background: #FE9927; */
   color: #0F172A;
   font-weight: 600;
   text-decoration: none;
   text-align: end;
}

/* Header */
.journey-hover-box .hover-header {
   background: #ffffff;
   padding: 10px 14px;
   font-weight: 600;
   font-size: 14px;
   border-bottom: 1px solid #FE9927;
}


.journey-hover-msg {
   position: absolute;
   bottom: -28px;
   left: 50%;
   transform: translateX(-50%);
   font-size: 12px;
   color: #FE9927;
   white-space: nowrap;
   opacity: 0;
   transition: 0.3s ease;
   pointer-events: none;
}

/* List */
.journey-hover-box ul {
   padding: 12px 16px;
   font-size: 12px;
   color: #000;
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.journey-item:hover .journey-hover-msg {
   opacity: 1;
}


/* Smooth scale effect */
.journey-item:hover .journey-circle {
   transform: scale(1.05);
}

#journey-prev-desk,
#journey-next-desk,
#journey-prev,
#journey-next {
   z-index: 20;
}

#journey-dots img {
   opacity: 0.7;
}

#journey-dots img.scale-110 {
   opacity: 1;
}

@media (max-width: 767px) {
   .journey-hover-box {
      display: none !important;
   }

   /* Hide hover message on mobile — replaced with static text */
   .journey-hover-msg {
      display: none !important;
   }

   /* Static "Click to know more" label always visible under circle */
   .journey-circle::after {
      content: 'Click to know more';
      position: absolute;
      bottom: -24px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 11px;
      color: #FE9927;
      white-space: nowrap;
      font-family: 'Poppins', sans-serif;
   }
}

/* ================= CHATBOT RESPONSIVE ================= */
#chat-box {
   max-width: 100%;
   height: calc(100vh - 80px);
}

/* Mobile */
@media (max-width: 640px) {

   #chat-box {
      width: 100% !important;
      height: 100vh !important;
      bottom: 0 !important;
      right: 0 !important;
      border-radius: 0 !important;
   }

   #chat-messages {
      font-size: 13px;
      padding: 10px;
   }

   #chat-input {
      font-size: 14px;
      padding: 10px;
   }

   #send-btn {
      padding: 10px 14px;
   }

   /* Suggestions scroll horizontally */
   #chat-suggestions {
      display: flex;
      flex-direction: column;
      gap: 8px;

      height: 120px;
      overflow-y: auto;
      flex-shrink: 0;
      scrollbar-width: none;
      /* Firefox */
   }

   #chat-suggestions::-webkit-scrollbar {
      display: none;
      /* Chrome */
   }

   #chat-suggestions button {
      flex: 0 0 auto;
      font-size: 12px;
      padding: 6px 10px;
   }
}


#journey-tooltip {
   position: fixed;
   top: 0;
   left: 0;
   width: 240px;

   background: #FFF2E4;
   border-radius: 20px 10px 30px 10px;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);

   opacity: 0;
   pointer-events: none;
   transition: opacity 0.2s ease;

   z-index: 999999;
   /* ABOVE EVERYTHING */
}

/* keep journey cards from clipping any floating tooltip content */
.journey-slide,
.journey-item,
#journey {
   overflow: visible;
}

/* header */
#journey-tooltip .hover-header {
   background: #fff;
   padding: 10px 14px;
   font-weight: 600;
   font-size: 14px;
   border-bottom: 1px solid #FE9927;
}

/* list */
#journey-tooltip ul {
   padding: 12px 16px;
   font-size: 12px;
   color: #000;
   display: flex;
   flex-direction: column;
   gap: 6px;
}



/* ============================================================
   MEDIA ZIG-ZAG LAYOUT
============================================================ */

#media-slider {
   align-items: center;
   /* important */
}

/* Alternate up-down pattern */
#media-slider .media-card:nth-child(odd) {
   transform: translateY(-40px);
}

#media-slider .media-card:nth-child(even) {
   transform: translateY(40px);
}


/* Contact section Responsive */
@media (max-width: 767px) {
   #contact img {
      width: 100%;
      height: auto;
      object-fit: cover;
   }
}


.modal-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.6);
   display: none;
   align-items: center;
   justify-content: center;
   z-index: 999;
}

.modal-overlay.active {
   display: flex;
}

.modal-box {
   background: white;
   padding: 30px;
   border-radius: 16px;
   text-align: center;
   width: 300px;
   position: relative;
   animation: popup 0.3s ease;
}

@keyframes popup {
   from {
      transform: scale(0.8);
      opacity: 0;
   }

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

.modal-buttons {
   display: flex;
   flex-direction: column;
   gap: 12px;
   margin-top: 20px;
}

.store-btn {
   padding: 12px;
   border-radius: 10px;
   font-weight: 600;
   text-decoration: none;
   display: block;
}

.play {
   background: #34a853;
   color: white;
}

.apple {
   background: #000;
   color: white;
}

#close-modal {
   position: absolute;
   top: 10px;
   right: 12px;
   border: none;
   background: none;
   font-size: 18px;
   cursor: pointer;
}