/* * HERO */
.hero--wrapper {
  background-color: var(--primary-yellow);
  /*padding-bottom: 8rem;*/
  padding-bottom: 48rem;
}

.get_start_btn {
  background-color: var(--primary-black);
  color: var(--primary-yellow);
}

.get_start_btn:hover {
  background-color: var(--primary-yellow);
  color: var(--primary-black);
  border: 1px solid var(--primary-black);
}

.book_btn {
  background-color: var(--primary-yellow);
  color: var(--primary-black);
}

.book_btn:hover {
  background-color: var(--primary-black);
  color: var(--primary-yellow);
  border: 1px solid var(--primary-yellow);
}

.hero--container {
  background-image: url(../../img/ui/hero-bg-mobile.png);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  height: 416px;
  padding: 0 1.5rem;
}

.hero--details {
  background-color: var(--primary-white);
  max-width: 950px;
  padding: 2rem 2rem;
  /*transform: translateY(28%);*/
  transform: translateY(72%);
}

.hero--heading h1 {
  border-bottom: 3px solid #f00;
  padding-bottom: 1rem;
  width: fit-content;
  font-family: var(--ff-heading);
  color: var(--primary-black);
}

.hero--heading--2 h5 {
  padding-bottom: 1rem;
  font-family: var(--ff-heading);
  color: var(--primary-black);
}

.hero--text p {
  margin-top: 1.5rem;
  font-family: var(--ff-text);
}

/* * ADETIVE & UI  */
.adeUI--wrapper {
  padding: 0 0 3rem 0;
}
.adeUI--inner__header::-webkit-scrollbar {
  display: none;
}

.adeUI--inner__header {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.adeUI--header__heading {
  font-family: var(--ff-heading);
}

.adeUI--inner__header a:nth-of-type(1) {
  min-width: 92px;
}
.adeUI--inner__header a:nth-of-type(2) {
  min-width: 96px;
}
.adeUI--inner__header a:nth-of-type(3) {
  min-width: 120px;
}

.adeUI--inner__header a:hover {
  font-weight: 600;
}

.adeUI--body {
  padding: 2.5rem 1.5rem;
}

.adeUI--body__heading h2 {
  font-family: var(--ff-heading);
  font-size: 3rem;
}

@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}

