body {
    font-family: 'Quicksand', 'sans-serif';
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden; /* Prevent horizontal scrolling globally */
    overflow-y: auto;
    background-image: url('img/pagrindas.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    border-top: none; /* Remove top line */

    
}



.sidebar nav ul li a:hover,
.sidebar nav ul li a.active {
    background-color: rgba(51, 51, 51, 0.5);
    border-radius: 5px;
    color: #fff;
    transform: none; /* Prevent growth */
}

.nav-indicator {
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
    transform: none; /* Remove any transformation that could cause shaking */
}

.sidebar {
    width: 218px;
    background-color: black;
    color: #fff;
    position: fixed;
    overflow-y: auto;
    top: 0;
    bottom: 0;
    padding: 2em 1em;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease-in-out;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Prevent any content from overflowing */
    transform: translateX(-100%); /* Ensure it's hidden initially */


}

.sidebar.active {
    transform: translateX(0);
}

.sidebar.hidden ~ .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


.main-content {
    margin-left: 260px; /* Leave space for the sidebar */
    padding: 20px;
    box-sizing: border-box; /* Include padding and border in the element’s total width and height */
}

.menu-item {
    padding: 40px;
    color: #333;
    text-decoration: none;
    display: block;
}

.menu-item:hover {
    background-color: #ddd;
}

.menu-item.active {
    background-color: #bbb;
    font-weight: bold;
}

/* Prevent the hover effect from extending outside the sidebar */
.sidebar nav ul li a:hover {
    background-color: rgba(85, 85, 85, 0.8);
    border-radius: 40px;
    transform: scale(1.0); /* Slightly reduce the scale effect */
    outline: none;
    border: none;
    box-sizing: border-box;
}

.sidebar.hidden {
    transform: translateX(-100%);
}

.menu-toggle-button {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1101;
    background: rgba(0, 0, 0, 0.8);
    border: none;
    width: 100px; /* Adjust the size */
    height: 100px;
    color: white;
    font-weight: bold;
    text-align: center;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, opacity 0.3s ease-in-out;
}

/* Remove any background image */
.menu-toggle-button::before {
    content: "";
    display: none;
}

.menu-toggle-button::after {
    font-size: 20px;
    font-weight: bold;
    color: white;
}


/* Update the text "MENIU" color to black */
.menu-toggle-button::after {
    position: absolute;
    font-size: 22px;
    font-weight: bold;
    color: black;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}




.logo {
    border-radius: 50% 50% 45% 45%; /* Adjust these percentages for an oval shape */
    margin-bottom: 1em;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.1s ease-in-out;
    
}
.logo.hidden {
    display: block;
}



.main-content {
    padding: 20px;
    box-sizing: border-box;
    transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out;

}

.sidebar.hidden ~ .main-content {
    margin-left: 0;
    width: 100%;
}




/* Fixing Image Scaling */
.teacher-img-wrapper img,
.section img {
    max-width: 100%;
    height: auto;
    display: block;
    
    margin: 0 auto;
}

/* Smooth transitions for section changes */
.section.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}



.content {
    display: block; /* Important: Change from flex to block */
    max-width: 90%;
    box-sizing: border-box;
    overflow: auto;

}

.container h2 {
    font-size: 1.5em; /* Larger and more modern font size */
    margin-bottom: 20px;
    color: #222;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

button[type="submit"] {
    padding: 0.75em 2em;
    background-color: #222;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em; /* Slightly larger button text */
    transition: background-color 0.3s, transform 0.3s;
}

button[type="submit"]:hover {
    background-color: #555;
    transform: scale(1.05); /* Subtle scaling on hover */
}



.sidebar nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: left; /* Vertically centers the items within the sidebar */
    align-items: left; /* Horizontally centers the items within the sidebar */
}

.sidebar nav ul li {
    width: 100%; /* Make each list item take up the full width */
    display: flex;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    margin: 0; /* Remove any margin that could affect alignment */
}

.sidebar nav ul li a {
    display: block;
    width: 100%; /* Ensure the link fills the entire list item */
    text-align: center; /* Center the text within the link */
    padding: 15px 0; /* Add padding for better spacing */
    color: #fff;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.3s, color 0.3s;
}

.sidebar nav ul li a:hover {
    background-color: rgba(51, 51, 51, 0.5);
    border-radius: 5px;
    color: #fff;
    transform: none(1.1);
}

