.section-hero {

  padding-top: 0;

  position: relative;

}

.carousel-container {

  width: 100%;

  position: relative;

  overflow: hidden;

}

.carousel {

  display: flex;

  transition: transform 0.5s ease-in-out;

  height: 100%;

  position: relative;

}

.carousel-slide {

  min-width: 100%;

  position: relative;

}

.carousel-slide img {

  width: 100%;

  height: 60rem;

  object-fit: cover;

}

.carousel-content {

  position: absolute;

  top: 50%;

  left: 15%;

  transform: translateY(-50%);

  text-align: left;

  color: #31230c;

  z-index: 2;

  max-width: 60rem;

}

.carousel-content h2 {

  font-size: 5.2rem;

  line-height: 6.2rem;

  margin-bottom: 1rem;

  font-weight: 800;

}

.carousel-content h3 {

  font-size: 3rem;

  line-height: 4rem;

  margin-bottom: 1rem;

  font-weight: 800;

}

.carousel-content p {

  font-size: 1.5rem;

}

.doodle-circle {

  width: 35% !important;

  height: auto !important;

  position: absolute;

  top: 55%;

  left: -2.5%;

}

.carousel-button {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  background: rgba(255, 255, 255, 0.7);

  border: 0;

  width: 5rem;

  height: 5rem;

  border-radius: 50%;

  cursor: pointer;

  z-index: 3;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: background-color 0.3s;

}

.carousel-button:hover {

  background: rgba(255, 255, 255, 0.9);

}

.carousel-button.prev {

  left: 2rem;

}

.carousel-button.next {

  right: 2rem;

}

.carousel-button svg {

  width: 2.4rem;

  height: 2.4rem;

  fill: #333;

}

.hero-box-wrapper {

  z-index: 5;

  left: 50%;

  top: 70%;

  position: absolute;

  padding: 1.6rem;

  width: 80%;

  transform: translate(-50%, -20%);

  gap: 6.4rem;

}

.hero-box {

  background-color: var(--main-orange-500);

  padding: 3.2rem 1.6rem;

  border-radius: 12px;

}

.hero-box-icon {

  color: #ffffffcc;

  width: 3.2rem;

  height: 3.2rem;

  font-weight: 900;

}

.hero-box-list {

  list-style: none;

  display: flex;

  flex-direction: column;

  gap: 0.8rem;

  margin-top: 0.8rem;

}

.hero-box-list-item {

  display: flex;

  gap: 0.4rem;

  align-items: center;

  color: #ffffffcc;

}

.section-usluge {

  margin-top: 12.8rem;

}

.service-grid {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  gap: 3.6rem;

  row-gap: 2rem;

}

.service-card {

  padding: 2rem;

  margin: 0 auto;

  transition: all 300ms;

  border-radius: 12px;

}

.service-card:hover {

  transform: scale(1.1);

}

.service-category {

  color: var(--accent-blue);

  font-size: 1.6rem;

}

.service-title {

  font-size: 2.4rem;

}

.service-description {

  font-size: 1.6rem;

}

.section-team {

  background-color: var(--main-orange-200);

  background: url("../../assets/doodle-sqrl.svg"), var(--main-orange-200);

  background-repeat: no-repeat;

  background-position: center;

  background-size: cover;

}

.section-team .blue-text {

  font-size: 3rem;

  font-weight: 700;

  line-height: 3rem;

}

.section-team .wrapper:nth-child(2) {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 1.6rem;

}

.section-team img {

  border-radius: 12px;

  width: 100%;

}

.team-link-img {

  transition: all 300ms;

}

.team-link-img:hover {

  transform: scale(1.1);

}

.section-o-nama .o-nama-img {

  width: 100%;

}

.doodle-circle-2 {

  top: 58%;

  left: -3%;

  width: 29% !important;

}

.doodle-circle-3 {

  width: 32% !important;

  left: 38% !important;

}

.doodle-circle-4 {

  top: 37%;

  left: 50%;

  width: 42% !important;

}

@media (max-width: 75em) {

  .carousel-slide img {

    height: 50rem;

  }

  .carousel-content {

    left: 10%;

    max-width: 50rem;

  }

  .carousel-content h2 {

    font-size: 4.4rem;

  }

  .hero-box-wrapper {

    gap: 1.6rem;

  }

  .section-usluge {

    padding-top: 22.4rem;

  }

  .section-team {

    background-size: 120% 120%;

  }

  .doodle-circle-2 {

    top: 62% !important;

  }

  .doodle-circle-3 {

    top: 60% !important;

    left: 57% !important;

  }

  .doodle-circle-4 {

    top: 39%;

    left: 50%;

    width: 44% !important;

  }

}

@media (max-width: 59em) {

  .section-o-nama .grid--2-cols {

    grid-template-columns: 1fr;

    margin: 0 auto;

  }

  .section-o-nama .button {

    display: block;

    margin: 0 auto;

    width: max-content;

  }

  .carousel-content h2 {

    font-size: 3.6rem;

    line-height: 4.4rem;

  }

  .carousel-slide img {

    height: 40rem;

  }

  .carousel-content {

    max-width: 45rem;

  }

  .doodle-circle {

    width: 32% !important;

  }

  .service-grid {

    grid-template-columns: 1fr 1fr;

  }

  .service-card:last-child {

    grid-column: 1/-1;

  }

  .hero-box-wrapper {

    width: 95%;

    top: 90%;

  }

  .hero-box:last-child {

    grid-column: span 2;

  }

  .section-usluge {

    margin-top: 35rem;

  }

  .section-team {

    background-size: 140% 140%;

  }

  .paragraph {

    font-size: 1.6rem;

  }

  .section-team .wrapper {

    align-items: center;

  }

  .doodle-circle-2 {

    top: 56% !important;

    left: -3% !important;

    width: 27% !important;

  }

  .doodle-circle-3 {

    top: 54% !important;

    left: 34.5% !important;

    width: 30% !important;

  }

  .doodle-circle-4 {

    top: 50%;

    width: 40% !important;

    left: -2%;

  }

}

@media (max-width: 44em) {

  .carousel-content h2 {

    font-size: 3rem;

    line-height: 3.6rem;

  }

  .carousel-button {

    width: 4rem;

    height: 4rem;

  }

  .carousel-slide img {

    height: 35rem;

  }

  .carousel-content {

    max-width: 35rem;

  }

  .service-grid {

    grid-template-columns: 1fr;

  }

  .hero-box-wrapper {

    top: 90%;

    grid-template-columns: repeat(2, 1fr);

  }

  .section-usluge {

    margin-top: 40rem;

  }

  .section-team .container {

    grid-template-columns: 1fr;

  }

  .section-team .wrapper img {

    display: none !important;

  }

  .doodle-circle-3 {

    left: 37.5% !important;

  }

  .doodle-circle-4 {

    top: 34%;

    width: 45% !important;

    left: 48%;

  }

}

@media (max-width: 34em) {

  .section-usluge {

    margin-top: 70rem;

  }

  .hero-box:last-child {

    grid-column: span 1;

  }

  .hero-box-wrapper {

    top: 110%;

  }

  .carousel-content h2 {

    font-size: 2.4rem;

    line-height: 3rem;

  }

  .carousel-content p {

    font-size: 1rem;

  }

  .carousel-button {

    width: 3.5rem;

    height: 3.5rem;

  }

  .carousel-slide img {

    height: 30rem;

  }

  .carousel-content {

    left: 15%;

    max-width: 28rem;

  }

  .section-team {

    background-size: 240% 240%;

  }

}