@media(max-width:575.98px) {


    #service .service_card .serv_img img {
        margin-bottom: 20px !important;
    }

    #bs .banner_slider {
        display: block;
    }

    #bs .bs_content .bs_items .banner_slider .slick-dots {
        bottom: -20px;
    }

    #portfolio .ovrly_shape {
        display: none;
    }

    #portfolio .portfolio_lists .port_cate ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    #portfolio .portfolio_lists .port_cate ul li button {
        padding: 4px 10px;
        font-size: 12px;
        margin: 5px;
    }

    .common_head h1,
    .common_head h4 {
        font-size: 24px;
        padding-right: 35px;
        margin-bottom: 14px;
    }

    .common_head .line {
        right: 0px;
        bottom: -30%;
        transform: translateY(-50%);
    }

    /* =========================
            Navigation
    ========================= */

    .navbar-toggler:focus {
        box-shadow: none;
    }

    .navbar-toggler:hover {
        color: var(--secondary-color);
        border-color: var(--secondary-color);
    }

    .navbar .nav-right ul {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 0;
        margin-top: 1rem;
    }

    .navbar .nav-right ul li {
        margin-bottom: 0.5rem;
    }

    .navbar .trial_btn {
        width: 100%;
        text-align: left;
    }

    .navbar .signin_btn {
        display: inline-block;
        width: 100%;
        text-align: left;
    }

    /* Optional: style collapsed menu items */
    .navbar-collapse {
        background-color: #fff;
        /* Or your preferred color */
        padding: 1rem;
    }

    .navbar-nav .nav-link {
        padding: 0.5rem 0;
    }

    /* =========================
            Navigation
    ========================= */


    /* =========================
            Banner
    ========================= */

    #bs .bs_content .bs_items img {
        height: 450px;
        object-fit: cover;
        object-position: center top;
    }

    #bs .bs_content .bs_items .ovrly {
        width: 300px;
    }

    #bs .bs_content .bs_items .ovrly p {
        font-size: 12px;
        line-height: inherit;
        padding: 10px 0 10px 0;
    }

    #bs .bs_content .bs_items .ovrly h2 {
        font-size: 18px;
    }

    .trial_btn {
        padding: 4px 10px;
        font-size: 12px;
    }

    /* ========================= */
    /* Banner */
    /* ========================= */

    /* =========================
            Experience
    ========================= */

    #experience {
        padding: 40px 0 20px 0;
    }

    #experience .mobile_exp_col {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        /* space between cards */
        padding: 10px;
    }

    #experience .mobile_exp_col .experience_card {
        width: 140px;
        padding: 10px;
        height: 125px;
        margin: 12px 0;
    }

    #experience .experience_right .experience_card h6 {
        font-size: 38px;
    }

    #experience .experience_right .experience_card h6 {
        font-size: 38px;
    }

    #experience .experience_right .experience_card p {
        font-size: 14px;
        padding-right: 0;
    }

    /* ========================= */
    /* Experience */
    /* ========================= */

    /* =========================
            About
    ========================= */

    #about {
        padding: 40px 0;
    }

    #about .about_img {
        margin-top: 20px;
    }

    /* ========================= */
    /* About */
    /* ========================= */

    /* =========================
            Service
    ========================= */

    #service {
        padding: 20px 0 !important;
    }

    /* ========================= */
    /* Service */
    /* ========================= */

    /* =========================
            Work
    ========================= */

    #how_we_work {
        padding: 20px 0;
    }

    #how_we_work .work-steps .work_card .icon img {
        width: 25px;
        transition: filter 0.3s ease;
    }

    #how_we_work .work-steps .work_card .icon {
        position: relative;
        z-index: 2;
    }

    #how_we_work .work-steps .work_card h5 {
        font-size: 13px;
    }

    #how_we_work .work-steps .work_card p {
        font-size: 12px;
        padding: 5px 0;
    }

    /* ========================= */
    /* Work */
    /* ========================= */

    /* =========================
            Banner
    ========================= */

    #banner .b_img img {
        height: 200px;
    }

    /* ========================= */
    /* Banner */
    /* ========================= */


    /* =========================
            Review
    ========================= */

    #review {
        padding: 20px 0 70px 0;
    }

    #review .review_card {
        padding: 15px;
    }

    #review .review_card p {
        font-size: 14px;
    }

    /* ========================= */
    /* Review */
    /* ========================= */

    /* =========================
            Blog
    ========================= */

    #blog {
        padding: 40px 0 20px 0;
    }

    #blog .blog_slider .blog_items.slick-slide {
        margin: 0 5px;
    }

    #blog .arrows {
        margin: 20px 0;
    }

    /* =======================
            Blog
    ======================= */

    /* =========================
            Trial
    ========================= */

    #trial {
        padding: 20px 0;
    }

    #trial .trail_image {
        display: none;

    }

    .trial_form .row>div {
        flex: unset;
        width: 100%;
    }

    /* ========================= */
    /* Trial */
    /* ========================= */

    #footer .footer_quick_menu,
    #footer .footer_social,
    #footer .footer_desp {
        text-align: center;
    }

    #footer .footer_quick_menu .footer_menu {
        columns: 1;
    }

    /* ========================= */
    /* Footer */
    /* ========================= */

    #pageTitle .page_img {
        height: 180px;
        object-fit: cover;
    }

    #pageTitle .ovrly {
        bottom: 50%;
        transform: translateY(50%);
    }

    #pageTitle .ovrly h2,
    #pageTitle .ovrly h1 {
        font-size: 40px;
    }

    #serviceDetails {
        padding: 30px 0;
    }

    #serviceDetails .service_img {
        height: auto !important;
        width: 100%;
        max-height: none !important;
    }

    #forYou {
        padding: 0 0 20px 0;
    }

    #forYou .heading h4,
    #projects_image .projects_image_title h4 {
        font-size: 18px;
        padding: 0 0;
    }

    #forYou .whyChooseThisService .foryou_card {
        margin-bottom: 20px;
    }

    #projects_image .projects_image_main img {
        height: 250px;
    }

}

