/* variables de la raiz */
:root{
    /* colores */
    --clr-negro: black;
    --clr-blanco: white;
    --clr-dorado: #f4d229;
    --clr-amarillo-claro: #e6d690;
    --clr-azul: #7892c2;
    --clr-verde-whsp: #25D366;
    --clr-rojo-gmail: #EA4335;
    /* fuentes */
    --ff-title: 'Roboto', sans-serif;
    --ff-title-weight: 500;
    --ff-paragraph: 'Poppins', sans-serif;
    --ff-paragraph-weight: 300;
    
    /* Fluid Typographic Scale */
    /* minimum, prefered, and maximum values */
    --font-size-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.96rem);
    --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.31rem); /* paragraph size */
    --font-size-md: clamp(1.25rem, 0.61vw + 1.1rem, 1.88rem);
    --font-size-lg: clamp(1.56rem, 1vw + 1.31rem, 2.5rem);
    --font-size-xl: clamp(1.95rem, 1.56vw + 1.56rem, 3.75rem);
    /* vw = viewport width. 1vw is 1% of viewport 
    The prefered value is calclated with scale vw and fixed part rem
    the values where calculated with online tool to create a perfect linear function
    and those values are the coefficients */
    /* Assign the base size to the paragraph variable */
    --ff-paragraph-size: var(--font-size-base);
}

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

/* asigna las variables de la raiz al comportamiento por defecto en body */
body{
    font-family: var(--ff-paragraph);
    font-weight: var(--ff-paragraph-weight);
    font-size: var(--ff-paragraph-size);
    line-height: 1.6;
}

/* MOBILE STYLES (Default) */
.navbars{
    position: fixed;
    width: 100%;
    z-index: 1030; /* High z-index to ensure it's above everything */
    top: 0;
    left: 0;
}

/* Social Icons Bar - Mobile (TOP BAR) */
.social-top-navbar {
    padding: 0.3rem 0;
    min-height: auto;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background-color: var(--clr-negro) !important;
}

/* Ensure social navbar is above main navbar on mobile */
.social-top-navbar {
    position: relative;
    z-index: 1031; /* Higher than main navbar */
}

.main-navbar {
    position: relative;
    z-index: 1030; /* Lower than social navbar */
}

/* Social icons styling for mobile */
ul.iconos {
    list-style-type: none;
    display: flex;
    justify-content: center; 
    margin: 0;
    padding: 0;
    gap: 1rem;
}

ul.iconos li {
    display: inline-block;
}

/* iconos centrados */
.header-icons {
    list-style-type: none;
    margin-inline: auto;
    width: 100%;
}

/* Main Navigation - Mobile */
.main-navbar.navbar {
    padding: 0.5rem 0;
}

/*Navbar for mobile max width of 992px*/
/* creates a toogle menu and push it to right of the navbar*/
@media (max-width: 991.98px) {
    .main-navbar .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    /* Push toggler to the right */
    .navbar-toggler {
        order: 2;
        margin-left: auto;
    }

    /* Keep brand on left */
    .header-name {
        order: 1;
    }

    /* and toggler menu*/
    .navbar-collapse{
        order: 3;
        flex-basis: 100%; /* Take full width */
        text-align: right;
    }

    /* Align nav items to right */
    .navbar-nav {
        text-align: right;
    }

    .nav-item {
        display: block;
    }
    
    .nav-link {
        text-align: right;
        padding: 0.75rem 1rem;
        display: block;
    }
       
    /* Hide desktop icons on mobile */
    .header-icons-desktop {
        display: none;
    }
}

/* centrar mas el nombre y el boton de la navbar secundaria */
.navbar-brand{
    margin-left: 0.8rem;
}

/*para aplicar un estilo a una clase anidada toca partir desde la clase nodriza */
.navbar .navbar-brand{
    color: var(--clr-dorado);
    font-size: 1.25rem;
}

.navbar-toggler {
    margin-right: 0.8rem;
}

/* Hide desktop social icons on mobile */
.header-icons-desktop {
    display: none;
}


