/* --- CSS VARIABLES (COLOR PALETTE) --- */
/* Define main colors based on your logo and brand for consistency */
:root {
    --primary-dark-blue: #0F2D52; /* Your main website background, a deep navy */
    --navbar-background: rgba(246, 243, 234, 0.85); /* UPDATED: Light with 85% opacity */
    --footer-background: rgba(246, 243, 234, 0.85); /* UPDATED: Light with 85% opacity, matches navbar */
    --accent-gold: #B8860B; /* Matches logo's gold color */
    --text-light: #E0E0E0; /* Light grey for main text content (on dark body) */
    --text-muted: #B0B0B0; /* Muted grey for secondary text (on dark body) */
    --text-dark: #0F2D52; /* Dark text color for use on light backgrounds (matches primary dark blue) */
    --transparent-dark-bg: rgba(255, 255, 255, 0.05); /* Semi-transparent background for cards/sections */
    --transparent-border: rgba(184, 134, 11, 0.3); /* Gold tint for borders (from #B8860B) */
    --hover-shadow-gold: rgba(184, 134, 11, 0.6); /* Stronger gold shadow on hover (from #B8860B) */
}

/* GLOBAL BODY & BACKGROUND */
body {
    font-family: 'Outfit', sans-serif;
    color: var(--text-light);
    /* NEW: Gradient Background with middle color closer to darker shade */
    background-image: linear-gradient(to bottom, #0F2D52 0%, #0353a4 35%, #0077b6 100%); /* Dark Blue -> Darker Mid-tone Blue -> Lighter Blue */
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

/* PARTICLES BACKGROUND */
#particles-js {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0.6;
}

/* NAVIGATION BAR */
.navbar {
    background-color: var(--navbar-background); /* Uses updated transparent variable */
    padding: 1rem 0;
    border-bottom: 1px solid var(--transparent-border);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
}

/* LOGO STYLES (NAVBAR) */
.navbar .logo {
    line-height: 1;
}

/* Main.html uses an image logo, so its specific styles remain: */
.navbar .logo img {
    height: 50px;
    width: auto;
    vertical-align: middle;
    transition: transform 0.3s ease;
    filter: none;
}

.navbar .logo a:hover img {
    transform: scale(1.05);
    filter: none;
}

/* Text logo (used on other pages) */
.navbar .logo a {
    font-size: 2rem; /* Example size for text logo */
    font-weight: 800;
    color: var(--accent-gold);
    text-decoration: none;
    transition: color 0.3s ease;
}

.navbar .logo a:hover {
    color: #fff;
}


/* NAVIGATION LINKS */
.nav-links {
    list-style: none;
    display: flex;
    gap: 2rem;
}

.nav-links li a {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    padding: 0.5rem 0;
    position: relative;
    text-decoration: none;
}

.nav-links li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 2px;
    background-color: var(--accent-gold);
    transition: width 0.3s ease-in-out;
}

.nav-links li a:hover::after {
    width: 100%;
}

/* LANGUAGE SWITCHER */
.language-switcher .lang-link {
    font-size: 1.0rem;
    color: var(--text-dark);
    border: 1px solid var(--text-dark);
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
    white-space: nowrap;
}

.language-switcher .lang-link:hover {
    color: var(--accent-gold);
    border-color: var(--accent-gold);
    background-color: rgba(184, 134, 11, 0.05); /* Gold with transparency (from #B8860B) */
}

/* FOOTER */
footer {
    text-align: center;
    padding: 1rem 2rem 3rem;
    background: var(--footer-background); /* Uses updated transparent variable */
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 0.9rem;
    margin-top: 10rem;
    color: var(--text-dark);
    /* ADDED FOR TRANSPARENCY AND BLUR EFFECT TO MATCH NAVBAR */
    backdrop-filter: blur(8px);
}

/* Footer Logo Styling (if Main.html's footer logo is used) */
.footer-logo {
    margin-bottom: 1.5rem;
    display: inline-block;
}

