/* =============================================
   RESPONSIVE CSS - Kohinoor Theme
   Cleaned and Optimized Version
============================================= */

/* ===== EXTRA LARGE SCREENS (max-width: 1799px) ===== */
@media (max-width: 1799.5px) {
    #web-links {
        right: 15px;
    }
}

/* ===== LARGE SCREENS (max-width: 1400px) ===== */
@media (max-width: 1400px) {
    #web-links {
        right: 15px;
    }
}

/* ===== MEDIUM-LARGE SCREENS (max-width: 1300px) ===== */
@media (max-width: 1300.5px) {
    #web-links {
        right: 15px;
    }
}

/* ===== DESKTOP (max-width: 1199px) ===== */
@media (max-width: 1199.5px) {
    #web-links {
        right: 15px;
    }
}

/* ===== TABLET (max-width: 991px) ===== */
@media (max-width: 991.5px) {
    .service-image {
        padding: 30px;
        height: 300px;
        width: 300px;
        margin: 30px;
    }
    
    .row.background {
        background: #fff;
    }
    
    #web-links {
        right: 15px;
    }
}

/* ===== MOBILE (max-width: 768px) ===== */
@media (max-width: 768px) {
    /* Spacing */
    .pt {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    
    .pb {
        padding-bottom: 30px;
    }
    
    section.blogs {
        padding-top: 30px !important;
    }
    
    /* Header */
    .sn-header.top {
        display: none;
    }
    
    .sn-header .manu {
        width: 20%;
    }
    
    a.logo {
        width: auto;
    }
    
    .menu.mr-4 {
        margin: 0 !important;
    }
    
    .search-bar form {
        width: 200px;
    }
    
    /* Hero / Banner */
    header .item {
        height: 500px !important;
    }
    
    header .item .cover .header-content {
        padding: 30px !important;
    }
    
    header .item .cover .header-content h1 {
        font-size: 31px !important;
    }
    
    header .item .cover .header-content h2 {
        font-size: 24px !important;
    }
    
    header .item .cover .header-content h4 {
        font-size: 18px !important;
        line-height: 26px !important;
    }
    
    /* Phone */
    .sn-header .phone {
        float: right;
        width: 45%;
    }
    
    .sn-header .phone a {
        font-size: 16px;
    }
    
    /* Quotes Section */
    .sn-quotes {
        height: auto !important;
    }
    
    .sn-quotes p label {
        width: calc(100% / 2) !important;
    }
    
    .sn-quotes input[type="submit"] {
        background: #333;
        margin-left: 0;
        width: calc((100% / 1) - 10px);
    }
    
    /* Row Background */
    .row.background .text {
        padding: 15px;
        margin: 0 !important;
        text-align: center !important;
        border: 2px solid #ededed;
        margin-top: 20px !important;
        border-radius: 10px;
    }
    
    /* Service Image */
    .service-image {
        padding: 0;
        height: auto;
        width: auto;
        margin: 0;
    }
    
    /* Info Content */
    .sn-info-content {
        padding: 20px 15px 30px;
    }
    
    /* Profile Card */
    .profile-card {
        margin: 20px auto !important;
    }
    
    /* FAQs */
    section.faqs {
        padding: 60px 0;
    }
    
    /* Blog Details */
    .blog-details-content ul.blog-icons li {
        padding-right: 13px !important;
        font-size: 14px !important;
    }
    
    /* Blog Media Images */
    .blog-media img {
        height: auto !important;
    }
    
    .post-thumbnail-container .post-thumbnail,
    .post-thumbnail-container .post-thumbnail img,
    .post img,
    #blog .blog-box .blog-image img,
    section.blogs .image {
        height: auto !important;
    }
    
    /* Must Read */
    section.blogs .image.must-read {
        height: 248px !important;
    }
    
    /* Web Links */
    #web-links {
        width: 300px;
        right: 15px;
    }
    
    /* Banner Wrap */
    .banner-wrap h1 {
        font-size: 24px !important;
    }
    
    /* Date */
    .date {
        font-size: 12px;
    }
}

/* ===== SMALL MOBILE (max-width: 575px) ===== */
@media (max-width: 575.5px) {
    .sn-header .manu {
        width: 22%;
    }
    
    a.logo {
        width: 100%;
        text-align: center;
        margin-bottom: 3px;
    }
    
    .sn-header .phone {
        float: right;
        width: 34%;
    }
    
    .sn-header .phone a {
        font-size: 14px;
    }
    
    span.wpcf7-form-control-wrap {
        width: calc(100% / 2);
        height: auto;
    }
}