:root{
    --primer-color:#a46080;
    --segundo-color:#fbbb8d;
    --tercer-color:#d96438;
}

.bg-featured{
    background: url(../images/featured-bg.jpg) no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
.positionMenu{
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 5;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
}

.bg-estimates{
    background: var(--primer-color);
}
.bg-phone{
    background: var(--segundo-color);
}
.bg-experience{
    background: var(--tercer-color);
}
.item-canvas{
    display: block;
    padding: 15px 10px;   
    color: white;
}
.bg-offcanvas{
    background-color:  var(--tercer-color);
}
.item-canvas:hover, .item-active{

    background-color: var(--segundo-color);;
    color: white;
}

.menu-canvas li ul{
    display: none;
    background-color: var(--primer-color);
}
.menu-canvas li:hover ul{
    display: block;
}

.bg-header-about{
    background: url(../images/slideshow1.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
    min-height: 500px;
    position: relative;
    color: white;
}
.bg-header-gallery{
    background: url(../images/slideshow2.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
    min-height: 500px;
    position: relative;
    color: white;
}
.bg-header-contact{
    background: url(../images/slideshow3.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
    min-height: 500px;
    position: relative;
    color: white;
}
.overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(1, 157, 218, 0.678);
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.videomobile{
    margin-top: 170px;
}

@media screen and (min-width:768px){
    .videomobile{
        margin-top: 100px;
    }
}



/* Estilos para el botón de "Click to Call" */
.call-button {
    position: fixed; /* Hace que el botón flote y se mantenga en la pantalla */
    bottom: 120px;    /* Distancia desde el borde inferior de la ventana */
left: 25px;     /* Distancia desde el borde derecho de la ventana */
    background-color: #db6940 ; /* Verde vibrante (similar al logo de Jaguar Roofing) */
    color: #ffffff;  /* Color del icono (blanco para un alto contraste) */
    width: 70px;     /* Ancho del botón */
    height: 70px;    /* Alto del botón (igual que el ancho para hacerlo circular) */
    border-radius: 50%; /* Transforma el cuadrado en un círculo perfecto */
    display: flex;   /* Habilita Flexbox para centrar el contenido */
    justify-content: center; /* Centra el icono horizontalmente */
    align-items: center;     /* Centra el icono verticalmente */
    font-size: 36px; /* Tamaño del icono, para que sea bien visible */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Sombra pronunciada para darle relieve y profundidad */
    z-index: 9999;   /* ¡Fundamental! Asegura que el botón se muestre por encima de casi todos los demás elementos */
    text-decoration: none; /* Elimina el subrayado predeterminado de los enlaces */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones suaves para efectos hover */
    cursor: pointer; /* Cambia el cursor para indicar que es clickeable */

    /* Posicionamiento relativo para el tooltip (importante) */
    position: fixed; /* Mantenemos fixed aquí para el botón principal */
}

.call-button:hover {
    background-color: #ffffff !important; /* Un tono de verde ligeramente más oscuro al pasar el ratón */
    transform: scale(1.15); /* Aumenta el tamaño del botón en un 15% al pasar el ratón */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5); /* Sombra más grande y oscura al pasar el ratón */
    color: #db6940;
}

/* Estilos para el Tooltip (la frase que aparece) */
.call-button-tooltip {
    position: absolute; /* Posicionamiento absoluto respecto al botón padre */
    top: 58%;
     /* Alinea el centro del tooltip con el centro del botón */
    left: 137%; /* Coloca el tooltip a la derecha del botón */
    transform: translateY(-50%) translateX(-15px); /* Ajusta la posición: centra verticalmente y mueve a la izquierda */
    white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
    background-color: #ffffff; /* Fondo blanco para el tooltip */
    color: #333333; /* Color de texto oscuro para contraste */
    padding: 8px 12px; /* Relleno interno */
    border-radius: 5px; /* Bordes redondeados */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Sombra para el tooltip */
    font-size: 16px; /* Tamaño de fuente */
    opacity: 0; /* Inicialmente invisible */
    visibility: hidden; /* Oculta el tooltip completamente */
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; /* Transición suave para aparecer */
    z-index: 9998; /* Un z-index ligeramente menor que el botón para que esté "detrás" si se superponen */
}

/* Muestra el tooltip cuando el cursor pasa sobre el botón */
.call-button:hover .call-button-tooltip {
    opacity: 1; /* Lo hace visible */
    visibility: visible; /* Asegura que sea interactuable */
    transform: translateY(-50%) translateX(-25px); /* Mueve el tooltip ligeramente al aparecer */
}

/* Media Queries para responsividad (ajuste en dispositivos más pequeños) */
@media (max-width: 768px) {
    .call-button {
        width: 60px;
        height: 60px;
        font-size: 30px;
        bottom: 20px;
        right: 20px;
    }
    .call-button-tooltip {
        font-size: 14px; /* Ajusta el tamaño de fuente para móviles */
        padding: 6px 10px;
        /* Puedes ajustar la posición si el tooltip choca con el borde de la pantalla en móviles */
        /* Por ejemplo, ponerlo a la izquierda si el botón está a la derecha */
        right: 100%;
        left: auto; /* Asegúrate de que no haya left interferente */
        transform: translateY(-50%) translateX(-15px);
    }
    .call-button:hover .call-button-tooltip {
        transform: translateY(-50%) translateX(-25px);
    }
}

@media (max-width: 480px) {
    .call-button {
        width: 55px;
        height: 55px;
        font-size: 28px;
        bottom: 15px;
        right: 15px;
    }
    .call-button-tooltip {
        font-size: 13px; /* Más pequeño para pantallas muy pequeñas */
        padding: 5px 8px;
    }
}