.footer-logo img {
    height: 140px;
    width: auto;
    opacity: 0.9;
    transition: opacity 0.3s ease;
    filter: none;
}

.footer-logo img:hover {
    opacity: 1;
    filter: none;
}

/* General footer links */
footer p {
    margin: 0.5rem 0;
    color: var(--text-dark);
}

.footer-links {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.footer-links a {
    color: var(--text-dark);
    text-decoration: none;
    margin: 0 0.8rem;
    font-weight: 600;
    transition: color 0.3s ease;
}

footer a:hover {
    color: var(--accent-gold);
}


/* --- REST OF YOUR CSS CODE (Hero, Features, CTA, Service Detail, About Us, Articles, Contact Us, Responsive) --- */

/* HERO SECTION */
.hero {
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 2rem;
    flex-shrink: 0;
    position: relative;
}

.hero h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--accent-gold);
}

.hero p {
    font-size: 1.25rem;
    max-width: 650px;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.95);
}

/* CTA BUTTON (General and Hero) */
.cta-button, .btn {
    display: inline-block;
    background-color: var(--accent-gold);
    color: var(--primary-dark-blue);
    padding: 1rem 3rem;
    font-weight: bold;
    border-radius: 2rem;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    margin-top: 1rem;
}

.btn {
    padding: 0.8rem 2.5rem;
    font-size: 1.1rem;
}

.cta-button:hover, .btn:hover {
    background-color: #fff;
    color: #000;
    box-shadow: 0 0 20px var(--hover-shadow-gold);
}

/* GENERAL SECTION STYLING */
.section {
    padding: 6rem 2rem;
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
    flex-grow: 1;
}

.section h1, .section h2 {
    font-size: 2.8rem;
    margin-bottom: 1.5rem;
    color: var(--accent-gold);
    letter-spacing: 0.5px;
    text-shadow: 0 0 8px rgba(184, 134, 11, 0.2); /* Gold shadow (from #B8860B) */
}

.section h2 {
    font-size: 2.25rem;
    margin-bottom: 2rem;
}

.section p {
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 1.75rem;
    color: var(--text-light);
    text-align: left;
}

.section-description {
    font-size: 1.2rem;
    margin-bottom: 3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    color: var(--text-light);
    text-align: center !important;
}

/* LIST STYLING */
.section ul, .section ol {
    list-style: none;
    margin-left: 0;
    padding-left: 25px;
    margin-bottom: 1.75rem;
    text-align: left;
}

.section ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.8rem;
    line-height: 1.7;
    color: var(--text-light);
}

.section ul li::before {
    content: '\2022';
    color: var(--accent-gold);
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1em;
}

.section ol {
    counter-reset: my-counter;
}

.section ol li {
    position: relative;
    padding-left: 2.2em;
    margin-bottom: 0.8rem;
    line-height: 1.7;
    color: var(--text-light);
}

.section ol li::before {
    counter-increment: my-counter;
    content: counter(my-counter) ".";
    color: var(--accent-gold);
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    font-size: 1em;
}

/* FEATURES / SERVICE BOXES */
.features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    max-width: 632px;
    margin: 0 auto;
    align-items: stretch;
}

.feature-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    width: 300px;
    flex: 0 0 300px;
    height: 100%;
}

.feature {
    background: var(--transparent-dark-bg);
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 300px;
    overflow: hidden;
    cursor: pointer;
}

.feature p {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.9);
    text-align: left;
}

.feature-link:hover .feature {
    transform: translateY(-10px);
    box-shadow: 0 8px 20px var(--hover-shadow-gold);
    border-color: var(--accent-gold);
}

.feature h3 {
    color: var(--accent-gold);
    margin-bottom: 0.75rem;
    font-size: 1.5rem;
}

.feature-link h3, .feature-link p {
    color: inherit;
}