.header-name {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* Perfect center */
    margin: 0 !important;
    z-index: 1;
}

/* DESKTOP STYLES (min-width: 992px) */
@media (min-width: 992px) {
    /* Hide mobile social icons bar */
    .social-top-navbar {
        display: none !important;
    }
    
    /* Main navbar adjustments for desktop */
    .main-navbar.navbar {
        padding: 0.5rem 0;
        height: auto;
    }
    
    .navbars {
        position: fixed;
        width: 100%;
        z-index: 1030;
    }
    
    /* SIMPLE GRID SOLUTION - Perfect centering between elements */
    .main-navbar .container {
        display: grid;
        grid-template-columns: 1fr auto 1fr; /*3 columns brand is in the center column auto*/
        align-items: center;
        max-width: 100%;
        padding: 0 2rem;
        gap: 1rem;
    }
    
    /* PERFECT CENTERING FOR BRAND */
    .header-name {
        position: static;
        transform: none;
        margin: 0 !important;
        justify-self: center;
        text-align: center;
        width: 100%; /* Ensure it takes full width of grid cell */
    }
    
    .navbar .header-name .navbar-brand {
        color: var(--clr-dorado);
        font-size: 1.5rem;
        margin: 0 auto; /* This centers the brand within its container */
        white-space: nowrap;
        display: block; /* Make it block level for proper centering */
        text-align: center;
    }
    
    /* Desktop social icons */
    .header-icons-desktop {
        display: block;
        flex: 0 0 auto;
        margin-right: auto; /* Push to left */
    }
    
    .social-icons-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        gap: 0.8rem;
    }
    
    .social-icons-list li {
        display: inline-block;
    }
    
    /* Desktop navigation menu - Push to right */
    .navbar-collapse {
        display: flex !important;
        justify-self: end;
        flex-grow: 0;
        margin-left: auto; /* Push to right */
    }
    
    .navbar-nav {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        min-width: 0;
    }
    
    .nav-link {
        padding: 0.5rem 1rem;
        white-space: nowrap;
    }
    
    /* Hover effects for desktop */
    .navbar .navbar-collapse .navbar-nav .nav-item .nav-link:hover {
        color: var(--clr-dorado);
    }
    
    .header-icons-desktop:hover {
        color: var(--clr-dorado);
    }
}




/* LARGE DESKTOP OPTIMIZATION */
@media (min-width: 1200px) {
    .main-navbar .container {
        padding: 0 3rem;
    }
    
    .nav-link {
        padding: 0.5rem 1.2rem;
    }
}

/* Control navbar height for different screen sizes */
@media only screen and (min-width: 600px) {
    .navbar {
        height: auto !important; 
    }
}

@media only screen and (min-width: 768px) {
    .navbar {
        height: auto !important; 
    }
}

/* Control button size */
@media only screen and (min-width: 768px) {
    .navbar-toggler {
        height: 3rem !important; 
        width: 4rem !important;
    }
}

/* display background color black on navbar scroll */
.navbarScroll.navbarDark {
    background-color: black;
}

.navbar {
    transition: none !important;
}

/*banner*/


.bgimage.hero-text.button:hover {
    background: #f4d229;
    color: #000000;
}

