@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

* {
    box-sizing     : border-box;
    border         : none;
    margin         : 0;
    padding        : 0;
    outline        : none;
    text-decoration: none;
    list-style     : none;
}

:root {
    --bg-color1      : #e31832;
    --bg-color2      : #F2F3F7;
    --bg-color3      : #373A3C;
    --bg-color4      : #dad7d7;
    --dark-color     : #39393b;
    --light-color    : #ffffff;
    --green-color    : #5bf192;
    --font-base      : "Open Sans", sans-serif;
    --font-size-title: clamp(1.3rem, 3vw, 2.2rem);
    --border-radius  : 10px;
    --transition     : all 0.3s ease;
}

html {
    overflow-x     : hidden;
    scroll-behavior: smooth;
}

body {
    font-family     : var(--font-base);
    background-color: var(--bg-color2);
    display         : flex;
    flex-direction  : column;
    min-height      : 100vh;
}

section {
    padding: 2rem 7%;
}

/** Upload */
.top {
    display: none;
}

.bi-arrow-up-circle {
    color        : var(--bg-color4);
    font-size    : 2rem;
    font-weight  : 700;
    background   : var(--bg-color3);
    text-align   : center;
    right        : 3%;
    border-radius: 50%;
    width        : 2rem;
    height       : 2rem;
    line-height  : 1;
    position     : fixed;
    bottom       : 5rem;
    transition   : all .5s ease;
    animation    : upload 3s infinite alternate;
    cursor       : pointer;
    z-index      : 100;
}

.bi-chevron-double-up:hover {
    background: var(--color-white);
    color     : var(--color-bg1);
}

@keyframes upload {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-15px);
    }
}

.btn {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    padding         : 10px 0;
    font-size       : .9rem;
    background-color: var(--light-color);
    border-radius   : 27px;
    width           : 220px;
    color           : var(--bg-color3);
    font-weight     : 700;
}

.btn:hover {
    background-color: var(--green-color);
    color           : var(--light-color);
}

.btn i {
    margin-right: 8px;
}

.btn i:hover {
    color: var(--light-color);
}

.heading {
    font-size  : var(--font-size-title);
    font-weight: 500;
    text-align : center;
    color      : var(--dark-color);
    line-height: .8;
}

.line {
    width           : 100px;
    height          : 3px;
    background-color: var(--bg-color1);
    margin          : 16px auto 20px auto;
}

/** HEADER */

header {
    position       : fixed;
    top            : 0;
    left           : 0;
    width          : 100%;
    height         : 100px;
    display        : flex;
    justify-content: space-around;
    align-items    : center;
    z-index        : 1000;
    transition     : all 0.3s ease;
    background     : var(--light-color);
    box-shadow     : 0px 3px 6px #00000029;
    opacity        : 1;
}

.logo-title {
    display    : flex;
    align-items: center;
    gap        : 10px;
}

/* Logo sobresalido */
.logo-container {
    position  : relative;
    top       : 25px;
    transition: top 0.3s ease;
}

/* Logo inicial grande y sobresalido */
.logo img {
    width     : 134px;
    transition: width 0.3s ease;
}

.title-header {
    color      : var(--dark-color);
    font-weight: bold;
    font-size  : 1.8rem;
}

header .title-header span {
    font-weight: 400;
}

nav.menu ul {
    display: flex;
    gap    : 20px;
}

nav.menu ul li a {
    display   : inline-block;
    font-size : 1.2rem;
    color     : var(--dark-color);
    transition: var(--transition);
}

nav.menu ul li a:hover {
    color: var(--bg-color1);
}

.nav-link.active {
    color: var(--bg-color1);
}

.icon-message a i {
    font-size: 1.4rem;
    color    : var(--dark-color);
}

.icon-message a i:hover {
    color: var(--green-color);
}

/* Estilos al hacer scroll */
header.scrolled .logo-container {
    top: 0;
    /* Elimina el sobresaliente del logo al hacer scroll */
}

header.scrolled .logo img {
    width: 80px;
    /* Reduce solo el tamaño del logo al hacer scroll */
}

header .menu-btn,
header .close-btn {
    color    : var(--dark-color);
    font-size: 1.25rem;
    cursor   : pointer;
    display  : none;
    position : absolute;
}

