/* =========================================================
   SPECTRALUX WEBSITE STYLESHEET
   ---------------------------------------------------------
   Project      : Spectralux
   Description  : Main stylesheet for Spectralux corporate website
   Author       : AJAY RAMACHANDRAN - TESTLYTICSOLUTIONS.IN
   Version      : 1.0
   Created      : 2026
   ---------------------------------------------------------
   TABLE OF CONTENTS
   ---------------------------------------------------------
   1. Global Styles
   2. Typography
   3. Navbar
   4. Hero Slider
   5. Buttons
   6. Sections
   7. Content Blocks
   8. Solutions Tabs
   9. Cards
   10. Gallery
   11. Footer
   12. Forms
   13. Animations
   14. Responsive Styles
========================================================= */



html, body {
  height: 100%;
  margin: 0;
}

.text-justify {
	text-align: justify;
}
.base-line-d {
  width: 100%;
  height: 1px;
  margin: 60px 0;

  background: linear-gradient(
    to right,
    transparent,
    rgba(251, 203, 4, 0.8),
    transparent
  );
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Make main content take remaining space */
.page-wrapper > main {
  flex: 1;
}
/* =========================
   TOPBAR (TECH PREMIUM FINAL)
========================= */
.topbar {
  background: linear-gradient(90deg, #fbcb04, #e0b800);
  color: #000;
  font-size: 13px;
  padding: 4px 0; /* ✅ reduced height */
  line-height: 1.2;
  box-shadow: 0 2px 10px rgba(251, 203, 4, 0.3);
}

/* LINKS */
.top-link {
  color: #000;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
}

/* DESKTOP HOVER */
.top-link:hover {
  color: #111;
}

/* MOBILE TAP EFFECT */
.top-link:active,
.top-link:focus {
  color: #111;
  opacity: 0.7;
}

/* ICONS */
.top-link i {
  color: #000;
  font-size: 12px;
}

/* =========================
   SOCIAL ICONS
========================= */
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;   /* ✅ smaller */
  height: 26px;
  margin-left: 8px;
  border-radius: 50%;
  background: rgba(0,0,0,0.1);
  color: #000;
  transition: 0.3s;
  text-decoration: none;
}

/* DESKTOP HOVER */
.social-icon:hover {
  background: #000;
  color: #fbcb04;
  transform: translateY(-2px);
  text-decoration: none;
}

/* MOBILE TAP */
.social-icon:active,
.social-icon:focus {
  background: #000;
  color: #fbcb04;
  transform: scale(0.95);
  text-decoration: none;
}

/* =========================
   MOBILE FIX (2 ROW CENTERED)
========================= */
@media (max-width: 768px) {

  .topbar {
    font-size: 12px;
    padding: 3px 0; /* ✅ tighter */
  }

  .topbar-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }

  /* LINE 1: PHONE + EMAIL */
  .top-left {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: nowrap;
  }

  .top-left a {
    font-size: 12px;
    white-space: nowrap;
  }

  /* LINE 2: ICONS */
  .top-right {
    display: flex;
    justify-content: center;
    gap: 6px;
  }

  .social-icon {
    width: 24px;
    height: 24px;
    font-size: 11px;
    margin: 0;
  }

}

/* =========================
   NAVBAR BASE
========================= */
.navbar {
  background: #0b0b0b !important;
  border-bottom: 1px solid rgba(251, 203, 4, 0.1);
  transition: 0.3s;
}

/* =========================
   NAV LINKS
========================= */
.navbar .nav-link {
  color: #bfbfbf;
  margin: 0 12px;
  position: relative;
  padding-bottom: 8px;
  font-weight: 500;
  transition: 0.3s;
}

/* UNDERLINE (NO SHIFT) */
.navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 0%;
  height: 2px;
  background: #fbcb04;
  transition: 0.3s ease;
}

/* HOVER + ACTIVE */
.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: #fbcb04;
}

.navbar .nav-link:hover::after,
.navbar .nav-link.active::after {
  width: 100%;
}

/* =========================
   DROPDOWN
========================= */
.dropdown-menu {
  background: #121212;
  border: 1px solid rgba(251, 203, 4, 0.2);
  padding: 10px 0;
  border-radius: 6px;
}

.dropdown-item {
  color: #bfbfbf;
  padding: 8px 20px;
  transition: 0.3s;
}

.dropdown-item:hover {
  background: transparent;
  color: #fbcb04;
}

/* ACTIVE DROPDOWN ITEM */
.dropdown-item.active,
.dropdown-item:active {
  background: rgba(251, 203, 4, 0.1);
  color: #fbcb04;
}

/* Hover on active */
.dropdown-item.active:hover {
  background: rgba(251, 203, 4, 0.2);
}

/* Optional premium indicator */
.dropdown-item.active {
  box-shadow: inset 3px 0 0 #fbcb04;
}

/* Dropdown arrow alignment */
.navbar .dropdown-toggle::after {
  margin-left: 6px;
  vertical-align: middle;
}

/* =========================
   ACTIVE PARENT MENU
========================= */
.navbar .nav-item.active > .nav-link {
  color: #fbcb04;
}

/* =========================
   SUBMENU (MULTI LEVEL)
========================= */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 6px;
}

/* Desktop hover */
@media (min-width: 992px) {
  .dropdown-submenu:hover > .dropdown-menu {
    display: block;
  }
}

