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

html, body {
    height: 100%;
    font-family: 'Poppins', sans-serif;
    background-color: #fff;
    color: #000;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* Flexbox container to align the header and image section */
.wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Ensure the wrapper takes up full viewport height */
}

/* Header */
header {
    display: flex;
    justify-content: space-between; /* Keep this to space elements */
    align-items: center; /* Center items vertically */
    padding: 20px;
    width: 100%;
    background-color: rgb(255, 255, 255);
    z-index: 1000;
    height: 80px; /* Fixed header height */
    flex-shrink: 0; /* Prevent the header from shrinking */
    border-bottom: 1px solid #eeeeee; /* You can change the color (#ccc) as needed */
}


/* Logo */
.logo {
    flex: 1;
    display: flex;
    justify-content: flex-start; /* Aligns logo to the left */
    z-index: 10;
}

.logo img {
    max-width: 120px; /* Adjust the logo size */
    height: auto; /* Maintain aspect ratio */
}

@media (max-width: 768px) {
    header {
        height: 60px; /* Reduced height for mobile */
        padding: 10px; /* Adjust padding to maintain space inside the header */
    }

    .logo img {
        max-width: 90px; /* Smaller logo for mobile */
    }
}

/* Language Flags Centered */
.lang {
    flex: 1;
    display: flex;
    justify-content: center; /* Center flags */
    align-items: center;
}

.flag {
    width: 24px;
    height: 24px;
    margin-left: 10px;
    border-radius: 6px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease-in-out;
}

.flag:hover {
    transform: scale(1.1);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.7);
}

/* Navigation Menu Items */
nav {
    flex: 1;
    display: flex;
    justify-content: flex-end; /* Align menu to the right */
}

nav ul {
    display: flex;
    justify-content: flex-end;
    list-style: none;
}

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    text-decoration: none;
    color: #000;
    font-size: 1rem;
    font-weight: 500;
    display: inline-block;
    transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
}

nav ul li a:hover {
    transform: scale(1.1); /* Grow-up effect */
    color: #000000;
}

.image-section {
    flex-grow: 1; /* Image section fills remaining height */
    display: flex;
    justify-content: flex-start; /* Align items to the top */
    align-items: flex-start; /* Align items to the top */
    height: calc(100vh - 80px); /* Ensure the image section takes the remaining space after the header */
    position: relative; /* Allows absolute positioning for the overlay */
    overflow: hidden; /* Ensures no overflow from the image */
}

.image-section img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fits properly and maintains aspect ratio */
}

/* Mobile adjustments for Image Section */
@media (max-width: 768px) {
    .image-section {
        height: calc(100svh - 50px); /* Let the height adjust based on content for mobile */

    }

    .image-section img {
        width: 100%; /* Ensure the image fits the mobile screen */
        height: 100%;
        object-fit: cover;
    }
}

/* Overlay for the text */
.overlay {
    position: absolute;
    top: 15%; /* Move the text to the top of the image */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center horizontally only */
    text-align: center; /* Center text alignment */
    color: white; /* Text color */
    z-index: 10; /* Ensure text is above the image */
}

/* Styling for the entire heading */
.overlay h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 3rem;
    margin-bottom: 10px;
    text-align: center;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Subtle shadow for better readability */
    line-height: 1; /* Reduce spacing between lines */
}

/* Styling for ECO FRIENDLY text */
.eco-text {
    font-size: 1.5rem; /* Default ECO size */
    color: #ffffff; /* Blue color for ECO */
    display: inline-block; /* Keeps it in line on desktop */
    vertical-align: middle; /* Aligns ECO with BLUClean™ on desktop */
}

/* Styling for BLUClean text as a single unit */
.blu-clean-text {
    font-size: 2.5rem; /* Larger size for BLUClean™ */
    display: inline-block;
    vertical-align: middle; /* Keep in line with ECO */
    white-space: nowrap; /* Prevent BLUClean™ from breaking into two lines */
}

/* Individual colors for BLUClean™ */
.blue-text {
    color: #0070c0; /* Color for "BLU" */
}

.marine-text {
    color: #00b0f0; /* Color for "Clean™" */
}

/* Subheadline styling */
.overlay p {
    font-size: 1.2rem;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Subtle shadow for better readability */
}

