.container {
    overflow: hidden;
    .slider {
      animation: slidein 40s linear infinite;
      white-space: nowrap;
      .logos {
        width: 100%;
        display: inline-block;
        margin: 0px 0;
        .f-box {
            display: flex;
            justify-content: space-around;
            /* img {
                width: 14%;
                height: auto;
                animation: fade-in 0.5s 
                cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards; 
            } */
        }
      }
    }
  }

  @keyframes slidein {
    from {
      transform: translate3d(0, 0, 0);
    }
    to {
      transform: translate3d(-100%, 0, 0);
    }
  }
  
  @keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  


  .circle {
    width: 20vw; /* ใช้หน่วย viewport width */
    height: 20vw; /* ขนาดวงกลมเท่ากับความกว้าง */
    max-width: 120px;
    max-height: 120px;
    /* border-radius: 50%; */
    /* overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center; */
    /* background-color: #f2f2f2; สีพื้นหลัง */
    /* border: 2px solid darkorange; สีขอบ */
}
.circle img {
    width: 80%;
    height: auto;
    object-fit: cover; /* ทำให้รูปเต็มพื้นที่วงกลม */
}

/* Media Queries สำหรับปรับขนาด */
@media (min-width: 768px) { /* สำหรับหน้าจอขนาด Tablet */
    /* .circle {
        width: 80%;
        height: 80%;
        max-width: 100px;
        max-height: 100px;
    } */
}

@media (min-width: 480px) { /* สำหรับหน้าจอมือถือ */
    /* .circle {
        width: 40vw;
        height: 40vw;
        max-width: 7vw;
        max-height: 7vw;
    } */
}


@media (min-width: 768px) {
  .navbar-expand-md {
      -ms-flex-flow: row wrap;
      flex-flow: row wrap;
      -ms-flex-pack: start;
      justify-content: flex-start;
  }
}

.social-bar{
  background-color: #2e2e2e;
  width: 100%;
}

.social-bar img{
  width: 2rem;
}

.contact-zone{
  color:white; 
  border:none; 
  list-style: none; 
  font-size: 70%;
}

.contact-zone span {
  border: none;
}

/* ======== */

:root {
  --marquee-width: 80vw;
  --marquee-height: 20vh;
  /* --marquee-elements: 12; */ /* defined with JavaScript */
  --marquee-elements-displayed: 8;
  --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
  --marquee-animation-duration: calc(var(--marquee-elements) * 3s);
}

.marquee {
  width: var(--marquee-width);
  height: var(--marquee-height);
  /* background-color: #111; */
  color: #eee;
  overflow: hidden;
  position: relative;
  margin:-6% auto 5% auto;
}
.marquee:before, .marquee:after {
  position: absolute;
  top: 0;
  width: 10rem;
  height: 100%;
  content: "";
  z-index: 1;
}
.marquee:before {
  left: 0;
  /* background: linear-gradient(to right, #111 0%, transparent 100%); */
}
.marquee:after {
  right: 0;
  /* background: linear-gradient(to left, #111 0%, transparent 100%); */
}
.marquee-content {
  list-style: none;
  height: 100%;
  display: flex;
  /* animation: scrolling var(--marquee-animation-duration) linear infinite; */
  animation: slidein 40s linear infinite;
}
/* .marquee-content:hover {
  animation-play-state: paused;
} */
@keyframes scrolling {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements))); }
}
.marquee-content li {
  display: flex;
  justify-content: center;
  align-items: center;
  /* text-align: center; */
  flex-shrink: 0;
  width: var(--marquee-element-width);
  max-height: 100%;
  font-size: calc(var(--marquee-height)*3/4); /* 5rem; */
  white-space: nowrap;
  align-items: center;
  margin: 0% .5%;
}

.marquee-content li img {
  width: 100%;
  /* height: 100%; */
  /* border: 2px solid #eee; */
}

@media (max-width: 600px) {
  html { font-size: 12px; }
  :root {
    --marquee-width: 100vw;
    --marquee-height: 16vh;
    --marquee-elements-displayed: 3;
  }
  .marquee:before, .marquee:after { width: 5rem; }
}

h1.no-span {
    display: table;
    white-space: nowrap;
    /* width: -; */
    color:orange;
    margin: 5% auto;
    &:before, &:after {
      border-top: 3px solid orange;
      content: '';
      display: table-cell;
      position: relative;
      top: 0.5em;
      width: 30%;
    }
    &:before { right: 5.5%; }
    &:after { left: 5.5%; }
}