/* Arrow indicator */
.dropdown-submenu > a::after {
  content: "›";
  float: right;
  color: #fbcb04;
}

/* =========================
   CTA BUTTON
========================= */
.btn-tech {
  background: #fbcb04;
  color: #000;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 6px;
  border: none;
  display: inline-block;

  /* 🔥 FAST RESPONSE */
  transition: 0.25s ease;
}

.btn-tech:hover {
  background: #e0b800;
  box-shadow: 0 6px 18px rgba(251, 203, 4, 0.4);
  transform: translateY(-2px);
}

/* =========================
   OPTIONAL: NAVBAR SCROLL EFFECT
========================= */
.navbar.scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* =========================
   MOBILE NAVBAR FIX
========================= */
@media (max-width: 991px) {

  .navbar .nav-link {
    margin: 8px 0;
    padding: 10px 0;
  }

  /* Main Level 1 Menu */
  .dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100% !important;
    margin-top: 5px;
    border: none;
    background: #121212;
  }

  /* Level 2 AND Level 3 Submenus */
  .dropdown-submenu .dropdown-menu {
    display: none; /* Let jQuery slideToggle handle this */
    position: static !important;
    margin-left: 0 !important;
    padding-left: 20px !important; /* Indent for visual hierarchy */
    border-left: 1px solid rgba(251, 203, 4, 0.2);
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Force display when JS toggles it */
  .dropdown-menu.show {
    display: block !important;
  }

  .btn-tech {
    width: 100%;
    text-align: center;
    margin-top: 15px;
  }
}


/* LOGO IMAGE */
.logo {
  height: 40px;
  width: auto;
  display: block;
}

/* Slightly bigger on desktop */
@media (min-width: 992px) {
  .logo {
    height: 45px;
  }
}

/* =========================
   HERO SLIDER
========================= */
.hero-slide {
  height: 90vh;
  background-size: cover;
  background-position: center;
  position: relative;
}

/* OVERLAY */
.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.8),
    rgba(0,0,0,0.4)
  );
}

/* CONTENT */
.hero-content {
  position: absolute;
  top: 50%;
  left: 8%;
  transform: translateY(-50%);
  max-width: 500px;
  z-index: 2;
}

.hero-content h1 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 15px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}

.hero-content p {
  color: #bfbfbf;
  margin-bottom: 20px;
}

/* =========================
   TEXT ANIMATION
========================= */
.hero-content h1,
.hero-content p,
.hero-content .btn {
  opacity: 0;
  transition: all 0.7s ease;
}

/* LEFT */
.hero-slide.left .hero-content h1,
.hero-slide.left .hero-content p,
.hero-slide.left .hero-content .btn {
  transform: translateX(-40px);
}

/* RIGHT */
.hero-slide.right .hero-content h1,
.hero-slide.right .hero-content p,
.hero-slide.right .hero-content .btn {
  transform: translateX(40px);
}

/* ACTIVE */
.owl-item.active .hero-content h1 {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.2s;
}

.owl-item.active .hero-content p {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.4s;
}

.owl-item.active .hero-content .btn {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.6s;
}

/* =========================
   NAV BUTTONS
========================= */
.hero-slider .owl-nav {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}

.hero-slider .owl-nav button {
  position: absolute;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6) !important;
  border: 1px solid rgba(251,203,4,0.4);
  color: #fbcb04 !important;
  transition: 0.3s;
}

.hero-slider .owl-nav .owl-prev { left: 20px; }
.hero-slider .owl-nav .owl-next { right: 20px; }

.hero-slider .owl-nav button:hover {
  background: #fbcb04 !important;
  color: #000 !important;
}

/* =========================
   DOTS
========================= */
.hero-slider .owl-dots {
  position: absolute;
  bottom: 25px;
  width: 100%;
  text-align: center;
}

.hero-slider .owl-dots button {
  width: 10px;
  height: 10px;
  margin: 5px;
  border-radius: 50%;
  background: #666 !important;
  transition: 0.3s;
}

.hero-slider .owl-dots .active {
  background: #fbcb04 !important;
  width: 25px;
  border-radius: 10px;
}

/* =========================
   MOBILE
========================= */
@media (max-width: 768px) {

  .hero-slide {
    height: 70vh;
  }

  .hero-content {
    left: 5%;
    right: 5%;
    max-width: 100%;
  }

  .hero-content h1 {
    font-size: 26px;
  }

  .hero-content p {
    font-size: 14px;
  }

  .hero-content .btn {
    padding: 8px 16px;
    font-size: 14px;
  }

  /* STRONGER OVERLAY */
  .hero-slide::before {
    background: linear-gradient(
      to right,
      rgba(0,0,0,0.85),
      rgba(0,0,0,0.6)
    );
  }

  /* SMALLER NAV */
  .hero-slider .owl-nav button {
    width: 35px;
    height: 35px;
  }

  /* HIDE ARROWS (better UX) */
  .hero-slider .owl-nav {
    display: none;
  }
}



/* =========================
   ABOUT SECTION
========================= */
.about-section {
  background: #0b0b0b;
}

/* IMAGE */
.about-img img {
  border-radius: 10px;
  transition: 0.4s;
}

.about-img img:hover {
  transform: scale(1.03);
}