@media(min-width:576px) and (max-width:767.98px) {

    .common_head h1,
    .common_head h4 {
        font-size: 24px;
        padding-right: 35px;
        margin-bottom: 14px;
    }

    .common_head .line {
        right: 0px;
        bottom: -30%;
        transform: translateY(-50%);
    }

    /* =========================
            Navigation
    ========================= */

    .navbar-toggler:focus {
        box-shadow: none;
    }

    .navbar-toggler:hover {
        color: var(--secondary-color);
        border-color: var(--secondary-color);
    }

    .navbar .nav-right ul {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 0;
        margin-top: 1rem;
    }

    .navbar .nav-right ul li {
        margin-bottom: 0.5rem;
    }

    .navbar .trial_btn {
        width: 100%;
        text-align: left;
    }

    .navbar .signin_btn {
        display: inline-block;
        width: 100%;
        text-align: left;
    }

    /* Optional: style collapsed menu items */
    .navbar-collapse {
        background-color: #fff;
        /* Or your preferred color */
        padding: 1rem;
    }

    .navbar-nav .nav-link {
        padding: 0.5rem 0;
    }

    /* =========================
            Navigation
    ========================= */


    /* =========================
            Banner
    ========================= */

    #bs .bs_content .bs_items img {
        height: 300px;
        object-fit: cover;
        object-position: center top;
    }

    #bs .bs_content .bs_items .ovrly {
        width: inherit;
    }

    #bs .bs_content .bs_items .ovrly p {
        font-size: 12px;
        line-height: inherit;
        padding: 10px 0 10px 0;
    }

    #bs .bs_content .bs_items .ovrly h2 {
        font-size: 18px;
    }

    .trial_btn {
        padding: 4px 10px;
        font-size: 12px;
    }

    /* ========================= */
    /* Banner */
    /* ========================= */

    /* =========================
            Experience
    ========================= */

    #experience {
        padding: 40px 0 20px 0;
    }

    #experience .mobile_exp_col {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        /* space between cards */
        padding: 10px;
    }

    #experience .mobile_exp_col .experience_card {
        width: 140px;
        padding: 10px;
        height: 125px;
        margin: 12px 0;
    }

    #experience .experience_right .experience_card h6 {
        font-size: 38px;
    }

    #experience .experience_right .experience_card h6 {
        font-size: 38px;
    }

    #experience .experience_right .experience_card p {
        font-size: 14px;
        padding-right: 0;
    }

    /* ========================= */
    /* Experience */
    /* ========================= */

    /* =========================
            About
    ========================= */

    #about {
        padding: 40px 0;
    }

    #about .about_img {
        margin-top: 20px;
    }

    /* ========================= */
    /* About */
    /* ========================= */

    /* =========================
            Service
    ========================= */

    #service {
        padding: 20px 0 !important;
    }

    /* ========================= */
    /* Service */
    /* ========================= */

    /* =========================
            Work
    ========================= */

    #how_we_work {
        padding: 20px 0;
    }

    #how_we_work .work-steps .work_card .icon img {
        width: 25px;
        transition: filter 0.3s ease;
    }

    #how_we_work .work-steps .work_card .icon {
        position: relative;
        z-index: 2;
    }

    #how_we_work .work-steps .work_card h5 {
        font-size: 13px;
    }

    #how_we_work .work-steps .work_card p {
        font-size: 12px;
        padding: 5px 0;
    }

    /* ========================= */
    /* Work */
    /* ========================= */

    /* =========================
            Banner
    ========================= */

    #banner .b_img img {
        height: 300px;
    }

    /* ========================= */
    /* Banner */
    /* ========================= */


    /* =========================
            Review
    ========================= */

    #review {
        padding: 20px 0 70px 0;
    }

    #review .review_card {
        padding: 15px;
    }

    #review .review_card p {
        font-size: 14px;
    }

    /* ========================= */
    /* Review */
    /* ========================= */

    /* =========================
            Blog
    ========================= */

    #blog {
        padding: 40px 0 20px 0;
    }

    #blog .blog_slider .blog_items.slick-slide {
        margin: 0 5px;
    }

    #blog .arrows {
        margin: 20px 0;
    }

    /* =======================
            Blog
    ======================= */

    /* =========================
            Trial
    ========================= */

    #trial {
        padding: 20px 0;
    }

    #trial .trail_image {
        display: none;

    }

    .trial_form .row>div {
        flex: unset;
        width: 100%;
    }

    /* ========================= */
    /* Trial */
    /* ========================= */

    #footer .footer_quick_menu,
    #footer .footer_social,
    #footer .footer_desp {
        text-align: center;
    }

    #footer .footer_quick_menu .footer_menu {
        columns: 2;
    }

    #review .review_contents .review_items.slick-slide:not(.slick-active) {
        opacity: 100%;
    }

    #how_we_work .work-steps .work-items.slick-slide:not(.slick-active) {
        opacity: 100%;
    }

    #service .service_items .serv_content .buttons .detailsBtn {
        padding: 4px 10px;
        font-size: 14px;
    }

    .ordernowBtn {
        padding: 4px 13px;
        font-size: 14px;
    }

}

