:root {
  /* BRAND COLORS */
  --dark-green-10: #0c2717;
  --grey-brown-75: #cbc4b4;
  --green-15: #123b24;
  --green-25: #1c6437;
  --grey-brown-30: #564f43;
  --light-green-75: #b3daa5;
  --light-green: #5ca044;
  --orange: #db722e;
  --orange-light: #f19b49;
  --yellow: #efb24f;

  /* BROWN COLORS */
  --brown-8: #1c170c;
  --brown-10: #241c0f;
  --brown-15: #372c18;
  --brown-25: #594727;

  /* BEIGE COLORS */
  --beige-01: #f9f8f6;
  --beige-02: #f0eee9;
  --beige-03: #eae8e1;
  --beige-04: #dfdcd2;
  --beige-05: #d5d1c3;
  --beige-06: #cac5b4;
  --beige-07: #c0baa5;
  --beige-08: #b5ae96;
  --beige-70: #d7c38e;
  --beige-80: #e5d7b3;
  --beige-85: #ebe1c7;
  --beige-90: #f2ebd9;
  --beige-95: #f8f5ec;

  /* NEUTRAL COLORS */
  --white: #ffffff;
  --neutral-01: #fafafa;
  --neutral-02: #f2f2f2;
  --neutral-03: #e5e5e5;
  --neutral-04: #d9d9d9;
  --neutral-05: #cccccc;
  --neutral-06: #bfbfbf;
  --neutral-07: #b3b3b3;
  --neutral-08: #a5a5a5;
  --neutral-09: #999999;
  --neutral-10: #8d8d8d;
  --neutral-11: #808080;
  --neutral-12: #737373;
  --neutral-13: #666666;
  --neutral-14: #595959;
  --neutral-15: #4d4d4d;
  --neutral-16: #404040;
  --neutral-17: #343434;
  --neutral-18: #272727;
  --neutral-19: #1a1a1a;
  --neutral-20: #0d0d0d;
  --black: #000000;

  /* FONT WEIGHT */
  --light: 300;
  --regular: 400;
  --medium: 500;
  --semiBold: 600;
  --bold: 700;
  --extraBold: 800;

  /* FILTERS */
  --filter-black: brightness(0) saturate(100%);
  --filter-white: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(340deg) brightness(104%) contrast(104%);
  --filter-beige-80: brightness(0) saturate(100%) invert(94%) sepia(9%) saturate(930%) hue-rotate(345deg) brightness(96%) contrast(87%);
  --filter-beige-90: brightness(0) saturate(100%) invert(93%) sepia(2%) saturate(3055%) hue-rotate(44deg) brightness(114%) contrast(89%);
}

/*-----------------------------------*\
  #DESIGN
\*-----------------------------------*/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: var(--brown-10);

  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 14px;
}

html {
  scroll-behavior: smooth;
}