/* TEXT */
.about-section h2 {
  font-weight: 700;
}

.about-section p {
  color: #bfbfbf;
}

/* FEATURES */
.about-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #bfbfbf;
  transition: 0.3s;
}

.about-feature i {
  color: #fbcb04;
  font-size: 18px;
}

/* HOVER EFFECT */
.about-feature:hover {
  color: #fff;
  transform: translateX(5px);
}

.wow {
  animation-duration: 0.8s !important;
}


/* =========================
   SERVICES SECTION
========================= */
.services-section {
  background: #0b0b0b;
}

/* SECTION DESCRIPTION */
.service-desc {
  max-width: 80%;
  color: #bfbfbf;
  font-size: 15px;
  line-height: 1.6;
}

/* =========================
   SERVICE CARD
========================= */
.service-card {
  background: #121212;
  border-radius: 10px;
  padding: 25px;
  border: 1px solid rgba(251, 203, 4, 0.1);
  transition: all 0.4s ease;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* GLOW BACKGROUND */
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(251,203,4,0.15), transparent 60%);
  opacity: 0;
  transition: 0.4s;
}

/* =========================
   ICON (INLINE STYLE)
========================= */
.icon-box {
  min-width: 50px;
  height: 50px;
  border-radius: 8px;
  background: rgba(251, 203, 4, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.icon-box i {
  font-size: 20px;
  color: #fbcb04;
  transition: 0.3s;
}

/* =========================
   TEXT
========================= */
.service-card h5 {
  color: #fff;
  margin-bottom: 8px;
  font-weight: 600;
  transition: 0.3s;
}

.service-card p {
  color: #bfbfbf;
  font-size: 14px;
  margin: 0;
}

/* =========================
   HOVER EFFECT (PREMIUM)
========================= */
.service-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: #fbcb04;
  box-shadow: 0 10px 30px rgba(251, 203, 4, 0.25);
}

/* GLOW ACTIVE */
.service-card:hover::before {
  opacity: 1;
}

/* ICON ANIMATION */
.service-card:hover .icon-box {
  background: #fbcb04;
  transform: rotate(5deg) scale(1.1);
}

.service-card:hover .icon-box i {
  color: #000;
}

/* TEXT SLIGHT LIFT */
.service-card:hover h5 {
  transform: translateY(-2px);
}

/* =========================
   MOBILE OPTIMIZATION
========================= */
@media (max-width: 768px) {

  .service-card {
    padding: 20px;
  }

  .icon-box {
    min-width: 45px;
    height: 45px;
  }

  .icon-box i {
    font-size: 18px;
  }

  /* reduce hover intensity */
  .service-card:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 6px 15px rgba(251, 203, 4, 0.15);
  }

}

/* =========================
   SCROLL UP (FIXED)
========================= */
.scroll-up {
  opacity: 0;
  transform: translateY(60px);

  /* 🔥 FIX: DO NOT USE "all" */
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.scroll-up.show {
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   SECTION DIVIDER SCROLL-UP
========================= */
.section-divider {
  position: relative;
  text-align: center;
  margin: 40px 0;
  opacity: 0;
  transform: translateY(60px);
  transition: all 0.7s ease;
}

.section-divider.show {
  opacity: 1;
  transform: translateY(0);
}

.section-divider::before {
  content: "";
  display: block;
  border-top: 1px solid #fbcb04;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 1;
}

.section-divider span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0b0b0b;
  color: #fbcb04;
  width: 30px;
  height: 30px;
  font-size: 16px;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 8px rgba(251,203,4,0.6);
}

/* SUBPAGE HEADER */
.subpage-header {
  position: relative;
  background-size: cover;
  background-position: center;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

/* DARK OVERLAY */
.subpage-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55); /* Dark overlay */
  z-index: 1;
}

/* CONTENT ABOVE OVERLAY */
.subpage-header .container {
  position: relative;
  z-index: 2;
}

.subpage-header .page-title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 10px;
}

.subpage-header .breadcrumb-path {
  color: #ccc;
  font-size: 14px;
}

.subpage-header .breadcrumb-path a {
  color: #fbcb04;
  text-decoration: none;
  transition: 0.3s;
}

.subpage-header .breadcrumb-path a:hover {
  color: #fff;
}

/* MOBILE */
@media (max-width: 768px) {
  .subpage-header {
    height: 180px;
    padding: 0 15px;
  }

  .subpage-header .page-title {
    font-size: 24px;
  }

  .subpage-header .breadcrumb-path {
    font-size: 12px;
  }
}