/* Service card images must always show at full height on tablet/mobile */
@media (max-width: 991.98px) {
    /* Prevent outer Bootstrap flex row from stretching card columns unevenly */
    #service .row.match-height {
        align-items: flex-start;
    }

    /* Image column must not be constrained to the equalized card height */
    #service .service_card .col-lg-7 {
        align-self: flex-start;
    }

    #service .service_card .serv_img,
    #service .service_card .serv_img .before-img {
        height: auto !important;
        max-height: none !important;
    }
}

@media(min-width:768px) and (max-width:991.98px) {
    #about .about_head {
        padding: 5px 0 0;
        margin-bottom: 16px !important;
    }

    #about .about_head h2 {
        font-size: 32px;
        margin-bottom: 0;
    }

    #about .about_head h2 span {
        font-size: 28px;
    }

    #service .service_items .serv_content .buttons .detailsBtn {
        padding: 4px 10px;
        font-size: 14px;
    }

    .ordernowBtn {
        padding: 4px 13px;
        font-size: 14px;
    }

    #experience .mobile_exp_col .experience_card {
        width: 240px;
        padding: 10px;
        height: 185px;
        margin: 24px 0;
    }

    #experience .experience_right .experience_card h6 {
        font-size: 42px;
    }

    #experience .experience_right .experience_card p {
        font-size: 16px;
        padding-right: 0;
    }

    #trial .trail_image {
        display: none;

    }

    #review .review_contents .review_items.slick-slide:not(.slick-active) {
        opacity: 100%;
    }

    #how_we_work .work-steps .work-items.slick-slide:not(.slick-active) {
        opacity: 100%;
    }
}

