/* Root Colors */
:root {
  --color-primary: #dc3545; /* example primary color (red) */
  --color-secondary: #666;  /* text secondary */
  --color-dark-overlay: #000000a2; /* overlay for slides */
  --color-black: #000;
  --color-white: #fff;
  --color-link-hover: #dc3545;
}

/* Reset */
* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
}

body { 
  font-family: Poppins, sans-serif; 
  font-weight: 300; 
}

/* Custom Navbar */
.custom-navbar {
  z-index: 1000;
  transition: height 0.3s ease;
  height: 90px;
}

.custom-navbar.expanded { 
  height: 380px; 
}

.custom-navbar .navbar-inner {
  height: 90px;
}

.custom-navbar .nav-links ul { 
  list-style: none; 
}

.custom-navbar .nav-links {
  align-items: center; /* vertical centering */
}

.custom-navbar .nav-links ul {
  align-items: center;
  margin: 0;
  padding: 0;
}

/* Ensure nav links sit to the right side next to the Contact button */
.custom-navbar .nav-links {
  margin-left: auto; /* push nav to the right */
  margin-right: 12px; /* small gap between nav and contact button */
}

.custom-navbar .nav-item a {
  text-decoration: none;
  color: var(--color-black);
  font-size: 13px;
}

.custom-navbar .nav-item.has-dropdown > a::after {
  content: " ▼";
  font-size: 0.7rem;
  margin-left: 5px;
}

.custom-navbar .hamburger span { 
  width: 25px; 
  height: 3px; 
  background: var(--color-black); 
  transition: all 0.3s ease; 
}

.custom-navbar .mobile-contact { 
  display: none; 
}

.custom-navbar .desktop-contact { 
  display: block; 
}

.custom-navbar .mega-content {
  display: none;
  padding: 20px 60px;
  max-height: 280px;
}

.custom-navbar.expanded .mega-content { 
  display: flex; 
}

.mega-col { 
  flex: 0 1 auto; 
}

.mega-col h4 { 
  margin-bottom: 20px; 
  font-size: 1.5rem; 
  color: var(--color-white);
}

.mega-col a {
  text-decoration: none;
  color: var(--color-white);
  display: block;
  padding: 5px 0;
  font-size: 14px;
  transition: color 0.3s ease;
}

.mega-col a:hover { 
  color: var(--color-link-hover); 
}

/* Hero Section */
.hero { 
  overflow: hidden; 
  height: 100vh;
}

.slide { 
  margin-top: 50px;
  background-size: contain;      /* scale image to cover the container */
  background-position: center; /* center the image horizontally and vertically */
  background-repeat: no-repeat;/* prevent tiling */
  opacity: 0; 
  transition: opacity 0.8s ease; 
  height: 100vh;
}


.slide.active { 
  opacity: 1; 
}


.slide-1 { 
  background-image: url('/assets/slide_one.png'); 
}

.slide-2 { 
  background-image: url('/assets/aic_one_slide.webp'); 
}

.slide-3 { 
  background-image: url('/assets/orcaa_slide.webp'); 
}

.slide-4 { 
  background-image: url('/assets/proba_slide.webp'); 
}

.slide-5 { 
  background-image: url('/assets/complyon_slide.webp'); 
}

.slide-6 { 
  background-image: url('/assets/engagenet_slide.webp'); 
}

.slide-7 { 
  background-image: url('/assets/x_verdict_slide.webp'); 
}

.slide-8 { 
  background-image: url('/assets/proba_work_slide.webp'); 
}

.text-content { 
  padding: 20px; 
  position: relative;
  z-index: 5;
}

.button-class { 
  background: linear-gradient(90deg, var(--color-primary), var(--color-black)); 
  padding: 12px 25px; 
  cursor: pointer; 
  position: relative;
  display: inline-block;
}

.arrows { 
  padding: 0 20px; 
  font-size: 2.5rem; 
  cursor: pointer; 
  z-index: 10; 
}

