0/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes Loadvor3exSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

body {
	overflow-x: hidden!important;
}
#posts-container {
	position: relative;
}
.custom-post-item {
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 20px;
}

.post-item {
	position: relative;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.post-item.fade-in {
	animation: fadeInUp 0.5s ease forwards;
}
.post-item img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.portfolio-title {
	color: var(--e-global-color-24b35fb);
    font-family: "Pluto Sans", Sans-serif!important;
    font-size: 16px!important;
    font-weight: 700!important;
    text-transform: uppercase;
    line-height: 20px;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.8);
	position: absolute;
	left: 0;
	bottom:0;
	padding: 20px 20px;
	width: 100%;
	text-align: center;
	margin: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.8) 100%);

}
.front-box {
	position: relative;
	z-index: 2;
	height: 100%;
	width: 100%;
	padding-top: 100%; /* This makes the height = width */
	position: relative;
	overflow: hidden;
}

.front-box img { 
position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.back-box {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;	
	-webkit-backface-visibility: hidden; /* Safari */
	backface-visibility: hidden;
	opacity: 0;
	background: #fff;
}
.imageContainer {	
	width: 100%;
	height: 100%;
	overflow: hidden;
    position: relative;
}
.back-box .imageContainer img {
	width: 100%;
	height: 100%;
    transition: opacity 1s ease-in-out; 
}

.post-item:hover .back-box {
  z-index: 2;
  opacity: 1;
}

.portfolio-slideshow .slick-track {
	width: 100%!important;
}

#load-more-container,
#load-more-button {
	overflow: hidden;
	position: relative;
	text-align: center;
	height: 100px;
}


#load-more {
    display: inline-block;
    margin: 20px auto 0;
    padding: 10px 20px;
    background: url('/wp-content/uploads/2024/07/vortex-spiral.svg') no-repeat;
    color: #fff;
    cursor: pointer;
	border: 0;
	text-indent: -99999px;
	transform: rotate(var(--e-preloader-rotate, 0deg));
    /*animation-name: var(--e-preloader-animation);*/
    animation-name: Loadvor3exSpin;
    animation-duration: var(--e-preloader-animation-duration, 1000ms);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.custom-post-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns */
    gap: 0px; /* Spacing between grid items */
}

.grid-archive .elementor-background-video-container video{
	width: 100%!important;
	height: 100%!important;
}
.custom-post-item {
    background-color: #f9f9f9;
    padding: 15px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* transition: all 0.3s ease; */
}

.custom-post-item:hover {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

#custom-taxonomy-filter {
	display: flex;
	column-gap: 20px;
	align-items: center;
}
.dropdown-container {
    position: relative;
    display: inline-block;
}

.dropdown-button {
    color: #4C4E5699;
    padding: 7px 20px 5px;
    border: none;
    cursor: pointer;
    border-radius: 12px;
	border: none;/*1px solid #4C4E56;*/
	background: none;
	outline: none;
	font-size: 14px;
    font-family: "Pluto Sans", Sans-serif;
	font-weight: 400;
	width: 175px;
	text-align: left;
	position: relative;
}
.dropdown-button::after {
	content: "";
	position: absolute;
	width: 9px;
	height: 6px;
	background: url('images/arrow.png') no-repeat;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);	
	background-size: cover;
    background-position: center;
}

.dropdown-button:hover,
.dropdown-button:focus {
	background: none;
    color: #4C4E5699;
}
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    background-color: white;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    z-index: 4;
	white-space: nowrap;
	
}

.dropdown-menu span.pf-checkbox-item {
    color: #4C4E5699;
	padding: 10px 20px 10px;
    text-decoration: none;
    display: flex;
	align-items: center;
	column-gap: 5px;
	font-size: 14px;
    font-family: "Pluto Sans", Sans-serif;
	font-weight: 400;
}

.dropdown-menu span.pf-checkbox-item:last-child {
	padding-bottom: 20px;
}
/* .dropdown-menu span label { */
	/* font-size: 13px; */
    /* font-family: "Pluto Sans", Sans-serif; */
	/* font-weight: 400; */
	/* line-height: 1.25; */
/* } */
.pf-checkbox-item label {
  display: flex;
  align-items: center;
  column-gap: 5px;
  font-size: 14px;
  font-family: "Pluto Sans", Sans-serif;
  font-weight: 400;
  color: #4C4E5699;
  cursor: pointer;
}

.pf-checkbox-item input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  border: 1px solid #4C4E56;
  appearance: auto; /* fallback if browser strips styling */
}