/* =========================
   FOOTER BASE
========================= */
.site-footer {
  background: linear-gradient(135deg, #0b0b0b, #121212);
  color: #bfbfbf;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  padding: 40px 15px 20px; /* top, sides, bottom */
}

/* LOGO */
.footer-logo {
  height: 45px;
  width: auto;
}

/* DESCRIPTION */
.footer-desc {
  font-size: 13px;
  line-height: 1.6;
  color: #bfbfbf;
}

/* FOOTER TITLES */
.footer-title {
  color: #fbcb04;
  font-weight: 600;
  margin-bottom: 15px;
}

/* LINKS */
.footer-links {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links li a {
  color: #bfbfbf;
  text-decoration: none;
  transition: 0.3s;
}

.footer-links li a:hover {
  color: #fbcb04;
  text-decoration: underline;
}

/* CONTACT */
.footer-contact i {
  color: #fbcb04;
  margin-right: 5px;
}

/* SOCIAL ICONS */
.footer-social {
  display: flex;
  gap: 4px;
}

.footer-social .social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #fff;
  transition: 0.3s;
}

.footer-social .social-icon:hover {
  background: #fbcb04;
  color: #000;
  transform: translateY(-2px);
}

/* NEWSLETTER */
.footer-newsletter {
  display: flex;
  gap: 5px;
  margin-top: 10px;
}

.footer-newsletter input[type="email"] {
  flex: 1;
  padding: 8px 10px;
  border-radius: 5px;
  border: none;
  font-size: 13px;
}

.footer-newsletter button {
  padding: 8px 12px;
  background: #fbcb04;
  border: none;
  border-radius: 5px;
  color: #000;
  cursor: pointer;
  transition: 0.3s;
}

.footer-newsletter button:hover {
  background: #e0b800;
  transform: translateY(-2px);
}

/* FOOTER SEPARATOR */
.footer-separator {
  height: 6px;
  background: #fbcb04; /* brand color */
  width: 100%;
  margin-bottom: 20px;
}

/* FOOTER BOTTOM */
.footer-bottom {
  font-size: 13px;
  color: #bfbfbf;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid rgba(251,203,4,0.2);
  padding-top: 15px;
}

.footer-bottom a {
  color: #fbcb04;
  text-decoration: none;
  transition: 0.3s;
}

.footer-bottom a:hover {
  color: #fff;
  text-decoration: underline;
}

/* MOBILE */
@media (max-width: 768px) {
  .footer-logo {
    height: 40px;
    margin-bottom: 10px;
  }
  .footer-title {
    font-size: 16px;
  }
  .footer-links li {
    margin-bottom: 5px;
  }
  .footer-contact, .footer-desc {
    font-size: 12px;
  }
  .footer-newsletter {
    flex-direction: column;
  }
  .footer-newsletter button {
    width: 100%;
  }
  .footer-social {
    justify-content: center;
    margin-top: 10px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 5px;
    text-align: center;
  }
}
.client-slider {
  background: #0b0b0b;
  overflow: hidden;
  cursor: grab;
}

.slider-wrapper {
  overflow: hidden;
  position: relative;
}

.slider-track {
  display: flex;
  width: max-content;
}

.slide {
  flex: 0 0 auto;
  width: 150px;
  margin: 0 30px;
}

.slide img {
  width: 100%;
  padding: 10px 15px;
  border-radius: 6px;
  background: #ffffff;              /* pure white background */
  border: 2px solid transparent;    /* base border */
  filter: grayscale(50%);
  transition: filter 0.3s, transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.slide img:hover {
  filter: grayscale(0%);
  transform: scale(1.05);
  border-color: #fbcb04;            /* your base brand color */
  box-shadow: 0 4px 12px rgba(251,203,4,0.5); /* subtle glow */
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .slide {
    width: 100px;
    margin: 0 15px;
  }
}

/* =========================
   CONTACT SECTION
========================= */
.contact-section {
  background: #0b0b0b;
  color: #bfbfbf;
  font-family: Arial, sans-serif;
}

.section-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #fbcb04;
}

.section-desc {
  font-size: 15px;
  margin-bottom: 30px;
}

.contact-title {
  font-weight: 600;
  color: #fbcb04;
  margin-bottom: 15px;
}

/* FORM */
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 15px;
  margin-bottom: 10px;
  border-radius: 6px;
  border: 1px solid #333;
  background: #121212;
  color: #fff;
  font-size: 14px;
  transition: 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #fbcb04;
  outline: none;
}

.contact-form button {
  padding: 12px 25px;
  background: #fbcb04;
  border: none;
  border-radius: 6px;
  color: #000;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.contact-form button:hover {
  background: #e0b800;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(251,203,4,0.5);
}

/* MAP */
.map-container iframe {
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* MOBILE */
@media (max-width: 768px) {
  .contact-section .row {
    flex-direction: column;
  }
  .contact-section .col-lg-6 {
    text-align: center;
  }
  .contact-form button {
    width: 100%;
  }
}

/* Contact Form Message Animation */
#formMessage {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
  font-weight: 600;
  text-align: center;
}

#formMessage.show {
  opacity: 1;
  transform: translateY(0);
}


/* New Modification Begins Here */

/* =========================
   SOLUTIONS TABS
========================= */
.solutions-tabs {
  background: #0b0b0b;
  color: #fff;
  padding: 40px 60px; /* more space on left & right */
}

/* Tab Buttons */
.solutions-tabs .nav-tabs {
  border-bottom: none;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.solutions-tabs .nav-tabs .nav-link {
  color: #bfbfbf;
  border: none;
  padding: 10px 25px;
  margin: 0 5px 10px 5px;
  font-weight: 600;
  transition: 0.3s;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.05);
}

.solutions-tabs .nav-tabs .nav-link:hover {
  background: #fbcb04;
  color: #000;
}

.solutions-tabs .nav-tabs .nav-link.active {
  background: #fbcb04;
  color: #000;
}

/* Tab Content */
.solutions-tabs .tab-pane h3 {
  color: #fbcb04;
  margin-bottom: 15px;
}

