:root {
    --primary-color: #461370;
    --secondary-color: #b563ec;
    --background-color: #f6f8ff;
    --text-color: #232323;
    --dark-background-color: #232323;
    --dark-text-color: #f6f8ff;
    --stroke: #dcd1ee;
    --white: #ffffff;
    --black: #000000;
    --shadow: rgba(0, 9, 61, 0.25);
  }
  
  /* Estilos do botão de coração */
  .heart-switch svg {
    display: block;
  }

  .heart-switch svg path {
    transition: stroke var(--duration), fill var(--duration);
  }

.heart-switch {
    --duration: .45s;
    --stroke: #D1D6EE;
    --stroke-active: #461370;
    --fill: #fff;
    --fill-active: #b563ec;
    --shadow: rgba(7, 8, 10, 0.25);
    cursor: pointer;
    position: fixed;
    transform: scale(var(--s, 1)) translateZ(0);
    transition: transform .2s;
    -webkit-tap-highlight-color: transparent;
  }
  
  .heart-switch:active {
    --s: .95;
  }

  .heart-switch.top-right {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000; /* Garante que fica por cima */
  }
  
  .heart-switch input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: absolute;
    outline: none;
    border: none;
    pointer-events: none;
    z-index: 1;
    margin: 0;
    padding: 0;
    left: 1px;
    top: 1px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px 0 var(--shadow);
  }
  
  .heart-switch input + svg {
    width: 36px;
    height: 25px;
    fill: var(--fill);
    stroke: var(--stroke);
    stroke-width: 1px;
    stroke-linejoin: round;
    display: block;
    transition: stroke var(--duration), fill var(--duration);
  }
  
  .heart-switch input:not(:checked) {
    animation: uncheck var(--duration) linear forwards;
  }
  
  .heart-switch input:checked {
    animation: check var(--duration) linear forwards;
  }
  
  .heart-switch input:checked + svg {
    fill: var(--fill-active);
    stroke: var(--stroke-active);
  }
  
  .heart-switch {
    margin: 12px 0;
  }

  @keyframes uncheck {
    0% {
      transform: rotate(-30deg) translateX(13.5px) translateY(8px);
    }
    50% {
      transform: rotate(30deg) translateX(9px);
    }
    75% {
      transform: rotate(30deg) translateX(4.5px) scaleX(1.1);
    }
    100% {
      transform: rotate(30deg);
    }
  }
  
  @keyframes check {
    0% {
      transform: rotate(30deg);
    }
    25% {
      transform: rotate(30deg) translateX(4.5px) scaleX(1.1);
    }
    50% {
      transform: rotate(30deg) translateX(9px);
    }
    100% {
      transform: rotate(-30deg) translateX(13.5px) translateY(8px);
    }
  }

  html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
  }
  
  *, *::before, *::after {
    box-sizing: inherit;
  }
  
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  footer.footer-text {
    text-align: center;
    padding: 20px 0;
    margin-top: auto;
    background-color: transparent;
    transition: color 0.3s, background-color 0.3s;
  }
  
  /* Tema claro (padrão) */
  body {
    background-color: #D1D6EE;
    color: #232323;
  }
  
  /* Tema escuro */
  body.dark {
    background-color: #232323;
    color: #D1D6EE;
  }
  
  /* portfolio import */

  @import url('https://fonts.googleapis.com/css2?family=Poppins: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&display=swap');

  :root {
      --bg-gradient-onyx: linear-gradient(to bottom right, hsl(240, 1%, 25%) 3%, hsl(0, 0%, 19%) 97%);
      --bg-gradient-jet: linear-gradient(to bottom right, hsla(240, 1%, 18%, .251) 3%, hsla(240, 2%, 11%, 0) 100%), hsl(240, 2%, 13%);
      --bg-gradient-yellow1: linear-gradient(to bottom right, #dcd1ee 0%, hsla(36, 100%, 69%, 0) 50%);
      --bg-gradient-yellow2: linear-gradient(135deg, #b563ec 0%, hsla(266, 100%, 68%, 0) 59.86%), hsl(270, 3%, 13%);
      --border-gradient-onyx: linear-gradient(to bottom right, hsl(0, 0%, 25%) 0%, hsla(0, 0%, 25%, 0) 50%);
      --text-gradient-yellow: linear-gradient(to right, #b563ec, #461370);
  
      --jet: hsl(0, 0%, 22%);
      --onyx: hsl(240, 1%, 17%);
      --eerie-black1: hsl(240, 2%, 13%);
      --eerie-black2: hsl(240, 2%, 12%);
      --smoky-black: #232323;
      --white1: hsl(0, 0%, 100%);
      --white2: hsl(0, 0%, 98%);
      --orange-yellow-crayola: #dcd1ee;
      --vegas-gold: #b563ec;
      --light-gray: hsl(0, 0%, 84%);
      --light-gray70: hsla(0, 0%, 84%, .7);
      --bittersweet-shimmer: hsl(0, 43%, 51%);
  
      --ff-poppins: 'Poppins', sans-serif;
  
      --fs1: 24px;
      --fs2: 18px;
      --fs3: 17px;
      --fs4: 16px;
      --fs5: 15px;
      --fs6: 14px;
      --fs7: 13px;
      --fs8: 12px;
  
      --fw300: 300;
      --fw400: 400;
      --fw500: 500;
      --fw600: 600;
  
      --shadow1: -4px 8px 24px hsla(0, 0%, 0%, .25);
      --shadow2: 0px 16px 30px hsla(0, 0%, 0%, .25);
      --shadow3: 0px 16px 40px hsla(0, 0%, 0%, .25);
      --shadow4: 0px 25px 50px hsla(0, 0%, 0%, .15);
      --shadow5: 0px 24px 80px hsla(0, 0%, 0%, .25);
  
      --transition1: .25s ease;
      --transition2: .5s ease-in-out;
  }
  
  *, *::before, *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  
  a {text-decoration: none; }
  
  li {list-style: none; }
  
  img, ion-icon, a, button, time, span { display: block; }
  
  button {
      font: inherit;
      background: none;
      border: none;
      text-align: left;
      cursor: pointer;
  }
  
  input, textarea {
      display: block;
      width: 100%;
      background: none;
      font: inherit;
  }
  
  ::selection {
      background: var(--orange-yellow-crayola);
      color: var(--smoky-black);
  }
  
  :focus { outline-color: var(--orange-yellow-crayola); }
  
  html { font-family: var(--ff-poppins); }

  
  main {
      margin: 15px 12px;
      margin-bottom: 75px;
      min-width: 259px;
  }
  
  .sidebar, article {
      background: var(--eerie-black2);
      border: 1px solid var(--jet);
      border-radius: 20px;
      box-shadow: var(--shadow1);
      z-index: 1;
      padding: 15px;
  }
  
      .sidebar.active { max-height: 584px; }
  
  .separator {
      width: 100%; /* Ajuste para largura total */
      height: 1px;
      background: var(--jet);
      margin: 16px 0;
  }
  
  .icon-box {
      position: relative;
      background: var(--border-gradient-onyx);
      width: 30px;
      height: 30px;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      color: var(--orange-yellow-crayola);
      box-shadow: var(--shadow1);
      z-index: 1;
  }
  
      .icon-box::before {
          content: '';
          position: absolute;
          inset: 1px;
          background: var(--eerie-black1);
          border-radius: inherit;
          z-index: -1;
      }
  
      .icon-box ion-icon { --ionicon-stroke-width: 35px; }
  
  article { display: none; }
  
      article.active { 
          display: block;
          animation: fade .5s ease backwards;
      }
  
          @keyframes fade {
              0% { opacity: 0; }
              100% { opacity: 1; }
          }
  
  .h2, .h3, .h4, .h5 { 
      color: var(--white2);
      text-transform: capitalize;
  }
  
      .h2 { font-size: var(--fs1); }
      .h3 { font-size: var(--fs2); }
      .h4 { font-size: var(--fs4); }
      .h5 { 
          font-size: var(--fs7);
          font-weight: var(--fw500); 
      }
  
  .article-title {
      position: relative;
      padding-bottom: 7px;
  }
  
      .article-title::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 30px;
          height: 3px;
          background: var(--text-gradient-yellow);
          border-radius: 3px;
      }
  
  .has-scrollbar::-webkit-scrollbar {
      width: 5px;
      height: 5px;
  }
  
  .has-scrollbar::-webkit-scrollbar-track {
      background: var(--onyx);
      border-radius: 5px;
  }
  
  .has-scrollbar::-webkit-scrollbar-thumb {
      background: var(--orange-yellow-crayola);
      border-radius: 5px;
  }
  
  .has-scrollbar::-webkit-scrollbar-button { width: 20px; }
  
  .content-card {
      position: relative;
      background: var(--border-gradient-onyx);
      padding: 15px;
      padding-top: 45px;
      border-radius: 14px;
      box-shadow: var(--shadow2);
      cursor: pointer;
      z-index: 1;
  }
  
      .content-card::before {
          content: '';
          position: absolute;
          inset: 1px;
          background: var(--bg-gradient-jet);
          border-radius: inherit;
          z-index: -1;
      }
  
  /*ASIDE - SIDEBAR*/
  
  .sidebar {
      margin-bottom: 15px;
      max-height: 100%;
      overflow: visible;
      padding: 15px;
      transition: var(--transition2);
  }
  
  .sidebar-info {
      position: relative;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 15px;
  }
  
  .avatar-box {
      background: var(--bg-gradient-onyx);
      border-radius: 20px;
  }
  
  .info-content .name {
      color: var(--white2);
      font-size: var(--fs3);
      font-weight: var(--fw500);
      letter-spacing: -0.25px;
      margin-bottom: 10px;
  }
  
  .info-content .title {
      color: var(--white1);
      background: var(--onyx);
      font-size: var(--fs8);
      font-weight: var(--fw300);
      width: max-content;
      padding: 3px 12px;
      border-radius: 8px;
  }
  
  .info-more-btn {
      position: absolute;
      top: -15px;
      right: -15px;
      border-radius: 0 15px;
      font-size: 13px;
      color: var(--orange-yellow-crayola);
      background: var(--border-gradient-onyx);
      padding: 10px;
      box-shadow: var(--shadow2);
      transition: var(--transition1);
      z-index: 1;
  }
  
      .info-more-btn::before {
          content: '';
          position: absolute;
          inset: 1px;
          border-radius: inherit;
          background: var(--bg-gradient-jet);
          transition: var(--transition1);
          z-index: -1;
      }
  
          .info-more-btn:hover, .info-more-btn:focus { background: var(--bg-gradient-yellow1); }
          .info-more-btn:hover::before, .info-more-btn:focus::before { background: var(--bg-gradient-yellow2); }
  
      .info-more-btn span { display: none; }
  
  .sidebar-info-more {
      opacity: 0;
      visibility: hidden;
      transition: var(--transition2);
  }
  
      .sidebar.active .sidebar-info-more {
          opacity: 1;
          visibility: visible;
      }
  
  .contacts-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
  }
  
  .contact-item {
      min-width: 100%;
      display: flex;
      align-items: center;
      gap: 16px;
  }
  
  .contact-info {
      max-width: calc(100% - 46px);
      width: calc(100% - 46px);
  }
  
      .contact-info :is(.contact-link, time, address) {
          color: var(--white2);
          font-size: var(--fs7);
      }
  
      .contact-info address { font-style: normal; }
  
  .contact-title {
      color: var(--light-gray70);
      font-size: var(--fs8);
      text-transform: uppercase;
      margin-bottom: 2px;
  }
  
  .social-list {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 15px;
      padding-bottom: 4px;
      padding-left: 7px;
  }
  
  .social-item .social-link {
      color: var(--light-gray70);
      font-size: 18px;
  }
  
      .social-item .social-link:hover { color: var(--light-gray); }
  
  /*NAVBAR*/
  
  .navbar {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: hsla(240, 1%, 17%, .75);
      backdrop-filter: blur(10px);
      border: 1px solid var(--jet);
      border-radius: 12px 12px 0 0;
      box-shadow: var(--shadow2);
      z-index: 5;
  }
  
  .navbar-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      padding: 0 10px;
  }
  
  .navbar-link {
      color: var(--light-gray);
      font-size: var(--fs8);
      padding: 20px 7px;
      transition: color var(--transition1);
  }
  
      .navbar-link:hover, .navbar-link:focus { color: var(--light-gray70); }
      .navbar-link.active { color: var(--orange-yellow-crayola); }
  
  /*ABOUT*/
  
  .about .article-title { 
      margin-bottom: 15px;
      margin-top: 15px;
  }
  
  .about-text {
      color: var(--light-gray);
      font-size: var(--fs6);
      font-weight: var(--fw300);
      line-height: 1.6;
  }
  
      .about-text p { 
          margin-bottom: 15px;
          text-align: justify;
          padding-left: 10px;
          padding-right: 10px;
       }
  
  .service { margin-bottom: 35px; }
  
  .service-title { margin-bottom: 20px; }
  
  .service-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
  }
  
  .service-item {
      position: relative;
      background: var(--border-gradient-onyx);
      padding: 20px;
      border-radius: 14px;
      box-shadow: var(--shadow2);
      z-index: 1;
  }
  
      .service-item::before {
          content: '';
          position: absolute;
          inset: 1px;
          background: var(--bg-gradient-jet);
          border-radius: inherit;
          z-index: -1;
      }

      .service-item ion-icon:hover { filter: var(--vegas-gold);}
  
  .service-icon-box { margin-bottom: 10px; }
      .service-icon-box ion-icon { margin: auto; filter: var(--vegas-gold);}   
  
  .service-content-box { text-align: center; }
  .service-item-title { margin-bottom: 7px; }
  
  .service-item-text {
      color: var(--light-gray);
      font-size: var(--fs6);
      font-weight: var(--fw300);
      line-height: 1.6;
  }
  
  /*TESTIMONIALS*/
  
  .testimonials { margin-bottom: 30px; }
  .testimonials-title { margin-bottom: 20px; }
  
  .testimonials-list {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 15px;
      margin: 0 -15px;
      padding: 25px 15px;
      padding-bottom: 35px;
      overflow-x: auto;
      scroll-behavior: smooth;
      overscroll-behavior-inline: contain;
      scroll-snap-type: inline mandatory;
  }
  
  .testimonials-item {
      min-width: 100%;
      scroll-snap-align: center;
  }
  
  .testimonials-avatar-box {
      position: absolute;
      top: 0;
      left: 0;
      transform: translate(15px, -25px);
      background: var(--bg-gradient-onyx);
      border-radius: 14px;
      box-shadow: var(--shadow1);
  }
  
  .testimonials-text {
      color: var(--light-gray);
      font-size: var(--fs6);
      font-weight: var(--fw300);
      line-height: 1.6;
      display: -webkit-box;
      line-clamp: 4;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
  }
  
  /*MODAL CONTAINER*/
  
  .modal-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow-y: auto;
      overscroll-behavior: contain;
      z-index: 20;
      pointer-events: none;
      visibility: hidden;
  }
  
      .modal-container::-webkit-scrollbar { display: none; }
  
      .modal-container.active {
          pointer-events: all;
          visibility: visible;
      }
  
          .modal-container.active .testimonials-modal {
              transform: scale(1);
              opacity: 1;
          }
  
  .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background: hsl(0, 0%, 5%);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      z-index: 1;
      transition: var(--transition1);
  }
  
      .overlay.active {
          opacity: .8;
          visibility: visible;
          pointer-events: all;
      }
  
  .testimonials-modal {
      background: var(--eerie-black2);
      position: relative;
      padding: 15px;
      margin: 15px 12px;
      border: 1px solid var(--jet);
      border-radius: 14px;
      box-shadow: var(--shadow5);
      transform: scale(1.2);
      opacity: 0;
      transition: var(--transition1);
      z-index: 2;
  }
  
  .modal-close-btn {
      position: absolute;
      top: 15px;
      right: 15px;
      background: var(--onyx);
      border-radius: 8px;
      width: 32px;
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--white2);
      font-size: 18px;
      opacity: .7;
  }
  
      .modal-close-btn:hover, .modal-close-btn:focus { opacity: 1; }
      .modal-close-btn ion-icon { --ionicon-stroke-width: 50px; }
  
  .modal-avatar-box {
      background: var(--bg-gradient-onyx);
      width: max-content;
      border-radius: 14px;
      margin-bottom: 15px;
      box-shadow: var(--shadow2);
  }
  
  .modal-img-wrapper > img { display: none; }
  
  .modal-title { margin-bottom: 4px; }
  
  .modal-content time {
      font-size: var(--fs6);
      color: var(--light-gray70);
      font-weight: var(--fw500);
      margin-bottom: 10px;
  }
  
  .modal-content p {
      color: var(--light-gray);
      font-size: var(--fs6);
      font-weight: var(--fw300);
      line-height: 1.6;
  }
  
  /*CLIENTS*/
  
  .clients { margin-bottom: 15px; }
  
  .clients-list {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 15px;
      margin: 0 -15px;
      padding: 25px;
      padding-bottom: 25px;
      overflow-x: auto;
      scroll-behavior: smooth;
      overscroll-behavior-inline: contain;
      scroll-snap-type: inline mandatory;
      scroll-padding-inline: 25px;
  }
  
  .clients-item {
      min-width: 50%;
      scroll-snap-align: start;
  }
  
      .clients-item img {
          width: 100%;
          filter: grayscale(1);
          transition: var(--transition1);
      }
  
          .clients-item img:hover { filter: grayscale(0);}
  
  /*RESUME*/
  
  .article-title { margin-bottom: 30px; }
  
  .timeline { margin-bottom: 30px; }
  
      .timeline .title-wrapper {
          display: flex;
          align-items: center;
          gap: 15px;
          margin-bottom: 25px;
      }
  
  .timeline-list {
      font-size: var(--fs6);
      margin-left: 45px;
  }
  
      .timeline-list span {
          color: var(--vegas-gold);
          font-weight: var(--fw400);
          line-height: 1.6;
      }
  
  .timeline-item { position: relative; }
  
      .timeline-item:not(:last-child) { margin-bottom: 20px; }
          .timeline-item:not(:last-child)::before {
              content: '';
              position: absolute;
              top: -25px;
              left: -30px;
              width: 1px;
              height: calc(100% + 50px);
              background: var(--jet);
          }
  
      .timeline-item::after {
          content: '';
          position: absolute;
          top: 5px;
          left: -33px;
          height: 6px;
          width: 6px;
          border-radius: 50%;
          background: var(--text-gradient-yellow);
          box-shadow: 0 0 0 4px var(--jet);
      }
  
  .timeline-item-title {
      font-size: var(--fs6);
      line-height: 1.3;
      margin-bottom: 7px;
  }
  
  .timeline-text {
      color: var(--light-gray);
      font-weight: var(--fw300);
      line-height: 1.6;
      text-align: justify;
  }
  
  /*SKILLS*/
  
  .skills-title { margin-bottom: 20px; }
  
  .skills-list { padding: 20px; }
  
  .skills-item:not(:last-child) {margin-bottom: 15px; }
  
  .skill .title-wrapper {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-bottom: 8px;
  }
  
      .skill .title-wrapper data {
          color: var(--light-gray);
          font-size: var(--fs7);
          font-weight: var(--fw300);
      }
  
  .skills-progress-bg {
      background: var(--jet);
      width: 100%;
      height: 8px;
      border-radius: 10px;
  }
  
  .skills-progress-fill {
      background: var(--text-gradient-yellow);
      height: 100%;
      border-radius: inherit;
  }
  
  /*PORTFOLIO*/
  
  .filter-list { display: none; }
  
  .filter-select-box { 
      position: relative;
      margin-bottom: 25px;
  }
  
  .filter-select {
      background: var(--eerie-black2);
      color: var(--light-gray);
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 12px 16px;
      border: 1px solid var(--jet);
      border-radius: 14px;
      font-size: var(--fs6);
      font-weight: var(--fw300);
  }
  
      .filter-select.active .select-icon { transform: rotate(0.5turn); }
  
  .select-list {
      background: var(--eerie-black2);
      position: absolute;
      top: calc(100% + 6px);
      width: 100%;
      padding: 6px;
      border: 1px solid var(--jet);
      border-radius: 14px;
      z-index: 2;
      visibility: hidden;
      pointer-events: none;
      transition: .5s ease-in-out;
  }
  
      .filter-select.active + .select-list {
          opacity: 1;
          visibility: visible;
          pointer-events: all;
      }
  
  .select-item button {
      background: var(--eerie-black2);
      color: var(--light-gray);
      font-size: var(--fs6);
      font-weight: var(--fw300);
      text-transform: capitalize;
      width: 100%;
      padding: 8px 10px;
      border-radius: 8px;
  }
  
      .select-item button:hover { --eerie-black2: hsl(240, 2%, 20%); }
  
  .project-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: 30px;
      margin-bottom: 10px;
  }
  
  .project-item { display: none; }
  
      .project-item.active {
          display: block;
          animation: scaleUp .25s ease forwards;
      }
  
          @keyframes scaleUp {
              0% { transform: scale(0.5); }
              100% { transform: scale(1); }
          }
  
      .project-item > a { width: 100%; }
  
  .project-img {
      position: relative;
      width: 100%;
      height: 200px;
      border-radius: 16px;
      overflow: hidden;
      margin-bottom: 15px;
  }
  
      .project-img img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: var(--transition1);
      }
  
      .project-img::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: transparent;
          z-index: 1;
          transition: var(--transition1);
      }
  
          .project-item > a:hover img { transform: scale(1.1); }
  
          .project-item > a:hover .project-img::before { background: hsla(0, 0%, 0%, .5); }
  
  .project-item-icon-box {
      --scale: .8;
  
      background: var(--jet);
      color: var(--orange-yellow-crayola);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(var(--scale));
      font-size: 20px;
      padding: 18px;
      border-radius: 12px;
      opacity: 0;
      z-index: 1;
      transition: var(--transition1);
  }
  
      .project-item > a:hover .project-item-icon-box {
          --scale: 1;
          opacity: 1;
      }
  
      .project-item-icon-box ion-icon { --ionicon-stroke-width: 50px; }
  
  .project-title, .project-category { margin-left: 10px; }
  
      .project-title {
          color: var(--white2);
          font-size: var(--fs5);
          font-weight: var(--fw400);
          text-transform: capitalize;
          line-height: 1.3;
      }
  
      .project-category {
          color: var(--light-gray70);
          font-size: var(--fs6);
          font-weight: var(--fw300);
      }
  
  /*BLOG*/
  
  .blog-posts { margin-bottom: 10px; }
  
  .blog-posts-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
  }
  
  .blog-posts-item > a {
      position: relative;
      background: var(--border-gradient-onyx);
      height: 100%;
      box-shadow: var(--shadow4);
      border-radius: 16px;
      z-index: 1;
  }
  
      .blog-posts-item > a::before {
          content: '';
          position: absolute;
          inset: 1px;
          border-radius: inherit;
          background: var(--eerie-black1);
          z-index: -1;
      }
  
  .blog-banner-box {
      width: 100%;
      height: 200px;
      border-radius: 12px;
      overflow: hidden;
  }
  
      .blog-banner-box img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: var(--transition1);
      }
  
  .blog-content { padding: 15px; }
  
  .blog-meta {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 7px;
      margin-bottom: 10px;
  }
  
      .blog-meta :is(.blog-category, time) {
          color: var(--light-gray70);
          font-size: var(--fs6);
          font-weight: var(--fw300);
      }
  
      .blog-meta .dot {
          background: var(--light-gray70);
          width: 4px;
          height: 4px;
          border-radius: 4px;
      }
  
  .blog-item-title {
      margin-bottom: 10px;
      line-height: 1.3;
      transition: var(--transition1);
  }
  
      .blog-post-item > a:hover .blog-item-title { color: var(--orange-yellow-crayola); }
  
  .blog-text {
      color: var(--light-gray);
      font-size: var(--fs6);
      font-weight: var(--fw300);
      line-height: 1.6;
      text-align: justify;
  }
  
  /*CONTACT*/
  
  .mapbox {
      position: relative;
      height: 250px;
      width: 100%;
      border-radius: 16px;
      margin-bottom: 30px;
      border: 1px solid var(--jet);
      overflow: hidden;
  }
  
      .mapbox figure { height: 100%; }
  
      .mapbox iframe {
          width: 100%;
          height: 100%;
          border: none;
          filter: grayscale(1) invert(1);
      }
  
  .contact-form { margin-bottom: 10px; }
  
  .form-title { margin-bottom: 20px; }
  
  .input-wrapper {
      display: grid;
      grid-template-columns: 1fr;
      gap: 25px;
      margin-bottom: 25px;
  }
  
  .form-input {
      color: var(--white2);
      font-size: var(--fs6);
      font-weight: var(--fw400);
      padding: 13px 20px;
      border: 1px solid var(--jet);
      border-radius: 14px;
      outline: none;
  }
  
      .form-input::placeholder { font-weight: var(--fw500); }
      .form-input:focus { border-color: var(--orange-yellow-crayola); }
          .form-input:focus:invalid { border-color: var(--bittersweet-shimmer); }
  
  textarea.form-input {
      min-height: 100px;
      height: 120px;
      max-height: 200px;
      resize: vertical;
      margin-bottom: 25px;
  }
  
      textarea.form-input::-webkit-realizer { display: none; }
  
  .form-btn {
      position: relative;
      width: 100%;
      background: var(--border-gradient-onyx);
      color: var(--orange-yellow-crayola);
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      padding: 13px 20px;
      border-radius: 14px;
      font-size: var(--fs6);
      text-transform: capitalize;
      box-shadow: var(--shadow3);
      z-index: 1;
      transition: var(--transition1);
  }
  
      .form-btn::before {
          content: '';
          position: absolute;
          inset: 1px;
          background: var(--bg-gradient-jet);
          border-radius: inherit;
          z-index: -1;
          transition: var(--transition1);
      }
  
      .form-btn ion-icon { font-size: 16px; }
      .form-btn:hover { background: var(--bg-gradient-yellow1); }
          .form-btn::before { background: var(--bg-gradient-yellow2); }
  
      .form-btn:disabled {
          opacity: .7;
          cursor: not-allowed;
      }
  
          .form-btn:disabled:hover { background: var(--border-gradient-onyx); }
              .form-btn:disabled:hover::before { background: var(--bg-gradient-jet); }
  
  
  /*MEDIA QUERIES*/
  
  @media (min-width: 450px) {
      .clients-item { min-width: calc(33.33% - 10px); }
  
      .project-img, .blog-banner-box { height: auto; }
  }
  
  @media (min-width: 580px) {
      :root {
          --fs1: 32px;
          --fs2: 24px;
          --fs3: 26px;
          --fs4: 18px;
          --fs6: 15px;
          --fs7: 15px;
          --fs8: 12px;
      }
  
      .sidebar, article {
          width: 950px;
          margin-inline: auto;
          padding: 30px;
      }
  
      .article-title {
          font-weight: var(--fw600);
          padding-bottom: 15px;
      }
  
          .article-title::after {
              width: 40px;
              height: 5px;
          }
  
      .icon-box {
          width: 48px;
          height: 48px;
          border-radius: 12px;
          font-size: 18px;
      }
  
      main {
          margin-top: 60px;
          margin-bottom: 100px;
      }
  
      .sidebar {
          max-height: 180px;
          margin-bottom: 30px;
      }
  
          .sidebar.active { max-height: 100%; }
  
      .sidebar-info { gap: 25px; }
  
      .avatar-box { border-radius: 30px; }
          .avatar-box img { width: 120px; }
  
      .info-content .name { margin-bottom: 15px; }
      .info-content .title { padding: 5px 10px; }
  
      .info-more-btn {
          top: -30px;
          right: -30px;
          padding: 10px 15px;
      }
  
          .info-more-btn span {
              display: block;
              font-size: var(--fs8);
          }
  
          .info-more-btn ion-icon { display: none; }
  
      .separator { margin: 32px 0; }
  
      .contacts-list { gap: 20px; }
  
      .contact-info {
          max-width: calc(100% - 64px);
          width: calc(100% - 64px);
      }
  
      .navbar { border-radius: 20px 20px 0 0; }
  
      .navbar-list { gap: 20px; }
      .navbar-link { --fs8: 14px; }
  
      .about .article-title { margin-bottom: 20px; }
      .about-text { margin-bottom: 40px; }
  
      .service-item {
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          gap: 18px;
          padding: 30px;
      }
  
      .service-icon-box {
          margin-bottom: 0;
          margin-top: 5px;
      }
  
      .service-content-box { text-align: left; }
  
      .testimonials-title { margin-bottom: 25px; }
  
      .testimonials-list {
          gap: 30px;
          margin: 0 -30px;
          padding: 30px;
          padding-bottom: 35px;
      }
  
      .content-card {
          padding: 30px;
          padding-top: 25px;
      }
  
      .testimonials-avatar-box {
          transform: translate(30px, -30px);
          border-radius: 28px;
      }
  
          .testimonials-avatar-box img { width: 80px; }
  
      .testimonials-item-title {
          margin-bottom: 10px;
          margin-left: 95px;
      }
  
      .testimonials-text {
          line-clamp: 2;
          -webkit-line-clamp: 2;
      }
  
      .modal-container {padding: 20px; }
  
      .testimonials-modal {
          display: flex;
          justify-content: flex-start;
          align-items: stretch;
          gap: 25px;
          padding: 30px;
          border-radius: 20px;
      }
  
      .modal-img-wrapper {
          display: flex;
          flex-direction: column;
          align-items: center;
      }
  
      .modal-avatar-box {
          border-radius: 18px;
          margin-bottom: 0;
      }
  
          .modal-avatar-box img { width: 65px; }
  
      .modal-img-wrapper > img {
          display: block;
          position: relative;
          /* flex-grow: 1; */
          width: 35px;
          top: 50px;
      }
  
      .clients-list {
          gap: 25px;
          margin: 0 -30px;
          padding: 45px;
          scroll-padding-inline: 45px;
      }
  
      .clients-item { min-width: calc(33..33% - 35px); }
  
      .timeline-list { margin-left: 65px; }
  
      .timeline-item:not(:last-child)::before { left: -40px; }
  
      .timeline-item::after {
          height: 8px;
          width: 8px;
          left: -43px;
      }
  
      .skills-item:not(:last-child) { margin-bottom: 25px; }
  
      .project-img, .blog-banner-box { border-radius: 16px; }
  
      .blog-posts-list { gap: 30px; }
  
      .blog-content { padding: 25px; }
  
      .mapbox {
          height: 380px;
          border-radius: 18px;
      }
  
      .input-wrapper {
          gap: 30px;
          margin-bottom: 30px;
      }
  
      .form-input { padding: 15px 20px; }
  
      textarea.form-input { margin-bottom: 30px; }
  
      .form-btn {
          --fs-6: 16px;
          padding: 16px 20px;
      }
  
          .form-btn ion-icon { font-size: 18px; }
  }
  
  @media (min-width: 768px) {
  
      .sidebar, article { width: 950px; }
  
      .has-scrollbar::-webkit-scrollbar-button { width: 100px; }
  
      .contacts-list {
          grid-template-columns: 1fr 1fr;
          gap: 30px 15px;
      }
  
      .navbar-link { --fs8: 15px; }
  
      .testimonials-modal {
          gap: 35px;
          max-width: 680px;
      }
  
      .modal-avatar-box img { width: 80px; }
  
      .article-title { padding-bottom: 20px; }
  
      .filter-select-box { display: none; }
  
      .filter-list {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          gap: 25px;
          padding-left: 5px;
          margin-bottom: 30px;
      }
  
      .filter-item button {
          color: var(--light-gray);
          font-size: var(--fs5);
          transition: var(--transition1);
      }
  
          .filter-item button:hover { color: var(--light-gray70); }
          .filter-item button.active { color: var(--orange-yellow-crayola); }
  
      .project-list, .blog-posts-list { grid-template-columns: 1fr 1fr; }
  
      .input-wrapper { grid-template-columns: 1fr 1fr; }
  
      .form-btn {
          width: max-content;
          margin-left: auto;
      }
  }
  
  @media (min-width: 1024px) {
  
      :root {
          --shadow1: -4px 8px 24px hsla(0, 0%, 0%, .125);
          --shadow2: 0px 16px 30px hsla(0, 0%, 0%, .125);
          --shadow3: 0px 16px 40px hsla(0, 0%, 0%, .125);
      }
  
      .sidebar, article {
          width: 950px;
          box-shadow: var(--shadow5);
      }
  
      main { margin-bottom: 60px; }
  
      .main-content {
          position: relative;
          width: max-content;
          margin: auto;
      }
  
      .navbar {
          position: absolute;
          bottom: auto;
          top: 0;
          left: auto;
          right: 0;
          width: max-content;
          border-radius: 0 20px;
          padding: 0 20px;
          box-shadow: none;
      }
  
      .navbar-list {
          gap: 30px;
          padding: 0 20px;
      }
  
      .navbar-link { font-weight: var(--fw500); }
  
      .service-list {
          grid-template-columns: 1fr 1fr;
          gap: 20px 25px;
      }
  
      .testimonials-item { min-width: calc(50% - 15px); }
  
      .modal-img-wrapper > img { top: 20px; }
  
      .clients-item { min-width: calc(25% - 15px); }
  
      .project-list { grid-template-columns: repeat(3, 1fr); }
  
      .blog-banner-box { height: 230px; }
  }
  
  @media (min-width: 1250px) {
  
      body::-webkit-scrollbar { width: 20px; }
      body::-webkit-scrollbar-track { background: none; }
  
      body::-webkit-scrollbar-thumb {
          border: 5px solid var(--smoky-black);
          background: var(--stroke);
          border-radius: 20px;;
      }
  
      body::-webkit-scrollbar-thumb:hover { background: hsla(0, 0%, 100%, 0.15); }
      body::-webkit-scrollbar-button { height: 60px; }
  
      .sidebar, article { width: 950px; }
  
      article { min-height: 100%; }
  
      main {
          max-width: 1200px;
          margin-inline: auto;
          display: flex;
          justify-content: center;
          align-items: stretch;
          gap: 25px;
      }
  
      .main-content {
          min-width: 75%;
          width: 75%;
          margin: 0;
      }
  
      .sidebar {
          position: sticky;
          top: 60px;
          max-height: max-content;
          height: 100%;
          margin-bottom: 0;
          padding-top: 60px;
          z-index: 1;
      }
  
      .sidebar-info { flex-direction: column; }
  
      .avatar-box img { width: 150px; }
  
      .info-content .name {
          white-space: nowrap;
          text-align: center;
      }
  
      .info-content .title { margin: auto; }
  
      .info-more-btn { display: none; }
  
      .sidebar-info-more {
          opacity: 1;
          visibility: visible;
      }
  
      .contacts-list { grid-template-columns: 1fr; }
  
      .contact-info :is(.contact-link) {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }
  
      .contact-info :is(.contact-link, time, address) {
          --fs7: 14px;
          font-weight: var(--fw300);
      }
  
      .separator:last-of-type {
          margin: 15px 0;
          opacity: 0;
      }
  
      .social-list { justify-content: center; }
  
      .timeline-text { max-width: 700px; }
  }