/* ============================================================
   RESPONSIVE  —  max-width only (desktop-first)
   No min-width media queries anywhere in this file.
   ============================================================ */

/* ---------------------------------------------
   <= 1400px
   --------------------------------------------- */

@media (max-width: 1400px) {
  .hero-inner {
    padding: 180px 80px 90px;
  }

  .service-card {
    min-height: 400px;
  }
}


/* ---------------------------------------------
   <= 1199px  (small laptop)
   --------------------------------------------- */
@media (max-width: 1199px) {
  .hero-inner {
    padding: 160px 50px 80px;
  }

  .hero-features {
    max-width: 900px;
  }

  .feature-item {
    padding: 22px 10px;
  }

  .feature-label {
    font-size: 13px;
  }

  /* About */
  .about-section {
    padding: 80px 0 90px;
  }

  .gallery-item img {
    height: 240px;
  }

  .gallery-item.gi-1 {
    margin-top: 48px;
  }

  .gallery-item.gi-4 {
    margin-top: 36px;
  }

  .about-feature-thumb {
    width: 84px;
    height: 70px;
  }

  /* Services */
  .service-card {
    min-height: 360px;
  }

  /* Features */
  .features-heading {
    font-size: clamp(1.4rem, 3.4vw, 2rem);
    margin-bottom: 38px;
  }

  .industries-section .main-heading {
    font-size: 40px;
  }

  .industry-featured-card {
    min-height: 480px;
    padding: 25px;
  }
}


/* ---------------------------------------------
   <= 991px  (tablet)
   --------------------------------------------- */