.solutions-tabs .tab-pane p {
  margin-bottom: 15px;
  font-size: 15px;
  line-height: 1.6;
}

.solutions-tabs .tab-pane ul {
  list-style: disc;
  padding-left: 20px;
}

.solutions-tabs .tab-pane ul li {
  margin-bottom: 8px;
  font-size: 14px;
}

/* Row Columns */
.solutions-tabs .tab-pane .row {
  flex-wrap: nowrap; /* keep in single line on desktop */
  align-items: center;
}

/* Left Image */
.solutions-tabs .tab-pane .col-lg-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

/* Right Text (left-image layout) */
.solutions-tabs .tab-pane .col-lg-9 {
  flex: 0 0 75%;
  max-width: 75%;
}

/* Right Image Layout */
.solutions-tabs .tab-pane .order-lg-2 {
  text-align: right; /* right-align text when image is on right */
}

/* Images */
.solutions-tabs .tab-pane img {
  width: 100%;
  max-width: 200px; /* cap width */
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s;
}

/* Slide-up animation */
.slide-up {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.7s ease-out;
}

.slide-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .solutions-tabs {
    padding: 20px 15px; /* smaller padding */
  }

  .solutions-tabs .tab-pane .row {
    flex-direction: column !important;
  }

  .solutions-tabs .tab-pane .col-lg-3,
  .solutions-tabs .tab-pane .col-lg-9 {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: left !important; /* reset text-align on mobile */
  }

  .solutions-tabs .tab-pane img {
    margin-bottom: 15px;
    max-width: 100%;
  }

  .solutions-tabs .nav-tabs {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .solutions-tabs .nav-tabs .nav-link {
    flex: 0 0 auto;
    margin-right: 10px;
  }
}

/* HIGHLIGHTED TEXT*/

.highlight-text {
  background: rgba(255, 255, 255, 0.05); /* transparent base */
  border-left: 6px solid #fbcb04;       /* thick left border in brand color */
  padding: 20px 25px;
  border-radius: 6px;
  margin: 20px auto;                     /* centers the block horizontally */
  max-width: 100%;                      /* controls width */
  transition: transform 0.3s, box-shadow 0.3s;
}

/* Heading */
.highlight-text h4 {
  color: #fbcb04;
  margin-bottom: 10px;
  font-weight: 700;
}

.highlight-text h5 {
  color: #fff;
  margin-bottom: 10px;
  font-weight: 700;
}

/* Paragraph */
.highlight-text p {
  color: #bfbfbf;
  font-size: 14px;
  line-height: 1.6;
}

/* Hover Effect */
.highlight-text:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(251, 203, 4, 0.2);
}

/* Clickable Link (Not a Button) */
.highlight-text a {
  display: inline-block;
  margin-top: 12px;
  color: #fff; /* Using your brand yellow for the text */
  font-size: 18px;
  font-weight: 600;
  text-decoration: none; /* Removes default underline */
  transition: all 0.3s ease;
  position: relative;
}

/* Hover Effect */
.highlight-text a:hover {
  color: #fff; /* Changes to white on hover */
  text-decoration: underline; /* Optional: adds underline back on hover */
  text-shadow: 0 0 8px rgba(251, 203, 4, 0.4); /* Subtle glow matching your site */
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .highlight-text {
    padding: 15px 20px;
    max-width: 100%; 
  }

  .highlight-text p {
    font-size: 13px;
  }
  
  .highlight-text a {
    display: block; /* Takes up full width for a better tap target */
    width: 100%;
    padding: 12px 0; /* Keeps the height for easy tapping, but removes side padding */
    font-size: 16px;
    color: #fbcb04; /* Brand yellow */
    text-decoration: none;
    background: none; /* Ensures no button background shows */
    border: none; /* Ensures no borders show */
    font-weight: 600;
  }

  .highlight-text a:hover, 
  .highlight-text a:active {
    color: #fff; /* Turns white when tapped */
    background: none;
    text-decoration: underline;
  }
}

/* Simple Sections */

.simple-section {
  background: #0b0b0b; /* Dark background matches theme */
  color: #fff;
  width: 100%;
}

.simple-section .section-title {
  font-size: 36px;
  font-weight: 700;
  color: #fbcb04; /* Highlight color */
  margin-bottom: 20px;
}

.simple-section .section-desc {
  font-size: 16px;
  line-height: 1.8;
  max-width: 800px; /* Keeps text readable on large screens */
  margin: 0 auto 15px auto; /* Center and spacing */
  color: #bfbfbf; /* Light gray for contrast */
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .simple-section .section-title {
    font-size: 28px;
  }

  .simple-section .section-desc {
    font-size: 15px;
    line-height: 1.6;
  }
}


/* ----Gallery--------------- */
/* ---- Main Slider ---- */
.gallery-main .item img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

/* --- Sleek Small Arrows --- */
.gallery-main .owl-nav button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9) !important;
  color: #333 !important;
  width: 35px;
  height: 35px;
  border-radius: 50% !important;
  font-size: 12px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.gallery-main .owl-nav button:hover {
  background: #fbcb04 !important;
  color: #000 !important;
}

.gallery-main .owl-nav .owl-prev { left: 15px; }
.gallery-main .owl-nav .owl-next { right: 15px; }