header .brand-burger {
    display: none;
}

/** INICIO */

.home {
    padding: 100px 0 0 0;
}

/** Slider */

#container {
    width   : 100%;
    position: relative;
}

.swiper {
    width : 100%;
    height: 100%;
}

.swiper-slide img {
    width     : 100%;
    height    : 535px;
    object-fit: cover;
}

.slide-text {
    display        : flex;
    align-items    : center;
    justify-content: flex-start;
    position       : absolute;
    top            : -12%;
    left           : 10%;
    height         : 100%;
    width          : 70%;
    padding        : 20px;
    z-index        : 10;
    color          : var(--light-color);
}

.slide-text h1,
.slide-text h2 {
    font-size  : var(--font-size-title);
    font-weight: 500;
}

.autoplay-progress .progress-bar {
    display: none;
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--light-color);
    top  : 38%;
}

.swiper-button-next {
    right: 30px;
}

.swiper-button-prev {
    left: 30px;
}

/** Botones de navegación en slider */
.button-container {
    display        : flex;
    justify-content: space-around;
    align-items    : center;
    position       : absolute;
    bottom         : 0;
    left           : 0;
    width          : 100%;
    z-index        : 2;
    padding        : 20px 0 40px 0;
}

.button-container::before {
    content         : "";
    position        : absolute;
    bottom          : 0;
    left            : 0;
    width           : 100%;
    height          : 60%;
    /* El fondo rojo ocupará el 60% de la altura */
    background-color: var(--bg-color1);
    z-index         : -1;
}

.button-container .button {
    display        : flex;
    flex-direction : column;
    justify-content: center;
    align-items    : center;
    text-align     : center;
    color          : var(--bg-color2);
    flex           : 1;
    /* Cada botón ocupa proporcionalmente el espacio */
    max-width      : 200px;
    /* Máximo ancho del botón */
    margin         : 0 10px;
}

/* Tooltip para los botones */
.tooltip {
    position        : absolute;
    background-color: var(--dark-color);
    color           : var(--light-color);
    padding         : 5px 10px;
    border-radius   : 5px;
    font-size       : .6rem;
    pointer-events  : none;
    /* El tooltip no bloquea el cursor */
    opacity         : 0;
    /* Invisible por defecto */
    transition      : opacity 0.2s ease;
    z-index         : 999;
}

.button-container .button img {
    width        : auto;
    max-height   : 140px;
    display      : block;
    margin-bottom: 10px;
}

.button-container .button span {
    font-size  : .9rem;
    font-weight: 700;
    display    : block;
    position   : absolute;
    bottom     : 25px;
}

/** NOSOTROS */

.about {
    scroll-margin-top: 100px;
}

.about .row {
    display      : flex;
    align-items  : stretch;
    background   : var(--bg-color3);
    border-radius: var(--border-radius);
    margin-top   : 30px;
}

.about .row .image {
    flex: 1 50%;
}