/* hero background image */
.banner {
    height:80vh; 
    background: url('imagenes_paginaweb/imagenes/new_banner.jpg');
    background-size:cover;
    background-position: center;
    box-shadow: inset 0 0 0 2000px rgba(0,0,0,.7);
    padding-top: 0;
    position:relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media (min-width: 768px) {
    .banner {
        height: 90vh; /* Increase height for tablets and desktops */
    }
}

@media (min-width: 1000px) {
    .banner {
        height: 100vh; /* Increase height for tablets and desktops */
    }
}
.banner-container{
    display: flex;
    flex-direction: column;
    align-items: center;

    /* position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white; */

    color: white;
    width: 90%; /* for small screens */
    max-width: 100rem; /* Optional: limit the maximum width */
    box-sizing: border-box; /* Add padding awareness */
}

@media (min-width: 768px) {
    .banner-container {
        width: 80%; /* for tablets and desktops */
    }
}

@media (min-width: 992px) {
    .banner-container {
        width: 80%; /* for tablets and desktops */
    }
}



.title {
    margin-top: 1rem; /* Adjust the value as needed */
}

/* text css above hero image*/
.hero_title {
    padding-top: 3.5rem;
    font-size: 4.5rem;
    text-align: center;
}

.hero_desc {
    /* min-size (small screens), preferred-size (), max-size */
    font-size: clamp(1.4rem, 1.6vw, 2rem); 
    
    margin-bottom: 2rem; /* Adds space between text and video */
    font-family: 'Poppins', sans-serif;
    font-weight: 200;
    justify-content: center;
    text-align: center;
}



@media (min-width: 900px) and (min-height: 1200px) {
    .banner-container {
        width: 90%; /* for tablets and desktops */
    }
    /* The font-size rule for .hero_desc has been removed */
    .banner{
        height:80vh;
    }  
}

.hero_desc_contact {
padding-right: 2rem;
    padding-left: 2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 2rem;
    text-align: center;

}
.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}


/*Default Style: Mobile Carousel*/

.carousel-container {
    padding-top: 1rem;
    width: 95%; /* Use most of the screen, but leave a small margin */
    /* Set a fixed height for the carousel height: 30vh;*/
    margin: 0 auto; /* Center the container horizontally */
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    /* REMOVED height: 30vh; */
}
/* The wrapper that holds and slides all the videos */
        /*like a film strip that holds single videos side by side, so the
        movement of slides passing can be animated*/
.carousel-wrapper {
    display: flex;
    /*tells the warpper to occupy the full height of the carrousel container height: 100%;*/
    transition: transform 0.5s ease-in-out;
}

.carousel-slide {
    min-width: 100%;
    box-sizing: border-box;
    /* Flexbox centering is no longer needed here */
    /* flexbox container and tell it to center its content display: flex;*/
            /* Horizontally center justify-content: center;*/
            /* Vertically center align-items: center;*/
}


.carousel-btn {
            position: absolute;
            top: 50%; /*locate the btn at the middle*/
            transform: translateY(-50%); /*locate it precisely*/
            background-color: rgba(0, 0, 0, 0.5); /*little shadow underneath*/
            color: white; /*arrow color*/
            border: none;
            padding: 5px 10px; /*distance from the edge of the btn itself*/
            border-radius: 50%; /*to make it round*/
            cursor: pointer;
            z-index: 10;
            font-size: 1.5rem;
            transition: background-color 0.3s ease; /*animation*/
        }

.carousel-btn:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }

#prevBtn {
            left: 5px; /*margin og the button to the border of the container*/
        }

#nextBtn {
            right: 5px;
        }

.prev-btn {
            left: 5px; /*margin og the button to the border of the container*/
        }

.next-btn {
            right: 5px;
        }

        /* --- Navigation Dots --- */
.carousel-dots {
            position: absolute;
            bottom: 15px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
        }

