@media only screen and (min-width: 320px) and (max-width: 767px) {
  body {
    font-size: 13px;
  }

  .topMenuRight .btn.menu-toggle {
    display: flex;
  }

  /* .navbar-light .navbar-nav .nav-item .dropdown-menu {
                display: none;
            } */

  /* .mobileLink {
                display: block !important;
                padding-left: 20px;
            } */

  .navbar-nav .nav-link.active {
    border: 0px !important;
  }

  /* ── Compact header buttons on mobile ── */
  .topMenuRight .btn {
    font-size: 11px;
    width: 34px;
    height: 34px;
  }

  /* Uniform SVG icon size inside topMenuRight */
  .topMenuRight .btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  #wrap {
    width: 50px;
    height: 50px;
    bottom: 15px;
  }

  .content-tab .tab-list button.active::after {
    display: none;
  }

  #map iframe {
    height: 200px;
  }

  .courseRight .btn {
    padding: 10px 20px;
  }

  /* ── Home page responsive ── */

  /* ── Product detail info panel ── */

  /* ── Mobile mega menu — inline inside the drawer ── */

  .megaArrow.open {
    transform: rotate(180deg);
  }

  /* ── Login page ── */
  .loginPage {
    padding: 90px 16px 32px;
    align-items: flex-start;
  }

  .loginLogoImg {
    height: 48px;
  }

  .loginCard {
    padding: 28px 20px 24px;
    border-radius: 16px;
    max-width: 100%;
  }
  .itQuickLinks {
    flex-direction: row;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  /* .navbar-light .navbar-nav .nav-item .dropdown-menu {
                display: none;
            } */

  /* .mobileLink {
                display: block !important;
                padding-left: 20px;
            } */

  .navbar-nav .nav-link.active {
    border: 0px !important;
  }

  #wrap {
    bottom: 20px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1025px) {
  .topMenuRight .btn {
    padding: 11px 15px;
    font-size: 13px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1050px) {
  .topMenuRight .btn {
    padding: 11px 15px;
    font-size: 13px;
  }
}

@media only screen and (min-width: 1051px) and (max-width: 1199px) {
  .topMenuRight .btn {
    padding: 13px 18px;
    font-size: 14px;
  }
}

/* ==========================================================================
   Site (it*) component breakpoints — moved here from site.css.

   NOTE: this file loads AFTER site.css in public/index.html specifically so
   these max-width overrides win the cascade against site.css's base/desktop
   rules. Do not reorder those two <link> tags without moving this section
   back into site.css, or every rule below silently stops applying.

   Grouped by viewport width, largest first — keep new rules in the tier
   that matches where the layout actually needs to change, add a new
   @media block only if no existing tier fits, and comment each addition
   with the section (Header, Hero, About, Food Delivery App, …) it belongs to.
   ========================================================================== */
@media (max-width: 1200px) {
  /* Header — tighten up before the hamburger takes over at 960px */
  .itHeaderInner {
    padding: 20px 24px;
    gap: 16px;
  }

  .itNav {
    gap: 16px;
  }

  .itNav a {
    font-size: var(--font-size-md);
    padding: 36px 6px;
  }

  .itHeaderActions {
    gap: 10px;
  }

  .itSupportBtn {
    padding: 10px 16px;
  }

  /* Fixed-width mega menu columns can overflow the viewport on smaller
     desktops/laptops — let them flex instead of holding a hard 220px. */
  .itNavMegaMenu:not(.itNavMegaMenuWide) {
    grid-template-columns: repeat(var(--menuCols, 1), minmax(160px, 1fr));
    max-width: 100%;
  }
}

@media (max-width: 960px) {
  /* Header */
  .itNav {
    display: none;
  }

  .itMenuToggle {
    display: inline-flex;
  }

  .itSupportBtn {
    padding: 8px 12px;
    font-size: var(--font-size-xs);
    gap: 6px;
  }

  /* Hero */
  .itHeroSocial {
    display: none;
  }

  /* Quick links — bottom-left horizontal row on mobile instead of the
     right-middle vertical stack used on desktop */
  .itQuickLinks {
    left: 20px;
    right: auto;
    top: auto;
    bottom: 20px;
    transform: none;
    flex-direction: row;
  }

  /* Hide once the page is scrolled to the bottom, mobile only — desktop
     keeps it visible regardless of scroll position */
  .itQuickLinks.itQuickLinksHidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
  }

  /* Home */
  .itHeroInner,
  .itAboutInner {
    grid-template-columns: 1fr;
  }

  /* Food Delivery App */
  .itFoodHeroInner {
    grid-template-columns: 1fr;
  }

  .itFoodHeroArt {
    min-height: 320px;
  }

  .itFoodHeroDesc {
    max-width: none;
  }

  .itFeatures {
    grid-template-columns: 1fr 1fr;
    margin: 30px 0px;
    padding: 0px 30px;
  }

  .itValuesGrid,
  .itFoodPlatformGrid,
  .itFoodOrderGrid,
  .itFoodKeyGrid,
  .itFoodPricingGrid {
    grid-template-columns: 1fr 1fr;
  }

  .itServiceGrid {
    grid-template-columns: 1fr 1fr;
  }

  .itFoodOrderInner {
    grid-template-columns: 1fr;
  }

  .itFoodDashboardMock {
    flex-direction: column;
  }

  .itFoodDashboardSidebar {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 14px 16px;
  }

  .itFoodDashboardBrand {
    border-bottom: none;
    margin-bottom: 0;
    padding: 0;
  }

  .itFoodDashboardNav {
    display: none;
  }

  .itFoodDashboardStatsRow {
    grid-template-columns: 1fr 1fr;
  }

  .itFoodDashboardCharts {
    grid-template-columns: 1fr;
  }

  .itStatsGrid {
    grid-template-columns: 1fr;
  }

  .itMilestonesGrid {
    grid-template-columns: 1fr 1fr;
  }

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

  .itServiceDetailBody {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .itServiceDetailVisual img {
    height: 240px;
  }

  .itContactGrid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .itFormRow {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Typography — first step down for the big display headings */
  .itHeroTitle,
  .itSectionTitle,
  .itAboutTitle,
  .itPageBannerTitle {
    font-size: var(--font-size-4xl);
    line-height: 1.2;
  }

  .itFoodHeroTitle {
    font-size: var(--font-size-4xl);
  }

  .itFoodKeyTitle {
    font-size: var(--font-size-3xl);
  }

  /* Header */
  .itLogoImg {
    height: 54px;
  }

  /* Hero art — fixed height with % children, scale the box down */
  .itHeroArt {
    height: 380px;
  }

  .itHeroArtSecondary,
  .itHeroArtBadge {
    display: none;
  }

  .itHeroArtMain {
    width: 100%;
    left: 0;
  }

  .itHeroShape.s1 {
    width: 220px;
    height: 220px;
  }

  .itHeroShape.s2 {
    width: 140px;
    height: 140px;
  }

  /* About art */
  .itAboutArtMain img {
    height: 260px;
  }

  .itAboutArtSmall img {
    height: 100px;
  }

  .itAboutStatsRow {
    gap: 20px;
  }

  /* Section padding — the huge desktop top/bottom paddings are excessive
     once content stacks to a single column */
  .itMission {
    padding: 90px 20px 100px;
  }

  .itTeam {
    padding: 90px 20px 100px;
  }

  /* Top padding must clear the absolutely-positioned .ctaPosition card
     above the heading (it wraps to a taller 2-row layout below ~900px) */
  .itMilestones {
    padding: 175px 20px 60px;
  }

  /* Food Delivery App — phone mockup stack needs to shrink with its box */
  .itFoodHeroBlob {
    width: 280px;
    height: 280px;
  }

  .itFoodPhone {
    width: 150px;
    height: 310px;
  }

  .itFoodPhoneLeft {
    margin-right: -24px;
  }

  .itFoodPhoneRight {
    margin-left: -24px;
  }

  .itFoodDashboardStatsRow {
    gap: 10px;
  }

  .itFoodDonutWrap {
    flex-wrap: wrap;
  }
  .itMobileNav a {
    display: flex;
    padding: 10px 4px;
    border-bottom: 0px;
  }
  .itNavDropdownIcon {
    display: none;
  }
  .itMobileNavHead {
    padding-bottom: 0px;
  }
}

@media (max-width: 900px) {
  /* Footer */
  .itFooterInner {
    grid-template-columns: 1fr 1fr;
  }
  .itMobileNav a {
    display: flex;
    padding: 10px 4px;
    border-bottom: 0px;
  }
  .itNavDropdownIcon {
    display: none;
  }
  .itMobileNavHead {
    padding-bottom: 0px;
  }
}

@media (max-width: 768px) {
  /* Header */
  .itHeaderInner {
    padding: 15px 20px;
    gap: 12px;
  }

  .itLogoImg {
    height: 44px;
  }

  .itHeaderActions {
    gap: 8px;
  }

  .itLoginBtn {
    padding: 9px 16px;
    font-size: var(--font-size-sm);
  }

  .itUserDropMenu {
    min-width: 160px;
  }

  /* Section padding — second pass, tighten further for tablets */
  .itHero {
    padding: 70px 16px;
  }

  .itAbout {
    padding: 40px 20px;
  }

  .itAboutInner {
    gap: 40px;
  }

  .itMission {
    padding: 60px 20px 80px;
  }

  .itServices,
  .itFoodPlatform,
  .itFoodOrder,
  .itFoodKeyFeatures,
  .itFoodPricing,
  .itFoodDashboard,
  .itTestimonials {
    padding: 60px 20px;
  }

  .itTeam {
    padding: 60px 20px 90px;
  }

  .itPageBanner {
    padding: 60px 20px 50px;
  }

  /* CTA card grows taller as it wraps further — keep clearing it */
  .itMilestones {
    padding: 195px 16px 50px;
  }

  /* Typography — second step down */
  .itHeroTitle {
    font-size: var(--font-size-3xl);
    line-height: 1.25;
  }

  .itHeroDesc {
    font-size: var(--font-size-md);
  }

  .itSectionTitle,
  .itAboutTitle,
  .itPageBannerTitle {
    font-size: var(--font-size-2xl);
  }

  .itFoodHeroTitle {
    font-size: var(--font-size-2xl);
  }

  .itFoodHeroDesc {
    font-size: var(--font-size-md);
  }

  .itFoodKeyTitle {
    font-size: var(--font-size-2xl);
  }

  .itFoodDashboardTitle {
    font-size: var(--font-size-2xl);
  }

  .itAboutStatBlock h3 {
    font-size: var(--font-size-2xl);
  }

  /* Hero art */
  .itHeroArt {
    height: 320px;
  }

  .itHeroCtaRow {
    gap: 16px;
  }

  /* About art */
  .itAboutArt {
    padding: 20px 10px 50px 0;
  }

  .itAboutArtMain img {
    height: 220px;
  }

  .itAboutStatsRow {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  /* Cards — reduce padding so text has room to breathe on tablets */
  .itFeatureCard,
  .itServiceCard,
  .itFoodPlatformCard {
    padding: 24px 18px;
  }

  .itFoodKeyCard {
    padding: 26px 20px;
  }

  .itFoodPricingCard {
    padding: 26px 20px;
  }

  .itTeamCard {
    padding: 24px 18px;
  }

  .itTestimonialCard {
    padding: 28px;
  }

  .itContactPanel {
    padding: 26px;
  }

  .itCountriesCard {
    padding: 18px;
  }

  /* Food Delivery App — hero phone stack */
  .itFoodHero {
    padding: 50px 16px 0;
  }

  .itFoodHeroArt {
    min-height: 280px;
  }

  .itFoodHeroBlob {
    width: 220px;
    height: 220px;
  }

  .itFoodPhone {
    width: 130px;
    height: 270px;
  }

  .itFoodPhoneLeft {
    margin-right: -20px;
  }

  .itFoodPhoneRight {
    margin-left: -20px;
  }

  .itFoodHeroBottomBar {
    gap: 10px;
    padding: 20px 16px;
  }

  .itFoodDashboardContent {
    padding: 20px 18px;
  }

  .itFoodDashboardSidebar {
    padding: 12px 14px;
  }

  /* Page banner decorative shapes — scale down so they don't dominate */
  .itPageBannerBlob {
    width: 180px;
    height: 110px;
  }

  .itPageBannerCircle {
    width: 44px;
    height: 44px;
  }
  .itMobileNav a {
    display: flex;
    padding: 10px 4px;
    border-bottom: 0px;
  }
  .itNavDropdownIcon {
    display: none;
  }
  .itMobileNavHead {
    padding-bottom: 0px;
  }
}

@media (max-width: 560px) {
  /* Footer */
  .itFooterInner {
    grid-template-columns: 1fr;
  }

  /* Home */
  .itFeatures,
  .itServiceGrid,
  .itValuesGrid,
  .itFoodPlatformGrid,
  .itFoodOrderGrid,
  .itFoodKeyGrid,
  .itFoodPricingGrid {
    grid-template-columns: 1fr;
  }

  .itHeroTitle {
    font-size: var(--font-size-3xl);
  }

  /* Header */
  .itHeaderInner {
    padding: 15px 16px;
  }

  .itContainer {
    position: static !important;
    padding: 0 16px;
    transform: translateX(-0%) !important;
  }
  .itSectionHead {
    margin: 0px auto 50px;
  }
  .itFooter {
    padding: 40px 20px 0;
  }
  /* Hero */
  .itHero {
    padding: 40px 16px;
    min-height: auto;
  }

  .itHeroArt {
    height: 280px;
  }

  .itHeroDesc {
    max-width: none;
  }

  .itHeroCtaRow {
    gap: 12px;
  }

  /* Feature / service / platform cards */
  .itFeatureCard,
  .itServiceCard,
  .itFoodPlatformCard {
    padding: 22px 16px;
  }

  /* About */
  .itAboutTitle {
    font-size: var(--font-size-2xl);
  }

  .itAboutStatsRow {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .itAboutStatBlock {
    padding-left: 0;
    border-left: none;
    padding-top: 14px;
    border-top: 1px solid var(--color-border-primary);
  }

  .itAboutStatBlock:first-child {
    padding-top: 0;
    border-top: none;
  }

  .itAboutStatCardRow {
    flex-wrap: wrap;
    gap: 12px;
  }

  .itAboutBtn,
  .itHeroBtn {
    padding: 14px 24px;
  }

  .itMilestonesContactBtn {
    padding: 12px 22px;
  }

  .itChip {
    padding: 8px 14px;
    font-size: var(--font-size-xs);
  }

  /* Page banner */
  .itPageBannerTitle {
    font-size: var(--font-size-2xl);
  }

  .itPageBanner {
    padding: 50px 16px 40px;
  }

  .itPageBannerBlob {
    width: 130px;
    height: 90px;
  }

  .itPageBannerCircle {
    width: 34px;
    height: 34px;
  }

  /* Service detail */
  .itServiceDetailVisual img {
    height: 200px;
  }

  .itServiceDetailSubtitle {
    font-size: var(--font-size-xl);
  }

  /* Contact */
  .itContactPanel {
    padding: 20px;
  }

  .itCountriesCard {
    padding: 16px;
  }
  .itPageBannerShape {
    display: none;
  }
  .itCtaBar {
    margin-bottom: 30px;
  }
  /* Team / testimonials */
  .itTeam {
    padding: 40px 20px;
  }
  .itServiceDetail {
    padding: 40px 20px;
  }
  .itServiceDetailBody {
    margin-bottom: 0px;
  }
  .itTeamAvatar {
    width: 140px;
    height: 160px;
  }

  .itTeamAvatar img {
    height: 160px;
  }

  .itTestimonials {
    padding: 60px 16px;
  }

  .itTestimonialCard {
    padding: 24px 18px;
  }

  .itTestimonialQuote {
    font-size: var(--font-size-md);
  }

  /* Milestones — 2-col grid is still cramped once cards stack this narrow */
  .itMilestonesGrid {
    grid-template-columns: 1fr 1fr;
    gap: 20px 14px;
  }

  /* CTA card wraps to its tallest layout in this range — keep clearing it */
  .itMilestones {
    padding-top: 220px;
  }

  .itMilestoneValue {
    font-size: var(--font-size-3xl);
  }

  .itMilestonesContact {
    padding: 20px;
  }

  /* Food Delivery App */
  .itFoodHero {
    padding: 40px 16px 0;
  }

  .itFoodHeroTitle {
    font-size: var(--font-size-2xl);
  }

  .itFoodHeroDesc {
    font-size: var(--font-size-sm);
  }

  .itFoodHeroCtaRow {
    gap: 10px;
  }

  .itFoodHeroBtnOutline {
    padding: 12px 22px;
  }

  .itFoodHeroHighlights {
    gap: 14px;
  }

  .itFoodHeroArt {
    min-height: 240px;
  }

  .itFoodHeroBlob {
    width: 180px;
    height: 180px;
  }

  .itFoodPhone {
    width: 110px;
    height: 230px;
    border-radius: 22px;
  }

  .itFoodPhoneLeft {
    margin-right: -16px;
  }

  .itFoodPhoneRight {
    margin-left: -16px;
  }

  .itFoodHeroBottomBar {
    gap: 8px;
    padding: 16px 12px;
  }

  .itFoodKeyTitle,
  .itFoodDashboardTitle {
    font-size: var(--font-size-xl);
  }

  .itFoodKeyCard,
  .itFoodPricingCard {
    padding: 24px 16px;
  }

  .itFoodDashboardMock {
    margin-top: 24px;
  }

  .itFoodDashboardContent {
    padding: 16px 14px;
  }

  .itFoodDashboardStatsRow {
    grid-template-columns: 1fr;
  }

  .itFoodDashboardFeatures {
    gap: 24px;
    padding: 24px 16px;
  }

  .itFoodPricingBlob.b3 {
    width: 160px;
    height: 160px;
  }
  .itMobileNav a {
    display: flex;
    padding: 10px 4px;
    border-bottom: 0px;
  }
  .itNavDropdownIcon {
    display: none;
  }
  .itMobileNavHead {
    padding-bottom: 0px;
  }
}

@media (max-width: 420px) {
  .itMobileNav a {
    display: flex;
    padding: 10px 4px;
    border-bottom: 0px;
  }
  .itNavDropdownIcon {
    display: none;
  }
  .itMobileNavHead {
    padding-bottom: 0px;
  }
  /* Header — squeeze the action cluster so it never wraps/overflows */
  .itHeaderInner {
    padding: 15px;
    gap: 8px;
  }

  .itLogoImg {
    height: 38px;
  }

  .itHeaderActions {
    gap: 6px;
  }

  .itLoginBtn {
    padding: 9px 12px;
    font-size: var(--font-size-xs);
  }

  /* Cart popup — tighten inner padding on very small phones */
  .itCartHeader,
  .itCartBody,
  .itCartFooter {
    padding-left: 14px;
    padding-right: 14px;
  }

  .itCartActions {
    flex-direction: column;
  }

  /* Hero */
  .itHeroTitle {
    font-size: var(--font-size-3xl);
  }

  .itHeroArt {
    height: 240px;
  }

  .itHeroShape.s1,
  .itHeroShape.s2 {
    display: none;
  }

  /* CTA card is at its tallest wrapped layout here — keep clearing it */
  .itMilestones {
    padding-top: 40px;
  }

  /* Food Delivery App — the 3-phone stack no longer fits; keep the center */
  .itFoodPhoneStack {
    justify-content: center;
  }

  .itFoodPhoneLeft,
  .itFoodPhoneRight {
    display: none;
  }

  .itFoodPhoneCenter {
    margin: 0;
    transform: none;
  }

  .itFoodHeroArt {
    min-height: 200px;
  }

  .itFoodHeroBlob {
    width: 150px;
    height: 150px;
  }

  .itFoodDonut {
    width: 80px;
    height: 80px;
  }

  .itFoodDonutHole {
    inset: 14px;
  }

  .itMobileNav a {
    display: flex;
    padding: 10px 4px;
    border-bottom: 0px;
  }
  .itNavDropdownIcon {
    display: none;
  }
  .itMobileNavHead {
    padding-bottom: 0px;
  }
}

@media (max-width: 360px) {
  .itMobileNav a {
    display: flex;
    padding: 10px 4px;
    border-bottom: 0px;
  }
  .itNavDropdownIcon {
    display: none;
  }
  .itMobileNavHead {
    padding-bottom: 0px;
  }
  .itContainer,
  .itHeaderInner {
    padding-left: 12px;
    padding-right: 12px;
  }

  .itHeroTitle,
  .itFoodHeroTitle {
    font-size: var(--font-size-lg);
  }

  .itSectionTitle,
  .itAboutTitle,
  .itPageBannerTitle {
    font-size: var(--font-size-xl);
  }

  .itFeatureCard,
  .itServiceCard,
  .itFoodPlatformCard,
  .itFoodKeyCard,
  .itFoodPricingCard,
  .itTeamCard {
    padding: 18px 14px;
  }

  .itHeroBtn,
  .itAboutBtn,
  .itFoodHeroBtnOutline {
    padding: 12px 18px;
    font-size: var(--font-size-sm);
  }

  .itTestimonialCard {
    padding: 18px 14px;
  }

  .itFoodPhone {
    width: 100px;
    height: 210px;
  }

  .itFoodHeroArt {
    min-height: 180px;
  }
}