body {
    padding-top: 70px; /* adjust this based on your navbar + tabs height */
  }
    html, body {
  overflow-x: hidden;
}

a {
  max-width: 100%;
  display: inline-flex; /* prevent block-stretch issues */
  flex-wrap: wrap;      /* allow wrapping if content is long */
}

:root {
    --primary-gradient: linear-gradient(90deg, #007bff, #00c6ff);
    --primary-color: #007bff;
    --text-color: #ffffff;
    --font-family: 'Segoe UI', sans-serif;

    /* Reduced padding for smaller buttons */
    --size-sm: 0.3em 0.8em;   /* smaller vertical and horizontal padding */
    --size-md: 0.5em 1.2em;
    --size-lg: 0.75em 1.5em;

    /* Smaller font sizes */
    --font-sm: 0.75rem;    /* reduced from 0.875rem */
    --font-md: 0.9rem;
    --font-lg: 1.1rem;
  }

  /* Base Button */
  .action-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family);
    font-weight: 500;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
  }

  .action-trigger:disabled {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
  }

  /* Size modifiers */
  .size-sm {
    padding: var(--size-sm);
    font-size: var(--font-sm);
    min-width: 70px; /* reduced from 90px */
  }

  .size-md {
    padding: var(--size-md);
    font-size: var(--font-md);
    min-width: 100px;
  }

  .size-lg {
    padding: var(--size-lg);
    font-size: var(--font-lg);
    min-width: 130px;
  }

  /* Shape modifiers */
  .shape-rounded { border-radius: 8px; }
  .shape-pill { border-radius: 50px; }
  .shape-square { border-radius: 0; }
  .shape-circle {
    border-radius: 50%;
    width: 50px; /* reduced from 60px */
    height: 50px; /* reduced from 60px */
    padding: 0;
    min-width: 0;
  }

  /* Style modifiers */
  .style-filled {
    background: var(--primary-gradient);
    color: var(--text-color);
  }

  .style-outline {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
  }

  .style-ghost {
    background: transparent;
    color: var(--primary-color);
  }

  /* Hover effects */
  .action-trigger:hover:not(:disabled) {
    transform: scale(1.04);
    opacity: 0.9;
  }

  /* Icon handling */
  .action-trigger .icon {
    display: inline-flex;
    margin-right: 0.4em;  /* slightly reduced */
    font-size: 0.9em;     /* make icon smaller relative to text */
  }

  .action-trigger.icon-only {
    padding: 0;
  }

  /* Responsive tweaks */
  @media (max-width: 768px) {
    .shape-circle {
      width: 40px;
      height: 40px;
    }
  }

  @media (max-width: 480px) {
    .action-trigger {
      display: block;
      width: 100%;
      box-sizing: border-box;
      margin-bottom: 1em;
    }
  }
  
  .action-trigger2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-weight: 500;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
  max-width: 100%;
  word-wrap: break-word;
  white-space: normal;
}

.action-trigger2:disabled {
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed;
}

/* Size modifiers */
.size-sm2 {
  padding: var(--size-sm);
  font-size: var(--font-sm);
  min-width: 70px;
  max-width: 100%;
}

.size-md2 {
  padding: var(--size-md);
  font-size: var(--font-md);
  min-width: 100px;
  max-width: 100%;
}

