body{
    overflow-x: hidden; 
}
#banner {
    height: 60vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
#banner #banner-images {
    height: 100%;
    position: relative;
    object-fit: cover;
    z-index: -10;
    filter: brightness(0.7) grayscale(0.6);
    animation: banner-change 15s infinite ease-in-out;
    display: flex;
    flex-direction: row;
}
#banner #banner-images img {
    width: 100vw;
    object-fit: cover;
}
@keyframes banner-change{
    0% {
        right: -200vw;
        filter: brightness(0.7) grayscale(0.6);
    }
    20.5% {
        right: -200vw;
        filter: brightness(0.7) grayscale(0.6);
    }
    22.5% {
        right: -200vw;
        filter: brightness(0) grayscale(0.6);
    }
    23% {
        right: -100vw;
        filter: brightness(0) grayscale(0.6);
    }
    25% {
        right: -100vw;
        filter: brightness(0.7) grayscale(0.6);
    }
    45.5% {
        right: -100vw;
        filter: brightness(0.7) grayscale(0.6);
    }
    47.5% {
        right: -100vw;
        filter: brightness(0) grayscale(0.6);
    }
    48% {
        right: 0vw;
        filter: brightness(0) grayscale(0.6);
    }
    50% {
        right: 0vw;
        filter: brightness(0.7) grayscale(0.6);
    }
    70.5% {
        right: 0vw;
        filter: brightness(0.7) grayscale(0.6);
    }
    72.5% {
        right: 0vw;
        filter: brightness(0) grayscale(0.6);
    }
    73% {
        right: 100vw;
        filter: brightness(0) grayscale(0.6);
    }
    75% {
        right: 100vw;
        filter: brightness(0.7) grayscale(0.6);
    }
    95.5% {
        right: 100vw;
        filter: brightness(0.7) grayscale(0.6);
    }
    97.5% {
        right: 100vw;
        filter: brightness(0) grayscale(0.6);
    }
    98% {
        right: 200vw;
        filter: brightness(0) grayscale(0.6);
    }
    100% {
        right: 200vw;
        filter: brightness(0.7) grayscale(0.6);
    }
}
#banner h1 {
    position: absolute;
    font-family: sans-serif;
    font-size: 50px;
    font-weight: bold;
    letter-spacing: 8px;
    /*color: black;*/
    /*color: rgb(230,145,255);*/
    text-shadow: 6px 3px 20px rgb(146, 286, 106);
    animation: color-cycle 5s infinite ease-in-out;
    color: rgb(233, 233, 233);
    margin-top: -14px;
    text-align: center;
    width: 90%;
}
.circle::after { /*adds an rgb background behind the card*/
    --neg-border-width: -5px;
    position: absolute;
    top: var(--neg-border-width); bottom: var(--neg-border-width);
    left: var(--neg-border-width); right: var(--neg-border-width);
    background: linear-gradient(60deg, red, orange, blue, indigo, violet);
    content: ''; /*this is important*/
    z-index: -1;
    border-radius:50%;
    height:210px;
    width:210px;
    /*border-radius: 25px;*/
    box-shadow: 0px 0px 100px 2px red;
    animation: rgb 4s infinite;
    transition: 1s;
    background-size: 200% 200%;
    background-position: 0% 50%;
}
.circle:hover::after{
    animation: rgb 4s infinite, rotate-bg 2s infinite;
    rotate: 15deg;
}
@keyframes rotate-bg{
    0% {
        background-position: 0% 50%;
    }
    50%{
        background-position: 100% 50%;
    }
    100%{
        background-position: 0% 50%;
    }
}

@keyframes rgb {
    0% {box-shadow: 0px 0px 100px 2px red;}
    20% {box-shadow: 0px 0px 100px 2px orange;}
    40% {box-shadow: 0px 0px 100px 2px blue;}
    60% {box-shadow: 0px 0px 100px 2px indigo;}
    80% {box-shadow: 0px 0px 100px 2px violet;}
}
.card-front__heading {
  font-size: 2.4rem;
  margin-top: .25rem;
  text-align: center;
}
.inside-page__heading,
.card-front__text-view {
  font-size: 1.7rem;
  font-weight: 800;
  /*margin-top: .2rem;*/
}
.inside-page__heading--city,
.card-front__text-view--city { color: #ff62b2; }

.inside-page__heading--ski,
.card-front__text-view--ski { color: #2aaac1; }

.inside-page__heading--beach,
.card-front__text-view--beach { color: #fa7f67; }

.inside-page__heading--camping,
.card-front__text-view--camping { color: #00b97c; }
.card-front__tp { color: #fafbfa; }
.card-front__text-price {
  font-size: 1.2rem;
  margin-top: -.2rem;
}
.inside-page__text {
  color: #333;
}
.card-area {
  align-items: center !important;
  
  height: 100%;
  justify-content: space-evenly;
  padding: 1rem;
}
.card-section {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}
.card {
  background-color: rgba(0,0,0, .05);
  box-shadow: -.1rem 1.7rem 6.6rem -3.2rem rgba(0,0,0,0.5);
  height: 15rem;
  position: relative;
  transition: all 1s ease;
  width: 15rem;
}
.card-front {
  background-color: #fafbfa;
  height: 20rem;
  width: 20rem;
  box-shadow: -.1rem 1.7rem 6.6rem -3.2rem rgba(0,0,0,0.5);
}
.card-front__tp {
  align-items: center;
  clip-path: polygon(0 0, 100% 0, 100% 90%, 57% 90%, 50% 100%, 43% 90%, 0 90%);
  display: flex;
  flex-direction: column;
  height: 15rem;
  justify-content: center;
  padding: .75rem;
}
.card-front__tp--city {
  background: linear-gradient(
    to bottom,
    #ff73b9,
    #ff40a1
  );
}
.card-front__tp--ski {
  background: linear-gradient(
    to bottom,
    #47c2d7,
    #279eb2
  );
}
.card-front__tp--beach {
  background: linear-gradient(
    to bottom,
    #fb9b88,
    #f86647
  );
}
.card-front__tp--camping {
  background: linear-gradient(
    to bottom,
    #00db93,
    #00b97d
  );
}
.card-front__bt {
  align-items: center;
  display: flex;
  justify-content: center;
  cursor: pointer;
}
.chalu{
    color: red;
    font-size: 20px;
}
#showdrop2,
#showdrop3,
#showdrop4{
    display: none;
}