.dot {
            width: 8px;
            height: 10px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

.dot.active {
            background-color: white;
        }


.video-container {
    position: relative;
    width: 90%; /* Video takes up 90% of the slide's width */
    margin: 0 auto; /* Center the video within the slide */
    /* REMOVED height: 70%; */
    /* Make video container take full height of the slide height: 70%;*/
}

/* This is now the ONLY rule that creates height, ensuring a 16:9 ratio */
.video-container::before {
    content: '';
    display: block;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (9 / 16 = 0.5625) */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}



/* DESKTOP STYLES FOR CAROUSEL (min-width: 992px) */
@media (min-width: 992px) {
    .carousel-container {
        width: 90%;
        max-width: 1200px; /* IMPORTANT: This is the main size control */
        margin: 0 auto; /* Center the container */
        position: relative;
        overflow: hidden;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        /* REMOVED height: 60vh; */
    }

    .carousel-wrapper {
        display: flex;
        transition: transform 0.5s ease-in-out;
    }

    .carousel-slide {
        min-width: 100%;
        box-sizing: border-box;
    }

    .carousel-btn {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    background-color: rgba(0, 0, 0, 0.5);
                    color: white;
                    border: none;
                    padding: 10px 15px;
                    border-radius: 50%;
                    cursor: pointer;
                    z-index: 10;
                    font-size: 1.5rem;
                    transition: background-color 0.3s ease;
                }

    .carousel-btn:hover {
                    background-color: rgba(0, 0, 0, 0.8);
                }

    #prevBtn {
                    left: 10px;
                }

    #nextBtn {
                    right: 10px;
                }

    .prev-btn {
            left: 10px; /*margin og the button to the border of the container*/
        }

    .next-btn {
            right: 10px;
        }

                /* --- Navigation Dots --- */
    .carousel-dots {
                    position: absolute;
                    bottom: 15px;
                    left: 50%;
                    transform: translateX(-50%);
                    display: flex;
                    gap: 10px;
                }

    .dot {
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                    background-color: rgba(255, 255, 255, 0.5);
                    cursor: pointer;
                    transition: background-color 0.3s ease;
                }

    .dot.active {
                    background-color: white;
                }

                
    .video-container {
        position: relative;
        width: 100%; /* CHANGED: Video now fills the slide */
        margin: 0 auto;
        /* REMOVED height, max-width */
    }

    /* This rule correctly maintains the 16:9 aspect ratio */
    .video-container::before {
        content: '';
        display: block;
        padding-top: 56.25%;
    }

    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }

}

/* LARGE DESKTOP OPTIMIZATION OF the Carousel */
@media (min-width: 1200px) {
    .carousel-container {
        width: 90%;
        max-width: 840px; /* ✅ This is the only size control we need */
        margin: 0 auto;
        position: relative;
        overflow: hidden;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    /* (Wrapper and slide styles are fine as they are) */
    .carousel-wrapper {
        display: flex;
        transition: transform 0.5s ease-in-out;
    }

    .carousel-slide {
        min-width: 100%;
        box-sizing: border-box;
    }

    .carousel-btn {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    background-color: rgba(0, 0, 0, 0.5);
                    color: white;
                    border: none;
                    padding: 10px 15px;
                    border-radius: 50%;
                    cursor: pointer;
                    z-index: 10;
                    font-size: 1.5rem;
                    transition: background-color 0.3s ease;
                }

    .carousel-btn:hover {
                    background-color: rgba(0, 0, 0, 0.8);
                }

    #prevBtn {
                    left: 10px;
                }

    #nextBtn {
                    right: 10px;
                }

    .prev-btn {
            left: 10px; /*margin og the button to the border of the container*/
        }

    .next-btn {
            right: 10px;
        }

                /* --- Navigation Dots --- */
    .carousel-dots {
                    position: absolute;
                    bottom: 15px;
                    left: 50%;
                    transform: translateX(-50%);
                    display: flex;
                    gap: 10px;
                }

    .dot {
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                    background-color: rgba(255, 255, 255, 0.5);
                    cursor: pointer;
                    transition: background-color 0.3s ease;
                }

    .dot.active {
                    background-color: white;
                }

                
    .video-container {
        position: relative;
        width: 100%; /* CHANGED: Let the video fill the container */
        /* REMOVED max-width and margin for simplicity */
    }

    /* This rule correctly maintains the 16:9 aspect ratio */
    .video-container::before {
        content: '';
        display: block;
        padding-top: 56.25%;
    }

    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }

}

/* spacing on all sections */
/* #about, #services, #portfolio, #contact {
    margin-top: 4rem;
    padding-top: 4rem;
} */

/* seccion pag de contacto */
#contact {
    
    flex-grow: 1;
}

#body_contactPage{
    display: flex;
    flex-direction: column;
    max-height: 100vh; /* Make the body at least the full height of the viewport */
    padding-top: 70px; /* This is still needed for your fixed-top */
}

