/*!*************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/layout/footer.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************/
footer {
  padding: 56px 0px 0px;

  .container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .top_footer {
      width: 100%;
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 24px;

      .left_top_footer {
        width: 100%;
        max-width: 290px;
      }

      .columns_top_footer {
        display: flex;
        justify-content: flex-end;
        gap: 24px;
        flex-wrap: wrap;

        .column_top_footer:nth-child(4) {
          div {
            display: flex;
            gap: 12px;
          }
        }
      }
    }

    .bottom_footer {
      border-top: 1px solid rgba(138, 138, 138, 0.5);
      padding: 26px 0px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      width: 100%;
      margin-top: 56px;

      .left_bottom_footer {
        display: flex;
        align-items: center;
      }
    }
  }
}

@media (max-width: 1224px) {
  footer {
    padding: 40px 20px 0px;
  }
}

@media (max-width: 800px) {
  footer {
    .top_footer {
      flex-direction: column;

      .columns_top_footer {
        flex-direction: column;
      }
    }

    .bottom_footer {
      flex-direction: column;
    }
  }
}

@media (max-width: 500px) {
  footer {
    .bottom_footer {
      .left_bottom_footer {
        flex-direction: column;
        align-items: center;
        gap: 8px;

        p.divider {
          display: none;
        }
      }
    }
  }
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/about/areas.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************/
.areas_about {
  padding: 128px 0px;

  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 64px;

    h2 {
      text-align: center;
    }

    .box_areas_about {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 16px;

      p {
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.05);
        background: #141414;
        padding: 32px 40px;
      }
    }

    .bottom_areas_about {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      gap: 16px;
    }
  }
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/about/ctaAbout.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************/
.cta_about {
  .container {
    width: 100%;
    background-image: url("/images/about/background-cta.png");
    display: flex;
    align-items: center;
    justify-content: end;
    padding: 128px 208px 128px 128px;
    border-radius: 64px;

    .right_cta_about {
      width: 100%;
      max-width: 392px;
    }

    @media (max-width: 1224px) {
      padding: 60px 20px;
      border-radius: 0px;
      background-position: top;
      justify-content: start;
    }
  }
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/about/experience.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************/
.experience_projects {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;

  .container h2 {
    padding-left: 124px;
  }
}

.experience_projects .video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -3;
  opacity: 0.25;
}

.experience_projects .video-overlay-gradient {
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: calc(100% + 4px);
  z-index: -1;
  background: linear-gradient(180deg, #0A0A0A 0%, #0A0A0A 2%, rgba(10, 10, 10, 0.00) 49.04%, #0A0A0A 98%, #0A0A0A 100%);
}

.experience_projects .video-overlay-base {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background: linear-gradient(150deg, #0A0A0A 0%, #151517 50%, #0A0A0A 100%);
  opacity: 0.7;
}

.experience_projects .container {
  position: relative;
  z-index: 1;
}

.experience-content {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 124px;
}

.experience_projects .container h2 {
  padding-left: 0;
}

.words-carousel {
  position: relative;
  height: 540px;
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.carousel-word {
  position: absolute;
  left: 0;
  top: 50%;
  height: 90px;
  display: flex;
  align-items: center;
  font-size: 64px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.3);
  transform: translateY(calc(-50% + (var(--position) * 90px)));
  transition:
    transform 0.5s ease,
    color 0.5s ease,
    font-weight 0.3s ease,
    opacity 0.5s ease;
  opacity: 1;
}

.carousel-word.active {
  color: #fff;
  font-weight: 600;
}

.carousel-word.no-transition {
  transition: none;
}

/* Tablet - menor que 768px */
@media (max-width: 767px) {
  .experience-content {
    padding-left: 60px;
    gap: 12px;
  }

  .experience_projects .container h2 {
    font-size: 48px;
  }

  .words-carousel {
    height: 400px;
    width: 220px;
  }

  .carousel-word {
    font-size: 48px;
    height: 70px;
    transform: translateY(calc(-50% + (var(--position) * 70px)));
  }
}

/* Mobile - menor que 500px */
@media (max-width: 499px) {
  .experience-content {
    align-items: center;
    justify-content: center;
    padding-left: 24px;
    gap: 8px;
  }

  .experience_projects .container h2 {
    font-size: 24px;
  }

  .words-carousel {
    height: 280px;
    width: 180px;
  }

  .carousel-word {
    font-size: 24px;
    height: 50px;
    transform: translateY(calc(-50% + (var(--position) * 50px)));
  }
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/about/hero.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************/
.hero_about {
  background-image: url("/images/about/background-hero.png");
  min-height: 740px;

  .hero_about_content {
    padding: 96px 0px;
    max-width: 691px;

    .buttons {
      display: flex;
      align-items: center;
      gap: 32px;
    }
  }
}

@media (max-width: 1224px) {
  .hero_about {
    .hero_about_content {
      padding: 80px 20px;
    }
  }
}

@media (max-width: 768px) {
  .hero_about {
    min-height: 600px;

    .hero_about_content {
      padding: 60px 20px;

      .buttons {
        flex-direction: column;
        gap: 16px;
      }
    }
  }
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/layout/header.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************/
header {
  background: transparent;
  position: relative;
  z-index: 100;

  nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0px;
    gap: 60px;

    ul {
      display: flex;
      align-items: center;
      gap: 24px;
    }
  }
}

/* Link hover e active states */
.link_header {
  position: relative;
  padding-bottom: 4px;
  cursor: pointer;
}

.link_header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1px;
  background-color: var(--primary);
  transition: width 0.3s ease, left 0.3s ease;
}

.link_header:hover::after,
.link_header.active::after {
  width: 100%;
  left: 0;
}

/* Dropdown */
.dropdown_container {
  position: relative;
}

.dropdown_container > .link_header {
  display: flex;
  align-items: center;
  gap: 4px;
}

.dropdown_container > .link_header img {
  transition: transform 0.3s ease;
}

.dropdown_container > .link_header img.rotated {
  transform: rotate(180deg);
}

.dropdown_menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
  border-radius: 8px;
  padding: 8px 0;
  min-width: 140px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  flex-direction: column;
  gap: 0;
  margin-top: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.dropdown_menu.open {
  opacity: 1;
  visibility: visible;
}

.dropdown_menu li {
  width: 100%;
}

.dropdown_link {
  display: block;
  padding: 10px 16px;
  color: var(--white);
  transition: background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.dropdown_link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--primary);
}

.dropdown_link.active {
  color: var(--primary);
}

/* Hamburger Button */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  cursor: pointer;
  z-index: 110;
  padding: 0;
}

