@media only screen and (max-width: 7000px) {
  .page-wrapper {
    overflow: hidden;
  }
}

@media only screen and (max-width: 1480px) {
  .preloader .icon {
    background-size: 674px auto;
  }
  .preloader .other-icon {
    background-size: 277px auto;
    margin-left: 24px;
  }
}

@media only screen and (max-width: 1023px) {
  .live-news {
    height: 40px !important;
  }
  .live-news .auto-container {
    padding: 0 10px !important;
  }
  .live-news .rectangle {
    top: -4px;
    left: -40px;
    display: flex !important;
    width: 275px !important;
    gap: 7px;
  }
  .live-news .rectangle .rectangle-img {
    display: block !important;
    left: -10px !important;
  }
  .live-news .rectangle .rectangle-shadow {
    left: -1px;
  }
  .live-news .rectangle .kabinet-selaras {
    font-size: 12px !important;
    font-weight: 500;
    margin-top: 5px;
  }
  .live-news .rectangle .selaras {
    width: 30px;
    height: 30px;
    margin: 10px -35px 0 0;
  }
  .live-news .marquee span {
    line-height: 40px !important;
    font-size: 13px !important;
  }
  .header-upper {
    height: 75px !important;
  }
  .main-header .nav-outer .main-menu,
  .sticky-header {
    display: none !important;
  }
  .main-header .nav-outer .logo-outer img {
    width: 180px !important;
    height: auto !important;
  }
  .main-header .nav-outer .logo-outer {
    margin-top: 0 !important;
    left: 30px !important;
  }
  .nav-outer .mobile-nav-toggler {
    font-size: 28px !important;
    padding: 0 !important;
    top: 68% !important;
    transform: translateY(-50%) !important;
    right: 40px !important;
    display: block;
    margin: 0;
    padding: 24px 0;
  }
  .preloader .icon {
    background-size: 572px auto;
  }
  .preloader .other-icon {
    background-size: 237px auto;
    margin-left: 21px;
  }
  .main-header .header-upper .nav-outer:before {
    display: none;
  }
  .main-header .dropdown > a > i {
    display: none;
  }
  .main-header .nav-outer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-left: 10px;
    width: auto;
    float: none;
  }
  .main-header .nav-outer .logo-outer {
    position: relative;
    left: 0;
    top: 8px;
    width: auto;
    height: auto;
    margin: 0;
    transform: translateX(0);
  }
  .main-header .nav-outer .logo-outer .logo-header {
    transform: translateY(-31%);
  }
  .nav-outer .mobile-nav-toggler {
    position: absolute;
    right: 10px;
    transform: translateY(-58%);
    line-height: 50px;
    display: block;
    margin: 0;
    padding: 24px 0;
  }
  .footer-text {
    display: flex;
    position: relative;
    gap: 60px;
    padding: 20px 20px 0 20px;
  }
  .logo-section {
    margin-left: 0px;
  }
  .section-3 {
    margin-top: -20px;
  }
  .tentang-kami {
    display: flex;
    justify-content: start;
  }
  .authorized-brand {
    margin-top: -10px;
  }
  .logo-address-group {
    gap: 20px;
    margin-bottom: 10px;
  }
}

@media only screen and (max-width: 768px) {
  .live-news {
    height: 35px !important;
  }
  .live-news .auto-container {
    padding: 0 10px !important;
  }
  .live-news .rectangle {
    top: -5.8px;
    left: -60px;
    display: flex !important;
    width: 240px !important;
    gap: 5px;
  }
  .live-news .rectangle .rectangle-img {
    display: block !important;
    left: -10px !important;
  }
  .live-news .rectangle .rectangle-shadow {
    left: -1px;
  }
  .live-news .rectangle .kabinet-selaras {
    font-size: 10px !important;
    font-weight: 500;
  }
  .live-news .rectangle .selaras {
    width: 30px;
    height: 30px;
    margin: 5px -35px 0 0;
  }
  .live-news .marquee span {
    line-height: 35px !important;
    font-size: 12px !important;
  }
  .header-upper {
    height: 65px !important;
  }
  .main-header .nav-outer .logo-outer img {
    width: 130px !important;
    height: auto !important;
  }
  .main-header .nav-outer .logo-outer {
    margin-top: 3px !important;
    left: 0px !important;
  }
  .nav-outer .mobile-nav-toggler {
    font-size: 24px !important;
    padding: 0 !important;
    top: 75% !important;
    transform: translateY(-50%) !important;
    right: 10px !important;
  }
  .preloader .icon {
    background-size: 402px auto;
  }
  .preloader .other-icon {
    background-size: 164px auto;
    margin-left: 14px;
  }
  .back-to-top {
    bottom: 40px;
    right: 30px;
  }
  .button {
    width: 40px;
    height: 40px;
    padding: 8px;
  }
  .button .svg {
    width: 18px;
    height: 18px;
  }
  .button::after {
    display: none !important;
  }
}

