/* 
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 */


/* ── Apply Oswald to the whole component ── */
.make-carousel-wrapper,
.make-card,
.make-card * {
	font-family: "Oswald", Sans-serif !important;
}

/* ── Wrapper — needs overflow visible for arrows, but hidden on the track ── */
.make-carousel-wrapper {
	position: relative;
	width: 100%;
	padding: 0 24px; /* breathing room for arrows */
}

/* ── Track ── */
.make-carousel {
	display: flex;
	gap: 20px;
	overflow: hidden;
	scroll-behavior: smooth;
	padding: 0.5rem 0;
	scroll-snap-type: x mandatory;
}

.make-card-wrap {
	flex: 0 0 calc((100% - 40px) / 3);
	max-width: calc((100% - 40px) / 3);
	scroll-snap-align: start;
}

/* ── Card style ── */
.make-card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	text-decoration: none !important;
	border-radius: 0;
	overflow: hidden;
	padding: 10px;
}

/* Override Elementor link/hover defaults */
a.make-card,
a.make-card:hover,
a.make-card:focus,
a.make-card:visited {
	text-decoration: none !important;
	color: inherit !important;
	outline: none !important;
}


/* ── Image container ── */
.make-card__image {
	width: 100%;
	height: 225px;
	overflow: hidden;
	background: #f3f3f3;
}

.make-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.make-card:hover .make-card__image img {
	transform: scale(1.03);
}

/* ── Title ── */
.make-card__name {
	display: block;
	padding: 10px;
	font-weight: 500;
	font-size: 30px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #000000;
}

/* ── Nav arrows ── */
.make-carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	border: none !important;
	outline: none !important;
	background: rgba(0, 0, 0, 0.65);
	color: #ffffff !important;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	line-height: 1;
	padding: 0;
	transition: background 0.2s ease, transform 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.make-carousel__nav:hover {
	background: rgba(0, 0, 0, 0.85) !important;
	transform: translateY(-50%) scale(1.1);
}

.make-carousel__nav:focus {
	outline: none !important;
	box-shadow: none !important;
}

/* Prevent Elementor from overriding button styles */
.elementor .make-carousel__nav,
.elementor .make-carousel__nav:hover,
.elementor .make-carousel__nav:focus {
	background-color: transparent;
	background: rgba(0, 0, 0, 0.65);
	border: none !important;
	box-shadow: none !important;
	color: #ffffff !important;
	padding: 0;
}

.elementor .make-carousel__nav:hover {
	background: rgba(0, 0, 0, 0.85) !important;
}

/* Arrow positioning */
.make-carousel__nav--prev {
	left: -4px;
}

.make-carousel__nav--next {
	right: -4px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
	.make-card-wrap {
		flex: 0 0 calc((100% - 20px) / 2);
		max-width: calc((100% - 20px) / 2);
	}
}

@media (max-width: 768px) {
	.make-carousel__nav {
		display: none !important;
	}

	.make-carousel-wrapper {
		padding: 0;
	}
}

@media (max-width: 640px) {
	.make-card-wrap {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
}


/* ── MODEL GRID — normal grid layout (no carousel) ── */
.make-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	width: 100%;
}

.make-grid .make-card-wrap {
	flex: 0 0 calc((100% - 40px) / 3);
	max-width: calc((100% - 40px) / 3);
}

@media (max-width: 1024px) {
	.make-grid .make-card-wrap {
		flex: 0 0 calc((100% - 20px) / 2);
		max-width: calc((100% - 20px) / 2);
	}
}

@media (max-width: 640px) {
	.make-grid .make-card-wrap {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
}