.copyright,
.footer_title,
.header_items li,
.main_box,
.main_center,
.phrase,
.title {
  text-align: center;
}
.main_aboutus,
.main_contact,
.main_giganto {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
:root {
  --color-primary: #01118a;
  --color-secondary: #ffc400;
  --color-white: #ffffff;
  --color-accent: #e74c3c;
  --font-montserrat: "Montserrat", sans-serif;
  --font-anton: "Anton", sans-serif;
}
body {
  font-family: var(--font-montserrat);
  margin: 0;
  padding: 5.5rem 0 0;
  background-color: #f4f4f4;
  color: #333;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: auto;
}
.bg-primary {
  background-color: var(--color-primary);
  color: #fff;
}
.bg-secondary {
  background-color: var(--color-secondary);
  color: #333;
}
.bg-white {
  background-color: var(--color-white);
  color: #333;
}
.header,
.header_items {
  background-color: var(--color-primary);
}
.color-primary,
.main_box h3 {
  color: var(--color-primary);
}

.box-card h2,
.font_anton {
  font-family: var(--font-anton);
}
.font_montserrat,
.main_box p {
  font-family: var(--font-montserrat);
}
.container {
  max-width: 80%;
  margin: 0 auto;
}
.header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  font-family: var(--font-anton);
  font-weight: 400;
  padding: 1rem 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.header_links,
.header_list {
  position: relative;
}
.header_separator,
.header_xl,
.hidden_element {
  display: none;
}
.header_sm {
  display: block;
}
.header_links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.header_logo {
  width: 5rem;
}
.header_link {
  font-size: 1rem;
}
.header_link:hover,
.header_link_active {
  color: var(--color-secondary);
}
.header_products {
  padding: 0 1rem;
  cursor: pointer;
}
.header_items {
  position: absolute;
  display: none;
  padding-top: 1rem;
}
.header_list:hover .header_items,
.sedes_box,
.sidebar_links {
  display: flex;
  flex-direction: column;
}
.header_items li {
  padding: 0.5rem;
  cursor: pointer;
}
.header_items li:hover {
  background-color: #010d69;
}
.sidebar {
  position: fixed;
  right: 0;
  width: 60%;
  height: 100vh;
  color: #fff;
  border-radius: 1rem;
  background-color: rgba(1, 17, 138, 0.5);
  backdrop-filter: blur(2rem);
  padding: 2rem;
  z-index: 2;
  transform: translateX(100%);
  transition: transform 0.5s ease-in-out;
}
.sidebar_show {
  transform: translateX(0);
}
.sidebar_links {
  gap: 2rem;
}
.sidebar_items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}
.sidebar_items_show {
  margin: 1rem 1rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sidebar_items li a {
  font-size: 0.9rem;
}

.divider {
  border: none;
  border-top: 1px solid #fff;
}
.copyright {
  padding: 1rem 0;
  font-size: medium;
}
.footer_title,
.gallery_card-container h3 {
  font-family: var(--font-anton);
  font-size: 1.2rem;
}
.footer_principal {
  display: grid;
  grid-template-columns: 1fr;
  padding: 2rem 0;
  gap: 2rem;
}
.footer_title {
  font-weight: 400;
  padding-bottom: 1rem;
}
.separator-top {
  border-top: 2px solid #fff;
  padding: 1rem 0;
}
.footer_list {
  font-weight: 300;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.footer_list li {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.footer_logo {
  width: 8rem;
  margin: 0 auto;
}
.footer_social {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}
.footer_social a:hover {
  opacity: 0.7;
}
main {
  flex: 1;
  position: relative;
}
.main_banner {
  width: 100vw;
  height: auto;
  border: none;
}
.main_presentation {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  gap: 1rem;
  margin: 2rem auto;
}
.main_center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.main_box,
.main_card {
  flex-direction: column;
}
.main_presentation-image {
  width: 80%;
  height: auto;
}
.title {
  color: var(--color-primary);
  font-family: var(--font-anton);
  font-size: 1.5rem;
  margin: 2rem auto;
}
.phrase {
  margin-bottom: 2rem;
}
.main_offers-lists {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 2rem auto;
}
.main_box {
  border: 3.5px solid var(--color-primary);
  border-radius: 1rem;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.main_works-gallery {
  margin: 2rem auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  position: relative;
}
.main_works-gallery img {
  width: 100%;
  height: auto;
}
.main_works-image {
  transition: transform 0.3s;
  width: 100%;
  height: 100%;
}
.main_works-image .scaled {
  position: absolute;
  top: 0;
  left: 20%;
  width: 50%;
  transform: scale(1.1);
}
.main_card {
  margin: 2rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main_card img {
  display: block;
  border-radius: 2rem;
  width: 100%;
}
.main_aboutus {
  width: 100%;
  height: 6rem;
  background-image: url("../images/imagenes-gt/banner-nosotros-gt.webp");
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.main_aboutus-title,
.main_contact-title,
.main_giganto-title {
  color: var(--color-white);
  font-family: var(--font-anton);
  font-size: 1.5rem;
  margin-top: 2rem;
}
.main_aboutus-content h1 {
  margin: 2rem auto;
  text-align: center;
}
.main_aboutus-section {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  margin: 2rem auto;
  height: 100%;
}
.separator_main {
  width: 2px;
  height: 100%;
  background-color: #000;
  margin: 0 auto;
}
.main_aboutus-text {
  text-align: justify;
  line-height: 1.5rem;
}
.main_aboutus-section img {
  display: block;
  width: 100%;
  border-radius: 2rem;
}
.main_aboutus-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 4rem auto;
}
@media (min-width: 765px) {
  .main_aboutus-section img {
    display: block;
    width: 80%;
    height: 100%;
    justify-self: end;
    object-fit: cover;
    border-radius: 4rem;
  }
  .main_aboutus-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
  }
}
.box-card {
  border-radius: 2rem;
  background-color: var(--color-primary);
  padding: 2rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.box_text {
  text-align: center;
  line-height: 1.5rem;
}
.main_valors {
  border: 1px solid var(--color-primary);
  margin: 2rem 0;
  border-radius: 2rem;
  padding: 2rem;
  box-shadow: -10px 5px 5px rgba(1, 17, 138, 0.2);
  display: flex;
  flex-direction: column;
}
.main_valors h2 {
  padding-bottom: 2rem;
}
.main_valors-text {
  text-align: justify;
}
.main_valors-list {
  padding: 1rem 0 1rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.main_valors-list li {
  list-style: disc;
  text-align: justify;
}
.main_valors-list li::marker {
  color: var(--color-primary);
}
.main_valors-image {
  width: 100%;
}
.main_giganto {
  width: 100%;
  height: 6rem;
  background-image: url("../images/imagenes-gt/banner-productosyservicios-gt.webp");
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.parent {
  margin: 2rem auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
.gallery_card {
  border: 3px solid var(--color-primary);
  position: relative;
  overflow: hidden;
}
.gallery_card-container {
  position: absolute;
  background-color: rgba(1, 17, 138, 0.5);
  backdrop-filter: blur(1rem);
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 1rem;
  color: #fff;
  transition: transform 0.8s ease-out;
}
.gallery_card-container h3 {
  text-align: center;
  margin: 1rem auto;
}
.gallery_card-container p {
  font-weight: 200;
  text-align: justify;
}
.gallery_card:hover .gallery_card-container {
  transform: translateY(-100%);
}
@media (min-width: 768px) {
  .header_separator,
  .header_xl {
    display: block;
  }
  .header_sm {
    display: none;
  }
  .copyright {
    font-size: medium;
  }
  .footer_principal {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .separator-top {
    border-top: none;
    padding: 0;
  }
  .separator-left {
    border-left: 2px solid #fff;
    padding: 0 2rem;
  }
  .footer_logo {
    width: 10rem;
  }
  .main_presentation {
    display: flex;
    gap: 1rem;
  }
  .main_center {
    border-right: 2px solid var(--color-primary);
    padding: 2rem 2rem 4rem 0;
  }
  .main_offers-lists {
    grid-template-columns: repeat(3, 1fr);
  }
  .main_card img {
    display: block;
    border-radius: 2rem;
    width: 50%;
  }
  .main_aboutus,
  .main_giganto {
    width: 100%;
    flex-direction: row;
    justify-content: center;
  }
  .main_aboutus-title {
    font-size: 2rem;
  }
  .main_aboutus-section {
    grid-template-columns: repeat(2, 1fr);
    height: 100%;
  }
  .main_aboutus-text {
    height: 100%;
    border-right: 3px solid #000;
    padding-right: 6rem;
  }
  .main_valors-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  .main_giganto-title {
    color: var(--color-white);
    font-family: var(--font-anton);
    font-size: 2rem;
    margin-top: 2rem;
  }
  .gallery_card:hover .gallery_card-container {
    transform: translateY(-100%);
  }
}
.gallery_card-link {
  margin: 1rem auto;
  background-color: var(--color-primary);
  width: 50%;
  padding: 0.5rem 0;
  text-align: center;
  border-radius: 0.5rem;
}
.main_paper-gallery,
.parent_impresion {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 2rem auto;
}
.main_giganto-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 768px) {
  .parent_impresion {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}
@media (min-width: 1200px) {
  .parent {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
  .div1 {
    grid-area: 1/1/5/3;
  }
  .div2 {
    grid-area: 1/3/3/5;
  }
  .div3 {
    grid-area: 1/5/3/7;
  }
  .div4 {
    grid-area: 3/3/5/5;
  }
  .div5 {
    grid-area: 3/5/5/7;
  }
  .gallery_card:hover .gallery_card-container {
    transform: translateY(-90%);
  }
  .gallery_card:hover .first {
    transform: translateY(-40%);
  }
  .gallery_card:hover .secondary {
    transform: translateY(-70%);
  }
  .parent_impresion {
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(6, 1fr);
  }
  .div1_impresion {
    grid-area: 1/1/7/5;
  }
  .div2_impresion {
    grid-area: 1/5/4/9;
  }
  .div3_impresion {
    grid-area: 1/9/4/11;
  }
  .div4_impresion {
    grid-area: 4/5/7/7;
  }
  .div5_impresion {
    grid-area: 4/7/7/9;
  }
  .div6_impresion {
    grid-area: 4/9/7/11;
  }
}
.main_paper-gallery {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.main_paper-gallery img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 2px solid var(--color-primary);
}
.sedes_box-title,
.sedes_whatsapp {
  background-color: var(--color-primary);
  border-radius: 1rem;
}
.main_contact {
  width: 100%;
  height: 6rem;
  background-image: url("../images/imagenes-gt/banner-contactanos-gt.webp");
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.sedes {
  margin: 2rem auto;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 4rem;
}
.sedes_box-title {
  width: 80%;
  margin: 0 auto;
  color: #fff;
  padding: 1rem 2rem;
  text-align: center;
  font-size: 1.2rem;
}
.sedes_schedule {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem auto;
}
.modal_container,
.sedes_whatsapp {
  display: flex;
  justify-content: center;
}
.sedes_whatsapp {
  margin: 0 auto;
  padding: 1rem;
  align-items: center;
  gap: 1rem;
  color: #fff;
}
.sedes_map {
  width: 100%;
  margin: 2rem auto;
}
.modal {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
  padding: 2rem;
}
.modal_container {
  position: relative;
  align-items: flex-start;
}
.modal_image {
  position: absolute;
  width: 100%;
  height: auto;
}
.modal_close {
  display: block;
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  z-index: 3;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 100%;
  color: #fff;
  cursor: pointer;
}
@media (min-width: 768px) {
  .main_contact {
    width: 100%;
    flex-direction: row;
    justify-content: center;
  }
  .main_contact-title {
    color: var(--color-white);
    font-family: var(--font-anton);
    font-size: 2rem;
    margin-top: 2rem;
  }
  .sedes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .modal_image {
    width: 50%;
    height: auto;
  }
  .modal_close {
    top: 0.5rem;
    right: 11.5rem;
  }
}
@media (min-width: 1024px) {
  .main_works-gallery {
    grid-template-columns: repeat(4, 1fr);
  }
  .main_aboutus,
  .main_contact,
  .main_giganto {
    width: 100%;
    height: 18rem;
  }
  .box-card {
    padding: 2rem 5rem;
  }
  .modal_close {
    top: 0.5rem;
    right: 16rem;
  }
}
@media (min-width: 1280px) {
  .main_aboutus,
  .main_contact,
  .main_giganto {
    width: 100%;
    height: 24rem;
  }
  .modal_image {
    width: 28%;
    height: auto;
  }
  .modal_close {
    top: 0.5rem;
    right: 37%;
  }
}