html, body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  border:0;
}

body {
  background:var(--bg_color);
}

  .master {
    width:95vw;
    margin:0 auto;
    
  }

   a {
    text-decoration: none !important;
   }

  @media screen and (min-width: 600px) {
    .master {
      width:70vw ;
      margin:0 auto;
    }
   
  }

* {
  box-sizing: border-box;
}

button, input {
  font-family: 'Poppins', sans-serif;
}


.header {
    display: flex;
    flex-direction: row;
    padding: 5px 5px ;
    margin-top:5px;
    justify-content: space-between;
}



.left-side {
  display: flex;
  flex-direction:column;
  align-items: center;
  
}

.left-side h1 {
  font-size: 18px;
  color: #184470;
  margin:0px;
  padding: 0;
}

.left-side span {
  font-size: 12px;
  color: #959595;
}

.right-side {
  display: flex;
  flex-direction:row;
  align-items: center;
  gap: 10px;

}


.bell {
  width: auto;
  height: auto;
  font-size:25px;
  color:#C6C6C6;
  position: relative;

}
.heart {
  width: auto;
  height: auto;
  font-size:25px;
  color:#C6C6C6;
  position: relative;
}

.avatar {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-size: cover;
  margin-top:-2px;
}

  .noti {
  position: relative;
top: -15px;
left: -15px;
padding: 5px 5px;
width:10px;
height:10px;
border-radius: 50%;
background-color: red;
color: white;
font-size:10px;
}



     
        .searchbox {
  margin: 0 20px;
  padding: 10px 20px 10px 50px;
  border-radius: 14px;
  background: #F3F3F3 url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuY29tL3N2Z2pzIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDUxMS45OTkgNTExLjk5OSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgY2xhc3M9IiI+PGc+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+Cgk8Zz4KCQk8cGF0aCBkPSJNMjI1Ljc3MywwLjYxNkMxMDEuMjgzLDAuNjE2LDAsMTAxLjYyMiwwLDIyNS43NzNzMTAxLjI4NCwyMjUuMTU3LDIyNS43NzMsMjI1LjE1N3MyMjUuNzc0LTEwMS4wMDYsMjI1Ljc3NC0yMjUuMTU3ICAgIFMzNTAuMjYzLDAuNjE2LDIyNS43NzMsMC42MTZ6IE0yMjUuNzczLDQxMy45MTdjLTEwNC4wODQsMC0xODguNzYxLTg0LjQwNi0xODguNzYxLTE4OC4xNDUgICAgYzAtMTAzLjc0NSw4NC42NzctMTg4LjE0NSwxODguNzYxLTE4OC4xNDVzMTg4Ljc2MSw4NC40LDE4OC43NjEsMTg4LjE0NUM0MTQuNTM1LDMyOS41MTEsMzI5Ljg1OCw0MTMuOTE3LDIyNS43NzMsNDEzLjkxN3oiIGZpbGw9IiNkNGQ0ZDQiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIHN0eWxlPSIiIGNsYXNzPSIiPjwvcGF0aD4KCTwvZz4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgoJPGc+CgkJPHBhdGggZD0iTTUwNi41NDcsNDc5Ljc1NkwzODUuMDI0LDM1OC44NWMtNy4yNDgtNy4yMDUtMTguOTYzLTcuMTc0LTI2LjE3NCwwLjA2OGMtNy4yMDUsNy4yNDgtNy4xNzQsMTguOTYyLDAuMDY4LDI2LjE3NCAgICBsMTIxLjUyMywxMjAuOTA2YzMuNjE1LDMuNTksOC4zMjgsNS4zODUsMTMuMDUzLDUuMzg1YzQuNzU2LDAsOS41MDYtMS44MiwxMy4xMjEtNS40NTMgICAgQzUxMy44Miw0OTguNjgxLDUxMy43ODksNDg2Ljk2Nyw1MDYuNTQ3LDQ3OS43NTZ6IiBmaWxsPSIjZDRkNGQ0IiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBzdHlsZT0iIiBjbGFzcz0iIj48L3BhdGg+Cgk8L2c+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPC9nPjwvc3ZnPg==) no-repeat 20px center;
  background-size: 20px;
}

        .searchbox input {
            width:100%;
            border:0;
            background-color:transparent;
            font-size:14px;
            color:#000;
            outline:none;
            opacity:0.6;
        }

        .filters {
            display:flex;
            list-style-type:none;
            padding:0 20px 10px 20px;
            margin:20px 0;
            white-space: nowrap;
          
        }


        .filters li {
            margin-right:15px;
            background:#f3f3f3;
            padding:10px 20px;
            font-size: 14px;
            border-radius:10px;
            cursor: pointer;
            transition: all .3s ease-out;
            width:auto;


        }
        .filters li:last-child {
            margin-right:0;
            
        }

        .filters li.active {
            background:#D0D4E2;
            color:#184470;
            font-weight:600;
            cursor: default;
        }

        .videobox {
  position: relative;
  width: calc(98% - 40px);
  height: 160px;
  margin:10px auto;
  border-radius: 20px;
  overflow: hidden;
}

.wrapper {
display:flex;

}
.slide_left {
  width:100%;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content:center;

}
.slide_right {
  width:0%;
  height: 160px;
}
.slide_left ul {
list-style: none;
}

.slide_left ul li{
font-size:16px;
}


.slide_images {
   border-left: 1px solid #ddd;
   width:100%;
  height:100%;
  object-fit:cover;
  object-position: 0px 0px;
}

.swiper-pagination-bullet-active {
     background-color: #fff !important;
}

.searches {
  padding:20px;
}



     
.tabbar {
  
  display: flex;
  justify-content: space-evenly;
  position: fixed;
   width: 100vw;
   bottom:-2px;
   left:0;
   background:var(--sec_bg_color); 
   margin:0 auto;
}

.tabbar button {
  border: 0;
  background-color: transparent;
  background-position: center top;
  background-size: 20px;
  background-repeat: no-repeat;
  flex: 1;
  color: var(--bg_color); 
  cursor: pointer;
  padding-top: 10px;
  transition: all .3s ease-out;
  margin:5px;

}

.tabbar button:hover {
  opacity: 0.8;
}

.tabbar button#active_footer {
  color: var(--cta_color);
  font-weight:bold;
}






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

  .studios {
    background:#f3f3f3;
              padding:15px 20px;
              font-size: 18px;
              border-radius:10px;
              color:#959595;
              margin-bottom:10px;
              display: flex;
              justify-content: space-between;

  }

}