.feature-link:hover h3 {
    color: var(--accent-gold);
}

/* CTA SECTION */
.cta-section {
    margin-top: 4rem;
    padding: 3rem 2rem;
    background: var(--transparent-dark-bg);
    border-radius: 1rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.cta-section h3 {
    color: var(--accent-gold);
    font-size: 2rem;
    margin-bottom: 1rem;
}

.cta-section p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.9);
}

/* SERVICE DETAIL PAGES */
.section.service-detail {
    text-align: left;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.section.service-detail h1 {
    font-size: 2.8rem;
    color: var(--accent-gold);
    margin-bottom: 1.5rem;
    text-align: center;
}

.section.service-detail h3 {
    font-size: 1.8rem;
    color: var(--accent-gold);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid rgba(184, 134, 11, 0.3); /* Gold border (from #B8860B) */
    padding-bottom: 0.5rem;
}

.section.service-detail p,
.section.service-detail ul {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
    text-align: left;
}

.section.service-detail ul {
    list-style-type: disc;
    margin-left: 20px;
    text-align: left;
}

.section.service-detail ul li {
    margin-bottom: 0.5rem;
}


/* ABOUT US PAGE SPECIFIC STYLES */
.about-header-section {
    /* Retained for the H1 and small-description within the first section */
    text-align: center;
    padding: 0; /* Handled by .section */
}

.about-header-section h1 {
    font-size: 3.2rem;
    color: var(--accent-gold);
    margin-bottom: 0.75rem;
    letter-spacing: 0.05em;
    text-shadow: 0 0 10px rgba(184, 134, 11, 0.3); /* Gold shadow (from #B8860B) */
}

/* Small description within the about sections */
.about-page-wrapper .small-description { /* Use .about-page-wrapper to increase specificity if needed */
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: -0.7rem;
    margin-bottom: 2.2rem;
    font-weight: 400;
    line-height: 1.6;
}

.section-divider {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent 10%, rgba(255, 255, 255, 0.1) 50%, transparent 90%);
    margin: 3rem auto; /* Adjusted to use auto for horizontal centering with max-width */
    max-width: 800px; /* Limit width of divider to match content */
}

/* --- Vision & Mission Grid --- */
.vm-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    margin-top: 2rem;
}

.vm-card {
    background: var(--transparent-dark-bg);
    border: 1px solid var(--transparent-border);
    border-radius: 10px;
    padding: 2rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    flex: 1;
    min-width: 300px;
    max-width: 48%; /* Adjusted for two columns, with gap */
    display: flex;
    flex-direction: column;
    text-align: left;
}

.vm-card h3 {
    color: var(--accent-gold);
    font-size: 1.8rem;
    margin-bottom: 1rem;
    text-align: center;
}

.vm-card p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    text-align: left;
}

/* --- Core Values Grid --- */
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.value-item {
    background: var(--transparent-dark-bg);
    border: 1px solid var(--transparent-border);
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.value-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px var(--hover-shadow-gold);
    border-color: var(--accent-gold);
}

.value-item i {
    font-size: 2.5rem;
    color: var(--accent-gold);
    margin-bottom: 1rem;
}

.value-item h3 {
    font-size: 1.4rem;
    color: var(--text-light);
    margin-bottom: 0.75rem;
}

.value-item p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    text-align: center;
}


/* ARTICLES PAGE SPECIFIC STYLES */
.articles-section {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.articles-section h1 {
    margin-bottom: 2rem;
}

.no-articles-message {
    background: var(--transparent-dark-bg);
    border: 1px solid rgba(184, 134, 11, 0.2); /* Gold border (from #B8860B) */
    border-radius: 10px;
    padding: 3rem 2rem;
    max-width: 700px;
    margin: 2rem auto;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.no-articles-message p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.5rem;
    line-height: 1.6;
    text-align: center;
}

.no-articles-message .btn {
    margin-top: 1.5rem;
}

/* Future Articles Grid Styling (Placeholder) */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 4rem;
    width: 100%;
    max-width: 1200px;
}