.about .row .image img {
    width        : 100%;
    height       : 100%;
    object-fit   : cover;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.about .row .content {
    flex   : 1 50%;
    color  : var(--light-color);
    margin : auto;
    padding: 1rem;
}

.about .row .content p {
    font-size: 1rem;
}

.about .row .content p span {
    font-weight: 300;
}

/** Banner Video */

.banner-video {
    margin-top       : 40px;
    width            : 100%;
    scroll-margin-top: 185px;
}

.banner-video .row {
    display       : flex;
    align-items   : stretch;
    background    : var(--bg-color1);
    flex-direction: row;
}

.banner-video .row .video {
    flex: 1 50%;
}

.banner-video .row .video video {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
}

.banner-video .row .content {
    display        : flex;
    flex-direction : column;
    justify-content: center;
    gap            : 20px;
    flex           : 1 50%;
    color          : var(--light-color);
    padding        : 1.5rem;
}

.banner-video .content h3 {
    font-size: 1.2rem;
}

.banner-video .row .content p {
    font-size    : 1rem;
    margin-bottom: 1rem;
}

/** PRODUCTOS Y SERVICIOS */

.products {
    padding-top      : 50px;
    background-color : var(--light-color);
    scroll-margin-top: 100px;
}

.products .line {
    margin-bottom: 30px;
}

.products .card {
    padding         : 20px;
    border-radius   : var(--border-radius);
    background-color: var(--bg-color2);
    color           : var(--dark-color);
    height          : 410px;
    display         : flex;
    flex-direction  : column;
    width           : 100%;
    max-width       : 360px;
    position        : relative;
}

.products .card .content h4 {
    font-size    : 20px;
    margin-top   : 10px;
    margin-bottom: 10px;
}

.products .card .content p {
    font-size: 18px;
}

.products .card p a {
    color          : var(--dark-color);
    text-decoration: underline;
}

.products .card p a:hover {
    color: var(--bg-color1);
}

.products .card .btn {
    position  : absolute;
    width     : calc(100% - 20px);
    /* Se ajusta dinámicamente al tamaño del contenedor */
    max-width : 90%;
    /* Evita que el botón sea demasiado ancho */
    bottom    : 20px;
    left      : 50%;
    transform : translateX(-50%);
    text-align: center;
    padding   : 10px 15px;
}

.products .card .image-container {
    position       : relative;
    width          : 100%;
    max-height     : 180px;
    flex-shrink    : 0;
    display        : flex;
    justify-content: center;
    align-items    : center;
    overflow       : hidden;
    cursor         : pointer;
    border-radius  : var(--border-radius);
}

.products .card .image-container img {
    position     : absolute;
    top          : 0;
    left         : 0;
    width        : 100%;
    height       : 100%;
    object-fit   : cover;
    margin       : 0 auto;
    border-radius: var(--border-radius);
    transition   : opacity 0.3s ease-in-out;
}

.products .card .image-primary {
    opacity: 1;
    z-index: 1;
}

.products .card .image-secondary {
    opacity: 0;
    z-index: 0;
}

.products .card .image-container:hover .image-primary {
    opacity: 0;
}

.products .card .image-container:hover .image-secondary {
    opacity: 1;
}

#product-slider .splide {
    max-width: 100%;
    margin   : 0 auto;
}

.splide__list {
    gap: .6rem;
}

.splide__slide {
    max-width: calc(33.33% - .6rem);
}

.splide__track {
    cursor: grab;
}

.splide__arrow--prev {
    left: -15px;
}

.splide__arrow--prev svg {
    transform: scaleX(-1)
}

.splide__arrow--next {
    right: -15px;
}

/** Modal */
.modal {
    display         : none;
    position        : fixed;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content : center;
    align-items     : center;
    z-index         : 1000;
}

.close {
    position        : absolute;
    top             : 5px;
    right           : 5px;
    margin-left     : 15px;
    font-size       : 1.5rem;
    cursor          : pointer;
    background-color: var(--light-color);
    border-radius   : 50%;
    width           : 30px;
    height          : 30px;
    line-height     : 1;
    text-align      : center;
    box-shadow      : 0 1px 3px rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: var(--bg-color4);
    max-width       : 800px;
    width           : 90%;
    position        : relative;
    display         : flex;
    flex-direction  : row;
    gap             : 20px;
}

.image-container {
    flex            : 1;
    max-width       : 400px;
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    gap             : 10px;
    background-color: var(--light-color);
    padding         : 20px;
}

.image-container img#mainImage {
    width        : 300px;
    height       : 300px;
    object-fit   : cover;
    border-radius: 8px;
}

.thumbnail-container {
    display        : flex;
    justify-content: center;
    gap            : 10px;
}

.thumbnail {
    width     : 60px;
    height    : 60px;
    cursor    : pointer;
    border    : 3px solid var(--bg-color4);
    object-fit: cover;
}

.thumbnail.active {
    border: 3px solid var(--green-color);
}

.description {
    flex          : 1;
    display       : flex;
    flex-direction: column;
    gap           : 20px;
    padding       : 20px;
    margin-top    : 10px;
}

#description {
    white-space: pre-line;
}

#myModal {
    display: none;
}

/** CONTACTO */

.contact {
    background       : var(--bg-color2);
    scroll-margin-top: 100px;
}

.contact .container {
    margin-top     : 50px;
    display        : flex;
    flex-wrap      : wrap;
    justify-content: space-between;
    align-items    : flex-start;
    gap            : 20px;
}

