.tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        /* .tab-btn.active { background-color: #ff8800; color: white; } */
        /* Make sure the filter section is above the slider */
        .filter-section {
            position: absolute;
          top: 40%;
          left: 20%;
        
          
            /* Ensures it stays above */
            z-index: 10;
            /* Higher than the slider */
            background: white;
            /* Prevents transparency issues */
            padding: 20px;
            /* Add padding for spacing */
        }
        
        .filter-contailers {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /* box-shadow: 3px 0px 6px ; */
            padding: 2rem 0rem;
          border-radius: 16px;
        }
        
        .tab-btn {
            border: none;
            /* background: white; */
            color: rgb(104, 103, 103);
            font-weight: bold;
            flex: 1;
            /* Ensures equal width for all buttons */
            padding: 2px 60px;
            text-align: center;
            transition: 0.3s;
            text-wrap: nowrap;
        }
        
       
        
       
        /* .d-flex {
            border: .5px solid #ccc;
  
            border-radius: 3px;
           
            overflow: hidden;
        
        } */
        
        /* Active button styling */
        .tab-btn.active {
            /* background: var(--primary-color); */
            /* Blue color */
            color: rgb(117, 115, 115);
            border-radius: 0px !important;
            box-shadow: none;
            background-color: rgb(189, 181, 213);
        }
        .background{
            background-color: rgb(189, 181, 213);

        }
        
        .explore-btn {
            position: absolute;
            margin-top: 170px !important;
          
        }
        
        .tab-content.active {
            display: flex;
            /* Use flexbox for row layout */
            flex-wrap: wrap;
            /* Allows wrapping to the next row if needed */
            justify-content: space-between;
            /* Adjusts spacing between elements */
            gap: 15px;
            /* Adds space between elements */
            
        }
        


        /* filter container responsiv */
     
            @media (max-width: 768px) {

                html,body{
                    overflow-x: hidden;
                }

                .navbar-collapse{
                    z-index: 10;
                }
             
              .tab-btn {
                padding: 3px 4px;
                width: 100%;
                /*margin-bottom: 5px;*/
              }
              .tab-content.active {
                flex-direction: column;
                width: 100%;
                margin-top: 1rem;
              }
              .explore-btn {
                position: static;
                margin-top: 20px !important;
              }
              .btn-warning{
                padding: 10px 70px;
              }

              .filter-contailer{
                  
                    padding: 30px;
                            width: 98%;
        margin: 1rem;
                  
              }
              .banner{
                height: 1000px;
              }

           
          
            }


            @media (max-width: 764px) {

              .filter-contailer{
                  position: absolute;
                  top: 10%;
                  padding: 30px;
                          width: 98%;
        margin: 1rem;
                
            }
            .banner{
              height: 1000px;
            }
            }

           
          
             @media (min-width: 765px) and (max-width: 968px){
                .filter-contailer{
                    position: absolute;
                    top: 15%;
                    z-index: 10;
                    padding: 30px;
                          width: 98%;
        margin: 1rem;
                
                   .mobile-menu{
                    width: 700px !important;
                   }
                  
           }

           .banner{
            height: 1000px;
           }
           .mobile-menu{
            width: 50%px !important;
           }
          }


          @media (min-width: 968px) and (max-width: 1100px){
                .filter-contailer{
                    position: absolute;
                    top: 26%;
                    z-index: 10;
                    padding: 30px;
                          width: 98%;
                       margin: 1rem;
                
                   .mobile-menu{
                    width: 700px !important;
                   }
                  
           }

           .banner{
            height: 950px;
           }
          }


           @media (min-width: 1120px)and (max-width: 1320px) {
                .filter-contailer{
                    position: absolute;
                top: 26%;
                     position: absolute;
   
        width: 98%;
        margin: 1rem;
              
                };
                html,body{
                    overflow: hidden;
                }
           
           } 
          
           @media (min-width: 1321px) {
                .filter-contailer{
         position: absolute;
        top: 20%;
        width: 98%;
        margin: 1rem;
                };
                html,body{
                    overflow: hidden;
                }

           } 


          
          
       
   
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
    
        body {

      font-family: 'Plus Jakarta Sans', sans-serif;
        font-weight: 300;
        font-style: normal;
        }
    
        header {
          /* background: #fff; */
        
          padding: 35px 0px;
          position: relative;
        width: 100%;
          z-index: 1000;
          /* border-bottom: 1px solid black; */
          position: absolute;
        }
    
        .nav-container {
          display: flex;
          align-items: center;
          justify-content: space-between;
          max-width: 1400px;
          margin: 0 auto;
         
        }
    
        .logo img {
          width: 200px;
          height: 60px;
          margin: 5px;
        }
    
        nav {
          display: flex;
        }
    
        .nav-links {
          list-style: none;
          display: flex;
          gap: 22px;
        }
    
        .nav-links li {
          position: relative;
        }
    
        .nav-links a {
          text-decoration: none;
          color: #fff;
          padding: 5px 4px;
          display: block;font-size: 14px;

        }

        
        .nav-links a{
        font-family: "Roboto Condensed", sans-serif;
        font-optical-sizing: auto;
        font-weight: weight;
        font-style: normal;
          text-decoration: none;
      }
    
        .nav-links li:hover .dropdown {
          display: block;
            text-decoration: none !important;
        }
    .nav-links a:hover {
  text-decoration: none; /* Prevent underline on hover */
    }
        .dropdown {
          display: none;
          position: absolute !important;
          top: 10px;
          right: 0;
          background: rgb(0, 0, 0);
          box-shadow: 0 4px 8px rgba(0,0,0,0.1);
          list-style: none;
          padding: 10px 0;
          min-width: 128px;
          z-index: 999;
           

        }
    
        .dropdown a {
          padding: 10px 20px;
          white-space: nowrap;
          text-decoration: none !important;
        }
    
        /* Hamburger icon */
        .hamburger {
          display: none;
          flex-direction: column;
          gap: 5px;
          cursor: pointer;
        }
    
        .hamburger div {
          width: 25px;
          height: 3px;
          background: #333;
        }
    
        /* Mobile menu */
        .mobile-menu {
          position: fixed;
          top: 90px;
          left: -260px;
          width: 250px;
          height: 100%;
          background: #fff;
          box-shadow: 2px 0 5px rgba(0,0,0,0.2);
          padding: 11px;
          transition: left 0.4s ease;
          z-index:20;
        }
    
        .mobile-menu.active {
          left: 0;
        }
    
        .mobile-menu ul {
          list-style: none;
          padding: 0;
        }
    
        .mobile-menu a {
          text-decoration: none;
          color: #5a5959;
          display: block;
         
         
          /* padding: 10px 0; */
        }
        .mobile-menu a:hover {
  background-color: gainsboro;
  padding: 15px;
}

    
        .mobile-menu .dropdown {
          display: none;
          padding-left: 15px;
        }
    
        .mobile-menu li.active > .dropdown {
          display: block;
        }
    
        @media (max-width: 991px) {
          nav {
            display: none  !important;
          }
    
          .hamburger {
            display: flex;
            padding: 10px;
          }
        }


        .worng{
          background-color: #b4b0b0;
        }