.size-lg2 {
  padding: var(--size-lg);
  font-size: var(--font-lg);
  min-width: 130px;
  max-width: 100%;
}
@keyframes slide-left {
  0% { opacity: 0; transform: translateX(-50px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes slide-right {
  0% { opacity: 0; transform: translateX(50px); }
  100% { opacity: 1; transform: translateX(0); }
}

.animate-left, .animate-right {
  opacity: 0;
}

.animate-left.active {
  animation: slide-left 1.2s ease-out forwards;
}

.animate-right.active {
  animation: slide-right 1.0s ease-out forwards;
}

/* Shape modifiers */
.shape-rounded2 { border-radius: 8px; }
.shape-pill2 { border-radius: 50px; }
.shape-square2 { border-radius: 0; }
.shape-circle2 {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  padding: 0;
  min-width: 0;
}

/* Style modifiers */
.style-filled2 {
  background: var(--primary-gradient);
  color: var(--text-color);
}

.style-outline2 {
  background: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

.style-ghost2 {
  background: transparent;
  color: var(--primary-color);
}

/* Hover effects */
.action-trigger2:hover:not(:disabled) {
  transform: scale(1.04);
  opacity: 0.9;
}

/* Icon handling */
.action-trigger2 .icon2 {
  display: inline-flex;
  margin-right: 0.4em;
  font-size: 0.9em;
}

.action-trigger2.icon-only2 {
  padding: 0;
}

/* Responsive tweaks */
@media (max-width: 1024px) {
  .action-trigger2 {
    font-size: clamp(0.85rem, 2vw, 1rem);
    padding: 0.6em 1em;
  }
}

@media (max-width: 768px) {
  .shape-circle2 {
    width: 40px;
    height: 40px;
  }

  .action-trigger2 {
    width: auto;
    max-width: 100%;
    font-size: clamp(0.8rem, 2.5vw, 0.95rem);
  }
}

@media (max-width: 480px) {
  .action-trigger2 {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 1em;
    text-align: center;
  }
}

.action-trigger3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-weight: 500;
  border: none;
  
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
  max-width: 100%;
  word-wrap: break-word;
  white-space: nowrap; /* keep text in one line */
}

.action-trigger3:disabled {
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed;
}

/* Size modifiers */
.size-sm3 {
  padding: var(--size-sm);
  font-size: var(--font-sm);
  min-width: 70px;
  max-width: 100%;
}

.size-md3 {
  padding: var(--size-md);
  font-size: var(--font-md);
  min-width: 100px;
  max-width: 100%;
}

.size-lg3 {
  padding: var(--size-lg);
  font-size: var(--font-lg);
  min-width: 130px;
  max-width: 100%;
}

/* Shape modifiers */
.shape-rounded3 { border-radius: 8px; }
.shape-pill3 { border-radius: 50px; }
.shape-square3 { border-radius: 0; }
.shape-circle3 {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  padding: 0;
  min-width: 0;
}

/* Style modifiers */
.style-filled3 {
  background: var(--primary-gradient);
  color: var(--text-color);
}

.style-outline3 {
  background: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

.style-ghost3 {
  background: transparent;
  color: var(--primary-color);
}

/* Hover effects */
.action-trigger3:hover:not(:disabled) {
  transform: scale(1.04);
  opacity: 0.9;
}

/* Icon handling */
.action-trigger3 .icon3 {
  display: inline-flex;
  margin-right: 0.4em;
  font-size: 0.9em;
}
.card-image img {
  width: 100%;       /* full width of the card */
  height: 430px;      /* scale height proportionally */
  object-fit: contain; /* make sure the entire image is visible */
  border-radius: 5px; /* optional: match card style */
  display: block;     /* remove inline spacing */
  max-width: 100%;    /* prevent overflow */
}


@media (max-width: 768px) {
  .card-image img {
    height: 490px;        /* slightly smaller on small screens */
  }
}

@media (max-width: 576px) {
  .card-image img {
    height: 450px;        /* smaller for mobile devices */
  }
}


.action-trigger3.icon-only3 {
  padding: 0;
}
.summary-dup-container {
  justify-content: flex-end; /* right align by default */
}

@media (max-width: 768px) {
  .summary-dup-container {
    justify-content: center; /* center on small screens */
  }
}


/* Responsive tweaks */
@media (max-width: 1024px) {
  .action-trigger3 {
    font-size: clamp(0.85rem, 1.8vw, 1rem);
    padding: 0.5em 1em;
  }
}

@media (max-width: 768px) {
  .shape-circle3 {
    width: 40px;
    height: 40px;
  }

  .action-trigger3 {
    font-size: clamp(0.8rem, 2.2vw, 0.95rem);
    padding: 0.45em 0.9em;
  }
}

@media (max-width: 480px) {
  .action-trigger3 {
    display: inline-flex;   /* keep button-like shape */
    width: auto;            /* prevent full width */
    min-width: 70px;        /* maintain minimum size */
    max-width: 100%;        /* ensure it doesn’t overflow */
    margin: 0.3em;          /* spacing between buttons */
    font-size: clamp(0.75rem, 3vw, 0.9rem);
  }
}
/* ========================= */
/* Base for Circle Buttons - Suffix 4 */
/* ========================= */
.action-trigger4 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-weight: 500;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
  background: #4055A4;  /* fixed background */
  color: #fff;          /* white text */
}

/* Circle shape */
.shape-circle4 {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  padding: 0;
  min-width: 0;
}

/* Hover */
.action-trigger4:hover:not(:disabled) {
  transform: scale(1.04);
  opacity: 0.9;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .shape-circle4 {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 480px) {
  .shape-circle4 {
    width: 36px;
    height: 36px;
    margin: 0.3em;
    font-size: clamp(0.75rem, 3vw, 0.9rem);
  }
}


/* ========================= */
/* Base for Circle Buttons - Suffix 5 */
/* ========================= */
.action-trigger5 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-weight: 500;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
  background: currentColor; /* text color becomes bg */
  color: #fff;              /* force text white */
}

/* Circle shape */
.shape-circle5 {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  padding: 0;
  min-width: 0;
}

/* Hover */
.action-trigger5:hover:not(:disabled) {
  transform: scale(1.04);
  opacity: 0.9;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .shape-circle5 {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 480px) {
  .shape-circle5 {
    width: 36px;
    height: 36px;
    margin: 0.3em;
    font-size: clamp(0.75rem, 3vw, 0.9rem);
  }
}
  
  #progressBar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
background:#0F2167;
    z-index: 1200;
    transition: width 0.25s ease-out;
  }

  /* Reversed progress bar (bottom of navbar, right → left) */
  #progressBarReverse {
    position: fixed;
    top: 81px; /* matches navbar height */
    right: 0;
    width: 0%;
    height: 3px;
    background: #0F2167;
    z-index: 1200;
    transition: width 0.25s ease-out;
  }
  .floating-buttons {
  position: fixed;
  bottom: 25px;
  right: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
}
.floating-buttons .floating-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;                /* space between icon and text if any */
  font-size: 20px;
  padding: 8px;             /* controls the circle size */
  border-radius: 100%;        /* makes it circular based on content */
  cursor: pointer;

  text-decoration: none;
  transition: all 0.3s ease-in-out, opacity 0.3s ease-in-out;
  opacity: 1;
}

.floating-buttons .floating-btn i {
  font-size: 14px;
 
}

/* Fade animation */
.floating-buttons .floating-btn.fade-out {
  opacity: 0;
}

/* Hover effect */
.floating-buttons .floating-btn:hover {
  background-color: #ff9800;
  color: #000000;
}

/* Mobile: make buttons perfectly circular, size based on content */
@media (max-width: 575px) {
  .floating-buttons .floating-btn {
    display: inline-flex;           /* keeps content centered */
    align-items: center;
    justify-content: center;
    padding: 12px;                  /* circle size based on icon */
    font-size: 20px;                /* adjust as needed */
    min-width: auto;                /* remove fixed width */
    height: auto;                   /* auto height to fit content */
    border-radius: 50%;             /* makes it a perfect circle */
    gap: 4px;                       /* space between icon and text if any */
  }
}
/* Responsive headings and texts */
.card-title {
    font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem); /* min 1rem, scales with viewport, max 1.5rem */
}

