/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body Styles */
body {
    font-family: "Inter", sans-serif;
    background-color: white;
    padding-top: 80px; /* Add padding equal to the navbar height to avoid overlap */
}

/* Header Styles */
.header {
    position: fixed; /* Makes the header fixed on the page */
    top: 0; /* Ensures it stays at the top */
    left: 0; /* Aligns it to the left edge */
    right: 0; /* Aligns it to the right edge */
    z-index: 1000; /* Ensures it stays on top of other elements */
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(205, 253, 255, 0.40); /* Semi-transparent background for readability */
    padding: 10px 20px;
    border-radius: 15px; /* Rounds the entire navbar */
    margin: 0 auto; /* Center the header */
	margin-top: 10px;
    max-width: 1200px; /* Set a maximum width for the header */
}

/* Left Section: Logo + Navigation */
.left-section {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: black; /* Solid black background */
    border-radius: 10px; /* Rounds the section */
    padding: 5px 5px; /* Adds padding inside the section */
    padding-left: 10px; /* Adds extra padding on the left */
    height: 42px; /* Explicit height (adjust based on your layout) */
}

.logo {
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
    letter-spacing: 2px;
}

/* Navigation Buttons */
.nav {
    display: flex;
    gap: 5px;
}

.nav-button {
    background-color: white;
    color: black;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.nav-button:hover {
    background-color: black;
    color: white;
}

/* Right Section: Action Buttons */
.right-section {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Right Section: Action Buttons */
.icon-button {
    background-color: transparent !important; /* Remove the black background */
    border: none; /* Remove the border */
    padding: 0; /* Remove padding for better alignment */
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42px; /* Sets a fixed size for the button */
    height: 42px; /* Ensures the button remains circular */
    overflow: hidden; /* Ensures the image doesn't overflow */
}

.icon-button img {
    width: 100%; /* Ensures the image fills the button */
    height: 100%; /* Ensures proper alignment */
}

.icon-button img.icon-contact {
    width: 80%; /* Ensures the image fills the button */
    height: 80%; /* Ensures proper alignment */
}

/* Big Button: Связаться */
.big-button {
    background-color: black; /* Black button */
    color: white; /* White text */
    border: none;
    padding: 0 20px; /* Remove top/bottom padding to match height */
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    height: 42px; /* Same height as the left-section */
    display: flex;
    justify-content: center;
    align-items: center; /* Centers the text vertically */
    border: 4px solid black; /* Thick black border */
}

.big-button:hover {
    background-color: white;
    color: black;
}

/* NavBar on smartphones */
@media (max-width: 768px) {
    .left-section .nav {
        display: none; /* Hide nav buttons on small screens */
    }
    
    header .icon-button {
        display: none; /* Hide icon buttons on small screens */
    }

    .header {
        padding: 10px; /* Reduce padding for smaller screens */
        max-width: 100%; /* Ensure the header takes full width on small screens */
    }

    .left-section, .right-section {
        flex: none; /* Ensure left and right sections do not take up equal space */
    }

    .left-section {
        justify-content: flex-start; /* Align left section to the start */
        margin-right: 0; /* Remove auto margin */
    }

    .right-section {
        justify-content: flex-end; /* Align right section to the end */
        margin-left: 0; /* Remove auto margin */
    }

    .left-section, .right-section {
        gap: 5px; /* Reduce gap between elements */
    }
}

/* Landing Grid Layout */
.landing-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 10px;
	padding: 20px;
}

.image {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
}

.image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Row Styles */
.image.small {
	grid-column: span 1;
}

.image.large {
	grid-column: span 2;
}

.image.biggest {
	grid-column: span 3;
}

/* Text Overlay for Large Images */
.overlay {
	font-size: 20px;
}

.overlay,
.text-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: white;
}

.overlay button {
	font-size: 20px;
	background-color: transparent;
	color: white;
	border: 1px solid white;
	padding: 10px 20px;
	border-radius: 5px;
	cursor: pointer;
	margin-top: 20px;
	/* Add margin to create space between text and button */
}

.overlay button:hover {
	background-color: white;
	color: black;
}

.text-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: white;
	padding: 0 20px;
	/* Add padding to provide more space on the left and right */
	width: 90%;
	/* Adjust width to ensure text has more space */
	z-index: 10;
	/* Ensure the overlay is above the background image */
}

.text-overlay ul {
	list-style: none;
	margin-top: 10px;
	padding: 0;
	text-align: left;
	color: white;
}

