/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
        .section-inner--hero {
        flex-direction: row;
        align-items: center;
    }

    .section-inner--split {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        align-items: center;
    }

    .about-layout {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        align-items: start;
    }
    .site-footer__cols {
    grid-template-columns: 1fr 1fr; /* two columns on tablet+ */
    align-items: start;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
body[data-nav-theme="dark"] .navbar-menu {
    background: initial;
    border: none;
}
body[data-nav-theme="light"] .navbar-menu {
    background: initial;
    border: none;
}
body[data-nav-theme="dark"] .navbar-menu ul {
    border: none;
}
body[data-nav-theme="light"] .navbar-menu ul {
    border: none;
}

.navbar-menu {
    display: flex;
    visibility: visible;
    justify-items: center;
    position: inherit;
    width: auto;
    height: auto;
    padding: 0;
    transform: translateX(0);
}
.navbar-menu ul {
    display: inherit;
    flex-direction: initial;
    align-items: center;
    font-size: 1rem;
    gap: 3rem;
    & li {
        padding-bottom: 0;
        gap: 0.3rem;
    }
    & li a {
        color: currentColor;
        transition: color var(--transition-default);
    }
    & li a:hover {
        color: var(--brand-2);
        }
        & .nav-cta {
            color: #000;
        transition: background-color var(--transition-default), color var(--transition-default);
    }
    & .nav-cta:hover {
        color: #000;
        background-color: var(--brand-3);
    }
}
.nav-social-menu {
    display: none;
}
.nav-toggle { display: none; }

.home-container {
    background-position: center;
}
  .section--mangal .section-inner--mangal {
    flex-wrap: wrap; /* overrides your nowrap so items can go to next row */
  }

  .section--mangal .section-inner--mangal > .section-header,
  .section--mangal .section-inner--mangal > .section-content {
    flex: 1 1 calc(50% - var(--space-200, 1.5rem)); /* stay 2-up on row 1 */
    min-width: 320px; /* prevents ugly squish before wrapping */
  }

  .section--mangal .section-inner--mangal > .services-grid {
    flex: 0 0 100%; /* full width row 2 */
    width: 100%;
  }

  .section-inner--home {
  min-height: 100vh;
  display: flex;
  align-items: center;


}

.section-inner--home .section-header {
  max-width: 42rem;
  padding-bottom: 0;
}

.section-inner--home h1 {
  font-size: clamp(3.2rem, 4vw, 3.9rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
}

.section-inner--home .section-intro {
  max-width: 54ch;
  font-size: 1.05rem;
}

.hero-actions {
  gap: 1rem;
}

.hero-visual {
  /* stop centering the right column on desktop */
  margin: 0;
  justify-self: end;
}

}



/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {

}

/* Hover effect only for devices that can hover */
@media (hover: hover) and (pointer: fine) {
    .service-card {
        transition: transform 0.18s ease-out,
                    box-shadow 0.18s ease-out,
                    border-color 0.18s ease-out;
    }
    .hexLink {
        transition: rotate 0.18s ease-out,
                    box-shadow 0.18s ease-out,
                    filter 0.18s ease-out;
    }
    .service-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12);
        border-color: var(--brand-2);
    }
    .hexLink:hover {
        filter: brightness(1.2);
        rotate: 1deg;
        box-shadow: 0 24px 5px rgba(15, 23, 42, 0.12);
        z-index: 3;
    }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}