@media (min-width: 768px) {
  .fs-huge {
    font-size: 50px !important;
  }

  .fs-giant {
    font-size: 57.5px !important;
  }

  .pt-md-40px {
    padding-top: 40px !important;
  }

  .mb-8 {
    margin-bottom: 10rem !important;
  }

  .pb-7 {
    padding-bottom: 7.5rem !important;
  }

  .py-8 {
    padding-top: 10rem !important;
    padding-bottom: 10rem !important;
  }

  .pt-8 {
    padding-top: 10rem !important;
  }

  .pb-8 {
    padding-bottom: 10rem !important;
  }

  .pt-9 {
    padding-top: 11.5rem !important;
  }

  .mb-9 {
    margin-bottom: 11.5rem !important;
  }

  .mb-10 {
    margin-bottom: 13rem !important;
  }
  .gap-md-0 {
    gap: 0;
  }
  .lh-md-base {
    line-height: 1.5 !important;
  }

  .md-large {
    font-size: 1.25rem !important;
  }

  .container-blue {
    background: linear-gradient(90deg, #182a61 12.5%, #1e4094 73.5%);
  }

  #section2 {
    padding-top: 260px;
    padding-bottom: 260px;
  }

  #section3 {
    padding-top: 260px;
  }

  #section4 {
    padding-top: 200px;
    padding-bottom: 200px;
  }

  #section5 {
    padding-top: 200px;
    padding-bottom: 200px;
  }

  #mainCarousel .carousel-img-container::before {
    display: none;
  }

  #mainCarousel .carousel-item {
    display: block;
    background: var(--desktop-img) center center / cover no-repeat transparent;
    position: relative;
    padding-top: 90px;
  }

  #mainCarousel .carousel-item .carousel-item-content {
    width: 90%;
    padding-top: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  #page-your-journey #mainCarousel .carousel-item .carousel-item-content {
    width: 90%;
    padding-top: 0;
    position: absolute;
    left: 50%;
    top: calc(50% + (90px / 2 - 32px / 2));
    transform: translate(-50%, -50%);
  }

  #mainCarousel .carousel-item-content h1 {
    font-size: 4.5rem;
    line-height: 4.725rem;
  }

  #mainCarousel .carousel-item-content p {
    font-size: 1.25rem;
    padding-left: 1.25rem;
  }

  #mainCarousel .carousel-item-content .small {
    font-size: 80%;
    max-width: unset;
    padding-left: unset;
    font-weight: unset;
  }
  #mainCarousel .carousel-item-content .small::after {
    display: none;
  }

  #page-your-journey #mainCarousel .carousel-item-content h1 {
    font-size: 4rem;
    line-height: 4.25rem;
  }

  #page-your-journey #mainCarousel .carousel-item-content p {
    font-size: 1rem;
    padding-left: 1.25rem;
  }

  #mainCarousel .carousel-item-content p::after {
    content: "";
    display: block;
    width: 1px;
    height: 86%;
    border-left: 1px solid #fff;
    position: absolute;
    left: 0;
    top: 7%;
  }

  .treatment-item.alt-bg {
    background: linear-gradient(90deg, #182a61 -103.94%, #1e4094 100%);
  }

  blockquote.blockquote {
    font-size: 2.5rem;
  }

  .blockquote-footer {
    font-size: 1.75rem;
  }

  #faq {
    padding-top: 10rem;
  }

  .modal-contact .modal-body {
    padding: 2.75rem 2.75rem 1.25rem;
  }

  .trial-item::before {
    padding-top: 56.25%;
  }

  .trial-item .inner-content {
    padding: 2rem;
  }

  #poiGlide .glide__slide::before {
    padding-top: 64.8%;
  }

  #trialGlide .trial-item [data-glide-el="controls[controls]"],
  #poiGlide .trial-item [data-glide-el="controls[controls]"] {
    pointer-events: none;
    display: block;
    visibility: hidden;
  }

  #trialGlide > [data-glide-el="controls[controls]"],
  #poiGlide > [data-glide-el="controls[controls]"] {
    display: block;
    position: absolute;
    right: 2rem;
    bottom: 2rem;
  }

  #timelineContainer {
    width: 100%;
    height: 100vh;
  }

  #timeline {
    --padding-center: 2rem;
    max-width: 1140px;
    height: 100vh;
    padding: 0;
    position: absolute;
  }

  #timeline .timeline-item {
    display: flex;
    align-items: center;
    height: 100vh;
    max-height: 200px;
    /* padding: 0 0 6rem; */
    padding: 0;
    position: relative;
  }

  #timeline .timeline-item-img::before {
    display: none;
  }

  #timeline .timeline-item img {
    height: auto;
    max-height: 80vh;
    position: static;
  }

  #timeline .timeline-item-step {
    margin: 0 0 0.5rem;
  }

  #timeline .timeline-item .timeline-item-img {
    flex: 0 0 50%;
    margin: 0;
  }

  #timeline .timeline-item .timeline-item-content {
    flex: 0 0 50%;
  }

  #timeline .timeline-item:nth-child(odd) .timeline-item-dot {
    left: auto;
    right: calc(var(--padding-center) * -1);
  }

  #timeline .timeline-item:nth-child(odd) .timeline-item-step::before {
    left: auto;
    right: calc(var(--padding-center) * -1 - 1px);
  }

  #timeline .timeline-item:nth-child(odd) .timeline-item-img {
    text-align: left;
    order: 3;
    padding: 0 0 0 var(--padding-center);
  }

  #timeline .timeline-item:nth-child(odd) .timeline-item-content {
    text-align: right;
    order: 1;
    padding: 0 var(--padding-center) 0 0;
  }

  #timeline .timeline-item:nth-child(even) .timeline-item-dot {
    left: calc(var(--padding-center) * -1);
    right: auto;
  }

  #timeline .timeline-item:nth-child(even) .timeline-item-step::before {
    left: calc(var(--padding-center) * -1 - 1px);
  }

  #timeline .timeline-item:nth-child(even) .timeline-item-img {
    text-align: right;
    padding: 0 var(--padding-center) 0 0;
  }

  #timeline .timeline-item:nth-child(even) .timeline-item-content {
    text-align: left;
    padding: 0 0 0 var(--padding-center);
  }
}

