@import url("https://fonts.googleapis.com/css2?family=Englebert&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Lexend+Exa:wght@100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
html {
  scroll-behavior: smooth; }
  @media (max-width: 575.98px) {
    html {
      font-size: 20px; } }
  @media (min-width: 576px) and (max-width: 767.98px) {
    html {
      font-size: 18px; } }
  html body {
    font-family: "Kanit", serif;
    font-weight: 400;
    font-style: normal; }
    html body nav.navbar {
      background-color: rgba(196, 25, 190, 0.9); }
      html body nav.navbar .nav-item a.nav-link {
        color: #FFF; }
        html body nav.navbar .nav-item a.nav-link .material-symbols-rounded {
          font-size: 1.5rem; }
        html body nav.navbar .nav-item a.nav-link .menu-label {
          margin-left: .5rem; }
        html body nav.navbar .nav-item a.nav-link.active {
          color: #530b50;
          border-bottom: 0.25rem solid #530b50; }
        html body nav.navbar .nav-item a.nav-link:not(.active):hover {
          text-shadow: 0 0 0.5rem #530b50;
          border-bottom: 0.25rem solid rgba(255, 255, 255, 0.5); }
    html body h1 {
      text-transform: uppercase;
      color: #530b50; }
      html body h1:not(.modal-title) {
        padding-top: 5rem;
        padding-bottom: 1rem; }
      html body h1 span.material-symbols-rounded {
        font-size: inherit; }
    html body p {
      font-weight: 300; }
      html body p.lead {
        color: #121372; }
    html body .img-jv {
      clip-path: circle();
      min-width: 224px; }
      @media (max-width: 575.98px) {
        html body .img-jv {
          width: 33vw !important;
          min-width: 160px; } }
    html body main {
      text-shadow: #FFF .125rem .125rem .125rem; }
      html body main a.btn {
        text-shadow: none; }
      html body main section {
        min-height: calc(100vh - 5rem);
        margin-bottom: 3rem;
        background-repeat: no-repeat;
        background-size: 60vw auto;
        background-position: left 4rem;
        background-attachment: scroll;
        padding-bottom: 1.5rem; }
        html body main section:not(:last-child) {
          border-bottom: 3rem inset #2628DD; }
        html body main section:nth-child(odd) {
          background-position: right 4rem; }
        @media (min-width: 576px) {
          html body main section {
            background-size: 40vw auto; } }
        @media (min-width: 768px) {
          html body main section {
            background-size: 25vw auto;
            background-attachment: fixed; } }
        html body main section .accordion-item {
          text-shadow: none;
          background-color: rgba(38, 40, 221, 0.25);
          border-color: #2628DD; }
          html body main section .accordion-item img.app_1 {
            max-width: 5.6rem; }
          html body main section .accordion-item .accordion-body ul.list-group li {
            background-color: rgba(255, 255, 255, 0.5); }
            html body main section .accordion-item .accordion-body ul.list-group li:nth-of-type(2) {
              text-transform: uppercase; }
            html body main section .accordion-item .accordion-body ul.list-group li span.badge {
              background-color: rgba(196, 25, 190, 0.5);
              font-weight: normal;
              color: #212529;
              text-shadow: none; }
          @media (max-width: 575.98px) {
            html body main section .accordion-item .accordion-body .card {
              width: 100%; } }
          @media (min-width: 576px) and (max-width: 767.98px) {
            html body main section .accordion-item .accordion-body .card {
              width: 50%; } }
          @media (min-width: 768px) {
            html body main section .accordion-item .accordion-body .card {
              width: 33%; } }
        html body main section button.accordion-button {
          background-color: rgba(38, 40, 221, 0.4);
          padding: 1rem; }
          html body main section button.accordion-button span {
            margin-right: .5rem; }
            html body main section button.accordion-button span.accordion-title {
              order: 3;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              margin-right: auto;
              color: #fff; }
            html body main section button.accordion-button span.accordion-company {
              order: 2;
              text-transform: uppercase; }
              html body main section button.accordion-button span.accordion-company svg, html body main section button.accordion-button span.accordion-company img {
                height: 2rem;
                width: auto;
                max-width: 24vw; }
            html body main section button.accordion-button span.badge {
              order: 6;
              font-weight: 700; }
          html body main section button.accordion-button:after {
            order: 8; }
          html body main section button.accordion-button:not(.collapsed) {
            background-color: rgba(196, 25, 190, 0.4); }
        html body main section#welcome {
          background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="24px" viewBox="0 -960 960 960" xml:space="preserve"><path fill="rgb(38, 40, 221, .35)" d="M360-80v-529q-91-24-145.5-100.5T160-880h80q0 83 53.5 141.5T430-680h100q30 0 56 11t47 32l181 181-56 56-158-158v478h-80v-240h-80v240h-80Zm120-640q-33 0-56.5-23.5T400-800q0-33 23.5-56.5T480-880q33 0 56.5 23.5T560-800q0 33-23.5 56.5T480-720Z"/></svg>'); }
          html body main section#welcome svg {
            opacity: .5;
            max-width: 30%; }
            @media (min-width: 768px) {
              html body main section#welcome svg {
                max-width: 18%; } }
        html body main section#about {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='rgb(38, 40, 221, .35)' %3E%3Cpath d='M480-40 360-160H200q-33 0-56.5-23.5T120-240v-560q0-33 23.5-56.5T200-880h560q33 0 56.5 23.5T840-800v560q0 33-23.5 56.5T760-160H600L480-40ZM200-286q54-53 125.5-83.5T480-400q83 0 154.5 30.5T760-286v-514H200v514Zm280-194q58 0 99-41t41-99q0-58-41-99t-99-41q-58 0-99 41t-41 99q0 58 41 99t99 41ZM280-240h400v-10q-42-35-93-52.5T480-320q-56 0-107 17.5T280-250v10Zm200-320q-25 0-42.5-17.5T420-620q0-25 17.5-42.5T480-680q25 0 42.5 17.5T540-620q0 25-17.5 42.5T480-560Zm0 17Z'/%3E%3C/svg%3E"); }
        html body main section#expertise {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='rgb(38, 40, 221, .35)' %3E%3Cpath d='M480-80q-26 0-47-12.5T400-126q-33 0-56.5-23.5T320-206v-142q-59-39-94.5-103T190-590q0-121 84.5-205.5T480-880q121 0 205.5 84.5T770-590q0 77-35.5 140T640-348v142q0 33-23.5 56.5T560-126q-12 21-33 33.5T480-80Zm-80-126h160v-36H400v36Zm0-76h160v-38H400v38Zm-8-118h58v-108l-88-88 42-42 76 76 76-76 42 42-88 88v108h58q54-26 88-76.5T690-590q0-88-61-149t-149-61q-88 0-149 61t-61 149q0 63 34 113.5t88 76.5Zm88-162Zm0-38Z'/%3E%3C/svg%3E"); }
        html body main section#experience {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='rgb(38, 40, 221, .35)' %3E%3Cpath d='m387-412 35-114-92-74h114l36-112 36 112h114l-93 74 35 114-92-71-93 71ZM240-40v-309q-38-42-59-96t-21-115q0-134 93-227t227-93q134 0 227 93t93 227q0 61-21 115t-59 96v309l-240-80-240 80Zm240-280q100 0 170-70t70-170q0-100-70-170t-170-70q-100 0-170 70t-70 170q0 100 70 170t170 70ZM320-159l160-41 160 41v-124q-35 20-75.5 31.5T480-240q-44 0-84.5-11.5T320-283v124Zm160-62Z'/%3E%3C/svg%3E"); }
        html body main section#contact {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='rgb(38, 40, 221, .35)' %3E%3Cpath d='M640-80v-90q-56-18-94-64t-44-106h80q8 43 40.5 71.5T700-240h120q25 0 42.5 17.5T880-180v100H640Zm120-200q-33 0-56.5-23.5T680-360q0-33 23.5-56.5T760-440q33 0 56.5 23.5T840-360q0 33-23.5 56.5T760-280ZM360-400q0-150 105-255t255-105v80q-117 0-198.5 81.5T440-400h-80Zm160 0q0-83 58.5-141.5T720-600v80q-50 0-85 35t-35 85h-80ZM80-520v-100q0-25 17.5-42.5T140-680h120q45 0 77.5-28.5T378-780h80q-6 60-44 106t-94 64v90H80Zm120-200q-33 0-56.5-23.5T120-800q0-33 23.5-56.5T200-880q33 0 56.5 23.5T280-800q0 33-23.5 56.5T200-720Z'/%3E%3C/svg%3E"); }
        html body main section#error {
          min-height: 0; }
    html body footer {
      text-transform: uppercase;
      letter-spacing: .25rem;
      font-size: .67rem; }
    html body .contact-form-footer-overlay {
      height: 45px;
      top: -45px;
      background-color: #FFF;
      position: relative; }
      @media (max-width: 575.98px) {
        html body .contact-form-footer-overlay {
          top: -45px; } }
      @media (max-width: 403.98px) {
        html body .contact-form-footer-overlay {
          height: 64px;
          top: -64px; } }
    html body .modal:not(#tenthModal) .modal-dialog {
      align-items: flex-end; }
      html body .modal:not(#tenthModal) .modal-dialog .modal-content p.alert {
        max-width: none; }
    html body .modal#eleventhModal .modal-dialog {
      min-width: 314px; }
    html body .modal .carousel-inner .carousel-item img {
      width: 100%;
      margin: auto; }
      html body .modal .carousel-inner .carousel-item img.img-thumbnail {
        max-width: 9rem;
        margin: .25rem .5rem; }
    html body .modal .carousel-inner .carousel-item .carousel-caption {
      background-color: rgba(255, 255, 255, 0.8);
      right: auto;
      left: auto;
      bottom: 1.5rem;
      line-height: 1.1;
      padding: 0;
      position: relative; }
    html body .btn-wa:hover {
      filter: brightness(85%); }
    html body .btn-wa img {
      max-height: 2.4rem; }
    html body .mono-times {
      font-family: "Roboto Mono", monospace;
      font-optical-sizing: auto;
      font-style: normal; }
    html body .badge {
      font-family: "Noto Sans", sans-serif;
      font-weight: 300; }
    html body .btn-float {
      padding: .5rem;
      margin: .5rem inherit .5rem 1rem;
      border-radius: 10vw;
      float: right; }
      html body .btn-float i {
        font-size: 10vw; }