/* Default - large screens */
.navbar-nav .nav-link.active {
    background-color: transparent !important;  /* remove background */
  color: #ffffff !important;                 /* blue text */
  font-weight: 900;                    /* bold */
  border-radius: 0;
  padding: 8px 15px !important;
  transition: color 0.3s ease, font-weight 0.3s ease;
}

/* Optional spacing between links */
.navbar-nav .nav-link {
  color: #cccccc;
  margin-right: 10px;
  padding: 8px 15px;
  border-radius: 8px;
  transition: color 0.3s ease;
  text-align: center;
}




.navbar-nav .nav-link:hover {
  color: #f2f2f3;
}


/* Small screens - override active link */
@media (max-width: 991.98px) { /* Bootstrap lg breakpoint */
  .navbar-nav .nav-link.active {
   background-color: transparent !important;
    color: #f2f2f3 !important;
    font-weight: 700;
    padding: 8px 0 !important;            /* optional: reduce padding */
  }
  
  /* Center navbar items on mobile */
  .navbar-collapse {
    text-align: center;
  }
  
  .navbar-nav {
    text-align: center;
    margin: 0 auto !important;
  }
  
  .navbar-nav .nav-item {
    text-align: center;
  }
  
  .navbar-nav .nav-link {
    text-align: center !important;
    display: block;
    width: 100%;
    justify-content: center;
  }
}

/* Sticky / shrink-on-scroll navbar */
.navbar {
   background-color: #141414 !important; /* Set background to blue */
  transition: padding 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
  padding: 1rem 1rem; /* original size */
  will-change: padding, background-color;
}



/* when fixed at top */
.navbar.navbar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1030;
}

/* smaller appearance while scrolled */
.navbar.navbar-shrink {
  padding: 0.35rem 1rem;                 /* reduce vertical size */
  background-color: rgba(255, 255, 255, 0.98); /* slight solid bg to sit above content */
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.navbar.navbar-shrink .nav-link.active {
  padding: 0.25rem 0.5rem !important;
  font-size: 0.95rem;
  font-weight: 900;
}

/* shrink brand/logo and nav links smoothly */
.navbar .navbar-brand img { transition: height 200ms ease; height: 56px; }
.navbar.navbar-shrink .navbar-brand img { height: 40px; }

.navbar .nav-link { transition: padding 200ms ease, font-size 200ms ease; padding: 0.5rem 0.75rem; }
.navbar.navbar-shrink .nav-link { padding: 0.25rem 0.5rem; font-size: 0.95rem; }

/* ensure body content doesn't jump when navbar becomes fixed:
   JS will add inline padding-top; keep a fallback for very old browsers */
@supports (padding-top: 0px) {
  /* no-op here; JS adds exact offset */
}

/* mobile tweaks so shrink looks good on small screens */
@media (max-width: 767.98px) {
  .navbar { padding: 0.6rem 0.75rem; }
  .navbar.navbar-shrink { padding: 0.25rem 0.75rem; }
  .navbar .navbar-brand img { height: 44px; }
  .navbar.navbar-shrink .navbar-brand img { height: 36px; }
}

.stats-section
{
  background-color: #141414;
}



  .top-header {
      background-color: #262626; /* light gray background */
      padding: 5px 20px;
      font-size: 12px;
    }

    .top-header .contact-item i {
      font-size: 10px;
      color: white;
      margin-right: 5px;
      vertical-align: middle;
    }

    .top-header .contact-item {
      display: flex;
        color: white;
      align-items: center;
      margin-left: 20px;
    }

.custom-row-height {
  min-height: 500px; /* minimum height, adjusts if content grows */
}


@media (max-width: 991.98px) {
  .search-box,
  .info-box { max-width: 92%; padding-left: 0.5rem; padding-right: 0.5rem; }
  .search-box .form-control,
  .search-btn { font-size: 1rem; padding: 0.75rem 1rem; }
}



.crystal-chronicles {
  padding: 10px 0;
  background: #f9f9f9;
}

.crystal-chronicles h2 {
  margin-bottom: 30px;
  font-weight: 600;
  color: #333;
}

/* GRID */
.chronicles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Desktop = 4 */
  gap: 20px;
}

/* CARD */
.crystal-card {
  display: flex !important;
  flex-direction: row !important;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  min-height: 180px;
  min-width: 300px;
}

/* IMAGE */
.crystal-card img {
  width: 120px;
  object-fit: cover;
  flex-shrink: 0;
}

