/* 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;
    }
}

/* 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-inner--mangal {
    flex-wrap: nowrap;
}
}


/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {

}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}