@import url(https://db.onlinewebfonts.com/c/e46b475339f550c0e7d552169a8ef2f3?family=Colo-Pro-Black);
:root {
    --color-menu-overlay: #01c8e2;
    --color-menu-text: #000;
    --color-divider: #000000;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}




html, body{
    width: 100%;
    height: 100%;
    background:#EFE9F7;
    font-family: "Colo-Pro-Black";
    overflow-x: hidden;
}
a {
    text-decoration: none;
    color: var(--color-menu-text);
}

i {
    position: relative;
    top: 1px;
}




.london{
    margin-top: 12rem;
}


.slider {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .slider-wrapper {
    width: max-content;
    padding: 0 150px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 100px;
  }
  
  .slide {
    width: 500px;
    height: 500px !important;
    background: gray;
  }
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .marker-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: max-content;
    height: 100vh;
  }
  
  .marker {
    position: relative;
    width: 2px;
    height: 100%;
    background: #000;
  }
  
  .marker:after {
    position: absolute;
    content: "";
    display: block;
    top: 50px;
    left: -20px;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border: 2px solid #000;
    border-radius: 100%;
  }
  
  .active-slide {
    position: absolute;
    top: 60px;
    left: 40px;
    font-family: "PP Supply Sans";
    font-size: 15px;
  }
  

  @media(max-width: 900px) {
  .slider-wrapper {
    padding: 0 20px;
    gap: 30px;
}

.slide {
    width: 250px;
    height: 250px;
}

.marker-wrapper {
    height: 50vh;
}

.marker:after {
    top: 20px;
    left: -15px;
    width: 30px;
    height: 30px;
}

.active-slide {
    top: 25px;
    left: 20px;
    font-size: 12px;
}
}




@media (min-width: 992px) and (max-width: 1199px) {
  .london {
      margin-top: 12rem;
  }

  .slider {
      padding: 0 100px; /* Adjust padding for small desktops */
  }

  .slider-wrapper {
      padding: 0 80px; /* Medium padding for wrapper */
      gap: 80px; /* Medium gap between slides */
  }

  .slide {
      width: 450px; /* Adjust slide width */
      height: 450px; /* Adjust slide height */
  }

  .active-slide {
      font-size: 15px; /* Standard size for active slide */
  }

  .marker:after {
      top: 45px; /* Adjust marker position */
      left: -18px;
      width: 38px; /* Slightly smaller marker */
      height: 38px;
  }
}