.text-overlay h1 {
	font-size: 50px;
	margin-bottom: 10px;
}

.text-overlay .row {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	flex-wrap: nowrap;
	/* Prevent text from wrapping to the next line */
	z-index: 11;
	/* Ensure the row is above the background image */
}

.text-overlay .big-word {
	color: black;
	font-weight: normal;
	font-size: 50px;
	margin: 0 10px;
	white-space: nowrap;
	/* Prevent text from wrapping to the next line */
	z-index: 12;
	/* Ensure the big word is above the background image */
}

.text-overlay .small-text {
	color: black;
	font-size: 20px;
	text-align: left;
	white-space: nowrap;
	/* Prevent text from wrapping to the next line */
	z-index: 12;
	/* Ensure the small text is above the background image */
}

.text-overlay .small-text p {
	margin: 0;
	z-index: 12;
	/* Ensure the small text paragraphs are above the background image */
}

.text-overlay .map-icon {
	width: 27px;
	height: 35px;
	margin-left: 10px;
	z-index: 12;
	/* Ensure the icons are above the background image */
}

.text-overlay .box-icon {
	width: 30px;
	height: 30px;
	margin-right: 5px;
	z-index: 12;
	/* Ensure the icons are above the background image */
}

.overlay-second-row-small {
	position: absolute;
	bottom: 30px;
	left: 30px;
	right: 30px;
	color: white;
	text-align: left;
}

.overlay-second-row-small .small-text {
	font-size: 22px;
	margin-bottom: 5px;
	right: 10px;
}

.overlay-second-row-small .large-text {
	font-size: 33px;
	font-weight: bold;
}

/* Landing grid on smartphones */
@media (max-width: 768px) {
    .landing-grid {
        display: none; /* Hide nav buttons on small screens */
    }
}

/* Info Section */
.info-section-mobile {
	font-family: "Manrope", sans-serif;
	/* Add white space before the section */
	display: none;
	justify-content: center;
}

.info-section {
	font-family: "Manrope", sans-serif;
	padding: 50px 0;
	/* Add white space before the section */
	display: flex;
	justify-content: center;
}

.info-card {
	display: flex;
	color: #517189;
	width: 97%;
	background-color: #F6F6F6;
	border-radius: 15px;
	padding: 5px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
	gap: 40px;
	/* Increase space between columns */
}

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    opacity: 0; /* Start hidden for animation */
    transform: translateY(20px); /* Start slightly below for animation */
    animation: fadeInUp 1s forwards; /* Animation */
    animation-delay: 0.5s; /* Delay to start animation */
}

.left-column {
	flex: 1;
	padding: 20px;
}

.right-column {
	flex: 2;
	padding: 20px;
}

.left-column h1 {
	font-weight: normal;
	color: black;
	font-size: 50px;
	margin-bottom: 20px;
}

.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.tab {
	background-color: white;
	border-radius: 10px;
	padding: 10px 20px;
	box-shadow: 0 2px 4px #5171891f;
	cursor: pointer;
	text-align: center;
	white-space: nowrap;
}

.right-column h2 {
	font-size: 28px;
	margin-bottom: 20px;
}

.right-column p {
	font-size: 20px;
	margin-bottom: 40px;
}

.cta-button {
	display: inline-flex;
	align-items: center;
	background-color: black;
	color: white;
	border: none;
	padding: 10px 20px;
	border-radius: 5px;
	cursor: pointer;
	font-size: 20px;
}

.cta-button {
	background-color: #F6F6F6;
	color: #517189;
	border: 2px solid #517189;
}

.cta-button .icon {
	margin-left: 10px;
	font-size: 20px;
}

.cta-button:hover {
	background-color: #517189;
	color: #F6F6F6;
	border: 2px solid #517189;
}

/* Animation */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Info Section on smartphones */
@media (max-width: 768px) {
	.info-section {
		display: none; /* Hide nav buttons on small screens */
	}
	.info-card h1 {
		font-weight: normal;
		color: black;
		font-size: 32px;
		margin-bottom: 10px;
	}
	.info-section-mobile {
		display: flex; /* Hide nav buttons on small screens */
	}
	.info-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #517189;
		width: 95%;
		background-color: #F6F6F6;
		border-radius: 15px;
		padding: 15px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
		margin-bottom: 10px;
	}
	.info-text {
		font-size: 16px;
		margin-top: 10px;
		text-wrap: balance;
		text-align: center;
		margin-bottom: 20px;
	}
	.info-card .cta-button {
		display: none;
	}
}