@media (max-width: 991px) {
  .hero-inner {
    padding: 140px 32px 70px;
  }

  .hero-content {
    padding: 24px 0;
  }

  .hero-features {
    max-width: 620px;
    margin-top: -70px;
  }

  .hero-features .col-lg-3:not(:last-child) .feature-item::after {
    display: none;
  }

  .hero-features .col-6:nth-child(odd) .feature-item {
    border-right: 1px solid #ededed;
  }

  .hero-features .col-6:nth-child(-n + 2) .feature-item {
    border-bottom: 1px solid #ededed;
  }

  /* About */
  .about-intro {
    margin-bottom: 46px;
  }

  .about-gallery {
    margin-bottom: 56px;
  }

  .gallery-item img {
    height: 260px;
  }

  .gallery-item.gi-1,
  .gallery-item.gi-2,
  .gallery-item.gi-3,
  .gallery-item.gi-4 {
    margin-top: 0;
  }

  .about-copy {
    max-width: 100%;
    margin-bottom: 14px;
  }

  /* Services grid -> 2 x 2 */
  .services-grid-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-card {
    min-height: 340px;
  }

  /* Features */
  .features-visual {
    min-height: 320px;
    margin-bottom: 6px;
  }

  .features-heading {
    margin-bottom: 32px;
  }

  .industries-section {
    padding: 70px 0;
  }

  .industries-section .header-row {
    margin-bottom: 35px;
  }

  .industries-section .main-heading {
    font-size: 34px;
    margin-bottom: 15px;
  }

  .industry-featured-wrapper {
    margin-top: 20px;
  }

  .industry-featured-card {
    min-height: 400px;
  }

  .city-card.card-lg {
    height: 380px;
    /* Adjust center image on tablet */
  }

  .testimonials-section {
    padding: 70px 0 50px;
  }

  .testimonials-section .main-heading {
    font-size: 30px;
  }

  .testimonial-card {
    padding: 24px 20px;
  }

  .get-in-touch-section {
    padding: 60px 0;
  }

  .contact-card-wrapper {
    padding: 24px;
  }

  .form-side {
    padding-right: 0;
  }

  .form-heading {
    font-size: 28px;
  }

  .faq-side {
    padding: 20px;
    margin-top: 10px;
  }

  .footer-top {
    padding: 40px 0 20px;
  }

  .newsletter-wrapper {
    max-width: 100%;
  }

  .marquee-content span {
    font-size: 44px;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
  }

  .footer-bottom-gold {
    padding: 35px 0 40px;
  }

  .footer-col > .footer-heading:first-child {
    min-height: 0;
  }

  .about-us-hero .hero-inner {
    padding: 130px 0 80px;
  }

  .about-us-hero .hero-title {
    font-size: 40px;
  }

  .about-us-hero .hero-text {
    font-size: 14px;
  }

  .about-overview-section {
    padding: 60px 0;
  }

  .main-heading {
    font-size: 32px;
  }

  .about-content-side {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .our-journey-section {
    padding: 60px 0;
  }

  .timeline-navigation-wrapper {
    overflow-x: auto;
    padding-bottom: 15px;
  }

  .timeline-steps-container {
    min-width: 720px;
  }

  .timeline-track-line {
    min-width: 720px;
  }

  .timeline-details-card {
    padding: 30px;
  }

  .big-year-number {
    font-size: 46px;
  }

  .recruitment-values-section {
    padding: 60px 0;
  }

  .value-card {
    padding: 28px 22px;
  }

  .value-title {
    font-size: 18px;
  }

  .contact-section {
    padding: 60px 0;
  }

  .contact-form-wrapper {
    padding: 30px 24px;
  }
}


/* ---------------------------------------------
   <= 767px  (mobile)
   --------------------------------------------- */
@media (max-width: 767px) {
  .hero-inner {
    padding: 120px 18px 60px;
  }

  .hero-title {
    padding-left: 16px;
  }

  .hero-title::before {
    width: 4px;
  }

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

  .hero-features {
    max-width: 420px;
    margin-top: -52px;
    padding: 10px;
  }

  .feature-item {
    padding: 20px 10px;
    gap: 10px;
  }

  .feature-icon {
    width: 46px;
    height: 46px;
    font-size: 18px;
  }

  /* About */
  .about-section {
    padding: 64px 0 70px;
  }

  .about-intro-text {
    font-size: 15px;
    line-height: 1.75;
  }

  .gallery-item img {
    height: 210px;
  }

  .about-actions {
    gap: 18px;
  }

  .about-feature {
    flex-wrap: wrap;
    gap: 16px;
    padding: 22px 0;
  }

  .about-feature:hover {
    padding-left: 0;
  }

  .about-feature-icon {
    width: 46px;
    height: 46px;
    font-size: 18px;
  }

  .about-feature-body {
    flex: 1 1 0;
  }

  .about-feature-thumb {
    flex: 1 1 100%;
    width: 100%;
    height: auto;
    margin-top: 4px;
  }
.sector-photo:hover img {
    transform: scale(1);
}
.sector-photo img {
    height: auto;
    object-fit: cover;
    }
  /* Services */
  .service-card {
    min-height: 300px;
  }

  .service-card-num {
    font-size: 2.2rem;
  }

  /* Features */
  .features-section {
    padding: 60px 0 66px;
  }

  .features-top {
    margin-bottom: 22px;
  }

  .pill-outline-btn {
    padding: 10px 20px;
    font-size: 13px;
  }

  .feature-acc {
    padding: 18px;
    gap: 14px;
  }

  .feature-acc:hover {
    padding-left: 22px;
  }
  
}


/* ---------------------------------------------
   <= 575px  (small phones)
   --------------------------------------------- */
@media (max-width: 575px) {

  /* Hero feature bar -> 1 per row */
  .hero-features .col-6 {
    width: 100%;
  }

  .hero-features .col-6:nth-child(odd) .feature-item {
    border-right: 0;
  }

  .hero-features .col-6:not(:last-child) .feature-item {
    border-bottom: 1px solid #ededed;
  }

  /* About gallery -> 1 per row */
  .about-gallery .col-6 {
    width: 100%;
  }

  .gallery-item {
    margin-bottom: 4px;
  }

  .gallery-item img {
    object-fit: fill;  
    height: auto;
  }
.city-about .about-gallery .gallery-item img{height: auto; }
  /* Services grid -> 1 per row */
  .services-grid-row {
    grid-template-columns: 1fr;
  }

  .service-card {
    min-height: 280px;
  }

  .pill-badge {
    font-size: 11px;
    padding: 8px 20px;
  }

  .features-heading {
    font-size: 1.4rem;
  }

  .industries-section {
    padding: 50px 0;
  }

  .industries-section .main-heading {
    font-size: 28px;
  }

  .industry-card {
    padding: 20px;
  }

  .industry-featured-card {
    min-height: 350px;
    padding: 20px;
  }

  .industry-featured-card .featured-title {
    font-size: 20px;
  }

  .industry-featured-card .featured-desc {
    font-size: 13px;
  }

  .cities-section {
    padding: 50px 0;
  }

  .cities-section .main-heading {
    font-size: 30px;
  }

  .btn-explore {
    padding: 8px 16px;
    font-size: 12px;
  }

  .city-card.card-sm {
    height: 200px;
  }

  .city-card.card-lg {
    height: 320px;
  }

  .cta-hexagon-card {
    clip-path: none;
    /* Fallback to rounded card on small screens if text overflows */
    border-radius: 16px;
    border: 2px solid #d8c278;
    padding: 30px 20px;
  }

  .testimonials-section {
    padding: 50px 0 40px;
  }

  .testimonials-section .main-heading {
    font-size: 24px;
  }

  .client-logo-img {
    max-height: 28px;
  }

  .get-in-touch-section {
    padding: 40px 0;
  }

  .contact-card-wrapper {
    padding: 16px;
    border-radius: 14px;
  }

  .form-heading {
    font-size: 24px;
  }

  .custom-accordion .accordion-button {
    font-size: 13px;
  }

  .marquee-content span {
    font-size: 32px;
    margin: 0 10px;
  }

  .newsletter-input-group {
    flex-direction: column;
    align-items: stretch;
    border-bottom: none;
    gap: 10px;
  }

  .newsletter-input {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px;
    padding: 10px 14px !important;
  }

  .newsletter-btn {
    width: 100%;
    text-align: center;
  }

  .about-us-hero .hero-inner {
    padding: 110px 0 60px;
  }

  .about-us-hero .hero-title {
    font-size: 32px;
  }

  .about-us-hero .hero-text {
    font-size: 13px;
    line-height: 1.6;
  }

  .about-overview-section {
    padding: 40px 0;
  }

  .main-heading {
    font-size: 26px;
  }

  .mission-vision-card {
    padding: 18px;
  }

  .about-primary-img {
    border-radius: 14px;
  }

  .our-journey-section {
    padding: 40px 0;
  }

  .timeline-details-card {
    padding: 20px;
    border-radius: 14px;
  }

  .big-year-number {
    font-size: 38px;
  }

  .journey-card-title {
    font-size: 22px;
  }

  .journey-card-desc {
    font-size: 13px;
  }

  .recruitment-values-section {
    padding: 40px 0;
  }

  .value-card {
    padding: 22px 18px;
    border-radius: 14px;
  }

  .value-title {
    font-size: 17px;
  }

  .value-desc {
    font-size: 12.5px;
  }

  .contact-section {
    padding: 40px 0;
  }

  .contact-form-wrapper {
    padding: 24px 16px;
    border-radius: 16px;
  }

  .contact-info-block,
  .office-hours-card {
    padding: 20px 16px;
    border-radius: 16px;
  }

  .top-card-value {
    font-size: 13px;
  }

  .info-list li {
    font-size: 12px;
  }
}


/* ============================================================
   SERVICE 1 PAGE  —  responsive
   ============================================================ */

@media (max-width: 1199px) {
  .service-1-hero .hero-content {
    max-width: 100%;
  }

  /* Content column gets narrow below xl — one column of checks reads better */
  .service-check-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991px) {
  .service-1-hero .hero-inner {
    padding: 130px 0 70px;
  }

  .service-detail {
    padding: 64px 0;
  }

  /* Stacked: media is no longer sticky, image sits above the content */
  .service-detail-img {
    height: 320px;
    max-height: none;
  }

  /* Chips reflow beneath the image on tablet / mobile */
  .service-media-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
  }

  .service-media-chip {
    position: static;
    box-shadow: none;
    border: 1px solid #e7dcbd;
  }

  .service-detail.is-dark .service-media-chip {
    border-color: rgba(255, 255, 255, 0.18);
  }

  .service-how {
    margin-top: 44px;
  }

  .service-faq {
    padding: 26px 22px;
  }
}