@media(min-width:992px) and (max-width:1100.98px) {}

@media(min-width:1200px) and (max-width:1399.98px) {}

@media(min-width:1400px) {}

@media (max-width: 575.98px) {
    /* #blog_details .container {
        padding: 0 15px;
    } */

    #blog_details .row {
        flex-direction: column;
    }

    #blog_details .col-lg-8,
    #blog_details .col-lg-4 {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    #blog_details .blog_details_content img {
        height: auto;
        border-radius: 8px;
    }

    #blog_details .blog_details_content {
        padding: 15px 0;
    }

    #blog_details .blog_details_content h2 {
        font-size: 24px;
        line-height: 1.4;
    }

    #blog_details .blog_details_content h4,
    #blog_details .blog_details_content h5,
    #blog_details .blog_details_content h6 {
        font-size: 18px;
        line-height: 1.4;
    }

    #blog_details .blog_details_content p,
    #blog_details .blog_details_content ul,
    #blog_details .blog_details_content ol,
    #blog_details .blog_details_content blockquote,
    #blog_details .blog_details_content pre {
        font-size: 15px;
        line-height: 1.6;
    }

    #blog_details .blog_details_sidebar {
        padding-top: 30px;
    }

    #blog_details .blog_details_sidebar .sidebar-title {
        font-size: 20px;
    }

    #blog_details .blog_details_sidebar .blog-item {
        gap: 10px;
        padding-bottom: 10px;
    }

    #blog_details .blog_details_sidebar .blog-item img {
        width: 50px;
        height: 50px;
    }

    #blog_details .blog_details_sidebar .blog-item p {
        font-size: 14px;
    }
}

@media (max-width: 575.98px) {

    /* Contact Address Section */
    #contact_address {
        padding: 50px 15px;
        text-align: center;
    }

    .ca_left h2 {
        font-size: 28px;
    }

    .ca_left h6 {
        font-size: 20px;
    }

    .ca_right {
        margin-top: 30px;
    }

    .address_list li {
        justify-content: center;
        font-size: 14px;
    }

    .social_list {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    /* Contact Form Section */
    #contact_form {
        padding: 50px 15px;
    }

    .common_head h1,
    .common_head h4 {
        font-size: 24px;
    }

    .common_head p {
        font-size: 14px;
    }

    .cf_map iframe {
        min-height: 300px;
    }

    .cf_form {
        padding: 20px 15px;
        margin-top: 30px;
    }

    .cf_form .form-control {
        font-size: 14px;
        padding: 10px 12px;
    }

    .form_submit {
        padding: 10px 0;
        font-size: 14px;
    }
}

@media (max-width: 575.98px) {
    /* #about {
        padding: 40px 20px;
    } */

    #about .about_head h2 {
        font-size: 26px;
        margin-bottom: 20px;
    }

    #about .about_head h2 span {
        font-size: 22px;
    }

    #about .about_content h4 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    #about .about_content p {
        font-size: 14px;
        line-height: 1.6;
    }

    /* .container,
    .row,
    .col-lg-8,
    .col-lg-11 {
        padding-left: 0;
        padding-right: 0;
    } */

    .about_head,
    .about_content {
        text-align: left;
    }
}

