@media screen and (min-width:320px) and (max-width:767px){
    .sponsored li {
        color: #fff;
        display: inline-block;
        margin-bottom: 15px;
        margin-right: 0;
        text-align: center;
        vertical-align: middle;
        width: auto;
    }
    .site_logo a img.img-responsive {
        margin: auto !important;
    }
    .sponsored {

        text-align: left !important;
    }
.sponsored .input-group{width:100% !important;}

.mailus{text-align:center;}

.top_header{background:#a10f36 none repeat scroll 0 0;border-bottom:2px solid #ae163f;padding:6px 0;text-align:center;}

.navbar-nav{float:right;margin:0;width:100%;}

.nav_custom{border-top:1px dashed #fff;}

.nav_custom .navbar-collapse.collapse.in{padding-left:15px;padding-right:15px;}

.msme a{background:#f3b406 none repeat scroll 0 0;color:#000;font-size:13px;padding:13px 17px;text-transform:uppercase;}

.msme li{display:inline-block;margin-right:0;}

.msme{margin-bottom:21px !important;margin-top:13px;text-align:center;}

.loan_btn a{background:#d6eef8 none repeat scroll 0 0;border-left:5px solid #a10f36;color:#000;display:block;font-size:14px !important;max-width:100% !important;padding:15px;text-transform:uppercase;}

.after_slider{position:relative;right:0;top:0;width:100%;}

.slider .carousel-inner{height:clamp(180px, 37.5vw, 960px) !important;}

.loan_btn{float:none;}

.custom_tabs .nav-pills > li{float:left !important;margin-left:0 !important;margin-right:0 !important;width: 33.3%;}

.custom_tabs .tab-content{margin-bottom:15px;}

.links_block{margin-bottom:15px;}

.chairman_msg > h3{color:#003333;font-family:montserratregular;font-size: 17px;text-transform:uppercase;/* line-height: 43px; */}

.chairman_msg h3 span{float:left;margin-right:15px;vertical-align:3px;}

.chair_content > span{display:block;margin-bottom:10px;text-align:center;}

.chair_content > p{padding:0;}

.chairman_msg{margin-bottom:15px;}

}

@media screen and (min-width:768px) and (max-width:991px){.mailus li{color:#fff;display:inline-block;font-size:12px;list-style-type:none;margin-right:0;}

.input-group {
    width: 100% !important;
}

.site_logo{margin-bottom:10px;margin-top:7px;text-align:center;}

.sponsored{text-align:center;}

.nav_custom .nav.navbar-nav a{color:#fff;font-size:12px !important;padding:10px !important;text-transform:uppercase;}

.site_logo > a{display:inline-block;}

.loan_btn{float:none;}

.loan_btn li{display:inline-block;list-style-type:none;margin-bottom:11px;}

.loan_btn a{font-size: 12px !important;}

.msme{/* margin-bottom:45px !important; */margin-top:13px;text-align:center;}

.slider .carousel-inner{height:clamp(180px, 37.5vw, 960px) !important;}

.after_slider{position: inherit;right:0;top: 0;width:100%;}

.custom_tabs .nav-pills > li > a{background:#e9e9e9 none repeat scroll 0 0;border-radius:0;border-top:2px solid;color:#a10f36;font-family:montserratregular;font-size:14px;padding:17px 7px;text-align:center;text-transform:uppercase;}

.custom_tabs .nav-pills > li{float:left;margin-left:0;margin-right:7px;}

.social_icons li{display:inline-block;list-style-type:none;margin-right:9px !important;}

.links_block{margin-bottom:15px;}

.chairman_msg{margin-bottom:15px;}

}

@media screen and (min-width:1023px) and (max-width:1200px){

	

	.custom_tabs .nav-pills>li {

    width: 32% !important;;

}

.site_logo {

    margin-top: 0;

}

.sponsored {

    margin-top: 0;

    margin-bottom: 0;

}



#cssmenu>ul>li>a {

    font-size: 9px;

    padding: 15px 7px;

}
#cssmenu>ul>li.has-sub>a:after {
    top: 18px !important;
}
#cssmenu>ul>li.has-sub>a:before {
    top: 15px !important;
}

#cssmenu>ul>li.has-sub>a:after {

    top: 10px;

}

#cssmenu>ul>li.has-sub>a:before {

    top: 7px;

}

.padd h4 {

    padding: 10px 5px;

    font-size: 14px;

}

.chair_content img {

    width: 120px;

}

.chair_content>p {

    font-size: 13px;

}

	.nav_custom .nav.navbar-nav a{color:#fff;font-size:11px;padding:10px 5px;text-transform:uppercase;}

.slider .carousel-inner{height:clamp(180px, 37.5vw, 960px);}

.msme{margin-bottom:0;margin-top:13px;text-align:center;}

.loan_btn li{list-style-type:none;margin-bottom:6px;}

.loan_btn a{    font-size: 10px;

    max-width: 200px;

    padding: 8px 2px;}

.custom_tabs .nav-pills > li{float:left;margin-left:5px;margin-right:3px;}

.custom_tabs .nav-pills > li > a{background:#e9e9e9 none repeat scroll 0 0;border-radius:0;border-top:2px solid;color:#a10f36;font-family:montserratregular;font-size:13px;padding:17px 8px;text-align:center;text-transform:uppercase;}

.links_block > h3{color:#fff;font-family:montserratbold;font-size:22px;}

.links_block{background:#a10f36 none repeat scroll 0 0;border-top:5px solid #f3b406;min-height:275px;padding:20px;}

.vision .panel-body > p{margin-bottom:36px;}

}

@media screen and (min-width:1200px) and (max-width:1400px){.slider .carousel-inner{height:clamp(180px, 37.5vw, 960px);}

}

@media (max-width: 767px) {

  .news ul li a {
    font-size: 15px !important;
  }

}
@media (min-width: 768px) and (max-width: 991px) {

  .useful_links .col-md-3 {
    width: 50% !important;
    float: left !important;
    clear: none !important;
  }

  /* Clear every 3rd item so 2x2 grid resets properly */
  .useful_links .col-md-3:nth-child(odd) {
    clear: left !important;
  }

  .useful_links .links_block {
    min-height: 320px !important;
  }

}

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

  .loan_btn {
    float: none !important;
    width: 100% !important;
    clear: both !important;
    padding:0px 10px 10px 10px;
  }
 .padd{
padding-left:0px !important;
padding-right:0px !important;
}
  .loan_btn ul {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    gap: 8px !important;

    width: 100% !important;
    float: none !important;
  }

  .loan_btn ul li {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
   
  }

  .loan_btn ul li a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 14px 12px !important;
    text-align: left !important;
    font-size: 13px !important;
    gap: 10px !important;
    min-height: 60px !important;
    white-space: normal !important;
  }

  .loan_btn ul li a i {
    font-size: 18px !important;
    flex-shrink: 0 !important;
  }

  .loan_btn ul li a span {
    display: block !important;
    line-height: 1.3 !important;
  }

}



/* responsive-29/10 */





@media (max-width: 991px) {

  #cssmenu #head-mobile {
    display: flex !important;
    align-items: center !important;
    justify-content: end !important;
    padding: 0 16px !important;
  }

.custom_tabs {
    padding: 20px 0;
}

.useful_links {
    padding-bottom: 20px;
}

}

@media (max-width: 991px) {


  #cssmenu ul.nav > li > ul > li > a {
    color: #ffffff !important;
  }

  /* ── Fix black gap above submenu items ── */
  #cssmenu ul.nav > li.has-sub > ul {
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: 0 !important;
    position: relative !important;
  }

  #cssmenu ul.nav > li.has-sub > ul > li:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
  }

  /* ── Submenu text white ── */
  #cssmenu ul.nav > li > ul {
    background: #2a2a2a !important;
    border-left: 4px solid #a10f36 !important;
  }

  #cssmenu ul.nav > li > ul > li {
    background: #2a2a2a !important;
    border-bottom: 1px solid #3a3a3a !important;
    margin: 0 !important;
    padding: 0 !important;
  }



  #cssmenu ul.nav > li > ul > li > a {
    color: #ffffff !important;
    background: #2a2a2a !important;
    display: block !important;
    padding: 11px 20px 11px 24px !important;
    margin: 0 !important;
    font-size: 14px !important;
    text-decoration: none !important;
  }

  #cssmenu ul.nav > li > ul > li > a:hover {
    background: #a10f36 !important;
    color: #ffffff !important;
  }

  /* ── Remove any ul.nav top padding causing gap ── */
  #cssmenu ul.nav {
    padding-top: 0 !important;
  }

  /* ── ul.nav::before causing gap ── */
  #cssmenu ul.nav::before,
  #cssmenu ul.nav::after {
    content: none !important;
    display: none !important;
  }

}

