@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap");
:root { --header-height: 3rem; --first-color: #e31e24; --first-color-alt: #e31e24; --title-color: #393939; --text-color: #707070; --text-color-light: #A6A6A6; --body-color: #FBFEFD; --container-color: #FFFFFF; --overlay: rgb(0 0 0 / 20%); --body-font: "Montserrat", sans-serif; --biggest-font-size: 2.25rem; --h1-font-size: 1.5rem; --h2-font-size: 1.25rem; --h3-font-size: 1rem; --normal-font-size: 0.938rem; --small-font-size: 0.813rem; --smaller-font-size: 0.75rem; --font-medium: 500; --font-semi-bold: 600; --mb-1: 0.5rem; --mb-2: 1rem; --mb-3: 1.5rem; --mb-4: 2rem; --mb-5: 2.5rem; --mb-6: 3rem; --z-tooltip: 10; --z-fixed: 100; }
.red_color { color: var(--first-color); font-weight: var(--font-medium); }
@media screen and (min-width: 768px) {
  :root { --biggest-font-size: 4rem; --h1-font-size: 2.25rem; --h2-font-size: 1.5rem; --h3-font-size: 1.25rem; --normal-font-size: 1rem; --small-font-size: 0.875rem; --smaller-font-size: 0.813rem; }
}
*, ::before, ::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: var(--header-height) 0 0 0; font-family: var(--body-font); font-size: var(--small-font-size); background-color: var(--body-color); color: var(--text-color); line-height: 1.6; }
h1, h2, h3, p, ul { margin: 0px; }
a, img, button { outline: none; }
ul { padding: 0px; list-style: none; }
a { text-decoration: none; }
img { max-width: 100%; height: auto; }
.section { padding: 4rem 0px 2rem; }
.section-title, .section-subtitle { text-align: center; }
.section-title { font-size: var(--h2-font-size); color: var(--title-color); margin-bottom: var(--mb-3); }
.section-subtitle { display: block; color: var(--first-color); font-weight: var(--font-medium); margin-bottom: var(--mb-1); }
.bd-container { max-width: 1190px; width: calc(100% - 2rem); margin-left: var(--mb-2); margin-right: var(--mb-2); }
.bd-grid { display: grid; gap: 1.5rem; }
.l-header { width: 100%; position: fixed; top: 0px; left: 0px; z-index: var(--z-fixed); background-color: var(--body-color); }
.nav { max-width: 1190px; height: var(--header-height); display: flex; justify-content: space-between; align-items: center; }
.clients_container { grid-template-columns: repeat(6, 15%); }
@media screen and (max-width: 768px) {
  body .menu__detail {min-height: 60px;}
  body .home__title {font-size: var(--h3-font-size);}
  body .home__subtitle {font-size: var(--small-font-size);font-weight: 500;}
  body .home__container {height: 50vh;align-items: flex-end;}
  .nav__link {font-size: var(--normal-font-size) !important;}
  :root {--biggest-font-size: 4rem;--h1-font-size: 1.6rem;--h2-font-size: 1.2rem;--h3-font-size: 1rem;--normal-font-size: 0.875rem;--small-font-size: 0.675rem;--smaller-font-size: 0.513rem;}
  .bd-grid { gap: 0.5rem; }
  #about .services__container { gap: 0.2rem; }
  nav .nav__logo img { width: 50%; }
  .clients_container { grid-template-columns: repeat(3, 32%); }
  .nav__menu { position: fixed; top: -100%; left: 0px; width: 100%; padding: 1.5rem 0px 1rem; text-align: center; background-color: var(--body-color); transition: all 0.4s ease 0s; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 4px; border-radius: 0px 0px 1rem 1rem; z-index: var(--z-fixed); }
}
.nav__item { margin-bottom: var(--mb-2); }
.nav__link, .nav__toggle { color: var(--text-color); font-weight: var(--font-medium); font-size: var(--small-font-size); }
.nav__link { transition: all 0.3s ease 0s; }
.nav__link:hover { color: var(--first-color); }
.nav__toggle { font-size: 1.3rem; cursor: pointer; }
.show-menu { top: var(--header-height); }
.active-link { color: var(--first-color); }
.scroll-header { box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px; }
.scrolltop { position: fixed; right: 1rem; bottom: -20%; z-index: var(--z-tooltip); transition: all 0.4s ease 0s; visibility: hidden; color: var(--text-color); }
.scrolltop:hover { color: var(--first-color-alt); }
.scrolltop__icon { width: 25px; height: 25px; }
.show-scroll { visibility: visible; bottom: 1.5rem; }
.home__title { font-size: var(--h1-font-size); color: var(--container-color); margin-bottom: var(--mb-1); }
.home__subtitle { font-size: var(--h3-font-size); color: var(--body-color); margin-bottom: var(--mb-4); }
.home__img { width: 300px; justify-self: center; }
.button { display: inline-block; background-color: var(--first-color); color: rgb(255, 255, 255); padding: 0.75rem 1rem; border-radius: 0.5rem; transition: all 0.3s ease 0s; }
.button:hover { background-color: var(--first-color-alt); }
.about__data { text-align: center; }
.about__description { margin-bottom: var(--mb-3); }
.about__img { width: 280px; border-radius: 0.5rem; justify-self: center; }
#about .services__container { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); }
.services__container { row-gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.services__content { text-align: center; }
.services__img { width: 40px; height: 40px; fill: var(--first-color); margin-bottom: var(--mb-2); }
#about .services__title { font-size: var(--smaller-font-size); }
.services__title { font-size: var(--small-font-size); color: var(--title-color); margin-bottom: var(--mb-1); }
.services__description { padding: 0px 0.5rem; }
.menu__container { grid-template-columns: repeat(2, 1fr); justify-content: center; }
.menu__content { position: relative; display: flex; flex-direction: column; background-color: var(--container-color); border-radius: 0.5rem; box-shadow: rgba(3, 74, 40, 0.15) 0px 2px 4px; padding: 0.5rem; }
.menu__img { width: 100%; align-self: center; margin-bottom: var(--mb-2); border-radius: 0.5rem 0.5rem 0px 0px; }
.menu__name, .menu__preci { font-weight: var(--font-semi-bold); color: var(--title-color); }
.menu__name { font-size: var(--normal-font-size); }
.menu__preci { font-size: var(--small-font-size); }
.menu__detail { margin-bottom: var(--mb-1); font-size: var(--smaller-font-size);min-height: 80px;}
.app__stores { margin-bottom: var(--mb-4); grid-template-columns: repeat(2, 50%); }
.app__stores a { display: flex; align-items: center; padding: 8px; margin-top: var(--mb-1); background: transparent; border-radius: 10px; transition: all 0.5s ease 0s; }
.app__stores a svg { margin-right: 6px; width: 50px; height: 50px; }
.app__stores a:hover p, .app__stores a:hover span { color: var(--body-color); }
.app__stores a.instagram:hover { background: linear-gradient(128.03deg, rgb(255, 177, 64) -7.05%, rgb(255, 84, 69) 24.72%, rgb(252, 43, 130) 67.32%, rgb(142, 64, 183) 117.11%); }
.app__stores a.instagram:hover svg .white-fill, .app__stores a.whatsapp:hover svg { fill: rgb(255, 255, 255); }
.app__stores a.instagram:hover svg .not-white-fill { fill: url("#paint0_radial"); }
.app__stores a.whatsapp:hover { background-color: rgb(36, 211, 102); }
.app__stores a.whatsapp svg { height: 45px; }
.app__stores a p, .app__stores a span { color: var(--title-color); }
.app__stores a p { font-weight: var(--font-semi-bold); }
.app_info { margin-bottom: var(--mb-4); }
.app_info b { color: var(--text-color); font-weight: var(--font-medium); margin-bottom: var(--mb-1); display: block; }
.app_info p, .app_info a { color: var(--title-color); font-weight: var(--font-semi-bold); font-size: var(--normal-font-size); }
.footer__copy { text-align: center; font-size: var(--small-font-size); color: var(--text-color-light); margin-top: var(--mb-3); margin-bottom: var(--mb-3); }
@media screen and (min-width: 576px) {
  .about__container, .app__container { grid-template-columns: repeat(2, 1fr); align-items: center; }
  .about__data, .about__initial, .app__data, .app__initial, .contact__container, .contact__initial { text-align: initial; }
  .about__img, .app__img { width: 380px; order: -1; }
}
.home__data { z-index: 2; text-align: center; }
section#home { background: url("../img/1507.jpg") center center / cover no-repeat; position: relative; }
.overlay { position: absolute; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); top: 0px; }
.home__container { height: 75vh; display: flex; align-items: center; justify-content: center; }
#about .services__img { width: 40px; height: 40px; }
@media screen and (min-width: 768px) {
  .services__img { width: 64px; height: 64px; }
  nav .nav__logo img { width: 70%; }
  body { margin: 0px; }
  .section { padding-top: 6rem; }
  .nav { height: calc(var(--header-height) + 1.5rem); }
  .nav__list { display: flex; }
  .nav__item { margin-left: var(--mb-5); margin-bottom: 0px; }
  .nav__toggle { display: none; }
  .change-theme { position: initial; margin-left: var(--mb-2); }
  .services__container, .menu__container { margin-top: var(--mb-6); }
  .menu__container .menu__content:nth-child(5) {grid-column-start: 2;}
  .menu__container { grid-template-columns: repeat(4, 24%); column-gap: 1rem; }
  .menu__content:hover a { cursor: zoom-in; }
  .menu__content:hover img { opacity: 0.8; }
  .app__store { margin: 0 var(--mb-1) 0 0; }
}
@media screen and (min-width: 960px) {
  .bd-container { margin-left: auto; margin-right: auto; }
  .home__img { width: 500px; }
  .about__container, .app__container { column-gap: 2rem; }
}
::-webkit-scrollbar { width: 4px; border-radius: 30px; height: 4px; }
::-webkit-scrollbar-thumb { background-color: rgba(227, 30, 36, 0.5); outline: rgb(251, 254, 253) solid 1px; border-radius: 30px; }
::-webkit-scrollbar-track { box-shadow: rgba(195, 197, 236, 0.1) 0px 0px 6px inset; border-radius: 30px; }
.download a:hover { background-color: var(--first-color); color: var(--container-color); }
.download a:hover .label, .download a:hover .icon-arrow.after { fill: rgb(255, 255, 255); color: rgb(255, 255, 255); }
.download a { border: 2px solid var(--first-color); display: inline-block; font-size: var(--small-font-size); font-weight: var(--font-semi-bold); margin: auto; padding: 12px 20px 12px 60px; position: relative; border-radius: 1.5rem; }
.download a .label, .download a .icon-arrow { backface-visibility: hidden; transform: translateZ(0px); }
.download a .label { display: inline-block; transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1) 0s; color: var(--title-color); }
.download a .icon-arrow {fill: var(--first-color-alt);height: 10px;top: 19px;transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1) 0s, opacity 0.4s cubic-bezier(0.86, 0, 0.07, 1) 0s;width: 30px;}
.download a .icon-arrow.before { left: 20px; position: absolute; transform-origin: left center; }
.download a .icon-arrow.after { opacity: 0; position: absolute; right: 20px; transform: translateX(75%) scaleX(0.1); transform-origin: right center; }
.download a:hover .label {transform: translateX(-36px);}
.download a:hover .icon-arrow.before { opacity: 0; transform: translateX(-75%) scaleX(0.1); }
.download a:hover .icon-arrow.after { opacity: 1; transform: translateX(0px) scaleX(1); }
.download { display: block; text-align: center; padding: 2% 0px; clear: both; }
section#clients {background-color: var(--container-color);padding-bottom: var(--mb-6);}
.items img {margin-bottom: var(--mb-3);}
.items .description h3 {color: var(--title-color);font-size: var(--normal-font-size);margin-bottom: var(--mb-1);}
.items .description p {color: var(--text-color);font-size: var(--smaller-font-size);}
.work-img {width: 100%;height: 100%;}
.works_item {gap: 0.1rem;grid-template-columns: repeat(2, 50%);}
.works_item a::before {content:'';position: absolute;top: 0;right: 0;width: 100%;height: 100%;background: var(--overlay);transition: all 0.4s ease 0s;}
.works_item a {position: relative;transition: all 0.4s ease 0s;}
.works_item a:hover::before {background: transparent;transition: all 0.4s ease 0s;}