/*--------------------------------------------------------------------- Citi HR Services - Responsive (Mobile-first) ---------------------------------------------------------------------*/

/* ----- Base: mobile (default in style.css) ----- */
/* Below overrides and tablet/desktop enhancements */

/* ----- Header: mobile ----- */
@media (max-width: 991.98px) {
  .header_section .navbar-collapse {
    padding-top: var(--space-md);
    padding-bottom: var(--space-sm);
  }

  .header_section .navbar-nav {
    margin-bottom: var(--space-sm);
  }

  .header_section .form-inline {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border, #e5e5e5);
  }

  .search_icon {
    font-size: 0.8125rem;
  }

  .search_icon span {
    word-break: break-word;
  }

  .logo {
    max-width: 120px;
  }

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

/* ----- Banner: mobile & tablet ----- */
@media (max-width: 991.98px) {
  .banner_section {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-xl);
  }

  .banner_section .row {
    min-height: auto;
    flex-direction: column;
  }

  .banner_section .col-md-6:first-child {
    order: 1;
    text-align: center;
    margin-bottom: var(--space-md);
  }

  .banner_section .col-md-6:last-child {
    order: 2;
  }

  .banner_taital {
    font-size: clamp(1.5rem, 5vw, 2rem);
    text-align: center;
  }

  .contact_bt {
    display: flex;
    justify-content: center;
    margin-top: var(--space-sm);
  }

  .image_1 {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  #my_slider .carousel-control-prev,
  #my_slider .carousel-control-next {
    width: 40px;
    height: 40px;
    top: 50%;
  }

  #my_slider .carousel-control-prev {
    left: var(--space-xs);
  }

  #my_slider .carousel-control-next {
    right: var(--space-xs);
  }
}

@media (max-width: 575.98px) {
  .banner_section .row {
    min-height: auto;
  }

  .banner_taital {
    font-size: 1.375rem;
  }

  .image_1 {
    max-width: 100%;
  }

  #my_slider .carousel-control-prev,
  #my_slider .carousel-control-next {
    display: none;
  }
}

/* ----- Layout padding: reduce on small screens ----- */
@media (max-width: 767.98px) {
  .layout_padding {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
  }
}

/* ----- Services / Template section ----- */
@media (max-width: 991.98px) {
  .template_section .carousel-item [class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .template_section .image_5 img {
    height: 180px;
  }

  .solution_text {
    font-size: clamp(1.35rem, 4vw, 1.75rem);
    margin-bottom: var(--space-xl);
  }

  .template_section .carousel-control-prev,
  .template_section .carousel-control-next {
    width: 36px;
    height: 36px;
    top: 25%;
  }
}

@media (max-width: 767.98px) {
  .template_section .carousel-item [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: var(--space-md);
  }

  .template_section .carousel-item .row {
    margin: 0;
  }

  .template_section .image_5 img {
    height: 200px;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  .cool_text {
    font-size: 1rem;
  }

  .lorem_dolor_text {
    font-size: 0.875rem;
  }

  .template_section .carousel-control-prev,
  .template_section .carousel-control-next {
    display: none;
  }
}

/* ----- Email / Content sections (About, What we do) ----- */
@media (max-width: 991.98px) {
  .email_section .row {
    flex-direction: column;
  }

  .email_section .col-md-6:first-child {
    order: 1;
    margin-bottom: var(--space-lg);
  }

  .email_section .col-md-6:last-child {
    order: 2;
    text-align: center;
  }

  .email_section .image_2 img {
    min-height: 240px;
  }

  .mark_text {
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    text-align: center;
  }

  .lorem_text {
    text-align: center;
    font-size: 0.9375rem;
  }
}

@media (max-width: 575.98px) {
  .email_section .image_2 img {
    min-height: 200px;
  }

  .mark_text {
    font-size: 1.25rem;
  }

  .lorem_text {
    font-size: 0.875rem;
  }
}

/* ----- Contact form ----- */
@media (max-width: 767.98px) {
  .mail_section {
    width: 100%;
    max-width: 100%;
  }

  .contact_section .solution_text {
    font-size: 1.5rem;
  }
}

@media (max-width: 575.98px) {
  .mail_text,
  .massage_text {
    font-size: 16px; /* prevents zoom on iOS */
  }

  .send_bt a {
    display: block;
    text-align: center;
    padding: var(--space-md);
  }
}

/* ----- Footer ----- */
@media (max-width: 991.98px) {
  .footer_section .row {
    flex-direction: column;
    text-align: center;
  }

  .footer_section .col-lg-6:first-child {
    margin-bottom: var(--space-xl);
  }

  .footer_logo {
    display: flex;
    justify-content: center;
  }

  .contact_text {
    text-align: center;
  }

  .call_section {
    justify-items: center;
    text-align: center;
  }

  .call_section_left,
  .call_section_middle,
  .call_section_right {
    text-align: center;
  }

  .map_icon {
    display: flex;
    justify-content: center;
  }

  .social_icon ul {
    justify-content: center;
  }

  .menus_main {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-lg);
  }

  .menus_text,
  .Recent_text {
    text-align: center;
  }

  .menu_text ul {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .menu_text li {
    text-align: center;
  }

  .Enter_text {
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }

  .subscribe_bt {
    display: flex;
    justify-content: center;
  }
}

@media (max-width: 575.98px) {
  .footer_section {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }

  .call_section {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .location_text {
    font-size: 0.875rem;
  }

  .copyright_section {
    padding: var(--space-sm) var(--space-md);
  }

  .copyright_text {
    font-size: 0.8125rem;
  }

  .teams_text {
    display: block;
    margin-left: 0;
    margin-top: var(--space-xs);
  }
}

/* ----- Min widths: ensure desktop layout above breakpoints ----- */
@media (min-width: 992px) {
  .banner_section .row {
    min-height: 380px;
  }

  .banner_taital {
    font-size: 2.75rem;
  }

  .email_section .row {
    align-items: center;
  }

  .email_section .col-md-6:first-child {
    padding-right: var(--space-xl);
  }

  .email_section .col-md-6:last-child {
    padding-left: var(--space-xl);
  }

  .footer_section .row {
    align-items: flex-start;
  }
}

@media (min-width: 1200px) {
  :root {
    --container-max: 1140px;
  }
}