.article-card {
    background: var(--transparent-dark-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
}

.article-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px var(--hover-shadow-gold);
    border-color: var(--accent-gold);
}

.article-card img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 1rem;
}

.article-card h3 {
    font-size: 1.6rem;
    margin-bottom: 0.8rem;
}

.article-card h3 a {
    color: var(--accent-gold);
    text-decoration: none;
    transition: color 0.3s ease;
}

.article-card h3 a:hover {
    color: #fff;
}

.article-card .article-meta {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1rem;
}

.article-card p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1.2rem;
}

.article-card .read-more {
    display: inline-block;
    color: var(--accent-gold);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.article-card .read-more:hover {
    color: #fff;
}

/* CONTACT US PAGE SPECIFIC STYLES (Cleaned and Refined) */

/* The main container for the contact page content */
.contact-section {
    max-width: 800px; /* Adjusted max-width for a bit more space */
    margin: 4rem auto; /* Centers the section and provides vertical spacing */
    padding: 3rem; /* Increased padding inside the box */
    text-align: center;
    background-color: var(--transparent-dark-bg); /* Use a consistent transparent dark background variable */
    border-radius: 15px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.6); /* Stronger, darker shadow */
    border: 1px solid var(--transparent-border); /* Consistent gold-tinted border */
    color: var(--text-light); /* Ensure main text color is light */
    position: relative; /* For z-index to be above particles */
    z-index: 1;
}

.contact-section h2 {
    color: var(--accent-gold); /* Use the gold variable */
    margin-bottom: 0.75rem; /* More space below heading */
    font-size: 2.5rem; /* Slightly larger heading */
    text-shadow: 0 0 10px rgba(184, 134, 11, 0.3); /* Gold glow */
}

.contact-section p {
    margin-bottom: 2rem; /* More space below description */
    color: var(--text-light); /* Consistent light text color */
    line-height: 1.7;
    font-size: 1.1rem;
}

/* Form Styling */
.contact-section form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem; /* More space between form fields */
    margin-bottom: 2.5rem; /* Space between form and contact details */
}

.contact-section input,
.contact-section textarea {
    width: 100%;
    padding: 1rem; /* Increased padding for inputs */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Lighter border for contrast */
    border-radius: 8px; /* Slightly more rounded corners */
    background-color: rgba(255, 255, 255, 0.08); /* Slightly more opaque input background */
    color: var(--text-light);
    font-size: 1rem;
    font-family: 'Outfit', sans-serif; /* Ensure font is consistent */
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.contact-section input::placeholder, /* Style placeholder text */
.contact-section textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.contact-section input:focus,
.contact-section textarea:focus {
    border-color: var(--accent-gold); /* Gold border on focus */
    background-color: rgba(184, 134, 11, 0.15); /* Gold tint on focus */
    outline: none;
}

.contact-section textarea {
    min-height: 150px; /* Taller textarea */
    resize: vertical;
}

.contact-section button {
    padding: 1rem 3rem; /* Larger button */
    border: none;
    background-color: var(--accent-gold); /* Use the gold variable */
    color: var(--primary-dark-blue); /* Dark text on gold button */
    font-weight: 700; /* Bolder text */
    border-radius: 30px; /* Pill-shaped button */
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    align-self: center; /* Center the button */
    font-size: 1.15rem;
    letter-spacing: 0.5px;
}

.contact-section button:hover {
    background-color: #ffd700; /* Lighter gold on hover */
    box-shadow: 0 0 20px rgba(184, 134, 11, 0.6); /* Gold shadow on hover */
}

/* Contact Details Section (inside .contact-section) */
.contact-details {
    margin-top: 2rem; /* Space from the form */
    padding-top: 2rem; /* Internal padding */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Subtle separator line */
}

.contact-details p {
    color: var(--text-light);
    margin: 0.8rem 0; /* Space between details */
    font-size: 1.1rem;
    display: flex; /* For icon alignment */
    align-items: center;
    justify-content: center; /* Center horizontally */
}

/* Specific style for icons within contact details p (like the phone) */
.contact-details p i { /* Target actual Font Awesome icons if you add them */
    color: var(--accent-gold);
    margin-right: 0.8rem;
    font-size: 1.3rem;
}


.linkedin-link {
    display: inline-flex; /* Keeps icon and text on one line */
    align-items: center;
    justify-content: center; /* Center within its available space */
    gap: 0.7rem; /* Space between icon and text */
    color: var(--accent-gold); /* Use the gold variable */
    font-weight: 600; /* A bit lighter than button bold */
    text-decoration: none;
    font-size: 1.2rem; /* Slightly larger for prominence */
    margin-bottom: 1rem; /* Space below the link */
    transition: color 0.3s ease, transform 0.2s ease;
}

.linkedin-link:hover {
    color: #ffd700; /* Lighter gold on hover */
    transform: translateY(-3px);
}

.linkedin-link i {
    font-size: 1.8rem; /* Larger icon for LinkedIn */
}

/* Form Response Message */
#form-response {
    margin-top: 1.5rem;
    padding: 0.8rem;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
    display: none; /* Hidden by default, JavaScript will show it */
}

