:root {
        --color1: #002e59;
        --color2: #00598a;
        --color3: #e82f2a;
        --color4: #2e2e30;
        --color5: #f8f9fa;
        --fuenteprincipal: "Roboto", sans-serif;
        --fuentesecundaria: "Montserrat", serif;
    }

    body {
        color: var(--color4);
        font-family: var(--fuenteprincipal);
        background-color: var(--color5);
        font-size: 14px;
    }


    /* unvisited link */
    a:link {
        color: var(--color2);
    }
    
    /* visited link */
    a:visited {
        color: var(--color2);
    }
    
    /* mouse over link */
    a:hover {
        color: var(--color2);
    }
    
    /* selected link */
    a:active {
        color: var(--color2);
    }

    .nav-item {
        font-size: 1.2em;
    }

    h1 {
        color: var(--color4);
        font-size: 2em;
        font-family: var(--fuentesecundaria);
        font-weight: bold;
    }

    h2 {
        color: var(--color1);
        font-size: 1.6em;
        font-family: var(--fuenteprincipal);
        font-weight: bold;
    }

    h3 {
        font-size: 1.4em;
    }
      
    #logo {
        width: 230px;
        padding: 10px;
    }

    #botonWhatsApp {
        position: fixed;
        z-index: 1000;
        bottom: 60px;
        right: 27px;
        width: 50px;
    }

    #piedepagina {
        background-image: url("../img/fondo1-transparente-apcleasing.webp"); 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;

    }

    #piedepagina a {
        color: white;
        text-decoration: none;
    }   

    #piedepagina a:hover {
        color: white;
    }

    #piedepagina .iconoredes {
        font-size: 1.5em;
        padding-right: 10px;
        color: white;
    }

    #piedepagina .iconoredes:hover {
        color: white;
    }

    .titulopiedepagina {
        font-family: var(--fuenteprincipal);
        color: #FFFFFF;
        font-size: 1.5em;
    }

    #piedepagina .bi {
        color: var(--color5);
    }

    .linea {
        border-bottom: 3px solid var(--color3); 
        margin-bottom: 1rem;
        margin-top: 10px; 
        width:80%;
    }

    /* Menu */

    .navbar {
        z-index: 999;
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding-left: 15px;
        padding-right: 15px;
        font-size: 14px;
    }


    .navbar-toggler {
        border: 0px;
    }

    .navbar-toggler:focus {
        outline: none;
        box-shadow: none;
    }

    .iconomenu {
        color: white;
        font-size: 1.4rem;
    }

    .hvr-underline-from-center:before {
        background: var(--color3);
        height: 3px;
    }

    #menuPrincipal {
        width: 100%;
    }

    #bannerPremium {

        background-image: url('../img/fondo1-premiumperformance-apcleasing.webp');
        height: 100%;
        background-position: left;
        background-repeat: no-repeat;
        background-size: cover;

    }

    /* Galería */
    
    .galeria {
        -webkit-filter: brightness(75%); 
        transition: transform 2s, filter 0.2s ease-in-out;
        transform-origin: center center;
        filter: brightness(75%);
    }
  
    .galeria:hover {
        -webkit-filter: brightness(100%); 
        filter: brightness(100%);
    }


    #imagenInicio1 {
        margin-top: -48px;
    }

    /* Sliders */

 

    #elementosSlider1, #elementosSlider2, #elementosSlider3 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
    }

    .tituloCarrusel {
        font-family: var(--fuentesecundaria);
        color: white;
        font-size: 3rem;
        font-weight: 700;
        text-align: center;
        
    }

    .subtituloCarrusel {
        color: white;
        font-weight: 300; 
        font-size: 1.6rem;
        font-family: var(--fuentesecundaria);
        text-align: center;

    }

    .btn-primary {
        font-family: var(--fuenteprincipal);
        width: 225px;
        border: 0px solid transparent;
        background: var(--color3);
    }

    .btn-primary:hover {
        background: var(--color3);
    }

    .btn-light {
        font-family: var(--fuenteprincipal);
        width: 225px;
        border: 1px solid #CCC;
        background: var(--color5);
        color: var(--color1);
    }

    .btn-light:hover {
        border: 1px solid #CCC;
        background: var(--color5);
        color: var(--color1);
    }

    .btnInfo {
        display: block;
        margin: 0 auto;
        background-color: var(--color2);
        color: white;
        border: 0px solid transparent;
    }

    .btnInfo:hover {
        background-color: var(--color2);;
        color: white;
    }

    .btnInfo.hvr-grow:hover {
        background-color: var(--color2) !important;
        color: white;
    }

    .carousel-control-next-icon {
        background-image: url("../img/flecha-der.svg");
    }
    
    .carousel-control-prev-icon {
        background-image: url("../img/flecha-izq.svg");
    }


    .subtitle-inicio {
        font-family: var(--fuentesecundaria);
        color: white;
        font-size: 3rem;
    }

    .subtitle-inicio2 {
        font-family: var(--fuenteprincipal);
        color: white;
        font-size: 4.5rem;
        line-height: 1em;
        margin-bottom: 30px;
    }

    .subtitle-inicio3 {
        font-family: var(--fuenteprincipal);
        color: white;
        font-size: 3.3rem;
        line-height: 1em;
        margin-bottom: 30px;
    }

    /* NOSOTROS */

    #imagen1-nosotros {
        padding-top: 150px;
    }

    #eslogan-nosotros{
        color:white;
        font-size: 3em;
        padding-left: 10%;
        padding-right: 10%;
    }

    #fondo2-nosotros{
        height: 300px;  
        background-image: url(../img/fondo2-gris-herramientas-apcleasing.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .fondo2-premium{
        height: 300px;  
        background-image: url(../img/fondo1-herramientas-apcleasing.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .textoDestacado {
        color: var(--color2);
    }


        
    /*CSS PARA BANNER INICIO*/
    .overlay {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .text-group {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .highlight-inicio {
        font-family:"Antonio", sans-serif;
        color:white;
        font-size: 3rem; 
        font-weight: medium;
    }

    .image-container-banner img {
        max-width: 350px; 
    }

    .btnInfoinicio {
        background-color: #d32f2f;
        color: white;
        border-radius: 30px;
        padding: 5px 50px;
        font-size: 1rem;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .btnInfoinicio:hover {
        background-color: #b71c1c;
    }
    .content {
        text-align: center;
        color: white;
        max-width: 800px;
        margin: 0 auto;
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        color: var(--color1);
    }


    /* Video de Inicio */


    #contenedorVideo {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }

    #videoInicio { 
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        z-index: 1;
    }

    #overlayTransparente {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 2;
    }

    #esloganVideo {
        font-family: var(--fuentesecundaria);
        font-weight: bold;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 4rem;
        font-weight: 700;
        text-align: center;
        z-index: 3;
    }

    /* Parralax */
    #imagenParallax1  {
        background-image: url('../img/somos2-apcleasing.webp');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        height: 600px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: white;
    }

    #imagenParallax2  {
        background-image: url('../img/activos2-apcleasing.webp');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        height: 600px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: white;
    }

    #imagenParallax3  {
        background-image: url('../img/clientes2-apcleasing.webp');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        height: 600px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: white;
    }

    #imagenParallax4  {
        background-image: url('../img/inicio2-apcleasing.webp');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        height: 600px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: white;
    }

    #imagenParallax5  {
        background-image: url('../img/arrendar2-apcleasing.webp');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        height: 600px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: white;
    }

    @media only screen and (max-width: 768px) {

        #logo {
            width: 200px;
        }

        h1 {
            font-size: 1.5em;
        }

        h2 {
            font-size: 1.5em;
        }

        .titulo {
            font-size: 1.5em;
        }

        #botonWhatsApp {
            bottom: 60px;
            width: 44px;
        }

        #imagenInicio1 {
            margin-top: 0px;
        }

        /* Sliders */

        .imagenCarrusel {
            width: 100%;
            height: 400px;
            object-fit: cover;
            object-position: center;
        }

        .subtitle-inicio {
            font-size: 1.5rem;
        }

        .subtitle-inicio2 {
            font-size: 3rem;
        }

        .subtitle-inicio3 {
            font-size: 2rem;
        }

        .btn {
            width: 185px;
        }

        .image-container-banner img {
            width: 200px; 
        }

        .tituloCarrusel {
            font-size: 2rem;
            margin-top: 50px;
        }

        .subtituloCarrusel {
            font-size: 1.7rem;
            margin-top: 0px;
            
        }

 
        #banner{
            margin-top: 100px;
        }

        #menuPrincipal {
            background-color: white;
        }

        .titulopiedepagina {
            font-size: 1.2em;
        }

        #imagenBanner{
            object-position: center;
            height: 300px;
            object-fit: cover;
            object-position: center;
        }


        #eslogan-nosotros{
            color:white;
            font-size: 1.5em;
            padding:50px;
        }

        #fondo2-nosotros{
            height: 190px;  
        }

        #piedepagina {
            background: linear-gradient(124deg, rgba(0,89,138,1) 0%, rgba(0,46,89,1) 100%);
        }

        #esloganVideo {
            font-size: 2rem;
        }

        #imagenParallax1, #imagenParallax2, #imagenParallax3, #imagenParallax4, #imagenParallax5 {
            background-attachment: scroll !important;
            height: 600px !important;
        }
    

    }