/* global styles */
:root {
    --dark-color: #000814;
    --medium-color: #003566;
    --light-color: #20638f;
    --yellow-color: #FFC300;
    --error-color: #e74c3c;
    --green-color: #27ae60;
    --gray-color: #ecf0f1;
    --white-color: #ffffff;

    --tittle-font: 'Oswald', sans-serif;
    --paragraph-font: 'Open Sans', sans-serif;
    --highlight-font: 'Slabo 27px', serif;
    /* --highlight-font: 'Open Sans', serif; */
}
/* global styles */

html {
    scroll-padding-top: 8rem; /* Adjust this value according to the navbar height: 8rem aprox*/
}

strong {
    font-family: var(--highlight-font);
}

html, body {
    overflow-x: hidden;
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
}

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

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    font-family: 'Nunito', sans-serif;
    line-height: 1.6;
    color: var(--dark-color) !important;
    background-color: var(--dark-color) !important;
}

/* General button style */
.button-1 {
    font-size: 2vh;
    background-color: var(--medium-color);
    color: var(--white-color);
    padding: 1vh;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    white-space: nowrap;
    text-decoration: none;
}

.button-1:hover {
    background-color: var(--yellow-color);
}

.button-1:active {
    background-color: var(--dark-color);
}

.button-1 a:visited {
    color: var(--gray-color);

}

.redes-sociales {
        display: flex;
        gap: 15px;
    }
    .icono-red {
        font-size: 20px;
        transition: opacity 0.3s;
    }
    .icono-red:hover { opacity: 0.7; }
    .fa-facebook { color: #4267B2; }
    .fa-x-twitter { color: #000; }
    .fa-instagram { color: #E1306C; }
    .fa-linkedin { color: #0077B5; 
}

.contact-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
    gap: 20px;
    background-color:#ecf0f1 ;
}

.text-column {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.icons-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 300px;
    margin-top: 80px; 
}

.icons-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.icono-red {
    font-size: 24px;
    color: #333;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.icono-red:hover {
    transform: scale(1.1);
    color: #0066cc;
}

@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;
    }
    .icons-container {
        min-width: 100%;
        justify-content: center;
        margin-top: 25px;
    }
    .icons-row {
        justify-content: center;
        display: flex;
    }
}

.contenedor-redes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* MARQUEE */
#marquee {
    display: flex;
    height: 8vh;
    overflow: hidden;
    background-color: var(--gray-color);
    color: #000;
    font-size: 3.4vh;
    padding: 1vh 0;
  }
  
  .marquee-track {
    display: flex;
    overflow: hidden;
    width: 100%;
    align-items: center;
  }
  
  .marquee-content {
    display: flex;
    white-space: nowrap;
    animation: scroll-left 20s linear infinite;
  }
  
  .marquee-content span,
  .marquee-content a {
    flex-shrink: 0;
    padding: 0 4vw;
    display: flex;
    align-items: center;
  }
  
  .marquee-content img {
    height: 6vh; /* ajusta tamaño */
    margin-left: 1vw;
  }
  
  @keyframes scroll-left {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-50%);
    }
  }