/* ---- Full Width Thumbnails ---- */
.gallery-thumbs {
  margin-top: 15px;
  width: 100%; /* Spans full width of the main slider */
}

.gallery-thumbs .thumb-item {
  cursor: pointer;
  padding: 2px; /* Small gap for the border */
}

.gallery-thumbs .thumb-item img {
  width: 100%;
  height: 80px; /* Controls icon height */
  object-fit: cover;
  border-radius: 6px;
  border: 3px solid transparent; 
  transition: all 0.3s ease;
  filter: brightness(0.7); /* Dims inactive icons */
}

/* Active Highlight */
.gallery-thumbs .owl-item.current .thumb-item img {
  border-color: #fbcb04;
  filter: brightness(1);
  transform: scale(0.98); /* Slight press effect */
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .gallery-main .item img {
    height: 300px;
  }
  .gallery-thumbs .thumb-item img {
    height: 60px;
  }
}




/* =========================
   cards
========================= */

/* ---- Color Variables ---- */

:root {
  --base-yellow: #fbcb04;
  --dark-text: #1a1a1a;
}
/* Base Color for Headings */

.base-color-text, .brand-heading {
  color: var(--base-yellow) !important;
  font-weight: 700;
}
/* Card Styling */

.custom-card {
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid #eee;
  transition: all 0.3s ease;
  height: 100%;
  display: block;
  flex-direction: column;
  margin-bottom: 6px;
}
.card-img-container {
  overflow: hidden; /* For zoom effect */
}
.custom-card img {
  height: 400px;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.custom-card-s img {
  height: 300px;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.custom-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
}
.custom-card:hover img {
  transform: scale(1.1);
}
/* Button Customization */
.btn-brand {
  background-color: var(--base-yellow);
  color: #000;
  border: 2px solid var(--base-yellow);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  padding: 10px 30px;
  border-radius: 5px;
  transition: all 0.3s ease;
}
.btn-brand:hover {
  background-color: transparent;
  color: var(--base-yellow);
  border-color: var(--base-yellow);
}
.card-body {
  padding: 30px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-text {
  color: #666;
  font-size: 15px;
  margin-bottom: 20px;
}



/* =========================
   content
========================= */

/* --- Brand Content Styles --- */

.base-title {
  color: #fbcb04; /* Your Base Yellow */
  font-weight: 800;
  font-size: 2.5rem;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.title-divider {
  width: 50px;
  height: 2px;
  background: #fbcb04; /* brand color */
  margin: 10px auto 0;
  border-radius: 2px;
}

.content-paragraph p {
  font-size: 15px;
  line-height: 1.8;
  color: #FFFFFF;
  text-align: center; /* Center for lead text */
}

/* Small heading */
.content-subtitle {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 10px;
  text-align: center; /* keep consistent with your layout */
}

/* Bullet list */
.content-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  text-align: left; /* better readability */
  display: inline-block; /* keeps centered block */
}

/* List items */
.content-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
  font-size: 14px;
  color: #ddd;
}

/* Small subtle bullets */
.content-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  background: #fbcb04;
  border-radius: 50%;
}

/* Image with Yellow Frame Pattern */
.mid-image-wrapper {
  position: relative;
  padding: 15px;
  border: 2px solid #fbcb04; /* Thin yellow border around image area */
  border-radius: 8px;
}

.mid-image-wrapper img {
  width: 100%;
  max-height: 500px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

/* Responsive Scaling */
@media (max-width: 768px) {
  .base-title {
    font-size: 1.8rem;
  }
  .content-paragraph p {
    font-size: 10px;
    text-align: left; /* Better for mobile reading */
  }
}


/* --- Side-by-Side Content Styles --- */

.side-heading {
  color: #fbcb04; /* Base Yellow */
  font-weight: 800;
  text-transform: uppercase;
  font-size: 22px;
  letter-spacing: 1px;
}
.side-heading-white {
  color: #fff; /* white */
  font-weight: 800;
  text-transform: uppercase;
  font-size: 28px;
  letter-spacing: 1px;
}

.side-text p {
  color: #fff;
  line-height: 1.8;
  font-size: 15px;
}

.side-text-small p {
  color: #fff;
  line-height: 1.8;
  font-size: 13px;
}

/* Image Wrapper with Yellow Pattern */
.side-image-wrapper {
  position: relative;
  padding: 10px;
  background: #fff;
  /* Thin yellow border on all sides, thick on the left */
  border: 1px solid #eee;
  border-left: 10px solid #fbcb04; 
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.side-image-wrapper-right {
  position: relative;
  padding: 10px;
  background: #fff;

  border: 1px solid #eee;
  border-right: 10px solid #fbcb04; /* moved to right */
  
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.side-image-wrapper img {
  width: 100%;
  border-radius: 4px;
  display: block;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .side-heading {
    font-size: 1.8rem;
    text-align: center;
  }
  .side-text p {
    text-align: center;
  }
  .side-image-wrapper {
    border-left: 6px solid #fbcb04;
  }
}


/* ----Floating icons--------------- */
/* Container to stack buttons vertically on the right */
/* Container fixed to bottom right */
.action-buttons-container {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: flex;
  flex-direction: column;
  align-items: right; /* Centers the arrow under the two buttons */
  gap: 10px;
  z-index: 9999;
}

/* Row for WhatsApp and Call */
.contact-row {
  display: flex;
  flex-direction: row; /* Side-by-side */
  gap: 10px;
}

/* Base style for all round buttons */
.action-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  text-decoration: none;
  border: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  cursor: pointer;
}

/* WhatsApp: Green Background */
.whatsapp {
  background-color: #25d366 !important;
  color: #fff !important;
}

/* Call: Base Yellow Background */
.call {
  background-color: #fbcb04 !important;
  color: #000 !important;
}

/* Scroll Up: Base Yellow Background */
.scroll-up-btn {
  background-color: #fbcb04 !important;
  color: #000 !important;
  display: none; /* Hidden by default for JS to trigger */
}

/* Hover Effect */
.action-btn:hover {
  transform: translateY(-5px);
  filter: brightness(90%);
}
.custom-bullets-himawari {
  list-style: none;
  padding-left: 0;
  margin: 0;
  text-align: left;   /* 🔥 force left align */
}

.custom-bullets-himawari li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
  text-align: left;   /* ensure text left */
}

.custom-bullets-himawari li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background: #fbcb04;
  border-radius: 50%;
}


