@media screen and (max-width: 800px) {
  .navbar {
    width: calc(100% - var(--ratio) * 30px);
    top: calc(var(--ratio) * 15px);
    left: calc(var(--ratio) * 15px);
    display: flex;
    justify-content: space-between;
  }

  .navbar .nav-links {
    display: none;
  }

  .navbar .lang {
    display: none;
  }

  .navbar .mobile-menu {
    display: block;
    margin-right: calc(var(--ratio) * 50px);
  }

  .navbar .mobile-menu .menu-icon {
    cursor: pointer;
  }

  body.mobile-menu-active {
    overflow: hidden !important;
  }

  html.mobile-menu-active {
    overflow: hidden !important;
  }

  body .menu-layer.active {
    display: block;
    position: absolute;
    z-index: 10000;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: var(--Bg-100, #0e2134);
    opacity: 0.97;
  }

  body .menu-layer .menu-layer-container {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
  }

  body .menu-layer .menu-layer-container .close-icon {
    position: absolute;
    top: calc(var(--ratio) * 30px);
    right: calc(var(--ratio) * 30px);
    cursor: pointer;
  }

  body .menu-layer .menu-layer-container .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  body .menu-layer .menu-layer-container .menus {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
    flex: 2;
    justify-content: flex-end;
  }

  body .menu-layer .menu-layer-container .menus div.active {
    color: var(--Grey-20, var(--color-grey-20, #fafafc));
  }

  body .menu-layer .menu-layer-container .menus div {
    color: var(--Grey-100, #d9d9db);
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  body .menu-layer .menu-layer-container .lang {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-bottom: calc(var(--ratio) * 150px);
    gap: 2.25rem;
  }

  body .menu-layer .menu-layer-container .lang > div {
    color: var(--Grey-100, #d9d9db);
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  body .menu-layer .menu-layer-container .lang > div.active {
    color: var(--PrimaryColor-Blue1, #38bff4);
    text-align: center;

    /* shadow/01 */
    text-shadow: 6px 10px 13px rgba(0, 148, 255, 0.37);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  main .first-section {
    margin-top: calc(var(--ratio) * -65px) !important;
  }

  .footer {
    flex-direction: column;
    height: auto;
    max-width: 100vw;
  }

  .footer .left img {
    width: calc(var(--ratio) * 100px);
  }

  .footer .left .copyright {
    display: none;
  }

  .footer > .copyright {
    display: flex;
    margin-top: calc(var(--ratio) * 100px);
  }

  .footer .right .menus {
    display: flex;
    flex-direction: column;
    margin-top: 0;
    gap: calc(var(--ratio) * 20px);
  }

  .footer .right .menus .menu .main-item {
    display: flex;
    gap: calc(var(--ratio) * 10px);
  }

  .footer .right .menus .menu .expand-icon {
    display: block;
    transform: rotate(-90deg);
  }

  .footer .right .menus .menu .expand-icon.active {
    transform: rotate(0deg);
  }

  .footer .right .menus .menu .expand-icon img {
    width: 15px;
    height: 15px;
  }

  .footer .right .menus .menu div .main-item {
    display: block;
    margin-left: 20px;
  }

  .footer .right .menus .menu a {
    font-size: 0.875rem;
  }

  .footer .right .menus .menu .children-items {
    display: none;
    margin-left: calc(var(--ratio) * 70px);
  }

  .footer .right .menus .menu .children-items.active {
    display: block;
  }

  /* Homepage sectors */
  .welcome {
    height: auto;
  }

  .welcome .background {
    width: 100vw;
    background: url("/assets/imgs/welcome-background-mobile.webp") lightgray 50% /
      cover no-repeat;
    position: relative;
    height: 70vh;
    z-index: -1;
  }

  .welcome .background:after {
    height: 0px;
  }

  .welcome .content {
    position: unset;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: -7rem;
    padding: 0px calc(var(--ratio) * 50px);
    background-color: #0b1623;
  }

  .welcome .content h1 {
    font-size: 1.5rem;
    color: var(--Blue-100, #008cc3);
    font-weight: 500;
    line-height: normal;
    text-align: center;
  }

  .welcome .content p {
    color: var(--Grey-400, #8d8e8f);
    text-align: center;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 200;
    line-height: 20px;
    margin-bottom: 2.75rem;
  }

  .welcome .content .contact-us-btn {
    width: 100vw;
    padding: 1.5rem 7rem;
    display: flex;
    justify-content: center;
    background: var(--Bg-80, #17293c);
  }

  .welcome .content a {
    border-radius: 0.5rem;
    margin-top: unset;
  }

  .welcome .content a span {
    font-size: 1rem;
  }

  .mission {
    padding-top: calc(var(--ratio) * 80px);
  }

  .mission .header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: normal;
  }

  .mission .content {
    flex-direction: column;
    gap: calc(var(--ratio) * 100px);
    padding: calc(var(--ratio) * 10px) calc(var(--ratio) * 50px);
  }

  .mission .content .content-item {
    width: 100%;
  }

  .mission .content .content-item .content-item-polygon .item-title {
    font-size: 1.25rem;
  }

  .mission .content .content-item .content-item-polygon .item-detail {
    font-size: 0.75rem;
    font-weight: 200;
  }

  .services {
    padding-top: calc(var(--ratio) * 80px);
  }

  .services .header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: normal;
  }

  .services .content {
    padding: calc(var(--ratio) * 10px) calc(var(--ratio) * 50px);
  }

  .services .content .content-item {
    margin: unset;
    margin-left: unset !important;
    margin-right: unset !important;
    flex-direction: column;
    align-items: center;
  }

  .services .content .content-item .item-icon-container .item-icon {
    filter: unset !important;
  }

  .services .content .content-item .item-content .item-title {
    font-size: 1.25rem;
  }

  .services .content .content-item .item-content .item-detail {
    font-size: 0.75rem;
    font-weight: 200;
  }

  /* Product sectors */

  .products {
    margin-top: calc(var(--origin-ratio) * 400px) !important;
    padding: 0px calc(var(--ratio) * 50px);
  }

  .products.product-vpn .banner-image {
    margin: 0 15%;
  }

  .products .content .title {
    margin-top: calc(var(--ratio) * 50px) !important;
    font-size: 1.5rem;
  }

  .products .content .detail {
    margin: unset;
    font-size: 0.75rem;
  }

  .products .content a {
    font-size: 1rem;
  }

  .products.product-vpn .background {
    display: none;
  }

  .products.product-vpn .banner-image {
    margin-top: calc(var(--origin-ratio) * 300px) !important;
    background-size: cover;
  }

  .product-vpn .banner-image {
    background-image: url("/assets/imgs/product-vpn-banner-mobile.webp") !important;
  }

  .product-message .banner-image {
    background-image: url("/assets/imgs/product-messsage-banner-mobile.webp") !important;
  }

  .product-exchange .banner-image {
    background-image: url("/assets/imgs/product-exchange-banner-mobile.webp") !important;
  }

  /* About us sector */
  .about-us {
    flex-direction: column-reverse;
    padding: calc(var(--ratio) * 200px) calc(var(--ratio) * 50px);
    padding-bottom: calc(var(--ratio) * 50px);
  }

  .about-us .banner .background {
    width: 100%;
    margin-left: 0px;
  }

  .about-us .banner .main {
    left: 0;
    width: 100%;
    margin-left: 0px;
  }

  .about-us .info {
    align-items: center;
  }

  .about-us .info .title {
    font-size: 1.5rem;
  }

  .about-us .info .detail {
    font-size: 0.75rem;
  }

  .development-stage .title {
    font-size: 1.5rem;
  }

  .development-stage .timeline .timeline-item:last-child .timeline-item-info {
    margin-top: calc(var(--ratio) * 180px);
  }

  .request-quote {
    background-color: #0b151f;
    zoom: 1;
  }

  .request-quote .request-quote-container {
    background: unset;
    flex-direction: column;
    align-items: center;
    padding: 0 calc(var(--ratio) * 30px);
  }

  .request-quote .request-quote-container .banner {
    width: 100%;
  }

  .request-quote .request-quote-container .banner img {
    width: 100%;
    height: 100%;
  }

  .request-quote .request-quote-container .content {
    margin-top: unset;
    gap: calc(var(--ratio) * 20px);
  }

  .request-quote .request-quote-container .content .action-call {
    font-size: 1rem;
  }

  .request-quote .request-quote-container .content .title {
    font-size: 1.5rem;
  }

  .request-quote .request-quote-container .content .detail {
    font-size: 0.75rem;
  }

  .request-quote .request-quote-container .content a {
    width: 100%;
    font-size: 1.25rem;
  }

  .our-team > .title {
    font-size: 1.5rem;
  }

  .our-team .content {
    padding: calc(var(--ratio) * 80px) calc(var(--ratio) * 30px);
  }

  .our-team .content .item {
    width: calc(40% - var(--origin-ratio) * 50px / 2);
  }

  .our-team .content .item .title {
    font-size: 1rem;
  }

  .our-team .content .item .detail {
    font-size: 0.75rem;
  }

  .our-team .content .item .icon {
    width: calc(var(--ratio) * 150px);
    height: calc(var(--ratio) * 150px);
  }

  /* Activities sectors */
  .activities .tabs {
    display: none;
  }

  .activities .slides {
    background-color: unset;
  }

  .activities .slides .slide {
    display: block;
    flex-direction: column;
    margin-bottom: calc(var(--ratio) * 50px);
    position: relative;
  }

  .activities .slides .slide .details {
    height: unset;
  }

  .activities .slides .slide .details .detail {
    background-color: unset;
  }

  .activities .slides .controls.control-prev {
    left: calc(var(--ratio) * -20px);
    bottom: calc(var(--ratio) * 225px);
    top: unset;
  }

  .activities .slides .controls.control-next {
    right: calc(var(--ratio) * -20px);
    bottom: calc(var(--ratio) * 225px);
    top: unset;
  }

  .activities .slides .slide .display {
    position: unset;
    margin: 0px calc(var(--ratio) * 30px);
    width: calc(100% - var(--ratio) * 60px);
  }

  .activities .slides .slide .display .display-container .display-item {
    height: calc(var(--ratio) * 500px);
  }

  .activities .slides .slide .mobile-title {
    display: block;
    color: var(--Grey-20, var(--color-grey-20, #fafafc));
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: calc(var(--ratio) * 0.72px);
    padding: calc(var(--ratio) * 20px) calc(var(--ratio) * 30px);
  }

  .activities .slides .slide .details {
    position: unset;
    justify-content: flex-start;
  }

  .activities .slides .slide .details .detail {
    color: var(--Grey-400, #8d8e8f);
    font-size: 0.875rem;
    text-align: left;
    padding: calc(var(--ratio) * 20px) calc(var(--ratio) * 30px);
  }

  .activities .slides .slide .display .display-container {
    margin: unset;
  }

  .activities .slides .slide .progress {
    display: none;
  }

  .activities .slides .slide:last-child {
    margin-bottom: unset;
  }

  .activities .slides .display .display-item img {
    border-radius: 12px;
  }

  /* Contact us sectors */
  .contact-us {
    padding: calc(var(--ratio) * 120px) calc(var(--ratio) * 50px)
      calc(var(--ratio) * 50px) calc(var(--ratio) * 50px);
  }

  .contact-us > .title {
    font-size: 2.25rem;
  }

  .contact-us .info {
    display: flex;
    flex-direction: column;
    gap: calc(var(--ratio) * 100px);
    padding: 0px 0px;
  }

  .contact-us .info .item {
    justify-content: left;
    /* justify-content: center; */
    gap: calc(var(--ratio) * 70px);
  }

  .contact-us .info .item .content .title {
    font-size: 1rem;
  }

  .contact-us .info .item .content .detail {
    font-size: 1rem;
  }

  .contact-us .social {
    flex-direction: column;
    gap: calc(var(--ratio) * 40px);
    font-size: 1rem;
  }

  .contact-us .social .items {
    justify-content: center;
  }
}

@media screen and (max-width: 1280px) {
  .about-us .info {
    flex: 1;
    margin-top: calc(var(--ratio) * 50px);
  }

  .about-us .banner {
    flex: 1;
  }

  .request-quote {
    zoom: 0.8;
  }
}