
.services_carousel .services_item{
    background-position: center;
    background-size: cover;
}
.row.row-h > * {
    padding-bottom: calc(var(--bs-gutter-x)/ 2);
    padding-top: calc(var(--bs-gutter-x)/ 2);
}

/* Default: Hide mobile elements, show laptop elements */
.d-block-mobile {
    display: none;
}

.d-hide-mobile {
    display: block;
}

.d-block-laptop {
    display: block;
}

.d-hide-laptop {
    display: none;
}

/* Mobile: Show mobile elements, hide laptop elements */
@media (max-width: 766.99px) {
    .d-block-mobile {
        display: block !important;
    }

    .d-hide-mobile {
        display: none !important;
    }

    .d-block-laptop {
        display: none !important;
    }

    .d-hide-laptop {
        display: block !important;
    }
}

/* Laptop/Desktop: Show laptop elements, hide mobile elements */
@media (min-width: 767px) {
    .d-block-laptop {
        display: block !important;
    }

    .d-hide-laptop {
        display: none !important;
    }

    .d-block-mobile {
        display: none !important;
    }

    .d-hide-mobile {
        display: block !important;
    }
}
#menu_contact .custom p {
    margin-top: 0;
    margin-bottom: 3px;
}
#menu_contact .custom p.address {
    font-size: 17px;
}
.btn.btn-primary.btn-my {
    color: #666;
    background-color: #ffc107;
    border-color: #ffc107;
}
    .btn.btn-primary.btn-my:hover {
        background-color: #ffd24d;
        border-color: #ffd24d;
        font-weight: 500;
    }
@media (min-width: 320px) and (max-width: 374.99px) 
{
    body {
        font-size: 14px;
        line-height: 28px;
    }

    .covid-content p,
    .covid-content li {
        font-size: 14px !important;
        line-height: 28px !important;
    }

    #intro .custom p {
        margin-top: 30px;
    }

    .home-p {
        padding-left: 60px;
        padding-right: 40px;
    }

    .company-offset {
        margin-left: 0 !important;
    }

    #left_bar {
        max-width: 50px;
    }
    .itemid-129 #logo img, .itemid-130 #logo img {
        height: 70px;
    }
    #slideshow.home .title {
        font-size: 20px !important;
    }
    #slideshow.home .main_header_subtitle {
        width: 14rem;
        padding-left: 0;
        padding-right: 7px;
        font-size: 12px;
    }
    #slideshow_img {
        width: calc(100vw - 110px) !important;
        aspect-ratio: 1.2;
        height: auto !important;
        margin-right: auto !important;
        left: calc(50% + 25px) !important;
        transform: translate(-50%, 0) !important;
    }
    #who-we-are, #approach, #blog, .our_philosphy-green, #intro .md-title, #intro .custom, #main-content {
        padding-left: 60px;
        padding-right: 40px;
    }

    .other-p,
    .edge-padding {
        padding-left: 40px;
        padding-right: 40px;
    }

    .home-p {
        padding-left: 60px;
        padding-right: 40px;
    }

        #who-nav, #who-we-are .title, #services .title, #blog .title, #projects .title {
            margin-bottom: 1rem;
            font-size: 1.2rem;
        }
        #services .owl-nav {
            zoom: 60%;
        }
        /*.services_carousel, #services .owl-item {
            height: 15rem;
        }*/
            .services_carousel .services_item .services_content .md-title {
                margin: 0;
                font-size: 18px;            
            }
            /*.services_carousel .services_item .services_content .md-title{
                margin-bottom: 4rem;
            }*/

    .xl-padding {
        padding: 20px 0;
    }
    #concept {
        padding: 50px 0;
        margin-left: 50px;
        font-size: 20px;
    }
        #concept .title {
            font-size: 17px;
            line-height: 28px;
        }
    .categories-filter .projects_btn {
        padding: 10px 3px;
        font-size: 11px;
        border: 0.5px solid #ccc;
    }
    #projects .grid-item .project_details {
        padding-top: 10px;
        padding-top: 20px;
    }
}

@media (min-width: 375px) and (max-width: 424.99px) 
{
    body {
        font-size: 14px;
        line-height: 28px;
    }

    .covid-content p,
    .covid-content li {
        font-size: 14px !important;
        line-height: 28px !important;
    }

    #intro .custom p {
        margin-top: 30px;
    }
    

    .home-p {
        padding-left: 60px;
        padding-right: 40px;
    }

    .company-offset {
        margin-left: 0 !important;
    }

    #left_bar {
        max-width: 50px;
    }
    .itemid-129 #logo img, .itemid-130 #logo img {
        height: 90px;
    }

    #slideshow.home .title {
        font-size: 23px !important;
    }

    #slideshow.home .main_header_subtitle {
        width: 16rem;
        padding-left: 0;
        padding-right: 7px;
        font-size: 15px;
    }

    #who-we-are, #approach, #blog, .our_philosphy-green, #intro .md-title, #intro .custom, #main-content {
        padding-left: 60px;
        padding-right: 40px;
    }

    .other-p,
    .edge-padding {
        padding-left: 40px;
        padding-right: 40px;
    }

    .home-p {
        padding-left: 60px;
        padding-right: 40px;
    }

        #who-nav, #who-we-are .title, #services .title, #blog .title, #projects .title {
            margin-bottom: 1rem;
            font-size: 1.5rem;
        }
        #services .owl-nav {
            zoom: 70%;
        }

    .xl-padding {
        padding: 20px 0;
    }

   /* .services_carousel, #services .owl-item {
        height: 18rem;
    }*/
        .services_carousel .services_item .services_content .md-title {
            margin: 0;
            text-shadow: 1px 1px 1px #444;
            font-size: 20px;
        }

    #concept {
        padding: 50px 0;
        margin-left: 50px;
        font-size: 20px;
    }
        #concept .title {
            font-size: 22px;
            line-height: 34px;
        }

    .categories-filter .projects_btn {
        padding: 15px 5px;
        font-size: 14px;
        border: 0.5px solid #ccc;
    }
    #projects .grid-item .project_details {
        padding-top: 10px;
        padding-top: 20px;
    }
}

