@media only screen and (max-width:1440px){
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 14px;
    padding-left: 14px;
  }
  .main-navbar .nav-link {
  
  font-size: 14px;
  
  gap: 2px;
}
.main-navbar .navbar-brand img {
  max-height: 90px;
 
}
    .main-navbar .dropdown:hover>.dropdown-menu {
      
        margin-top: 13px;
}
.hero-section p {
    
    font-size: 20px;
}
    .hero-section h1 {
        font-size: 48px;
    }
    .hero-section-area {
    padding: 100px 0 430px;
   
}
.bg-common-banner {
 background-position: left;
  
}
}

@media only screen and (max-width:1360px){
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 12px;
    padding-left: 12px;
  }
  .main-navbar .nav-link {
  
  font-size: 14px;
  
  gap: 2px;
}
.main-navbar .navbar-brand img {
  max-height: 78px;
 
}
    .main-navbar .dropdown:hover>.dropdown-menu {
      
        margin-top: 9px;
}
.hero-section p {
    
    font-size: 19px;
}
    .hero-section h1 {
        font-size: 45px;
    }
    .hero-section-area {
    padding: 90px 0 420px;
   
}
.hero-section {
    
    padding: 0px 0 90px;
}
.categories-section {
  padding: 90px 0 120px;
 
}


.jam-pattern-section {
  padding: 60px 0;
  
}
}


@media only screen and (max-width:1199px){
  .left-contents{
    width: 70%;
  }
 .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 10px;
    padding-left: 10px;
  }
  .main-navbar .nav-link {
  
  font-size: 12px;
  
  gap: 2px;
}
.main-navbar .navbar-brand img {
  max-height: 72px;
 
}
    .main-navbar .dropdown:hover>.dropdown-menu {
      
        margin-top: 9px;
}
.top-right-menu {
 
  gap: 8px;
}
.hero-section p {
    
    font-size: 19px;
}
    .hero-section h1 {
        font-size: 40px;
    }
    .hero-section-area {
    padding: 70px 0 400px;
   
}
.about-box h2 {
    font-size: 32px;

}
.small-title {
   
    font-size: 17px;
}
.about-box p.notice-p {
   
    font-size: 17px;
}
.box-sign small {
    font-size: 16px;
}
.notice-title {
   
    padding: 16px;
}
.about-row {
  margin-top: -62px;
}
.hero-section {
    
    padding: 0px 0 80px;
}
.categories-section {
  padding: 80px 0 100px;
 
}



.jam-pattern-section {
  padding: 50px 0;
  
}
}


@media only screen and (max-width:1024px){
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 10px;
    padding-left: 10px;
  }
  .main-navbar .nav-link {
  
  font-size: 12px;
  
  gap: 2px;
}
.main-navbar .navbar-brand img {
  max-height: 80px;
 
}
    .main-navbar .dropdown:hover>.dropdown-menu {
      
        margin-top: 9px;
}
.top-right-menu {
 
  gap: 8px;
}
.hero-section p {
    
    font-size: 18px;
}
    .hero-section h1 {
        font-size: 38px;
    }
    .hero-section-area {
    padding: 70px 0 350px;
   
}

.about-box h2 {
    font-size: 30px;

}
.small-title {
   
    font-size: 16px;
}
.about-box p.notice-p {
   
    font-size: 17px;
}
.box-sign small {
    font-size: 16px;
}
.notice-title {
   
    padding: 16px;
}
.hero-section {
    
    padding: 0px 0 70px;
}
.categories-section {
  padding: 70px 0 90px;
 
}
.bg-common-banner h2{
  font-size: 40px;
}

.jam-pattern-section {
  padding: 50px 0;
  
}
}