@media (max-width: 991px) {

  /* ── Search + Toggle side by side ── */
  .col-lg-7 {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  .sponsored {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .nav_custom {
    flex-shrink: 0 !important;
    width: auto !important;
  }

  /* Hide sponsor logos */
  .sponsored ul {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    list-style: none !important;
  }

  .sponsored ul li:not(:last-child) {
    display: none !important;
  }

  .sponsored ul li:last-child {
    flex: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .sponsored .input-group {
    display: flex !important;
    width: 100% !important;
  }

  .sponsored .form-control {
    height: 44px !important;
    border-radius: 4px 0 0 4px !important;
    border: 1px solid #ccc !important;
    font-size: 14px !important;
    padding: 0 12px !important;
    flex: 1 !important;
    box-shadow: none !important;
  }

  .sponsored .input-group-btn .btn {
    height: 44px !important;
    background: #8B0000 !important;
    border: none !important;
    color: #fff !important;
    border-radius: 0 4px 4px 0 !important;
    padding: 0 14px !important;
  }

  /* ── Toggle button: match search button style ── */
  /* Remove ALL previous pseudo-element interference */
  .button::before,
  .button::after {
    display: none !important;
    content: none !important;
    box-shadow: none !important;
  }

  .button {
z-index:1 !important;
    width: 44px !important;
    height: 44px !important;
    background: #8B0000 !important;
    border-radius: 4px !important;
    margin-left: 8px !important;
    cursor: pointer !important;
    /* Let existing JS background-image or content show */
    /* Just size and color match search btn */
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 3 lines via box-shadow on a real element inside .button */
  /* The existing cssmenu JS adds content inside .button via #head-mobile */
  /* So we target the existing structure */

  /* If .button has no child elements, use outline approach */
  .button {
    /* 3 horizontal lines using background gradient */
margin-top:10px;
    background-image: linear-gradient(
      to bottom,
      #fff 20%, transparent 20%,
      transparent 40%, #fff 40%,
      #fff 60%, transparent 60%,
      transparent 80%, #fff 80%
    ) !important;
    background-size: 20px 14px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: #8B0000 !important;
  }

  /* ── Sidebar: ul.nav slides from left ── */
  #cssmenu ul.nav {
    position: fixed !important;
    top: 0 !important;
    left: -280px !important;
    width: 270px !important;
    height: 100vh !important;
    background: #fff !important;
    z-index: 99999 !important;
    overflow-y: auto !important;
    transition: left 0.3s ease !important;
    margin: 0 !important;
    padding: 52px 0 0 0 !important;
    list-style: none !important;
  }

  /* When JS sets display:block — slide in */
  #cssmenu ul.nav[style*="display: block"] {
    left: 0 !important;
    box-shadow: 4px 0 20px rgba(0,0,0,0.2) !important;
  }

  /* ── Sidebar top header ── */
  #head-mobile {
    position: fixed !important;
    top: 0 !important;
    left: -270px !important;
    width: 270px !important;
    height: 52px !important;
    background: #8B0000 !important;
    z-index: 100000 !important;
    transition: left 0.3s ease !important;
    display: block !important;
  }

 

  /* Slide head-mobile when nav opens */
  #cssmenu:has(ul.nav[style*="display: block"]) #head-mobile {
    left: 0 !important;
  }

  /* ── Overlay ── */
  #cssmenu:has(ul.nav[style*="display: block"])::after {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.45) !important;
    z-index: 99998 !important;
  }

  /* ── Nav items ── */
  #cssmenu ul.nav > li {
    display: block !important;
    float: none !important;
    border-bottom: 1px solid #ebebeb !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #cssmenu ul.nav > li > a {
    display: block !important;
    padding: 14px 52px 14px 20px !important;
    color: #222 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border-left: 4px solid transparent !important;
    background: #fff !important;
  }

  #cssmenu ul.nav > li > a:hover {
    border-left-color: #8B0000 !important;
    background: #fdf4f4 !important;
    color: #8B0000 !important;
  }

  /* Submenu + button */
  #cssmenu ul.nav > li > .submenu-button {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border-left: 1px solid #ebebeb !important;
  }

  /* Submenu items */
  #cssmenu ul.nav > li > ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #f7f7f7 !important;
    border-left: 4px solid #8B0000 !important;
  }

  #cssmenu ul.nav > li > ul > li {
    display: block !important;
    float: none !important;
    border-bottom: 1px solid #eee !important;
  }

  #cssmenu ul.nav > li > ul > li > a {
    display: block !important;
    padding: 11px 20px 11px 24px !important;
    color: #fff !important;
    font-size: 14px !important;
    text-decoration: none !important;
  }

  #cssmenu ul.nav > li > ul > li > a:hover {
    background: #fde8e8 !important;
    color: #8B0000 !important;
  }

}

