@media screen and (min-width: 1200px){
    .container {max-width: 1095px;}  
    }
    
    @media screen and (max-width: 1199px) {
    .logo.me-auto img { max-width: 129px;}
    .navbar-nav a{ font-size: 14px;}
    .navbar-nav a i {font-size: 11px;}
    .lower-text p {font-size: 15px;}
    .banner-text h1 {font-size: 40px;}
    .hero-banner .owl-nav .owl-prev, 
    .hero-banner .owl-nav .owl-next {width: 40px;}    
    .dotes_3 { width: 60px; height: 60px;}
    .dotes_3::before {width: 14px;height: 14px;}
    .dotes_1::before{ width: 18px; height: 18px;}
    .dotes_4{ width: 50px; height: 50px;}
    .dotes_4::before {width: 24px;height: 24px;}
    .dotes_5 {width: 40px;height: 40px;right: 15px;}
    .dotes_5::before{ width: 20px; height: 20px;}
    .container {max-width: 100%;}

    }
    
    @media screen and (max-width: 991px) {
    .dropdown-menu {position: static !important;}
    .detail-right-info {margin-bottom: 30px;}    
    .header {padding: 20px 0px;position: fixed;}
    .header .offcanvas-start {background: var(--white);}
    .offcanvas-start { border-right: none; width: 300px;}
    .header-right .offcanvas-body {align-items: self-start;padding: 20px 0px;}
    .header-right .offcanvas-body nav {width: 100%;}
    .navbar-nav .nav-item {padding:10px 20px;}
    .navbar-nav .nav-link{text-align: left;color: var(--light-grey);opacity: 1;}
    .logo {width: 120px;}
    .sec-gap { padding: 30px 0px;}
    /* end header css */
    .hero-banner .player img {height: 100%;}
    .hero-banner .owl-theme .owl-dots {bottom: 20px;}
    .hero-banner .owl-nav .owl-prev {left: 0 !important;}
    .hero-banner .owl-nav .owl-next {right: 0 !important;}
    .header.sticky .logo img {width: 72px !important;}
    .navbar-nav .nav-item .dropdown-menu {border: none;box-shadow: none !important;padding: 4px 0;}
    .navbar-nav .nav-item .dropdown-menu li {padding: 0;}


    .content-box h2 {
        font-size: 19px;
        line-height: 29px;
      }
      
      .content-box h3 {
        font-size: 19px;
        line-height: 29px;
      }
      
      .content-box  h4 {
        font-size: 17px;
        line-height: 25px;
      }

      .banner-inner-page h1 {
        line-height: 36px;
    }
    

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

    .hero-banner .player img {min-height: 360px;object-fit: cover;}
    .p-60 {padding: 40px 0;}
    h1 {font-size: 20px;line-height: 27px;}
    .pl-100 {padding-left: 15px !important;}
    ul.listing-box li {font-size: 16px;line-height: 24px;}

}