.pf-checkbox-item span {
  font-size: 13px;
  line-height: 1.25;
}
.dropdown-menu a:hover {
    background-color: #f1f1f1;
}

.dropdown-container.show .dropdown-menu {
    display: flex;
	flex-direction: column;
}

.menu-items {
	display: grid;
	grid-template-columns: repeat(3, auto); /* Create 3 columns */
    gap: 0px; 
	align-items: start;
	padding-top: 10px;
}

.menu-items.menu-items-2 {
	grid-template-columns: repeat(2, auto); /* Create 2 columns */
}


.menu-items .pf-checkbox-item span {
	padding-top:0!important;
}
/* Default dropdown alignment */
.dropdown-menu {
    left: 0;
}

/* Align right if there's more space on the right */
.dropdown-menu.align-right {
    right: 0;
    left: auto;
}

.ctf-action {
}
.ctf-action a {
	color: var(--e-global-color-primary);
	text-decoration: none;
	font-family: "Pluto Sans", Sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
	border-radius: 12px;
	border: 1px solid #fff;
	padding: 7px 15px 6px;
	background: #fff;
}

.ctf-action a i {
	font-weight: 400;
}
.ctf-action a:hover,
.ctf-action a:focus {
	background: var(--e-global-color-secondary);
	border: 1px solid var(--e-global-color-secondary);
	color: #fff;
}

.portfolio-video {
	position: absolute;
    width: 100%;
    height: 100%;
	left:0;
	top: 0;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}
.cp-navigation-wrapper {
	width: 100%;
	border-top:2px solid #d5d8dc;
	border-bottom:2px solid #d5d8dc;
	display: flex;
	justify-content: center;
    padding-left: 30px;
    padding-right: 30px;
}
.cp-navigation {
	max-width: 1600px;
	display: flex;
	overflow: hidden;
	width: 100%;
}
.cp-nav-separator-wrapper {
	text-align: center;
}
.cp-nav-separator {
	background-color: #d5d8dc;
	height: 100%;
	margin: 0 auto;
	width: 1px;
}

.cp-nav-link {
	width: calc(50% - 1px / 2);
	padding: 20px 0px;
	display: flex;
}
.cp-nav-next.cp-nav-link {
	justify-content: end;
}
.cp-nav-link a svg{
	width: 2.177em;
    height: 2em;
	fill: var(--e-global-color-primary);
	display: block;
}
.cp-nav-link a {
	display: flex;
	align-items: center;
	column-gap: 20px;
	text-transform: uppercase;
	text-decoration: none;
}
.cp-nav-link a span {
	color: var(--e-global-color-secondary);
	font-family: "Pluto Sans", Sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 20px;
	overflow: hidden;
    padding-right: 20px;
    text-overflow: ellipsis;
}
.cp-nav-next.cp-nav-link a span {
	padding-left: 20px;
	padding-right: 0px;
}

.cp-nav-link a:hover span {
	color: var(--e-global-color-primary);
}
.cp-nav-next a svg {
	transform: rotate(180deg);
}
.cp-nav-next a {
	flex-direction: row-reverse;
	text-align: right;
}
.cp-navigation .img-wrap {
	aspect-ratio: 1 / 1;     /* Makes it a square */
	width: 100%;             /* Responsive width */
	max-width: 150px;        /* Optional: limit max width */
	overflow: hidden;        /* Hide overflow if needed */
	position: relative;
}
.cp-navigation img {
	width: 100%;
	height: 100%;
	object-fit: cover;       /* Cover or contain as needed */
	display: block;
}
.nav-content {
	display: flex;
    align-items: center;
    column-gap: 20px;
}

.cp-nav-next .nav-content {
	flex-direction: row-reverse;
}

.go-back-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 20px;
	margin-bottom: 40px;
}

.go-back-btn a {
	background: var(--e-global-color-primary);
	color: #fff;
	padding: 7px 20px;
	border-radius: 12px;
	font-weight: 500;
    font-size: 16px;
}


.go-back-btn a:hover,
.go-back-btn a:focus {
	background: var(--e-global-color-secondary);
}
.ctf-action #clear-filters {
	margin-left: 15px;
}

@media (max-width: 1600px) {
    .custom-post-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns on medium screens */
    }
}