.contact .container .contact-info {
    background-color: var(--bg-color3);
    color           : var(--light-color);
    padding         : 20px;
    border-radius   : var(--border-radius);
    flex            : 1;
    max-width       : 350px;
    height          : 400px;
    position        : relative;
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    gap             : 20px;
}

.contact .container .contact-info .contact-logo {
    position: absolute;
    top     : -30px;
    left    : 20px;
    width   : 60px;
}

.contact .container .contact-info ul {
    display       : flex;
    flex-direction: column;
    gap           : 55px;
}

.contact .container .contact-info li {
    display    : flex;
    align-items: center;
    gap        : 10px;
}

.contact .container .contact-info li img {
    width : 30px;
    height: 30px;
    filter: invert(1);
}

.contact .container .contact-form {
    flex           : 2;
    display        : flex;
    flex-direction : column;
    justify-content: space-between;
    gap            : 20px;
    color          : var(--dark-color);
    height         : 400px;
}

.contact .container .contact-form form {
    display       : flex;
    flex-direction: column;
}

.contact .container .contact-form .form-box {
    display  : flex;
    flex-wrap: wrap;
    gap      : 10px;
}

.contact .container .contact-form .form-box .input-box {
    width   : calc(50% - 5px);
    position: relative;
}

.contact .container .contact-form .form-box .input-box input[type="text"]:focus,
.contact .container .contact-form .form-box .input-box input[type="email"]:focus,
.contact .container .contact-form .form-box .input-box input[type="number"]:focus,
.contact .container .contact-form .form-box .input-box textarea:focus {
    border: 2px solid var(--dark-color);
}

.contact .container .contact-form .form-box .input-box textarea {
    width  : 100%;
    padding: 10px;
    resize : none;
    height : 80px;
}

.contact .container .contact-form .form-box .input-box.w100 {
    width: 100%;
}

.contact .container .contact-form .form-box .input-box label {
    display      : block;
    margin-bottom: 5px;
    color        : var(--dark-color);
    font-size    : .8rem;
}

.contact .container .contact-form .form-box .input-box input[type="text"],
.contact .container .contact-form .form-box .input-box input[type="email"],
.contact .container .contact-form .form-box .input-box input[type="number"],
.contact .container .contact-form .form-box .input-box textarea {
    width    : 100%;
    padding  : 10px;
    border   : 1px solid #ccc;
    font-size: .7rem;
}

.contact .container .contact-form .input-box input[type="submit"] {
    border-radius: 30px;
    width        : 100px;
    padding      : 10px;
    background   : var(--green-color);
    color        : var(--dark-color);
    margin-top   : 20px;
    font-size    : .9rem;
    font-weight  : 700;
    cursor       : pointer;
    transition   : background-color 0.3s ease;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin            : 0;
}

.contact .container .contact-form .input-box input[type="submit"]:not(:disabled):hover {
    background-color: var(--dark-color);
    color           : var(--light-color);
}

.contact .container .contact-form .input-box input[type="submit"]:disabled {
    cursor       : not-allowed;
    background   : var(--bg-color1);
    color        : var(--light-color);
    opacity      : 0.6;
    border-radius: 20px;
}

/* Botones de limpieza individuales */
input+.clear-btn,
textarea+.clear-btn {
    position  : absolute;
    right     : 10px;
    top       : 50%;
    background: none;
    border    : none;
    font-size : 1.1rem;
    color     : var(--bg-color3);
    cursor    : pointer;
    display   : none;
}

textarea+.clear-btn {
    top  : 30%;
    right: 15px;
}

input:focus:not(:placeholder-shown)+.clear-btn,
textarea:focus:not(:placeholder-shown)+.clear-btn {
    display: block;
}

input:not(:placeholder-shown)+.clear-btn,
textarea:not(:placeholder-shown)+.clear-btn {
    display: block;
}

.clear-btn:hover {
    color: #000;
}

textarea,
input {
    padding-right: 30px;
}

/** FOOTER */

footer {
    background-color: var(--dark-color);
    padding         : 1.2rem 4.7rem;
    width           : 100%;
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    margin-top      : auto;
}

.copyright {
    color    : var(--light-color);
    font-size: 1rem;
}