@media (max-width: 575px) {
  .service-1-hero .hero-inner {
    padding: 110px 0 56px;
  }

  .hero-toggle {
    font-size: 12px;
    padding: 8px 16px;
  }

  .hero-service-tag {
    font-size: 11.5px;
  }

  .service-detail {
    padding: 48px 0;
  }

  .service-media-badge,
  .service-detail.is-reverse .service-media-badge {
    right: 14px;
    left: auto;
    bottom: 14px;
    padding: 12px 16px;
  }

  .service-media-badge .badge-number {
    font-size: 22px;
  }

  .service-detail-actions .btn.site-btn,
  .service-detail-actions .btn-outline-gold {
    width: 100%;
    text-align: center;
  }
}


/* ============================================================
   INDUSTRIES PAGE  —  responsive
   ============================================================ */

@media (max-width: 1199px) {
  .industry-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 991px) {
  .industries-select,
  .sector-detail {
    padding: 64px 0;
  }

  /* No hover on touch — always show the tile sub-line */
  .industry-tile-sub {
    max-height: 60px;
    opacity: 1;
  }

  .sector-title-row {
    gap: 12px;
  }

  .sector-icon {
    width: 42px;
    height: 42px;
    font-size: 19px;
  }
}

@media (max-width: 767px) {
  .industry-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .industry-tile {
    min-height: 210px;
  }
}