/************** CONTENT A STARTS HERE ***********/
.content-a-wrapper {
  max-width: 80%;
  margin: 0 auto;
}

/* Image */
.content-a-image {
  text-align: center;
  margin-bottom: 20px;
}

.content-a-image img {
  width: 100%;
  border: 4px solid #fbcb04;
  border-radius: 6px;
}

/* Title */
.content-a-title {
  font-size: 20px;
  font-weight: 600;
  color: #fbcb04;
  margin-bottom: 5px;
}

.content-a-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: #fbcb04;
  margin-top: 6px;
}

/* Subtitle */
.content-a-subtitle {
  font-size: 18px;
  color: #fff;
  margin-bottom: 12px;
}

/* Text */
.content-a-text {
  font-size: 15px;
  line-height: 1.7;
  color: #fff;
  text-align: justify;
  margin-bottom: 15px;
}

/* Bullet heading */
.content-a-bullet-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #fbcb04;
}

/* Bullets */
.content-a-bullets {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.content-a-bullets li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
  font-size: 14px;
  color: #fff;
}

.content-a-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  background: #fbcb04;
  border-radius: 50%;
}

---

/************** MOBILE OPTIMIZATION ***********/
@media (max-width: 768px) {

  .content-a-wrapper {
    max-width: 100%;     /* 🔥 full width on mobile */
    padding: 0 15px;     /* spacing from edges */
  }

  .content-a-title {
    font-size: 18px;
  }

  .content-a-subtitle {
    font-size: 16px;
  }

  .content-a-text {
    font-size: 14px;
    line-height: 1.6;
    text-align: left;    /* 🔥 important for readability */
  }

  .content-a-bullets li {
    font-size: 13px;
  }

  .content-a-image img {
    border-width: 3px;   /* slightly thinner on mobile */
  }
}


/************* Responsive Wrapper ****************/
/* Unique Norstone Slider Styling */
/* Container sizing */
/* Container */
/* Main Slider Square Fix */
/* Main Slider - Mobile Optimized */
#norstone-main .item {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
#norstone-main .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hide Nav Arrows on very small devices to save space */
@media (max-width: 576px) {
    #norstone-main .owl-nav {
        display: none !important;
    }
}

/* Thumbnail Styling */
#norstone-thumbs .item {
    aspect-ratio: 1 / 1;
    margin: 4px;
    opacity: 0.5;
    transition: 0.3s;
    cursor: pointer;
}
#norstone-thumbs .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 2px solid transparent;
}

/* Active Highlight */
#norstone-thumbs .owl-item.current .item {
    opacity: 1;
}
#norstone-thumbs .owl-item.current .item img {
    border-color: #fbcb04; /* Brand Yellow */
}

/* Import Rock Salt Font */
@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap');

.brand-display {
  padding: 0px;
  text-align: left;
}

.rocks-brand {
  font-family: 'Rock Salt', cursive;
  color: #fbcb04; /* Your Brand Yellow */
  font-size: 16px;
  line-height: 1.6;
  text-transform: capitalize;
  /* Optional: adds a subtle tech-glow */
  text-shadow: 2px 2px 10px rgba(251, 203, 4, 0.3);
}

/* Mobile Adjustment */
@media (max-width: 768px) {
  .rocks-brand {
    font-size: 16px;
  }
}


/* Custom Square Icon Style */
/* The Square Container */
.icon-square-a {
  width: 100%;
  /* Changed to 2/1 for a wider, shorter look (less height) */
  aspect-ratio: 1.9 / 0.5; 
  background: #111111;
  border: 1px solid rgba(251, 203, 4, 0.15);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  position: relative;
}

/* Image Wrapper */
.icon-img-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.icon-img-wrapper img {
  width: 100%;
  height: 100%;
  /* 'cover' ensures the stone pattern fills the wide box perfectly */
  object-fit: contain; 
  transition: transform 0.3s ease;
}

/* Footer (The Name) */
.icon-footer-a {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(26, 26, 26, 0.85); /* Slightly darker for wider surface */
  padding: 6px 2px; /* Reduced padding slightly for shorter height container */
  text-align: center;
  border-top: 1px solid rgba(251, 203, 4, 0.1);
  z-index: 2;
  transition: all 0.3s ease;
}