@media only screen and (min-width: 768px) {
  .main-menu {
    width: 90%;
  }
  .main-menu .navigation > li > ul,
  .main-menu .navigation > li > ul > li > ul {
    display: block !important;
    visibility: hidden;
    opacity: 0;
  }
  .header-top .live-news {
    position: auto;
  }
}

@media only screen and (max-width: 599px) {
  .main-header .header-top .top-left {
    display: none;
  }
  .main-header .header-top .top-right {
    width: 100%;
    text-align: center;
  }
}

@media only screen and (max-width: 480px) {
  .back-to-top {
    bottom: 30px;
    right: 20px;
  }
}

/* ── LOGO SECTION ── */
.Logo-Section__cloud--left,
.Logo-Section__cloud--right {
  top: 350px;
  bottom: 10px;
}

.Logo-Section {
  justify-content: flex-start;
  padding: 80px 20px 200px;
}

@media (max-width: 960px) {
  .cards-wrapper {
    width: 100%;
    max-width: 640px;
    height: 280px;
  }
}

@media (max-width: 600px) {
  .himtika-section {
    padding: 60px 0;
    overflow: hidden;
  }
  .title {
    font-size: 28px;
    margin-bottom: 40px;
    padding: 0 20px;
  }
  .slider {
    gap: 0;
    overflow: visible;
  }
  .nav {
    font-size: 24px;
    padding: 8px 12px;
  }
  .cards-wrapper {
    width: 100vw;
    max-width: 100vw;
    height: 300px;
    overflow: visible;
  }
  .card {
    width: 180px;
    height: 240px;
  }
  .card-container.active .card-front,
  .card-container.active .card-back {
    border-radius: 28px;
    filter: none !important;
    opacity: 1 !important;
    transition:
      background 0.4s,
      box-shadow 0.4s,
      opacity 0.4s !important;
  }
  .card-container.side.is-left .card {
    transform: scale(0.62) translateX(0);
  }
  .card-container.side.is-right .card {
    transform: scale(0.62) translateX(0);
  }
  .card-container.far.is-left .card {
    transform: scale(0.42) translateX(0);
  }
  .card-container.far.is-right .card {
    transform: scale(0.42) translateX(0);
  }
  .card-container.side {
    opacity: 0.7;
  }
  .card-container.far {
    opacity: 0;
    pointer-events: none;
  }
  .corner {
    width: 30px;
  }
  .top-left {
    top: -20px;
    left: -20px;
  }
  .bottom-right {
    bottom: -20px;
    right: -20px;
  }
  .main-img {
    width: 65px;
  }
  .back-title {
    font-size: 16px !important;
  }
  .back-desc {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  .dots {
    margin-top: 32px;
  }
  .dots span {
    width: 9px;
    height: 9px;
    margin: 0 4px;
  }
  .dots span.active {
    width: 20px;
  }
}

@media (max-width: 400px) {
  .title {
    font-size: 24px;
  }
  .cards-wrapper {
    height: 260px;
  }
  .card {
    width: 155px;
    height: 210px;
  }
  .card-container.side .card {
    transform: scale(0.55);
  }
  .back-title {
    font-size: 14px !important;
  }
  .back-desc {
    font-size: 12px !important;
  }
}