body {
  background-color: var(--beige-85);
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

button {
  cursor: pointer;
}

.icon12 {
  width: 12px;
  height: 12px;
}

.icon16 {
  width: 16px;
  height: 16px;
}

.icon18 {
  width: 18px;
  height: 18px;
}

.icon20 {
  width: 20px;
  height: 20px;
}

.icon24 {
  width: 24px;
  height: 24px;
}

.icon28 {
  width: 28px;
  height: 28px;
}

.icon32 {
  width: 32px;
  height: 32px;
}

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

.Rubik {
  font-family: "Rubik Mono One", monospace;
  font-weight: var(--medium);
  font-style: normal;
}

.Manrope {
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-weight: var(--medium);
  font-style: normal;
}

.Nunito {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: var(--medium);
  font-style: normal;
}

.Lilita {
  font-family: "Lilita One", sans-serif;
  font-weight: var(--medium);
  font-style: normal;
}

/*-----------------------------------*\
  #NAVBAR
\*-----------------------------------*/

.navbar {
  width: 100%;
  height: 116px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 0 0 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  transition: transform 260ms ease, opacity 260ms ease;
  will-change: transform;
}

.navbar.mobile {
  display: none;
}

.navbar-main-container {
  width: 1280px;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-links-container {
  width: auto;
  height: auto;
  padding: 12px 40px;
  background-color: var(--beige-80);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 48px;
  border-radius: 32px;
  border: 3px var(--beige-70);
}

.logo-navbar-image {
  transition: 0.5s;
}

.navbar.scroll {
  padding-top: 8px;
}

.navbar.scroll .navbar-main-container {
  background-color: #E5D7B3E5;
  padding-left: 24px;
  border-radius: 24px;
}

.navbar.scroll .logo-navbar-image {
  width: 140px;
  height: auto;
}


.navbar.scroll .navbar-links-container {
  background-color: transparent;

}


.navbar-link {
  font-size: 20px;
  line-height: 20px;
  font-weight: var(--semiBold);
  color: var(--brown-15);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.navbar-link:is(:hover, :focus-visible, :focus-within) {
  color: var(--orange);
}

.navbar-pricing-trigger .nav-narrow {
  width: 24px;
  height: 24px;
  transition: transform 180ms ease;
}

.navbar-pricing-trigger.is-open .nav-narrow {
  transform: rotate(180deg);
}

.navbar-link-button {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--brown-15);
  border-radius: 100px;
  font-size: 18px;
  line-height: 18px;
  font-weight: var(--semiBold);
  letter-spacing: 0.5px;
  color: var(--beige-80);
}

.navbar-link-button:is(:hover, :focus-visible, :focus-within) {
  background-color: var(--orange);
  color: var(--brown-15);
}

.navbar-pricing-panel {
  position: fixed;
  top: 136px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
  z-index: 999;
}

.navbar-pricing-panel.open {
  opacity: 1;
  pointer-events: auto;
}

.navbar-pricing-panel__inner {
  background: var(--beige-80);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 40px;
}

.navbar-pricing-panel__btn {
  width: 100%;
  border-radius: 12px;
  color: var(--brown-15);
  font-size: 18px;
  line-height: 18px;
  font-weight: var(--semiBold);
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
  background-color: transparent;
  border: none;
}

.navbar-link.navbar-pricing-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
}

.navbar.is-hidden {
  transform: translateY(-140%);
  opacity: 0;
  pointer-events: none;
}

/* .navbar-pricing-panel__btn:hover,
.navbar-pricing-panel__btn:focus-visible {
  border-color: var(--orange);
  background: #fff;
} */

/*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/

.footer-section {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 64px 0;
  background-color: var(--dark-green-10);
}

.footer-main-container {
  width: 1280px;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 56px;
}

.footer-top-container {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: auto;
  position: relative;
}

.footer-social-media-links {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
}

.social-media-icon {
  width: 56px;
  height: 56px;
}

.social-media-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
}

.social-media-icon.icon-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 180ms ease;
}

.social-media-link:hover .icon-hover,
.social-media-link:focus-visible .icon-hover {
  opacity: 1;
}

.social-media-link:hover .icon-default,
.social-media-link:focus-visible .icon-default {
  opacity: 0;
}

.logo-footer-link {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  height: auto;
}

.footer-links-container {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 64px;
}

.footer-links-single-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: 20px;
  width: 380px;
  height: auto;
}

.footer-packages-title {
  font-size: 24px;
  font-weight: var(--extraBold);
  line-height: 32px;
  color: var(--beige-80);
}

.footer-packages-links-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: 20px;
  margin-top: 4px;
}

.package-link {
  font-size: 14px;
  font-weight: var(--semiBold);
  color: #dac898;
  transition: 0.5s;
}

.package-link:is(:hover, :focus-visible, :focus-within) {
  color: var(--beige-90);
  scale: 1.05;
}

.footer-links-single-container.pages-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 30px;
}

.footer-link-page {
  font-size: 24px;
  line-height: 32px;
  font-weight: var(--extraBold);
  color: var(--beige-80);
  transition: 0.5s;
}

.footer-link-page:is(:hover, :focus-visible, :focus-within) {
  color: var(--beige-90);
  scale: 1.05;
}

.footer-contact-link {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
}

.footer-contact-text {
  font-size: 18px;
  line-height: 24px;
  color: var(--beige-80);
  transition: 0.5s;
}

.footer-contact-link:is(:hover, :focus-visible, :focus-within) .contact-footer-icon {
  filter: var(--filter-beige-90);
}

.footer-contact-link:is(:hover, :focus-visible, :focus-within) .footer-contact-text {
  color: var(--beige-95);
}

.footer-bottom-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.created-by-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--beige-85);
}

.logo-codemode {
  filter: var(--filter-beige-90);
  width: 82px;
  height: auto;
}

.terms-links-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
}

.terms-link {
  font-weight: var(--semiBold);
  font-size: 14px;
  color: var(--beige-80);
  transition: 0.5s;
}

.terms-link:is(:hover, :focus-visible, :focus-within) {
  color: var(--beige-90);
}


@media (max-width: 1320px) {

  /*-----------------------------------*\
  #NAVBAR
\*-----------------------------------*/

  .navbar-main-container {
    width: 1000px;

  }

  .navbar-links-container {
    padding: 12px 24px;
    gap: 32px;
  }


  .logo-navbar-image {
    width: 160px
  }



  /*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/


  .footer-main-container {
    width: 1000px;
  }

}


@media (max-width: 1080px) {
  .navbar {
    width: 100%;
    height: 88px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 48px 0 48px;

  }


  .navbar.mobile {
    display: flex;
  }

  .navbar.desktop {
    display: none;
  }

  .navbar-main-container-mobile {
    width: 100%;
    height: 72px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--beige-70);
    border: solid 2px var(--beige-80);
    padding: 12px 16px;
    border-radius: 20px;
    transition: transform 260ms ease, opacity 260ms ease;
  }

  .logo-navbar-image-mobile {
    width: 96px;
    height: auto;
  }

  .contact-navbar-mobile-button {
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: var(--beige-80);
    outline: none;
    border: none;
  }


  .phone-mobile-nav-icon {
    width: 24px;
    height: 24px;
    filter: var(--filter-black);
  }

  .navbar-mobile-dropdown-container {
    display: none;
  }

  body.mobile-nav-open {
    overflow: hidden;
  }

  .navbar-mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 16px;
    z-index: 1200;
    backdrop-filter: blur(2px);
  }

  .navbar-mobile-overlay[hidden] {
    display: none;
  }

  .navbar-mobile-card {
    width: calc(100% - 32px);
    max-width: 1100px;
    background: var(--beige-70);
    border: 3px solid var(--beige-80);
    border-radius: 28px;
    padding: 20px 20px 32px 20px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
  }

  .navbar-mobile-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .navbar-mobile-card__logo {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .navbar-mobile-card__logo img {
    width: 160px;
    height: auto;
  }

  .navbar-mobile-circle,
  .navbar-mobile-close {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--beige-80);
    border: 2px solid var(--beige-85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brown-15);
  }

  .navbar-mobile-close {
    font-size: 28px;
    line-height: 1;
    font-weight: var(--bold);
  }

  .navbar-mobile-close span {
    transform: translateY(-2px);
  }

  .navbar-mobile-links {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .navbar-mobile-link {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    font-size: 20px;
    line-height: 26px;
    font-weight: var(--medium);
    color: var(--brown-15);
    padding: 4px 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .navbar-mobile-link.strong {
    font-weight: var(--extraBold);
    font-size: 22px;
    line-height: 28px;
  }

  .navbar-mobile-sublink.navbar-mobile-link {
    font-size: 18px;
    line-height: 24px;
    font-weight: var(--medium);
    padding-left: 4px;
  }

  .navbar-main-container-mobile.is-hidden {
    transform: translateY(-140%);
    opacity: 0;
    pointer-events: none;
  }

  .navbar-main-container-mobile.scroll {
    background-color: #E5D7B3E5;
  }

  .navbar-mobile-package-toggle .nav-narrow {
    width: 20px;
    height: 20px;
    transition: transform 200ms ease;
  }

  .navbar-mobile-package-toggle[aria-expanded="true"] .nav-narrow {
    transform: rotate(180deg);
  }

  .navbar-mobile-packages-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 4px;
  }

  .navbar-mobile-packages-list[hidden] {
    display: none;
  }

  .navbar-mobile-sublink {
    font-size: 18px;
    line-height: 24px;
    font-weight: var(--medium);
    color: var(--brown-15);
  }

  .navbar-mobile-dropdown-container.active {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    padding: 24px 24px 48px 24px;
    gap: 32px;
    height: auto;
    width: 100%;
    background-color: var(--beige-70);
    border-left: solid 2px var(--beige-80);
    border-right: solid 2px var(--beige-80);
    border-bottom: solid 2px var(--beige-80);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }

  /*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/

  .footer-section {
    padding: 64px 48px;
  }

  .footer-main-container {
    width: 100%;
    gap: 64px;
  }

  .footer-top-container {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: auto;
    position: relative;
  }



  .social-media-icon {
    width: 48px;
    height: 48px;
  }

  .social-media-link {
    width: 48px;
    height: 48px;
  }

}

@media (max-width: 900px) {
  .navbar-main-container-mobile {
    padding: 12px 24px;
  }

  .navbar {
    padding: 16px 24px 0 24px;

  }

  /*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/

  .footer-section {
    padding: 64px 24px;
  }

  .footer-main-container {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 56px;
  }

  .footer-top-container {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column-reverse;
    gap: 32px;
  }




  .social-media-icon {
    width: 48px;
    height: 48px;
  }

  .social-media-link {
    width: 48px;
    height: 48px;
  }



  .logo-footer-link {
    position: relative;
    left: unset;
    transform: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: auto;
  }

  .footer-links-container {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 64px 256px;
  }

  .footer-links-single-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
    width: auto;
    height: auto;
  }

  .footer-links-single-container.pages-links {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 32px;
  }

}

@media (max-width: 700px) {
  .navbar-mobile-card__logo img {
    width: 100px;
    height: auto;
  }


  .footer-bottom-container {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column-reverse;
    gap: 24px;
  }
}

@media (max-width: 700px) {
  .navbar-main-container-mobile {
    padding: 12px 20px;
  }


  .navbar {
    padding: 16px 20px 0 20px;

  }
}

@media (max-width: 500px) {
  .navbar-main-container-mobile {
    padding: 12px 16px;
  }


  .navbar {
    padding: 16px 16px 0 16px;

  }
}


@media (max-width: 500px) {
  .created-by-container {
    align-self: center;
    justify-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    margin-top: 24px;
    color: var(--beige-85);
  }
}