.sidebar nav ul li a.active {
    background-color: rgba(85, 85, 85, 0.5);
    border-radius: 5px;
    transform: none(1.1);
}


.container {
    max-width: 100%;
    padding: 20px; /* Optional padding */
    box-sizing: border-box;
    text-align: left; /* Center the text inside the container */
    
}
h2 {
    font-weight: 200;
    margin-bottom: 1em;
    color: #000;
    font-size: 2em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.gallery-options {
    display: flex;
    justify-content: left;
    gap: 1em;
    flex-wrap: wrap;
    margin-top: 0px;
}
h2, .container {
    font-weight: 600;
    text-align: left;
    margin-bottom: 20px;
}

.gallery-box {
    width: 100%;
    max-width: 300px;
    margin: 10px auto;
    display: flex;
    align-items: left;
    justify-content: left;
    position: relative;
    overflow: hidden;
}

.gallery-box img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
}

.gallery-box span {
    position: relative;
    z-index: 1;
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0.5em;
    border-radius: 5px;
}

.gallery-box:hover {
    background-color: #555;
    transform: scale(1.05);
}

.gallery-box:hover img {
    opacity: 0.8;
}

.popup-gallery .close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 30px;
    color: white;
    cursor: pointer;
    user-select: none;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 50%;
    z-index: 1001;
    transition: slide 0.3s;
}

.popup-gallery .close:hover {
    background: rgba(0, 0, 0, 0.8);
}
img {
    max-width: 100%;
    height: auto;
}
#popup-gallery {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#popup-gallery.open {
    display: flex;
}

.popup-content {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 90%;
    max-width: 1200px;
    height: 80%;
    position: relative;
    transition: transform 0.5s ease-in-out;
}

.popup-content img {
    max-width: 100%;
    max-height: 100%;
    border: 0x solid #fff;
    border-radius: 10px;
}

.arrow {
    font-size: 50px;
    color: white;
    cursor: pointer;
    user-select: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 50%;
    z-index: 1001;
    transition: transform 0.2s;
}

.arrow:hover {
    background: rgba(0, 0, 0, 0.5);
}

.left {
    left: 20px;
}

.right {
    right: 20px;
}

.slide-left {
    animation: slide-left 0.5s forwards;
}

.slide-right {
    animation: slide-right 0.5s forwards;
}

@keyframes slide-left {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}




h2 {
    font-weight: 600;
    margin-bottom: 1em;
    color: #000;
    font-size: 1em; /* Increase font size for better visibility */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add text shadow for better readability */
}

.centered-text {
    text-align: left;
}

p {
    font-weight: 400;
    line-height: 1.6;
    color: #000;
}

#home {
    display: flex;
    justify-content: left;
    align-items: left;
    text-align: left;
    min-height: 100vh; /* Ensure it fits the content */
    background-color: #f9f9f9;
    padding: 20px;
    box-sizing: border-box;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    overflow-y: auto;   /* Allow vertical scrolling if needed */
}


#home .container {
    display: flex;
    flex-direction: column;
    align-items: left;
    width: 100%; /* Ensure the container takes full width */
    height: 100%;
    justify-content: left;
}

#home .video-container {
    position: fixed; /* Fixed to viewport */
    top: 0;
    left: 0;
    width: calc(100vw); /* Adjust width to exclude sidebar width */
    height: 100vh; /* Full height of viewport */
    overflow: hidden;
    z-index: 1; /* Ensures it appears on top of all other elements */
    background-color: black; /* Optional for a cleaner background */
}

#home .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    border: none;
}


.gallery-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2em;
    margin-top: 0px;
}
.student-galleries .gallery-box {
    width: 500px; /* Increased size */
    height: 500px;
    
}
#student-work {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Left align the content */
    justify-content: flex-start;
    padding-right: 20px;
    width: 95%;
    box-sizing: border-box; /* Ensure padding and border are included in width */
    text-align: left; /* Align text to the left */
}
#pricing {
    display: flex;
    flex-direction: column;
    align-items: flex-start !important; /* Override any centering */
    justify-content: flex-start;
    text-align: left !important; /* Force left alignment */
    padding-right: 20px;
    box-sizing: border-box;
    width: 95%;
   
   
    #pricing .gallery-container {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center;
    text-align: center;
    width: 100%;
}

#pricing .gallery-box {
    width: 90%; /* Make images responsive */
    max-width: 400px; /* Prevent them from becoming too large */
}

}


