/* =========================================================
   ALAD BUSINESS GROUP
   Responsive Styles
   ========================================================= */

@media (max-width: 1000px) {

    .nav-menu {
        gap: 18px;
    }

    .nav-menu > a {
        font-size: 13px;
    }

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

}


@media (max-width: 800px) {

    .topbar {
        display: none;
    }

    .navbar-inner {
        min-height: 72px;
    }

    .brand img {
        width: 150px;
    }

    .mobile-menu-btn {
        display: block;
    }

    .nav-menu {

        position: absolute;

        top: 100%;

        left: 0;

        width: 100%;

        background: white;

        display: none;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding: 10px 5% 20px;

        box-shadow:
            0 15px 25px rgba(0,0,0,0.08);
    }

    .nav-menu.show {
        display: flex;
    }

    .nav-menu > a {

        padding: 14px 0;

        border-bottom:
            1px solid #eee;
    }

    .nav-menu > a::after {
        display: none;
    }

    .nav-menu .nav-contact {
        margin-top: 10px;

        text-align: center;

        border: 0;
    }

    .footer-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .footer-bottom-inner {
        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 500px) {

    .container {
        width: 90%;
    }

    .section {
        padding: 65px 0;
    }

    .footer-main {
        padding: 60px 0 45px;
    }

}


/* =========================================================
   HOMEPAGE RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .business-grid {

        grid-template-columns:
            repeat(2,1fr);

    }

    .values-grid {

        grid-template-columns:
            repeat(2,1fr);

    }

    .about-preview-grid {

        gap: 40px;

    }

}


@media (max-width: 800px) {

    .hero {

        min-height: 650px;

    }

    .hero h1 {

        letter-spacing: -1px;

    }

    .hero p {

        font-size: 16px;

    }

    .about-preview-grid {

        grid-template-columns: 1fr;

    }

    .about-image {

        order: 2;

    }

    .about-content {

        order: 1;

    }

    .product-grid,
    .news-grid {

        grid-template-columns: 1fr;

    }

    .featured-project {

        grid-template-columns: 1fr;

    }

    .featured-project-image {

        min-height: 350px;

    }

    .client-logos {

        grid-template-columns:
            repeat(2,1fr);

    }

    .section-heading-row {

        align-items: flex-start;

        flex-direction: column;

    }

    .cta-content {

        flex-direction: column;

        align-items: flex-start;

    }

}


@media (max-width: 600px) {

    .hero {

        min-height: 600px;

    }

    .hero-buttons {

        flex-direction: column;

        align-items: flex-start;

    }

    .business-grid {

        grid-template-columns: 1fr;

    }

    .values-grid {

        grid-template-columns: 1fr;

    }

    .client-logos {

        grid-template-columns: 1fr 1fr;

    }

    .hero-scroll {

        display: none;

    }

}


/* =========================================================
   ALAD HEADER RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .top-bar-inner {
        min-height: 38px;
    }

    .top-contact {
        gap: 12px;
        font-size: 11px;
    }

    .top-social {
        display: none;
    }

    .header-inner {
        min-height: 75px;
    }

    .site-logo img {
        width: 160px;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .main-navigation {
        position: absolute;

        top: 100%;
        left: 0;
        right: 0;

        background: #ffffff;

        border-top: 1px solid #eeeeee;

        box-shadow: 0 10px 25px rgba(0,0,0,0.08);

        display: none;
    }

    .main-navigation.active {
        display: block;
    }

    .nav-menu {
        display: block;

        width: 100%;
    }

    .nav-menu > li {
        width: 100%;
    }

    .nav-menu > li > a {
        padding: 15px 25px;

        border-bottom: 1px solid #eeeeee;
    }

    .nav-menu > li > a::after {
        display: none;
    }

    .nav-menu > li > a.nav-contact {
        margin: 10px 20px;

        justify-content: center;
    }

    .dropdown-menu {
        position: static;

        width: 100%;

        display: none;

        opacity: 1;
        visibility: visible;

        transform: none;

        box-shadow: none;

        border-top: 0;

        background: #f8fafb;
    }

    .has-dropdown:hover .dropdown-menu {
        display: none;
    }

    .has-dropdown.open .dropdown-menu {
        display: block;
    }

}


@media (max-width: 900px) {

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

    .footer-bottom-inner {
        flex-direction: column;

        justify-content: center;

        gap: 8px;

        padding: 20px 0;
    }

}


@media (max-width: 600px) {

    .footer-grid {
        grid-template-columns: 1fr;

        padding: 50px 0;
    }

    .footer-company p {
        max-width: none;
    }

}



/* =========================================================
   HERO RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .alad-hero {
        height: calc(100vh - 113px);
        min-height: 600px;
    }

    .hero-content {
        width: 86%;
    }

    .hero-content h1 {
        font-size: clamp(42px, 10vw, 65px);
    }

    .hero-content p {
        font-size: 15px;

        max-width: 500px;
    }

    .hero-arrow {
        width: 42px;
        height: 42px;
    }

    .hero-prev {
        left: 15px;
    }

    .hero-next {
        right: 15px;
    }

}


@media (max-width: 600px) {

    .alad-hero {
        min-height: 650px;
    }

    .hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(3,42,51,0.88),
                rgba(3,42,51,0.55)
            );
    }

    .hero-content h1 {
        font-size: 45px;

        letter-spacing: -1px;
    }

    .hero-content p {
        font-size: 14px;

        line-height: 1.7;

        margin: 18px 0 25px;
    }

    .hero-buttons {
        flex-direction: column;

        align-items: flex-start;
    }

    .hero-btn {
        width: 210px;
    }

    .hero-arrow {
        display: none;
    }

    .hero-dots {
        left: 25px;

        transform: none;

        bottom: 30px;
    }

    .hero-counter {
        right: 25px;

        bottom: 30px;
    }

}