@media only screen and (max-width: 1300px) {
    .container .header_con .header_center {
        width: 100%;
    }

    .container .menu_con .menu_center {
        width: 100%;
    }

    .container .list_waqth_con .list_waqth_center {
         width: 100%;
    }
}

@media all and (max-width : 768px) {

    nav { margin: 0; }

    .toggle + a,
    .menu { display: none; }

    .toggle {
    display: block;
    background-color: #254441;
    padding: 0 20px;
    color: #FFF;
    font-size: 22px;
    font-weight:bold;
    line-height: 60px;
    text-decoration: none;
    border: none;
    }

    .toggle:hover { background-color: #000000; }

    [id^=drop]:checked + ul { display: block; }

    nav ul li {
    display: block;
    width: 100%;
    }

    nav ul ul .toggle,
    nav ul ul a { padding: 0 40px; }

    nav ul ul ul a { padding: 0 80px; }

    nav a:hover,
    nav ul ul ul a { background-color: #000000; }

    nav ul li ul li .toggle,
    nav ul ul a { background-color: #212121; }

    nav ul ul {
    float: none;
    position: static;
    color: #ffffff;
    }

    nav ul ul li:hover > ul,
    nav ul li:hover > ul { display: none; }

    nav ul ul li {
    display: block;
    width: 100%;
    }

    nav ul ul ul li { position: static;

    }
}

@media all and (max-width : 330px) {

nav ul li {
  display: block;
  width: 94%;
}

}



@media (max-width: 900px) {
  .company-info {
    width: 100%;
    margin-right: 0rem;
    margin-left: 1rem;
  }
  .company-info p{
    margin-right: 2rem;
    text-align: center;
  }
  .company-info span {
    font-size: 1.7rem;
    font-weight: bold;
    text-align: center;
  }
  
  .company {
    display: flex;
    flex-direction: column;
  }
  
}




/* Footer mobile starts */
@media only screen and (max-width : 1024px) {    

    .col-3 {
        display: block;
        width: 100%;
        padding-bottom: 1em;
        position: relative;
    }

    .col-3#newsletter {
        width: 100%;
        position: relative;
        padding-bottom: 0;
        padding-top: 1em;
    }    
        
    footer .footer-cat {
        margin-left: 25px;
    }
     
    .footer-toggle,.footer-toggle::after {
        background: #fff;
        height: 2px;
        width: 15px;
        position: absolute;
        display: block;
        -webkit-transition:all .4s ease-in;
        transition:all .4s ease-in;
    }

    .footer-toggle {        
        top: 11px;
        cursor:pointer;
    }

    .footer-toggle::after {
        content: '';
        -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
    }

    .btnActive .footer-toggle::after {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }

    .footer-cat-links {
        margin: 0 0em 0px 1.6em;
    }

        .footer-cat-links a {
            pointer-events: none;
        }
    
    .footer-cat-links li {
        line-height: 0;
        opacity: 0;
    }

    .footer-cat-links.active > li{
        line-height:2;
        opacity:1;
    }

    .social-1 {
        display: none !important;
    }

    .social-2 {
        display: block;
        position: absolute;
        top: 7.5em;
        bottom: 0px;
        height:20px;
        padding-bottom: 1.5em;
        width: 100%;
    }

    #address {
        margin-top: 6em;
    }

    #newsletter #address li i {
        width: auto;
    }

    #newsletter #address li div {
        font-size: 14px;
        width: auto;
        text-align: -webkit-auto;
        float: none;
        line-height: 2;
        display: inline-block;
        padding: 10px 0 15px;
    }

    #newsletter #address li div:last-child {
        padding-bottom: 0;
    }

    #newsletter #address li:not(:first-child) {
        padding: 20px 0 0;
    }
}

/* iPads (portrait)----------- */  
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {
    
    footer {
        padding-right:3em;
        padding-left:3em;
    }

    .col-3 {
        display: block;
        width: 100%;
        padding-bottom: 1em;
    }
}

/* iPads (landscape) ----------- */  
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) {  
    
    section {
        padding-bottom: 3em;
    }

    .sec-heading {
        padding:1em 0;
    }
    
    .col-3 {
        display: block;
        width: 100%;
        padding-bottom: 1em;
    }
}

/* Mini Tablet ----------- */  
@media only screen and (max-width : 600px) {  
    
    .col-3 {
        display: block;
        width: 100%;
        padding-bottom: 1em;
    }

    .col-6 {
        width: 100%;
        display: block;
    }
    
    footer {
        padding: 3em 2em 2em;
    }
}