.pricing-section .pricing-icon {
    width: 700vw; /* Increased by 60% from 200px */
    height: auto;
}
.pricing-section .gallery-container {
    flex-wrap: horizontal; /* Allow wrapping for smaller screens */
    justify-content: left; /* Center items */
    gap: 20px; /* Add spacing between items */
}

.pricing-section .gallery-box {
    width: 380px; /* Increased width */
    height: 600px;
    display: flex;
    justify-content: left;
    align-items: left;
    background-color: #4444; /* Optional: Keep a contrast background */
    border-radius: 15px; /* Add a slight rounding for aesthetics */
    overflow: hidden; /* Ensure images don't overflow */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow for depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-section .gallery-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the entire box proportionally */
}

.pricing-section .gallery-box span {
    position: absolute;
    bottom: 10px; /* Move the label to the bottom */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    color: #fff; /* White text for contrast */
    border-radius: 10px;

}

.gallery-box {
    flex: 1 1 auto; /* Flexbox for responsiveness */
    max-width: 100%; /* Max width for gallery boxes */
    background-color: #444;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 10px;
    transition: background-color 0.3s, transform 0.3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    margin: 0px; /* Add some margin for spacing */
}

.gallery-box img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
}

.gallery-box span {
    position: relative;
    z-index: 1;
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0.5em;
    border-radius: 5px;
}

.gallery-box:hover {
    background-color: #555;
    transform: scale(1.05);
}

.gallery-box:hover img {
    opacity: 0.8;
}

/* Ensure that the "Mokytoja" section does not cause horizontal scrolling */
/* Adjust the teacher section to utilize full width */
#teacher {
    margin: 0 auto; /* Center-align content */
    box-sizing: border-box; /* Include padding and borders in the element's total width */
    overflow: auto; /* Enable scrolling for this section */
    
}

.teacher-container {
    width: 100%; /* Ensure the container takes up full available width */
    max-height: 100%;
    max-width: 1800px; /* Set a reasonable max-width for content readability */
    box-sizing: border-box;
}

.teacher-text,

.teacher-img-wrapper {
    position: relative; /* Allows the text to be positioned over the image */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}


.teacher-img-bottom {
    width: 100%;  /* Full width in its container */
    height: auto;  /* Maintain aspect ratio */
    max-width: 350px;  /* Set a maximum width for larger screens */
    min-width: 150px;  /* Set a minimum width to prevent it from shrinking too much */
}

.teacher-img-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px; /* Add space between items */
    width: 100%;
}

#about {
    display: block;
    flex-direction: row; /* Horizontally align the text and map */
    align-items: left; /* Align items at the top */
    text-align: left;
    padding: 20px;
    max-width: 1200px;
    gap: 10px;
    background: none; /* Remove any background color */
    box-shadow: none; /* Remove shadow if applied */
}

/* Text content styling */
#about .text-content {
    flex: 3;
    font-size: 1.2rem;
    line-height: 1.8;
    color: #000000; /* Ensure text is readable on the background image */
}

#about .text-content h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #000000;
}

#about .text-content p {
    margin-bottom: 15px;
    color: #000000;
}

#about .text-content em {
    font-style: italic;
    font-size: 1rem; /* Slightly larger than the main text */
    font-weight: bold; /* Bold styling for emphasis */
    color: #000; /* Make text black */
    text-shadow: none; /* Remove text shadow for clarity */
    display: Flex;
    
    margin-top: 20px;
    line-height: 1.6; /* Improve line spacing for readability */
}
#about .text-content .aligned-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem; /* Adjust font size to fit in one line */
    margin: 10px 0;
}

#map-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 20px 0;
}

#map-container iframe {
    display: block;
    margin: 0 auto;
    width: 80%;
    max-width: 600px;
    height: 400px;
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Keyframes for background image slideshow */
@keyframes backgroundSlideshow {
    0% { background-image: url('img/x1.jpg'); }
    20% { background-image: url('img/x2.jpg'); }
    40% { background-image: url('img/x3.jpg'); }
    60% { background-image: url('img/x4.jpg'); }
    80% { background-image: url('img/x5.jpg'); }
    100% { background-image: url('img/x1.jpg'); } /* Loop back to the first image */
}