/* ── Desktop reset ── */
@media (min-width: 992px) {

  .col-lg-7 {
    display: block !important;
  }



  #cssmenu ul.nav {
    position: static !important;
    height: auto !important;
    width: auto !important;
    padding: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    background: transparent !important;
    left: auto !important;
    transition: none !important;
  }

  #head-mobile {
    display: none !important;
    position: static !important;
    left: auto !important;
  }

  #cssmenu::after {
    display: none !important;
  }

  .button {
    display: none !important;
  }

  #cssmenu ul.nav > li {
    float: left !important;
    display: inline-block !important;
    border-bottom: none !important;
  }

  #cssmenu ul.nav > li > a {
    border-left: none !important;
    background: transparent !important;
  }

}
@media (max-width: 991px) {
  #head-mobile {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
  }
}
@media (max-width: 991px) {

  /* ── Fix extra space inside has-sub li ── */
  #cssmenu ul.nav > li.has-sub {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* The parent link inside has-sub */
  #cssmenu ul.nav > li.has-sub > a {
    margin: 0 !important;
    padding: 14px 52px 14px 20px !important;
  }

  /* Remove any gap between parent a and submenu ul */
  #cssmenu ul.nav > li.has-sub > ul {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* First submenu item — remove top gap */
  #cssmenu ul.nav > li.has-sub > ul > li:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
  }

  /* First submenu item link */
  #cssmenu ul.nav > li.has-sub > ul > li:first-child > a {
    padding-top: 11px !important;
    margin-top: 0 !important;
  }

}
/* end */