/* You can add success/error classes with JavaScript for this, similar to my previous example */
#form-response.success {
    background-color: #d4edda; /* Light green */
    color: #155724; /* Dark green text */
    border: 1px solid #c3e6cb;
}

#form-response.error {
    background-color: #f8d7da; /* Light red */
    color: #721c24; /* Dark red text */
    border: 1px solid #f5c6cb;
}


/* RESPONSIVE DESIGN */
/* Adjustments for screens up to 1024px wide */
@media (max-width: 1024px) {
    .section p {
        font-size: 1.1rem;
    }
    .about-page-wrapper { /* Removed, will use .section */
        margin: 2.5rem auto;
        padding: 2.5rem 0;
    }
    /* Adjusted .section padding to be consistent for all content sections */
    .section {
        padding: 4rem 2rem; /* Adjusted from 6rem */
    }
    .about-header-section,
    .about-content-section { /* These will now be handled by .section class */
        padding: 0 3.5rem 2rem 3.5rem; /* Still applies to first header for specific alignment */
    }
    .about-header-section h1 {
        font-size: 2.8rem;
    }
    /* All .section h2 will be affected by this */
    .section h2 {
        font-size: 1.8rem;
    }
    .section p {
        font-size: 1rem;
    }
    .about-page-wrapper .small-description {
        font-size: 0.9rem;
    }
    .section-divider {
        margin: 2.5rem auto; /* Adjusted to be consistent with section padding */
    }
    .no-articles-message p {
        font-size: 1.1rem;
    }
    /* Contact Page Specific Responsive Adjustments */
    .contact-section {
        padding: 2.5rem 2rem; /* Adjust padding for tablet screens */
    }
    .contact-section h2 {
        font-size: 2.2rem;
    }
    .contact-section p {
        font-size: 1.05rem;
    }
    .contact-section input,
    .contact-section textarea {
        padding: 0.9rem;
        font-size: 0.95rem;
    }
    .contact-section textarea {
        min-height: 130px;
    }
    .contact-section button {
        padding: 0.9rem 2.8rem;
        font-size: 1.1rem;
    }
    .contact-details p {
        font-size: 1.05rem;
    }
    .linkedin-link {
        font-size: 1.15rem;
    }
    .linkedin-link i {
        font-size: 1.7rem;
    }
    /* New: Responsive adjustments for new elements */
    .vm-card {
        max-width: 100%; /* Stack on smaller screens if needed, or adjust */
    }
}