.teacher-galleries {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px; /* Adjust the spacing between the gallery items */
    flex-wrap: wrap; /* Allow wrapping */
    width: 100%;
    box-sizing: border-box;
}
.teacher-galleries .gallery-box {
    width: 400px; /* Increased size */
    height: 300px; /* Adjust height proportionally */
}

.meno-cv-content {
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
}

.teacher-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 2em; /* Add white space at the bottom */
    max-height: 100%;
    padding: 1em;
}


.teacher-text {
    position: relative;
    text-align: left; /* Keep the detailed text left-aligned */
    width: 100%; /* Ensure it takes full width */
}
.teacher-text-right {
    font-size: 1rem; /* Match the size in 'Apie studiją' */
    color: #000;       /* Ensure color consistency */
}


/* Fix the size of the teacher image */
.teacher-img-top {
    width: 200px; /* Set a fixed width */
    height: 200px; /* Set a fixed height */
    object-fit: cover; /* Ensure the image fits within the given dimensions */
}
/* Adjust font size dynamically based on the viewport width */
.teacher-text {
    font-size: calc( 2vw); /* Dynamically adjust font size based on viewport */
}

    
    #lessons {
        padding: 10px;
        font-size: 0.8rem;
    }






.teacher-img-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap; /* Allow images and text to wrap */
    width: 100%; /* Ensure it takes full width */
}

.teacher-img-bottom {
    width: 40%; /* 20% smaller */
    height: auto;
    margin: 20px 0;
}

.teacher-text-right {
    flex: 1;
    text-align: left;
}

.teacher-content {
    margin-top: 2em;
}

.teacher-galleries {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px; /* Adjust the spacing between the gallery items */
    flex-wrap: nowrap; /* Prevent wrapping to a new line */
}


.meno-cv-title {
    font-size: 24px; /* Increased font size for "Meno CV" */
    cursor: pointer;
}

.meno-cv-content h4 {
    margin-top: 20px;
    font-size: 20px;
}

.meno-cv-content ul {
    display: block; /* Ensure block behavior */
    margin: 0; /* Reset margin */
    padding: 0; /* Reset padding */
    list-style: none; /* Remove default bullets */
    position: relative; /* Allow positioning of dots */
    list-style: none;
    text-align: left; /* Align text to left for better readability */
    font-size: 0.9em; /* Slightly reduce font size for better readability */
}

 
.meno-cv-content li {
    margin-bottom: 10px; /* Adjust spacing between list items */
}


#registration {

    background-size: 100%;
    padding: 0px 0px;       /* Add padding to create space between content and the edges */
    color: #000000;              /* Change text color for better visibility */
    position: relative;       /* Ensure the background image stays behind the content */
    padding-right: 20px;
    text-align: left;
    box-sizing: border-box;
}

#registration-form {
    background-color: rgba(0, 0, 0, 0.6); /* Add a semi-transparent background behind the form */
    padding: 80px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow for a more elevated look */
}

#registration h2 {
    color: #000000; /* Ensure the heading text is visible */
}

#registration-form label, 
#registration-form input, 
#registration-form textarea {
    color: #fff; /* Make form text white for better contrast */
}

#registration-form input,
#registration-form textarea {
    background-color: rgba(255, 255, 255, 0.2); /* Transparent input background */
    border: 1px solid #ddd;
}


.form-group {
    width: 100%;
    margin-bottom: 4em;
}

.form-group label {
    display: block;
    margin-bottom: 0.5em;
    font-weight: 600;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75em;
    border: 1px solid #000000;
    border-radius: 5px;
    font-family: 'Quicksand', sans-serif;
}

.form-group textarea {
    resize: vertical;
}

button[type="submit"] {
    padding: 0.75em 2em;
    background-color: #444;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button[type="submit"]:hover {
    background-color: #555;
}




.full-screen-image {
    position: relative;
    width: 100%;
    height: 400vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

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






.section.fade-in {
    animation: fadeIn none;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}



/* Ensuring the image fits the screen */
.schedule-image {
    max-width: 100%;
    max-height: 95vh; /* Ensures the image never exceeds 80% of the viewport height */
    object-fit: contain; /* Ensure the image scales properly */
    width: auto;
    height: auto;
    display: block;
    object-fit: contain; /* Ensures the image is fully visible */
    justify-content: flex-start;
}

/* Container adjustments to center content */
#schedule .container {
    max-width: 1000px; /* Limit the width of the container */
    padding: 20px;
    box-sizing: border-box;
    text-align: left; /* Center text and image */
}