.card-text, ul li {
    font-size: clamp(0.875rem, 1.5vw + 0.2rem, 1.2rem); /* min 0.875rem, max 1.2rem */
}

h2.section-title {
    font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
}
/* Updated to add a white background */
  .style-outlinew {
    background: #F97316; /* White background */
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
  }

  .style-outline:hover {
    background: #f0f0f0; /* Slight gray on hover */
  }
  /* Shared map style */
  #map1, #map2 {
    height: 500px;   /* adjust as needed */
    width: 100%;
    touch-action: none; /* disable default single-finger gestures */
    overflow: hidden;
  }
  .dot2 {
  display: inline-block;
  width: 15px;
  height:15px;
  border-radius: 100%;
  margin-left: 4px;
  vertical-align: middle;
  
}

.green-dot2 { background-color: #00ff00; }
.orange-dot2 { background-color: #FF0000; }
 .card img {
      width: 100%;
      height: auto;
    }
    .tour-content h3 {
      font-size: 1.2rem;
    }
    .tour-action span {
      font-weight: bold;
    }
    .th-btn {
      font-size: 0.85rem;
      padding: 5px 10px;
      margin-top: 5px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .social-icons a {
      font-size: 1.2rem;
    }
    .swiper-pagination {
  position: absolute;
  bottom: 15px; /* adjust height above bottom */
  left: 0;
  right: 0;
  width: 100%;
  z-index: 50;
}

.swiper-pagination-bullet {
  background-color: #ffffff !important; /* orange dots */
  opacity: 1 !important;
  margin: 0 3px; /* spacing */
}

.swiper-pagination-bullet-active {
  background-color: #0F2167 !important; /* white active dot */
}
/* Improve text readability */
#service-sec .box-title {
  font-size: 1.1rem; /* was small, now bigger */
  font-weight: 600;
}

#service-sec small {
  font-size: 0.95rem; /* larger small text */
  line-height: 1.4;
}
.tiny-tab-btn {
    font-size: 0.8rem;
    padding: 1px 4px;        /* ↓ controls width */
    min-width: auto;         /* ← override any default min-width */
    white-space: nowrap;     /* prevents wrapping */
    line-height: 1;
  }

  .tiny-badge {
    font-size: 0.62rem;
    padding: 1px 3px;
    line-height: 1;
  }
  /* Typing effect with elegant and readable fonts */
.typing {
  font-family: 'Lora', serif;  /* Default is Lora, a balanced serif font */
  font-size: 1.4rem;
  color: #007bff;  /* #5f4b8b;  Romantic purple tone */
  
}

/* Fallback fonts for readability */
.typing {
  font-family: 'Playfair Display', serif; /* Elegant serif font */
   font-size: 1.4rem;
}
/* 1. Headings (H1-H6) */
h1, .custom-h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  color: #1A1A1A;
  margin-bottom: 0.5rem;
}

