@media (max-width: 767px) {

    /* Prevent horizontal overflow */
    body, .hero, .services, .work-section, .clients-section, .journery-section {
        overflow-x: hidden !important;
    }
}

/* Tight fixes for the Join cards referenced around index.blade.php line ~204 */
@media (max-width: 767px) {

    /* Force join cards to size to their content instead of fixed 40vh */
    .join-card[style], .join-card {
        height: auto !important;
        min-height: auto !important;
        padding-bottom: 2.5rem !important;
        box-sizing: border-box !important;
    }

    /* Reduce title size so it doesn't push layout */
    .join-card .title h4 {
        font-size: 18px !important;
        line-height: 1.1 !important;
    }

    .join-card .small-text p {
        font-size: 13px !important;
    }

    .join-card .content h6 {
        font-size: 14px !important;
    }

    /* Make the absolute-positioned button static and centered to avoid overlap */
    .join-card a.position-absolute, .join-card .position-absolute {
        position: static !important;
        bottom: auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
        display: block !important;
        margin: 0.75rem auto 0 auto !important;
        text-align: center !important;
    }

    /* Add breathing room between columns on mobile */
    .col-lg-4.position-relative {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        margin-bottom: 1rem !important;
    }
}

@media (min-width:0px) and (max-width: 365px) {
    .bottom-nav {
        position: sticky !important;
    }

    .bottom-nav .text-white {
        color: black !important;
    }

    /* CSS styles for extra small screens (e.g., older and smaller smartphones) */

    .cutom-margin-crousel {
        margin-left: 0px;
    }

    .top-nav {
        height: 155px !important;
    }

    #map-details-box {
        padding: 20px 10px;
    }

    .top-nav .container {
        height: 100%;
    }

    .top-nav .items {
        height: 80px;
        display: block !important;
        background-color: white;
    }

    .top-nav .contact {
        justify-content: center !important;
        margin: 10px 0px;
    }

    .top-nav .logo {
        justify-content: center;
        display: flex;
        margin: 15px 0px;
    }

    .hero {
        height: auto;
    }

    .responsive-video {
        width: 100%;
        object-fit: cover;
        height: auto;
    }

    .overlay {
        height: 99%;
    }

    .crousel {
        position: absolute;
        top: 2rem;
        left: 1rem;
        transform: none;
        width: 79%;
        color: white;
    }

    .crousel {
        position: absolute;
        top: 0.8rem;
        left: 1rem;
        transform: none;
        width: 79%;
        color: white;
    }

    .crousel .company {
        font-weight: 200;
        font-size: 9px;
    }

    .crousel .content h2 {
        font-size: 15px;
    }

    /* services */
    .service-card img {
        width: 20%;
    }

    .jobs .work-opportunity .accordion {
        width: 100% !important;
    }

    .works .abstract {
        display: none;
    }

    #service-hero-section {
        height: auto;
    }

    .avatar-medium {
        height: 35px;
        width: 35px;
        border-radius: 50%;
    }

    .event-title {
        font-size: 18px;
    }

    .service-rounded-image {
        display: none !important;
    }

    .responsive-video {
        height: auto;
    }

    .work-small-width .image-one {
        height: 125px;
    }

    .work-small-width .image-two {
        height: 125px;
    }

    .work-long-width .image-one {
        height: 125px;
    }

    .work-long-width .image-two {
        height: 125px;
    }

    .work-card {
        height: 97vh;
    }

    .work-three {
        display: none;
    }
}


@media (min-width:366px) and (max-width: 374px) {
    .bottom-nav {
        position: sticky !important;
    }

    .bottom-nav .text-white {
        color: black !important;
    }

    /* CSS styles for extra small screens (e.g., older and smaller smartphones) */

    .cutom-margin-crousel {
        margin-left: 0px;
    }

    .top-nav {
        height: 155px !important;
    }

    #map-details-box {
        padding: 20px 10px;
    }

    .top-nav .container {
        height: 100%;
    }

    .top-nav .items {
        height: 80px;
        display: block !important;
        background-color: white;
    }

    .top-nav .contact {
        justify-content: center !important;
        margin: 10px 0px;
    }

    .top-nav .logo {
        justify-content: center;
        display: flex;
        margin: 15px 0px;
    }


    .hero {
        height: auto;
    }

    .responsive-video {
        width: 100%;
        object-fit: cover;
        height: auto;
    }

    .overlay {
        height: 99%;
    }

    .crousel {
        position: absolute;
        top: 2rem;
        left: 1rem;
        transform: none;
        width: 79%;
        color: white;
    }

    .crousel .company {
        font-weight: 200;
        font-size: 10px;
    }

    .crousel .content h2 {
        font-size: 15px;
    }

    /* services */
    .service-card img {
        width: 20%;
    }

    .jobs .work-opportunity .accordion {
        width: 100% !important;
    }

    .works .abstract {
        display: none;
    }

    #service-hero-section {
        height: auto;
    }

    .avatar-medium {
        height: 35px;
        width: 35px;
        border-radius: 50%;
    }

    .event-title {
        font-size: 18px;
    }

    .service-rounded-image {
        display: none !important;
    }

    .responsive-video {
        height: auto;
    }

    .work-small-width .image-one {
        height: 125px;
    }

    .work-small-width .image-two {
        height: 125px;
    }

    .work-long-width .image-one {
        height: 125px;
    }

    .work-long-width .image-two {
        height: 125px;
    }

    .work-card {
        height: 97vh;
    }

    .work-three {
        display: none;
    }
}