/* Section adjustments */
#schedule {
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: flex-start;
    text-align: left;
    width: 100%;
    margin-left: 20px !important;
}

#schedule h2 {

    margin-bottom: 20px;
    font-size: 2.5em;
    color: #222;
    text-align: left;
}





/* Container for social media icons using Grid */
.social-media-grid {
       
  
    gap: 20px; /* Adds space between the icons */
    padding: 20px;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

/* Style the social media icon images */
.social-media-grid img {
    width: 30px; /* Set the size of the icons */
    height: auto; /* Maintain aspect ratio */
    transition: transform 0.3s ease;
}

/* Add a hover effect */
.social-media-grid img:hover {
    transform: scale(1.2); /* Slight zoom on hover */
}

/* Enable vertical scrolling for rules */
/* General styling for the rules section */
#taisyklės, #schedule { 
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: flex-start; /* Align content to the left */
    color: #333; /* Text color */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
    max-height: 800vh; /* Restrict section height */
    overflow-y: auto; /* Allow vertical scrolling */
    padding-right: 10px; /* Prevent scrollbar overlap */
    text-align: left;
    box-sizing: border-box;
}

#taisyklės h2 {
    text-align: left; /* Align heading to the left */
    font-size: 1.4rem; /* Large, readable font size */
    margin-bottom: 20px; /* Space below the heading */
    color: #000;
}

#taisyklės ul {
    list-style: disc; /* Use bullet points */
    margin: 0 0 20px 20px; /* Indent the list */
    padding: 0; /* Remove padding */
    font-size: 1rem; /* Adjust font size */
    line-height: 1.8; /* Improve readability with spacing between lines */
}

#taisyklės .highlight {
    text-align: center; /* Center this special text */
    font-size: 1.4rem; /* Emphasize the font size */
    font-weight: bold; /* Make it stand out */
    margin: 30px auto; /* Add spacing and center horizontally */
}

#taisyklės .image-section {
    display: flex;
    justify-content: center; /* Center the images */
    align-items: center;
    gap: 20px; /* Add spacing between images */
    margin-top: 20px; /* Add space above images */
}

#taisyklės .image-section img {
    width: 200px; /* Set a consistent width for images */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Add rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
}



/* Background container */
.background-lines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Ensure it doesn't interfere with content */
    overflow: hidden;
    pointer-events: none; /* Ignore user interactions */
}

/* Line styles */
.line {
    position: absolute;
    width: 2px;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.1); /* Light grey color */
    opacity: 0.5; /* Semi-transparent */
    transition: transform 0.2s, opacity 0.2s;
}
@media screen and (max-width: 758px) {
    /* Sidebar adjustments to prevent inner scrollbar */
    .sidebar {
        width: 140px;
        overflow-y: auto;
        max-height: 100vh;
        padding: 10px 0;
    }

    .sidebar nav {
        max-height: 100vh;
        overflow-y: auto;
        scrollbar-width: none;
    }

    .sidebar nav::-webkit-scrollbar {
        display: none;
    }

    /* Ensure no horizontal scrolling */
    body, html {
        overflow-x: hidden;
    }

    /* Main content adjustments */
    .main-content {
        margin-left: 0;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
    }

    /* Font sizes and element scaling */
    .section h1, .section h2, .section h3 {
        font-size: calc(16px + 2vw);
    }

    .section p {
        font-size: calc(12px + 1vw);
        line-height: 1.6;
    }

    /* Section padding and layout */
    .section {
        padding: 10px;
    }

    .container {
        padding: 10px;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Image and gallery scaling */
    .gallery-box, .schedule-image, .teacher-img-wrapper img {
        max-width: 100%;
        height: auto;
    }

    /* Menu toggle button scaling */
    .menu-toggle-button {
        width: 100px;
        height: 100px;
        font-size: 14px;
    }

    /* Full-width sections */
    #pradzia, #apie-studija, #mokytoja, #lessons, #student-work, #taisyklės, #registration {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
    }

    /* Sidebar menu item scaling */
    .sidebar nav ul li a {
        font-size: 0.9rem;
        padding: 8px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Ensure vertical scrolling only */
    * {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Prevent internal scrolling within sidebar */
    .sidebar nav ul {
        overflow-y: auto;
        max-height: calc(100vh - 40px);
    }

    .sidebar nav ul::-webkit-scrollbar {
        display: none;
    }
}