.hamburger_line {
  width: 24px;
  height: 2px;
  background-color: var(--primary);
  transition: all 0.3s ease;
  transform-origin: center;
}

.hamburger_line:nth-child(1) {
  margin-bottom: 6px;
}

.hamburger_line:nth-child(3) {
  margin-top: 6px;
}

/* Hamburger Active State - X animation */
.hamburger.active .hamburger_line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger.active .hamburger_line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger.active .hamburger_line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobile Menu Overlay */
.mobile_menu_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
  z-index: 90;
}

.mobile_menu_overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Mobile Menu */
.mobile_menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 320px;
  height: 100%;
  background: #111;
  padding: 80px 24px 24px;
  transition: right 0.3s ease;
  z-index: 95;
  overflow-y: auto;
}

.mobile_menu.active {
  right: 0;
}

.mobile_menu_links {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile_menu_links li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile_link {
  display: block;
  padding: 16px 0;
  color: var(--white);
  transition: color 0.2s ease;
}

.mobile_link:hover {
  color: var(--primary);
}

.mobile_link.active {
  color: var(--primary);
}

.mobile_menu_button {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 24px;
}

/* Desktop - hide hamburger and mobile menu */
@media (min-width: 1225px) {
  .hamburger,
  .mobile_menu,
  .mobile_menu_overlay {
    display: none !important;
  }
}

/* Mobile/Tablet */
@media (max-width: 1224px) {
  header {
    nav {
      padding: 16px 20px;

      .list_links_header {
        display: none;
      }

      .button_header {
        display: none;
      }
    }
  }

  .hamburger {
    display: flex;
  }
}

/* Small mobile adjustments */
@media (max-width: 480px) {
  .mobile_menu {
    width: 100%;
    max-width: 100%;
  }
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/about/life.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************/
.life_about {
  padding: 128px 0px;
  display: flex;
  align-items: center;
  justify-content: center;

  h2 {
    width: 100%;
    max-width: 1016px;
  }
}

@media (max-width: 1390px) {
  .bg_black {
    display: none;
  }

  .life_about {
    padding: 60px 20px;
  }
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/about/principles.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************/
.principles_about {
  padding: 116px 0px;
  background-image: url("/images/about/background-solutions.png");

  .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 64px;
    flex-direction: column;

    .top_principles_about {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      max-width: 1016px;
    }

    .mid_principles_about {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
      flex-wrap: wrap;

      .card_principles_about {
        border-radius: 24px;
        background: rgba(20, 20, 20, 0.4);
        backdrop-filter: blur(8px);
        width: 100%;
        max-width: 288px;
        padding: 40px 32px;
        min-height: 292px;
      }
    }
  }

  @media (max-width: 1224px) {
    padding: 60px 20px;

    .container {
      .top_principles_about {
        align-items: start;
        text-align: start;
      }
    }
  }
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/architects/about.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************/
.about_architects {
  padding: 128px 0px;

  .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;

    .left_about_architects {
      width: 100%;
      max-width: 445px;
    }

    .right_about_architects {
      width: 100%;
      max-width: 715px;
    }
  }

  @media (max-width: 1224px) {
    padding: 60px 20px;
  }
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/architects/ctaArchitects.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************/
.cta_architects {
  .container {
    width: 100%;
    background-image: url("/images/architects/background-cta.png");
    display: flex;
    align-items: center;
    padding: 128px 0px 128px 128px;
    border-radius: 64px;

    .left_cta_architects {
      width: 100%;
      max-width: 620px;
    }

    @media (max-width: 1224px) {
      padding: 60px 20px;
      border-radius: 0px;
    }
  }
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/architects/hero.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************/
.hero_architects {
  background-image: url("/images/architects/background-hero.png");
  min-height: 740px;

  .hero_architects_content {
    padding: 96px 0px;
    max-width: 691px;

    .buttons {
      display: flex;
      align-items: center;
      gap: 32px;
    }
  }
}

@media (max-width: 1224px) {
  .hero_architects {
    .hero_architects_content {
      padding: 80px 20px;
    }
  }
}

@media (max-width: 768px) {
  .hero_architects {
    min-height: 600px;

    .hero_architects_content {
      padding: 60px 20px;

      .buttons {
        flex-direction: column;
        gap: 16px;
      }
    }
  }
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/architects/how.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************/
.how_architects {
  padding: 116px 0px;
  background-image: url("/images/architects/background-how.png");

  .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 64px;
    flex-direction: column;

    .top_how_architects {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      max-width: 808px;
    }

    .mid_how_architects {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
      flex-wrap: wrap;

      .card_how_architects {
        border-radius: 24px;
        background: rgba(20, 20, 20, 0.4);
        backdrop-filter: blur(8px);
        width: 100%;
        max-width: 288px;
        min-height: 404px;
        padding: 40px 32px;
      }
    }
  }

  @media (max-width: 1224px) {
    padding: 60px 20px;

    .container {
      .top_how_architects {
        align-items: start;
        text-align: start;
      }
    }
  }
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/architects/processArchitects.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************/
.process_architects {
  padding: 128px 0px;

  .container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 64px;

    .top_process {
      text-align: center;
    }

    .bottom_process {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;

      .card_process {
        width: 100%;
        max-width: 226px;
        height: 500px;
        padding: 56px 24px 220px 24px;
        text-align: center;
        cursor: pointer;
        transition: max-width 0.4s ease;
        overflow: hidden;

        p.body18 {
          opacity: 0;
          max-height: 0;
          overflow: hidden;
          transition:
            opacity 0.15s ease,
            max-height 0.2s ease;
        }
      }

      .card_process:nth-child(1) {
        background-image: url("/images/architects/process1.png");
      }

      .card_process:nth-child(2) {
        background-image: url("/images/architects/process2.png");
      }

      .card_process:nth-child(3) {
        background-image: url("/images/architects/process3.png");
      }

      .card_process:nth-child(4) {
        background-image: url("/images/architects/process4.png");
      }

      .card_process_active {
        max-width: 496px;

        p.body18 {
          opacity: 1;
          max-height: 200px;
          transition:
            opacity 0.3s ease 0.3s,
            max-height 0.4s ease;
        }
      }
    }
  }
}

@media (max-width: 1224px) {
  .process_architects {
    padding: 60px 0px 0px;
    .container {
      .bottom_process {
        .card_process {
          max-width: 496px;
          height: auto;

          p.body18 {
            opacity: 1;
            max-height: 200px;
          }
        }
      }
    }
  }
}

@media (max-width: 800px) {
  .process_architects {
    .container {
      .bottom_process {
        gap: 0px;
      }
    }
  }
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/architects/solutions.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************/
.solutions_architects {
  padding: 128px 0px;
  background: linear-gradient(150deg, #0a0a0a 0%, #151517 50%, #0a0a0a 100%);

  .container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 64px;

    .top_solutions_architects {
      width: 100%;
      max-width: 1016px;
      text-align: center;
      margin: 0 auto;
    }

    .mid_solutions_architects {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;

      .card_solutions_architects {
        width: 100%;
        max-width: 392px;
        padding: 40px 32px;
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.05);
        background: #141414;
      }
    }

    .bottom_solutions_architects {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 32px;
    }
  }

  @media (max-width: 1224px) {
    padding: 60px 20px;
  }

  @media (max-width: 600px) {
    .container .top_solutions_architects {
      text-align: start;
    }
  }
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/automations/choose.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************/
.choose_automation {
  background-image: url("/images/automation/background-choose.png");
  padding: 144px 0px 128px;

  .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;

    .left_choose_automation {
      width: 100%;
      max-width: 539px;
    }

    .right_choose_automation {
      width: 100%;
      max-width: 392px;
    }
  }

  @media (max-width: 1224px) {
    padding: 60px 20px;
  }
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/automations/cta-automations.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************/
.cta_automation {
  width: 100%;

  .container {
    background-image: url("/images/automation/background-cta.png");
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 96px;
    border-radius: 64px;

    .left_cta_automation {
      padding: 92px 0px;
      width: 100%;
      max-width: 473px;
    }

    .right_cta_automation {
      width: 100%;
      max-width: 463px;

      img {
        width: 100%;
        display: flex;
      }
    }
  }

  @media (max-width: 1224px) {
    .container {
      border-radius: 0px;
      flex-wrap: wrap;

      .left_cta_automation {
        padding: 60px 0px;
      }
    }
  }

  @media (max-width: 1000px) {
    .container {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 0px;

      .left_cta_automation {
        padding: 60px 0px 32px;
      }
    }
  }

  @media (max-width: 500px) {
    .container {
      padding: 0px 20px;
    }
  }
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/automations/hero.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************/
.hero_automation {
  background-image: url("/images/automation/background-hero.png");
  min-height: 740px;

  .hero_automation_content {
    padding: 96px 0px;
    max-width: 937px;

    .buttons_hero {
      display: flex;
      align-items: center;
      gap: 32px;
    }
  }
}

@media (max-width: 1224px) {
  .hero_automation {
    .hero_automation_content {
      padding: 80px 20px;
    }
  }
}

@media (max-width: 768px) {
  .hero_automation {
    min-height: 400px;

    .hero_automation_content {
      padding: 60px 20px;

      .buttons_hero {
        flex-direction: column;
        gap: 16px;
      }
    }
  }
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/automations/life.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************/
.life_automation {
  padding: 128px 0px;
  background-image: url("/images/automation/background-life.png");

  h2 {
    width: 100%;
    max-width: 1016px;
    margin: 0 auto;
  }

  @media (max-width: 1224px) {
    padding: 60px 20px;
  }
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/contact/about.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************/
.about_contact {
  padding: 128px 0px;

  .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;

    .left_about_contact {
      width: 100%;
      max-width: 445px;
    }

    .right_about_contact {
      width: 100%;
      max-width: 715px;
    }
  }

  @media (max-width: 1224px) {
    padding: 60px 20px;
  }
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/contact/ctaContact.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************/
.cta_contact {
  .container {
    width: 100%;
    background-image: url("/images/contact/background-cta.png");
    display: flex;
    align-items: center;
    padding: 125px 0px 125px 128px;
    border-radius: 64px;

    .left_cta_contact {
      width: 100%;
      max-width: 495px;
    }

    @media (max-width: 1224px) {
      padding: 60px 20px;
      border-radius: 0px;
    }
  }
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/contact/form.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************/
.form_contact {
  background: linear-gradient(150deg, #0a0a0a 0%, #151517 50%, #0a0a0a 100%);
  padding: 96px 0px;

  .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;

    .left_form_contact {
      width: 100%;
      max-width: 464px;

      .divider_contact {
        width: 100%;
        border: none;
        height: 1px;
        background: rgba(138, 138, 138, 0.5);
      }
    }

    .right_form_contact {
      width: 100%;
      max-width: 651px;

      form {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 32px;

        .alert_success {
          width: 100%;
          padding: 16px;
          background: rgba(34, 197, 94, 0.15);
          border: 1px solid rgba(34, 197, 94, 0.4);
          border-radius: 8px;
          color: #4ade80;
        }

        .alert_error {
          width: 100%;
          padding: 16px;
          background: rgba(239, 68, 68, 0.15);
          border: 1px solid rgba(239, 68, 68, 0.4);
          border-radius: 8px;
          color: #f87171;
        }

        .input_box {
          width: 100%;
        }

        input,
        textarea,
        select {
          width: 100%;
          padding: 14px 0px;
          background: transparent;
          border: none;
          outline: none;
          border-bottom: 1px solid #3a3a3a;
        }

        select {
          cursor: pointer;
        }

        select option {
          background: #0a0a0a;
          color: #ffffff;
          padding: 12px;
        }

        .double_input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 32px;
        }

        button:disabled {
          opacity: 0.7;
          cursor: not-allowed;
        }

        .loading_button {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
        }

        .spinner {
          width: 16px;
          height: 16px;
          border: 2px solid rgba(255, 255, 255, 0.3);
          border-top-color: #ffffff;
          border-radius: 50%;
          animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
          to {
            transform: rotate(360deg);
          }
        }
      }
    }
  }

  @media (max-width: 1224px) {
    padding: 60px 20px;

    .container {
      justify-content: center;
    }
  }
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/contact/hero.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************/
.hero_contact {
  background-image: url("/images/contact/background-hero.png");
  min-height: 548px;

  .hero_contact_content {
    padding: 96px 0px;
    max-width: 519px;

    .buttons {
      display: flex;
      align-items: center;
      gap: 32px;
    }
  }
}

@media (max-width: 1224px) {
  .hero_contact {
    .hero_contact_content {
      padding: 80px 20px;
    }
  }
}

@media (max-width: 768px) {
  .hero_contact {
    min-height: 600px;

    .hero_contact_content {
      padding: 60px 20px;

      .buttons {
        flex-direction: column;
        gap: 16px;
      }
    }
  }
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/faq/ctaFaq.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************/
.cta_faq {
  .container {
    width: 100%;
    background-image: url("/images/faq/background-cta.png");
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 125px 0px 125px 128px;
    border-radius: 64px;

    .center_cta_faq {
      width: 100%;
      max-width: 946px;
    }

    .buttons {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    @media (max-width: 1224px) {
      padding: 60px 20px;
      border-radius: 0px;
    }
  }
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/faq/faq.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************/
.faq_section {
  padding: 96px 0px;

  .container {
    max-width: 1016px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 64px;

    .top_faq_section {
      text-align: center;

      .categories {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 16px;

        a {
          border-radius: 250px;
          background: #141414;
          backdrop-filter: blur(2px);
          padding: 8px 16px;
        }
      }
    }

    .bottom_faq_section {
      display: flex;
      flex-direction: column;
      gap: 48px;

      .content_faq_box {
        display: flex;
        flex-direction: column;

        .faq_item {
          border-top: 1px solid rgba(255, 255, 255, 0.1);

          .faq_question {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 24px 0;
            cursor: pointer;

            .faq_icon {
              width: 24px;
              height: 24px;
              transition: transform 0.3s ease;
            }
          }

          .faq_answer {
            display: none;
            padding-bottom: 24px;
          }
        }

        .faq_item:last-child {
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .faq_item_active {
          .faq_question {
            .faq_icon {
              transform: rotate(45deg);
            }
          }

          .faq_answer {
            display: block;
          }
        }
      }
    }
  }
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/faq/hero.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
.hero_faq {
  background-image: url("/images/faq/background-hero.png");
  min-height: 548px;

  .hero_faq_content {
    padding: 78px 0px;
    max-width: 652px;

    .buttons {
      display: flex;
      align-items: center;
      gap: 32px;
    }
  }
}

@media (max-width: 1224px) {
  .hero_faq {
    .hero_faq_content {
      padding: 80px 20px;
    }
  }
}

@media (max-width: 768px) {
  .hero_faq {
    min-height: 600px;

    .hero_faq_content {
      padding: 60px 20px;

      .buttons {
        flex-direction: column;
        gap: 16px;
      }
    }
  }
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/full-home/about.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************/
.about_full {
  padding: 128px 0px;
  background-image: url("/images/full-home/background-about.png");

  .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;

    .left_about_full {
      width: 100%;
      max-width: 445px;
    }

    .right_about_full {
      width: 100%;
      max-width: 715px;
    }
  }

  @media (max-width: 1224px) {
    padding: 60px 20px;
  }
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/full-home/benefits.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************/
.benefits_full {
  padding: 116px 0px;
  background-image: url("/images/full-home/background-benefits.png");
  background-position: bottom;

  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    h2 {
      margin-bottom: 64px;
      text-align: center;
    }

    .cards_benefits_full {
      width: 100%;
      display: flex;
      gap: 24px;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;

      .card_benefits_full {
        border-radius: 24px;
        background: rgba(20, 20, 20, 0.4);
        backdrop-filter: blur(8px);
        width: 100%;
        max-width: 288px;
        min-height: 376px;
        padding: 40px 32px;
      }
    }

    .buttons {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      margin-top: 323px;

      @media (max-width: 1224px) {
        margin-top: 600px;
      }

      @media (max-width: 600px) {
        margin-top: 24px;
      }
    }
  }

  @media (max-width: 1224px) {
    padding: 60px 20px;
    background-position: right;
  }
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/full-home/hero.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************/
.hero_full {
  background-image: url("/images/full-home/background-hero.png");
  min-height: 740px;

  .hero_full_content {
    padding: 96px 0px;
    max-width: 965px;

    .buttons {
      display: flex;
      align-items: center;
      gap: 32px;
    }
  }
}

@media (max-width: 1224px) {
  .hero_full {
    .hero_full_content {
      padding: 80px 20px;
    }
  }
}

@media (max-width: 768px) {
  .hero_full {
    min-height: 600px;

    .hero_full_content {
      padding: 60px 20px;

      .buttons {
        flex-direction: column;
        gap: 16px;
      }
    }
  }
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/full-home/solutions.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************/
.solutions_full {
  padding: 128px 0px;
  background: linear-gradient(150deg, #0a0a0a 0%, #151517 50%, #0a0a0a 100%);

  .container {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 60px;

    h2 {
      text-align: center;
    }

    .cards_solutions_full {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 24px;

      .card_solutions_full {
        width: 100%;
        max-width: 392px;
        height: 406px;
        padding: 40px;
        display: flex;
        align-items: center;
        flex-direction: column;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        text-align: center;
      }

      .card_solutions_full:nth-child(1) {
        background-image: url("/images/full-home/solutions1.png");
      }

      .card_solutions_full:nth-child(2) {
        background-image: url("/images/full-home/solutions2.png");
      }

      .card_solutions_full:nth-child(3) {
        background-image: url("/images/full-home/solutions3.png");
      }

      .card_solutions_full:nth-child(4) {
        background-image: url("/images/full-home/solutions4.png");
      }

      .card_solutions_full:nth-child(5) {
        background-image: url("/images/full-home/solutions5.png");
      }

      .card_solutions_full:nth-child(6) {
        background-image: url("/images/full-home/solutions6.png");
      }
    }
  }

  @media (max-width: 1224px) {
    padding: 60px 20px;
  }
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/full-home/who.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************/
.who_full {
  padding: 128px 0px;
  background-image: url("/images/full-home/background-who.png");

  .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 64px;
    flex-direction: column;

    .top_who_full {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .mid_who_full {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
      flex-wrap: wrap;

      .card_who_full {
        border-radius: 24px;
        background: rgba(20, 20, 20, 0.4);
        backdrop-filter: blur(8px);
        width: 100%;
        max-width: 392px;
        min-height: 306px;
        padding: 40px 32px;
      }
    }

    .bottom_who_full {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
      flex-wrap: wrap;
    }
  }

  @media (max-width: 1224px) {
    padding: 60px 20px;

    .container {
      .top_who_full {
        align-items: start;
        text-align: start;
      }
    }
  }
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/home/extanded.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************/
.extanded {
  padding: 128px 0px;
  background: linear-gradient(150deg, #0a0a0a 0%, #151517 50%, #0a0a0a 100%);

  .container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 80px;

    .top_extanded {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap;

      .left_top_extanded {
        width: 100%;
        max-width: 536px;
      }

      .right_top_extanded {
        width: 100%;
        max-width: 624px;
      }
    }

    .mid_extanded {
      width: 100%;

      img {
        width: 100%;
        height: auto;
      }
    }

    .bottom_extanded {
      width: 100%;
      text-align: center;
    }
  }
}

@media (max-width: 1224px) {
  .extanded {
    padding: 60px 20px;
  }
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/home/featured.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************/
.featured {
  padding: 156px 0px;
  background-image: url("/images/home/background-featured.png");

  .featured_content {
    max-width: 630px;
  }
}

@media (max-width: 1224px) {
  .featured {
    padding: 60px 20px;
  }
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/home/hero.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/
.hero {
  background-image: url("/images/home/background-hero.png");
  min-height: 920px;

  .hero_content {
    padding: 112px 0px;
    max-width: 912px;

    .buttons_hero {
      display: flex;
      align-items: center;
      gap: 32px;
    }
  }
}

@media (max-width: 1224px) {
  .hero {
    .hero_content {
      padding: 80px 20px;
    }
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: 600px;
    
    .hero_content {
      padding: 60px 20px;

      .buttons_hero {
        flex-direction: column;
        gap: 16px;
      }
    }
  }
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/home/life.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/
.life {
  padding: 112px 0px;
  display: flex;
  align-items: center;
  justify-content: center;

  h2 {
    width: 100%;
    max-width: 808px;
    letter-spacing: normal;
  }
}

.bg_black {
  height: 376px;
}

@media (max-width: 1390px) {
  .bg_black {
    display: none;
  }

  .life {
    padding: 60px 20px;
  }
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/home/solutions.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************/
.solutions {
  min-height: 1848px;
  background-color: #fff;
  position: relative;

  .container_solutions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    position: absolute;
    top: -359px;

    .card_solutions {
      width: 100%;
      max-width: 696px;
      height: 720px;
      padding: 56px 40px;
      display: flex;
      align-items: center;
      flex-direction: column;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      text-align: center;
    }

    .card_solutions:nth-child(1) {
      background-image: url("/images/home/solution1.png");
    }

    .card_solutions:nth-child(2) {
      background-image: url("/images/home/solution2.png");
    }

    .card_solutions:nth-child(3) {
      background-image: url("/images/home/solution3.png");
    }

    .card_solutions:nth-child(4) {
      background-image: url("/images/home/solution4.png");
    }

    .card_solutions:nth-child(5) {
      background-image: url("/images/home/solution5.png");
    }

    .card_solutions:nth-child(6) {
      background-image: url("/images/home/solution6.png");
    }
  }
}

@media (max-width: 1390px) {
  .solutions {
    padding: 32px 0px;
    .container_solutions {
      position: relative;
      top: 0;
    }
  }
}

@media (max-width: 900px) {
  .solutions {
    padding: 0px;

    .container_solutions {
      gap: 0px;
      position: relative;
      top: 0;

      .card_solutions {
        max-width: 100%;
      }
    }
  }
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[3]!./app/(site)/components/pages/NotFoundPage.module.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************/
/* NotFoundPage Styles */
.NotFoundPage_notFound__JNDrB {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: #f9fafb;
}

.NotFoundPage_content__9y87D {
  text-align: center;
  max-width: 500px;
}

.NotFoundPage_title__tCN3g {
  font-size: 8rem;
  font-weight: 700;
  color: #e5e7eb;
  line-height: 1;
  margin-bottom: 1rem;
}

.NotFoundPage_subtitle__6Bx3l {
  font-size: 1.5rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 1rem;
}

.NotFoundPage_description__FdlON {
  color: #6b7280;
  margin-bottom: 2rem;
}

.NotFoundPage_btn__ix_GQ {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  background: #2563eb;
  color: white;
  font-weight: 500;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background 0.2s;
}

.NotFoundPage_btn__ix_GQ:hover {
  background: #1d4ed8;
}

@media (min-width: 768px) {
  .NotFoundPage_title__tCN3g {
    font-size: 10rem;
  }

  .NotFoundPage_subtitle__6Bx3l {
    font-size: 2rem;
  }
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/projects/experience.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************/
.experience_projects {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;

  .container h2 {
    padding-left: 124px;
  }
}

.experience_projects .video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -3;
  opacity: 0.25;
}

.experience_projects .video-overlay-gradient {
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: calc(100% + 4px);
  z-index: -1;
  background: linear-gradient(180deg, #0A0A0A 0%, #0A0A0A 2%, rgba(10, 10, 10, 0.00) 49.04%, #0A0A0A 98%, #0A0A0A 100%);
}

.experience_projects .video-overlay-base {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background: linear-gradient(150deg, #0A0A0A 0%, #151517 50%, #0A0A0A 100%);
  opacity: 0.7;
}

.experience_projects .container {
  position: relative;
  z-index: 1;
}

.experience-content {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 124px;
}

.experience_projects .container h2 {
  padding-left: 0;
}

.words-carousel {
  position: relative;
  height: 540px;
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.carousel-word {
  position: absolute;
  left: 0;
  top: 50%;
  height: 90px;
  display: flex;
  align-items: center;
  font-size: 64px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.3);
  transform: translateY(calc(-50% + (var(--position) * 90px)));
  transition:
    transform 0.5s ease,
    color 0.5s ease,
    font-weight 0.3s ease,
    opacity 0.5s ease;
  opacity: 1;
}

.carousel-word.active {
  color: #fff;
  font-weight: 600;
}

.carousel-word.no-transition {
  transition: none;
}

/* Tablet - menor que 768px */
@media (max-width: 767px) {
  .experience-content {
    padding-left: 60px;
    gap: 12px;
  }

  .experience_projects .container h2 {
    font-size: 48px;
  }

  .words-carousel {
    height: 400px;
    width: 220px;
  }

  .carousel-word {
    font-size: 48px;
    height: 70px;
    transform: translateY(calc(-50% + (var(--position) * 70px)));
  }
}

/* Mobile - menor que 500px */
@media (max-width: 499px) {
  .experience-content {
    align-items: center;
    justify-content: center;
    padding-left: 24px;
    gap: 8px;
  }

  .experience_projects .container h2 {
    font-size: 24px;
  }

  .words-carousel {
    height: 280px;
    width: 180px;
  }

  .carousel-word {
    font-size: 24px;
    height: 50px;
    transform: translateY(calc(-50% + (var(--position) * 50px)));
  }
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/projects/hero.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************/
.hero_projects {
  background-image: url("/images/projects/background-hero.png");
  min-height: 740px;

  .hero_projects_content {
    padding: 96px 0px;
    max-width: 937px;
  }
}

@media (max-width: 1224px) {
  .hero_projects {
    .hero_projects_content {
      padding: 80px 20px;
    }
  }
}

@media (max-width: 768px) {
  .hero_projects {
    min-height: 400px;

    .hero_projects_content {
      padding: 60px 20px;
    }
  }
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/projects/projects.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************/
.projects_page {
  padding: 128px 0px;

  .container {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 64px;

    .top_projects_page {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
      flex-wrap: wrap;

      .card_projects_page {
        width: 600px;
        height: 600px;
        display: flex;
        align-items: start;
        justify-content: end;
        flex-direction: column;
        padding: 32px;
        cursor: pointer;
        transition: transform 0.3s ease;

        &:hover {
          transform: scale(1.02);
        }

        @media (max-width: 1224px) {
          width: 400px;
          height: 400px;
        }

        @media (max-width: 800px) {
          width: 350px;
          height: 350px;
        }

        @media (max-width: 400px) {
          width: 100%;
          height: 300px;
        }
      }
    }
  }

  @media (max-width: 1224px) {
    padding: 60px 20px;
  }
}

/* Project Modal */
.project_modal_overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.project_modal {
  background: #1a1a1a;
  border-radius: 16px;
  width: 100%;
  max-width: 1000px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  position: relative;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.project_modal_close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  transition: background 0.2s ease;
  z-index: 10;

  &:hover {
    background: rgba(255, 255, 255, 0.2);
  }
}

.project_modal_title {
  padding: 24px 24px 0;
  text-align: center;
}

.project_modal_tabs {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 24px;
}

.project_modal_tab {
  padding: 12px 32px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgba(255, 255, 255, 0.1);
  color: #a0a0a0;
  text-transform: uppercase;
  letter-spacing: 0.5px;

  &:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.15);
  }

  &.active {
    background: var(--primary, #dc2626);
    color: white;
  }

  &:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
}

.project_modal_content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 24px;
  min-height: 400px;
  overflow: hidden;
}

.project_modal_media {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 60vh;

  img {
    max-width: 100%;
    max-height: 60vh;
    -o-object-fit: contain;
       object-fit: contain;
    border-radius: 8px;
  }

  video {
    max-width: 100%;
    max-height: 60vh;
    border-radius: 8px;
  }
}

.project_modal_arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  transition: all 0.2s ease;
  z-index: 5;

  &:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-50%) scale(1.1);
  }
}

.project_modal_arrow_left {
  left: 32px;
}

.project_modal_arrow_right {
  right: 32px;
}

.project_modal_counter {
  text-align: center;
  padding: 16px 24px 24px;
  color: #a0a0a0;
  font-size: 14px;
}

/* Responsive modal */
@media (max-width: 768px) {
  .project_modal_overlay {
    padding: 10px;
  }

  .project_modal {
    max-height: 95vh;
    border-radius: 12px;
  }

  .project_modal_title {
    padding: 20px 20px 0;
    font-size: 24px;
  }

  .project_modal_tabs {
    padding: 16px;
    gap: 8px;
  }

  .project_modal_tab {
    padding: 10px 20px;
    font-size: 12px;
  }

  .project_modal_content {
    padding: 0 16px;
    min-height: 300px;
  }

  .project_modal_media {
    max-height: 50vh;

    img,
    video {
      max-height: 50vh;
    }
  }

  .project_modal_arrow {
    width: 40px;
    height: 40px;
  }

  .project_modal_arrow_left {
    left: 8px;
  }

  .project_modal_arrow_right {
    right: 8px;
  }

  .project_modal_close {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 480px) {
  .project_modal_tabs {
    flex-direction: column;
    gap: 8px;
  }

  .project_modal_tab {
    width: 100%;
  }

  .project_modal_arrow {
    width: 36px;
    height: 36px;
  }

  .project_modal_arrow_left {
    left: 4px;
  }

  .project_modal_arrow_right {
    right: 4px;
  }
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/solutions/about.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************/
.about_solution {
  padding: 128px 0px;

  .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;

    .left_about_solution {
      width: 100%;
      max-width: 496px;
    }

    .right_about_solution {
      width: 100%;
      max-width: 664px;
    }
  }
  @media (max-width: 1224px) {
    padding: 60px 20px;
  }
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/solutions/hero.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************/
.hero_solution {
  background-image: url("/images/solutions/background-hero.png");
  min-height: 740px;

  .hero_solution_content {
    padding: 104px 0px;
    max-width: 703px;

    .tags {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;

      .tag {
        border-radius: 250px;
        background: rgba(20, 20, 20, 0.6);
        backdrop-filter: blur(2px);
        display: flex;
        padding: 8px 16px;
        justify-content: center;
        align-items: center;
        gap: 8px;
      }
    }
  }
}

@media (max-width: 1224px) {
  .hero_solution {
    .hero_solution_content {
      padding: 80px 20px;
    }
  }
}

@media (max-width: 768px) {
  .hero_solution {
    min-height: 600px;

    .hero_solution_content {
      padding: 60px 20px;
    }
  }
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/pages/solutions/solutions.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************/
.solutions_page {
  /* Grid: 50% imagem, 50% conteúdo */
  .solution_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 600px;
    background: linear-gradient(150deg, #0a0a0a 0%, #151517 50%, #0a0a0a 100%);

    @media (min-width: 1440px) {
      max-height: 800px;
    }
  }

  /* Wrapper do conteúdo - centraliza horizontalmente com gap de 80px da imagem */
  .solution_content {
    width: 100%;
    max-width: 532px;
    padding: 124px 0px;
    margin-left: auto;
    margin-right: 80px;
  }

  /* Reversed: imagem à esquerda, conteúdo à direita */
  .solution_block.reversed .solution_content {
    margin-left: 80px;
    margin-right: auto;
  }

  .solution_block.reversed .solution_grid {
    direction: rtl;
  }

  .solution_block.reversed .solution_grid > * {
    direction: ltr;
  }

  /* Imagem ocupa 100% da célula */
  .solution_image {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .solution_image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

  .solution_block {
    background-color: var(--dark);
  }

  .solution_bullets {
    margin-bottom: 32px;
  }

  .solution_bullets ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .solution_bullets li {
    position: relative;
    padding-left: 16px;
    display: flex;
    align-items: center;
  }

  .solution_bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 8px;
    height: 2px;
    background-color: var(--primary);
  }

  /* Responsivo */
  @media (max-width: 900px) {
    .solution_grid {
      grid-template-columns: 1fr;
      min-height: auto;
    }

    .solution_content {
      order: 1;
      max-width: 100%;
      padding: 60px 20px;
      margin: 0;
    }

    .solution_block.reversed .solution_content {
      margin: 0;
    }

    .solution_block.reversed .solution_grid {
      direction: ltr;
    }

    .solution_image {
      order: 2;
      min-height: 300px;
    }
  }
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/shared/cta.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
.cta {
  .container {
    background-image: url("/images/components/background-cta.png");
    padding: 128px 0px 128px 128px;

    .content_cta {
      width: 100%;
      max-width: 640px;
    }
  }
}

@media (max-width: 1224px) {
  .cta {
    .container {
      background-image: url("/images/components/background-cta2.png");
      padding: 64px 20px;
      background-position: center;
    }
  }
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/shared/process.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
.process {
  padding: 128px 0px;

  .container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 64px;

    .top_process {
      text-align: center;
    }

    .bottom_process {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;

      .card_process {
        width: 100%;
        max-width: 226px;
        height: 500px;
        padding: 56px 24px 220px 24px;
        text-align: center;
        cursor: pointer;
        transition: max-width 0.4s ease;
        overflow: hidden;

        p.body18 {
          opacity: 0;
          max-height: 0;
          overflow: hidden;
          transition:
            opacity 0.15s ease,
            max-height 0.2s ease;
        }
      }

      .card_process:nth-child(1) {
        background-image: url("/images/components/process1.png");
      }

      .card_process:nth-child(2) {
        background-image: url("/images/components/process2.png");
      }

      .card_process:nth-child(3) {
        background-image: url("/images/components/process3.png");
      }

      .card_process:nth-child(4) {
        background-image: url("/images/components/process4.png");
      }

      .card_process_active {
        max-width: 496px;

        p.body18 {
          opacity: 1;
          max-height: 200px;
          transition:
            opacity 0.3s ease 0.3s,
            max-height 0.4s ease;
        }
      }
    }
  }
}

@media (max-width: 1224px) {
  .process {
    padding: 60px 0px 0px;
    .container {
      .bottom_process {
        .card_process {
          max-width: 496px;
          height: auto;

          p.body18 {
            opacity: 1;
            max-height: 200px;
          }
        }
      }
    }
  }
}

@media (max-width: 800px) {
  .process {
    .container {
      .bottom_process {
        gap: 0px;
      }
    }
  }
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(site)/components/shared/sidebar.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
/* Sidebar Overlay */
.sidebar_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 998;
}

.sidebar_overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Sidebar Container */
.sidebar_form {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 480px;
  height: 100%;
  background: linear-gradient(150deg, #0a0a0a 0%, #151517 50%, #0a0a0a 100%);
  padding: 32px;
  overflow-y: auto;
  transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 999;
  display: flex;
  flex-direction: column;
}

.sidebar_form.active {
  right: 0;
}

/* Sidebar Header */
.sidebar_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.sidebar_close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  cursor: pointer;
  transition: background 0.2s ease;
}

.sidebar_close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Sidebar Form Content */
.sidebar_form_content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

.sidebar_form_content .input_box {
  width: 100%;
}

.sidebar_form_content .alert_success {
  width: 100%;
  padding: 12px 16px;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 8px;
  color: #4ade80;
}

.sidebar_form_content .alert_error {
  width: 100%;
  padding: 12px 16px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 8px;
  color: #f87171;
}

.input_sidebar,
.input_sidebar_select {
  width: 100%;
  padding: 12px 0px;
  background: transparent;
  border: none;
  outline: none;
  border-bottom: 1px solid #3a3a3a;
  transition: border-color 0.2s ease;
}

.input_sidebar:focus,
.input_sidebar_select:focus {
  border-color: var(--primary);
}

.input_sidebar_select {
  cursor: pointer;
}

.input_sidebar_select option {
  background: #0a0a0a;
  color: #ffffff;
  padding: 12px;
}

.sidebar_form_content textarea.input_sidebar {
  resize: none;
  min-height: 80px;
}

.sidebar_submit {
  width: 100%;
  margin-top: 8px;
}

.sidebar_submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.sidebar_form_content .loading_button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sidebar_form_content .spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.sidebar_form_content .text-center {
  text-align: center;
}

/* Mobile adjustments */
@media (max-width: 520px) {
  .sidebar_form {
    max-width: 100%;
    padding: 24px 20px;
  }

  .sidebar_header h2 {
    font-size: 20px;
  }
}