/* Big Monitor (1920px and below) */
@media (max-width: 1920px) {
    .hero-small-title {
        font-size: 1.75rem;
    }
}

/* Medium Monitor (1440px and below) */
@media (max-width: 1440px) {
    .hero-small-title {
        font-size: 1.5rem !important;
    }

    .custom-icon-frame img {
        width: 60px !important;
        height: 60px !important;
    }
}

/* Normal Laptop (1280px and below) */
@media (max-width: 1280px) {
    .container {
        max-width: 1250px;
    }

    .backdrop {
        top: 20% !important;
        left: 30% !important;
        height: auto !important;
    }

    .modal-title-cust {
        font-size: 18px;
    }

    .hero-content {
        top: 10%;
    }

    .service1-area {
        padding: 60px 0 !important;
    }

    .service-title h3 {
        font-size: clamp(1.125rem, 0.9464rem + 0.8929vw, 1.75rem) !important;
    }

    .custom-icon-frame img {
        width: 55px !important;
        height: 55px !important;
    }
}

/* Small Laptop (1024px and below) */
@media (max-width: 1024px) {
    .container {
        max-width: 960px;
    }

    .logo-area .main-logo {
        height: 45px;
    }

    .hero-small-title {
        font-size: 1.3rem;
    }

    .hero-section {
        min-height: 50vh;
    }

    .hero-search-form-select,
    .hero-search-btn {
        padding: 0.5rem 1rem;
    }

    .service1-area {
        padding: 45px 0 !important;
    }

    .service-title h3 span {
        font-size: 20px !important;
    }

    .custom-icon-frame img {
        width: 50px !important;
        height: 50px !important;
    }

    .custom-option-card {
        padding: 15px !important;
    }

    .custom-option-label {
        font-size: 16px !important;
    }

}

/* Big Tablet (768px and below) */
@media (max-width: 768px) {
    .container {
        max-width: 720px;
    }
}

/* Small Tablet (600px and below) */
@media (max-width: 600px) {
    .container {
        max-width: 540px;
    }

    .text-content ul li,
    #section2 ul li,
    #section3 ul li,
    #section4 ul li,
    #section5 ul li,
    #section6 ul li,
    #section7 ul li,
    #section8 ul li {
        flex: 0 0 calc(100% - 10px) !important;
        padding-left: 20px !important;

    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    .container {
        max-width: 100%;
        padding: 0 15px;
    }
}

/* Small Mobile (320px and below) */
@media (max-width: 320px) {
    .container {
        padding: 0 8px;
        max-width: 100%;
    }
}