.contact-btn-container{
    position: fixed;
    right: 1rem;
    bottom: 0rem; /*inferior a la psoicion fnal de la animacion, desplazamiento hacia arriba*/
    
    padding: 1rem;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    animation: fade-up 1500ms forwards; /*nombre de la anim fade-up, duracion 1seg
                                            y forward para que permanezca un segundo*/
    animation-delay: 1000ms; /*después de 1seg*/
}

@keyframes fade-up {
    /* The animation starts here (initial state) */
    0% {
        opacity: 0;
        /* It starts from a lower position */
        bottom: 0.5rem; 
    }

    /* It moves up to its peak at the halfway point */
    50% {
        opacity: 1;
        bottom: 2rem; /* This is the highest point */
    }

    /* It settles back down to its final resting position */
    100% {
        opacity: 1;
        bottom: 0.5rem; /* This should match your element's final bottom value */
    }
}


.contact-btn-container .whatsapp-btn,
.contact-btn-container .email-btn {
    font-size: 3rem;  /*icon sizes for whatsp and email*/
    display: inline-block;
    transition: all 400ms;

}


.contact-btn-container .whatsapp-btn {
    color: var(--clr-verde-whsp); /* WhatsApp Green */
}
.contact-btn-container .email-btn {
    color: var(--clr-rojo-gmail); /* Google Red - good for email */
}


.contact-btn-container .whatsapp-btn:hover,
.contact-btn-container .email-btn:hover  {
    transform: scale(1.2)
}

.contact-btn-container span{
    position: absolute;
    top: -1.5rem;
    
    left: -2.5rem;
    font-size: large;
    font-weight: bold;
    color: var(--clr-dorado); 
    transform: rotateZ(20deg) translateX(0.2rem);
    opacity: 0;
    transition: all 400ms;
}



/* comportamiento cuando se hace hover sobre el boton*/
.contact-btn-container:hover span {
    transform: rotateZ(0deg) translateX(0rem);
    opacity: 1;
}


/* seccion services o lineas de interes css */

.fi-br-drone {
    display: block; /* Ensure the icon is treated as a block-level element */
    margin: 0 auto; /* Center the icon horizontally */
}

.servicesText.card {
  /*  height: 280px; */ /* No hace falta especificar el alto aqui. El tamaño ya lo espicifico inline en el html */
    cursor: pointer;
  }

.servicesIcon {
    font-size: 36px;
    text-align: center;
    width: 100%;
}

.card-title {
    text-align: center;
}



/*cuando hay hover sobre estos elementos cambian de color*/
 .servicesIcon:hover {
    color: #f4d229;
}

.card:hover {
    background:linear-gradient(to bottom,var(--clr-amarillo-claro) 5%, #fefefe 100%);
	background-color:var(--clr-amarillo-claro);
}

.servicesText:hover {
    border: 1px solid #f4d229;
}

/* botones portafolio en la misma seccion lineas de interes servicios */
/*cambiar el color de la letra y fondo de los botones en protafolio */
.btn.btn-success{
    background: var(--clr-azul);
    border-radius: 8px;
    color: var(--clr-negro);
    border: 2px solid var(--clr-negro);}

/*cambiar de nuevo pero cuando se hace hover sobre los botones*/
.btn.btn-success:hover{
    color: #000000;
    background: #f4d229;
    }

/*si hay varias clases en el elemento html se deben colocar todas para que el estilo surta efecto*/
.btn.btn-lg.btn-dark.btn-block:hover {
    color: #000000;
    background: #f4d229;
}



/* seccion audiovisual */

.text-audivisuales{
    padding-top: 1rem;
    text-align: center;
}
#audiovisuales {
    background-color: var(--clr-negro); 
    color: var(--clr-blanco); 
    padding: 2rem;
}


.text-phrase{
    padding: auto;
}

/*titulo audiovisuales*/
.container-audiovisuales{
    padding-bottom: 1rem;
}