/* Extra Small (XS) - Phones (portrait) */
@media (min-width: 375px) and (max-width: 479px) {
    .bottom-nav {
        position: sticky !important;
    }

    .bottom-nav .text-white {
        color: black !important;
    }

    /* CSS styles for extra small screens (e.g., older and smaller smartphones) */

    .cutom-margin-crousel {
        margin-left: 0px;
    }

    .top-nav {
        height: 155px !important;
    }

    #map-details-box {
        padding: 20px 10px;
    }

    .top-nav .container {
        height: 100%;
    }

    .top-nav .items {
        height: 80px;
        display: block !important;
        background-color: white;
    }

    .top-nav .contact {
        justify-content: center !important;
        margin: 10px 0px;
    }

    .top-nav .logo {
        justify-content: center;
        display: flex;
        margin: 15px 0px;
    }

    .hero {
        height: auto;
    }

    .responsive-video {
        width: 100%;
        object-fit: cover;
        height: auto;
    }

    .overlay {
        height: 99%;
    }

    .crousel {
        position: absolute;
        top: 2rem;
        left: 1rem;
        transform: none;
        width: 79%;
        color: white;
    }

    .crousel .company {
        font-weight: 200;
        font-size: 12px;
    }

    .crousel .content h2 {
        font-size: 17px;
    }

    /* services */
    .service-card img {
        width: 20%;
    }

    .jobs .work-opportunity .accordion {
        width: 100% !important;
    }

    .works .abstract {
        display: none;
    }

    #service-hero-section {
        height: auto;
    }

    .avatar-medium {
        height: 35px;
        width: 35px;
        border-radius: 50%;
    }

    .event-title {
        font-size: 18px;
    }

    .service-rounded-image {
        display: none !important;
    }

    .responsive-video {
        height: auto;
    }

    .work-small-width .image-one {
        height: 125px;
    }

    .work-small-width .image-two {
        height: 125px;
    }

    .work-long-width .image-one {
        height: 125px;
    }

    .work-long-width .image-two {
        height: 125px;
    }

    .work-card {
        height: 500px;
    }

    .work-three {
        display: none;
    }


}

/* Small (SM) - Phones (landscape) and Small Tablets */
@media (min-width: 480px) and (max-width: 767px) {
    .bottom-nav {
        position: sticky !important;
    }

    .bottom-nav .text-white {
        color: black !important;
    }


    /* CSS styles for small screens (e.g., smartphones in landscape mode and small tablets) */

    .cutom-margin-crousel {
        margin-left: 0px;
    }

    .top-nav {
        height: 168px !important;
    }


    .top-nav .container {
        height: 100%;
    }

    .top-nav .items {
        height: 80px;
        display: block !important;
        background-color: white;
    }

    .top-nav .contact {
        justify-content: center !important;
        margin: 10px 0px;
    }

    .top-nav .logo {
        justify-content: center;
        display: flex;
        margin: 15px 0px;
    }

    .crousel {
        position: absolute;
        top: 55%;
        left: 35%;
        width: 65%;
        color: white;
    }

    .crousel .company {
        font-weight: 200;
        font-size: 12px;
    }

    .crousel .content h2 {
        font-size: 20px;
    }

    .jobs .work-opportunity .accordion {
        width: 100% !important;
    }

    .works .abstract {
        display: none;
    }

    .service-card img {
        width: 20%;
    }

    #service-hero-section {
        height: auto;
    }

    .avatar-medium {
        height: 35px;
        width: 35px;
        border-radius: 50%;
    }

    .event-title {
        font-size: 18px;
    }

    .service-rounded-image {
        display: none !important;
    }


}

/* Medium (MD) - Tablets */
@media (min-width: 768px) and (max-width: 991px) {

    .crousel {
        position: absolute;
        top: 60%;
        left: 38%;
        width: 65%;
        color: white;
    }

    /* services */
    .service-card img {
        width: 20%;
    }

}

/* Large (LG) - Desktops and Some Laptops */
@media (min-width: 992px) and (max-width: 1199px) {
    .crousel {
        position: absolute;
        top: 55%;
        left: 38%;
        width: 65%;
        color: white;
    }

}

/* Extra Large (XL) - Large Desktops and Widescreen Monitors */
@media (min-width: 1200px) {
    .crousel {
        position: absolute;
        top: 55%;
        left: 45%;
        width: 65%;
        color: white;
    }

}