.adeUI--body__card p:nth-of-type(1) {
  background: linear-gradient(
    90deg,
    #f00 -17.14%,
    #027630 122.26%,
    #016529 122.27%,
    rgba(2, 143, 59, 0) 122.29%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: hue 2s ease infinite;
  font-size: 130px;
  letter-spacing: -1px;
}

/* * LET'S TALK */
.talk--wrapper {
  background: rgb(255, 0, 0);
  background: linear-gradient(
    170deg,
    rgba(255, 0, 0, 1) 0%,
    rgba(255, 0, 0, 1) 50%,
    rgba(0, 0, 0, 1) 50%,
    rgba(0, 0, 0, 1) 100%
  );

  padding: 3rem 0 4rem 0;
}

.talk--heading h2 {
  font-size: 2rem;
  color: var(--primary-white);
  margin-bottom: 2rem;
}

.MG_link {
  color: black;
  font-family: var(--ff-text);
  font-size: 28px;
  padding: 8px 20px;
  border: 2px solid #fccc1b;
  background-color: #fccc1b;
  transition: 300ms ease-in-out;
  width: fit-content;
}

.MG_link:hover {
  background-color: transparent;
  border: 2px solid #fccc1b;
  color: #fccc1b;
}

.MG_link p {
  position: absolute;
  bottom: -17px;
  font-size: 1rem;
  border: 1.3px solid rgba(0, 0, 0, 0.63);
  background-color: #fff;
  padding: 2px 16px;
  transition: 300ms ease-in-out;
}

.MG_link:hover p {
  background-color: black;
  border: 1.3px solid #fccc1b;
  color: #fccc1b;
}

/* * FEATURED WORK */
.featured--wrapper {
  padding: 2rem 1rem 3rem 1rem;
}
.work--heading h2 {
  font-family: var(--ff-heading);
  margin-bottom: 3rem;
}
.black--frame {
  border: 10px solid black;
}
.gallery {
  max-width: 1200px;
  margin: 0 auto;
  column-count: 1;
  font-family: arial;
}

.gallery-item {
  break-inside: avoid;
  margin-bottom: 3rem;
  position: relative;
}

.gallery--hover {
  display: flex;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding-bottom: 1rem;
  padding-right: 1rem;
  opacity: 0;
  transition: opacity 300ms ease-in-out, background-color 300ms ease-in-out;
}

.gallery-item:hover .gallery--hover {
  opacity: 1;
}

.gallery--hover p {
  color: var(--primary-white);
}

.gallery--hover .small-text {
  font-size: 0.8rem;
  margin-bottom: 0;
}

.gallery--hover .big-text {
  font-size: 1.5rem;
}

/* * <======== WORKS ========> */
.works--wrapper {
  background-color: var(--primary-black);
  color: var(--primary-white);
  padding: 3rem 0rem 0 0rem;
}

.works--heading span {
  width: 25px;
  height: 25px;
  background-color: var(--primary-yellow);
}

.works--body {
  padding: 2rem 0rem 0 0;
}

.works--body__text {
  padding: 0 2.5rem;
}

.works--body p {
  font-family: var(--ff-heading);
  font-size: 2rem;
}

.works--body p span {
  color: var(--primary-yellow);
}

/*  */
.button_one {
  font-family: var(--ff-heading);
  font-size: 22px;
  line-height: 27.882px; /* 122.222% */
  letter-spacing: 0.507px;
  background-color: black;
  width: fit-content;
  padding: 0px 0px;
}

.button_one:hover i {
  color: #fccc1b;
}

.button_one.hover_yellow:hover p {
  background-color: #fccc1b;
  color: black;
}

.button_one.new {
  background-color: black;
}

.button_one.new p {
  color: black;
  background-color: white;
  box-shadow: inset 10px 20px 10px -20px rgba(0, 0, 0, 0.35),
    inset 10px -20px 10px -20px rgba(0, 0, 0, 0.35);
  transition: box-shadow 300ms ease-in-out;
}

.button_one.new:hover p {
  box-shadow: none;
}

.button_one.new:hover i {
  color: black;
}

.button_one__icon {
  padding: 0 1rem;
}

.button_one.new i {
  background-color: white;
  border-radius: 50%;
  padding: 0.2rem 0.25rem;
  font-size: 1rem;
}

.button_one.new_one {
  background-color: black;
  border: 3px solid #fccc1b;
}

.button_one.new_one p {
  color: white;
  background-color: black;
  box-shadow: inset 10px 20px 10px -20px rgba(0, 0, 0, 0.35),
    inset 10px -20px 10px -20px rgba(0, 0, 0, 0.35);
  transition: box-shadow 300ms ease-in-out;
}

.button_one.new_one:hover p {
  box-shadow: none;
  background-color: #fccc1b;
  color: black;
}

.button_one.new_one:hover i {
  color: black;
}

.button_one__icon {
  padding: 0 1rem;
}

.button_one.new_one i {
  background-color: white;
  border-radius: 50%;
  padding: 0.2rem 0.25rem;
  font-size: 1rem;
}

.button_one p {
  padding: 8px 20px 8px 20px;
  transition: 250ms ease-in-out;
  color: white;
  border-right: 1px solid white;
}

.button_one i {
  padding: 0 1rem;
  transition: 250ms ease-in-out;
}
/*  */
.works--category {
  padding: 0.6rem 0;
  font-size: 24px;
}
.works--category.one {
  transform: translate(0, 300%);
  transition: 450ms ease-in-out;
}
.works--category.two {
  transform: translate(0, 200%);
  transition: 350ms ease-in-out;
}
.works--category.three {
  transform: translate(0, 100%);
  transition: 250ms ease-in-out;
}

.works--category.one.active {
  transform: translate(0, 0);
}
.works--category.two.active {
  transform: translate(0, 0);
}
.works--category.three.active {
  transform: translate(0, 0);
}

/* *  <======  OUR WORK SPEAKS FOR ITSELF  ======> */
.workSpeak--wrapper {
  padding: 2rem 1rem 4rem 1rem;
}

.workSpeak--header {
  border-right: 8px solid;
}

.workSpeak--header h2 {
  font-family: var(--ff-heading);
}

.workSpeak--header a i {
  color: red;
  margin-top: 4px;
}

.workSpeak--body {
  padding: 3rem 0;
}

.workSpeak--card {
  width: fit-content;
  position: relative;
  border: 10px solid transparent;
  padding: 0.5rem;
}

.workSpeak--card img {
  width: 100%;
  transition: 300ms ease-in-out;
}

.workSpeak--card:hover {
  border-color: black;
}

.workSpeak--card:hover img {
  filter: brightness(50%);
}

.workSpeak--card__content {
  position: absolute;
  opacity: 0;
  transition: 300ms ease-in;
}

.workSpeak--card:hover .workSpeak--card__content {
  opacity: 1;
}

.workSpeak--card__content h3 {
  font-family: var(--ff-heading);
  line-height: 1.4;
}

.workSpeak--card__content p {
  width: 70%;
  font-family: var(--ff-text);
}

@media (min-width: 576px) {
  .hero--wrapper {
    background-color: var(--primary-yellow);
    /*padding-bottom: 6rem;*/
    padding-bottom: 30rem;
  }

  .hero--container {
    background-position: top;
  }

  .talk--heading h2 {
    font-size: 2.5rem;
    margin-bottom: 3rem;
  }

  .works--heading {
    padding: 0 0rem;
  }

  .works--body__text {
    padding: 0 3rem;
  }
}

@media (min-width: 786px) {
  .gallery {
    column-count: 2;
  }

  .gallery-item {
    margin-right: 1rem;
    margin-left: 1rem;
  }
}

@media (min-width: 992px) {
  .hero--details {
    padding: 1.5rem 2.5rem;
  }

  .hero--container {
    background-image: url(../../img/ui/hero-bg.jpg);
  }

  .hero--heading {
    border-bottom: 3px solid red;
  }
  .hero--heading h1 {
    border-bottom: none;
    padding-bottom: 0;
    padding-right: 2rem;
  }

  .hero--text p {
    margin-top: 0;
  }

  /* * ADETIVE & UI */
  .adeUI--body__heading h2 {
    font-size: 2rem;
    text-wrap: nowrap;
  }

  .adeUI--body__card p:nth-of-type(1) {
    font-size: 5rem;
  }

  /* * FEATURED WORK */
  .featured--wrapper {
    padding: 3rem 1rem 5rem 1rem;
  }

  .work--heading h2 {
    margin-bottom: 6rem;
    font-size: 3rem;
  }

  .gallery--hover .small-text {
    font-size: 1.5rem;
    margin-bottom: 0;
  }

  .gallery--hover .big-text {
    font-size: 2.5rem;
  }

  /* * WORKS  */
  .works--wrapper {
    padding: 0;
  }

  .works--body {
    padding: 0;
    position: relative;
  }

  .works--body__text {
    padding: 6rem 0 !important;
  }

  .works--category__container {
    rotate: 270deg;
    width: 100%;
    height: fit-content;

    position: absolute;
    left: calc(-50% + 39 * 3px);
    top: calc(50% - 102px);
  }

  .works--category {
    height: 100%;
    font-size: 2.5rem;
  }

  .works--body__text p {
    font-size: 2rem;
    padding-right: 2rem;
  }

  /*  */
  .button_one {
    font-size: 28px;
    /* padding: 8px 40px; */
  }

  .button_one p {
    padding: 22px 20px 22px 20px;
  }

  .button_one i {
    padding: 0 30px 0 20px;
  }
  /*  */

  .works--category.one {
    transform: translate(0, -100%);
    transition: 450ms ease-in-out;
  }
  .works--category.two {
    transform: translate(0, -200%);
    transition: 350ms ease-in-out;
  }
  .works--category.three {
    transform: translate(0, -300%);
    transition: 250ms ease-in-out;
  }

  .works--category.one.active {
    transform: translate(0, 0);
  }
  .works--category.two.active {
    transform: translate(0, 0);
  }
  .works--category.three.active {
    transform: translate(0, 0);
  }

  /* * OUR WORK SPEAKS FOR ITSELF */
  .workSpeak--wrapper {
    padding: 3rem 1rem 4rem 1rem;
  }
  .workSpeak--header h2 {
    font-size: 3rem;
  }

  .workSpeak--header a {
    font-size: 1.5rem;
  }

  .workSpeak--header {
    border-right: 10px solid;
  }

  /* * LET'S TALK */
  .talk--heading h2 {
    font-size: 3rem;
  }
}

@media (min-width: 1200px) {
  .adeUI--body__heading h2 {
    font-size: 3.5rem;
    text-wrap: nowrap;
  }

  .adeUI--body__card p:nth-of-type(1) {
    font-size: 7rem;
  }
  .adeUI--body__card p:nth-of-type(p) {
    font-size: 1.5rem;
  }

  .workSpeak--wrapper {
    padding: 4rem 1rem 4rem 1rem;
  }
  /* * WORKS */
  .works--body__text {
    padding: 6rem 0 !important;
  }

  .works--body__text p {
    font-size: 3rem;
    padding-right: 3rem;
  }

  .works--body__text {
    padding: 8rem 0 !important;
  }
  .works--category__container {
    left: calc(-50% + 52 * 3px);
    top: calc(50% - 132px);
  }

  .works--category {
    font-size: 3rem;
    padding: 16px 0;
  }
  /* * LET'S TALK */
  .talk--heading h2 {
    font-size: 4rem;
  }
}