/* تعریف فونت Vazirmatn (Regular و Bold) */
@font-face {
    font-family: 'Vazirmatn';
    src: url('/assets/fonts/Vazirmatn-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/assets/fonts/Vazirmatn-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* تعریف فونت Calibri (Regular و Bold) */
@font-face {
    font-family: 'Calibri';
    src: url('/assets/fonts/calibri-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Calibri';
    src: url('/assets/fonts/calibri-bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* استفاده از فونت‌ها در CSS */
body {
    font-family: 'Vazirmatn', 'Calibri', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #E0F7FA;
    background-image: url('/assets/images/gif/bg.gif'); 
    background-size: cover; /* Cover the entire background */
    background-repeat: no-repeat; /* Prevent repeating */
    background-attachment: fixed; /* Fixed background for better effect */
    color: none;
}

.about-us-section, .animations-section, .articles-section, .videos-section, .slideshow-section {
    padding: 20px;
    margin: 20px auto;
    max-width: auto;
    text-align: center; /* Center align content */
}
.animation-item, .article-item, .video-item, .contact-frame, .frame, .slideshow-group {
    padding: 20px;
    border: 2px solid #003366; /* Blue border */
    border-radius: 8px;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
    margin: 20px auto; /* Center-align frames */
    max-width: auto; /* Example width for better centering */
    text-align: center; /* Ensure text and content are centered */
}

h2, .about-us-title, .animations-title, .articles-title, .video-title, .slideshow-group h2 {
    text-align: center; /* Center-align all titles */
    color: #003366; /* Heading color */
}

.animations-list, .articles-list, .videos-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* Animation and Video Frame Settings */
.animation-frame, .video-frame {
    display: block;
    margin: 10px auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 640px ; /* Full width for both desktop and mobile */
    max-width: auto ; /* Maximum width for larger screens */
    height: 360px; /* Maintain aspect ratio */
}

.contact-section {
    text-align: center;
    margin-bottom: 20px;
}

.contact-section form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0 auto; /* Center form */
    max-width: 93%%; /* Adjust form to the container width */
    text-align: center; /* Center the text */
}

.contact-section form label {
    font-weight: bold;
    text-align: center; /* Center label text */
}

.contact-section form input,
.contact-section form textarea {
    padding: 10px;
    margin: 0 auto 10px auto; /* Center the input fields */
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    max-width: 400px; /* Limit the max width */
}

.contact-section form button {
    padding: 10px;
    background-color: none;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 0 auto; /* Center the button */
    width: 50%; /* Set width for the button */
    max-width: 200px; /* Limit max width */
}

.contact-section form button:hover {
    background-color: #0056b3;
}

nav {
    background-color: #009;
    overflow: hidden;
    padding: 4px 2px; /* Padding for the navbar */
    position: fixed; /* Fixed position for the navbar */
    width: 100%; /* Full-width navbar */
    top: 0; /* Stick to the top */
    left: 0; /* Align to the left */
    z-index: 1000; /* Ensure it's above other content */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
    flex: 1; /* Take up available space */
}

nav ul li {
    display: inline-block;
    margin-right: 10px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    padding: 2px 10px;
    display: inline-block;
    font-weight: 700; /* تنظیم فونت بولد برای لینک‌ها */
}

nav ul li a:hover {
    background-color: #0F0;
    color: #ffffff; /* Change text color to white on hover */
}

.language-selector {
    position: fixed;
    top: 2px;
    right: 10px; /* Fixed on the right side */
    z-index: 1001;
    background-color: #ffffff;
    padding: 0px;
    border-radius: 2px;
    border: 3px solid #007bff;
    color: #007bff;
}

.language-selector select {
    padding: 4px; /* Add padding for a better appearance */
    background-color: #ffffff; /* White background */
    color: #007bff; /* Match the primary color */
    border: none;
    font-size: 12px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Desktop Navbar Logo */
.navbar-logo {
    position: fixed;
    top: 4px; /* Adjusted to align with the navbar items */
    left: 20px; /* Positioned on the left side */
    z-index: 1001; /* Keep above other elements */
    width: 30px; /* Adjust logo width */
    height: 30px; /* Adjust logo height */
    object-fit: cover; /* Ensure image covers the entire area */
    border-radius: 2px; /* Rounded corners */
    background-color: transparent; /* Ensure no background color */
    border: none; /* Remove any border */
    
    /* Optional: Add shadow for visibility if logo is white */
    filter: drop-shadow(0 0 2px black); /* Add a shadow around the logo if needed */
}

/* Mobile-Friendly Styles */
@media (max-width: 768px) {
    nav {
        padding: 21px 0; /* Increase padding for mobile devices */
    }

    .navbar-toggle {
        display: block;
        cursor: pointer;
        font-size: 14px; /* Increase size for better visibility */
        position: absolute;
        top: 2px;
        right: 20px;
        z-index: 1001;
        padding: 10px;
        background-color: #ff5722; /* Orange background for high contrast */
        color: #ffffff; /* White text for the toggle button */
        border-radius: 2px;
    }

    nav ul {
        display: none; /* Hide the navbar items initially on mobile */
        flex-direction: column;
        align-items: center;
        background-color: rgba(0, 0, 0, 0); /* Background for the expanded menu */
        position: fixed; /* Fixed positioning to ensure it stays in view */
        top: 0;
        right: 0; /* Fix the navbar to the right side */
        width: 120px; /* Adjust the width as needed */
        height: 100%; /* Full height to cover the screen */
        z-index: 1000; /* Ensure it appears above other content */
        padding-top: 50px; /* Ensure the content is below the toggle */
        overflow-y: auto; /* Scrollable if content is too long */
    }

    nav ul.active {
        display: flex; /* Display the menu when active */
    }

    nav ul li {
        display: block;
        margin-bottom: 5px;
        width: 100%; /* Make the items full width */
        text-align: center; /* Center align the text */
    }

    nav ul li a {
        background-color: #009; /* Set the fixed background color */
        color: #ffffff; /* Set text color to white */
        padding: 8px 4px;
        display: block;
        text-decoration: none;
        font-weight: 700; /* تنظیم فونت بولد برای لینک‌ها */
    }

    /* Mobile Navbar Logo */
    .navbar-logo {
        position: absolute; /* Keep absolute positioning */
        top: 2px; /* Adjust to align properly in mobile */
        left: 10%; /* Center horizontally */
        transform: translateX(-50%); /* Center the logo */
        z-index: 1001; /* Ensure it stays above other elements */
        background-color: transparent; /* No background color */
        padding: none; /* Remove padding */
        border: none; /* Remove border */
        width: 35px; /* Adjust logo width */
        height: auto; /* Maintain aspect ratio */
        object-fit: contain; /* Scale the image correctly within its bounds */
    }

    .language-selector {
        top: 7px;
        right: 60px;
        z-index: 1001;
        background-color: #ffffff; /* White background */
        padding: 0px;
        border-radius: 2px;
        font-size: 12px;
        border: 2px solid #007bff; /* Blue border */
    }

    /* Center slideshow and contact section for mobile */
    .slideshow-container, .contact-frame {
        margin: 0 auto; /* Center frames on mobile */
        width: 90%; /* Set width to 90% for better mobile display */
        display: flex; /* Center-align content */
        justify-content: center; /* Center-align content */
    }

    .slideshow-group, .frame, .contact-section form {
        margin: 10 auto; /* Center align all frames */
        width: 90%; /* Full width for mobile */
        max-width: 400px; /* Max width for better readability */
        display: flex; /* Flex to center content */
        flex-direction: column; /* Column direction */
        align-items: center; /* Center items */
    }

    .slideshow-image {
        width: 100%; /* Ensure image fits within frame */
        max-width: 100%; /* Prevent overflow */
        height: auto; /* Maintain aspect ratio */
        border-radius: 8px; /* Keep consistent border radius */

    }
    .animation-frame, .video-frame {
        width: 384px; /* Full width on mobile */
        height: 216px; /* Maintain aspect ratio */
        max-width: auto;
    }
 }


/* Styles for Mobile Devices (max-width: 480px) */
@media (max-width: 480px) {
    body {
        font-size: 14px; /* Adjust font size for readability */
        padding: 0px; /* Add padding to the body */
    }

    .about-us-section, .animations-section, .articles-section, .videos-section, .slideshow-section {
        padding: auto; /* Reduce padding for mobile */
        margin: 30px auto; /* Decrease margin for mobile */
    }

    .animation-frame, .video-frame {
        width: 320px; /* Full width on mobile */
        height: 180px; /* Maintain aspect ratio */
        max-width: auto;
    }

    nav {
        padding: 10px 10; /* Adjust padding for smaller screens */
    }

    nav ul li {
        margin-right: 5px; /* Reduce spacing between navbar items */
    }

    .contact-section form input,
    .contact-section form textarea {
        width: 100%; /* Full width on mobile */
        max-width: 100%; /* Remove max width */
        font-size: 14px; /* Adjust font size for better readability */
    }

    .contact-section form button {
        width: 100%; /* Full width for buttons on mobile */
        max-width: 100%; /* Remove max width */
    }

    .navbar-toggle {
        font-size: 18px; /* Increase toggle size for better touch accessibility */
        padding: 8px;
    }

    .language-selector {
        font-size: 10px; /* Smaller font for language selector */
    }

    h2, .about-us-title, .animations-title, .articles-title, .video-title, .slideshow-group h2 {
        font-size: 18px; /* Smaller heading size for mobile */
    }

    /* Add margin-bottom specifically for slideshow frames on mobile */
    .slideshow-group {
        margin-bottom: 20px;
    }     

    .footer-content {
        padding: 10px; /* Increase padding in footer for mobile */
        font-size: 14px; /* Adjust font size */
    }
}

/* Slideshow Section */
.slideshow-container {
    position: relative;
    max-width: 80%;
    margin: auto;
    text-align: center;
    display: flex; /* Flexbox for better centering */
    justify-content: center; /* Center-align images */
}

.slideshow-image {
    width: 70%; /* Ensure image fits within frame on desktop */
    max-width: 100%; /* Prevent overflow */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Keep consistent border radius */
}

@media (max-width: 768px) {
    .slideshow-image {
        width: 100%; /* Full width on mobile */
    }
}

/* Navigation Buttons */
.prev, .next {
    position: absolute;
    top: 50%;
    color: white;
    font-weight: bold;
    font-size: 24px;
    transition: 0.6s ease;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    cursor: pointer;
    transform: translateY(-50%);
    user-select: none;
    z-index: 10;
    direction: ltr !important; /* Ensures direction doesn't change in RTL languages */
}

.prev {
    left: -35px;
}

.next {
    right: -35px;
}

/* Footer Styling */
.footer-content {
    text-align: center;
    padding: 10px;
    background-color: #009;
    color: white;
    font-weight: 700; /* Bold footer text */
}

/* Remove underline from article links */
.article-link {
    text-decoration: none; /* Remove underline */
    color: #003366; /* Ensure the color matches the desired style */
}

.article-link:hover {
    text-decoration: none; /* Keep underline removed on hover */
    color: #0056b3; /* Optional: change color on hover */
}