/*------------------ Custom Scrollbar ------------------*/

::-webkit-scrollbar{
    width: 7px;
}

::-webkit-scrollbar-track{
    background-color: var(--main-background);
}

::-webkit-scrollbar-thumb{
    background-color: var(--dark-cyan);
}

.home,
.home-popular,
.home-header,
.home-popular h3{

}

.home{
    display: flex;
    flex-direction: row;
}

.home-popular{
    padding: 50px 50px 200px 0px;
    width: 63%;
}

.home-popular h3{
    text-transform: uppercase;
    margin: auto;
    margin: 20px 0px;
    font-size: 35px;
    font-weight: 700;
}

.home-header{
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.home-header h1{
    font-size: 5.5rem;
    text-transform: capitalize;
    font-weight: 700;
}

.slider2{
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 38%;
    position: relative;
    right: 0px;
    float: right;
	height:40vh;
}
.slider2 img { border:4px #fff solid; -webkit-box-shadow: 7px 7px 5px 0px rgba(199,199,199,1);
-moz-box-shadow: 7px 7px 5px 0px rgba(199,199,199,1);
box-shadow: 7px 7px 5px 0px rgba(199,199,199,1);}

.slider-prev,
.slider-next{
  height: fit-content;
  background-color: inherit;
  font-size: 30px;
  margin: auto;
  cursor: pointer;
  font-weight: 600;
  position: absolute;
  top: 170px;
}

.slider-prev{
  left: 190px;
  top:50%;
  z-index:99999;
  background:url('../img/prev-arrow.png') no-repeat; width:60px; height:60px;

}

.slider-next{
  left: 690px;
  top:50%;
  background:url('../img/next-arrow.png') no-repeat; width:60px; height:60px;
}


.description{
  position: relative;
  width:65%;
  padding-top:50px;
}

.description h3{
  display: none;
}

.further-description{
  position: relative;
}

.further-description h2{
  display: none;
  font-size: 1rem;
  font-weight: 400;
  width: 55%;
  text-transform: none;
  line-height:28px;
}

h2.active{
  display: block;
}

h3.active{
  display: block !important;
}

.item{
  flex: 1 0 20%;
  height: 100%;
  object-fit: cover;
  transition: all 0.6s ease-in-out;
}

.small1, .small2 {
  height: 320px;
  position: absolute;
  z-index: -1;
  top: 100px;
}

.big1, .big2 {
  height: 420px;
  position: absolute;
  z-index: 0;
  top: 50px;
}

.small1{
  left: 70px;
}

.big1{
  left: 170px;
}

.focus {
  position: absolute;
  z-index: 1;
  height: 500px;
  left: 280px;
  top: 0px;
}

.big2{
  left: 400px;
}

.small2{
  left: 520px;
}

 @media (max-width: 480px){
.home {
    display: block;
    flex-direction: initial;
    position: relative;
	height:100vh;
}
.home-popular {
    padding: 0px;
    width: 100%;
}
.description {
    position: relative;
    width: 100%;
    padding-top: 0px;
}
.home-popular h3 {
    text-transform: uppercase;
    margin: auto;
    margin: 10px 0px;
    font-size: 17px;
}
.slider2 {
    display: block;
    width: 100%;
    position: absolute;
    right: 0px;
    float: left;
    height: 40vh;
    top: 30%;
}
.slider-next {
    top: 45% !important;
}
.slider-prev {
    top: 45% !important;
}
.further-description h2 {
    width: 100%;
    line-height: 26px;
}
.small1 {
    left: 0px;
}
.small1, .small2 {
    height: 251px;
    position: absolute;
    z-index: -1;
    top: 60px;
}
.big1, .big2 {
    left: 50px;
	width:80px;
}
.big1, .big2 {
    height: 270px;
    position: absolute;
    z-index: 0;
    top: 50px;
}
.small2 {
    left: 200px;
    width: 120px;
}
.slider-prev { left:10px;}
.slider-next { left:290px;}
.focus {
    position: absolute;
    z-index: 1;
    height: 300px;
    left: 100px;
    top: 35px;
    width: 160px;
}
	 
 }