@media (min-width: 768px) and (min-resolution: 2x) {
  #mainCarousel .carousel-item {
    background: var(--desktop-img-2x) center center / cover no-repeat
      transparent;
  }
}

@media (min-width: 992px) {
  #section1 {
    --topGap: 101px;
  }

  #welcomeContainer {
    padding-bottom: 0;
    --img-ratio: 100 / 72.5;
    display: flex;
    align-items: center;
  }

  #welcomeContainer::before {
    /* background: center center / cover no-repeat
      url("/images/default-source/coe/onco/welcome_v2.jpg"); */
    --bg-img: url("https://media.ffycdn.net/eu/ihh-healthcare-berhad/jbcP58tcskemS1GByWQ4.png");
    aspect-ratio: unset;
    position: absolute;
    inset: 0;
  }

  #welcomeContainer .inner-content {
    position: relative;
    width: 55%;
    margin-top: 0;
  }

  #welcomeContainer .fs-giant {
    font-size: 52.5px !important;
  }

  blockquote.blockquote {
    font-size: 2.75rem;
  }

  .blockquote-footer {
    font-size: 2rem;
  }

  .treatment-item {
    color: #fff;
    text-align: center;
    flex-direction: column;
  }

  #contactUsDetails {
    max-width: unset;
  }

  .right-lg-fade-out {
    position: relative;
  }

  .right-lg-fade-out:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      rgba(247, 244, 237, 0) 12.5%,
      #f7f4ed 85%
    );
    position: absolute;
    left: 0;
    top: 0;
  }

  .left-lg-fade-out {
    position: relative;
  }

  .left-lg-fade-out:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      270deg,
      rgba(247, 244, 237, 0) 12.5%,
      #f7f4ed 85%
    );
    position: absolute;
    left: 0;
    top: 0;
  }

  #gmap-wrapper::before {
    padding-top: 49.47916667%;
  }

  .card-popup-info {
    --bs-card-spacer-x: 2rem;
    max-width: 420px;
    margin: 0;
    position: absolute;
    left: 75%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  #stickyDirectory {
    position: fixed;
    margin-top: unset;
    height: auto;
    left: auto;
    z-index: 5;
    opacity: 0;
    right: 55px;
    bottom: 80px;
    transform: translateY(100px);
    transition: all 0.4s ease-out;
    width: auto;
    padding-top: 0;
  }

  #stickyDirectory.visible {
    opacity: 1;
    transform: translateY(0);
  }

  #stickyDirectory.expanded ul {
    padding-right: 0;
  }

  #stickyDirectory.expanded button {
    --arrow-width: 100%;
    position: static;
    margin-top: 0.625rem;
  }

  #stickyDirectory .content-wrapper {
    position: relative;
    left: unset;
    right: unset;
    text-align: center;
    padding: 0.375rem var(--side-spacing);
    transition: background-color 0.4s ease-in;
  }

  #stickyDirectory:not(.expanded) .active {
    transition: color 0.4s ease-in;
  }
  #stickyDirectory:not(.expanded) .active::after {
    content: "\f077";
  }
}