.social {
    display        : flex;
    justify-content: center;
    flex-wrap      : wrap;
    gap            : 1rem;
}

.social a {
    font-size    : 1rem;
    color        : var(--light-color);
    width        : 1.6rem;
    height       : 1.6rem;
    background   : transparent;
    border-radius: 50%;
    transition   : all .3s;
    display      : grid;
    place-items  : center;
}

.social .bi-facebook:hover {
    outline   : 2px solid var(--light-color);
    background: #1877F2;
}

.social .bi-envelope:hover {
    outline         : 2px solid var(--light-color);
    background-color: #D14836;
}

.social .bi-instagram:hover {
    outline: 2px solid var(--light-color);
    background: radial-gradient(circle at 30% 107%, #fdf497 0%,
            #fdf497 5%, #fd5949 45%,
            #d6249f 60%, #285AEB 90%);
}


/** --------- MEDIA QUERIES --------- */

@media (max-width: 1100px) {

    header {
        display        : flex;
        justify-content: center;
        align-items    : center;
        padding        : 10px;
        height         : auto;
    }

    .logo-container {
        top: 0;
    }

    .logo-title {
        display    : flex;
        align-items: center;
        gap        : 10px;
    }

    .logo img {
        width : 50px;
        height: auto;
    }

    .title-header {
        font-size: 1.4rem;
    }

    .icon-message {
        position : absolute;
        right    : 20px;
        font-size: 1.8rem;
    }

    header .menu-btn {
        display: block;
        left   : 20px;
    }

    header .menu-btn i {
        font-weight: bolder;
        font-size  : 1.8rem;
    }

    header .menu {
        position           : fixed;
        background         : var(--light-color);
        width              : 320px;
        height             : 70vh;
        top                : 0;
        left               : -100%;
        padding            : 80px 50px;
        transition         : 1.5s ease-in-out;
        transition-property: left;
        z-index            : 1000;
    }

    header .menu ul {
        flex-direction: column;
    }

    header .menu.active {
        left: 0;
    }

    header .close-btn {
        display  : block;
        top      : 20px;
        right    : 20px;
        font-size: 1.8rem;
    }

    header .close-btn:hover {
        transform : rotate(180deg);
        transition: transform 0.3s ease;
    }

    header .menu a {
        display  : block;
        font-size: 1rem;
        color    : var(--dark-color);
    }

    header .brand-burger {
        display : block;
        position: absolute;
        left    : 35px;
        bottom  : 20px;
    }

    header .brand-burger div {
        display     : flex;
        align-items : center;
        color       : var(--dark-color);
        padding-left: 10px;
        font-weight : 700;
        font-size   : 1.2rem;
    }

    header .brand-burger div span {
        font-weight: 300;
    }

    header .brand-burger .logo-burger img {
        width: 60px;
    }

    .home {
        padding-top: 75px;
    }

    .slide-text h1 {
        letter-spacing: 1px;
    }

    .slide-text h2 {
        letter-spacing: 2px;
    }

    #product-slider .splide__list {
        display: flex;
    }

    .splide__slide {
        display        : flex;
        justify-content: center;
        width          : 100%;
        max-width      : 100%;
    }
}

@media (max-width: 980px) {

    .about .row {
        flex-direction: column;
    }

    .about .row .image img {
        border-radius: var(--border-radius) var(--border-radius) 0 0;
    }

    .about .row .content {
        padding: 1.5rem;
    }
}

@media (max-width: 850px) {

    .swiper-slide img {
        height: 400px;
    }

    :root {
        --swiper-navigation-size: 32px;
    }

    .banner-video .row {
        flex-direction: column;
    }

    .banner-video .row .content {
        padding: 1.5rem;
    }
}

