:root {
  --theme-color: #00008b;
  --theme-color2: #EA0000;
  --title-color: #0F2239;
  --body-color: #4D5765;
  --smoke-color: #F3F7FB;
  --black-color: #000000;
  --white-color: #ffffff;
  --light-color: #72849B;
  --yellow-color: #FFB539;
  --success-color: #28a745;
  --error-color: #dc3545;
  --border-color: #ecf1f9;
  --title-font: 'Jost';
  /* --body-font: 'Jost'; */
  --icon-font: "Font Awesome 6 Pro";
    --volgarie_font:'volgarieregular';
    --accent:#111;
    --muted:#666;
    --border:#e6e6e6;
    --transition: 0.6s cubic-bezier(.2,.9,.2,1);
  --main-container: 1380px;
  --container-gutters: 24px;
  --section-space: 120px;
  --section-space-mobile: 80px;
  --section-title-space: 70px;
  --ripple-ani-duration: 5s;
  
}
h1, h2, h3, h4, h5, h6,
.section-title,
.services-banner h1 {
  font-family: var(--volgarie_font) !important;
  font-weight: 700;
  letter-spacing: 0.5px;
}

a{
    text-decoration: none;
}

p{
  font-family: 'Jost';
  font-size: 17px;
}
body, html{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
      font-family: 'Jost';

 background:#fff;}
#custom-navbar{
  position: fixed;
 }
 
    /* Navbar with patterned dark background */
    .navbar {
      background: #00008b url("https://studywise.online/assets/img/update1/bg/pattern_bg_2.png");
      background-repeat: repeat;
      background-size: auto;
      padding: 0;
      
      position: relative;
      z-index: 10;
      border: 1px solid #00008b;
    }
/* White angled logo area */
.logo-section {
  width: 280px;        /* Fixed desktop width */
  min-width: 200px;    /* Prevent shrinking too much */
  position: relative;
  background: #ffffff;
  padding: 15px 40px 15px 50px;
  display: flex;
  align-items: center;
  clip-path: polygon(0 0, 95% 0, 80% 100%, 0 100%); /* slightly adjusted for fixed width */
  z-index: 5;
}

.logo-section img {
  height: 50px;
  margin-right: 8px;
}



    /* Nav links */
    .navbar-nav .nav-link {
      color: #ffffff !important;
      text-transform: uppercase;
      font-weight: 600;
      margin: 0 15px;
      transition: color 0.3s;
    }

    .navbar-nav .nav-link:hover {
      color: #ff0033 !important;
    }

    /* Register Button */
    .register-btn {
      background-color: #EA0000;
      color: white;
      font-weight: 700;
      border: none;
      padding: 10px 24px;
      border-radius: 6px;
      transition: 0.3s;
    }



    /* Fix height and align items */
    .navbar .container-fluid {
      display: flex;
      align-items: stretch;
      padding: 0;
    }

    /* Adjust toggle */
    .navbar-toggler {
      margin-right: 15px;
    }


.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
/* White offcanvas background */
.offcanvas , .offcanvas .navbar-nav  {
  background: #ffffff;
  color: #00008b; /* text color for links */
}

/* Offcanvas logo */
.offcanvas-logo {
  height: 50px; /* adjust as needed */
  margin-right: auto; /* push close button to right */
}

/* Links */
.offcanvas .navbar-nav .nav-link {
  
    color: #00008b !important; /* text color for links */

  font-weight: 600;
  margin: 10px 0;
}

.offcanvas .nav-link:hover {
  color: #EA0000;
}

/* Register button centered */
.offcanvas .register-btn {
  display: block;
  margin: 20px auto 0;
  width: auto;
  text-align: center;
}

/* Close button dark on white background */
.offcanvas .btn-close {
  filter: invert(0); /* dark icon */
}

.offcanvas .btn-close:hover {
  filter: brightness(70%);
}



    /* Responsive Design */
    @media (max-width: 992px) {
      .logo-section {
        /* clip-path: none */
        padding: 12px 20px;
        /* width: 100%; */
        justify-content: center;
      }

      .navbar-nav {
        text-align: center;
        background: var(--theme-color);
      }

    }



    
/* ===== Footer Section ===== */
.footer-section {
  background-color: #00008B;
  color: #fff;
  padding: 60px 0 40px;
  /* font-family: "Jost"; */
}

/* Headings */
.footer-section h3,
.footer-section h5 {
  color: #F9C400;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 20px;
}

/* Paragraphs */
.footer-section p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  font-size: 18px;
}

/* Footer Logo */
.footer-logo {
  background: #fff;
  display: inline-block;
  padding: 15px 25px;
  border-radius: 10px;
}

.footer-logo img {
  height: 45px;
  width: auto;
  display: block;
}

/* Footer Links */
.footer-links li {
  margin-bottom: 8px;
  font-size: 24px;
}

.footer-links a {
  color: #fff;
  text-decoration: none;
  font-size: 19px;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #F9C400;
}

/* Footer Contact */
.footer-contact li {
  color: rgba(255, 255, 255, 0.85);
  font-size: 19px;
  line-height: 1.7;
}

.footer-contact i {
  width: 22px;
  color: #F9C400;
}

/* Social Links */
.social-links a {
  color: #000;
  background: #fff;
  display: inline-flex;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  text-decoration: none;
  font-size: 19px;
}

.social-links a:hover {
  background: #F9C400;
  color: #00008B;
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}