/* Adjustments for screens up to 768px wide (Tablets) */
@media (max-width: 768px) {
    .nav-container {
        flex-direction: column;
        align-items: flex-start;
    }
    .nav-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        margin-top: 1rem;
    }
    .language-switcher {
        margin-left: 0;
        margin-top: 1rem;
    }
    .hero h1 {
        font-size: 2.5rem;
    }
    .hero p {
        font-size: 1.1rem;
    }
    .features {
        max-width: 100%;
    }
    .feature-link {
        width: 90%;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }
    .section.service-detail h1 {
        font-size: 2.2rem;
    }
    .section.service-detail h3 {
        font-size: 1.5rem;
    }
    .section.service-detail p,
    .section.service-detail ul,
    .section.service-detail ol li {
        font-size: 1rem;
        text-align: left;
    }
    .section.service-detail ul {
        text-align: left;
    }
    /* about-page-wrapper and about-content-section are now handled by .section */
    /* Remove redundant padding/margin here to rely on .section */
    .about-header-section,
    .about-content-section {
        padding: 0 2rem 1.5rem 2rem; /* Still applies to first header for specific alignment */
    }
    .about-header-section h1 {
        font-size: 2.4rem;
    }
    /* All .section h2 will be affected by this */
    .section h2 {
        font-size: 1.6rem;
    }
    .section p {
        font-size: 0.95rem;
    }
    .about-page-wrapper .small-description {
        font-size: 0.9rem;
    }
    .section-divider {
        margin: 2rem auto; /* Adjusted for consistency */
    }
    .cta-section h3 {
        font-size: 2.2rem;
    }
    .cta-section p {
        font-size: 1.1rem;
    }
    .section ul li, .section ol li {
        font-size: 1rem;
        padding-left: 1.2rem;
    }
    .section ol li {
        padding-left: 1.8em;
    }
    .no-articles-message {
        padding: 2rem 1.5rem;
    }
    .no-articles-message p {
        font-size: 1.1rem;
    }
    .articles-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    /* Contact Page Specific Responsive Adjustments */
    .contact-section {
        padding: 2rem 1.5rem;
        margin: 3rem auto;
    }
    .contact-section h2 {
        font-size: 2rem;
    }
    .contact-section p {
        font-size: 1rem;
    }
    .contact-section input,
    .contact-section textarea {
        padding: 0.8rem;
        font-size: 0.95rem;
    }
    .contact-section textarea {
        min-height: 120px;
    }
    .contact-section button {
        padding: 0.9rem 2.5rem;
        font-size: 1.05rem;
    }
    .contact-details p {
        font-size: 1rem;
    }
    .linkedin-link {
        font-size: 1.1rem;
    }
    .linkedin-link i {
        font-size: 1.6rem;
    }

    /* New: Responsive adjustments for new elements */
    .vm-grid {
        flex-direction: column;
    }
    .vm-card {
        max-width: 100%;
    }
    .values-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