@media (max-width: 1023px) {
    .cp-navigation-wrapper {
		border-bottom-width: 1px;
		border-top-width: 1px;
		padding-left: 15px;
		padding-right: 15px;
	}
	.nav-content {
		column-gap: 15px;
	}
	.custom-post-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on smaller screens */
    }
	.cp-navigation .img-wrap {
		max-width: 100px;
	}
	.cp-nav-link a {
		column-gap: 15px;
	}
	#custom-taxonomy-filter {
		column-gap: 10px;
	}	
		
	.ctf-action a {
		font-size: 13px;
		margin-left: 10px;
	}
	.ctf-action #clear-filters {
		margin-left: 10px;
	}
	.dropdown-button {
		font-size: 13px;
		width: 150px;
		padding-left: 10px;
	}
	.dropdown-menu span.pf-checkbox-item {
		padding: 10px;
	}
}

@media (max-width: 767px) {

	.dropdown-container {
		width: 100%;
	}
	.dropdown-button {
		border-radius: 0;
		padding-top: 10px;
		padding-bottom: 8px;
	}
	.dark-mode .dropdown-button {
		color: #fff;
		border-bottom: 1px solid #fff;
	}
    .menu-items {
		grid-template-columns: repeat(1, auto); /* Create 3 columns */
    }
	
	.menu-items.menu-items-2 { 
		grid-template-columns: repeat(1, auto); /* Create 3 columns */
	}
	.dropdown-menu {
		width: 100%;
		position: relative;
		box-shadow: none;
		padding-left: 15px;
		border-bottom: 1px solid #fff;
	}	
	.pf-checkbox-item input[type="checkbox"] {
		border-color: #fff!important;
	}
	
	
	/* Hide the native checkbox */
	.pf-checkbox {
		display: none;
	}

	/* Style the custom checkbox via the label */
	.pf-checkbox-wrapper {
		position: relative;
		padding-left: 25px;
		cursor: pointer;
		color: white;
		font-family: sans-serif;
		display: inline-block;
	}

	/* Create square using ::before */
	.pf-checkbox-wrapper::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		width: 15px;
		height: 15px;
		border: 2px solid white;
		background-color: transparent;
		border-radius: 0px;
		box-sizing: border-box;
		transform: translateY(-50%);
	}

	/* Add tick when checked */
	.pf-checkbox-wrapper input.pf-checkbox:checked + span::after {
		content: '';
        position: absolute;
        left: 6px;
        top: 45%;
        width: 5px;
        height: 7px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: translateY(-50%) rotate(45deg);
	}
	
	.dark-mode .dropdown-menu {
		background: none;
	}
	
	.dropdown-button::after {
		right: 20px;
	}
	.dark-mode .dropdown-button::after {
		background: url(images/arrow-white.png) no-repeat;
	}
	.dark-mode .pf-checkbox-item label {
		color: #fff;
	}
	.cp-nav-link {
		width: 50%;
	}
	.cp-nav-link a {
		column-gap: 10px;
		width: 100%;
		align-items: baseline;
	}
    .cp-navigation-wrapper {
		padding-left: 10px;
		padding-right: 10px;
	}	
	.cp-navigation img {
        width: 100px;
        height: 100px;
    }
	.nav-content{
		flex-direction: column;
		row-gap: 10px;
		align-items: center;
		column-gap: 10px;
	}
	.nav-content span {
		display: inline-block;
		max-width: 100px; /* Adjust width as needed */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.cp-nav-next .nav-content {
		flex-direction: column;
		row-gap: 10px;
		align-items: center;
		padding-left: 25px;
	}
	.cp-nav-prev .nav-content {
		padding-right: 25px;
	}
	.cp-nav-prev.cp-nav-link a span,
	.cp-nav-next.cp-nav-link a span {
		padding-left: 10px;
		padding-right: 10px;
	}
	
	.dark-mode .menu-items .pf-checkbox-item span {
		color: #fff;
	}
	
	#custom-taxonomy-filter {
		align-items: start;
		row-gap: 0px !important;
	}	
	.ctf-action {
		display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 40px;
		padding-bottom: 50px;
	}
	.ctf-action a {
		text-decoration: none;
		text-transform: uppercase;
	}
}


@media (max-width: 600px) {
    .custom-post-grid {
        grid-template-columns: 1fr; /* 1 column on mobile */
    }
	
	.dark-mode .menu-items .pf-checkbox-item span {
		color: #fff;
	}
}

.no-posts-found-message,
.no-more-posts-message {
  text-align: center;
  padding: 20px;
  font-weight: bold;
  color: #888;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in {
  opacity: 1;
  transform: translateY(0);
}