/* Mobile adjustments for ECO and BLUClean text */
@media (max-width: 768px) {
    .eco-text {
        font-size: 1.3rem; /* Smaller ECO font size on mobile */
        display: block; /* Stack ECO on top of BLUClean™ */
        margin-bottom: 5px; /* Small space between ECO and BLUClean™ */
    }

    .blu-clean-text {
        font-size: 2.3rem; /* Adjust BLUClean™ size for mobile */
        display: inline-block;
        white-space: nowrap; /* Ensure BLUClean™ stays in one line */
    }
}



/* Hamburger Icon */
.hamburger {
    display: none; /* Hide by default */
    cursor: pointer;
}

.hamburger i {
    font-size: 1.5rem;
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.9); /* White background with transparency */
    z-index: 9999;
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Stack items vertically */
    height: 100vh; /* Full height of the viewport */
}

/* Show the mobile menu when active */
.mobile-menu-overlay.active {
    display: flex; /* Show when active */
}

/* Mobile Menu and Flags as a Combined Group */
.mobile-menu-container {
    display: flex;
    flex-direction: column; /* Stack menu items and flags vertically */
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
}

/* Mobile Menu */
.mobile-menu {
    list-style: none;
    text-align: center;
    display: flex;
    flex-direction: column; /* Stack menu items vertically */
    justify-content: center; /* Center items vertically */
    align-items: center; /* Center items horizontally */
    margin: 0;
    padding: 0;
}

/* Space between menu items */
.mobile-menu li {
    margin: 10px 0; /* Space between menu items */
}

.mobile-menu li a {
    font-size: 1.5rem;
    text-decoration: none;
    color: #000;
}

/* Mobile Language Flags */
.mobile-lang {
    display: flex;
    justify-content: center; /* Center flags horizontally */
    margin-top: 10px; /* Small space between menu and flags */
    flex-direction: row; /* Ensure flags are displayed in a row */
}

.mobile-lang .flag {
    margin: 0 5px; /* Space between flags */
}

/* Close Button */
.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}

.close-btn i {
    font-size: 2rem;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .menu {
        display: none; /* Hide desktop menu on mobile */
    }

    .hamburger {
        display: block; /* Show hamburger on mobile */
    }

    .lang {
        display: none; /* Hide flags in header on mobile */
    }

    /* DO NOT set .mobile-menu-overlay to display: flex here */
    /* The visibility of .mobile-menu-overlay is controlled by JavaScript */
}

/* Tesla-style section */
.tesla-large-rectangle {
    height: 100vh; /* Full-screen height */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Rectangle containing the image and content */
.rectangle {
    position: relative;
    width: 90%;
    height: 90vh; /* Almost full height */
    max-width: 1900px; /* Max width for large screens */
    border-radius: 20px; /* Rounded corners */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    overflow: hidden; /* Ensure the image stays inside the rounded rectangle */
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
}

/* Background image container */
.background-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Ensure no overflow from the image */
    border-radius: inherit; /* Inherit the rounded corners */
    z-index: 1; /* Ensure it's behind the content */
}

/* Image inside background container */
.background-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the entire area, maintaining aspect ratio */
    object-position: center; /* Center the image */
    border-radius: inherit; /* Maintain rounded corners for the image */
}

/* Overlay for Dark Version */
.background-img-dark::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Dark overlay */
    z-index: 2; /* Above the image, behind the content */
    border-radius: inherit;
}

/* Default Dark Overlay */
.background-img-dark::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Default dark overlay */
    z-index: 2;
    border-radius: inherit;
    transition: background 0.3s ease; /* Smooth transition when changed */
}

/* Darker Overlay */
.darker-overlay::after {
    background: rgba(255, 255, 255, 0.89); /* Darker overlay on click */
}
/* Force paragraph text black when darker-overlay is active */
.darker-overlay ~ .content p {
    color: #000 !important;
}
/* Overlay for Light Version */
.background-img-light::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.4); /* Light white overlay */
    z-index: 2; /* Above the image, behind the content */
    border-radius: inherit;
}

/* Content over the image */
.content {
    position: relative;
    z-index: 3; /* Ensure the content stays on top of the image */
    background-color: rgba(255, 255, 255, 0.0); /* Optional: semi-transparent white background */
    padding: 5%;
    text-align: center;
    color: inherit; /* Inherit text color based on section (light or dark) */
}