h2, .custom-h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
  color: #1A1A1A;
  margin-bottom: 0.5rem;
}

h3, .custom-h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1A1A1A;
  margin-bottom: 0.5rem;
    text-align: center;
}

/* 2. Paragraph Text */
p, .custom-paragraph {
    font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: #333333;
  margin-bottom: 1rem;
}

/* 2. Paragraph Text */
p, .custom-paragraph2 {
    font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: #F97316;
  margin-bottom: 1rem;
}
/* 3. Small / Secondary Text */
small, .custom-small {
   font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  color: #666666;
}

/* 4. Links */
a, .custom-link {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  color: #1CA8CB;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover, .custom-link:hover {
  color: #1490aa;
  text-decoration: underline;
}

/* 6. Card Text */
.card-text, .custom-card-text {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #333333;
  line-height: 1.5;
}


/* 7. Tiny / Tab Buttons inside Cards */
.tiny-tab-btn {
  font-family: 'Roboto', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.2rem 0.5rem;
}

/* ============================
   RESPONSIVE FONT SIZES
   ============================ */

/* Mobile first (default) */
.custom-h1 { font-size: 1.8rem; }
.custom-h2 { font-size: 1.5rem; }
.custom-h3 { font-size: 1.25rem; }
.custom-paragraph { font-size: 0.95rem;
}
.custom-paragraph2 { font-size: 0.8rem;
}
/* Tablets (≥768px) */
@media(min-width: 768px) {
  .custom-h1 { font-size: 2.2rem; }
  .custom-h2 { font-size: 1.8rem; }
  .custom-h3 { font-size: 1.5rem; }
  .custom-paragraph { font-size: 1rem; }
  .custom-paragraph2 { font-size: 0.9rem; }
}

/* Desktop (≥992px) */
@media(min-width: 992px) {
  .custom-h1 { font-size: 2.5rem; }
  .custom-h2 { font-size: 2rem; }
  .custom-h3 { font-size: 1.75rem; }
  .custom-paragraph { font-size: 1.05rem; }
   .custom-paragraph2 { font-size: 1.00rem; }
}

/* Large Desktop (≥1200px) */
@media(min-width: 1200px) {
  .custom-h1 { font-size: 3rem; }
  .custom-h2 { font-size: 2.25rem; }
  .custom-h3 { font-size: 2rem; }
  .custom-paragraph { font-size: 1.1rem; }
    .custom-paragraph2 { font-size: 1.0rem; }
}
.site-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: #ffffff;
text-shadow:1px 1px 3px rgba(0,0,0,0.9);
  letter-spacing: 0.5px;
  text-align: center;
  line-height: 1.2;
}

/* Responsive sizes */
@media (max-width: 576px) { .site-title { font-size: 0.9rem; } }
@media (min-width: 577px) and (max-width: 768px) { .site-title { font-size: 1.5rem; } }
@media (min-width: 769px) and (max-width: 992px) { .site-title { font-size: 1.8rem; } }
@media (min-width: 993px) { .site-title { font-size: 1.9rem; } }
/* --- Site Title --- */


/* Responsive Title Sizes */
@media (min-width: 576px) { .site-title { font-size: 1.3rem; } }
@media (min-width: 768px) { .site-title { font-size: 1.5rem; } }
@media (min-width: 992px) { .site-title { font-size: 1.7rem; } }
@media (min-width: 1200px) { .site-title { font-size: 2.6rem; } }