/* Contact Section */
.contact-section {
	padding: 50px 0;
	/* Add white space before the section */
	display: flex;
	justify-content: center;
}

.contact-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 97%;
	background-color: #1A3549;
	border-radius: 15px;
	padding: 40px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	color: white;
	text-align: center;
}

.contact-card h1 {
	font-weight: normal;
	font-size: 40px;
	margin-bottom: 20px;
}

/* Contact Form */
.contact-form {
    display: flex;
    flex-direction: column; /* Change to column layout */
    width: 100%;
    max-width: 600px;
    margin-bottom: 20px;
    gap: 10px; /* Add space between the input and button */
}

.contact-form input[type="text"] {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
}

.contact-form .cta-button {
    display: inline-block; /* Make the button size fit the text */
    color: #1A3549;
    border-radius: 5px;
    font-size: 18px;
    border: none;
    /* Remove borders from the button */
    border: 2px solid white;
    padding: 10px 20px; /* Add padding for better button size */
    text-align: center; /* Center the text inside the button */
    cursor: pointer; /* Add pointer cursor on hover */
}

.contact-form .cta-button:hover {
    color: white;
    background-color: #1A3549;
    border-radius: 5px;
    font-size: 18px;
}

.consent {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.consent input[type="checkbox"] {
	margin-right: 10px;
}

.contact-card h2 {
	font-size: 20px;
	margin-bottom: 20px;
}

.contact-icons {
	display: flex;
	gap: 20px;
}

.icon-circle {
	width: 50px;
	height: 50px;
	background-color: rgb(76, 92, 107);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.icon-circle:hover {
	background-color: white;
	color: #1A3549
}

/* Video Carousel Section */
.video-carousel {
	padding: 50px 0;
	/* Add white space before the section */
	display: flex;
	justify-content: center;
}

.carousel-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Align items to the start (left) */
	width: 97%;
	background-color: #1A3549;
	border-radius: 15px;
	padding: 40px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	color: white;
	text-align: left;
	/* Align text to the left */
	position: relative;
	/* Ensure positioning context for the title */
}

.carousel-card h1 {
	font-size: 28px;
	margin-bottom: 20px;
	position: absolute;
	/* Position the title absolutely */
	top: 20px;
	/* Adjust top position */
	left: 20px;
	/* Adjust left position */
	z-index: 2;
	/* Ensure the title is above the videos */
}

.carousel-container-video {
	padding-top: 60px;
	/* Add space between the title and the videos */
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	overflow: hidden;
	position: relative;
}

.carousel {
	display: flex;
	transition: transform 1s ease-in-out;
	position: relative;
}

.video {
	width: 400px;
	/* Set a fixed width for the videos */
	height: 700px;
	/* Set a fixed height for the videos */
	margin: 0 10px;
	/* Reduce space between videos */
	opacity: 0.5;
	cursor: pointer;
	transition: opacity 1s ease-in-out, transform 1s ease-in-out;
	/* Synchronize transitions */
	position: relative;
	/* Change to relative */
	z-index: 1;
	/* Ensure the videos are below the title */
}

.video.active {
	width: 400px;
	/* Set a larger width for the active video */
	height: 700px;
	/* Set a larger height for the active video */
	opacity: 1;
	z-index: 2;
}

.video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Ensure the video covers the entire area */
	border-radius: 10px;
}

/* Video Section on smartphones */
@media (max-width: 768px) {
	.video-carousel {
		display: none; /* Hide video carousel on small screens */
	}
}

/* Review Carousel Section */
.review-section {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
	position: relative;
	/* So we can absolutely position arrows if we like */
}

.review-section h2 {
	font-family: "Manrope", sans;
	font-weight: normal;
	font-size: 36px;
	margin-bottom: 40px;
	margin-top: 40px;
}

.carousel-arrows {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	margin-bottom: -10px;
	/* space before the stacked cards */
}

.carousel-button-left {
	border: 1px solid black;
	padding: 10px 20px;
	border-radius: 5px;
	outline: none;
	background: white;
	color: black;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	font-size: 1.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.3s;
}

.carousel-button-left:hover {
	opacity: 1;
}

.carousel-button-right {
	border: none;
	outline: none;
	background: black;
	color: white;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	font-size: 1.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.3s;
}

.carousel-button-right:hover {
	opacity: 1;
}

.carousel-container {
	position: relative;
	width: 100%;
	height: 450px;
	/* Adjust to fit your card design */
	min-height: 300px;
	overflow: hidden;
}