/* Headline */
.content h1 {
    font-size: 3rem; /* Large headline */
    font-weight: bold;
    margin-bottom: 20px;
}

/* Subheadline */
.content p {
    font-size: 1.5rem; /* Subheadline font size */
    margin-bottom: 40px;
}

/* Button */
.content .btn {
    padding: 12px 30px;
    background-color: #0070c0; /* Black background for button */
    border: none;
    border-radius: 30px; /* Rounded button corners */
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.content .btn:hover {
    background-color: #fff;
    color: #000000;
    border: 2px solid #0070c0; /* Change to outlined button on hover */
}

/* Light Version (Dark text) */
.tesla-large-rectangle.light .content {
    color: #000;
}

/* Dark Version (Light text) */
.tesla-large-rectangle.dark .content {
    color: #fff;
}

.tesla-large-rectangle.dark .btn {
    background-color: #fff;
    color: #000;
}

.tesla-large-rectangle.dark .btn:hover {
    background-color: #000;
    color: #fff;
    border: 2px solid #fff;
}
/* Apply styles to the button in the light version */
.tesla-large-rectangle.light .content .btn {
    background-color: #0070c0; /* Same background color for the light button */
    color: #fff;
}

.tesla-large-rectangle.light .content .btn:hover {
    background-color: #fff; /* White background on hover */
    color: #0070c0; /* Black text on hover */
    border: 2px solid #0070c0; /* Blue border on hover */
}
/* Mobile adjustments for Tesla-style section */
@media (max-width: 768px) {
    .tesla-large-rectangle {
        padding: 10px; /* Add padding for margins on mobile */
        height: 90svh;  
        height: auto; /* Allow height to adjust based on content */
    }

    .rectangle {
        width: 100%; /* Use full width on mobile */
        height: 90svh; /* Auto height for better fit */
        padding: 5px; /* Add padding inside the rectangle */
    }

    .content h1 {
        font-size: 2rem; /* Reduce headline font size on mobile */
    }

    .content p {
        font-size: 1rem; /* Reduce subheadline font size on mobile */
    }

    .content .btn {
        font-size: 0.9rem; /* Smaller button text on mobile */
        padding: 10px 20px; /* Adjust button padding on mobile */
    }
}

/* Contact Section Styling */
.contact-large-rectangle {
    height: 90vh; /* Similar height as the Tesla-style cards */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: #f0f0f0;
    padding: 20px;
}

.contact-rectangle {
    width: 90%;
    max-width: 1200px; /* Similar width to Tesla cards */
    background-color: white;
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.contact-content h1 {
    color: #0070c0; /* Blue title */
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.contact-content p {
    color: #000; /* Black text */
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.contact-content a {
    color: #0070c0; /* Blue link color for email */
    text-decoration: none;
}

.contact-content a:hover {
    text-decoration: underline;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .contact-large-rectangle {
        height: 80svh; /* Let the height adapt to content */
        padding: 20px 10px; /* Reduce padding on mobile */
    }

    .contact-rectangle {
        padding: 30px 20px; /* Smaller padding inside the box */
    }

    .contact-content h1 {
        font-size: 1.8rem; /* Smaller title on mobile */
    }

    .contact-content p {
        font-size: 1rem; /* Smaller paragraph text */
    }
}
/* Footer Styling */
.site-footer {
    background-color: #333; /* Dark background for contrast */
    color: #f0f0f0; /* Light text for readability */
    text-align: center;
    padding: 20px 0;
    position: relative;
    bottom: 0;
    width: 100%;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    
}

.site-footer p {
    margin: 10px 0;
    font-size: 1rem;
    color: #f0f0f0;
}

/* Footer Links */
.footer-links {
    margin-top: 15px;
}

.footer-links a {
    margin: 0 15px;
    color: #f0f0f0;
    text-decoration: none;
    font-size: 0.9rem;
}

.footer-links a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
  footer.site-footer {
    height: 20svh;
  }
}

/* Tesla Privacy Section Styles */
.tesla-privacy-section {
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: #333;
}

.tesla-privacy-section h1 {
    font-size: 2.5rem;
    color: #0070c0;
    text-align: center;
    margin-bottom: 30px;
}

.tesla-privacy-section .section {
    margin-bottom: 40px;
}

.tesla-privacy-section h2 {
    font-size: 1.8rem;
    color: #0070c0;
    margin-bottom: 20px;
}

.tesla-privacy-section p {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 20px;
}

.tesla-privacy-section ul {
    padding-left: 20px;
}

.tesla-privacy-section ul li {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

/* Responsive Styles for Tesla Privacy Section */
@media (max-width: 768px) {
    .tesla-privacy-section {
        padding: 40px 20px;
    }
    .tesla-privacy-section h1 {
        font-size: 2rem;
    }

    .tesla-privacy-section h2 {
        font-size: 1.5rem;
    }

    .tesla-privacy-section p,
    .tesla-privacy-section ul li {
        font-size: 1rem;
    }
}




/* News Header */
.news-header {
    background-color: #f5f5f5;
    padding: 100px 20px;
    text-align: center;
}

.news-header h1 {
    font-size: 3rem;
    color: #0070c0;
    margin-bottom: 20px;
}

.news-header p {
    font-size: 1.5rem;
    color: #666;
}

/* News Grid */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    padding: 50px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.news-item {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    background-color: white;
}

.news-img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.news-content {
    padding: 20px;
    text-align: center;
}

.news-content h2 {
    font-size: 1.8rem;
    color: #0070c0;
    margin-bottom: 15px;
}

.news-content p {
    font-size: 1rem;
    color: #666;
    margin-bottom: 20px;
}

.news-content .btn {
    padding: 10px 20px;
    background-color: #0070c0;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.news-content .btn:hover {
    background-color: #005fa3;
}

/* Pagination */
.pagination {
    text-align: center;
    padding: 20px;
}

.pagination a {
    text-decoration: none;
    color: #0070c0;
    padding: 10px 20px;
    border: 1px solid #0070c0;
    border-radius: 5px;
    margin: 0 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.pagination a:hover {
    background-color: #0070c0;
    color: white;
}

/* Responsive Design */
@media (max-width: 768px) {
    .news-header h1 {
        font-size: 2.2rem;
    }

    .news-header p {
        font-size: 1.2rem;
    }

    .news-content h2 {
        font-size: 1.5rem;
    }

    .news-content p {
        font-size: 0.9rem;
    }

    .news-grid {
        gap: 20px;
    }
}

/* Article Header */
.article-header {
    background-color: #f5f5f5;
    padding: 60px 20px;
    text-align: center;
}

.article-header-content h1 {
    font-size: 2.5rem;
    color: #0070c0;
    margin-bottom: 15px;
}

.article-header-content p {
    font-size: 1.2rem;
    color: #666;
}

/* General Styling for Article Feature Image */
.article-feature-image {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 40px 20px; /* Increase vertical padding for a clean layout */
}

.article-feature-image img {
    width: 90%; /* Ensure it scales to the container width */
    max-width: 800px; /* Smaller max width to prevent oversized image on large screens */
    height: auto; /* Maintain the aspect ratio */
    border-radius: 10px; /* Rounded corners for a modern look */
    object-fit: cover; /* Ensures proper aspect ratio */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .article-feature-image {
        padding: 20px 10px; /* Reduce padding for mobile */
    }

    .article-feature-image img {
        max-width: 100%; /* Full width on mobile */
        border-radius: 8px; /* Adjust rounded corners for mobile */
    }
}



/* Main Article Content */
.article-content {
    padding: 50px 20px;
    max-width: 80%;
    margin: 0 auto;
    line-height: 1.7;
}

.article-content h2 {
    font-size: 2rem;
    color: #0070c0;
    margin-top: 30px;
    margin-bottom: 20px;
}

.article-content p {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 20px;
}

.article-content ul {
    padding-left: 20px; /* Adjust this value as needed */
    margin-left: 0; /* Optional: Reset margin if it's causing misalignment */
}

/* Related Articles Section */
.related-articles {
    background-color: #f5f5f5;
    padding: 50px 20px;
}

.related-articles h3 {
    font-size: 1.8rem;
    text-align: center;
    color: #0070c0;
    margin-bottom: 40px;
}

.related-articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.related-article {
    text-align: center;
}

.related-article img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 10px;
}

.related-article h4 {
    font-size: 1.2rem;
    color: #0070c0;
    margin-top: 10px;
}

.related-article a {
    text-decoration: none;
    color: inherit;
}

.related-article a:hover h4 {
    color: #005fa3;
}

/* Back Button Styling */
.back-button-wrapper {
    text-align: center; /* Center the button */
    margin-top: 40px;
}

.btn-back {
    display: inline-block;
    padding: 12px 30px;
    background-color: #0070c0;
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-back:hover {
    background-color: #005fa3; /* Darker hover state */
    transform: scale(1.05); /* Slight grow effect on hover */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .article-header-content h1 {
        font-size: 2rem;
    }

    .article-content h2 {
        font-size: 1.8rem;
    }

    .article-content p {
        font-size: 1rem;
    }

    .related-articles h3 {
        font-size: 1.6rem;
    }

    .related-article h4 {
        font-size: 1.1rem;
    }
    .btn-back {
        font-size: 0.9rem; /* Slightly smaller text on mobile */
        padding: 10px 25px;
    }
}


/*working*/

/* Initially hide the popup */
.hidden {
    display: none !important; /* This ensures the element is not visible */
}

/* Popup overlay styles */
#popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Slightly lighter overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease-in-out; /* Smooth fade-in animation */
}

/* Fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Popup content styles */
#popup-content {
    background: #f9f9f9; /* Softer white background */
    padding: 30px;
    border-radius: 12px; /* Increased border radius for a modern look */
    text-align: center;
    max-width: 450px; /* Slightly larger for better readability */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Stronger shadow for depth */
    font-family: 'Poppins', sans-serif; /* Ensure consistent modern font */
}

/* Heading style */
#popup-content h2 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #333;
}

/* Paragraph style */
#popup-content p {
    font-size: 16px;
    margin-bottom: 20px;
    color: #555;
}

/* Close button */
#popup-close-btn {
    padding: 12px 25px;
    background: linear-gradient(90deg, #0070c0, #00a0f0); /* Gradient background */
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out; /* Smooth hover transition */
}

#popup-close-btn:hover {
    background: linear-gradient(90deg, #005999, #0080c0); /* Darker gradient on hover */
    transform: scale(1.05); /* Subtle scaling on hover */
}

/* Responsive styles */
@media (max-width: 768px) {
    #popup-content {
        padding: 20px;
        max-width: 90%; /* Use most of the screen width on small devices */
    }

    #popup-content h2 {
        font-size: 20px;
    }

    #popup-content p {
        font-size: 14px;
    }

    #popup-close-btn {
        font-size: 14px;
        padding: 10px 20px;
    }
}