/* Adjustments for screens up to 480px wide (Mobile phones) */
@media (max-width: 480px) {
    .navbar {
        padding: 1rem;
    }
    /* Logo text size for mobile */
    .navbar .logo a {
        font-size: 1.6rem;
    }
    .navbar .logo img {
        height: 40px;
    }
    .hero {
        padding: 0 1rem;
    }
    .section {
        padding: 3rem 1rem; /* Adjusted from 4rem */
    }
    /* about-page-wrapper is removed, relies on .section */
    /* about-content-section is removed, relies on .section */
    /* Remove redundant padding/margin here to rely on .section */
    .about-header-section,
    .about-content-section {
        padding: 0 1rem 1rem 1rem; /* Still applies to first header for specific alignment */
    }
    .about-header-section h1 {
        font-size: 1.8rem;
    }
    /* All .section h2 will be affected by this */
    .section h2 {
        font-size: 1.3rem;
    }
    .section p {
        font-size: 0.88rem;
    }
    .about-page-wrapper .small-description {
        font-size: 0.8rem;
    }
    .section-divider {
        margin: 1.5rem auto; /* Adjusted for consistency */
    }
    .cta-section h3 {
        font-size: 1.8rem;
    }
    .cta-section p {
        font-size: 1rem;
    }
    .article-card h3 {
        font-size: 1.4rem;
    }
    /* Contact Page Specific Responsive Adjustments */
    .contact-section {
        padding: 1.5rem 1rem; /* Even tighter padding for small mobiles */
        margin: 2rem auto;
    }
    .contact-section h2 {
        font-size: 1.8rem;
    }
    .contact-section p {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }
    .contact-section input,
    .contact-section textarea {
        padding: 0.6rem;
        font-size: 0.9rem;
    }
    .contact-section textarea {
        min-height: 100px;
    }
    .contact-section button {
        padding: 0.8rem 2rem;
        font-size: 1rem;
    }
    .contact-details p {
        font-size: 0.95rem;
    }
    .linkedin-link {
        font-size: 1rem;
    }
    .linkedin-link i {
        font-size: 1.4rem;
    }

    /* New: Responsive adjustments for new elements */
    .vm-card {
        padding: 1.5rem;
    }
    .vm-card h3 {
        font-size: 1.6rem;
    }
    .vm-card p {
        font-size: 0.95rem;
    }
    .values-grid {
        grid-template-columns: 1fr;
    }
    .value-item {
        padding: 1rem;
    }
    .value-item i {
        font-size: 2rem;
    }
    .value-item h3 {
        font-size: 1.2rem;
    }
    .value-item p {
        font-size: 0.9rem;
    }
}

/* RTL (Right-to-Left) Adjustments for Arabic Pages */
/* These rules will be applied when the <html> tag has dir="rtl" */
[dir="rtl"] .navbar .logo {
    /* If your logo has text, you might need to flip its position or adjust its alignment within the .logo div */
}

[dir="rtl"] .nav-links {
    /* If using flexbox 'gap', it naturally handles RTL. If using old 'margin-left', switch to 'margin-right' */
}

[dir="rtl"] .nav-links li a::after {
    left: auto;
    right: 0;
}

[dir="rtl"] .language-switcher {
    margin-left: 0;
}

[dir="rtl"] .hero {
    text-align: center;
}

[dir="rtl"] .section p,
[dir="rtl"] .section ul,
[dir="rtl"] .section ol,
[dir="rtl"] .section.service-detail p,
[dir="rtl"] .section.service-detail ul,
[dir="rtl"] .about-content-section p,
[dir="rtl"] .contact-section p, /* Added for contact section */
[dir="rtl"] .contact-details p /* Added for contact details */ {
    text-align: right;
}

[dir="rtl"] .section ul li {
    padding-left: 0;
    padding-right: 1.5rem;
}

[dir="rtl"] .section ul li::before {
    left: auto;
    right: 0;
}

[dir="rtl"] .section ol li {
    padding-left: 0;
    padding-right: 2.2em;
}

[dir="rtl"] .section ol li::before {
    left: auto;
    right: 0;
}

[dir="rtl"] .feature {
    text-align: right;
}

[dir="rtl"] .contact-details ul li {
    padding-left: 0;
    padding-right: 2.5rem;
}

[dir="rtl"] .contact-details ul li i {
    color: var(--accent-gold);
    left: auto;
    right: 0;
}

[dir="rtl"] .social-links {
    /* Assuming icons are centered with gap, this should adapt */
}

[dir="rtl"] .contact-form label {
    text-align: right;
}

[dir="rtl"] .contact-section input, /* Adjusted for contact-section form inputs */
[dir="rtl"] .contact-section textarea { /* Adjusted for contact-section form textarea */
    text-align: right;
}

/* New RTL for about page specific sections */
[dir="rtl"] .vm-card p {
    text-align: right;
}

[dir="rtl"] .value-item p {
    text-align: right;
}