/* CONTENT */
.crystal-content {
  padding: 15px;
}

.crystal-content h3 {
  margin: 0 0 8px;
  font-size: 16px;
  color: #1a73e8;
}

.crystal-content p {
  margin: 0;
  font-size: 13px;
  color: #555;
  line-height: 1.4;
}

/* ===== TABLET ===== */
@media (max-width: 1024px) {
  .chronicles-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
  }

  .crystal-card {
    min-height: 140px;
  }

  .crystal-card img {
    width: 110px;
  }

  .crystal-content h3 {
    font-size: 15px;
  }

  .crystal-content p {
    font-size: 12.5px;
  }
}

/* ===== MOBILE ===== */
@media (max-width: 600px) {
  .chronicles-grid {
    grid-template-columns: 1fr; /* 1 column */
  }

  .crystal-card {
    min-height: auto;
  }

  .crystal-card img {
    width: 100px;
  }
}





  .number-box {
  max-width: 1100px;
  margin: 1.5rem auto;
  padding: 0 1rem;
  padding-top: 40px;
  text-align: center;
}

.number-box h2 {
  margin-bottom: 0.3rem;
  font-size: clamp(1.3rem, 2.2vw + 0.6rem, 3rem); /* larger, responsive */
  color: #ffffff;
  font-weight: 500;
  text-align: center;
}

/* make list items into responsive boxes */
.number-box ul {
  list-style: none;
  margin-top: 50px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.number-box ul li {
  background: transparent;
  color: #26c06b;
  padding: 1.25rem 1.5rem;
  border-radius: 10px;
  box-shadow: none;
  display: flex;
  flex-direction: column;     /* stack number above label */
  gap: 0.25rem;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  min-height: 120px;          /* taller to emphasize number */
  text-align: center;
  border: none;
}

/* number on top */
.number-box ul li .num {
  font-size: clamp(1.6rem, 4vw, 3.5rem);
  line-height: 1;
  font-weight: 800;
   color: #26c06b;
}

/* label below */
.number-box ul li .label {
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  font-weight: 300;
  padding-top: 10px;
  color: #f4f4f4;
}

/* small screen tweaks */
@media (max-width: 576px) {
  .number-box ul li { min-height: 88px; padding: 0.75rem; }
  .number-box ul li .num { font-size: 1.6rem; }
  .number-box ul li .label { font-size: 0.95rem; }
}

/* make images responsive and prevent horizontal scroll */
.hero-img,
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ensure full-bleed containers don't create scroll and hero image scales */
.container-fluid.px-0 { padding-left: 0 !important; padding-right: 0 !important; }

.hero-img {
  width: 100%;       /* fill column */
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain; /* or cover if you want cropped fill */
}

/* optional: prevent tiny layout overflow */
html, body { overflow-x: hidden; }

/* Hero as full-bleed background with text foreground */
.hero-section {
  /* Background image */
  background-color:white;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* Fixed height */
  height: 60vh; /* Set height to match the red line */
  width: 100%; /* Full width */
  display: flex;
  align-items: center;
  position: relative;
  padding: 0; /* Remove extra padding */
  overflow: hidden;
}

/* Carousel Images */
.hero-section .carousel-item img {
  width: 100%; /* Ensure the image spans the full width */
  height: 100%; /* Ensure the image spans the full height */
  object-fit: cover; /* Fill container on large screens */
  object-position: center; /* Center the image */
}

/* Show full image without cropping on smaller screens */
@media (max-width: 991.98px) {
  .hero-section .carousel-item img {
    object-fit: contain; /* Show full image on smaller screens */
  }
}


/* Hero Content */
.hero-section .container {
  position: relative;
  z-index: 2;
  color: #fff;
  text-align: center;
}

.hero-section h1 {
  font-size: 1.5rem; /* Adjust font size for smaller height */
  font-weight: bold;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}

.hero-section p {
  font-size: 1rem; /* Adjust font size for smaller height */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

.hero-section .btn {
  font-size: 0.9rem; /* Adjust font size for smaller height */
  padding: 5px 10px;
}

/* Responsive Adjustments */
@media (max-width: 991.98px) {
  .hero-section h1 {
    font-size: 1.2rem;
  }
}

@media (max-width: 576px) {
  .hero-section h1 {
    font-size: 1rem;
  }
}

/* keep navbar above the hero visuals */
.navbar {
  position: relative;
  z-index: 30;
}

/* Dropdown popup styling for navbar "Services" */
.navbar .nav-item.dropdown .nav-link { cursor: pointer; }
.navbar .dropdown-menu {
  min-width: 220px;
  border-radius: 10px;
  padding: 0.4rem;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.06);
}
.navbar .dropdown-item {
  color: #002D72;
  font-weight: 600;
  padding: 0.6rem 1rem;
}
.navbar .dropdown-item:hover {
  background: rgba(0,45,114,0.06);
  color: #002D72;
}

/* Mega (horizontal) dropdown for Services */
.dropdown-menu.mega-menu {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 940px;                /* adjust max width */
  max-width: calc(100vw - 40px);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.06);
  padding: 1rem;
}