@media screen and (min-width:992px) and (max-width:1199px) {
    .online-services .container,
    .useful_taggs .container {
        width: calc(100% - 30px);
    }

    .online-servers {
        padding: 15px;
    }

    .online-servers > .row {
        margin-right: 0;
        margin-left: 0;
    }

    .online-servers .col-md-9,
    .online-servers .qr-side {
        width: 100%;
        float: none;
        padding-right: 0;
        padding-left: 0;
    }

    .loan-class {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .loan-class p,
    .loan-class p.margin-side {
        width: 100%;
        margin: 0 !important;
    }

    .qr-side h4 {
        width: 100%;
        margin: 10px 0;
        text-align: center;
    }

    .online-services .qr-code {
        width: 180px;
        max-width: 100%;
        margin: 0 auto 5px;
    }

    .useful_taggs > .container > .row > [class*="col-"] {
        width: 100%;
        float: none;
    }

    .links_block.block_links {
        min-height: 0;
        overflow: hidden;
    }

    .links_block.block_links::after {
        display: table;
        clear: both;
        content: "";
    }

    .useful_taggs .qr-code {
        width: 220px;
        max-width: 100%;
        margin: 0 auto 15px;
    }

    .useful_taggs .qr-code.codes img {
        height: auto;
    }
}



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

    p.margin-side {

        margin-right: 10px !important;

    }



    .loan-class p {

        width: 31.2%;

    }



    .qr-side h4 {

        width: 100%;

        margin: 13px auto 15px;

    }

    .qr-code {

        width: 41%;

        margin: 0;

    }



    .qr-side h4 {

        width: 100%;

    }

    .online-servers {

        margin: 0px 20px;

    }

}



@media (min-width: 453px) and (max-width: 575px){

    p.margin-side {

        margin-right: 10px !important;

    }



    .loan-class p {

        width: 47%;

    }



    .online-servers {

        padding: 15px 15px;

        margin: 0 15px;

    }

}



@media (min-width: 320px) and (max-width: 452px){

    .loan-class p {

        width: 100%;

        margin-right: 0px;

    }



    .online-servers {

        padding: 15px 15px;

        margin: 0 15px;

    }

    

}