@charset "utf-8";

/* display section between phone or web view */
#about-web,
#publication-web,
#professional-web,
.notshow-on-w457 {
  display: block;
}

#about-phone,
#publication-phone,
#professional-phone,
.showing-on-w457 {
  display: none;
}


/* -- > 1200px --------------------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  #main {
    margin-left: 5rem;
  }

  #home {
    padding-left: 60px;
  }

  .nav-menu a,
  .nav-menu a:focus {
    width: 56px;
  }

  .nav-menu a span,
  .nav-menu a:focus span {
    display: none;
    color: #fff;
  }
}


/* -- tabs view --------------------------------------------------------------------------------------- */
@media (max-width: 1199px) and (min-width: 768px) {
  #header {
    width: 300px;
    background: #fff;
    border-right: 1px solid #e6e9ec;
    left: -300px;
  }

  /* #tabs-content section {
    padding: 70px 20px;
  } */

  .title-home {
    transform: scale(0.9);
    margin: auto;
  }

  .title-sg-icon {
    width: 240px;
  }

  #slider .card-slider .publication-text {
    padding: 1.5rem;
    max-width: 19rem;
  }

  .professional .icon-box {
    width: 272px;
    height: 180px;
  }

  .timeline .timeline-item h5 {
    font-size: 20px;
  }

  .publication-text {
    width: 95%;
  }

  .row-publications {
    align-items: center;
  }

  .footer-sg-title h1 {
    font-size: 22px;
    margin: 4px 0px 4px 0px;
  }

  .footer-sg-comno h2 {
    margin-top: 0px;
    font-size: 10px;
  }

  .contact .info p {
    font-size: 12px;
  }

  .row-investor {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
  }

  .investor-container {
    margin: 1rem 2rem;
  }

  #t1 .text-align-left {
    text-align: left;
  }

  #t1 .t6-adheres-container {
    display: block !important;
  }

  .t6-adheres-iso {
    flex-direction: column !important;
  }


  .img-100-phone {
    width: 100% !important;
  }

  .img-90-media {
    width: 90% !important;
  }

  .img-80-media {
    width: 80% !important;
  }

  .img-60-media {
    width: 60% !important;
  }

  .img-120 {
    width: 120% !important;
  }

}


/* -- between 768px to 991px ------------------------------------------------------------------- */
@media (max-width: 991px) and (min-width: 768px) {

  /* SG time line text inside the box */
  .about-text {
    text-align: left;
  }

  /* center the slider card (publication section) */
  #slider label {
    right: 35%;
  }

  /* footer layout section for left and right */
  .footer-sg-name-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0rem 2rem 2rem 2rem;
  }

  .footer-container-left {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-bottom: 10px;
  }

  .contact .info {
    width: 50%;
  }

  .row-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }

  .contact .col-4,
  .contact .col-8 {
    width: 100%;
  }

}


