/* html {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow-x: hidden;
      width: fit-content;
    } */

   body {
     margin: 0;
     padding: 0;
     overflow-x: hidden;
     height: 100%;
     font-family: sans-serif;
   }

   .container {
     max-width: 75%;
     padding: 1rem;
   }

   /* Overlay page loader*/
#page-loader {
  position: fixed;
  inset: 0;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 3000;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

#page-loader.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Spinning border ring */
.spinner-ring {
  width: 100px;
  height: 100px;
  border: 5px solid rgba(255, 193, 7, 0.3);
  border-top-color: #6b07d5;
  border-radius: 50%;
  animation: spin 1.2s linear infinite;
}

/* Fixed logo in center */
.logo-ring {
  position: absolute;
  top: 32%;
  left: 50%;
  width: 50px;
  height: 50px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at center, #fff 30%, transparent 70%);
  box-shadow: 0 0 20px rgba(255, 193, 7, 0.7), 0 0 40px rgba(255, 193, 7, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

/* Only the ring rotates */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.loader-text {
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: #333;
  margin-top: 1rem;
  letter-spacing: 0.5px;
}

   .hero-section {
     position: relative;
     overflow: hidden;
     min-height: 100vh;
   }

   .hero-wrapper {
     position: relative;
     height: 124vh;
     overflow: hidden;
   }

   .hero-background,
   .hero-video {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: opacity 1.5s ease;
     z-index: 0;
   }

   .hero-background {
     z-index: 0;
   }

   .hero-video {
     opacity: 0;
     z-index: 0;
   }

   .bg-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(180deg, #7B2CBF, #C43F97);
     opacity: 0.8;
     z-index: 1;
   }


   .hero-content {
     position: relative;
     z-index: 2;
     text-align: center;
     padding: 0 20px;
     top: 25%;
     transform: translateY(-50%);
     max-width: 904px;
     margin: 0 auto;
   }

   .hero-content h1 {
     position: relative;
     z-index: 2;
     font-weight: 600;
     color: white;
     text-align: center;
     padding-top: 40vh;
     font-size: clamp(36px, 6vw, 60px);
     margin: 0 20px;
     line-height: 1.2;
     -webkit-font-smoothing: antialiased;
   }

   #changing-text {
     display: initial;
     border-right: 2px solid #FD9D2E;
     padding-right: 3px;
     white-space: nowrap;
     overflow: hidden;
   }


   .hero-content .subtext {
     font-size: clamp(16px, 2vw, 20px);
     color: #f1f1f1;
     max-width: 700px;
     margin: 0 auto 30px;
     line-height: 1.6;
   }

   .hero-content .buttons {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 1rem;

   }

   @media (max-width: 576px) {
     .hero-content .buttons {
       flex-direction: column;
       align-items: center;
     }

     .hero-content .buttons button,
     .hero-content .buttons a {
       width: 100%;
       max-width: 280px;
       text-align: center;
     }
   }

   .btn-primary,
   .btn-secondary {
     padding: 14px 28px;
     font-size: 16px;
     border-radius: 8px;
     font-weight: bold;
     cursor: pointer;
     border: none;
     transition: all 0.3s ease;
     text-decoration: none;
   }

   .btn-primary {
     background-color: white;
     color: #372e4e;
   }

   .btn-primary:hover {
     background: linear-gradient(180deg, #7B2CBF, #C43F97);
     color: #FD9D2E !important;
   }

   .btn-secondary {
     background-color: rgba(255, 255, 255, 0.2);
     color: white;
     border: 2px solid white;
   }

   .btn-secondary:hover {
     background: linear-gradient(180deg, #7B2CBF, #C43F97);
     color: #FD9D2E !important;
   }

   /* Optional: Adjust spacing on small screens */
   @media (max-width: 480px) {
     .hero-content {
       padding: 0 10px;
     }

     .btn-primary,
     .btn-secondary {
       width: 100%;
       text-align: center;
     }
   }

   @media (max-width: 768px) {
     .hero-content h1 {
       padding-top: 23vh;
       font-size: 46px;
     }
   }

   @media (max-width: 480px) {
     .hero-content h1 {
       padding-top: 50vh;
       font-size: 50px;
     }
   }

   /* ===== MODERN LOGO ===== */
   .logo-box {
     display: flex;
     flex-direction: row;
     align-items: center;
     gap: 11px;
     background: none;
     border: none;
     box-shadow: none;
     padding: 0;
     text-decoration: none;
     transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
   }

   .logo-box:hover {
     transform: scale(1.05);
     cursor: pointer;
   }



   /* NT badge icon */
   .logo-icon {
     width: 42px;
     height: 42px;
     border-radius: 11px;
     background: linear-gradient(145deg, #5A0FC8 0%, #7B2CBF 60%, #9B4DDD 100%);
     border: 1.5px solid rgba(255, 255, 255, 0.35);
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: 'Montserrat', sans-serif;
     font-weight: 900;
     font-size: 1rem;
     color: #ffffff;
     letter-spacing: -0.02em;
     flex-shrink: 0;
     position: relative;
     overflow: hidden;
     transition: transform 0.3s ease, filter 0.3s ease;
   }

   .logo-box:hover .logo-icon {
     transform: rotate(-4deg) scale(1.1);
     filter: brightness(1.2);
     border-color: rgba(255, 255, 255, 0.7);
   }


   /* Right-side text group */
   .logo-text-group {
     display: flex;
     flex-direction: column;
     justify-content: center;
   }

   /* NEXELIX – large, bold, white */
   .logo-brand-name {
     font-family: 'Montserrat', sans-serif;
     font-weight: 800;
     font-size: 1.1rem;
     letter-spacing: 0.12em;
     line-height: 1;
     text-transform: uppercase;
     color: #ffffff;
     display: flex;
     align-items: center;
     gap: 5px;
   }

   /* Accent dot */
   .logo-accent-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: #FD9D2E;
     display: inline-block;
     flex-shrink: 0;
     margin-bottom: 1px;
   }

   /* TECH + Pvt. Ltd. row */
   .logo-brand-tech {
     font-family: 'Montserrat', sans-serif;
     font-weight: 600;
     font-size: 0.68rem;
     letter-spacing: 0.28em;
     line-height: 1;
     color: rgba(255, 255, 255, 0.7);
     text-transform: uppercase;
     display: flex;
     align-items: center;
     gap: 6px;
     margin-top: 5px;
   }

   .logo-brand-tech span.tech-word {
     color: #FD9D2E;
     font-weight: 700;
     font-size: 0.7rem;
   }

   .logo-brand-tech span.pvt-word {
     color: rgba(255, 255, 255, 0.5);
     font-weight: 400;
     font-size: 0.6rem;
     letter-spacing: 0.1em;
   }

   .navbar .nav-link {
     color: white !important;
     cursor: pointer;
     font-family: "Montserrat", Sans-serif;
     font-size: 16px;
     font-weight: normal;
     padding: 15px 0px 15px 0px;
     border-radius: 3px;
   }

   .navbar .nav-link:hover {
     background: linear-gradient(180deg, #7B2CBF, #C43F97);
     border-color: #fff;
     cursor: pointer;
     color: #FD9D2E !important;
     transition: background-color 0.3s ease;
     border-radius: 3px;
   }

   .nav-link.active {
     font-weight: bold;
     background: linear-gradient(180deg, #7B2CBF, #C43F97);
     border-radius: 3px;

   }

   .navbar {
     position: relative;
     z-index: 2;
   }

   /* Base style: visible on desktop/laptop */
   .navbar .quote-btn {
     background: transparent;
     border: 2px solid white;
     color: #fff;
     padding: 10px 20px;
     border-radius: 5px;
     font-weight: bold;
     cursor: pointer;
     margin-left: auto;
     display: inline-block;
     /* Ensure visible by default */
   }

   .navbar .quote-btn:hover {
     background: linear-gradient(180deg, #7B2CBF, #C43F97);
     color: #FD9D2E !important;
   }

   /* Hide on screens smaller than 768px (mobile/tablet) */
   @media (max-width: 768px) {
     .navbar .quote-btn {
       display: none;
     }
   }


   .navbar-toggler .close-icon {
     display: none;
     font-size: 1.5rem;
     color: #000;
     line-height: 1;
   }

   .navbar-toggler:not(.collapsed) .navbar-toggler-icon {
     display: none;
   }

   .navbar-toggler:not(.collapsed) .close-icon {
     display: inline-block;
   }

   .navbar-toggler {
     margin-left: auto;
   }

   @media (max-width: 991.98px) {
     .navbar-collapse {
       width: 100%;
       display: flex;
       justify-content: center;
       background-color: rgba(0, 0, 0, 0.8);
       padding: 2rem 0;
       transition: background-color 0.3s ease;
       z-index: 3;
       /* ensure navbar is above overlay */
       position: relative;
     }

     .navbar-nav {
       flex-direction: column !important;
       align-items: center !important;
       text-align: center;
       margin: 0 auto;
       width: 100%;
       gap: 1rem;
     }

     .navbar .nav-link {
       padding: 10px 0;
       width: 100%;
       font-size: 1.1rem;
       color: white !important;
     }


     .navbar-collapse.show {
       width: 100%;
       background: linear-gradient(180deg, #7B2CBF, #C43F97);
     }

   }

   .navbar,
   .hero-content {
     position: relative;
     z-index: 3;
     /* higher than overlay (1) and bg image (0) */
   }

   /* Make navbar fixed on top and transparent initially */
   .navbar {
     position: fixed;
     /* change from relative */
     top: 0;
     left: 0;
     width: 100%;
     z-index: 10;
     /* above everything */
     background-color: transparent;
     padding: 1.5rem 2rem;
     transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
   }

   /* Navbar style when scrolled */
   .navbar.scrolled {
     background: linear-gradient(180deg, #7B2CBF, #C43F97);
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
     padding: 0rem 2rem;
   }

   /* Keep nav links white */
   .navbar .nav-link {
     color: white !important;
     transition: color 0.3s ease;
   }

   .navbar.scrolled .nav-link:hover {
     color: orange !important;
   }



   .navbar-toggler .close-icon {
     display: none;
     font-size: 1.5rem;
     color: #414141;
     line-height: 1;
   }

   .navbar-toggler:not(.collapsed) .navbar-toggler-icon {
     display: none;
   }

   .navbar-toggler:not(.collapsed) .close-icon {
     display: inline-block;
   }

   .navbar-toggler {
     margin-left: auto;
   }


   .logo-container {
     width: 900px;
     text-align: center;
   }

   .logo-row {
     display: flex;
     justify-content: space-around;
     margin: 20px 0;
     opacity: 0.3;
   }

   .logo-row img,
   .logo-row span {
     max-height: 40px;
     margin: 0 10px;
     filter: grayscale(100%);
   }

   .logo-row span {
     display: flex;
     align-items: center;
     font-weight: 600;
     font-size: 16px;
     color: #888;
   }

   .row.no-gutters {
  --bs-gutter-x: 0 !important;
  --bs-gutter-y: 0 !important;
}

   .brand-title {
     font-size: 2.5rem;
     font-weight: bold;
     font-family: "Montserrat", Sans-serif;
     display: inline-block;
     padding-right: 1rem;
     border-right: 2px solid #000;
     margin-bottom: 0.5rem;
     font-size: 70px;
   }

   .brand-title {
     background: linear-gradient(180deg, #7B2CBF, #C43F97);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     display: inline-block;
   }

   .subtitle {
     font-size: 1.8rem;
     font-weight: 600;
     color: #6c757d;
     text-align: center;
   }

.content p,
.content ul {
  text-align: justify;
  font-family: "Lora", serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.6;  /* Better readability */
  color: #7A7A7A;
  margin-top: 0;
  margin-bottom: 1rem;
}


   .highlight {
     font-weight: bold;
   }

   .fs-5 {
     font-size: 2.25rem !important;
     font-weight: bold;
     margin: 10px;
   }

   .image-container {
     position: relative;
     width: 320px;
     height: 320px;
   }

   .custom-img {
     width: 160px;
     height: 160px;
     object-fit: cover;
     z-index: 2;
   }

   .block {
     width: 189px;
     height: 181px;
     position: absolute;
     z-index: 1;
   }

   .orange {
     background: linear-gradient(180deg, #7B2CBF, #C43F97);
   }

   .yellow {
     background: linear-gradient(180deg, #7B2CBF, #C43F97);
   }


   .py-5 {
     background-color: #414141;
     color: #fff;

   }

   .invo h2 {
     font-family: "Montserrat", Sans-serif;
     font-size: 40px;
     font-weight: bold;
     line-height: 1.2em;
     color: #FFFFFF;
   }

   .btn-animate {
     position: relative;
     display: inline-block;
     padding: 28px 24px;
     border: none;
     border-radius: 999px;
     background: linear-gradient(180deg, #7B2CBF, #C43F97);
     color: #fff;
     font-weight: 600;
     cursor: pointer;
     overflow: hidden;
     text-align: center;
      min-width: clamp(280px, 90%, 350px);
      /* prevent resizing during transition */
     min-height: 15%;
   }

   .btn-animate .btn-text,
   .btn-animate .btn-hover-text {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) translateX(0);
     white-space: nowrap;
     transition: transform 0.4s ease, opacity 0.4s ease;
     opacity: 1;
   }

   .btn-animate .btn-hover-text {
     transform: translate(-50%, -50%) translateX(-100%);
     opacity: 0;
     color: #fff;
   }

   .btn-animate:hover .btn-text {
     transform: translate(-50%, -50%) translateX(100%);
     opacity: 0;
   }

   .btn-animate:hover .btn-hover-text {
     transform: translate(-50%, -50%) translateX(0);
     opacity: 1;
   }

   .btn-animate:hover {
     background-color: #20ca8b;
   }

   .tech-text {
     text-align: center;
     color: red;
     font-family: "Orbitron", Sans-serif;
     font-size: 20px;
     font-weight: bold;
   }

   .tech-container {
     display: flex;
     flex-wrap: wrap;
     gap: 32px;
     /* Gap between tech boxes */
     justify-content: center;
     text-align: center;
   }

   .tech-box {
     max-width: 100px;
     flex: 0 0 auto;
   }

   .tech-icon {
     background: linear-gradient(180deg, #7B2CBF, #C43F97);
     border-radius: 0.5rem;
     width: 90px;
     height: 90px;
     display: flex;
     align-items: center;
     justify-content: center;
   }

   .tech-icon img {
     width: 50%;
     height: 50%;
   }

   .tech-label {
     font-size: 0.95rem;
     font-weight: 600;
     color: #4b5563;
     line-height: 1.3;
   }

   .custom-list {
     margin-top: 10px;
     margin-bottom: 20px;
     padding-left: 20px;
     list-style-type: disc;
     color: #4b5563;
     font-family: "Zilla Slab", Sans-serif;

   }

   .custom-list li {
     font-size: 21px;
     line-height: 1.5;
   }

   .block-box {
     position: relative;
     display: flex;
     justify-content: center;
     /* Center horizontally */
     align-items: center;
     /* Center vertically */
     color: white;
     font-weight: 800;
     font-size: 1.8rem;
     /* Slightly larger text */
     height: 300px;
     /* Increased height */
     width: 100%;
     /* Full width of column */
     overflow: hidden;
     transition: background-color 0.3s ease-in-out;
     border-radius: 10px;
     /* Optional: rounded corners */
   }

   .block-box img.hover-img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     opacity: 0;
     transform: scale(1.1);
     transition: opacity 0.5s ease, transform 0.5s ease;
     z-index: 0;
   }

   .block-box span {
     position: relative;
     z-index: 1;
     text-align: center;
   }

   .block-box:hover img.hover-img {
     opacity: 1;
     transform: scale(1);
   }

   .block-box .hover-text {
     position: absolute;
     bottom: 20px;
     /* Distance from bottom of the box */
     left: 50%;
     transform: translateX(-50%);
     background-color: rgba(0, 0, 0, 0.6);
     color: #fff;
     padding: 6px 12px;
     background-color: #f0ad4e;
     border-radius: 4px;
     font-size: 1rem;
     font-weight: 500;
     opacity: 0;
     transition: opacity 0.3s ease-in-out;
     z-index: 2;
     pointer-events: none;
     /* Ensures it doesn't block hover */
   }

   .block-box:hover .hover-text {
     opacity: 1;
   }

   /* Trusted Css */
   .trust-card {
     max-width: 140px;
     text-align: center;
     margin-right: 20px;
     padding: 10px;
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
   }
    .trust-card:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  }
  /* Start hidden */
  .hidden {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }

  /* Animate in */
  .show {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }

   .trust-card img {
     display: block;
     margin: 0 auto 1rem auto;
   }

   .trust-title {
     font-weight: 700;
     font-size: 1.25rem;
     margin-bottom: 0.5rem;
   }

   .trust-stars {
     color: #f7941d;
     font-size: 1.1rem;
   }

   .trust-badge {
     background: linear-gradient(180deg, #7B2CBF, #C43F97);
     color: white;
     font-weight: 600;
     display: inline-block;
   }

   .container-fluid {
     --bs-gutter-x: 2.5rem;
   }

   @media (max-width: 576px) {
     .trust-card {
       margin-bottom: 2rem;
     }
   }



   /* get in touch Buttons  */

   .contact-section {
     width: 100%;
     /* Full width */
     margin: 0;
     /* Remove any left/right margin */
     padding: 1rem;
     background: linear-gradient(180deg, #7B2CBF, #C43F97);
     min-height: 350px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
   }


   .contact-title {
     font-weight: 800;
     color: white;
     font-size: 1.75rem;
   }

   .contact-title span {
     color: #1f2937;
     /* Equivalent to Tailwind's gray-800 */
   }

   @media (min-width: 576px) {
     .contact-title {
       font-size: 2.25rem;
     }
   }

   /* @media (min-width: 576px) {
      .contact-section {
        width: 100vh;
      }
    } */
   .contact-btn {
     margin-top: 1.5rem;
     background-color: #414141;
     color: white;
     font-weight: 600;
     font-size: 1rem;
     padding: 0.75rem 1.5rem;
     border-radius: 9999px;
     transition: background-color 0.3s ease;
     border: none;
     text-decoration: none;
   }

   .contact-btn:hover {
     background-color: #fff;
     /* Darker hover color */
     color: #f7941d;
   }

   .project-highlight {
     color: #FF5722;
   }

   /* footer css here  */

   /* Footer logo - same modern design as navbar */
   footer .logo-box {
     justify-content: flex-start !important;
   }

   footer .logo-brand-name {
     color: #ffffff;
   }

   footer .logo-brand-tech span.tech-word {
     color: #FD9D2E;
   }

   footer .logo-brand-tech span.pvt-word {
     color: rgba(255, 255, 255, 0.5);
   }

   .footer-logo {
     border: 1px solid white;
     padding: 1rem;
     width: 7rem;
     text-align: center;
   }

   .footer-logo p {
     font-weight: 800;
     font-size: 1.5rem;
     line-height: 1.2;
   }

   .footer-section a {
     color: white;
     font-size: 18px;
     text-decoration: none;

   }

   .footer-section a:hover {
     color: orange;
   }

   .social-icon {
     background: white;
     color: #374151;
     min-width: 40px;
     min-height: 40px;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 1.2rem;
     text-decoration: none;
   }

   .scroll-to-top {
    position: fixed;
    bottom: 6.5rem;
    right: 1.5rem;
    background-color: #d1d5db; /* Tailwind gray-300 */
    color: #374151; /* Tailwind gray-700 */
    padding: 0.75rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 50;
  }

  /* Fade In Animation */
  .scroll-to-top.fade-in {
    opacity: 1;
    transform: scale(1);
  }

  /* Fade Out Animation */
  .scroll-to-top.fade-out {
    opacity: 0;
    transform: scale(0.8);
  }

  /* Hover Animation */
  .scroll-to-top:hover {
    background: linear-gradient(180deg, #7B2CBF, #C43F97);
    color: #fff;
    transform: scale(1.1);
    transition: transform 0.2s ease, background 0.3s ease;
  }

  /* Hide initially */
  .scroll-to-top.hidden {
    display: none;
  }

   /* Project Page Css */

   .hero-section {
     position: relative;
     overflow: hidden;
     min-height: 100vh;
   }


   .project-wrapper {
     position: relative;
     height: 50vh;
     overflow: hidden;
   }

   .project-background {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: opacity 1.5s ease;
     z-index: 0;
   }

   .project-background {
     z-index: 0;
   }

   /* .bg-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #fd9c2edd;
      opacity: 0.9;
      z-index: 1;
    } */

   .project-content h1 {
     position: relative;
     z-index: 2;
     font-size: 60px;
     font-weight: bold;
     font-weight: 700;
     color: white;
     text-align: center;
     padding-top: 10%;
     opacity: 0;
  transform: translateY(30px);
  animation: fadeSlideUp 1s ease-out forwards;
   }
   @keyframes fadeSlideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
   }

   /* Medium screens (tablets) */
   @media (max-width: 991px) {
     .project-content h1 {
       font-size: 50px;
       padding-top: 25%;
     }
   }

   /* Small screens (mobiles) */
   @media (max-width: 767px) {
     .project-content h1 {
       font-size: 45px;
       padding-top: 40%;
     }
   }

   /* Extra small screens (very small mobile devices) */
   @media (max-width: 480px) {
     .project-content h1 {
       font-size: 37px;
       padding-top: 40%;
     }
   }

   .filter-button {
     background: linear-gradient(180deg, #7B2CBF, #C43F97);
     /* Bootstrap warning orange */
     color: #fff;
     padding: 5px 12px;
     font-weight: 600;
     border: none;
     border-radius: 4px;
   }

   nav a {
     text-decoration: none;
     color: inherit;
   }

   .category-tag {
     display: flex;
     align-items: center;
     gap: 5px;
     font-size: 0.9rem;
     font-weight: 600;
   }

   .category-tag .dot {
     width: 10px;
     height: 10px;
     background: linear-gradient(180deg, #7B2CBF, #C43F97);
     border-radius: 50%;;
   }

  .card-overlay {
      position: absolute;
      top: 1rem;
      left: 1.2rem;
      right: 1.2rem;
      background: rgba(6, 39, 106, 0.77);  
      padding: 1.2rem;
      max-width: 90%;
      width: auto;
  }

   .divider {
     height: 3px;
     width: 48px;
     /* background: linear-gradient(180deg, #7B2CBF, #C43F97); */
     background-color: red;
     margin: 0.25rem 0;
   }

   /* Make cursor pointer for interactivity */
   .position-relative {
     cursor: pointer;
     overflow: hidden;
     transition: transform 0.3s ease;
   }

   /* Zoom image on hover */
   .position-relative:hover img {
     transform: scale(1.05);
     transition: transform 0.5s ease;
   }

   /* Animate the card overlay in on hover */
   .card-overlay {
     transition: all 0.3s ease;
   }

   /* Optional: fade up or brighten overlay on hover */
   .position-relative:hover .card-overlay {
     transform: translateY(-5px);
     /* background: rgba(255, 255, 255, 0.85); */
     background-color: #156e80;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
     border-radius: 5px;
   }

   .discover-btn {
     display: none;
     /* background: linear-gradient(180deg, #7B2CBF, #C43F97); */
     background-color: rgb(252, 144, 11);
     color: white;
     border: none;
     padding: 6px 16px;
     font-weight: 600;
     border-radius: 20px;
     font-size: 0.9rem;
     cursor: pointer;
     transition: background 0.3s ease;
   }

   .discover-btn:hover {
     background: linear-gradient(180deg, #dc7907, #fa831b);
     /* darker on hover */
   }

   .position-relative:hover .discover-btn {
     display: inline-block;
   }

   .active-filter {
     background-color: #b447fc !important;
   }

   .category-tag {
     border: none;
     background: none;
     color: inherit;
     display: flex;
     align-items: center;
     gap: 5px;
     font-size: 0.9rem;
     font-weight: 600;
     cursor: pointer;
   }


   /* About Page Css */

   .values-section {
     background-color: #f3f4f6;
     padding: 3rem;
     border-radius: 0.5rem;
     /* add this */
   }


   .value-title {
     color: #374151;
     font-weight: 700;
     font-size: 1.375rem;
     /* approx Tailwind's text-xl */
     margin-bottom: 0.5rem;
   }

   .value-text {
     color: #4b5563;
     /* gray-600 */
     font-size: 0.95rem;
     line-height: 1.6;
   }

   .section-heading {
     color: #4b5563;
     font-weight: 600;
     font-size: 0.9rem;
     text-align: center;
     margin-bottom: 2rem;
   }

   .video-heading {
     color: #4b5563;
     /* Tailwind gray-600 */
     font-weight: 600;
     font-size: 0.9rem;
     text-align: center;
     margin-bottom: 2rem;
   }

   .video-wrapper {
     position: relative;
     padding-bottom: 56.25%;
     /* 16:9 aspect ratio */
     padding-top: 25px;
     height: 0;
   }

   .video-wrapper iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border: 0;
   }

   @import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@1,500&display=swap');

   .strength-section {
     background-color: #fff;
     max-width: 960px;
     margin: 0 auto;
     padding: 40px 20px;
     text-align: center;
   }

   .strength .lies-heading {
     font-family: "Zilla Slab", sans-serif;
     font-size: 30px;
     font-weight: 500;
     font-style: italic;
     line-height: 1.5;
     color: #2a2d2e;
     margin-bottom: 16px;
   }

   .strength {
     font-family: Arial, sans-serif;
     font-weight: 600;
     font-size: 16px;
     color: #2a2d2e;
   }

   .clutch {
     padding-top: 0rem !important;
     padding-bottom: 1rem !important;
   }

   .value-card {
    border-radius: 16px;
    padding: 24px;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    opacity: 0;
    transform: translateY(40px);
    min-height: 200px;
  }

  .value-card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  }

  /* Colorful Gradients */
  .gradient-1 { background: linear-gradient(135deg, #ff7eb3, #ff758c); }
  .gradient-2 { background: linear-gradient(135deg, #be82ff, #4379d6); }
  .gradient-3 { background: linear-gradient(135deg, #00c6ff, #0072ff); }
  .gradient-4 { background: linear-gradient(135deg, #f7971e, #ffd200); }

  /* Scroll animation */
  .show {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    transition: all 0.8s ease-out;
  }

  .value-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 12px;
  }

  .value-text {
    font-size: 1rem;
    line-height: 1.6;
  }


   /* Career Page Css */

   .highlight-1 {
     background: linear-gradient(180deg, #7B2CBF, #C43F97);
     /* Orange */
     color: #fff;
     padding: 0 4px;
     border-radius: 1px;
     max-width: 800px;
   }

   .font-serif {
     font-family: 'Georgia', serif;
   }

   .alert-dismissible .btn-close {
     position: absolute;
     top: 0px;
     right: 0rem;
   }

   .alert {
     font-size: x-small;
   }

   .custom-shadow {
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
       0 4px 6px -4px rgba(0, 0, 0, 0.1);
   }

   .custom-shadow:hover {
     transform: translateY(-5px);
     transition: 0.3s ease-in-out;
   }

   .card img {
     width: 40px;
     height: 40px;
     object-fit: contain;
   }

   .perk-heading {
     color: #4b5563;
     /* text-gray-600 */
     font-weight: 600;
     font-size: 1.125rem;
     /* text-lg */
     margin-bottom: 0.5rem;
   }

   .perk-description {
     color: #6b7280;
     /* text-gray-500 */
     font-size: 0.875rem;
     /* text-sm */
     line-height: 1.6;
   }

   /* Blog Page Css */

   .custom-btn {
     background-color: #f8f9fa;
     font-weight: 600;
     color: #000;
     padding: 0.75rem 1rem;
     width: 100%;
     border: none;
   }

   .category-badge {
     position: absolute;
     top: 1rem;
     right: 1rem;
     background: linear-gradient(180deg, #7B2CBF, #C43F97);
     color: white;
     font-size: 0.75rem;
     font-weight: 600;
     text-transform: uppercase;
     border-radius: 9999px;
     padding: 0.25rem 0.75rem;
   }

   .article-card {
     background-color: #fff;
     border-radius: 0.375rem;
     box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
     overflow: hidden;
   }

   .article-title {
     color: #343a40;
     font-size: 1.125rem;
     font-weight: 600;
     margin-bottom: 0.75rem;
   }

   .article-text {
     color: #6c757d;
     font-size: 0.875rem;
     line-height: 1.5;
     margin-bottom: 1.5rem;
   }

   .article-footer {
     border-top: 1px solid #e9ecef;
     padding: 0.75rem 1.5rem;
     color: #adb5bd;
     font-size: 0.75rem;
   }

   .pagination .page-link {
     color: #000;
   }

   .pagination .page-item.active .page-link {
     background: linear-gradient(180deg, #7B2CBF, #C43F97);
     border-color: #f58220;
     color: #fff;
   }


   /* Contact Page Css */

   .form-container {
     background-color: #f3f4f6;
     padding: 2.5rem;
     border-radius: 0.5rem;
   }

   .form-label {
     font-size: 0.75rem;
     color: #374151;
   }

   .form-note {
     font-size: 0.625rem;
     color: #6b7280;
   }

   .form-description {
     font-size: 0.75rem;
     color: #374151;
   }

   .btn-custom {
     background: linear-gradient(180deg, #7B2CBF, #C43F97);
     color: #fff;
     font-weight: 600;
     font-size: 0.75rem;
   }

   .heading {
     color: #4b5563;
     font-size: 1rem;
     font-weight: 600;
     text-align: center;
     margin-bottom: 1.5rem;
   }

   /* Define Page CSS */

   /* Overlay background */
   .bg-overlay-define {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: #6ec1e4;
     opacity: 0.9;
     z-index: 1;
   }

   /* Heading in define-content section */
   .define-content h1 {
     position: relative;
     z-index: 2;
     font-size: 45px;
     font-weight: 700;
     color: white;
     text-align: center;
     padding-top: 10%;
   }

   /* Heading in def-content section */
   .def-content h1 {
     position: relative;
     z-index: 2;
     font-size: 38px;
     font-weight: 700;
     color: #f58220;
     padding-top: 2%;
   }

   /* Testimonial box */
   .testimonial-text {
     background-color: rgba(65, 65, 65, 0.49);
     color: white;
     font-family: "Zilla Slab", Sans-serif;
     font-size: 18px;
     padding: 1.5rem;
     width: 390px;
     border-radius: 0.5rem;
     text-align: center;
     line-height: 1.7;
     margin: 0 auto;
     /* center on smaller screens */
   }

   /* Responsive adjustments */
   @media (max-width: 768px) {
     .define-content h1 {
       font-size: 30px;
       padding-top: 40%;
     }

     .def-content h1 {
       font-size: 24px;
       padding-top: 20%;
     }

     .testimonial-text {
       width: 90%;
       font-size: 16px;
       padding: 1rem;
     }
   }

   @media (max-width: 480px) {
     .define-content h1 {
       font-size: 30px;
       padding-top: 50%;
     }

     .def-content h1 {
       font-size: 20px;
       padding-top: 25%;
     }

     .testimonial-text {
       font-size: 15px;
       width: 95%;
     }
   }


   /* Design Page css */

   .bg-overlay-design {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: #20ca8b;
     opacity: 0.9;
     z-index: 1;
   }

   /* Evelop Page Css */

   .bg-overlay-evolve {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: #569ab2;
     opacity: 0.9;
     z-index: 1;
   }

   /* Our-Experties-Page css */

   .lies-heading-expert {
     font-family: "Zilla Slab", Sans-serif;
     font-size: 47px;
     font-weight: 500;
     font-style: italic;
     line-height: 53px;
     color: #2a2d2e;
   }

   .section-title {
     color: #cd33f8;
     /* Similar to Tailwind's orange-500 */
     font-weight: 800;
     font-size: 2.25rem;
     line-height: 1.3;
     margin-bottom: 0.5rem;
   }

   .highlight-bar {
     border-bottom: 4px solid #fd9d2e;
     width: 6rem;
     margin: 0 auto 4rem auto;
   }

   .brand-logos img {
     height: 40px;
     width: auto;
     opacity: 0.4;
   }

   .col-md-6 p {
     font-family: "Zilla Slab", Sans-serif;
   }

   /* Remove Google Translate banner and branding */
   .goog-logo-link,
   .goog-te-gadget span,
   .goog-te-banner-frame,
   #goog-gt-tt,
   .goog-te-balloon-frame,
   .goog-te-menu-frame,
   .VIpgJd-ZVi9od-ORHb-OEVmcd {
     display: none !important;
   }

   /* Prevent space from the hidden banner */
   body {
     top: 0px !important;
   }

   /* Prevent browser translate bar push-down effect */
   body>.skiptranslate {
     display: none !important;
   }

   /* Optional: hide dropdown tooltip popup */
   #goog-gt-tt {
     display: none !important;
     visibility: hidden !important;
   }

   .text-xs {
     font-size: 15px;
   }

   .text-sm {
     font-size: 22px;
   }

   .text-md {
     font-size: 20px;
   }


   .bg-overlay-portfolio {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0.9;
     z-index: 1;
   }

   .portfolio-background {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: 0;
   }

   .portfolio-background {
     z-index: 0;
   }

   .orange-underline {
     width: 5rem;
     height: 4px;
     background-color: #f97316;
     /* orange-400 */
     margin: 0.25rem auto 2rem auto;
   }

   .text-orange {
     color: #f97316;
   }

   .text-gray-900 {
     color: #111827;
   }

   .text-gray-700 {
     color: #374151;
   }

   .text-gray-600 {
     color: #4b5563;
   }

   .img-hover-animate {
     transition: transform 0.4s ease, box-shadow 0.4s ease;
     cursor: pointer;
   }

   .img-hover-animate:hover {
     transform: scale(1.05);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
     z-index: 2;
     position: relative;
   }

   /* Project Portfolio Css */

   .img-hover-zoom {
     transition: transform 0.4s ease, box-shadow 0.4s ease;
     cursor: pointer;
   }

   .img-hover-zoom:hover {
     transform: scale(1.05);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
   }








   /* Existing CSS from your style.css remains unchanged; only additions/modifications for Apple devices are included below */

   /* Ensure proper viewport handling for iOS Safari */
   @viewport {
     width: device-width;
     zoom: 1.0;
   }

   /* Fix for iOS Safari viewport height issue (toolbar affects vh units) */
   /*html,*/
    body {
      height: 100%;
      height: -webkit-fill-available;
      /* Use available height for iOS Safari */
      margin: 0;
      padding: 0;
      overflow-x: hidden;
      width: 100%;
      font-family: sans-serif;
    }

   /* Fix for fixed navbar on iOS Safari */
   .navbar {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 10;
     background-color: transparent;
     padding: 1.5rem 2rem;
     transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
     -webkit-backdrop-filter: blur(10px);
     /* Improve fixed navbar rendering on iOS */
     backdrop-filter: blur(10px);
   }

   /* Ensure navbar stays fixed on scroll for iOS */
   .navbar.scrolled {
     background: linear-gradient(180deg, #7B2CBF, #C43F97);
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
     padding: 0.2rem 2rem;
     /* Slightly reduced padding for iOS */
     -webkit-backdrop-filter: none;
     /* Remove blur on scroll for performance */
     backdrop-filter: none;
   }

   /* Adjust hero section for iOS Safari to account for dynamic viewport height */
   .hero-section,
   .hero-wrapper {
     min-height: 100vh;
     min-height: -webkit-fill-available;
     /* Fix for iOS Safari */
     position: relative;
     overflow: hidden;
   }

   /* Fix hero content positioning for iOS */
   .hero-content h1 {
     position: relative;
     z-index: 2;
     font-weight: 600;
     color: white;
     text-align: center;
     padding-top: 40vh;
     font-size: clamp(36px, 6vw, 60px);
     margin: 0 20px;
     line-height: 1.2;
     -webkit-font-smoothing: antialiased;
     /* Improve text rendering on iOS */
   }

   /* Handle touch events for hover effects on touch devices (iPhone/iPad) */
   .navbar .nav-link,
   .btn-animate,
   .block-box,
   .position-relative,
   .img-hover-animate,
   .img-hover-zoom {
     -webkit-tap-highlight-color: transparent;
     /* Remove tap highlight on iOS */
     touch-action: manipulation;
     /* Improve touch responsiveness */
   }

   /* Simulate hover effects for touch devices */
   .navbar .nav-link:active,
   .btn-animate:active,
   .block-box:active,
   .position-relative:active,
   .img-hover-animate:active,
   .img-hover-zoom:active {
     transition: none;
     /* Prevent janky transitions on tap */
   }

   /* Specific hover adjustments for touch devices */
   @media (hover: none) {
     .navbar .nav-link:hover {
       background: none;
       /* Disable hover background on touch */
       color: #FD9D2E !important;
     }

     .btn-animate:hover .btn-text,
     .btn-animate:active .btn-text {
       transform: translate(-50%, -50%) translateX(0);
       opacity: 1;
     }

     .btn-animate:hover .btn-hover-text,
     .btn-animate:active .btn-hover-text {
       transform: translate(-50%, -50%) translateX(-100%);
       opacity: 0;
     }

     .btn-animate:active {
       background-color: #20ca8b;
     }

     .block-box:hover img.hover-img,
     .block-box:active img.hover-img {
       opacity: 1;
       transform: scale(1);
     }

     .block-box:hover .hover-text,
     .block-box:active .hover-text {
       opacity: 1;
     }

     .position-relative:hover img,
     .position-relative:active img {
       transform: scale(1.05);
     }

     .position-relative:hover .card-overlay,
     .position-relative:active .card-overlay {
       transform: translateY(-5px);
       background: rgba(255, 255, 255, 0.85);
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
     }

     .position-relative:hover .discover-btn,
     .position-relative:active .discover-btn {
       display: inline-block;
     }

     .img-hover-animate:hover,
     .img-hover-animate:active {
       transform: scale(1.05);
       box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
     }

     .img-hover-zoom:hover,
     .img-hover-zoom:active {
       transform: scale(1.05);
       box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
     }
   }

   /* Apple-specific media queries for common iOS device resolutions */

   /* iPhone 12/13/14 (390x844) and similar */
   @media only screen and (max-width: 390px) and (-webkit-device-pixel-ratio: 3) {
     .hero-content h1 {
       padding-top: 45vh;
       font-size: clamp(26px, 8vw, 50px);
     }

     .navbar-collapse {
       background: linear-gradient(180deg, #7B2CBF, #C43F97);
       padding: 1.5rem 0;
     }

     .navbar .nav-link {
       font-size: 1rem;
       padding: 8px 0;
     }

     .project-content h1 {
       font-size: 35px;
       padding-top: 35%;
     }

     .define-content h1 {
       font-size: 28px;
       padding-top: 45%;
     }

     .def-content h1 {
       font-size: 20px;
       padding-top: 20%;
     }

     .testimonial-text {
       width: 95%;
       font-size: 14px;
       padding: 0.8rem;
     }
   }

   /* iPhone 14 Pro/Pro Max (393x852, 430x932) */
   @media only screen and (max-width: 430px) and (-webkit-device-pixel-ratio: 3) {
     .hero-content h1 {
       padding-top: 60vh;
       font-size: clamp(48px, 7vw, 52px);
     }

     .project-content h1 {
       font-size: 38px;
       padding-top: 38%;
     }

     .define-content h1 {
       font-size: 30px;
       padding-top: 30%;
     }

     .def-content h1 {
       font-size: 22px;
       padding-top: 18%;
     }

     .contact-section {
       min-height: 300px;
       padding: 0.8rem;
     }

     .contact-title {
       font-size: 1.5rem;
     }
   }

   /* iPad (768x1024, 834x1112, 834x1194) */
   @media only screen and (min-width: 768px) and (max-width: 834px) and (-webkit-device-pixel-ratio: 2) {
     .hero-content h1 {
       padding-top: 35vh;
       font-size: clamp(32px, 5vw, 60px);
     }

     .navbar .nav-link {
       font-size: 1.1rem;
       padding: 25px 12px;
     }

     .project-content h1 {
       font-size: 50px;
       padding-top: 20%;
     }

     .define-content h1 {
       font-size: 35px;
       padding-top: 30%;
     }

     .def-content h1 {
       font-size: 28px;
       padding-top: 15%;
     }

     .contact-section {
       min-height: 400px;
     }

     .contact-title {
       font-size: 2rem;
     }
   }

   /* iPad Pro (1024x1366) */
   @media only screen and (min-width: 1024px) and (max-width: 1366px) and (-webkit-device-pixel-ratio: 2) {
     .hero-content h1 {
       padding-top: 30vh;
       font-size: clamp(36px, 5vw, 64px);
     }

     .navbar .nav-link {
       font-size: 1.2rem;
       padding: 30px 15px;
     }

     .project-content h1 {
       font-size: 55px;
       padding-top: 15%;
     }

     .define-content h1 {
       font-size: 40px;
       padding-top: 25%;
     }

     .def-content h1 {
       font-size: 32px;
       padding-top: 12%;
     }
   }

   /* Fix for flexbox issues on Safari */
   .container-fluid,
   .navbar-nav,
   .logo-row,
   .tech-container {
     display: flex;
     display: -webkit-flex;
     /* Ensure Safari compatibility */
     flex-wrap: wrap;
     -webkit-flex-wrap: wrap;
   }

   /* Ensure scroll-to-top button works smoothly on iOS */
   .scroll-to-top {
     position: fixed;
     bottom: 6.5rem;
     right: 1.5rem;
     background-color: #d1d5db;
     color: #374151;
     padding: 0.75rem;
     border-radius: 0.375rem;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
     -webkit-appearance: none;
     /* Prevent iOS styling */
     touch-action: manipulation;
   }

   /* Improve video rendering on iOS */
   .video-wrapper iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border: 0;
     -webkit-transform: translateZ(0);
     /* Force hardware acceleration */
   }

   /* Prevent text selection on touch drag for better UX */
   body,
   .navbar,
   .btn-animate,
   .nav-link,
   .block-box,
   .position-relative {
     -webkit-user-select: none;
     /* Prevent text selection on iOS */
     user-select: none;
   }

   /* Ensure Google Translate dropdown works on iOS */
   .dropdown-menu {
     -webkit-overflow-scrolling: touch;
     /* Smooth scrolling for dropdowns on iOS */
   }

   /* Fix for contact section alignment on iOS */
   .contact-section {
     width: 100%;
     margin: 0;
     padding: 1rem;
     background: linear-gradient(180deg, #7B2CBF, #C43F97);
     min-height: 350px;
     display: flex;
     display: -webkit-flex;
     flex-direction: column;
     -webkit-flex-direction: column;
     align-items: center;
     -webkit-align-items: center;
     justify-content: center;
     -webkit-justify-content: center;
   }

.logo-slider {
  overflow: hidden;
  width: 100%;
  background: #fff;
  padding: 15px 0;
}

.logo-track {
  display: flex;
  gap: 45px;
  /* spacing between logos */
  animation: slide 30s linear infinite;
}

.logo-track a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
}

.logo-text {
  font-size: 11px;
  color: #007bff;
  margin-top: 5px;
}

.logo-img {
  max-height: 55px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.logo-img:hover {
  transform: scale(1.08);
}

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

   .logo-slider:hover .logo-track {
     animation-play-state: paused;
   }

   .logo-slide a {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-decoration: none;
     flex-shrink: 0;
     /* Prevent shrinking */
   }

   .logo-fluid {
     max-width: 100%;
     height: auto;
     display: block;
   }

   .logo-img {
     max-height: 35px;
     /* Even smaller for tiny screens */
     width: auto;
     height: auto;
     object-fit: contain;
   }

      @media (max-width: 360px) {
      .logo-slider {
        padding: 8px 0;
      }
      .logo-track {
        animation: slide 15s linear infinite;
        gap: 25px;
      }

      .logo-img {
        max-height: 38px;
      }

      .logo-text {
        font-size: 6px;
        margin: 1px 0 0 0;
      }
    }

    @media (min-width: 361px) and (max-width: 768px) {
      .logo-img {
        max-height: 48px;
      }
      .logo-track {
        animation: slide 25s linear infinite;
        gap: 35px;
      }

      .logo-text {
        font-size: 8px;
      }

      .logo-slider {
        padding: 10px 0;
      }
    }

    @media (min-width: 769px) {
      .logo-img {
        max-height: 50px;
      }

      .logo-slider {
        padding: 18px 0;
      }

      .logo-track {
        gap: 55px;
        animation: slide 45s linear infinite;
      }

      .logo-text {
        font-size: 12px;
        margin: 5px 0 0 0;
      }
    }

   @keyframes slide {
     0% {
       transform: translateX(0);
     }

     100% {
       transform: translateX(-350%);
     }
   }

   .logo-slider:hover .logo-track {
     animation-play-state: paused;
   }
  
   @media (min-width: 992px) {
  .col-lg-4.project-card {
    flex: 0 0 auto;
    width: 24.333%;
  }
}


/* Career Page Zoom effect on images */
.img-zoom {
  object-fit: cover;
  max-height: 500px;
  transition: transform 8s ease;
}
.carousel-item.active .img-zoom {
  transform: scale(1.1);
}

/* Caption overlay */
.carousel-caption {
    z-index: 2;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  padding: 20px;
  border-radius: 10px;
  bottom: 20%;
  left: 5%;
  text-align: left;
}
.carousel-item::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.45); /* semi-transparent black overlay */
  z-index: 1;
}

/* Text animations */
@keyframes fadeInDown { from {opacity:0; transform: translateY(-20px);} to {opacity:1; transform: translateY(0);} }
@keyframes fadeInUp { from {opacity:0; transform: translateY(20px);} to {opacity:1; transform: translateY(0);} }

.fadeInDown { animation: fadeInDown 1.5s ease forwards; }
.fadeInUp { animation: fadeInUp 1.5s ease forwards; }

.quote-section { padding: 50px 20px; }
 .quote {
    font-size: 1.5rem;
    font-weight: 500;
    color: #555;
    opacity: 0;
    transform: translateX(-100%);
    transition: all 1s ease-in-out;
  }
    .quote.show {
    opacity: 1;
    transform: translateX(0);
  }
.line {
  width: 0; height: 2px; margin: 15px auto;
  background: #007bff; animation: growLine 1.5s ease forwards 1s;
}
.author {
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease-out;
    text-align: center;
    display: none;
  }
  .author.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
  }

  .role {
    font-size: 0.85rem;
    font-weight: 400;
    color: #ff6600;
    margin-left: 4px;
    font-style: italic;
  }

/* Animations */
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes fadeUp { from{opacity:0; transform:translateY(15px);} to{opacity:1; transform:translateY(0);} }
@keyframes growLine { from{width:0;} to{width:120px;} }


.image-size,
#imageCarousel,
.carousel-inner,
.carousel-item,
.carousel-item img {
  width: 100%;
}

.carousel-item img {
  height: 100vh; /* Full screen height */
  object-fit: cover; /* Crops nicely */
}

/* Hire page */
.containerr {
     width: 100%;
     padding: 0rem;
   }

   /* Define page css */
   /* remove fixed width/height and let Bootstrap’s .img-fluid work */
.custom-imgg {
  width: 100%;
  height: 440px;          /* keeps aspect ratio */
  max-width: 100%;       /* never overflow parent */
}

/* If you want to *cap* the height only on very wide screens */
@media (min-width: 1200px) {
  .custom-imgg {
    max-height: 440px;   /* optional limit */
    object-fit: unset;   /* crop instead of squish if you set a height */
    width: 1440px;
  }
}
  /* fade + upward slide */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.fade-up.show {
  opacity: 1;
  transform: translateY(0);
}

/* gentle zoom for the image */
.zoom-in {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 1s ease, transform 1s ease;
}
.zoom-in.show {
  opacity: 1;
  transform: scale(1);
}
/* optional custom sizing */
#heroSlider img {
  height: 350px;          /* banner-like look */
  object-fit:unset;      /* crop without distortion */
}

  /* Animated Button  calendly*/
  .calendly-animated-btn {
    display: inline-block;
    padding: 14px 30px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
    background: linear-gradient(270deg, #ff0080, #7928ca, #2af598, #009efd);
    background-size: 600% 600%;
    animation: gradientShift 8s ease infinite, bounce 2s infinite;
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
    transition: transform 0.2s ease-in-out;
  }

  .calendly-animated-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 10px 20px rgba(0,0,0,0.4);
  }

  /* Gradient Animation */
  @keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  /* Bounce Animation */
  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }

  @media (max-width: 768px) {
    .calendly-animated-btn {
      padding: 8px 16px;
      font-size: 13px;
      bottom: 15px;
      left: 15px;
    }
  }