/* ============ desktop view ============ */
@media all and (min-width: 992px) {

	.dropdown-menu li{
		position: relative;
	}
	.dropdown-menu .submenu{ 
		display: none;
		position: absolute;
		left:100%; top:-7px;
	}
	.dropdown-menu .submenu-left{ 
		right:100%; left:auto;
	}

	.dropdown-menu > li:hover{ background-color: #f1f1f1 }
	.dropdown-menu > li:hover > .submenu{
		display: block;
	}

 
}	
/* ============ desktop view .end// ============ */

/* ============ small devices ============ */
@media (max-width: 991px) {
  .dropdown-menu {
    max-height: 50vh; /* Adjust this value to control the visible height of the menu */
    overflow-y: scroll; /* Always shows the vertical scrollbar */
    overflow-x: hidden; /* Prevents horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
}

.dropdown-menu .dropdown-menu{
		margin-left:0.7rem; margin-right:0.7rem; margin-bottom: .5rem;
}
}
/* ============ small devices .end// ============ */



/**----------------------------
    # events 
  -----------------------*/

  #container {
    display: grid ;
    place-items: center
  }
  
  #slider-container {
    height: auto;
    width: 85vw;
    max-width: 1400px;
    position: relative;
    overflow: hidden;
    padding: 20px;
  }
  
  #slider-container .btn {
    position: absolute;
    top: 50%;
    height: 30px;
    width: 30px;
    border-left: 8px solid #fff;
    border-top: 8px solid #fff;
  }
  
  #slider-container .btn:hover {
    transform: scale(1.2);
  }
  
  #slider-container .btn.inactive {
    border-color: rgb(153, 121, 126)
  }
  
  #slider-container .btn:first-of-type {
    transform: rotate(-45deg);
    left: 10px
  }
  
  #slider-container .btn:last-of-type {
    transform: rotate(135deg);
    right: 10px;
  }
  
  #slider-container #slider {
    display: flex;
    width: 1000%;
    height: 100%; 
    transition: all .5s;
  }
  
  #slider-container #slider .slide {
    height: 90%;
    margin: auto 10px;
    display: grid;
    place-items: center;
  }
  
  #slider-container #slider .slide span {
    color: white;
    font-size: 150px;
  }
  
  @media only screen and (min-width: 1100px) {
  
    #slider-container #slider .slide {
      width: calc(2.5% - 20px);
    }
  
  }
  
  @media only screen and (max-width: 1100px) {
  
    #slider-container #slider .slide {
      width: calc(3.3333333% - 20px);
    }
  
  }
  
  @media only screen and (max-width: 900px) {
  
    #slider-container #slider .slide {
      width: calc(5% - 20px);
    }
  
  }
  
  @media only screen and (max-width: 550px) {
  
    #slider-container #slider .slide {
      width: calc(10% - 20px);
    }
  
  }