@media only screen and (max-width:991px){
   .left-contents{
    width: 100%;
  }

   .mobile-menu{

    background:#fff0;

}

.mobile-menu ul{
   background-color: #fff;
    list-style:none;
   padding: 15px;
    margin:0;

}

.mobile-menu li{

    border-bottom:1px solid #ececec;

}

.mobile-menu> .container > ul > li > a{

    display:block;

    padding:18px 0;

    color:#111;

    font-weight:600;

    text-decoration:none;

}

.menu-title{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.menu-title>a{

    flex:1;

    padding:18px 0;

    color:#111;

    text-decoration:none;

    font-weight:600;

}

.submenu-btn{

    width:50px;

    height:50px;

    border:none;

    background:#f4f4f4;

    cursor:pointer;

}

.submenu-btn i{

    transition:.3s;

}

.submenu{

    max-height:0;

    overflow:hidden;

    transition:max-height .45s ease;

    background:#fafafa;

}

.submenu a{

    display:block;

    padding:14px 25px;

    color:#555;

    text-decoration:none;

    border-top:1px solid #eee;

}

.has-submenu.active .submenu{

    max-height:700px;

}

.has-submenu.active .submenu-btn i{

    transform:rotate(45deg);

}


.mail-box small{
    display: none;
}
.login-box {
  color: #fff0;
}
.hero-section p {
    
    font-size: 17px;
}
    .hero-section h1 {
        font-size: 30px;
    }
    .hero-section-area {
    padding: 60px 0 300px;
   
}
.notice-board {
   
    margin-left: 0;
    padding-top: 20px;
}

.about-box h2 {
    font-size: 28px;

}
.small-title {
   
    font-size: 16px;
}
.about-box p.notice-p {
   
    font-size: 17px;
}
.box-sign small {
    font-size: 16px;
}
.notice-title {
   
    padding: 15px;
}
.hero-section {
    
    padding: 0px 0 60px;
}
.categories-section {
  padding: 60px 0 80px;
 
}
.bg-common-banner h2{
  font-size: 34px;
}

.jam-pattern-section {
  padding: 40px 0;
  
}
.common-banner-small {
  
  align-items: start;
 
  flex-direction: column;
}
}

@media only screen and (max-width:767px){

  .notice-title {
   
    font-size: 16px;
  }
.hero-section p {
    
    font-size: 16px;
}
    .hero-section h1 {
        font-size: 25px;
    }
    .hero-section-area {
    padding: 40px 0 242px;
   
}
.hero-btn{
  font-size: 15px;
}
.about-box h2 {
    font-size: 24px;

}
.small-title {
   
    font-size: 15px;
}
.about-box p.notice-p {
   
    font-size: 16px;
}
.box-sign small {
    font-size: 15px;
}
.notice-title {
   
    padding: 15px;
}

.categories-section {
  padding: 50px 0 70px;
 
}

.hero-section {
    
    padding: 0px 0 50px;
}
.bg-common-banner h2{
  font-size: 48px;
}
.bg-common-banner h2{
  font-size: 30px;
}
.bg-common-banner {
 
  padding: 40px 0;
}
.nl-form input {
 
  padding: 10px;
}
.nl-form button {
 
  padding: 14px 15px;
}
.counter-box h2 {
  font-size: 30px;
}
.counter-box p {
  font-size: 16px;
}
.tab-content.active {
  padding-left: 0;
}
.jam-pattern-section {
  padding: 30px 0;
  
}
  .main-navbar .navbar-brand img {
    max-height: 50px;
  }


}
@media only screen and (max-width:576px){
.top-right-menu a.btn-bt {
  background-color: #21A7D0;
  padding: 12px 12px;
  font-size: 12px;
}


}

@media only screen and (max-width:360px){


}


/* ---------- LAPTOP / SMALL DESKTOP (max-width: 1199px) ---------- */
@media (max-width: 1199px) {
  h3 { font-size: 36px; }
  h4 { font-size: 34px; }
  h5 { font-size: 32px; }
  h6 { font-size: 30px; }
  p  { font-size: 17px; }
}
 
/* ---------- TABLET (max-width: 991px) ---------- */
@media (max-width: 991px) {
  h3 { font-size: 32px; }
  h4 { font-size: 30px; }
  h5 { font-size: 28px; }
  h6 { font-size: 26px; }
  p  { font-size: 16px; line-height: 1.6; }
}
 
/* ---------- MOBILE LANDSCAPE / LARGE PHONE (max-width: 767px) ---------- */
@media (max-width: 767px) {
  h3 { font-size: 26px; margin-bottom: 12px; }
  h4 { font-size: 24px; margin-bottom: 10px; }
  h5 { font-size: 22px; margin-bottom: 10px; }
  h6 { font-size: 20px; margin-bottom: 8px; }
  p  { font-size: 15px; line-height: 1.6; margin-bottom: 12px; }

  qr-hero-section h2 {
  padding-top: 130px;
}
.qr-social-media-icons {
  padding: 0;
 
}
.qr-social-media-icons ul {
 
  gap: 20px;
 
}
.qr-social-media-icons ul li {
 
  width: 80px;
  height: 80px;
}
.button-gap {
  padding-top: 10px;
}

}
 
/* ---------- MOBILE / SMALL PHONE (max-width: 480px) ---------- */
@media (max-width: 480px) {
  h3 { font-size: 22px; }
  h4 { font-size: 20px; }
  h5 { font-size: 19px; }
  h6 { font-size: 18px; }
  p  { font-size: 14px; line-height: 1.55; }
  .img-fluid {
  max-width: 80%;
  }
}