/* -- phone view --------------------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .margin-0 {
    margin: 0 !important;
  }

  #header {
    width: 300px;
    background: #fff;
    border-right: 1px solid #e6e9ec;
    left: -300px;
  }

  [data-aos-delay] {
    transition-delay: 0 !important;
  }

  /* .tabs ul li label {
    padding: 5px;
    border-radius: 5px;
  } */

  .title-home {
    transform: scale(0.7);
    margin: auto;
  }

  .sl-svg-icon {
    width: 1.6rem;
    margin: auto 12px;
  }

  #home .title-sg-icon {
    min-width: 180px;
    width: 180px;
  }

  .mpc-slide-content p {
    font-size: 16px !important;
  }

  .mpc-stepper {
    margin-top: 40px !important;
    margin-bottom: 15px !important;
  }

  .mpc-step-title {
    display: none;
  }

  section {
    padding: 35px 0;
  }

  .section-title h6 {
    font-size: 22px;
  }

  .section-title p {
    font-size: 16px;
    padding: 0 5px;
  }

  .timeline {
    padding: 80px 0px 0px 0px;
  }

  .timeline .timeline-item h4 {
    font-size: 18px;
  }

  .timeline .timeline-item h5 {
    font-size: 16px;
    text-align: left;
  }

  section #slider {
    min-height: 24rem;
    display: flex;
    align-items: flex-end;
  }

  #slider .card-slider {
    width: 189px;
    height: 270px;
  }

  #slider .card-slider .publication-text {
    padding: 1rem;
    max-width: 10rem;
  }

  #slider .publication-text h4 {
    font-size: 16px;
  }

  #slider .publication-text h5 {
    font-size: 12px;
  }

  #slider label {
    right: 45%;
  }

  #s1:checked~#slide1,
  #s2:checked~#slide2,
  #s3:checked~#slide3,
  #s4:checked~#slide4,
  #s5:checked~#slide5,
  #s6:checked~#slide6,
  #s7:checked~#slide7,
  #s8:checked~#slide8 {
    top: 16% !important;
  }

  .section-title {
    padding-bottom: 5px;
  }

  .section-title.section-title-tabs {
    padding-top: 10px;
  }

  .facts .count-box {
    margin: 0;
    padding: 0;
  }

  .row-investor {
    display: grid;
    justify-content: center;
    align-items: center;
    width: auto;
  }

  .row-contact {
    display: grid;
    justify-content: center;
    align-items: center;
    justify-items: center;
  }

  .investor-container {
    width: 100px;
    margin: 10px;
  }

  .col-4 {
    width: 90%;
  }

  .col-8 {
    width: 100%;
  }

  .footer-sg-logo {
    min-width: 66px;
  }

  .footer-sg-text {
    min-width: 195px;
  }

  .footer-sg-title h1 {
    /* font-size: calc(12px + 2.9vw); */
    /* font-size: clamp(21px, calc(12px + 2.9vw), 28px); */
    font-size: clamp(12px, calc(12px + 2.5vw), 22px) !important;
  }

  .footer-sg-comno h2 {
    /* font-size: calc(7px + 1vw); */
    font-size: clamp(10px, 12px, 12px);
    white-space: nowrap;
    /* hyphens: normal; */
  }

  .footer-container-left {
    margin-right: 0;
  }

  .contact .info {
    margin-left: 4%;
  }

  .tabs-t3-infected {
    flex-direction: column;
  }

  .tabs-t3-infected-img {
    width: 100%;
  }

  .tabs-t3-infected-text {
    display: flex;
    gap: 1rem;
    margin-top: 10px;
    padding: 0;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
  }


  #t1 h4,
  #t2 h4,
  #t3 h4,
  #t4 h4,
  #t5 h4,
  #t6 h4 {
    font-size: 20px !important;
    margin: 20px 0px 10px 0px !important;
    text-align: left !important;
  }

  #t1 h5,
  #t2 h5,
  #t3 h5,
  #t4 h5,
  #t5 h5,
  #t6 h5 {
    /* font-size: 16px !important; */
    text-align: left !important;
  }

  #t4 h5 .tabs-sources {
    /* margin-top: -4% !important; */
    font-size: 10px !important;
  }

  .t3-media01 {
    margin-top: 20px;
  }

  #t1 .t6-adheres-container {
    display: inline-table !important;
  }

  #t1 .t6-adheres-container2 {
    display: flex;
    flex-direction: column;
    margin: 20px auto 40px auto;
  }

  .t6-adheres-iso {
    flex-direction: column !important;
  }

  .t6-adheres2 {
    margin: auto;
  }

  .bio-services-flex {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: auto;
    width: 100%;
  }

  .w-120 {
    width: 100%;
    max-width: 120px;
  }

  .t6-adheres2 b {
    text-align: left;
    display: flex;
  }

  .t6-samm-container {
    flex-direction: column;
    /* width: 85vw; */
    align-items: center;
  }

  .t6-samm-img {
    width: 100% !important;
    box-shadow: 0 3px 2px rgba(0, 0, 0, 0.2);
  }

  .t6-divider {
    display: none;
  }

  .t6-size-font {
    font-size: 0.99rem !important;
  }

  .t6-qr {
    margin: 0.5rem 0.5rem 1rem 0.5rem !important;
    width: 6rem !important;
  }

  .t6-samm-text-container {
    flex-direction: column !important;
    flex-direction: column-reverse !important;
  }

  .img-100-phone {
    width: 100% !important;
  }

  .img-90-media {
    width: 90% !important;
  }

  .img-80-media {
    width: 80% !important;
  }

  .img-60-media {
    width: 60% !important;
  }

  .img-120 {
    width: 120% !important;
  }

  .padding-right-1rem {
    padding-right: 1rem;
  }

  .tabs-icon {
    height: 3rem;
  }

  /* -- cert infinity loop ----------------------------------------------------------- */
  .row-professional-phone {
    flex-direction: row;
    flex-wrap: nowrap;
  }

  /* -- cert infinity loop style ----------------------------------------------------- */
  .scroller {
    max-width: 600px;
  }

  .scroller__inner {
    padding-block: 1rem;
    display: flex;
    flex-wrap: wrap;
  }

  .scroller[data-animated="true"] {
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg,
        transparent,
        white 2%,
        white 98%,
        transparent);
    mask: linear-gradient(90deg,
        transparent,
        white 2%,
        white 98%,
        transparent);
  }

  .scroller[data-animated="true"] .scroller__inner {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    flex-wrap: nowrap;
    -webkit-animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
    animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
  }

  .scroller[data-direction="right"] {
    --_animation-direction: reverse;
  }

  .scroller[data-direction="left"] {
    --_animation-direction: forwards;
  }

  .scroller[data-speed="fast"] {
    --_animation-duration: 20s;
  }

  .scroller[data-speed="slow"] {
    --_animation-duration: 60s;
  }

  @-webkit-keyframes scroll {
    to {
      transform: translate(calc(-50% - 0.5rem));
    }
  }

  @keyframes scroll {
    to {
      transform: translate(calc(-50% - 0.5rem));
    }
  }




  /* -- publication-phone css section ----------------------------------------------------- */
  #publication-phone {
    padding-top: 50px;
  }

  .publication-phone {
    margin: 0;
    padding-bottom: 50px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .slider-item-content h4 {
    margin: 0;
    font-weight: 600;
    font-size: 18px;
    line-height: 32px;
    color: #003c71;
    transform: translateY(20px);
    transition: all 0.4s ease;
    transition-delay: 0.2s;
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .slider-item-content h5 {
    padding: 10px 0;
    margin: 0;
    font-weight: normal;
    font-size: 16px;
    line-height: 20px;
    color: #101820;
    transform: translateY(20px);
    transition: all 0.4s ease;
    transition-delay: 0.3s;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .swiper-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 1;
    position: relative;
  }

  .swiper-container {
    background: #f7f8f9;
    box-shadow: 0px 3px 12px 0.5px rgba(110, 123, 131, 0.2);
    width: 100%;
    position: relative;
    /* max-width: 420px; */
    min-width: 350px;
    max-width: 80vw;
    border-radius: 10px;
  }

  .slider-image-wrapper {
    width: 100%;
    overflow: hidden;
  }

  .slider-item {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    opacity: 0;
    background: #f7f8f9;
    cursor: -webkit-grab;
    cursor: grab;
  }

  .slider-item-content {
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: 0.4s;
  }

  .slider-item-content>* {
    opacity: 0;
    transform: translateY(20px);
  }

  .swiper-slide-active .slider-item-content>* {
    transform: translateY(0px);
    opacity: 1;
  }

  .slider-image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: 0.2s;
  }

  .swiper-pagination {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translatex(-50%);
    z-index: 1;
    width: auto !important;
  }

  .swiper-pagination-bullet {
    border-radius: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    line-height: 30px;
    font-size: 12px;
    opacity: 1;
    background: #bbbcbc;
    display: inline-block;
    margin-right: 8px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .swiper-pagination-bullet-active {
    background: #003c71;
    width: 20px;
    border-radius: 10px;
  }




  /* display section between phone or web view */
  #about-web,
  #publication-web,
  #professional-web,
  .showing-on-w457 {
    display: none;
  }

  #about-phone,
  #publication-phone,
  #professional-phone {
    display: block;
  }
}






/* table s.case */
@media (max-width: 423px) {

  .opening-hours table tr {
    display: flex;
    flex-direction: column;
  }

  .op-column2 {
    margin-top: 8px;
  }
}


/*  // s.case for remove width on @media min-width: 576px
containers.scss:21
.container, .container-sm {
  max-width: 540px;
} */

@media (max-width: 576px) {
  .container {
    max-width: 100%;
  }
}


/* s.case for tabs-t3-infected' display */
@media (max-width: 530px) {
  .tabs-t3-infected-text span {
    font-size: clamp(12px, 3vw, 16px);
  }
}

@media (max-width: 457px) {
  .notshow-on-w457 {
    display: none;
  }

  .showing-on-w457 {
    display: block;
  }
}