/* Smartphones (portrait and landscape) ----------- */  
@media only screen and (max-width : 480px) {  

    .col-6 {
        width: 100%;
        display: block;
    }
    
    footer {
        padding-right: 1em;
        padding-left: 1em;
    }
}
/* Footer mobile Ends */


@media(max-width:320px){
  .company-info p{
    margin-right: 0rem;
  }
}



/* ==========================================================================
   1. LAPTOP RESPONSIVE STYLES (Max-width: 1340px)
   ========================================================================== */
@media screen and (max-width: 1340px) {
    /* Reset all rigid 1300px desktop wrappers to fluid percentages */
    .container .header_con .header_center,
    .container .menu_con .menu_center,
    .container .about_con .about_center,
    .container .list_waqth_con .list_waqth_center,
    .container .blog_list_con .blog_list_center,
    .container .cate_head_con .cate_head_center,
    .container .single_det_con .single_det_center,
    .container .footer_con .footer_center {
        width: 100%;
        padding: 0 30px;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   2. TABLET RESPONSIVE STYLES (769px - 1024px)
   ========================================================================== */
@media screen and (max-width: 1024px) {
    /* Fluid Containment Gutter Scaling */
    .container .header_con .header_center,
    .container .menu_con .menu_center,
    .container .about_con .about_center,
    .container .list_waqth_con .list_waqth_center,
    .container .blog_list_con .blog_list_center,
    .container .cate_head_con .cate_head_center,
    .container .single_det_con .single_det_center,
    .container .footer_con .footer_center {
        padding: 0 20px;
    }

    /* Header Optimization */
    .header .logo_search .logo { width: 30%; }
    .header .logo_search .search { width: 45%; }

    /* About Section Fluid Margin Shift */
    .img { margin: 1rem 0 0 1rem; }

    /* Waqth / Prayer Times Tablet Balance */
    .container .list_waqth_con .list_waqth_center .list_waqth .waq_head { padding: 30px; }
    .container .list_waqth_con .list_waqth_center .list_waqth .waqth_time ul { gap: 15px; }
    .list_waqth_center .list_waqth .waqth_time > ul > li .name { font-size: 20px; }

    /* Blog Grid: Drops down from 3 Columns to 2 Columns */
    .blog_list .blog_li_head .list_block > ul > li { width: 50%; }

    /* Category Header Typography Compression */
    .container .cate_head_con .cate_head_center .cate_head .head_title { padding: 60px 0; }
    .container .cate_head_con .cate_head_center .cate_head .head_title .head_one { font-size: 36px; }

    /* Single Post Detail Grid Split Adjustment */
    .container .single_det_con .single_det_center .single_det { margin: 20px 0; }
    .container .single_det_con .single_det_center .single_det .single_content { width: 65%; }
    .container .single_det_con .single_det_center .single_det .recent_block { width: 35%; }
    .container .single_det_con .single_det_center .single_det .single_content .sin_text .sin_con .head { font-size: 22px; }

    /* Footer: 4-Column Layout shifts smoothly into a 2-Column Matrix */
    footer { padding: 3em 2em 2em; }
    .col-3, .col-3#newsletter {
        display: inline-block;
        width: 48%;
        margin-bottom: 2em;
        vertical-align: top;
    }
    .social-links { position: relative; bottom: 0; margin-top: 15px; }
    footer .row { border-bottom: none; }
}

/* ==========================================================================
   3. MOBILE RESPONSIVE STYLES (768px & Below)
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* Fluid Container Edge Alignment */
    .container .header_con .header_center,
    .container .menu_con .menu_center,
    .container .about_con .about_center,
    .container .list_waqth_con .list_waqth_center,
    .container .blog_list_con .blog_list_center,
    .container .cate_head_con .cate_head_center,
    .container .single_det_con .single_det_center,
    .container .footer_con .footer_center {
        padding: 0 15px;
    }
    .container .blog_list_con { margin: 25px 0; }

    /* Header: Stacked Layout Configuration */
    .header .logo_search .logo,
    .header .logo_search .search {
        width: 100%;
        float: none;
        text-align: center;
    }
    .header .logo_search .logo img {
        padding: 15px 0 5px 0;
        max-width: 180px;
        display: inline-block;
        float: none;
    }
    .header .logo_search .search { padding: 10px 0 15px 0; }

    /* Slider: Scale viewport height to reduce scrolling fatigue */
    .custom_slider { height: 240px; }

    /* About/Company Block Stack Reset */
    .company { flex-direction: column; }
    .img { width: 100%; margin: 15px 0 0 0; }
    .company-info { width: 100%; padding: 15px 0; text-align: center; }
    .company-info span { font-size: 26px; display: block; }
    .company-info p { text-align: justify; }

    /* Prayer / Waqth Section Stack Unroll */
    .container .list_waqth_con .list_waqth_center .list_waqth .heads,
    .container .list_waqth_con .list_waqth_center .list_waqth .waq_head { margin: 10px 0; padding: 25px 15px; }
    .container .list_waqth_con .list_waqth_center .list_waqth .heads .head_one .head_title { font-size: 28px; }
    .container .list_waqth_con .list_waqth_center .list_waqth .waqth_time ul { flex-direction: column; gap: 12px; }
    .container .list_waqth_con .list_waqth_center .list_waqth .waqth_time > ul > li {
        width: 100%;
        padding-bottom: 12px;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
    }
    .container .list_waqth_con .list_waqth_center .list_waqth .waqth_time > ul > li:last-child { border-bottom: none; }

    /* Blog List Column Unroll to Card Feed */
    .blog_list .blog_li_head .list_block > ul > li { width: 100%; float: left; padding: 12px 0; }
    .blog_list .blog_li_head .head .head_one .head_title { font-size: 26px; }
    .blog_list .blog_li_head .list_block > ul > li .li_con .img_txt { padding: 15px; }
    .blog_list .blog_li_head .list_block > ul > li .li_con .img_txt .title {
        height: auto;
        max-height: 54px;
        -webkit-line-clamp: 2;
    }

    /* Category Header Block Scale */
    .container .cate_head_con .cate_head_center .cate_head .head_title { padding: 40px 0; }
    .container .cate_head_con .cate_head_center .cate_head .head_title .head_one { font-size: 28px; margin: 5px 0; line-height: 1.3; }
    .container .cate_head_con .cate_head_center .cate_head .head_title .head_two { font-size: 14px; line-height: 1.5; }
    .container .cate_head_con .cate_head_center .cate_head .head_title .head_two a { padding: 4px 8px; display: inline-block; }

    /* Single Post Detail Grid Stack Unroll */
    .container .single_det_con .single_det_center .single_det { margin: 15px 0; }
    .container .single_det_con .single_det_center .single_det .single_content,
    .container .single_det_con .single_det_center .single_det .recent_block { width: 100%; float: none; }
    .container .single_det_con .single_det_center .single_det .single_content .sin_img,
    .container .single_det_con .single_det_center .single_det .single_content .sin_text .sin_con { padding: 10px 0; }
    .container .single_det_con .single_det_center .single_det .single_content .sin_text .sin_con .head { font-size: 20px; line-height: 1.4; margin-bottom: 12px; }
    .container .single_det_con .single_det_center .single_det .single_content .sin_text .sin_con .head_para p { text-align: left; line-height: 24px; font-size: 15px; }
    .container .single_det_con .single_det_center .single_det .recent_block { padding: 20px 0 10px 0; }
    .single_det .recent_block .block .block_li > ul > li { padding: 10px 0; border-bottom: 1px dashed #eee; }
    .single_det .recent_block .block .block_li > ul > li:last-child { border-bottom: none; }
    .single_det .recent_block .block .block_li > ul > li .li_con .image { width: 25%; }
    .single_det .recent_block .block .block_li > ul > li .li_con .img_txt { width: 75%; padding: 0 0 0 12px; }
    .single_det .recent_block .block .block_li > ul > li .li_con .img_txt .head { font-size: 14px; line-height: 1.4; }

    /* Footer: Comprehensive Mobile Optimization Stack */
    footer { padding: 2.5em 1em 1.5em; text-align: center; }
    .col-3, .col-3#newsletter {
        width: 100%;
        display: block;
        float: none;
        margin-bottom: 2.5em;
    }
    
    /* Reveal mobile-specific UI hooks if triggered */
    .footer-toggle { display: block; }
    
    /* Center align inputs and action components */
    #subscribe { display: flex; justify-content: center; width: 100%; }
    input#subscriber-email { width: 65%; max-width: 240px; }
    
    /* Social Block Re-alignment */
    .social-links {
        position: relative;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
        margin-top: 15px;
    }
    
    /* Contact details row re-alignment */
    #newsletter #address li div {
        text-align: left;
        float: none;
        display: inline-block;
        width: calc(100% - 60px);
        vertical-align: middle;
    }
    #newsletter #address li i {
        vertical-align: middle;
        margin-right: 10px;
    }
}