.carousel-slide {
	position: absolute;
	top: 50%;
	left: 50%;
	/* By default, center each card on screen */
	transform: translate(-50%, -50%);
	transition: transform 0.6s ease, z-index 0.6s;
	width: 600px;
	/* Adjust to match your design (or use % if you prefer) */
	max-width: 90%;
	/* Don’t exceed the container width on small screens */
	height: 250px;
	max-height: 90%;
	border-radius: 15px;
	background-color: #fff;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	padding: 30px;
	z-index: 0;
	/* We'll dynamically set z-index to bring the center card above others */
	overflow: hidden;
}

/* Example styling for the text/author area inside each card */
.review-text p {
	font-family: "Manrope", sans-serif;
	font-weight: normal;
	text-align: left;

	font-size: 18px;
	line-height: 1.4;
	margin-bottom: 20px;
}

.review-author {
	font-family: "Manrope", sans;
	font-weight: normal;
	/* Pin the author info to bottom-left of the card */
	position: absolute;
	bottom: 20px;
	left: 20px;
	padding-top: 10px;

	/* (Optional) tweak spacing as desired. */
	display: flex;
	align-items: center;
	gap: 15px;
}

.author-photo {
	width: 50px;
	height: 50px;
	object-fit: cover;
	border-radius: 50%;
}

.author-info {
	display: flex;
	flex-direction: column;
	text-align: left;
}

.author-name {
	font-weight: bold;
	font-size: 16px;
	color: #333;
}

.author-city {
	font-size: 14px;
	color: #666;
}

.corner-vector {
	position: absolute;
	bottom: 20px;
	/* adjust to your design */
	right: 20px;
	/* adjust to your design */
	z-index: 1;
	/* may adjust if you want it in front/behind other elements */
}

.corner-vector img,
.corner-vector svg {
	width: 60px;
	/* or any size you prefer */
	height: auto;
	opacity: 0.8;
	/* if you want a semi-transparent effect */
}

/* Media Query for Small Screens */
@media (max-width: 768px) {
    .carousel-slide {
        width: 90%;
        height: auto;
        padding: 20px;
    }

    .review-author {
        position: static;
        margin-top: 20px;
    }

    .review-text {
        margin-bottom: 10px;
    }
}

/* Machines Cards Section */
.machines-section {
	max-width: 1200px;
	margin: 0 auto;
}

.machines-section h2 {
	text-align: center;
	font-size: 36px;
	margin-bottom: 40px;
}

/* 4 columns for desktop, gap between */
.cards-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

@media (max-width: 768px) {
    .cards-grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
        overflow-y: auto;
        padding: 10px;
    }
}

/* Base card styles */
.machine-card {
	border-radius: 15px;
	overflow: hidden;
	/* clip corners if content extends */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* 
       If your design: 
       top part is color, bottom is white => you'd do it differently. 
       But from your screenshot, it seems 
       the entire background is tinted, 
       with text at the bottom in black => 
       We'll just use the tinted background for the top 
       and a white bottom, or vice versa.
    */
}

/* Top area: background color fill, 
     holds the circle + oval labels, plus the image. 
  */
.top-content {
	position: relative;
	padding: 20px;
	border-radius: 15px 15px 0 0;
	height: 400px;
	/* We'll rely on card class color for backgrounds: e.g. .card-brown, etc. */
}

/* Row for circle number + oval label */
.labels-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}

/* Circle number (01, 02, 03...) */
.circle-number-light {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 14px;
	border: 2px solid currentColor;
	color: #FFFFFF;
	/* pick color to match card or a universal color */
	font-weight: 600;
}

.circle-number-dark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 14px;
	border: 2px solid currentColor;
	color: #5E3A02;
	/* pick color to match card or a universal color */
	font-weight: 600;
}

/* Oval label (e.g. выпечка) */
.oval-label-light {
	display: inline-block;
	background-color: #fff;
	color: #A48D69;
	border-radius: 30px;
	padding: 5px 15px;
	font-size: 14px;
	font-weight: 500;
}

.oval-label-brown {
	display: inline-block;
	background-color: #fff;
	color: #5E3A02;
	border-radius: 30px;
	padding: 5px 15px;
	font-size: 14px;
	font-weight: 500;
}

.oval-label-red {
	display: inline-block;
	background-color: #fff;
	color: #80111A;
	border-radius: 30px;
	padding: 5px 15px;
	font-size: 14px;
	font-weight: 500;
}

