.section-portfolio{

    padding: 50px 50px;

}



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

    .section-portfolio{

        padding: 30px 30px;

    }

}



/* section title */



.title_gallery_section{

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

}



.title_gallery_section h2{

    font-size: 50px;

    text-align: center;

    margin-bottom: 20px;

} 

.title_gallery_section p{

    font-size: 18px;

    text-align: center;

    max-width: 700px;

} 

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

    .title_gallery_section h2{

        font-size: 30px;

    } 
    .card-gallery {

        margin: auto;
        width: 100%;
    }

    .marginTab {
        margin: auto;
        display: flex;
        justify-content: center;
    }

}



/* tabulador */



.tab-gallery{

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 0 auto 30px auto;

}



.tab_gallery{

    padding: 10px 20px;

    width: 200px;

    background: #000;

    color: #fff;

    margin: 10px 20px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-family: var(--font-title);

    cursor: pointer;

}



.tab_gallery.activeProductGallery{

    background: var(--color_primary-dark);

    transform: scale(1.05);

}



/* card gallery */



.card-gallery{

    position: relative;

    overflow: hidden;

    display: block;

    margin: 0px auto 20px auto;

    width: 100%;

    max-width: 450px;

    height: 480px;

    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
	
	background: #000;

}



.card-gallery img{

    width: 100%;

   /* height: 284px;*/
	
    height: 100%;
	
    object-fit: cover;

}



.container-content {
	display: flex;
	justify-content: center;
	align-items: end;
	text-align: center;
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 200px;
	background: linear-gradient(180deg, rgba(198, 183, 183, 0) 10%, rgba(223, 222, 222, 0) 33%, rgba(255, 255, 255, 0.37) 60%, rgb(255, 255, 255) 100%);
	transition: 800ms;
    padding-bottom: 15px;
}
.card-gallery:hover .container-content {
	opacity: 0;
	transition: 800ms;
}

.container-content h4 {
	font-size: 16px;
	font-weight: 700;
	color: #000;
	text-transform: capitalize;
}



/* card video */

@media screen and (max-width:768px) {
    #tab1Content{
        justify-content: center;
    }
	.card_container_video{
	padding: 0;
}
}

.content_gallery{
    width: 100%;
    margin: auto;
}

.card-video-gallery{
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0px auto 20px auto;
    width: 100%;ç
	max-width: 400px;
    height: 470px;
    /* padding: 20px; */
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    background: #000;
}


.card-video-gallery video{
    width: 100%;
    /* height: 284px; */
    height: 100%;
    object-fit: cover;
}

.card-video-gallery:hover .container-content{
    opacity: 0;
    transition: 800ms;
}

/* .card-video-gallery i{

    font-size: 60px;

    color: #a699ce;

    width: 50px;

    height: 60px;

    left: calc(50% - 25px);

    top: calc(50% - 60px);

} */

.container-content-overlay{

    position: absolute;

    top: -480px;

    left: 0;

    width: 100%;

    height: 100%;

    background: #000000a7;

    z-index: 3;

    padding: 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    transition: 800ms;

}



.card-video-gallery:hover .container-content-overlay,.card-gallery:hover .container-content-overlay{

    transform: translateY(480px);

    transition: 800ms;

}



.container-content-overlay h4{

    color: #fff;

    font-size: 25px;

    text-align: center;

    padding-bottom: 15px;

}



.container-content-overlay p{

    color: #fff;

    text-align: center;

    font-size: 17px;

    max-height: 255px;

    overflow: auto;

    padding-right: 5px;

}



.container-content-overlay p::-webkit-scrollbar{

    width: 3px;

}

.container-content-overlay p::-webkit-scrollbar-thumb{

    background: var(--color_primary-dark);

    width: 3px;

}



/* button */



.viewMedia{

    margin-top: 20px;

    padding: 10px 10px !important;

    border: 2px #fff solid;

    color: #fff;

    position: relative;

    overflow: hidden;

}



.viewMedia::after{

    content: "";

    height: 155px;

    left: -75px;

    opacity: 0.2;

    position: absolute;

    top: -50px;

    transform: rotate(35deg);

    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);

    width: 50px;

    z-index: -10;

    background: #a699ce;

    content: "";

    height: 155px;

    left: -85px;

    opacity: 0.2;

    position: absolute;

    top: -50px;

    transform: rotate(35deg);

    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);

    width: 50px;

    z-index: -10;

}



.viewMedia:hover::after{

    left: 140%;

    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);

}


/*CUSTOM 3/22/23 */
.container-content-overlay i {
	position: absolute;
	top: 20px;
	right: 20px;
	color: #fff;
}