@media (min-width: 1200px) {
  .fs-1 {
    font-size: 2.5rem;
  }
  .fs-2 {
    font-size: 2rem;
  }
  .fs-3 {
    font-size: 1.75rem;
  }
  .fs-huge {
    font-size: 55px !important;
  }

  .fs-giant {
    font-size: 60px !important;
  }

  #mainCarousel .carousel-item-content h2 {
    font-size: 5rem;
    line-height: 5.25rem;
  }
  #welcomeContainer {
    --img-ratio: 100 / 60.9375;
  }

  .preparation-item .card-content {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .preparation-item .card .card-header h3 {
    font-size: 1.25rem;
  }
}

@media (min-width: 1400px) {
  html,
  body {
    font-size: 20px;
  }
  .main-header {
    font-family: "DMSans-Regular", sans-serif;
    --base-size: calc(0.8 * 1rem);
    font-size: var(--base-size);
  }
  .header-top a {
    font-size: 0.9375em;
  }
  .main-header .dropdown-item {
    font-size: 1em;
    padding: calc(0.5 * var(--base-size)) 0;
  }
  .header-top {
    padding: 0.75em 0;
  }
  .language-selector {
    padding-left: 1.75em;
  }
  #langauageSelector {
    font-size: 0.8rem;
    padding: 0.375em 0.75em 0.375em 0.375em;
  }

  .selected-language:before {
    margin: 0.4em 0.5em 0 0;
  }
  .page-language-selector .dropdown-menu {
    font-size: 1em;
    padding: 0.5em 1.125em;
  }
  .sec-nav a {
    padding: calc(0.25 * var(--base-size)) calc(1.5 * var(--base-size));
  }
  .desktop-only:not(.mobile-only) .dropdown-menu {
    font-size: 0.75em;
    padding: calc(0.25 * var(--base-size)) var(--base-size)
      calc(1.25 * var(--base-size));
  }
  .header-top .social-media .navbar-nav {
    padding: 0 1em;
  }
  .header-top .social-media .dropdown-menu {
    padding: calc(0.5 * var(--base-size));
    padding-right: var(--base-size);
  }
  .header-top .social-media .dropdown-item {
    font-size: calc(0.9375 * var(--base-size));
  }
  .header-top .social-media .fa-whatsapp {
    font-size: 1.375em;
    padding: calc(0.5 * var(--base-size));
  }
  .header-top .social-media .nav-item.dropdown .fa-phone {
    font-size: 1.25em !important;
  }
  .header-top .nav-item > .fa-phone {
    padding: calc(0.563 * var(--base-size));
  }
  .search {
    padding: 0 1em 0 2em;
  }
  span.gbl-searchbox-textcontrol input.custom-input {
    font-size: var(--base-size);
  }
  span.gbl-searchbox-textcontrol .search-btn {
    font-size: calc(1.1 * var(--base-size));
    padding: calc(0.25 * var(--base-size)) calc(0.5 * var(--base-size));
  }
  span.gbl-searchbox-textcontrol .custom-clear {
    font-size: calc(1.6 * var(--base-size));
    right: calc(3 * var(--base-size)) !important;
  }
  .header-bottom {
    padding: 1.625em 0 1.5em;
  }
  .main-header .dropdown-menu > ul {
    padding: 0.8rem 0.8rem 0.2rem;
    margin: 0.6rem 0;
  }
  .main-header .dropdown-menu > ul span {
    font-size: 0.95rem;
  }
  .main-menu .nav-item.dropdown > .nav-link.dropdown-toggle {
    font-size: 0.875em !important;
    padding: calc(0.25 * var(--base-size)) var(--base-size) !important;
  }
  .dropdown-menu > ul > li > a:not(.icon)::after {
    right: calc(2 * var(--base-size));
  }
  .search-box-container {
    padding: 0.6rem 0;
  }
  .search-box-container .ui-autocomplete .ui-menu-item {
    font-size: 0.9rem;
  }
  .search-box-container .ui-autocomplete .selection-suggest {
    font-size: 0.64rem;
  }
  .search-box-container .ui-autocomplete .selection-suggest a {
    font-size: 0.8rem;
  }
  .search-box-container .ui-autocomplete .ui-menu-item .selection-text {
    padding: 0.8rem;
  }
  .search-box-container
    .ui-autocomplete
    .ui-menu-item
    .selection-text
    .main-tags
    .tag-item {
    font-size: 0.6rem;
    padding: 0.3rem 0.4rem;
    margin-top: 0.4rem;
  }
  .footer-top,
  .footer-top .quick-links ul li a,
  .footer-top .primary_btn {
    font-size: 0.9rem;
  }
  .footer-top .quick-links ul li {
    margin-bottom: 1.2rem;
  }
  .footer-top h5 {
    font-size: 1.3rem;
  }
  .footer-top .primary_btn {
    padding: 0.4rem 1.4rem;
    margin: 0.4rem 0;
  }
  .footer-bottom .copyright p,
  .footer-bottom a {
    font-size: 0.6rem;
  }
  .footer-bottom .footer-links ul li:not(:last-child) {
    padding-right: 1.6rem;
  }
  .fs-huge {
    font-size: 65px !important;
  }

  .fs-giant {
    font-size: 72px !important;
  }

  /* #mainCarousel .carousel-item-content p {
        font-size: 1.4rem;
    } */

  /* #page-your-journey #mainCarousel .carousel-item .carousel-item-content {
        max-width: 1200px;
    } */

  .planning-checklist li {
    font-size: 0.9rem;
  }

  .card-popup-info {
    max-width: 520px;
  }

  .card-popup-info .eta {
    line-height: 30px;
  }

  .preparation-item .card .card-header h3 {
    font-size: 1.2rem;
  }
  #stickyDirectory {
    font-size: 18px;
  }
}