.icon-footer-a span {
  font-size: 0.75rem; /* Slightly larger as boxes are now wider */
  font-weight: 600;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
}

/* HOVER EFFECTS */
.icon-square-a:hover {
  border-color: #fbcb04;
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.4);
}

.icon-square-a:hover .icon-footer-a {
  background: #fbcb04;
}

.icon-square-a:hover .icon-footer-a span {
  color: #000000;
}

.icon-square-a:hover .icon-img-wrapper img {
  transform: scale(1.05); /* Reduced scale slightly for better look on wide images */
}

/* Mobile Adjustments */
@media (max-width: 576px) {
  .icon-square-a {
    aspect-ratio: 1.8 / 0.49; /* Slightly more height on mobile to keep it tap-friendly */
  }
  .icon-footer-a span {
    font-size: 0.65rem;
  }
}

/* FIX FOR MODAL FOOTER */
.modal-body {
    position: relative;
    overflow: hidden;
    padding: 0 !important; /* Ensure no gaps in modal */
}

.modal-body .icon-footer-a {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.75);
    border: none;
    padding: 12px 0;
}

.modal-body .icon-footer-a span {
    color: #fbcb04;
    font-size: 1rem;
    letter-spacing: 1.5px;
}

.modal-body img {
    display: block;
    width: 80%;
    height: auto;
}


/********** PARTNER CARDS START ***********/
/* Card Container */
.partner-card-link {
  text-decoration: none !important;
  display: block;
  height: 100%;
}

.partner-card {
  background: #111111;
  border: 1px solid rgba(251, 203, 4, 0.15);
  border-radius: 12px;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  transition: all 0.3s ease-in-out;
  overflow: hidden; /* Clips the image to the card's rounded corners */
}

/* Full Width Logo/Image Box */
.partner-logo-box {
  width: 100%;
  height: 200px; /* Increased height for better visibility */
  background: #222; 
  padding: 0; /* Removed padding to let image hit the edges */
  margin: 0;
  overflow: hidden;
}

.partner-logo-box img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Fills the box completely */
  display: block;
  transition: transform 0.5s ease;
}

/* Text Content Area */
.partner-content {
  padding: 25px 20px;
  flex-grow: 1;
  border-top: 2px solid #fbcb04; /* Brand line separating image and text */
}

.partner-content h3 {
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.partner-content p {
  color: #999999;
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 0;
}

.partner-content a {
  display: inline-block;
  color: #fbcb04;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  margin-top: 15px;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.partner-content a:hover {
  color: #ffffff;
}

/* HOVER EFFECTS */
.partner-card-link:hover .partner-card {
  border-color: #fbcb04;
  transform: translateY(-8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.partner-card-link:hover .partner-logo-box img {
  transform: scale(1.1); /* Zooms the image slightly on hover */
}

.partner-card-link:hover .partner-content h3 {
  color: #fbcb04;
}

/* Mobile Friendly Tweak */
@media (max-width: 576px) {
  .partner-logo-box {
    height: 160px; /* Slightly shorter on mobile */
  }
}

/* =========================
   FORM POPUP
========================= */

.form-popup {
  position: fixed;
  top: 30px;
  right: 30px;
  background: #fbcb04;
  color: #000;
  padding: 14px 22px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  z-index: 9999;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);

  transition: all 0.3s ease;
}

.form-popup.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.form-popup.error {
  background: #dc3545;
  color: #fff;
}

.form-popup.show{
  opacity: 1 !important;
  visibility: visible !important;
}

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

  .form-popup {
    right: 15px;
    left: 15px;
    top: 20px;
    text-align: center;
  }

}


/* Premium Button Styling */
.btn-premium-download {
  display: inline-flex;
  align-items: center;
  justify-content: center; /* Centers content perfectly on mobile full-width */
  background-color: #121212; 
  color: #fbcb04; 
  border: 2px solid #fbcb04;
  padding: 14px 28px; /* Slightly increased padding for easier thumb-tapping on phones */
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
  letter-spacing: 0.5px;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Hover/Active State */
.btn-premium-download:hover,
.btn-premium-download:active {
  background-color: #fbcb04;
  color: #121212 !important; 
  box-shadow: 0 0 15px rgba(251, 203, 4, 0.4);
}

/* Sidebar Widget Container */
.sidebar-info-widget {
  background-color: #121212; 
  border-left: 4px solid #fbcb04; 
  padding: 16px 20px;
  border-radius: 0 6px 6px 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
}

/* Widget Text Fluid Sizing */
.widget-text {
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
  margin: 0; 
  letter-spacing: 0.2px;
}

/* Interactive Link Structure */
.widget-link {
  color: #fbcb04;
  text-decoration: none;
  font-weight: 700;
  display: inline-block;
  transition: all 0.25s ease-in-out;
  position: relative;
}

/* White hover transition */
.widget-link:hover,
.widget-link:active {
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

/* Responsive Rules for Small Displays */
@media (max-width: 576px) {
  .sidebar-info-widget {
    padding: 14px 16px; /* Tightens padding to maximize text grid space */
  }
  
  .widget-text {
    font-size: 0.95rem; /* Drop font size slightly on very narrow screens to prevent forced breaking */
  }
}