/* style.css */

body {
    font-family: 'Inter', sans-serif;
    background-color: #f3f4f6; /* Light gray background */
}

/* Custom styles for active navigation link */
.nav-link.active {
    background-color: #2563eb; /* Tailwind blue-700 */
    color: #ffffff; /* Tailwind white */
}

.section-content {
    display: none; /* Hide all sections by default */
}

.section-content.active {
    display: block; /* Show active section */
}

/* Styles for the image carousel */
.carousel-container {
    position: relative;
    width: 100%;
    max-width: 800px; /* Max width for the carousel */
    margin: 0 auto;
    overflow: hidden;
    border-radius: 0.75rem; /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
}

.carousel-image {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.5s ease-in-out; /* Smooth transition for images */
}

.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.6); /* Slightly more opaque background */
    color: white;
    border: none;
    padding: 1rem 1.25rem; /* Increased padding for larger buttons */
    cursor: pointer;
    font-size: 1.8rem; /* Increased font size for arrows */
    border-radius: 0.5rem; /* rounded-md */
    transition: background-color 0.3s ease;
    user-select: none; /* Prevent text selection */
    z-index: 10; /* Ensure buttons are above the image */
}

.carousel-button:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Darker on hover */
}

.carousel-button.left {
    left: 1rem;
}

.carousel-button.right {
    right: 1rem;
}

/* RTL specific styles */
html[dir="rtl"] body {
    text-align: right;
}

html[dir="rtl"] .carousel-button.left {
    right: 1rem; /* Swap left/right positioning for RTL */
    left: auto;
}

html[dir="rtl"] .carousel-button.right {
    left: 1rem; /* Swap left/right positioning for RTL */
    right: auto;
}

/* Adjust navigation for RTL if needed, though flexbox often handles this well */
html[dir="rtl"] nav ul {
    flex-direction: row-reverse; /* Reverse order of nav items */
}

html[dir="rtl"] nav ul li {
    margin-left: 0;
    margin-right: 1rem; /* Adjust spacing for RTL */
}

html[dir="rtl"] .language-switcher {
    margin-right: 0; /* Remove default right margin */
    margin-left: 1rem; /* Add left margin for RTL */
}

/* Adjust form labels for RTL */
html[dir="rtl"] label {
    text-align: right;
}

/* Adjust text alignment for content sections in RTL */
html[dir="rtl"] .section-content h2,
html[dir="rtl"] .section-content p {
    text-align: right;
}

/* Adjust service cards for RTL if needed, Tailwind's grid/flex should adapt */
html[dir="rtl"] .grid {
    /* Tailwind's grid and flexbox are generally direction-agnostic,
       but if specific items need reversing, you'd add classes like:
       flex-row-reverse for flex containers
       or adjust grid-auto-flow if using implicit grid placement
    */
}