.oval-label-blue {
	display: inline-block;
	background-color: #fff;
	color: #1A3549;
	border-radius: 30px;
	padding: 5px 15px;
	font-size: 14px;
	font-weight: 500;
}


/* The machine image */
/* Wrap the image in a container to isolate effects */
.machine-image-container {
	position: relative;
	overflow: hidden;
	/* Prevent image from overflowing during scaling */
	border-radius: 10px;
	/* Match your design's corner style */
}

/* Style the image itself */
.machine-image {
	width: 100%;
	height: 300px;
	object-fit: contain;
	display: block;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	/* Smooth effect */
	cursor: pointer;
	/* Indicate it's clickable */
}

/* On hover: scale up slightly */
.machine-image-container:hover .machine-image {
	transform: scale(1.1);
	/* Slightly larger (adjust as needed) */
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
	/* Optional: Add a shadow */
}

/* Bottom area: White background for text (like your screenshot) */
.bottom-content {
	background-color: #fff;
	padding: 20px;
	border-radius: 0 0 15px 15px;
}

/* Title + subtitle (in black/gray) */
.machine-title {
	font-size: 18px;
	font-weight: 600;
	color: #000;
	margin-bottom: 5px;
}

.machine-subtitle {
	font-size: 14px;
	line-height: 1.4;
	color: #555;
}

/* ============ 4 Distinct Background Colors for the Top Part ============ */
.card-brown .top-content {
	background-color: #E8DDCC;
	/* e.g. beige/brown from your screenshot */
}

.card-navy .top-content {
	background-color: #1A3549;
	/* deep navy */
}

.card-red .top-content {
	background-color: #80111A;
}

.card-beige .top-content {
	background-color: #A48D69;
}


/* Modal Styles */
.modal {
	display: none;
	/* Hidden by default */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	/* Semi-transparent background */
	justify-content: center;
	align-items: center;
	z-index: 1000;
	/* Ensure it stays on top */
}

.modal.active {
	display: flex;
	/* Display modal when active */
}

/* Modal Content Container */
.modal-content {
	display: flex;
	flex-direction: row;
	/* Align left and right sections horizontally */
	width: 100%;
	max-width: 1200px;
	/* Limit the modal's maximum width */
	background-color: #fff;
	border-radius: 15px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	overflow: hidden;
	position: relative;
}

/* Close Button */
.close-button {
	position: absolute;
	top: 10px;
	right: 10px;
	background: none;
	border: none;
	font-size: 20px;
	color: #555;
	cursor: pointer;
	z-index: 10;
	margin-top: 10px;
	margin-right: 20px;
}

.close-button:hover {
	color: #000;
}

/* Modal Body */
.modal-body {
	display: flex;
	flex-direction: row;
	/* Horizontal layout */
	gap: 20px;
	width: 100%;
	padding: 20px;
}

/* Left Side: Machine Card */
.modal-machine-card {
	width: 50%;
	/* Left side takes 50% of the modal width */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	border-radius: 10px;
	background-color: #f9f9f9;
	/* Optional: Background for the card area */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

/* Image Container in Modal */
.modal-machine-card .machine-image-container {
	width: 100%;
	height: 300px;
	/* Adjust to match the design */
	overflow: hidden;
	border-radius: 10px 10px 0 0;
	/* Rounded corners for the top part */
}

.modal-machine-card .machine-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Ensures the image covers the container proportionally */
}

/* Card Text (Title and Subtitle) */
.modal-machine-card .bottom-content {
	padding: 20px;
	text-align: center;
}

.modal-machine-card .machine-title {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
	color: #333;
}

.modal-machine-card .machine-subtitle {
	font-size: 14px;
	color: #777;
}