/* Mobile Styles */
@media (width < 768px) {
  .custom-navbar .navbar-inner { 
    padding: 15px 20px; 
  }

  .custom-navbar .nav-links {
    position: absolute;
    top: 90px;
    left: 0;
    width: 100%;
    background: var(--color-white);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .custom-navbar .nav-links.active { 
    max-height: 500px; 
  }

  .custom-navbar .nav-links ul { 
    flex-direction: column; 
    gap: 0; 
    padding: 0; 
    width: 100%; 
  }

  .custom-navbar .nav-item { 
    width: 100%; 
    border-bottom: 1px solid #eee; 
  }

  .custom-navbar .nav-item a { 
    display: block; 
    padding: 15px 20px; 
    width: 100%; 
  }

  .custom-navbar .desktop-contact { 
    display: none; 
  }

  .custom-navbar .mobile-contact { 
    display: block; 
    border-bottom: none; 
  }

  .custom-navbar .mobile-contact .search { 
    width: calc(100% - 40px); 
    margin: 15px 20px; 
    display: block; 
  }

  .custom-navbar .hamburger { 
    display: flex; 
  }

  .custom-navbar.expanded { 
    height: 90px; 
  }

  .custom-navbar .mega-content { 
    display: none !important; 
  }

  .custom-navbar .hamburger.active span:nth-child(1) { 
    transform: rotate(45deg) translate(5px, 5px); 
  }

  .custom-navbar .hamburger.active span:nth-child(2) { 
    opacity: 0; 
  }

  .custom-navbar .hamburger.active span:nth-child(3) { 
    transform: rotate(-45deg) translate(7px, -6px); 
  }

  .text-content h1 { 
    font-size: 1.5rem !important; 
  }

  .text-content p { 
    font-size: 0.9rem; 
  }

  .arrows { 
    font-size: 1.5rem; 
  }
}

.partner-section {
      background: var(--color-black);
      min-height: 50vh;
    }

    .contact-icon {
      background-color: var(--primary-red);
      width: 50px;
      height: 50px;
    }

    .solution-card{
      background-color: #0e0e0e;
    }

    .solution-card:hover{
      box-shadow: var(--color-primary) 0 4px 15px !important;
    }

    .form-control::placeholder{
      font-size: 12px;
    }

    /* Desktop navbar (visible on lg and above) uses utilities in markup; no CSS needed */

    /* Offcanvas fullscreen tweaks */
    .offcanvas-fullscreen {
      top: 0 !important;                 /* start from very top */
      left: 0 !important;
      z-index: 3000 !important;          /* ensure it sits above other elements */
      background: var(--color-black);  /* base bg color */
      padding: 0;                        /* we control spacing inside */
    }

    .btn-close.btn-close-white {
      filter: invert(1) brightness(2); /* ensure visible on black */
    }

    /* Offcanvas body uses full height and stacks content nicely */
    .offcanvas-fullscreen .offcanvas-body {
      padding: 1.5rem 0.75rem;
      height: calc(100vh - 56px); /* allow for header area */
      overflow-y: auto;
      background: var(--color-black);
    }

    /* Nav link styles */
    .offcanvas-fullscreen .nav-link {
      color: var(--link-white);
      padding: 0.9rem 1.25rem;
      font-size: 1.05rem;
    }

    .offcanvas-fullscreen .nav-link:hover,
    .offcanvas-fullscreen .nav-link:focus {
      color: var(--accent-color);
    }

    /* Collapse children slightly indented */
    .offcanvas-fullscreen .collapse .nav-link {
      padding-left: 2.25rem;
      font-size: 0.9rem;
      opacity: 0.95;
    }

    /* Contact CTA inside offcanvas */
    .offcanvas-fullscreen .mobile-contact a {
      background: var(--color-primary);
    }

    /* Popup container */
    .swal-popup {
      background: linear-gradient(135deg, var(--color-primary), var(--color-black));
      border-radius: 17px;
      color: white;
    }

    /* Title */
    .swal-title {
      font-size: 24px;
    }

    /* Confirm button */
    .swal-button {
      background-color: white !important;
      color: var(--color-black) !important;
      font-weight: bold;
      border-radius: 50px;
      transition: 0.3s;
    }