/*Events Section
------------------------------------*/
.events {
  width: 100%;
  padding: 4rem 0 2rem;
  position: relative;
   background: url('images/qasrbg.png') no-repeat;
  background-attachment: fixed !important;
  background-size: contain;
}
.events::before {
  content: '';
  display: block;
  width: 134px;
  height: 134px;
  background: url('images/sideevents.svg') no-repeat;
  position: absolute;
  top: 0;
  left: 18vw;
  animation: roatet 2s ease-in-out alternate infinite;
 }
 
 @keyframes roatet {
  0% {
   transform: rotate(0deg);
  }
  100% {
   transform: rotate(120deg);
  }
 }
 @keyframes roatet2 {
  0% {
   transform: rotate(0deg) scale(1);
  }
  100% {
   transform: rotate(120deg) scale(0.8);
  }
 }
 
 .events .flexWrapper {
  display: flex;
  gap: 2rem;
 }
 .eventsList {
  display: flex;
  flex-direction: column;
  flex: 0 1 60%;
  position: relative;
 }
 .eventListHeading {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 10px;
 }
 .eventListHeading a {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  color: #0a374a;
  border: 1px solid #0a374a46;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  height: 40px;
  font-weight: 500;
  margin-right: 2rem;
  box-sizing: border-box;
  filter: drop-shadow(2px 2px 2px #0a374a24);
 }
 [dir="ltr"] .eventListHeading a{margin-left: 2rem; margin-right: auto;}
 .eventListContent {
  display: flex;
  flex-direction: column;
  max-height: 400px;
 }
 
 .eventListContent .slick-prev {
  position: absolute;
  top: -4rem;
  left: 4rem;
  border: none;
  border-radius: 0.5rem;
  background: #216c84;
  box-shadow: 0px 6px 12px rgba(26, 122, 154, 0.34);
  color: #fff;
  width: 40px;
  height: 40px;
  border: none;
  transition: all 0.3s;
  cursor: pointer;
  text-align: center;
 }
 [dir="ltr"] .eventListContent .slick-prev{left: auto; right: 4rem;}
 .eventListContent .slick-next {
  position: absolute;
  top: -4rem;
 text-align: center;
  left: 0.5rem;
  border-radius: 0.5rem;
 
  background: #216c84;
  box-shadow: 0px 6px 12px rgba(26, 122, 154, 0.34);
  color: #fff;
  width: 40px;
  height: 40px;
  border: none;
  transition: all 0.3s;
  cursor: pointer;
 }
 [dir="ltr"] .eventListContent .slick-next{left: auto; right: .05rem;}
 
 .eventListContent .slick-next:hover,
 .eventListContent .slick-prev:hover {
  background: #19566a;
 }
 
 .eventListContent .item {
  display: flex !important;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
 
  border-bottom: 1px solid #0a3b502a !important;
 }