:root {
  /* primary putih */
  --primary: #ffffff;
  /* secondary biru */
  --secondary: #004fce;
  /* Ternary kuning */
  --Ternary: FFA500;
}

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
  font-family: "Poppins", sans-serif;
}

/* content - spec start */
.btn-carousel-spec {
  transform: rotate(180deg);
}

.caption-content-spec {
  background-color: var(--secondary);
}

/* content - spec end */

/* footer - spec start */
.button-footer-panduan {
  background-color: var(--secondary);
  color: var(--primary);
}

/* footer - spec end */

/* responsive  */

@media only screen and (min-width: 1920px) {
  /* content responsive */
  .tittle h1 {
    font-size: 80px;
  }

  .img-carousel-banner {
    width: 40%;
  }

  .carousel-item p {
    font-size: 24px;
  }

  .carousel-item p.fw-semibold {
    font-size: 36px;
  }

  .spec {
    padding: 4rem;
  }

  .content-spec-carousel {
    width: 50%;
  }
  .content-spec-carousel svg {
    width: 100px;
    height: 100px;
  }
}

@media only screen and (max-width: 1919px) {
  .content-spec-carousel {
    width: 50%;
  }
  .img-carousel-banner {
    width: 40%;
  }
  .content-spec-carousel svg {
    width: 75px;
    height: 75px;
  }
  .spec {
    padding: 4rem;
  }
  .carousel-item p {
    font-size: 24px;
  }

  .carousel-item p.fw-semibold {
    font-size: 30px;
  }
  .tittle h1 {
    font-size: 64px;
  }
}
@media only screen and (max-width: 1800px) {
  .content-spec-carousel {
    width: 50%;
  }
  .img-carousel-banner {
    width: 40%;
  }
  .content-spec-carousel svg {
    width: 75px;
    height: 75px;
  }
  .spec {
    padding: 4rem;
  }
  .carousel-item p {
    font-size: 24px;
  }

  .carousel-item p.fw-semibold {
    font-size: 30px;
  }
  .tittle h1 {
    font-size: 64px;
  }
}
@media only screen and (max-width: 1600px) {
  .content-spec-carousel {
    width: 50%;
  }
  .img-carousel-banner {
    width: 40%;
  }
  .content-spec-carousel svg {
    width: 75px;
    height: 75px;
  }
  .spec {
    padding: 4rem;
  }
  .carousel-item p {
    font-size: 24px;
  }

  .carousel-item p.fw-semibold {
    font-size: 30px;
  }
  .tittle h1 {
    font-size: 64px;
  }
}
@media only screen and (max-width: 1400px) {
  .content-spec-carousel {
    width: 50%;
  }
  .img-carousel-banner {
    width: 40%;
  }
  .content-spec-carousel svg {
    width: 75px;
    height: 75px;
  }
  .spec {
    padding: 4rem;
  }
  .carousel-item p {
    font-size: 24px;
  }

  .carousel-item p.fw-semibold {
    font-size: 30px;
  }
  .tittle h1 {
    font-size: 64px;
  }
}
@media only screen and (max-width: 1366px) {
  /* content responsive */
  .tittle h1 {
    font-size: 64px;
  }

  .content-spec-carousel svg {
    width: 75px;
    height: 75px;
  }

  .img-carousel-banner {
    width: 40%;
  }

  .carousel-item p {
    font-size: 24px;
  }

  .carousel-item p.fw-semibold {
    font-size: 20px;
  }

  .spec {
    padding: 2rem;
  }

  .content-spec-carousel {
    width: 50%;
  }
}

@media only screen and (max-width: 1024px) {
  /* content responsive */
  .tittle h1 {
    font-size: 32px;
  }

  .content-spec {
    margin: 0 2rem;
  }

  .carousel-item p {
    font-size: 12px;
  }

  .carousel-item p.fw-semibold {
    font-size: 16px;
  }

  .content-spec-carousel svg {
    width: 50px;
  }

  .content-spec-carousel {
    width: 50%;
  }
}

@media only screen and (max-width: 780px) {
  /* content responsive */
  .tittle h1 {
    font-size: 32px;
    margin-top: 15%;
  }

  .img-carousel-banner {
    display: none;
  }

  .content-spec {
    margin: 0 2rem;
  }

  .carousel-item p {
    font-size: 18px;
  }

  .carousel-item p.fw-semibold {
    font-size: 16px;
  }

  .content-spec-carousel svg {
    width: 50px;
  }

  .content-spec-carousel {
    width: 100%;
  }
}