.video-container-audiovisuales{
    
    position: relative;
    overflow: hidden;
    text-align: center;
  }

  /* frase audiovisuales*/
.text-phrase{
    padding-top: 2rem;
    text-align: center;
}



/* secction about INFOGRAFIA*/
/* Sobre mi comportamiento de la infografia */

#about {
            width: 100%;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            justify-content: center; /* Horizontally center */
            align-items: center;     /* Vertically center */
        }


.container-about{
    padding-bottom: 1rem;
}

/* about section image css */
.imageAboutPage {
    width: 100%;
}

/* This is now a container with a defined size */
.image-aspect-container {
            /* 1. CONTROL THE SIZE HERE */
            width: 80%;       /* Set a responsive width */
            max-width: 60rem;   /* Set a max-width in responsive units (approx 960px) */        
            position: relative; /* Acts as the anchor for the elements inside */
            display: flex;
            justify-content: center; /* Horizontally center */
            align-items: center;     /* Vertically center */

        }

        /* 2. This creates the container's shape to match your image */
.image-aspect-container::before {
            content: '';
            display: block;
            /* Aspect Ratio = (height / width) * 100 = (1372 / 1754) * 100 = 78.22% */
            padding-top: 78.22%; 
        }

        /* 3. The image is forced to fill the container we just created */
.image-aspect-container img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ensures the image fills the space completely */
        }

/* 1. Make the image clickable and add a hover effect */
.clickable-image {
            cursor: pointer;
            transition: transform 0.3s ease;
        }
.clickable-image:hover {
            transform: scale(1.05);
        }


/* Allow scrolling for zoomed content */
.image-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 2000;
            cursor: pointer;
            overflow: auto; /* Allows scrolling when the image is zoomed */
        }

.modal-image {
            max-width: 95%;
            max-height: 95%;
            object-fit: contain;
            /* box-shadow: 0 0 30px rgba(0,0,0,0.5); */
            transition: max-width 0.3s ease, max-height 0.3s ease; /* Smooth transition for zoom */
            cursor: zoom-in; /* Indicates the image can be zoomed */
        }
/* Styles for the zoomed state */
.modal-image.zoomed {
            max-width: 130%; /* Remove constraints to show full resolution */
            max-height: 130%;
            cursor: zoom-out; /* Indicates the image can be un-zoomed */
        }


/* seccion trayectoria */
#trayectoria{
    background: #000000; 
    color: white;  
}

.trayectoriaText{
    padding-top: 1rem;
}

@media (min-width: 992px) {
    .trayectoriaText{
    padding-top: 0;
}
}

/* footer */
/* social media icons styling */
.social-icons {
    font-size: 36px;
    cursor: pointer;
}
.fa-facebook:hover,.fa-instagram:hover,.fa-twitter:hover,.fa-linkedin:hover, .fa-tiktok:hover, .fa-youtube:hover {
    color:  #f4d229;
}
.fab {
    color: #000000;
}

.li.facebook {
    background-image: url("imagenes_paginaweb/iconos/facebook_icon.svg");
    background-repeat: no-repeat; /* Prevent multiple icons */
    /* Other styles for the icon element (optional) */
  }
  
/* footer styling */
#footer {
    background-color: var(--clr-azul);
    text-align: center;
    
}  

#footer_contact{
    background-color: var(--clr-azul);
    text-align: center;
    position: fixed; /* siempre en esa posicion en el viewport */
    bottom: 0;  /* al fondo del viewport */
    width: 100%; /* ocupa todo el ancho del viewport */
}
  

.footer-text {
    
    /* top right bottom left */
    margin:0px 0px -20px 0px;
    font-size: 1.5625rem;
}




/* Estilo pagina de contacto */

/*color y comportamiento cuando hover sobre el boton send*/
#sendbtn {
    color: var(--clr-blanco);
    background: var(--clr-azul);
}

#sendbtn:hover {
    color: #000000;
    background: #f4d229;
}

/* seccion servicios */

.service-text{
    text-align: center;
    padding-top: 1rem;
}