/* --- Best Employee Text --- */
.best-employee-text {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 0.90rem;
  color: #ffffff;
}

/* --- Buttons --- */
.custom-btn {
  font-family: 'Roboto', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background-color: #1490aa;
  border-radius: 25px;
  
  padding: 0.35rem 0.9rem;
  border: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.custom-btn.active {
  background-color: #ff9800;
}

.custom-btn:hover {
  background-color: #0f7a92;
  color: #fff;
}

/* Tiny badge inside buttons */
.tiny-badge {
  background-color: #ff9800;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  margin-left: 0.2rem;
  padding: 0.15rem 0.3rem;
  border-radius: 10px;
}
/* Ensure all cards have same height */
.team-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 100%;
}

/* Make all images fit nicely */
.team-img {
  width: 100%;
  height: 250px; /* adjust as needed */
  object-fit: cover; /* ensures image fills area without distortion */
}

/* Optional: consistent spacing inside cards */
.team-card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Responsive text sizes */
.custom-h3 {
  font-size: 1.2rem;
}

.custom-paragraph {
  font-size: 0.95rem;
}
.custom-paragraph2 {
  font-size: 0.80rem;
}
@media (max-width: 768px) {
  .team-img {
    height: 200px;
  }
  .custom-h3 {
    font-size: 1rem;
  }
  .custom-paragraph {
    font-size: 0.9rem;
  }
    .custom-paragraph2 {
    font-size: 0.8rem;
  }
}


/* --- Menu Button --- */
.menu-btn {
  font-family: 'Roboto', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 25px;
  padding: 0.3rem 0.9rem;
  transition: all 0.3s ease;
}

.menu-btn:hover {
  background-color: #0f7a92;
  color: #fff;
}

/* --- Responsive Best Employee Group --- */
.best-employee-group {
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* --- Responsive tweaks for small devices --- */
@media(max-width: 576px){
  .custom-btn { font-size: 0.75rem; padding: 0.25rem 0.7rem; }
  .tiny-badge { font-size: 0.6rem; }
  .menu-btn { font-size: 0.75rem; padding: 0.25rem 0.7rem; }
}


 /* Wrapper */
.news-ticker-wrapper {
  background: #0F2167;
  padding: 5px 10px;
  overflow: hidden;
  width: 100%;
  height: 30px; 
  display: flex;
  align-items: center;
  position: relative;
}


/* Inner wrapper that scrolls */
.scrolling-text-wrapper {
  display: flex;
  white-space: nowrap;
  animation: scrollText 80s linear infinite; /* default speed */
}

/* Each duplicated block */
.scrolling-text {
  flex-shrink: 0;
  padding-right: 4rem; /* space between repeated text blocks */
}

/* Hover pause */
.scrolling-text-wrapper:hover {
  animation-play-state: paused;
}

/* Animation */
@keyframes scrollText {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); } /* move half since we duplicated */
}

/* Responsive speeds */
@media (max-width: 576px) {  /* Mobile */
  .scrolling-text-wrapper {
    animation-duration: 50s;
  }
}

@media (min-width: 577px) and (max-width: 991px) {  /* Tablet */
  .scrolling-text-wrapper {
    animation-duration: 60s;
  }
}

@media (min-width: 992px) {  /* Desktop */
  .scrolling-text-wrapper {
    animation-duration: 80s;
  }
}

  /* Blinking "NEW" label */
  .blink {
    animation: blinkAnim 1s infinite;
  }

  @keyframes blinkAnim {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
  }

  footer a:hover { text-decoration: underline; }
    footer h5 { font-weight: 600; }
    footer ul li { margin-bottom: 0.5rem; }
      .dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; }
  .green-dot { background:green; }
  .red-dot { background:red; }
  .blue-dot { background:blue; }
   #extraContentArea:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  }
  .card-title {
  font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem);
}

.card-text, ul li {
  font-size: clamp(0.875rem, 1.5vw + 0.2rem, 1.2rem);
}

button.tab-btn.custom-btn a {
  font-size: clamp(0.7rem, 1vw + 0.2rem, 0.9rem);
  text-decoration: none;
  color: black;
}

button.tab-btn.custom-btn {
  background: #FF9800;
  border: none;
  border-radius: 15px;
  padding: 2px 6px;
}