/**
 * Theme Name:     El Studio Blog
 * Author:         Danco Vision
 * Template:       hello-elementor
 * Text Domain:	   el-studio-blog
 * Description:    Site realizat de catre Danco Vision
 * Theme URI:      https://dancovision.ro
 * Author URI:     https://dancovision.ro
 * Version:        1.1
 */

.search-field-header input{
	border-bottom-color: #6f6f6f !important;
}

.search-field-header input:focus{
	border-bottom-color: #fff !important;
}

.img-card-loop::before{
	content: '';
    background: linear-gradient(175deg, rgb(28 28 28) 50%, rgb(0 0 0 / 0%) 52%);
    width: calc(100% + 1px);
    position: absolute;
    height: 50px;
    left: -1px;
	top: -1px;
	z-index: 3;
}

.btn-card-loop .elementor-button-wrapper::after {
    content: '';
    background: linear-gradient(-5deg, rgb(28 28 28) 50%, rgb(0 0 0 / 0%) 52%);
    width: calc(100% + 1px);
    position: absolute;
    height: 50px;
    left: -1px;
    bottom: -1px;
}

.elementor-post-info li::after {
    rotate: 25deg;
}

.elementor-loop-container .post:nth-child(3){
	margin-top: -35px;
}

.elementor-loop-container .post:nth-child(4){
	margin-top: -70px;
}

 .elementor-pagination{
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	margin: 75px 0;
}

 span.page-numbers{
    opacity: 0;
    cursor: default;
}

 a.page-numbers {
	background: #17191b;
    padding: 15px;
    color: #fff !important;
}

 a.page-numbers:hover{
	background: #23b6b6;
}

.elementor-nav-menu li {
    border-bottom: 1px solid #222 !important;
	transition: all 0.4s;
}

.elementor-nav-menu li:hover{
	margin-left: 10px;
	transition: all 0.4s;
}

.single-post-container .container-content-single::before {
    content: '';
    background: linear-gradient(175deg, rgb(28 28 28) 50%, rgb(0 0 0 / 0%) 51%);
    width: calc(100% + 1px);
    position: absolute;
    height: 120px;
    left: -1px;
    top: -1px;
}

.single-post-container .container-content-single::after{
	content: '';
    background: linear-gradient(-5deg, rgb(28 28 28) 50%, rgb(0 0 0 / 0%) 51%);
    width: calc(100% + 1px);
    position: absolute;
    height: 120px;
    left: -1px;
	bottom: -1px;
}

.search-archive-title::before{
	content: '';
    background: linear-gradient(175deg, rgb(28 28 28) 50%, rgb(0 0 0 / 0%) 51%);
    width: calc(100% + 1px);
    position: absolute;
    height: 120px;
    left: -1px;
    top: -1px;
}

.search-archive-title::after{
	content: '';
    background: linear-gradient(-5deg, rgb(28 28 28) 50%, rgb(0 0 0 / 0%) 51%);
    width: calc(100% + 1px);
    position: absolute;
    height: 120px;
    left: -1px;
	bottom: -1px;
}

.search-results .elementor-pagination{
	position: absolute;
    margin-top: 200px;
    z-index: 1;
	width: 100%;
	gap: 50px;
}

.post-nav a{
	width: fit-content;
	padding: 15px;
    background: #17191b;
	transition: all 0.4s;
	white-space: initial;
}

.post-nav a:hover{
    background: #23b6b6;
	transition: all 0.4s;
}

.post-nav .elementor-post-navigation {
    gap: 20px;
}

.post-title-loop a:hover{
	color: #23B6B6 !important;
}



.img-card-loop.elementor-widget-image {
    position: relative;
    overflow: hidden;
}

.img-card-loop.elementor-widget-image a {
    display: block;
    position: relative;
}

.img-card-loop.elementor-widget-image a::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 35px; /* Adjust icon width */
    height: 35px; /* Adjust icon height */
    background-image: url('/wp-content/uploads/2024/08/link-alt.svg');
    background-size: contain;
    background-repeat: no-repeat;
    transform: translate(-50%, -50%) scale(0.5); /* Center and scale down the icon */
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    z-index: 3;
}

.img-card-loop.elementor-widget-image a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 100%;
    background-color: #23b6b6;
    z-index: 2;
    transition: transform 0.3s ease-in-out;
    opacity: 0.5;
    transform: translateY(100%);
}

.img-card-loop.elementor-widget-image a:hover::before {
    opacity: 1; /* Show the SVG icon */
    transform: translate(-50%, -50%) scale(1); /* Scale the icon to full size */
}

.img-card-loop.elementor-widget-image a:hover::after {
    transform: translateY(0); /* Slide the overlay up */
}

.img-card-loop.elementor-widget-image img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.single .elementor-post-navigation__next{
	display: flex;
	justify-content: end;
}

.e-loop-item:not(.elementor-widget-theme-post-featured-image) .card-content {
    padding-top: 50px;
}

.e-loop-item:not(.elementor-widget-theme-post-featured-image) .e-con-inner::before{
	content: '';
    background: linear-gradient(175deg, rgb(28 28 28) 50%, rgb(0 0 0 / 0%) 52%);
    width: calc(100% + 1px);
    position: absolute;
    height: 50px;
    left: -1px;
    top: -1px;
    z-index: 3;
}




@media only screen and (max-width: 1360px){
	 .elementor-pagination{
	margin: 45px 0;
	}
}

@media only screen and (max-width: 1200px){
	.single-post .container-content-single{
		max-width: 940px;
		margin: 0 auto;
	}
}

@media only screen and (max-width: 1100px) and (min-width: 1024px){
	.elementor-loop-container .post:nth-child(3){
		margin-top: -30px;
	}

	.elementor-loop-container .post:nth-child(4){
		margin-top: -60px;
	}
	
}

@media only screen and (max-width: 1024px){
	.search-results .elementor-pagination{
		margin-top: 130px;
	}
}

@media only screen and (max-width: 1024px) and (min-width: 768px){
	.elementor-loop-container .post:nth-child(3){
		margin-top: -10%;
	}
	
	.single-post .container-content-single{
		max-width: 720px;
		margin: 0 auto;
	}
}

@media only screen and (max-width: 768px){
	.header-menu-icon{
		position: absolute !important;
	}
	
	 .elementor-loop-container .post:nth-child(3){
		margin-top: 0px;
	}

	 .elementor-loop-container .post:nth-child(4){
		margin-top: 0px;
	}
	
	.elementor-loop-container .post:nth-child(4){
		margin-top: 0px;
	}
	
	 .elementor-loop-container .post{
		max-width: 370px;
		margin: 0 auto;
	}
}

@media only screen and (max-width: 460px){
	.single-post-container{
		padding: 0px !important;
	}
	
	.container-content-single {
    	padding: 150px 15px 100px !important;
	}
}