/* Right Side: Modal Details */
.modal-details {
	font-family: "Manrope", sans;
	width: 70%;
	/* Right side takes 50% of the modal width */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.modal-details .modal-header h1 {
	color: rgb(146, 146, 146);
	font-size: 15px;
	font-weight: normal;
	margin-bottom: 10px;
}

.modal-details .modal-header h2 {
	font-size: 26px;
	margin-bottom: 20px;
	color: black;
	font-weight: normal;
}

.modal-details .modal-header h3 {
	font-size: 20px;
	margin-bottom: 10px;
	color: black;
	font-weight: normal;
}

.modal-details .modal-description {
	margin-bottom: 20px;
}

.modal-specs .specs-row {
	display: flex;
	justify-content: space-between;
	/* Evenly distribute space */
	gap: 20px;
	/* Add space between spec blocks */
	margin-bottom: 30px;
	/* Add space below the specs section */
}

/* Individual Spec Block */
.modal-specs .spec {
	text-align: center;
	/* Center-align text within each spec block */
	flex: 1;
	/* Equal width for all spec blocks */
}

/* Spec Value (Numbers) */
.modal-specs .spec-value {
	font-family: "Manrope", sans;
	font-size: 22px;
	font-weight: bold;
	color: #333;
	margin-bottom: 5px;
	/* Space between value and name */
}

/* Spec Name (Labels) */
.modal-specs .spec-name {
	font-family: "Manrope", sans;
	font-size: 14px;
	font-weight: normal;
	color: #777;
}

.modal-features .features-row {
	display: flex;
	flex-wrap: wrap;
	/* Allow wrapping to next row if content overflows */
	gap: 10px;
	/* Space between feature tabs */
	margin-bottom: 20px;
	/* Space below the features section */
}

/* Individual Feature Tab */
.modal-features .feature-tab {
	background-color: rgb(246, 246, 246);
	/* Background for the feature tab */
	border-radius: 10px;
	/* Rounded corners */
	padding: 10px 20px;
	/* Padding inside the tab */
	box-shadow: 0 2px 4px rgba(81, 113, 137, 0.12);
	/* Subtle shadow */
	cursor: pointer;
	/* Pointer cursor on hover */
	text-align: center;
	/* Center-align text */
	white-space: nowrap;
	/* Prevent text wrapping */
	font-size: 14px;
	/* Adjust font size */
	color: #333;
	/* Text color */
	font-weight: normal;
	/* Set font weight */
}

.modal-details .modal-action {
	margin-top: auto;
	/* Push button to the bottom */
}

.modal-details .cta-button {
	display: inline-block;
	padding: 10px 20px;
	background-color: #000;
	color: #fff;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	font-size: 16px;
}

.modal-details .cta-button:hover {
	background-color: #444;
}

@media (max-width: 768px) {
    .modal-body {
        flex-direction: column;
        /* Change to column layout */
        padding: 10px;
        /* Adjust padding for small screens */
    }

	.modal-header h3 {
		display: none;
	}

	.spec-value {
		font-size: 13px!important;
	}

	.modal-description {
		display: none;
	}

    .modal-content .top-content {
        width: 100%;
        /* Ensure the top content takes full width */
        margin-bottom: 20px;
        /* Add margin at the bottom for spacing */
    }

    .modal-content .bottom-content {
        width: 100%;
        /* Ensure the bottom content takes full width */
    }
}

/* Footer Section */
.footer_pc {
	background-color: black;
	color: white;
	padding: 40px 60px;
	/* Increase padding to make the footer bigger */
	display: flex;
	justify-content: center;
	align-items: center;
}

.footer_mobile {
	background-color: black;
	color: white;
	padding: 40px 60px;
	/* Increase padding to make the footer bigger */
	display: none;
	justify-content: center;
	align-items: center;
}

.footer-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	max-width: 1200px;
}

.footer-left .logo {
	font-size: 24px;
	/* Increase font size for better visibility */
	font-weight: bold;
	text-transform: uppercase;
	color: white;
	letter-spacing: 2px;
}

.footer-right {
	display: flex;
	align-items: center;
	gap: 20px;
	/* Increase gap for better spacing */
	flex-wrap: nowrap;
	/* Ensure items stay in a single row */
}

.contact-info {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	gap: 20px;
	white-space: nowrap;
	/* Prevent text from wrapping */
}

.footer-nav {
	display: flex;
	gap: 20px;
	/* Increase gap for better spacing */
}

.footer-button {
	background-color: transparent;
	color: white;
	border: none;
	cursor: pointer;
	font-size: 16px;
	/* Increase font size for better visibility */
}

.footer-button:hover {
	text-decoration: underline;
}



/* Video Section on smartphones */
@media (max-width: 910px) {
	.footer_pc {
		display: none;
	}
	.footer_mobile {
		display: flex;
	}
	.contact-info {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		gap: 20px;
		white-space: nowrap;
		/* Prevent text from wrapping */
	}
}

@media (max-width: 640px) {
	.footer-content {
		flex-direction: column-reverse;
		align-items: center;
		gap: 20px;
	}

	.contact-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		white-space: nowrap;
		/* Prevent text from wrapping */
	}
}