/* headings inside columns */
.mega-menu .dropdown-heading {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #0c0c0c;
}

/* make each link look like a block item */
.mega-menu .dropdown-item {
  padding: 0.45rem 0.6rem;
  color: #002D72;
  font-weight: 400;
  border-radius: 6px;
}
.mega-menu .dropdown-item:hover {
  background: rgba(0,45,114,0.06);
}

/* responsive: stack columns inside collapsed navbar / small screens */
@media (max-width: 991.98px) {
  .dropdown-menu.mega-menu {
    position: static;       /* let it flow inside collapsed menu */
    transform: none;
    width: 100%;
    left: 0;
    box-shadow: none;
    border: none;
    padding: 0.5rem 1rem;
    margin: 0;
    text-align: center;
  }
  .mega-menu .container { 
    padding: 0; 
    max-width: 100%;
  }
  .mega-menu .row {
    margin: 0;
    justify-content: center;
  }
  .mega-menu .col-sm-6,
  .mega-menu .col-md-4,
  .mega-menu .col-sm-12 {
    padding: 0.5rem 0;
    text-align: center;
  }
  .mega-menu .dropdown-item { 
    padding-left: 0;
    text-align: center;
    margin-bottom: 0.25rem;
    display: block;
    width: 100%;
  }
  .mega-menu .dropdown-heading {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    padding-left: 0;
    text-align: center;
  }
}

/* keep icon aligned and subtle */
.navbar .nav-link .bi {
  font-size: 0.9rem;
  line-height: 1;
}

/* responsive: make dropdown full-width on small collapsed navbar */
@media (max-width: 767.98px) {
  .navbar .dropdown-menu {
    position: static; /* let it expand inside the collapsed menu */
    box-shadow: none;
    border: none;
  }
}

/* hide default dropdown caret if you use a custom icon */
.navbar .dropdown-toggle::after {
  display: none;
}

.testimonial-container {
  position: relative;
  width: 60%;
  background-color: #0bde6a;
  padding: 40px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  margin: auto;
}

.testimonial-quote {
  font-size: 24px;
  color: #222;
  margin-bottom: 20px;
  position: relative;
}

.testimonial-quote::before {
  content: '“';
  color: #008000;
  font-size: 40px;
  position: absolute;
  left: -30px;
  top: -10px;
}

.testimonial-author {
  font-size: 16px;
  color: #888;
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: #aaa;
  cursor: pointer;
  user-select: none;
  transition: color 0.3s;
}

.arrow:hover {
  color: #008000;
}

.arrow-left {
  left: 10px;
}

.arrow-right {
  right: 10px;
}

@media (max-width: 768px) {
  .testimonial-container {
    width: 90%;
    padding: 30px;
  }

  .testimonial-quote {
    font-size: 20px;
  }
}

.prevent-compression {
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain; /* Ensures the image maintains its aspect ratio */
}



/* Ensure the carousel has a fixed height */
.hero-section .carousel-inner {
  height: 100vh; /* Full height of the viewport */
}

.hero-section .carousel-item {
  height: 100%; /* Ensure each carousel item fills the height */
}

.hero-section .carousel-item img {
  width: 100%; /* Ensure the image spans the full width */
  height: 100%; /* Ensure the image spans the full height */
  object-fit: cover; /* Fill container on large screens */
  object-position: center; /* Center the image */
   background-color: #f6f6f7;
}

/* Responsive Adjustments for Smaller Screens */
@media (max-width: 991.98px) { /* For tablets */
  .hero-section .carousel-inner {
    height: 80vh; /* Reduce height for smaller screens */
  }
  
  .hero-section .carousel-item img {
    object-fit: contain; /* Show full image on smaller screens */
  }
}

@media (max-width: 576px) { /* For phones */
  .hero-section .carousel-inner {
    height: 60vh; /* Further reduce height for smaller screens */
  }
}