@media (min-width: 425px) and (max-width: 767px) 
{
    body {
        font-size: 14px;
        line-height: 28px;
    }

    .covid-content p,
    .covid-content li {
        font-size: 14px !important;
        line-height: 28px !important;
    }

    #intro .custom p {
        margin-top: 30px;
    }

    .home-p {
        padding-left: 60px;
        padding-right: 40px;
    }

    .company-offset {
        margin-left: 0 !important;
    }

    #left_bar {
        max-width: 50px;
    }

    #services,
    #projects,
    #project_bottom,
    .footer-home {
        width: calc(100% - 50px);
        margin-left: 50px;
    }

        #left_bar .contact_text {
            margin-left: 15px;
        }
    .itemid-129 #logo img, .itemid-130 #logo img {
        height: 105px;
    }

    #slideshow.home .title {
        font-size: 26px !important;
    }

    #slideshow.home .main_header_subtitle {
        width: 18rem;
        padding-left: 0;
        padding-right: 7px;
        font-size: 16px;
    }

    #who-we-are, #approach, #blog, .our_philosphy-green, #intro .md-title, #intro .custom, #main-content {
        padding-left: 60px;
        padding-right: 40px;
    }

    .other-p,
    .edge-padding {
        padding-left: 40px;
        padding-right: 40px;
    }

    .home-p {
        padding-left: 60px;
        padding-right: 40px;
    }

        #who-nav, #who-we-are .title, #services .title, #blog .title, #projects .title {
            margin-bottom: 1rem;
            font-size: 1.8rem;
        }
    #services .owl-nav {
        zoom: 70%;
    }
    .xl-padding {
        padding: 20px 0;
    }

    /*.services_carousel, #services .owl-item {
        height: 18rem;
    }*/
        /*.services_carousel .services_item .services_content .md-title {
            margin: 0;
            text-shadow: 1px 1px 1px #444;
            font-size: 24px;
        }*/

    #concept {
        padding: 50px 0;
        margin-left: 50px;
        font-size: 20px;
    }
        #concept .title {
            font-size: 24px;
            line-height: 50px;
        }
    #certifications img {
        max-width: 100%;
        height: 60px;
    }

    #projects .grid-item .project_details {
        padding-top: 10px !important;
        padding-top: 20px !important;
    }

}

@media (min-width: 768px) and (max-width: 1023.99px) 
{
    .itemid-129 #logo img, .itemid-130 #logo img {
        height: 120px;
    }

    #slideshow.home .title {
        font-size: 40px !important;
    }

    #slideshow.home .main_header_subtitle {
        width: 27.5rem;
        padding-left: 0;
        padding-right: 7px;
        font-size: 24px;
    }
    
    #slideshow_img {
        bottom: -10%;
    }

    .company-offset {
        margin-left: 0 !important;
    }

}


@media (min-width: 1024px) and (max-width: 1439.99px) {
    .itemid-129 #logo img, .itemid-130 #logo img {
        height: 120px;
    }

    .company-offset {
        margin-left: 8.333333% !important;
    }

}


@media (min-width: 1440px) and (max-width: 2559.99px) {
    .itemid-129 #logo img, .itemid-130 #logo img {
        height: 120px;
    }

}


/* Adjust concept title for screens 1920px to 2559px */
@media (min-width: 1920px) and (max-width: 2559px) {
    #concept .title {
        font-size: 55px;
        line-height: 65px;
        padding-left: 6rem;
        padding-right: 6rem;
    }

    #concept {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

@media (min-width: 2560px) {
    .itemid-129 #logo img, .itemid-130 #logo img {
        height: 120px;
    }

    /* Adjust concept title for large screens */
    #concept .title {
        font-size: 63px;
        line-height: 75px;
        padding-left: 8rem;
        padding-right: 8rem;
    }

    /* Also adjust concept section */
    #concept {
        padding-left: 8rem;
        padding-right: 8rem;
    }

    /* Make intro paragraph text bigger for large screens */
    #intro .custom p {
        font-size: 24px;
        line-height: 40px;
    }

    body {
        font-size: 24px;
        line-height: 40px;
    }
}