@media (max-width: 575px) {
  .industries-select,
  .sector-detail {
    padding: 48px 0;
  }

  .industry-grid {
    gap: 12px;
  }

  .sector-perf-grid {
    grid-template-columns: 1fr;
  }

  .sector-card,
  .sector-perf,
  .sector-cta {
    padding: 20px;
  }
}


/* ============================================================
   MEGA DROPDOWN  —  responsive
   ============================================================ */

@media (max-width: 1399px) {
  .dropdown-navdesktop.services-mega {
    min-width: 520px;
  }
}


/* ============================================================
   AOS SAFETY NET  (tablet + mobile)
   AOS.init() is disabled below 992px (see footer.php), but this
   guarantees no [data-aos] element is left translated / hidden /
   overflowing even if the AOS script fails to load or run.
   ============================================================ */
@media (max-width: 991px) {
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  /* No sideways scroll from any stray transform / wide child on small screens
     (position:sticky in .service-detail only runs at >=992px, so this is safe) */
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }

  .quote-modal-dialog {
    padding: 34px 26px;
  }
}

@media (max-width: 575px) {
  .quote-modal {
    padding: 12px;
  }

  .quote-modal-dialog {
    padding: 28px 18px;
    border-radius: 16px;
  }

  .thank-you-section {
    padding: 120px 0 70px;
  }

  .thank-you-actions .btn.site-btn,
  .thank-you-actions .btn-outline-gold {
    width: 100%;
    text-align: center;
  }

  .legal-section {
    padding: 56px 0;
  }
}

/* ==========================================
   CITIES PAGE — CITY DETAIL RESPONSIVE (max-width only)
   ========================================== */
@media (max-width: 991px) {
  .city-detail {
    padding: 70px 0;
  }

  .city-detail + .city-detail {
    padding-top: 0;
  }

  .city-detail-img {
    height: 360px;
  }
}

@media (max-width: 575px) {
  .city-detail {
    padding: 52px 0;
  }

  .city-detail-img {
    height: 260px;
  }

  .city-detail .service-check-list {
    grid-template-columns: 1fr;
  }

  .city-detail-actions {
    gap: 18px;
  }

  .city-detail-media .service-media-badge {
    left: 16px;
    right: auto;
    bottom: 16px;
    padding: 12px 16px;
  }
}


/* ==========================================
   CITIES PAGE — "BUILT FOR THE SITES" GRID RESPONSIVE (max-width only)
   ========================================== */
@media (max-width: 991px) {
  .city-coverage {
    padding: 70px 0;
  }

  .city-coverage .header-row {
    margin-bottom: 32px;
  }

  .city-coverage .header-row .section-desc {
    margin-top: 12px;
  }
}

@media (max-width: 575px) {
  .city-coverage {
    padding: 52px 0;
  }

  .city-coverage-card {
    padding: 20px 18px;
  }
}


/* ==========================================
   CITY PAGES — city-about / city-zones RESPONSIVE (max-width only)
   ========================================== */
@media (max-width: 991px) {
  .city-about {
    padding: 70px 0;
  }

  .city-about .about-gallery {
    margin-bottom: 8px;
  }

  .city-zones {
    padding: 70px 0;
  }

  .city-zones-intro {
    margin-bottom: 8px;
  }
}

@media (max-width: 575px) {
  .city-about {
    padding: 52px 0;
  }

  .city-about .about-gallery .col-6:nth-child(1) .gallery-item,
  .city-about .about-gallery .col-6:nth-child(3) .gallery-item {
    margin-top: 0;
  }

  .city-zones {
    padding: 52px 0;
  }

  .city-zones-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .city-zones-actions {
    gap: 16px;
  }
}


