/* Slider banners */
#colorlib-hero {
  /* height: 340px; */
  overflow: hidden;
  height: auto;
  background: #fff url("") no-repeat center center;
  width: 100%;
  float: left;
  z-index: 0;
}

#colorlib-hero .btn {
  font-size: 24px;
}

#colorlib-hero .btn.btn-primary {
  padding: 14px 30px !important;
}

#colorlib-hero .flexslider {
  border: none;
  z-index: 1;
  margin-bottom: 2em;
}

#colorlib-hero .flexslider .slides {
  position: relative;
  overflow: hidden;
  margin-top: 60px;
  padding-bottom: 60px;
}

#colorlib-hero .flexslider .slides li {
  position: relative;
}

#colorlib-hero .flexslider .slides li .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#colorlib-hero .flexslider .flex-control-nav {
  bottom: -2em;
  z-index: 1000;
  width: 0 auto;
}

#colorlib-hero .flexslider .flex-control-nav li a {
  background: rgba(22, 177, 195, 0.314);
  -webkit-box-shadow: none;
  box-shadow: none;
  width: 12px;
  height: 12px;
  cursor: pointer;
}

#colorlib-hero .flexslider .flex-control-nav li a.flex-active {
  cursor: pointer;
  background: transparent;
  background: rgb(231, 167, 157);
}

/* #colorlib-hero .flexslider .flex-direction-nav {
      display: none; } */
#colorlib-hero .flexslider .flex-direction-nav a {
  top: 45%;
}

#colorlib-hero .flexslider .flex-direction-nav a:before {
  font-family: "Ionicons";
  content: "\F129";
}

#colorlib-hero .flexslider .flex-direction-nav a:before {
  font-family: "Ionicons";
  line-height: 1;
}

#colorlib-hero .flexslider .flex-direction-nav .flex-nav-prev a:before {
  content: "\F129";
}

#colorlib-hero .flexslider .flex-direction-nav .flex-nav-next a::before {
  content: "\F12B";
}

.flexslider .flex-direction-nav .flex-prev {
  opacity: 0.7;
  left: 10px;
}

.flexslider .flex-direction-nav .flex-next {
  opacity: 0.7;
  right: 10px;
}

#colorlib-hero .flexslider .slider-text {
  display: table;
  opacity: 0;
  height: 600px;
  z-index: 9;
}

#colorlib-hero .flexslider .slider-text>.slider-text-inner {
  display: table-cell;
  vertical-align: middle;
}

@media (max-width: 767.98px) {
  #colorlib-hero .flexslider .slider-text>.slider-text-inner {
    text-align: center;
  }
}

#colorlib-hero .flexslider .slider-text>.slider-text-inner .desc {
  display: inline-block;
  position: relative;
  z-index: 0;
}

#colorlib-hero .flexslider .slider-text>.slider-text-inner h1,
#colorlib-hero .flexslider .slider-text>.slider-text-inner h2 {
  margin: 0;
  padding: 0;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.2;
}

#colorlib-hero .flexslider .slider-text>.slider-text-inner h1 {
  color: #fff;
}

#colorlib-hero .flexslider .slider-text>.slider-text-inner .head-1 {
  font-weight: 700;
  font-size: 60px;
  margin-bottom: 0px;
}

#colorlib-hero .flexslider .slider-text>.slider-text-inner .head-2 {
  font-size: 30px;
  font-weight: 500;
  margin-bottom: 0px;
  letter-spacing: 5px;
}

#colorlib-hero .flexslider .slider-text>.slider-text-inner .head-3 {
  font-size: 50px;
  font-weight: 100;
  margin-bottom: 0px;
}

#colorlib-hero .flexslider .slider-text>.slider-text-inner .category {
  margin-bottom: 30px;
}

#colorlib-hero .flexslider .slider-text>.slider-text-inner .category span {
  font-weight: 100;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.8);
}

#colorlib-hero .flexslider .slider-text>.slider-text-inner .btn {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
  padding: 20px 30px !important;
  border: none;
}

#colorlib-hero .flexslider .slider-text>.slider-text-inner .btn.btn-learn {
  background: #616161;
  color: #fff;
}

#colorlib-hero .flexslider .slider-text>.slider-text-inner .btn:hover {
  background: var(--grey-color) !important;
}

@media (max-width: 767.98px) {
  #colorlib-hero .flexslider .slider-text>.slider-text-inner .btn {
    width: 100%;
  }
}

/* Slider banners */

