/* Responsive Design */


/* Tablet and Larger Mobile */

@media (max-width: 992px) {
    .section-title {
        font-size: 2.2rem;
    }
    .hero-content h1 {
        font-size: 2.6rem;
    }
    .hero-content p {
        font-size: 1.2rem;
    }
    .nav-item {
        margin-left: 20px;
    }
    .client-slide {
        min-width: 25%;
        /* Show 4 logos */
    }
}


/* Mobile Devices */

@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }
    .hero-content h1 {
        font-size: 2.2rem;
    }
    .hero-content p {
        font-size: 1.1rem;
    }
    .top-bar {
        font-size: 0.8rem;
    }
    .top-bar-content {
        flex-direction: column;
        gap: 5px;
    }
    .contact-info-short span,
    .contact-info-short a.top-bar-link {
        margin-right: 10px;
    }
    .social-media-icons a {
        margin: 0 5px;
    }
    .nav-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--brand-white);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        padding: 10px 0 0;
        text-align: left;
        max-height: calc(100vh - 75px - 40px);
        /* Adjusted for new navbar height and top-bar */
        overflow-y: auto;
    }
    .nav-menu.active {
        display: flex;
    }
    .nav-item {
        margin: 0;
    }
    .nav-link {
        font-size: 1.1rem;
        padding: 12px 20px;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .nav-link::after {
        display: none;
    }
    .nav-link.active {
        background-color: var(--brand-blue);
        color: var(--brand-white);
    }
    .nav-link.active .dropdown-arrow {
        color: var(--brand-white);
    }
    .services-submenu,
    .projects-submenu {
        position: static;
        width: 100%;
        box-shadow: none;
        padding-left: -50;
        background-color: #f0f0f0;
        display: none;
        opacity: 1;
        transform: none;
        border-top: 1px solid #ddd;
        max-height: 250px;
        /* Increased max-height for better visibility */
        overflow-y: auto;
    }
    .services-dropdown-container.mobile-active .services-submenu,
    .projects-dropdown-container.mobile-active .projects-submenu {
        display: block;
    }
    .services-submenu li a,
    .projects-submenu li a {
        padding: 12px 20px 12px 35px;
        /* Increased padding for better tap target */
        font-size: 1rem;
        color: var(--text-dark);
        border-bottom: 1px solid #eee;
    }
    .services-submenu li:last-child a,
    .projects-submenu li:last-child a {
        border-bottom: none;
    }
    .services-submenu li a:hover,
    .projects-submenu li a:hover {
        background-color: var(--brand-blue);
        color: var(--brand-white);
    }
    .hamburger {
        display: block;
    }
    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
    .mobile-nav-footer.active {
        display: block;
        background-color: var(--brand-white);
        margin-top: auto;
    }
    .about-content {
        flex-direction: column;
    }
    .about-image-container {
        margin-top: 30px;
    }
    .contact-content {
        flex-direction: column;
    }
    .contact-info #map {
        height: 250px;
    }
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-logo-section,
    .footer-links,
    .footer-contact,
    .footer-socials {
        margin-bottom: 25px;
    }
    .footer-links ul {
        padding-left: 0;
    }
    .custom-shape-divider-bottom-1718624970 svg {
        height: 50px;
    }
    .client-slide {
        min-width: 33.33%;
    }
    .slider-btn {
        padding: 8px 10px;
        font-size: 1.2rem;
    }
    .floating-action-bar {
        bottom: 15px;
        right: 15px;
        gap: 10px;
    }
    .fab-icon {
        width: 50px;
        height: 50px;
    }
    .fab-icon img {
        width: 24px;
        height: 24px;
    }
    .careers-intro-grid {
        grid-template-columns: 1fr;
    }
    .careers-intro-image-container {
        margin-bottom: 20px;
    }
    .project-gallery-modal-content {
        max-width: 95%;
        padding: 15px;
    }
    .project-gallery-modal-main-image {
        max-height: 60vh;
    }
    .project-gallery-modal-thumbnails {
        padding: 5px 0;
    }
    .project-gallery-modal-thumbnails img-replace {
        width: 60px;
        height: 45px;
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 1.8rem;
    }
    .hero-content p {
        font-size: 1rem;
    }
    .section-title {
        font-size: 1.8rem;
    }
    .section-subtitle {
        font-size: 0.95rem;
    }
    .client-slide {
        min-width: 50%;
    }
    .form-grid {
        grid-template-columns: 1fr;
    }
    .form-group.full-width {
        grid-column: auto;
    }
    .openings-grid {
        grid-template-columns: 1fr;
    }
    .project-gallery-modal-main-image {
        max-height: 50vh;
    }
    .project-gallery-modal-thumbnails img-replace {
        width: 50px;
        height: 37px;
    }
    .project-gallery-nav {
        padding: 8px 10px;
        font-size: 18px;
    }
}