@media (max-width: 575.98px) {
    #why_us {
        padding: 40px 15px;
    }

    #why_us .common_head h4 {
        font-size: 24px;
    }

    #why_us .wu_content {
        padding: 20px;
        margin-bottom: 20px;
        text-align: center;
    }

    #why_us .wu_content .wu_title {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
    }

    #why_us .wu_content .wu_title img {
        width: 40px;
        height: 40px;
    }

    #why_us .wu_content .wu_title h6 {
        font-size: 18px;
        margin-bottom: 0;
    }

    #why_us .wu_content p {
        font-size: 14px;
        line-height: 1.6;
    }

    #why_us .ovrly_vector img {
        width: 100%;
        height: auto;
    }

    .ovrly_vector {
        display: none;
        /* optional: hide decorative vector image to reduce clutter */
    }
}

@media (max-width: 575.98px) {
    #gallery {
        padding: 40px 15px;
    }

    #gallery .gal_img img {
        height: auto !important;
        /* removes fixed height */
        width: 100%;
        object-fit: cover;
        margin-bottom: 20px;
    }

    #gallery .gal_img .ovrly a {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    #gallery .common_head h4 {
        font-size: 24px;
    }

    #gallery .common_head span {
        font-size: 14px;
    }

    #gallery .row.match-height {
        flex-direction: column;
    }

    #gallery .col-lg-4,
    #gallery .col-lg-12 {
        padding-left: 0;
        padding-right: 0;
    }

    #gallery .gal_img {
        margin-bottom: 20px;
    }
}

@media (max-width: 575.98px) {
    .client_item {
        padding: 10px;
    }

    .client_item img {
        width: 80%;
        margin: 0 auto;
        display: block;
    }

    #client .common_head h4 {
        font-size: 24px;
    }

    #client .common_head span {
        font-size: 14px;
    }
}

@media (max-width: 575.98px) {
    #trial_banner {
        padding: 40px 0;
    }

    #trial_banner .common_head h4 {
        font-size: 26px;
        line-height: 1.3;
    }

    #trial_banner .common_head span {
        font-size: 14px;
    }

    #trial_banner .common_head p {
        font-size: 14px;
        line-height: 1.6;
        margin-top: 10px;
    }

    #trial_banner .trial_ban_images {
        width: 100%;
        height: auto;
        max-width: 100%;
        position: relative;
    }

    #trial_banner .trial_ban_images .before_img,
    #trial_banner .trial_ban_images .after_img {
        width: 80%;
        height: auto;
        position: static;
        margin-bottom: 15px;
    }

    #trial_banner .trial_ban_images .before_img img,
    #trial_banner .trial_ban_images .after_img img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    #trial_banner .trial_ban_images .ovrly {
        display: none;
        /* Hide overlay arrow on mobile */
    }

    #trial_banner .trial_ban_images {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 575.98px) {
    #pricing .common_head h4 {
        font-size: 20px;
    }

    #pricing .common_head p {
        font-size: 14px;
    }

    #pricing .pricing_image {
        text-align: center;
        margin-bottom: 30px;
    }

    #pricing .pricing_image h4 {
        font-size: 18px;
    }

    #pricing .pricing_image h6 {
        font-size: 16px;
    }

    #pricing .pricing_image p {
        font-size: 14px;
    }

    #pricing .pricing_image img {
        max-height: 200px;
        object-fit: contain;
    }

    #pricing .pricing_form {
        padding: 20px;
    }

    #pricing .pricing_form label {
        font-size: 14px;
    }

    #pricing .pricing_form .hashes {
        flex-wrap: wrap;
        gap: 8px;
    }

    #pricing .pricing_form .hashes p {
        font-size: 14px;
    }

    #pricing .pricing_form .turnaround_time label,
    #pricing .pricing_form .form-check-label {
        font-size: 14px;
    }

    #pricing .pricing_form .quality_control {
        flex-direction: row;
        justify-content: flex-start;
    }

    #pricing .pricing_form .quality_control span {
        font-size: 16px;
    }

    #pricing .pricing_form .total_price {
        font-size: 18px;
        padding: 10px 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    #pricing .pricing_form button[type="submit"] {
        font-size: 14px;
        padding: 10px;
    }
}