@media (max-width: 768px) {

    .swiper-button-next {
        right: 10px;
    }

    .swiper-button-prev {
        left: 10px;
    }

    .swiper-slide img {
        height: 400px;
    }

    .button-container .button {
        max-width: 180px;
    }

    .button-container .button img {
        max-width: 180px;
    }

    .button-container .button span {
        font-size: .8rem;
    }

    .banner-video {
        scroll-margin-top: 100px;
    }

    .products {
        padding-top: 40px;
    }

    .slide-text {
        justify-content: center;
        text-align     : center;
        width          : 100%;
        left           : 0;
        background     : rgba(0, 0, 0, 0.3);
    }

    #product-slider .splide__list {
        display        : flex;
        justify-content: center;
        flex-direction : column;
        gap            : 2rem;
    }

    .splide__slide {
        display        : flex;
        justify-content: center;
        width          : 100%;
        max-width      : 100%;
    }

    .splide__track {
        overflow: visible !important;
    }

    .modal {
        max-height     : 92vh;
        margin-top     : 8vh;
        overflow-y     : auto;
        flex-direction : column;
        justify-content: flex-start;
    }

    .modal-content {
        flex-direction: column;
        align-items   : center;
        gap           : 0;
    }

    .image-container {
        width  : 100%;
        padding: 5px;
    }

    .description {
        gap        : 0;
        padding-top: 0px;
    }

    .description h3 {
        font-size    : 1rem;
        margin-bottom: 5px;
    }

    .description p {
        font-size: .9rem;
    }

    .description a {
        width        : 100%;
        margin-top   : 15px;
        margin-bottom: 10px;
    }

    .thumbnail {
        width        : 45px;
        height       : 45px;
        margin-bottom: 10px;
    }

    .contact .container {
        flex-direction: column;
        gap           : 20px;
    }

    .contact .container .contact-info {
        width         : 100%;
        max-width     : none;
        padding       : 8px;
        padding-top   : 50px;
        padding-bottom: 30px;
    }

    .contact .container .contact-form {
        order: 2;
        width: 100%;
    }

    .contact .container .contact-form h3 {
        text-align   : center;
        margin-bottom: 10px;
    }

    .contact .container .contact-info .contact-logo {
        left: 50px;
    }

    .contact .container .contact-form .form-box .input-box {
        width    : 100%;
        max-width: none;
    }

    .contact .container .contact-form .input-box input[type="submit"] {
        margin-top: 10px;
    }

    footer {
        text-align     : center;
        flex-direction : column;
        justify-content: center;
        gap            : 10px;
        padding        : .5rem .5rem;
    }

}

@media (max-width: 480px) {

    .line {
        width : 60px;
        margin: 12px auto 16px auto;
    }

    .swiper-slide img {
        height: 300px;
    }

    .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }

    :root {
        --swiper-navigation-size: 24px;
    }

    .button-container {
        padding: 20px 0 20px 0;
    }

    .button-container .button {
        max-width: 100px;
    }

    .button-container .button img {
        max-width: 100px;
    }

    .button-container .button span {
        font-size: .7rem;
        bottom   : 10px;
    }

    .tooltip {
        display: none;
    }

    .about {
        margin-top: 10px;
    }

    .about,
    .products,
    .contact {
        scroll-margin-top: 50px;
    }

    .banner-video {
        scroll-margin-top: 100px;
    }

    .about .row .content p,
    .banner-video .content h3,
    .banner-video .row .content p {
        font-size: .9rem;
    }

    .products .card .content h4 {
        font-size: 18px;
    }

    .products .card .content p {
        font-size: 16px;
    }

    .banner-video .row .content a {
        width: 100%;
    }

    .banner-video .row .content h3 {
        text-align: center;
    }

    .products .card .btn {
        bottom: 20px;
    }

    .modal {
        max-height: 85vh;
        margin-top: 10vh;
    }

    .image-container img#mainImage {
        width : 270px;
        height: 220px;
    }
}

@media (max-width: 320px) {

    header .menu-btn {
        left: 10px;
    }

    header .menu-btn i {
        font-size: 1.3rem;
    }

    header .menu {
        height : 95vh;
        padding: 50px 50px;
    }

    .title-header {
        font-size: 1.2rem;
    }

    .icon-message {
        right    : 10px;
        font-size: 1rem;
    }

    .swiper-slide img {
        height: 320px;
    }

    .button-container .button {
        max-width: 80px;
    }

    .button-container .button img {
        max-width: 80px;
    }

    .products .card {
        height: 440px;
    }

    .products h2 {
        line-height: 1.1;
    }

    .contact .container .contact-info .contact-logo {
        left : 30px;
        width: 50px;
    }

    .contact .container .contact-info li {
        font-size: .9rem;
    }

}