/* 1) Jeden scroller: BODY */
html, body { height: 100%; margin: 0; }
body {
  overflow-y: scroll;
  scroll-snap-type: y mandatory; /* prosto i pewnie */
  overscroll-behavior-y: none;
}

/* 2) Punkty snap */
header {
  scroll-snap-align: start;
}

.tesla-large-rectangle {
  scroll-snap-align: start;   /* spójnie: start → start → start */
}

/* Tesla – centrowanie + poprawne jednostki viewportu na mobile */
@media (max-width: 768px) {
  .tesla-large-rectangle {
    /* nadpisz wcześniejsze height:100vh, bo rozjeżdża się z paskami przeglądarki */
    height: auto;
    min-height: 100vh;   /* fallback */
    min-height: 100svh;  /* widoczny viewport (bez pasków UI) */
    scroll-snap-align: center;
    padding-bottom: env(safe-area-inset-bottom); /* unikaj „ucięcia” na iOS */
  }
}

/* Jeśli przeglądarka wspiera dynamiczne dvh — użyj go */
@supports (height: 100dvh) {
  @media (max-width: 768px) {
    .tesla-large-rectangle { min-height: 100dvh; }
  }
}

/* WYŁĄCZ kontakt z punktów snap */
#contact.contact-large-rectangle {
  scroll-snap-align: none !important;   /* nie jest punktem snap */
  scroll-snap-stop: normal !important;  /* brak “lepkości” */
}


footer {
  scroll-snap-align: end;
}