@media (min-width: 1600px) {
  #page-your-journey #mainCarousel .carousel-item-content h1 {
    font-size: 4.5rem;
    line-height: 4.725rem;
  }

  #page-your-journey #mainCarousel .carousel-item-content p {
    font-size: 1.25rem;
    padding-left: 1.25rem;
  }

  .preparation-item .card-content {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .preparation-item .card .card-header h3 {
    font-size: 1.375rem;
  }
}

@media only screen and (orientation: landscape) and (max-device-width: 660px),
  (max-height: 600px) {
  #mainCarousel {
    height: auto;
    position: relative;
  }

  #mainCarousel .carousel-inner {
    height: auto;
  }

  #mainCarousel .carousel-item {
    padding-bottom: 3rem;
  }

  #page-your-journey #mainCarousel .carousel-item {
    padding-bottom: 3rem;
  }

  #mainCarousel .carousel-item .carousel-item-content {
    position: static !important;
    transform: none !important;
  }

  #mainCarousel .mouse-scroll-hint {
    display: none !important;
  }
  #stickyDirectory {
    bottom: 1rem;
    right: 0.75rem;
  }
  #timelineContainer {
    height: auto;
  }

  #timeline {
    height: auto;
    padding: 0;
    position: relative;
  }

  #timeline .timeline-item {
    height: auto;
    max-height: unset;
    padding: 0 0 3rem;
  }

  #timeline .timeline-item .timeline-item-img {
    align-self: self-start;
  }
}