/* Poplular giftcard scroll */
.popular-giftcard--wrapper {
  width: calc(100vw - 1rem);
}

/* Poplular giftcard scroll */

/* Icon block */
/* Home page */
.personalisation-icon {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  justify-content: center;
}

.personalisation-icon__item {
  width: 180px;
  display: grid;
  justify-items: center;
  border: 2px solid rgba(204, 204, 204, 0.46);
  border-radius: 7px;
  padding: 0.5rem;
  margin: 0.75rem;
}

.icon__wrapper {
  width: 100px;
  height: 100px;
  margin: 1rem 0px;
  line-height: 100px;
  text-align: center;
}

.icon__description {
  width: 100%;
  height: 50px;
}

.icon__description p {
  font-size: 14px;
  text-align: center;
}

@media (max-width: 500px) {
  .personalisation-icon__item {
    width: 100%;
    margin: 2rem;
  }
}

/* Icon block */

/* Popular gift card slider css */
.app-popular-items {
  margin: 1.5rem auto 2.5rem;
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  width: 100%;
}

@media (max-width: 1100px) {
  .app-popular-items {
    width: 100%;
  }
}

::-webkit-scrollbar {
  display: none;
}

.scrolling-block__div-with-arrows {
  display: grid;
  gap: 0.5em;
  -webkit-box-align: center;
  align-items: center;
}

.scrolling-block__wrapper {
  overflow-y: hidden;
  overflow-x: scroll;
  scrollbar-width: thin;
  scrollbar-color: white white;
  padding: 5px;
  -webkit-overflow-scrolling: touch;
}

.scrolling-block__wrapper ::-webkit-scrollbar {
  width: 0rem;
  height: 0;
  right: 0rem;
}

.scrolling-block__wrapper ::-webkit-scrollbar-track {
  border: 0px solid white;
  background-color: white;
  opacity: 0;
  border-radius: 0px;
  margin: 0rem;
}

.scrolling-block__wrapper ::-webkit-scrollbar-thumb {
  background-color: white;
  border-radius: 0px;
}

.scrolling-item-holder__div {
  width: auto;
  display: flex;
  gap: 1rem;
}

.popular-item {
  width: 200px;
  height: auto;
  padding-right: 0.5em;
  cursor: pointer;
  color: transparent;
}

.popular-item:not(:last-of-type) {
  margin-left: 1rem;
}

.popular-item img {
  width: 200px;
  height: auto;
  user-select: none;
  border-radius: 5px;
  pointer-events: none;
  filter: drop-shadow(rgba(50, 50, 0, 0.5) -1px 4px 3px);
}

/* Download App banner & egiftit business banner */

.homepage-banners {
  margin: 3rem auto 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  gap: 3rem;
  width: 1100px;
  padding: 0px 1rem;
}

.download-app-banner {
  border-radius: 7px;
  border: 2px solid rgba(204, 204, 204, 0.46);
  padding-left: 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 300px;
}

.promo-image {
  background-size: 225px 400px;
  background-position: center top;
  background-repeat: no-repeat;
}

.download-app__button_block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

.download-app__button_block img {
  max-width: 100%;
  height: auto;
}

.button_block__item1 {
  display: grid;
  -webkit-box-align: center;
  align-items: center;
  width: 120px;
}

.button_block__item2 {
  display: grid;
  -webkit-box-align: center;
  align-items: center;
  width: 150px;
}

.text-block-download {
  display: grid;
  gap: 1rem;
  padding-top: 1rem;
}

.text-block-download p {
  text-align: left;
}

.egiftit-business-banner {
  border-radius: 7px;
  border: 2px solid rgba(204, 204, 204, 0.46);
  padding: 1rem 1.5rem;
  height: 300px;
}

.text-block-business {
  display: grid;
  gap: 1rem;
}

.text-block-business p {
  text-align: left;
}

.button-block__wrapper {
  width: 100%;
  height: 100px;
  display: grid;
  -webkit-box-align: center;
  place-items: center start;
}

@media (max-width: 1100px) {
  .homepage-banners {
    width: 650px;
    grid-template-columns: 1fr;
  }

  .egiftit-business-banner {
    height: auto;
  }
}

@media (max-width: 768px) {
  .homepage-banners {
    width: 100%;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 500px) {
  .download-app-banner {
    grid-template-columns: 1fr;
    height: auto;
    padding-bottom: 1rem;
  }

  .promo-image {
    display: none;
  }
}