/* Brand-specific social colors */
.social-links a:nth-child(1) { color: #1877F2; } /* Facebook */
.social-links a:nth-child(2) { color: #0A66C2; } /* LinkedIn */
.social-links a:nth-child(3) { color: #E4405F; } /* Instagram */
.social-links a:nth-child(4) i { color: #25D366; } /* WhatsApp */

/* Footer Divider */
.footer-section hr {
  border-color: rgba(255, 255, 255, 1);
}

/* Footer Bottom */
.footer-section p.small {
  color: #F9C400;
  font-size: 19px;
  margin-top: 10px;
}

/* ===== Responsive Design ===== */
@media (max-width: 991px) {
  .footer-section {
    text-align: center;
  }

  .footer-logo {
    margin: 0 auto 20px;
  }

  .social-links {
    justify-content: center;
  }

  .footer-links,
  .footer-contact {
    text-align: center;
  }
}

@media (max-width: 576px) {
  .footer-section {
    padding: 50px 0 30px;
  }

  .footer-section h5 {
    font-size: 18px;
  }


  
  .footer-links,.footer-section h5,
  .footer-contact {
    text-align: left;
  }


}
/* ===== Responsive Adjustments ===== */

/* For large tablets (max-width: 1024px) */
@media (max-width: 1024px) {
  .carousel-track img {
    height: 220px !important;
    border-radius: 14px;
    padding: 8px;
  }
}

/* For tablets (max-width: 768px) */
@media (max-width: 768px) {
  .carousel-track img {
    height: 200px !important;
    border-radius: 12px;
    padding: 6px;
  }
}

/* For mobile phones (max-width: 576px) */
@media (max-width: 576px) {
  .carousel-track img {
    height: 160px !important;
    border-radius: 10px;
    padding: 5px;
  }
}

/* For extra small screens (max-width: 400px) */
@media (max-width: 400px) {
  .carousel-track img {
    height: 140px !important;
    border-radius: 8px;
    padding: 4px;
  }
}
/* ===== Floating Buttons ===== */
.floating-icons {
  position: fixed;
  right: 25px;
  bottom: 50px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 999;
}

/* Common button style */
.float-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

/* Remove underline from floating icons */
.floating-icons a {
  text-decoration: none;
}

/* Just to be safe, prevent underline on hover too */
.floating-icons a:hover {
  text-decoration: none;
}
/* Individual colors */
.phone-btn {
  background-color: #00B4D8; 
}

.whatsapp-btn {
  background-color: #25D366;
}

.scroll-top-btn {
  background-color: #F9C400;
  color: #000;
  display: none; /* Hidden initially */
}

/* Hover Effects */
.float-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.35);
}

/* Show scroll button when page is scrolled */
.show-scroll {
  display: flex !important;
}

/* Responsive */
@media (max-width: 768px) {
  .floating-icons {
    right: 15px;
    bottom: 15px;
  }
  .float-btn {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}





section.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 100vh;
  padding: 50px;
  background: #fff;
  background-image: url(https://img.freepik.com/free-vector/hand-draw-city-skyline-sketch_1035-19581.jpg?uid=R219650897&ga=GA1.1.1181475787.1761282424&semt=ais_hybrid&w=740&q=80);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Light overlay to fade background */
section.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.8); /* 80% white overlay = lighter image */
  backdrop-filter: brightness(1.2);     /* slightly brighten it */
  z-index: 1;
}

/* keep content above overlay */
.hero-text, 
.carousel-container {
  position: relative;
  z-index: 2;
}

    /* ---------- Left Content ---------- */
    .hero-text {
      flex: 0 0 60%;
      padding-right: 3rem;
    }

    .hero-text h1 {
      font-size: 46px;
    font-weight: 700;
    text-transform: uppercase;
      
          /* font-family: var(--volgarie_font); */

    }
.highlight {
  color: #EA0000; /* red highlight for emphasis */
  font-weight: 700;
}

.type-caret {
  border-right: 2px solid #EA0000; /* blinking caret */
  animation: blink 0.8s step-start infinite;
}

@keyframes blink {
  50% { border-color: transparent; }
}

    
    .hero-text p {
      font-size: 1.1rem;
      margin-bottom: 2rem;
      color: #000;
    }

    .enquire-btn {
      display: inline-block;
      padding: 0.9rem 1.8rem;
      border: 1px solid #ccc;
      background: #EA0000;
      color: white;
      font-weight: 500;
      border-radius: 8px;
      text-decoration: none;
      transition: 0.3s ease;
    }


    /* ---------- Right Side Carousels ---------- */
    .carousel-container {
      flex: 0 0 35%;
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      transform: rotate(5deg);
    }

    .carousel {
      position: relative;
      width: 30%;
      height: 700px;
      overflow: hidden;
      border-radius: 20px;
    }

    .carousel-track {
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
    }
    a{
      text-decoration: none;
    }
.carousel-track img {
  width: 100%;
  height: 250px;
  border-radius: 16px;
  padding: 10px;
  background: #ffffff;
  /* object-fit: contain; */
  box-sizing: border-box;
  transition: transform 0.3s ease;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.carousel-track img:hover {
  transform: scale(1.05);
}

    /* ---------- Animations ---------- */
    @keyframes scrollUp {
      0% { transform: translateY(0); }
      100% { transform: translateY(-50%); }
    }

    @keyframes scrollDown {
      0% { transform: translateY(-50%); }
      100% { transform: translateY(0); }
    }

    /* ---------- Assigning Animation Directions ---------- */
    .carousel:nth-child(1) .carousel-track {
      animation: scrollUp 18s linear infinite;
    }
    .carousel:nth-child(2) .carousel-track {
      animation: scrollDown 22s linear infinite;
    }
    .carousel:nth-child(3) .carousel-track {
      animation: scrollUp 20s linear infinite;
    }

    /* ---------- Responsive ---------- */
    @media (max-width: 992px) {
    section.hero {
        flex-direction: column;
        text-align: center;
        min-height: 50vh;
    }
            .hero-text h1 {
    font-size: 35px;}
      .hero-text {
        flex: 1;
        padding-right: 0;
        margin-bottom: 2rem;
                margin-top: 84px;

      }

      .carousel-container {
        transform: rotate(0deg);
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
      }

      .carousel {
        width: 30%;
        height: 500px;
      }
    }


    @media (max-width:550px){
        .hero-text h1 {
    font-size: 35px;}
    section.hero{
        padding: 20px;
    }
    }
       @media (max-width:400px){
        .hero-text h1 {
    font-size: 32px !important;
margin-top: 20px;}
}




.cta-btn {
  display: inline-block;
  margin-top: 20px;
  background: linear-gradient(90deg, #ea0000, #00008b);  color: #fff;
  padding: 12px 25px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
  cursor: pointer;
  pointer-events: auto;
}

 .cta-btn:hover {
  background: linear-gradient(90deg, #ea0000, #00008b);
  box-shadow: 0 0 25px rgba(249, 196, 0, 0.6);
  transform: translateY(-3px);
}




/* ---------- About Section Base Styles ---------- */

.section-title-area {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center !important;
  position: relative;
  z-index: 9;
}

.section-title {
  position: relative;

  z-index: 99;
  margin-bottom: 30px;
  margin-top: -6px;
}
/* .section-title h2{
    font-family: var(--title-font);
    
} */

 .sub-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--theme-color);
  /* font-family: var(--title-font); */
  margin-bottom: 10px;
  text-align: center ;
  text-transform: capitalize;
}
.section-subheading {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 26px;
  margin-bottom: 15px;
  font-family: var(--volgarie_font);
}

.about-text p {
  color: #444;
  margin-left: 4px;
  text-align: justify;
  line-height: 1.8;
  margin-bottom: 18px;
}



/* About Image */
.about-img img {
  width: 100%;
  height: 600px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* ---------- Responsive Media Queries ---------- */

/* Large Tablets / Laptops */
@media (max-width: 1200px) {
  .section-subheading {
    font-size: 24px;
  }
  .stat-box h3 {
    font-size: 28px;
  }
}

/* Tablets */
@media (max-width: 991px) {
  .about-section {
    text-align: center;
    padding: 80px 20px;
  }

  .about-text {
    margin-top: 30px;
  }

  .stats {
    justify-content: center;
  }

  .stat-box {
    flex: 1 1 40%;
    margin-bottom: 20px;
  }
}

/* Large Phones */
@media (max-width: 768px) {
  .section-title .sub-title {
    font-size: 16px;
  }

  .section-subheading {
    font-size: 22px;
  }

  .stat-box h3 {
    font-size: 24px;
  }

  .about-img img {
    height: auto;
  }
}

/* Small Phones */
@media (max-width: 576px) {
  .section-title .sub-title {
    font-size: 14px;
  }

  .section-subheading {
    font-size:19px;
  }

  .about-text p {
    font-size: 0.95rem;
  }

  .stat-box {
    flex: 1 1 100%;
    margin-bottom: 15px;
  }

  .about-section {
    padding: 60px 15px;
  }
}

  .what-we-do {
    width: var(--container-width);
    margin: 0 auto;
    position: relative;
    margin-top: 50px;
  }



  .service {
    border-bottom: 1px solid var(--border);
    padding: 18px 0;
    overflow: visible;
  }

  /* Header (number + title) */
  .service-header {
    font-weight: 600;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    text-transform: uppercase;
    color: var(--accent);
    cursor: pointer;

  }

  .service-header span {
    font-weight: 700;
    font-size: 20px;
    color: #000;
    min-width: 48px;
    text-align: center;
    display: inline-block;
  }

  /* Collapsed summary (only header visible) vs expanded detail */
  .service-detail {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-top: 14px;

    /* animation via max-height for smoother transitions */
    max-height: 0;
    opacity: 0;
    transform: translateY(12px);
    transition: max-height var(--transition), opacity calc(var(--transition) / 1.2) ease, transform var(--transition);
    overflow: hidden;
  }

  /* when active */
  .service-detail.active {
    max-height: 800px; /* big enough to contain content */
    opacity: 1;
    transform: translateY(0);
  }
  
/* Scroll Indicator */
.scroll-indicator {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #444;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 100;
}
.scroll-indicator.show {
  opacity: 1;
}


  .service-detail .text {
    flex: 1 1 70%;
    min-width: 250px;
  }

  .service-detail p {
    font-size: 18px;
    line-height: 1.7;
    color: #333;
    margin: 0;
  }

  .service-detail img {
    flex: 0 0 30%;
    /* max-width: 36%; */
    /* min-width: 160px; */
    height: 250px;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    object-fit: contain;
  }

  /* Visual cue for the active header */
  .service-header[aria-expanded="true"] {
    color: #0b3b66;
  }

  /* Small screens */
  @media (max-width: 900px) {
    .what-we-do { width: 92%; }
    .service-detail { flex-direction: column; gap: 12px; }
    .service-detail img { width: 100%; height: 220px; max-width: none; min-width: 0; }
    .service-detail .text { width: 100%; }
  }
  /* Highlight active header */
.service-header.active-header {
  color: #0b3b66;
  transition: color 0.4s ease;
}


  /* Make header focusable and keyboard friendly */
  .service-header:focus {
    box-shadow: 0 0 0 3px rgba(11,59,102,0.12);
    border-radius: 4px;
  }


    .testimonial-section{
padding: 20px;
    }
.testimonial-wrapper-2 {
  position: relative;
  
}
.testimonial-wrapper-2 .testimonial-image {
  max-width: 450px;
}
@media (max-width: 1199px) {
  .testimonial-wrapper-2 .testimonial-image {
    max-width: initial;
  }
}
.testimonial-wrapper-2 .testimonial-image img {
    width: 100%;
    height: 400px;
    border-radius: 20px;
    object-fit: cover;
}
.testimonial-wrapper-2 .testimonial-content {
  margin-left: -30px;
}
@media (max-width: 1399px) {
  .testimonial-wrapper-2 .testimonial-content {
    margin-left: 0;
  }
}
.testimonial-wrapper-2 .testimonial-content .testimonial-card-items {
  background-color: var(--white);
  padding: 30px;
  border-radius: 15px;
  margin-top: 20px;
}
@media (max-width: 1399px) {
  .testimonial-wrapper-2 .testimonial-content .testimonial-card-items {
    margin-top: 0;
  }
}
@media (max-width: 1199px) {
  .testimonial-wrapper-2 .testimonial-content .testimonial-card-items {
    padding: 40px;
    margin-top: 20px;
  }
}
.testimonial-wrapper-2 .testimonial-content .testimonial-card-items .star-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}
.testimonial-wrapper-2 .testimonial-content .testimonial-card-items .star-item .star i {
  color: rgb(241, 101, 34);
}
.testimonial-wrapper-2 .testimonial-content .testimonial-card-items .star-item .star span {
  font-size: 12px;
  font-weight: 400;
  padding-left: 16px;
  color: var(--header);
}
.testimonial-wrapper-2 .testimonial-content .testimonial-card-items .client-info-items {
  display: flex;
  align-items: center;
  gap:20px;
  margin-top: 28px;
}
@media (max-width: 1199px) {
  .testimonial-wrapper-2 .testimonial-content .testimonial-card-items .client-info-items {
    flex-wrap: wrap;
  }
}
.testimonial-wrapper-2 .testimonial-content .testimonial-card-items .client-info-items .info-text h6 {
  color: #1D3638;
  margin-bottom: 5px;
}
.testimonial-wrapper-2 .testimonial-content .testimonial-card-items .client-info-items h5 {
  font-weight: 500;
  color: var(--text);
}
.testimonial-wrapper-2 .testimonial-content .testimonial-slider2 {
  margin-right: 40px;
}
@media (max-width: 1199px) {
  .testimonial-wrapper-2 .testimonial-content .testimonial-slider2 {
    margin-right: 0;
  }
}
.testimonial-wrapper-2 .array-button {
  display: grid;
  gap: 10px;
  position: absolute;
  top: 50%;
  right: 0%;
}
@media (max-width: 1199px) {
  .testimonial-wrapper-2 .array-button {
    display: none;
  }
}
.testimonial-wrapper-2 .array-button .array-prev, .testimonial-wrapper-2 .array-button .array-next {
  width: 56px;
  height: 56px;
  border-radius: 50px;
  line-height: 56px;
  text-align: center;
  transition: all 0.4s ease-in-out;
}
.testimonial-wrapper-2 .array-button .array-prev {
  background-color: var(--theme);
  color: var(--white);
}
.testimonial-wrapper-2 .array-button .array-prev:hover {
  background-color: var(--header);
}
.testimonial-wrapper-2 .array-button .array-next {
  background: rgba(2, 165, 206, 0.1);
}
.testimonial-wrapper-2 .array-button .array-next:hover {
  color: var(--white);
  background-color: var(--header);
}
.testimonial-card-items .icon{
    font-size: 25px;
    color:#EA0000 !important;
} 
.testimonial-card-items p{
    text-align: justify;
    /* font-family: "jost"; */
    font-size: 18px;
}
.testimonial-card-items h4 {
    color:#00008b;
    font-size: 28px;
    font-family: var(--volgarie_font);
}


/* ---------- Responsive Adjustments ---------- */

/* ✅ Large screens (1200px–1399px) */
@media (max-width: 1399px) {
  .testimonial-wrapper-2 .testimonial-content {
    margin-left: 0;
  }
  .testimonial-wrapper-2 .testimonial-content .testimonial-card-items {
    padding: 30px;
  }
}

/* ✅ Medium screens (992px–1199px) */
@media (max-width: 1199px) {
  .testimonial-wrapper-2 {
    flex-direction: column;
    align-items: center;
  }

  .testimonial-wrapper-2 .testimonial-image {
    max-width: 100%;
    margin-bottom: 30px;
  }

 

  .testimonial-wrapper-2 .array-button {
    display: none;
  }

  .testimonial-card-items p {
    font-size: 16px;
  }

  .testimonial-card-items h4 {
    font-size: 24px;
  }
}

/* ✅ Tablet screens (768px–991px) */
@media (max-width: 991px) {


  .testimonial-wrapper-2 .testimonial-image img {
    height: 400px;
  }

  .testimonial-card-items p {
    font-size: 18px;
  }
}

/* ✅ Mobile screens (up to 767px) */
@media (max-width: 767px) {


  .testimonial-wrapper-2 {
    flex-direction: column;
    text-align: center;
  }

  .testimonial-wrapper-2 .testimonial-image img {
    height: 300px;
    border-radius: 12px;
  }

  .testimonial-wrapper-2 .testimonial-content .testimonial-card-items {
    padding: 0px !important;
  }

  .testimonial-card-items h4 {
    font-size: 22px;
  }

  .testimonial-card-items p {
    font-size: 18px;
    line-height: 1.6;
  }

  .testimonial-wrapper-2 .client-info-items {
    justify-content: center;
  }
}

    .why-section {
      padding: 10px 0;
      text-align: center;
      position: relative;
    }
    .why-section h2 {
      font-weight: 600;
      font-size: 26px;
      letter-spacing: 1px;
      margin-bottom: 50px;
      text-transform: uppercase;
    }
    .why-box {
      position: relative;
      padding: 60px 25px;
      background: #fff;
      border: 1px solid #eee;
      transition: all 0.3s ease;
      text-align: left;
      height: 100%;
    }
    .why-box:hover {
      box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    }
    .why-box::before {
      content: attr(data-number);
      position: absolute;
      top: 20px;
      right: 30px;
      font-size: 100px;
      font-weight: 700;
      color: rgba(0,0,0,0.05);
      z-index: 0;
    }
    .why-box h4 {
      font-size: 20px;
      font-weight: 600;
      position: relative;
      z-index: 1;
      margin-bottom: 15px;
    }
    .why-box p {
      position: relative;
      z-index: 1;
      font-size: 18px;
      line-height: 1.7;
      color: #555;
    }
    .pink { color: #e34c94; }
    .yellow { color: #f8b400; }
    .blue { color: #249de3; }

    /* ================================
       MEDIA QUERIES
    ================================= */

    /* Tablets (up to 991px) */
    @media (max-width: 991px) {
      .why-section {
        padding: 70px 0;
      }
      .why-box {
        padding: 50px 20px;
      }
      .why-box::before {
        font-size: 70px;
        right: 20px;
      }
       .why-box:hover {
      box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    }
      .why-section h2 {
        font-size: 22px;
        margin-bottom: 40px;
      }
      .why-box h4 {
        font-size: 18px;
      }
 
    }

    /* Mobile devices (up to 767px) */
    @media (max-width: 767px) {
      .why-section {
        padding: 10px !important;
      }
      .why-box {
        margin-bottom: 25px;
        text-align: center;
      }
      .why-box::before {
        font-size: 50px;
        top: 10px;
        right: 10px;
      }
      .why-box h4 {
        font-size: 17px;
      }

      .why-section h2 {
        font-size: 20px;
      }
    }

    /* Small mobile (up to 480px) */
    @media (max-width: 480px) {
      .why-box::before {
        display: none; /* hide large numbers for small screens */
      }
      .why-section h2 {
        font-size: 18px;
      }
      .why-box {
        padding: 40px 20px;
      }

       .why-box:hover {
      box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    }
    }

.contact-img{
  height: 500px;
  object-fit: cover;
}



/* Breadcrumb Section */
.breadcrumb-wrapper {
  position: relative;
  background: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1600&q=80') no-repeat center center/cover;
  padding: 120px 0;
  text-align: center;
  color: #fff;
}

.breadcrumb-wrapper::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  right: 0; bottom: 0;
  background: rgba(0, 0, 139, 0.6); /* deep blue overlay */
}

.breadcrumb-content {
  position: relative;
  z-index: 1;
}

.breadcrumb-content h1 {
  font-size: 42px;
  font-weight: 700;
  color: #F9C400; /* gold title for contrast */
}

.breadcrumb-content p {
  margin-top: 10px;
  color: #f5f5f5;
}

.contact-info {
  position: relative;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  margin-bottom: 30px;
  text-align: center;
  color: #fff;
  overflow: hidden;
  transition: all 0.3s ease;
  background-size: cover;
  background-position: center;
}

.contact-info::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 12px;
  z-index: 0;
  transition: background 0.3s ease;
}

.contact-info:hover::before {
  background: rgba(0, 0, 0, 0.75);
}

.contact-info * {
  position: relative;
  z-index: 1;
}

.contact-info:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 25px rgba(0,0,0,0.15);
}

.contact-info i {
  font-size: 30px;
  color: #F9C400;
  margin-bottom: 15px;
}

.contact-info h5 {
  color: #f8b400;
  font-weight: 600;
  margin-bottom: 10px;
}

.contact-info p {
  color: white;
}

/* 🌆 Different Backgrounds */
.bg-one {
  background-image: url('https://img.freepik.com/premium-photo/modern-office-buildings-cityscape-background_31965-23754.jpg?w=740');
}

.bg-two {
  background-image: url('https://img.freepik.com/premium-photo/customer-service-call-center-operator-talking-phone-with-headset-office_31965-25162.jpg?w=740');
}

.bg-three {
  background-image: url('https://img.freepik.com/premium-photo/closeup-hand-writing-email-icon-contact-us-customer-service_31965-38264.jpg?w=740');
}


/* Contact Form */
.contact-form {
  background: url(https://img.freepik.com/premium-photo/real-estate-business-concept-professional-using-laptop-with-digital-home-dollar-sold-icons_1313172-802.jpg?uid=R208066470&ga=GA1.1.1679070017.1753435898&semt=ais_hybrid&w=740&q=80);
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.form-control {
  border-radius: 10px;
  padding: 12px 15px;
  border: 1px solid #ccc;
  font-size: 16px;
}

.form-control:focus {
  border-color: #F9C400; /* gold focus */
  box-shadow: 0 0 0 0.2rem rgba(249,196,0,0.25);
}

.btn-theme {
  background: linear-gradient(90deg, #00008b, #F9C400);
  color: #fff;
  border-radius: 8px;
  padding: 12px 30px;
  font-size: 18px;
  transition: all 0.3s;
  border: none;
}

.btn-theme:hover {
  background: linear-gradient(90deg, #ea0000, #00008b); /* red to blue hover */
}

/* Map */
.map-section iframe {
  border: 0;
  width: 100%;
  height: 400px;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

/* Responsive */
@media (max-width: 768px) {
  .breadcrumb-content h1 {
    font-size: 32px;
  }
}

   
.slider { 
  width: 100%;
  overflow: hidden;
  padding: 2.5rem 0;
  position: relative;
}

.slide-track {
  display: flex;
  width: calc(250px * 20); /* image width * number of total images */
  animation: scroll 30s linear infinite;
}

.item {
  flex: 0 0 auto;
  width: 400px;
  padding: 0 30px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.item video {
  width: 100%;
  height: 500px;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

/* Make hover effect apply to image only */
.item a {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 10px;
}

.item img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
  pointer-events: auto;
  transition: transform 0.6s ease;
  display: block;
}

/* Zoom on hover */
.item a:hover img {
  transform: scale(1.05);
}

/* Blue top-to-bottom overlay */
.item a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 139, 0.2);
  border-radius: 10px;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.5s ease, opacity 0.5s ease;
  z-index: 1;
}

.item a:hover::before {
  opacity: 1;
  transform: scaleY(1);
}

/* Scrolling animation */
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-250px * 10)); }
}



.about-banner {
  background-image: url("https://img.freepik.com/premium-photo/group-young-businesspeople-working-together-creative-office-planning-analysis-collaborate_217236-11599.jpg?w=740&q=80");
  background-size: cover;
  background-position: center;
  color: #ffffff;
  text-align: center;
  padding: 140px 20px;
  position: relative;
  overflow: hidden;
}

/* === Black Overlay === */
.about-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

/* === Brand Color Glows === */
.about-banner::after {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.4;
  background: linear-gradient(135deg, #ea0000, #00008b);
  bottom: -100px;
  right: -100px;
  z-index: 0;
}

.about-banner .container {
  position: relative;
  z-index: 2;
}

.about-banner h1 {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 20px;
}

.about-banner h1 span {
  color: #f9c400; /* yellow highlight */
}

.about-banner p {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.1rem;
  color: #f1f1f1;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .about-banner {
    padding: 100px 20px;
  }
  .about-banner h1 {
    font-size: 2rem;
  }
  .about-banner p {
    font-size: 1rem;
  }
}

.badge{
  font-size: 24px;
}


/* Section Wrapper */
.overview-section {
  padding: 50px 0 0px;
  background: linear-gradient(180deg, #ffffff 0%, #f9f9ff 100%);
  text-align: center;
}

/* Overview Tag */
.overview-badge {
  display: inline-block;
  background: linear-gradient(90deg, #ea0000, #00008b);
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  padding: 6px 20px;
  border-radius: 30px;
  margin-bottom: 25px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 10px rgba(0, 0, 139, 0.3);
}

/* Heading */
.overview-section h2 {
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 25px;
  line-height: 1.3;
}

.overview-section h2 span {
  background: linear-gradient(90deg, #00008b, #f9c400);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Paragraph */
.overview-section p {
  max-width: 950px;
  margin: 0 auto 20px;
  font-size: 1.05rem;
  color: #333;
  line-height: 1.7;
}

/* Subtext */
.overview-section .italic-text {
  font-style: italic;
  font-weight: 500;
  margin-top: 15px;
  color: #00008b;
}

/* Stats */
.stats {
  margin-top: 60px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: center;
}

.stats .stat-item {
  flex: 1;
  min-width: 200px;
  padding: 15px 10px;
  border-right: 2px solid rgba(0, 0, 139, 0.1);
}

.stats .stat-item:last-child {
  border-right: none;
}

.stats h3 {
  font-size: 2.4rem;
  font-weight: 700;
  background: linear-gradient(90deg, #00008b, #ea0000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 5px;
}

.stats p {
  margin: 0;
  color: #555;
  font-size: 1rem;
}

@media (max-width: 767px) {
  .stats {
    flex-direction: column;
    align-items: center;
  }
  .stats .stat-item {
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 139, 0.1);
    margin-bottom: 20px;
  }
  .stats .stat-item:last-child {
    border-bottom: none;
  }
  .left-content h2 {
    font-size: 28px;}
    .workflow-section{
      padding: 20px 10px;
    }
  
}



    .workflow-section {
      padding: 50px 20px;
      text-align: center;
      background: #f8f9fc;
    }

    .section-title {
      font-size: 36px;
      font-weight: 600;
      margin-bottom: 70px;
      color: #111;
    }

    .swiper {
      max-width: 1100px;
      margin: auto;
      /* overflow: visible; */
    }

    .workflow-card {
      background: #fff;
      border-radius: 25px;
      padding: 40px 30px 20px;
      height: 360px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
      transform: scale(0.8);
      transition: all 0.5s ease;
      opacity: 0.5;
    }

    .workflow-card .icon {
      background: linear-gradient(135deg, #8a2be2, #00008b);
      width: 70px;
      height: 70px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 25px;
      font-size: 28px;
      color: #fff;
    }

    .workflow-card h3 {
      font-size: 22px;
      margin-bottom: 15px;
      font-weight: 600;
    }

    .workflow-card p {
      color: #000;
      font-size: 15px;
      line-height: 1.6;
    }

    /* Active (center) card zoom */
    .swiper-slide-active .workflow-card {
      transform: scale(1.1);
      opacity: 1;
      box-shadow: 0 0 60px rgba(168, 85, 247, 0.5);
    }

    /* Swiper arrows */
    .swiper-button-next,
    .swiper-button-prev {
      color: #00008b;
      width: 45px;
      height: 45px;
      border-radius: 50%;
      background: rgba(168, 85, 247, 0.1);
      transition: all 0.3s ease;
    }

    .swiper-button-next:hover,
    .swiper-button-prev:hover {
      background: #00008b;
      color: #fff;
      box-shadow: 0 0 20px rgba(168, 85, 247, 0.6);
    }

    .swiper-button-next::after,
    .swiper-button-prev::after {
      font-size: 18px;
    }

@media (max-width:480px){
    .swiper-button-next, .swiper-button-prev{
      display: none;
    }
    .workflow-section{
      padding: 10px;
    }
    .relationship-section{
      padding: 0px !important;
    }
      .timeline-icon {
    width: 40px;
    height: 40px;
    font-size: 14px;
    margin-right: 0;
    margin-bottom: 10px;
  }

}
    .workflow-section {
      padding: 100px 20px;
      text-align: center;
      background: #f8f9fc;
    }

    .section-title {
      font-size: 36px;
      font-weight: 600;
      margin-bottom: 70px;
      color: #111;
    }

    .swiper {
      max-width: 1100px;
      margin: auto;
      /* overflow: visible; */
    }

    .workflow-card {
      background: #fff;
      border-radius: 25px;
      padding: 40px 30px 20px;
      height: 360px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
      transform: scale(0.8);
      transition: all 0.5s ease;
      opacity: 0.5;
    }

    .workflow-card .icon {
      background: linear-gradient(135deg, #8a2be2, #00008b);
      width: 70px;
      height: 70px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 25px;
      font-size: 28px;
      color: #fff;
    }

    .workflow-card h3 {
      font-size: 22px;
      margin-bottom: 15px;
      font-weight: 600;
    }

    .workflow-card p {
      color: #000;
      font-size: 15px;
      line-height: 1.6;
    }

    /* Active (center) card zoom */
    .swiper-slide-active .workflow-card {
      transform: scale(1.1);
      opacity: 1;
      box-shadow: 0 0 60px rgba(168, 85, 247, 0.5);
    }

    /* Swiper arrows */
    .swiper-button-next,
    .swiper-button-prev {
      color: #00008b;
      width: 45px;
      height: 45px;
      border-radius: 50%;
      background: rgba(168, 85, 247, 0.1);
      transition: all 0.3s ease;
    }

    .swiper-button-next:hover,
    .swiper-button-prev:hover {
      background: #00008b;
      color: #fff;
      box-shadow: 0 0 20px rgba(168, 85, 247, 0.6);
    }

    .swiper-button-next::after,
    .swiper-button-prev::after {
      font-size: 18px;
    }
 

.main {
  margin: 0;
  padding: 20px;
  background: #fff; /* White background */
  color: #000; /* Default text color black */
}
.relationship-section {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 40px 20px;
  gap: 80px;
  text-align: justify;
  background: #fff;
}

/* Shape image on the right */
.relationship-section::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -100px;
  transform: translateY(-50%);
  width: 400px;
  height: 400px;
  background: url("https://northeastconstructions.com/image/about-1-5.png") no-repeat center/contain;
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}


/* LEFT SIDE */
.left-content {
  flex: 1;
}

.left-content h2 {
  font-size: 34px;
  color: #00008b; /* Deep blue heading */
  margin-bottom: 20px;
  font-weight: 700;
}

.left-content h2 span {
  color: #ea0000; /* Red highlight for brand */
}

.left-content p {
  color: #000; /* Black paragraph text */
  line-height: 1.7;
  margin-bottom: 18px;
}

/* RIGHT TIMELINE */
.scroll-timeline {
  position: relative;
  width: 700px;
  margin: auto;
}

/* Each Step */
.timeline-step {
  display: flex;
  align-items: center;
  opacity: 0.5;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.timeline-step.active {
  opacity: 1;
  transform: translateY(0);
}

/* Icon Circle */
.timeline-icon {
  position: relative;
  z-index: 2;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #00008b; /* blue base */
  border: 3px solid #f9c400; /* yellow border */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  margin-right: 30px;
  transition: all 0.4s ease;
}

.timeline-step.active .timeline-icon {
  /* background: linear-gradient(90deg, #ea0000, #00008b); */
  color: #fff;
  border-color: #00008b;
}

/* Connector line between icons */
.timeline-connector {
  position: relative;
  left: 29px;
  width: 2px;
  height: 70px;
  background: rgba(0, 0, 0, 0.1); /* light line */
  margin-bottom: 0;
  overflow: hidden;
}

.timeline-connector::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #ea0000, #f9c400, #00008b);
  transition: top 0.6s ease;
}

.timeline-connector.fill::after {
  top: 0;
}

/* Text content */
.timeline-content {
  max-width: 400px;
}

.timeline-content h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: #00008b;
}

.timeline-content p {
  margin: 0;
  color: #000;
  font-size: 17px;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 991px) {
  .relationship-section {
    flex-direction: column;
    align-items: center;
    text-align: left;
  }

  .scroll-timeline {
    width: 100%;
  }
}

/* Responsive timeline icons */
@media (max-width: 992px) {
  .timeline-icon {
    width: 50px;
    height: 50px;
    font-size: 18px;
    margin-right: 20px;
  }

  .timeline-content h3 {
    font-size: 17px;
  }



  .timeline-connector {
    left: 24px;
    height: 60px;
  }
}

@media (max-width: 768px) {
  .timeline-step {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin-bottom: 30px;
  }

  .timeline-icon {
    margin-right: 0;
    margin-bottom: 10px;
    width: 45px;
    height: 45px;
    font-size: 16px;
  }

  .timeline-content {
    max-width: 100%;
  }

  .timeline-connector {
    display: none; /* Hide vertical line on very small screens */
  }
}





.services-banner { 
  background-image: url("https://img.freepik.com/premium-photo/male-hand-holding-color-samples-with-interior-perspective-interior-designer-s-hand-working-with-apartment-sketch-material-color-samples_359031-13623.jpg?uid=R208066470&ga=GA1.1.1679070017.1753435898&semt=ais_hybrid&w=740&q=80");
  background-size: cover;
  background-position: center;
  color: #ffffff;
  text-align: center;
  padding: 140px 20px;
  position: relative;
  overflow: hidden;
}

/* === Black Overlay === */
.services-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

/* === Brand Color Glow === */
.services-banner::after {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.4;
  background: linear-gradient(135deg, #ea0000, #00008b);
  bottom: -100px;
  right: -100px;
  z-index: 0;
}

.services-banner .container {
  position: relative;
  z-index: 2;
}

.services-banner h1 {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 20px;
}

.services-banner h1 span {
  color: #f9c400; /* yellow highlight */
}

.services-banner p {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.1rem;
  color: #f1f1f1;
  line-height: 1.6;
}

/* === CTA Button (shared style) === */
.services-banner .cta-btn {
  display: inline-block;
  margin-top: 40px;
  background: linear-gradient(90deg, #00008b, #ea0000);
  color: #fff;
  padding: 12px 32px;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.services-banner .cta-btn:hover {
  background: linear-gradient(90deg, #ea0000, #00008b);
  box-shadow: 0 0 25px rgba(249, 196, 0, 0.6);
  transform: translateY(-3px);
}

/* === Responsive === */
@media (max-width: 768px) {
  .services-banner {
    padding: 100px 20px;
  }
  .services-banner h1 {
    font-size: 2rem;
  }
  .services-banner p {
    font-size: 1rem;
  }
}


/* =========================================
   LANDING CAROUSEL SECTION
   ========================================= */

/* Section Container */
.landing-carousel {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* Background carousels in 4 columns */
.landing-carousel .carousel-row {
  display: flex;
  width: 100%;
  height: 100%;
}

.landing-carousel .carousel {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.landing-carousel .carousel-track {
  display: flex;
  flex-direction: column;
  height: 200%;
}

.landing-carousel .carousel img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
  filter: brightness(70%);
}

/* ==========================
   Scroll Animations
   ========================== */
.landing-carousel .scroll-up .carousel-track {
  animation: scrollUp 22s linear infinite;
}

.landing-carousel .scroll-down .carousel-track {
  animation: scrollDown 22s linear infinite;
}

@keyframes scrollUp {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

@keyframes scrollDown {
  0% { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}

/* ==========================
   Overlay (Center Content)
   ========================== */
.landing-carousel .carousel-content {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: 0 20px;
  pointer-events: none; /* allows clicks to pass to links if needed */
}

.landing-carousel .carousel-content h2 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 15px;
}

.landing-carousel .carousel-content h2 span {
  color: #ffcc00;
}

.landing-carousel .carousel-content p {
  max-width: 600px;
  font-size: 1.2rem;
  margin: 15px auto 25px;
  line-height: 1.6;
}



/* ==========================
   Responsive
   ========================== */
@media (max-width: 992px) {
  .landing-carousel .carousel-row {
    flex-wrap: wrap;
  }
  .landing-carousel .carousel {
    flex: 50%;
    height: 50vh;
  }
}

@media (max-width: 600px) {
  .landing-carousel .carousel {
    flex: 100%;
    height: 50vh;
  }
  .landing-carousel .carousel-content h2 {
    font-size: 2rem;
  }
  .landing-carousel .carousel-content p {
    font-size: 1rem;
  }
}
.tech-section {
  position: relative;
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  margin: 60px auto;
  max-width: 1300px;
  color: #fff;
  overflow: hidden;
}

/* Subtle dark overlay */
.tech-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 20px;
  z-index: 0;
}

.tech-section .container {
  position: relative;
  z-index: 1;
}

/* Decorative shapes */
.shape-top-left,
.shape-bottom-right {
  position: absolute;
  z-index: 1;
  opacity: 0.4;
  pointer-events: none;
  transition: transform 0.4s ease;
}

.shape-top-left { top: -20px; left: -20px; }
.shape-bottom-right { bottom: -20px; right: -20px; width: 350px; }

.tech-section:hover .shape-top-left { transform: translate(-5px, -5px); }
.tech-section:hover .shape-bottom-right { transform: translate(5px, 5px); }

/* Typography */
.section-title { font-weight: 700; font-size: 2.5rem; margin-bottom: 20px; text-align: center; }
.section-subtitle { font-size: 1.1rem; margin-bottom: 30px; text-align: center; }

.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.feature-list li::before {
  content: "✔";
  color: #7a6efb;
  font-weight: bold;
}

.tech-section .section-title{
  color:#f9c400;
}
.tech-section::before {
  background: rgba(0,0,0,0.6);
}
  .pay img, .content img, .online img, .web img {
        width: 100%;
      height:300px;
      object-fit: cover;
      border-radius: 15px;
      transition: transform 0.3s ease;
}
.seo img, .social img, .sale img{
          width: 100%;
      height:auto;
      object-fit: cover;
      border-radius: 15px;
      transition: transform 0.3s ease;
}

/* Client images */
.client img,.email img {
  width: 100%;
  /* height: auto; */
  height: 400px;
  object-fit: cover;
  border-radius: 15px;
  transition: transform 0.4s ease;
}
.images-row img:hover { transform: scale(1.05); }

/* Responsive tweaks */
@media (max-width: 1200px) {
  .images-row .col-md-4 { margin-bottom: 20px; }

}

@media (max-width:900px){
  .email img,.web img, .client img{
          width: 100%;
      height:200px !important;
      object-fit: cover;
      border-radius: 15px;
      transition: transform 0.3s ease;
}
}
@media (max-width: 768px) {
  .shape-top-left { width: 100px; opacity: 0.3; }
  .shape-bottom-right { width: 120px; opacity: 0.3; }
  .client img{
          width: 100%;
      height:auto !important;
      object-fit: cover;
      border-radius: 15px;
      transition: transform 0.3s ease;
}
.overview-section p {
    max-width: 950px;
    margin: 0 auto 20px;
    font-size: 1.05rem;
    color: #333;
    line-height: 1.7;
    text-align: justify;
}
.workflow-card p, .left-content p,.timeline-content p ,.service-detail p  {
      text-align: justify;
}


}
/* ===== LIGHTBOX BASE ===== */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 20px;
}

.lightbox.show {
  display: flex;
}

.lightbox img {
  max-width: 80%;
  max-height: 80%;
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
  animation: zoomIn 0.3s ease;
  object-fit: contain;
}

@keyframes zoomIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ===== BUTTON STYLES ===== */
.lightbox-btn,
.lightbox-close {
  position: absolute;
  color: white;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-btn:hover,
.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lightbox-btn {
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  width: 50px;
  height: 50px;
}

.lightbox-prev { left: 40px; }
.lightbox-next { right: 40px; }

.lightbox-close {
  top: 25px;
  right: 35px;
  font-size: 2rem;
  width: 45px;
  height: 45px;
}

/* ====== MEDIA QUERIES ====== */

/* --- Tablets (<= 992px) --- */
@media (max-width: 992px) {
  .lightbox img {
    max-width: 85%;
    max-height: 75%;
  }
  .lightbox-btn {
    font-size: 1.8rem;
    width: 45px;
    height: 45px;
  }
  .lightbox-prev { left: 25px; }
  .lightbox-next { right: 25px; }
  .lightbox-close {
    top: 20px;
    right: 25px;
    font-size: 1.8rem;
  }
}

/* --- Mobile Landscape (<= 768px) --- */
@media (max-width: 768px) {
  .lightbox img {
    max-width: 90%;
    max-height: 70%;
  }
  .lightbox-btn {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
  }
  .lightbox-prev { left: 20px; }
  .lightbox-next { right: 20px; }
  .lightbox-close {
    top: 15px;
    right: 20px;
    width: 40px;
    height: 40px;
  }
}

/* --- Mobile Portrait (<= 480px) --- */
@media (max-width: 480px) {
  .lightbox img {
    max-width: 95%;
    max-height: 60%;
  }
  .lightbox-btn {
    font-size: 1.3rem;
    width: 35px;
    height: 35px;
  }
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
  .lightbox-close {
    top: 10px;
    right: 15px;
    font-size: 1.5rem;
    width: 35px;
    height: 35px;
  }
}


@media (max-width: 576px) {
  .shape-top-left, .shape-bottom-right { display: none; }
  .overview-section h2 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 25px;
    line-height: 1.3;
}
.team-section p{
  text-align: justify;
}
}

.team-section {
  background: #f9fafc;
}
.team-member {
  text-align: center;
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}
.team-member:hover {
  transform: translateY(-10px);
}
.team-img img {
  width: 100%;
  height: 350px;
  border-radius: 16px;
  object-fit: cover;
}
.team-info h4 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 15px;
  color: #222;
}
.team-info p {
  color: #777;
  font-size: 0.95rem;
}
.swiper-pagination-bullet {
  background: #00008b;
  opacity: 1;
}
.swiper-pagination-bullet-active {
  background: #EA0000;
}