/* ==========================================
   CITIES — guard timeline + cities dropdown RESPONSIVE (max-width only)
   ========================================== */
@media (max-width: 991px) {
  .guard-timeline {
    padding: 70px 0 56px;
  }

  /* no centre band on mobile — section is plain white, so the heading flips dark */
  .guard-timeline::after {
    display: none;
  }

  .gt-head {
    max-width: 100%;
    min-width: 0;
  }

  .gt-title {
    color: var(--secondary);
  }

  .gt-sub {
    color: #64748b;
  }

  .gt-track {
    max-width: 560px;
  }

  .gt-item,
  .gt-item--left,
  .gt-item--right {
    width: 100%;
    left: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .gt-item + .gt-item {
    margin-top: 16px;
  }
}

@media (max-width: 575px) {
  .guard-timeline {
    padding: 52px 0 44px;
  }

  .gt-head {
    margin-bottom: 34px;
  }

  .gt-card {
    padding: 18px 18px;
  }
}


/* ==========================================
   MOBILE / TABLET NAV TOGGLER — centre the custom 3-bar icon
   (display left to Bootstrap so it stays hidden on xl+ desktop)
   ========================================== */
@media (max-width: 1199.98px) {
  .header .navbar-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}


/* ==========================================
   SERVICE COVERS — RESPONSIVE (max-width only)
   ========================================== */
@media (max-width: 991.98px) {
  .service-covers {
    padding: 64px 0;
  }

  .covers-form-panel {
    position: static;
    margin-top: 10px;
  }
}

@media (max-width: 575.98px) {
  .covers-form-head {
    padding: 22px 20px 18px;
  }

  .covers-form {
    padding: 20px 20px 24px;
  }

  .covers-card {
    padding: 20px 18px 10px;
  }

  .covers-badge {
    font-size: 12px;
    padding: 7px 12px;
  }
}

/* Latest blogs */
@media (max-width: 991.98px) {
  .latest-blogs-section {
    padding: 64px 0 72px;
  }

  .blog-card-img {
    height: 200px;
  }
}

@media (max-width: 767.98px) {
  .latest-blogs-header {
    margin-bottom: 28px;
  }

  .blog-card-body {
    padding: 18px 18px 16px;
  }

  .blog-card-meta {
    flex-wrap: wrap;
  }
}

/* Blog single */
@media (max-width: 991.98px) {
  .blog-single-section {
    padding: 48px 0 64px;
  }

  .blog-sidebar {
    position: static;
    top: auto;
  }

  .blog-post-body h2 {
    scroll-margin-top: 80px;
  }
}

@media (max-width: 575.98px) {
  .blog-toc-item a {
    padding: 11px 16px;
    font-size: 13px;
  }

  .blog-toc-head {
    padding: 14px 16px;
  }
}

/* Careers */
@media (max-width: 991.98px) {
  .career-trust-bar-inner {
    gap: 16px 24px;
  }

  .career-trust-item {
    font-size: 12px;
  }

  .current-openings-section,
  .who-can-apply-section,
  .career-opportunities-section,
  .job-locations-section,
  .shifts-salary-section,
  .why-join-section,
  .online-application-section,
  .recruitment-process-section,
  .career-faqs-section {
    padding: 60px 0 70px;
  }

  .career-cta-section {
    padding: 70px 0;
  }

  .career-faqs-section .career-faqs-accordion .accordion-item {
    padding: 0 16px;
  }

  .career-faqs-section .career-faqs-accordion .accordion-button {
    font-size: 0.95rem;
    padding: 18px 4px 18px 0;
  }

  .oa-sidebar {
    position: static;
    top: auto;
  }

  .oa-form-card {
    padding: 22px 18px 26px;
  }

  .job-apply-section {
    padding: 24px 0 70px;
  }

  .job-apply-card {
    padding: 28px 20px;
  }
}

@media (max-width: 767.98px) {
  .current-openings-empty {
    flex-direction: column;
    padding: 22px 18px;
  }

  .opening-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .opening-card-btn,
  .current-openings-empty-btn,
  .job-apply-submit {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 575.98px) {
  .career-trust-bar-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .why-join-badge {
    left: 12px;
    bottom: 12px;
    padding: 12px 14px;
  }

  .why-join-badge-num {
    font-size: 1.35rem;
  }
}