header#h-primary{
    height: calc(100vh - 51px);
    background-attachment: fixed;
    background-size: cover;
    background-position: top;

    & div#cont-elements-header{
        z-index: 10;

        & h1.title-header{
            text-shadow: 2px 2px 5px var(--dark-one);
            color: whitesmoke;
    
        }
        & p.subtitle-header{
            font-family: 'Courier New', Courier, monospace;
            
            color: var(--enf-two);
            background-color: #ffffff1c;
            white-space: wrap;
            overflow: hidden; /* Oculta el texto que no ha sido escrito */
            text-shadow: .5px .5px var(--enf-two);
            width: fit-content;
            
            & span{
                border-right: 1.6px solid white; /* Esto simula el cursor de escritura */
                animation: titilarBorde 1s infinite;
            }
        }
        & div#cont-btns-header{
            & a.btn-header{
                color: aliceblue;
                font-size: 20px;
            }
        }
    }

}

@keyframes titilarBorde {
    0% {
      border-color: white; 
    }
    50% {
      border-color: transparent;
    }
    100% {
      border-color: white;
    }
  }


@media (min-width:1200px) {
    header#h-primary{
        height: min(calc(100vh - 61px), 1024px);
        
    }
}
/*Seccion de Servicios*/
section#services{

    background-image: url("../../src/img-styles/81310.jpg");

    & .container-card {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: white;

        & .card {
            background: white;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            transition: all 0.1s ease;
            border:none;
          }
        & .card:hover {
            box-shadow: 0 4px 26px #5b91cc78;
        }
    }

    
}
/*Seccion de proyectos*/

section#projects{
    min-height: 700px;
    & div#btns-taxonomies button{
        min-width:135px;
    }

    & div#btns-taxonomies{
        & .wa-btn {
            padding: 10px 20px;
            border: 2px solid #212529;
            background-color: #fff;
            color: #212529;
            font-size: 16px;
            font-weight: 400;
            border-radius: 5px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .wa-btn:hover {
            background-color: #212529;
            color: #fff;
            transform: scale(1.1);
            box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
        }

        .wa-btn-selected{
            background-color: #212529;
            color: #fff;
        }
        
    }

    & div#cont-posts{
        & div.project{
            opacity: 0;
            transform: translateY(20px); /* Desplazamiento hacia abajo para hacer la animación de entrada */
            visibility: hidden; /* Inicialmente oculto */ 
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
            
            & .card-proyecto {
                box-shadow: 0px 4px 6px gray;
                border-radius: 5px;

                & div.cont-title-card{
                    position: absolute;
                    z-index: 10;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;

                    & a{
                        text-decoration: none;
                        opacity: 0;
                        background: var(--enf-two);
                        transition: opacity 0.5s ease-in-out;
    
                    }
                }
                & div.cont-title-card:hover > a{
                    opacity: 1;
                    background: var(--enf-two);
                }
            }
        }
        & div.project.show{
            opacity: 1;
            transform: translateY(0);   /* El elemento vuelve a su posición original */
            visibility: visible;
            
        }
        & div.hide{
            visibility: hidden;
            width: 0;
            padding: 0;
        }
    }

    & div.decor-circle{
        position: absolute;
        width: 200px;
        height: 200px;
        background-image: linear-gradient(45deg, var(--enf-one),transparent);
        left: -100px;
        top: -250px;
        z-index: -1;
        box-shadow: 2px 2px 5px lightslategray;
    }
    & div.decor-circle-big{
        position: absolute;
        width: 800px;
        height: 800px;
        background-image: linear-gradient(45deg, var(--enf-two),transparent);
        top: 30%;
        right: -20%;
        z-index: -1;
        box-shadow: 2px 2px 5px lightgray; 
    }

        
    
}


/*seccion certificados*/

section#certified{

    background-image: url("../../src/img-styles/5594016.jpg");
    background-size: cover;
    background-repeat: no-repeat;
   

    & .wp-block-gallery{
        gap:15px;
        & figure{
            border: 4px solid;
            box-shadow: 0 4px 6px gray;
    
            & figcaption {
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 60px;
                font-size: 15px;
                padding: 2px;
                background: black;
            }
        }
    }
    & .wp-block-gallery > figure:hover{
        transform: scale(1.05);
        transition: transform 0.5s ease-in-out;
    }
}

@media (min-width: 576px) {
    section#certified{
        & .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image) {
            width: calc(50% - 15px * .75);
        }
    }
    
}

@media (min-width: 768px) {
    section#certified{
        & .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image) {
            width: calc(33.33% - 15px * .75);
        }
    }
    
}

@media (min-width: 992px) {
    section#certified{
        & .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image) {
            width: calc(25% - 15px * .75);
        }
    }
    
}


/*seccion Testimonials*/

section#testimonials{
    min-height: 50vh;
    padding-top: 100px;
    padding-bottom: 100px;
    
    & div#slideTestmonials{

        & div.carousel-item {
            
            & div.img-testimonial img{
                margin-bottom: 1rem;
                border: 2px solid #fff;
                border-radius: .3rem;
            }
            & h4{
                letter-spacing: .15rem;
            }
            & div.description-testimonial{
                border: 2px solid #fff;
                border-radius: .5rem;
            }
        }
    }
}

/*seccion Videos de YouTube*/

section#videos{
    background-image: url("../../src/img-styles/5594016.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

div#gallery-youtube{

    & div.cont-video > div.cont-yt {
        border-radius: 5px;
        box-shadow: 0 4px 6px gray;
        border: 5px solid;

        & > figure > img{
            transform: scale(1);
            transition: transform 1s ease-in-out;
        }

        & > div.overlay > a{

            & > i{
                color: #ffffff80;
                transition: color .5s ease-in-out;
            }

            & > div{
                background-color: var(--dark-one);
                height: 30%;
                position: absolute;
                top: 100%;
                transition: top .5s ease-in-out;
            }
        } 
    }

    & div.cont-video > div:hover{

        & > figure > img{
            transform: scale(1.1);
        }

        & > div.overlay > a{

            & > i{
                color: #ffffff;
            }

            & > div{
                background-color: var(--dark-one);
                position: absolute;
                top: calc(100% - 30%);
            }

        } 
    } 
}