/* ==========================================================================
   CloudConverge replica — responsive styles
   Breakpoints follow the reference site: 1366 (laptop), 1280, 1024 (tablet),
   767 (mobile), 480, 390, 360.
   ========================================================================== */

/* ---------- Laptop: <= 1366px ---------- */
@media (max-width: 1366px) {
  .intro-title { line-height: 36px; }
}

/* ---------- <= 1280px ---------- */
@media (max-width: 1280px) {
  :root { --container: 1140px; }
  .engagement-info { padding-left: 40px; }
  .footer-bottom { padding: 0 40px; }
}

/* ---------- Tablet: <= 1024px ---------- */
@media (max-width: 1024px) {
  /* header switches to mobile layout: solid dark bar, hamburger left, logo centered */
  .main-nav, .header-cta { display: none; }
  .mega-panel { display: none; }
  .site-header { position: relative; background: #1D1A4E; }
  .header-inner {
    justify-content: center;
    position: relative;
    padding: 10px 20px;
    min-height: 56px;
  }
  .mobile-toggle {
    display: flex;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
  }
  .site-header .logo-light { display: block; }
  .site-header .logo-dark { display: none; }
  .site-header.is-sticky { position: fixed; }

  .hero {
    background-image: url('../assets/images/home-banner-mob1.avif');
    padding: 0 20px;
    min-height: 600px;
  }
  .hero-content { width: 100%; margin-left: 0; padding-top: 100px; }
  .hero-iso { overflow: hidden; }
  .hero-title { font-size: 40px; line-height: 50px; margin-left: -2px; }
  .hero-subtitle { padding-right: 0; }
  .hero-iso { padding: 20px 0; }

  .intro { padding-top: 40px; }
  .intro-title { max-width: 90%; font-size: 28px; line-height: 38px; }
  .intro-text { max-width: 90%; }

  .services-container { flex-wrap: wrap; }
  .service-card { width: calc(50% - 30px); margin-bottom: 15px; }

  .differentiate-head { padding: 100px 15px 0; background-position: 0 0; }
  .differentiate { padding: 29px 15px 111px; }

  .projects { padding: 40px 0; }
  .projects-grid > li { flex: 0 0 50%; max-width: 50%; }

  .client-logo { flex: 0 0 25%; max-width: 25%; }

  .case-slider { padding: 180px 0 120px; }
  .case-captions { width: 60%; min-height: 420px; }

  .engagement { margin-top: 0; padding: 120px 0 50px; }
  .engagement-grid { flex-wrap: wrap; }
  .engagement-cards { width: 100%; }
  .engagement-info { width: 100%; margin-top: 31px; padding: 0 15px; }

  .stats-head { padding-top: 60px; }

  .footer-contact {
    background-attachment: scroll;
    padding: 110px 15px 120px;
  }
  .footer-contact-grid { flex-wrap: wrap; }
  .fc-info { width: 100%; padding: 0; }
  .fc-form-card {
    width: 100%;
    margin: 20px 0 0;
    padding: 40px 40px 50px;
  }

  .footer-main { padding: 60px 15px; }
  .footer-columns { flex-wrap: wrap; }
  .f-col-brand { width: 55%; }
  .f-col:nth-child(2) { width: 45%; }
  .f-col:nth-child(3) { width: 45%; padding-top: 24px; }
  .f-col:nth-child(4) { width: 55%; padding-top: 25px; }

  .footer-bottom { padding: 0 20px; }
}

/* ---------- Mobile: <= 767px ---------- */
@media (max-width: 767px) {
  .header-logo img { width: 150px; height: 40px; }

  .hero { padding: 0 20px; min-height: 0; }
  .hero-content { padding-top: 60px; }
  .hero-iso img { width: 100%; max-width: none; height: auto; }
  .hero-typed { font-size: 32px; height: 42px; min-height: 22px; }
  .typed-text { font-size: 32px; line-height: 42px; min-height: 42px; }
  .typed-cursor { font-size: 32px; line-height: 42px; }
  .hero-title { font-size: 30px; line-height: 38px; margin-left: 0; }
  .hero-btn-wrap { margin: 20px 0 0; }
  .hero-iso { padding: 20px 0 0; }

  .section-title { font-size: 26px; line-height: 32px; }

  .intro-title { max-width: 90%; font-size: 24px; line-height: 36px; }
  .intro-text { max-width: 90%; padding-bottom: 20px; }

  .services { padding: 20px 0 40px; }
  .service-card { width: calc(100% - 30px); margin: 0 15px 15px; }

  .differentiate-head { padding: 40px 15px 0; }
  .differentiate-head .section-title { padding-bottom: 0; }
  .differentiate { padding: 30px 15px 40px; }
  .differentiate-grid { flex-wrap: wrap; }
  .diff-col { width: 100%; padding: 0; }
  .diff-box { padding: 20px 20px 0; }

  .projects { padding: 40px 0; }
  .projects .section-title { margin: 0; padding-bottom: 10px; }
  .projects-grid > li { flex: 0 0 100%; max-width: 100%; }
  .case-card { height: 500px; }

  .clients { margin-bottom: 40px; }
  .clients .section-title { margin-bottom: 20px; padding-bottom: 10px; }
  .client-logo { flex: 0 0 50%; max-width: 50%; }
  .clients-more { margin-top: 20px; }

  .case-slider { padding: 60px 0; }
  .case-slider-container { justify-content: center; }
  .case-captions { width: 90%; margin: 0; min-height: 0; height: auto; position: static; }
  .case-caption { position: static; display: none; }
  .case-caption.is-active { display: block; }

  .engagement { padding: 50px 0; }
  .engagement-cards { flex-wrap: wrap; }
  .eng-col { width: 100%; padding: 0 15px; }
  .eng-card { padding: 40px 30px; }
  .engagement-info { margin-top: 31px; padding: 0 20px; }

  .stats-head { padding: 40px 15px 0; }
  .stats-head .section-title { font-size: 28px; line-height: 32px; padding: 0 20px 20px; }
  .stats { padding: 0 0 40px; }
  .stats-grid { flex-wrap: wrap; }
  .stat-box { width: 100%; }
  .stat-card { padding: 30px; }

  .footer-contact {
    background-image: url('../assets/images/hm1-form-bg-3-mobile.webp');
    padding: 40px 15px;
  }
  /* on mobile the form card stacks above the contact info, as on the reference */
  .footer-contact-grid { flex-direction: column-reverse; }
  .fc-info { margin-top: 40px; }
  .fc-form-card { padding: 30px 20px 40px; margin-top: 0; }

  .footer-main { padding: 40px 15px 30px; }
  .f-col,
  .f-col-brand,
  .f-col:nth-child(2),
  .f-col:nth-child(3),
  .f-col:nth-child(4) { width: 100%; padding: 10px 0; }
  .f-about { padding-right: 0; }

  .footer-bottom { padding: 0 0 10px; }
  .footer-bottom-inner { flex-direction: column; align-items: center; }
  .copyright {
    max-width: 100%;
    text-align: center;
    padding: 25px 20px 10px;
  }
  .legal-links {
    max-width: 100%;
    flex-direction: column;
    align-items: center;
    padding: 10px 0 20px;
  }
  .legal-links li { margin: 0 0 8px; }
}

/* ---------- <= 480px ---------- */
@media (max-width: 480px) {
  .hero { padding: 110px 20px 30px; }
  .hero-subtitle { font-size: 15px; line-height: 24px; }
  .fc-heading, .fc-form-heading { font-size: 28px; }
  .mega-inner { padding: 20px 15px; }
  .case-captions { width: 100%; }
  .eng-card { padding: 35px 25px; }
}

/* ---------- <= 390px ---------- */
@media (max-width: 390px) {
  .hero-typed, .typed-text, .typed-cursor { font-size: 28px; }
  .hero-title { font-size: 27px; line-height: 35px; }
  .section-title { font-size: 24px; line-height: 30px; }
  .stat-card { padding: 25px 15px; }
}

/* ---------- <= 360px ---------- */
@media (max-width: 360px) {
  .hero-typed, .typed-text, .typed-cursor { font-size: 26px; }
  .hero-title { font-size: 25px; line-height: 33px; }
  .intro-title { font-size: 22px; line-height: 32px; }
  .fc-form-card { padding: 25px 15px 35px; }
}

/* ---------- About page ---------- */
@media (max-width: 1366px) {
  .about-ceo { padding: 120px 0 112px; }
  .about-ceo-heading { font-size: 26px; line-height: 36px; }
  .about-why { padding: 111px 0 168px; }
}
@media (max-width: 1024px) {
  .inner-banner { height: 300px; }
  .about-mission-grid, .about-ceo-grid, .about-why-grid { flex-wrap: wrap; }
  .about-mission-text { width: 100%; padding-right: 0; }
  .about-mission-media { width: 100%; margin-top: 30px; }
  .about-ceo { padding: 60px 0; }
  .about-ceo-media { width: 100%; padding: 0; }
  .about-ceo-text { width: 100%; padding-left: 0; margin-top: 30px; }
  .about-different-grid { flex-wrap: wrap; }
  .about-diff-item { width: 50%; margin-bottom: 30px; }
  .about-why { padding: 60px 0 30px; }
  .about-why-text { width: 100%; padding-right: 0; }
  .about-why-media { width: 100%; padding-left: 0; margin-top: 32px; }
}
@media (max-width: 767px) {
  .inner-banner { height: 220px; }
  .about-intro { padding-top: 40px; }
  /* reference enlarges both the title and subtitle to 30px on mobile */
  .about-title { font-size: 30px; line-height: 38px; }
  .about-subtitle { font-size: 30px; line-height: 38px; max-width: 100%; }
  .about-different { padding: 60px 15px; }
  .about-different-head { flex-wrap: wrap; gap: 15px; }
  .about-different-grid { padding-top: 27px; }
  .about-diff-item { width: 100%; }
  .about-ceo-heading { padding: 12px 0; }
}

/* ---------- Work Culture page ---------- */
@media (prefers-reduced-motion: reduce) {
  .media-shift-left img { transition: none; }
  .media-shift-left:hover img { transform: none; }
}

@media (max-width: 1024px) {
  .workculture-banner { height: 320px; }
  .workculture-intro { padding: 120px 0 111px; }
  .workculture-intro-grid { flex-wrap: wrap; }
  .workculture-copy, .workculture-perks { width: 100%; }
  .workculture-perks { margin-top: 40px; }
  .workculture-gallery { padding-bottom: 120px; }
  .workculture-gallery-inner { width: auto; margin: 0 15px; }
  .workculture-feature img { width: 100%; max-width: calc(100% - 15px); }
}

@media (max-width: 767px) {
  .workculture-banner { height: 260px; }
  .workculture-banner h1 { font-size: 24px; line-height: 30px; }
  .workculture-breadcrumb-list { gap: 5px; }
  .workculture-breadcrumb-list li { font-size: 12px; }
  .workculture-breadcrumb-step { gap: 19px; }
  .workculture-intro { padding: 0; }
  .workculture-copy { padding: 25px 0 0; }
  .workculture-perks { padding: 0; }
  .resume-card { padding: 28px 35px 35px; background-size: cover; }
  .workculture-gallery { padding: 30px 0 91px; }
  .workculture-gallery-inner { margin: 0; }
  .workculture-gallery h2 { font-size: 40px; line-height: 32px; margin: 0 0 30px; }
  .workculture-feature { grid-template-columns: 1fr; }
  .workculture-feature img { width: 100%; max-width: 100%; margin-left: 0; }
  .workculture-feature > div { margin: 15px 0 0; }
  .workculture-feature p { width: 100%; }
}