/* Style for the 'know_something' image */
.know-something-img {
  width: 400px;
  height: 400px;
}




/* Hero Section */
.hero-section {
  position: relative;
  width: 100%;
  height: 100vh; /* Full viewport height */
  overflow: hidden;
}

/* Carousel Inner */
.hero-section .carousel-inner {
  width: 100%;
  height: 100%;
}

/* Each carousel item fills full height */
.hero-section .carousel-item {
  width: 100%;
  height: 100%;
}

/* Carousel Images - Fill container on large screens, show full image on smaller screens */
.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Fill container on large screens */
  object-position: center center;
  background-color: #f6f6f7; /* fallback color */
  display: block;
}

/* Show full image on smaller screens */
@media (max-width: 991.98px) {
  .carousel-image {
    object-fit: contain; /* Show full image on smaller screens */
  }
}

/* Hero Text */
.hero-section .hero-text {
  position: relative;
  z-index: 2;
  color: #fff;
  text-align: center;
}

/*
/* Responsive Heights */
@media (max-width: 991.98px) {
  .hero-section { height: 80vh; }
}

@media (max-width: 576px) {
  .hero-section { height: 60vh; }
  .hero-section h1 { font-size: 1.2rem; }
  .hero-section p { font-size: 0.9rem; }
  .hero-section .btn { font-size: 0.8rem; padding: 5px 12px; }
}




.carousel-cta-btn {
  position: absolute;
  bottom: 80px;      /* vertical position */
  right: 25%;        /* horizontal position */
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 30px;
  border: none;
  background-color: #1dbf73;
  color: #fff;
  cursor: pointer;
 opacity: 0;
pointer-events: none;
  z-index: 50;
  transition: all 0.3s ease;
}
.carousel-cta-btn.show {
  opacity: 1;
  pointer-events: auto;
}
/* Hover */
.carousel-cta-btn:hover {
  background-color: #159a5c;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .carousel-cta-btn {
    bottom: 40px;
    right: 50%;
    transform: translateX(50%);
    font-size: 14px;
    padding: 12px 22px;
  }
} 

#carouselApplyBtn {
  position: absolute;
  top: 65%;
  right: 27%;
  transform: translateY(-50%) translateY(40px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease-out, visibility 0.6s ease-out, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 1000;
  background-color: #28a745 !important;
  border-color: #28a745 !important;
  color: white !important;
  font-weight: bold;
  padding: 15px 30px;
  font-size: 18px;
  border-radius: 25px;
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
}

#carouselApplyBtn:hover {
  background-color: #218838 !important;
  border-color: #1e7e34 !important;
  transform: translateY(-50%) translateY(-3px);
  box-shadow: 0 6px 16px rgba(40, 167, 69, 0.6);
}

#carouselApplyBtn.show {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  transform: translateY(-50%) translateY(0px);
}



/* Medium screens (tablets) */
@media (max-width: 991.98px) {
  #carouselApplyBtn {
    top: 70%;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(-50%) translateY(40px);
    padding: 12px 24px;
    font-size: 16px;
  }
  
  #carouselApplyBtn.show {
    transform: translateX(-50%) translateY(-50%) translateY(0px);
  }
  
  #carouselApplyBtn:hover {
    transform: translateX(-50%) translateY(-50%) translateY(-3px);
  }
}

/* Small screens (mobile phones) */
@media (max-width: 767.98px) {
  #carouselApplyBtn {
    top: 75%;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(-50%) translateY(50px);
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 20px;
  }
  
  #carouselApplyBtn.show {
    transform: translateX(-50%) translateY(-50%) translateY(0px);
  }
  
  #carouselApplyBtn:hover {
    transform: translateX(-50%) translateY(-50%) translateY(-3px);
  }
}

/* Extra small screens (very small phones) */
@media (max-width: 576px) {
  #carouselApplyBtn {
    top: 70%;
    left: 70%;
    padding: 8px 16px;
    font-size: 12px;
    border-radius: 18px;
    transform: translateX(-50%) translateY(-50%) translateY(40px);
  }
  
  #carouselApplyBtn.show {
    transform: translateX(-50%) translateY(-50%) translateY(0px);
  }
  
  #carouselApplyBtn:hover {
    transform: translateX(-50%) translateY(-50%) translateY(-3px);
  }
}

/* Hamburger menu button styling - white color */
.navbar-toggler {
  border: none !important;
  padding: 4px 8px;
}

.navbar-toggler:focus {
  box-shadow: none !important;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  filter: none !important;
}