/* --- Color Palette & Global Variables --- */
:root {
    /* Primary Palette: Dark, sophisticated navy/charcoal tones */
    --primary: #0a111a;        /* Deepest base color */
    --light-primary: #0c1420;  /* Slightly lighter for subtle section breaks */
    --lightest-primary: #121f30; /* Even lighter for cards and form backgrounds */

    /* Accent Colors: Gold for luxury, Teal for modern highlights, Pink for subtle flair */
    --accent-gold: #C5A47E;    /* Classic, brushed gold */
    --accent-teal: #ffe864;    /* Bright, vibrant teal - (Using the yellow/goldish color from your file) */
    --accent-pink: #FFC0CB;    /* Soft, gentle pink */

    /* Text Colors */
    --text-heading: #EAEAEA;   /* Soft off-white for main titles */
    --text-body: #a8b2d1;      /* Subtle blue-gray for paragraphs */
    --text-subtle: #8892B0;    /* Lighter gray for meta-info, placeholders */

    /* Typography */
    --font-sans: 'Raleway', sans-serif;
    --font-serif: 'Playfair Display', serif;

    /* Transitions */
    --transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); /* Elegant and smooth ease-out */

    /* Monolith Specific */
    --monolith-height: 320px;
}

/* --- General & Resets --- */
::selection { background-color: var(--accent-teal); color: var(--primary); }
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; } /* Enables smooth scrolling for anchor links */

body {
    font-family: var(--font-sans);
    overflow-x: hidden; /* Prevents horizontal scrollbar from animations */
    color: var(--text-body);
    background: var(--primary);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased; /* Improves font rendering on macOS/iOS */
    -moz-osx-font-smoothing: grayscale; /* Improves font rendering on Firefox */
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-serif);
    font-weight: 700;
    color: var(--text-heading);
    line-height: 1.3;
}

a { text-decoration: none; color: inherit; } /* Default link styling */
a:hover { color: var(--accent-gold); } /* Default link hover color */
.highlight-text-gold { color: var(--accent-gold); } /* Specific utility class */

.section {
    padding: 120px 0; /* Standard padding for all main sections */
    position: relative;
    overflow: hidden; /* Important for containing animations and preventing overflow */
}
.section-subtle-bg { background-color: var(--light-primary); } /* Background for alternating sections */

/* --- Preloader --- */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease-out 0.5s, visibility 0.8s ease-out 0.5s; /* Delay for animation */
}
#preloader.loaded { opacity: 0; visibility: hidden; }
.preloader-logo {
    font-family: var(--font-serif);
    font-size: 2.8rem;
    color: var(--accent-gold);
    font-weight: 900;
    margin-bottom: 20px;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(197, 164, 126, 0.5);
}
.preloader-logo span { color: var(--text-heading); }
.preloader-line {
    width: 0;
    height: 4px;
    background-color: var(--accent-teal);
    border-radius: 2px;
    animation: preloaderFill 2s ease-out forwards;
}
@keyframes preloaderFill {
    to { width: 180px; }
}

/* --- Navigation --- */
.navbar {
    padding: 20px 0;
    transition: var(--transition);
    box-shadow: 0 0 0 rgba(0,0,0,0); /* Initially no shadow */
}
.navbar.scrolled {
    padding: 15px 0; /* Smaller padding when scrolled */
    background: rgba(10, 17, 26, 0.95); /* More opaque when scrolled */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); /* Prominent shadow when scrolled */
    border-bottom-color: rgba(197, 164, 126, 0.2);
}
.navbar-brand {
    /* Using the logo image instead of text now */
    font-size: 1.8rem; /* Keep this size for branding space */
    letter-spacing: 0.5px;
    transition: var(--transition);
    padding: 0; /* Remove padding if img is inline-block */
    display: flex; /* Use flex to center logo image */
    align-items: center;
}
.navbar-brand .logo {
    max-height: 40px; /* Adjust based on your logo size */
    transition: transform 0.3s ease;
}
.navbar.scrolled .navbar-brand .logo {
    max-height: 35px; /* Smaller logo when scrolled */
}
.navbar-brand:hover .logo {
    transform: scale(1.05); /* Subtle effect on logo hover */
}

/* Remove spans if logo is image */
/* .navbar-brand:hover { color: var(--accent-gold); } */
/* .navbar-brand span { color: var(--accent-gold); transition: var(--transition); font-family: var(--font-sans); font-weight: 700;} */
/* .navbar-brand:hover span { color: var(--text-heading); } */


.nav-link {
    font-weight: 500;
    color: var(--text-body);
    margin: 0 18px;
    position: relative;
    transition: color 0.4s ease;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    padding: 8px 0 !important;
}
.nav-link:before { /* Elegant underline effect */
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--accent-gold);
    transition: width 0.3s ease;
}
.nav-link:hover, .nav-link.active { color: var(--text-heading); }
.nav-link:hover:before, .nav-link.active:before { width: 100%; }

.navbar-toggler { border: 1px solid var(--accent-gold); color: var(--accent-gold); font-size: 1.3rem;}
.navbar-toggler .fa-bars { color: var(--accent-gold);} /* Targeting the icon directly */

/* Language Dropdown */
.nav-item.dropdown .nav-link {
    display: flex;
    align-items: center;
}
.nav-item.dropdown .nav-link i {
    margin-right: 8px;
    font-size: 1rem;
    color: var(--text-body);
}
.nav-item.dropdown .nav-link:hover i {
     color: var(--text-heading);
}

.dropdown-menu {
    background-color: var(--lightest-primary);
    border: 1px solid rgba(197, 164, 126, 0.2);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
.dropdown-menu-dark { /* Targeting the specific dark menu class */
    background-color: var(--lightest-primary);
    border: 1px solid rgba(197, 164, 126, 0.2);
}
.dropdown-item {
    color: var(--text-body);
    transition: background-color 0.3s ease, color 0.3s ease;
    font-size: 0.9rem;
    padding: 10px 20px;
}
.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--light-primary);
    color: var(--text-heading);
}
.dropdown-item.active, .dropdown-item:active {
    background-color: var(--accent-gold) !important; /* Use important to override bootstrap active */
    color: var(--primary) !important;
    font-weight: 600;
}
.language-form {
    margin: 0;
    padding: 0;
    display: block; /* Make the form a block */
}
.language-form button.dropdown-item {
    width: 100%; /* Make the button fill the dropdown item */
    text-align: left; /* Align text left */
    border: none; /* Remove button border */
    background: none; /* Remove button background */
    cursor: pointer;
}
.language-form button.dropdown-item:hover {
    background-color: var(--light-primary);
    color: var(--text-heading);
}
/* RTL adjustment for language dropdown item text alignment */
[dir="rtl"] .language-form button.dropdown-item {
    text-align: right;
}


/* --- HERO SECTION --- */
.hero {
    height: 100vh;
    min-height: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    position: relative;
    overflow: hidden;
    padding: 60px 20px;
    text-align: center;
    background-color: var(--primary); /* Dark base color */

    /* The spotlight effect */
    --mouse-x: 50%;
    --mouse-y: 50%;
    background-image: radial-gradient(
        circle 400px at var(--mouse-x) var(--mouse-y),
        rgba(197, 164, 126, 0.15), /* Subtle gold light */
        transparent 80%
    );
    transition: background-position 0.1s ease-out;
}

.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Very subtle cross pattern, barely visible */
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNIDAgMCBMIDIwIDIwIE0gMjAgMCBMIDAgMjAiIHN0cm9rZT0icmdiYSgxOTcsIDE2NCwgMTI2LCAwLjA0KSIgc3Ryb2tlLXdpZHRoPSIxIj48L3BhdGg+Cjwvc3ZnPg==');
    background-size: 40px 40px;
    z-index: 1;
    pointer-events: none; /* Make sure it doesn't interfere with mouse events */
}

.hero > * {
    position: relative;
    z-index: 10;
}

.hero-canvas-container {
    width: 100%;
    max-width: 800px;
    height: 35vh;
    min-height: 250px;
    position: relative;
    margin-bottom: 30px;
    z-index: 10;
}

#hero-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* --- Hero Monoliths (linking to categories) --- */
.cores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 4rem 2.5rem;
    width: 100%;
    max-width: 1200px; /* Control max width of the grid */
    margin-top: 30px;
}

/* Style for the link wrapping the monolith */
.monolith-link {
    text-decoration: none; /* Remove default link underline */
    display: block; /* Make it a block element to contain the monolith */
    height: var(--monolith-height); /* Ensure link takes full height */
    position: relative; /* Allow monolith's absolute positioning within */
    color: inherit; /* Inherit text color from parent (monolith content) */
    transition: none; /* Don't transition the link itself */
}

/* Ensure existing monolith styles apply correctly when wrapped in link */
.monolith-link .monolith {
    height: 100%; /* Ensure monolith fills the link wrapper height */
    /* Existing monolith styles already handle its appearance */
}

.monolith {
    position: relative;
    perspective: 1500px;
    height: var(--monolith-height);
    cursor: pointer;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
}
.monolith.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Focus & blur effect */
.cores-grid.is-active .monolith-link .monolith { /* Target monolith inside the link */
    filter: blur(5px);
    opacity: 0.4;
    transform: scale(0.95);
    transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1);
}
.cores-grid.is-active .monolith-link.is-hovered .monolith { /* Target monolith inside the hovered link */
    filter: none;
    opacity: 1;
    transform: scale(1);
    z-index: 100;
}
/* Apply is-hovered class to the link itself */
.cores-grid.is-active .monolith-link:hover .monolith { /* Apply hover state based on link hover */
    filter: none;
    opacity: 1;
    transform: scale(1);
    z-index: 100;
}


.monolith-label {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent-gold);
    text-shadow: 0 0 12px rgba(197, 164, 126, 0.7);
    opacity: 1;
    transition: opacity 0.5s ease;
    pointer-events: none;
    padding: 1rem;
    text-align: center;
}
.monolith-link:hover .monolith-label { /* Trigger label fade on link hover */
    opacity: 0;
}
/* Also hide label if monolith is hovered (for JS driven state) */
.monolith.is-hovered .monolith-label {
     opacity: 0;
}


.monolith::before { /* Ground particle */
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 150%;
    height: 50px;
    transform: translateX(-50%);
    /* background: radial-gradient(ellipse, rgba(197, 164, 126, 0.15) 0%, transparent 70%); */
    border-radius: 50%;
    animation: particle-float 5s ease-in-out infinite;
}
@keyframes particle-float {
    50% { transform: translateX(-50%) translateY(10px) scale(0.95); opacity: 0.7; }
}

.monolith-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: monolith-float 7s ease-in-out infinite;
}
.monolith.is-hovered .monolith-inner {
    animation-play-state: paused;
    transform: scale(1.05);
}
/* Apply animation pause on link hover as well */
.monolith-link:hover .monolith-inner {
     animation-play-state: paused;
     transform: scale(1.05);
}
@keyframes monolith-float {
    50% { transform: translateY(-15px) rotateX(5deg) rotateY(-5deg); }
}

.shell {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50.5%;
    transform-style: preserve-3d;
    transition: transform 1.2s cubic-bezier(0.8, 0, 0.2, 1);
    background-image:
        radial-gradient(ellipse at 80% 20%, rgba(255, 255, 255, 0.05), transparent 40%),
        linear-gradient(150deg, var(--primary) 0%, var(--lightest-primary) 100%);
    border: 1px solid rgba(197, 164, 126, 0.1);
    border-radius: 5px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}
.shell-left { left: 0; }
.shell-right { right: 0; }

.monolith.is-hovered .shell-left { transform: translateX(-110%) translateZ(-80px) rotateY(15deg); }
.monolith.is-hovered .shell-right { transform: translateX(110%) translateZ(-80px) rotateY(-15deg); }
/* Apply shell movement on link hover as well */
.monolith-link:hover .shell-left { transform: translateX(-110%) translateZ(-80px) rotateY(15deg); }
.monolith-link:hover .shell-right { transform: translateX(110%) translateZ(-80px) rotateY(-15deg); }


.crystal-core {
    position: absolute;
    inset: 20px;
    background: var(--accent-teal);
    /* box-shadow: 0 0 10px var(--accent-teal), 0 0 20px var(--accent-teal), 0 0 40px var(--accent-teal); */
    filter: blur(12px);
    border-radius: 3px;
    animation: core-pulse 4s infinite ease-in-out;
    opacity: 0.7;
}
@keyframes core-pulse {
    50% { transform: scale(1.05); }
}

.monolith-content {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.8s ease 0.4s, transform 0.8s ease 0.4s;
    pointer-events: none;
}
.monolith.is-hovered .monolith-content {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}
/* Apply content fade-in on link hover as well */
.monolith-link:hover .monolith-content {
     opacity: 1;
     transform: scale(1);
     pointer-events: auto;
}

.monolith-content h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--primary); /* Dark color for high contrast */
    text-shadow: none; /* Remove shadow to improve clarity on glow */
}
.monolith-content p {
    font-size: 0.95rem;
    color: var(--light-primary); /* Slightly lighter dark color */
    line-height: 1.5;
    font-weight: 500;
}
/* --- END OF HERO SECTION --- */

/* --- Section Heading --- */
.section-heading {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
}
.section-heading .tagline {
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    color: var(--accent-teal);
    margin-bottom: 10px;
    display: block;
    font-weight: 600;
}
.section-heading h2 {
    font-size: clamp(2.5rem, 5vw, 3.8rem);
    color: var(--text-heading);
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}
.section-heading p.subtitle {
    color: var(--text-body);
    max-width: 750px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.8;
}
.section-heading .divider {
    width: 90px;
    height: 4px;
    background: linear-gradient(to right, var(--accent-gold), var(--accent-teal));
    margin: 30px auto 0;
    border-radius: 2px;
    opacity: 0; /* Initial state for GSAP */
    transform: scaleX(0); /* Initial state for GSAP */
    transform-origin: center;
}

/* --- About Section (Combined Ethos & About) --- */
.about-section { background-color: var(--primary); }
.about-content { display: flex; align-items: center; }
.about-image-wrapper {
    position: relative;
    padding: 20px;
    background: var(--lightest-primary);
    border-radius: 12px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(197, 164, 126, 0.1);
    transition: var(--transition);
}
.about-image-wrapper:hover {
    transform: translateY(-8px);
    box-shadow: 0 35px 80px rgba(0, 0, 0, 0.5);
    border-color: var(--accent-gold);
}
.about-image-wrapper img {
    border-radius: 8px;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.95); /* Slightly desaturate */
    transition: filter 0.6s ease;
}
.about-image-wrapper:hover img {
    filter: brightness(1); /* Full brightness on hover */
}
.about-text h3 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin-bottom: 25px;
    color: var(--text-heading);
}
.about-text h3 span { color: var(--accent-gold); font-style: italic; }
.about-text p {
    margin-bottom: 20px;
    font-size: 1.05rem;
    color: var(--text-body);
    line-height: 1.9;
}
.values-list { list-style: none; padding-left: 0; margin-top: 30px;}
.values-list li {
    font-size: 1.05rem;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    color: var(--text-heading);
    line-height: 1.5;
}
.values-list li i {
    color: var(--accent-teal);
    margin-right: 18px;
    font-size: 1.4rem;
    width: 30px;
    text-align: center;
    flex-shrink: 0;
}
/* RTL adjustment for list icons */
[dir="rtl"] .values-list li i {
    margin-right: 0;
    margin-left: 18px;
}


/* Stats in About Section */
.stats-grid {
    margin-top: 60px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 25px;
}
.stat-item-about {
    background: var(--lightest-primary);
    padding: 30px 20px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid rgba(197, 164, 126, 0.1);
    transition: var(--transition);
}
.stat-item-about:hover {
    transform: translateY(-8px);
    border-color: var(--accent-gold);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.stat-item-about .number {
    font-family: var(--font-sans);
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    font-weight: 700;
    color: var(--accent-gold);
    margin-bottom: 8px;
    line-height: 1;
}
.stat-item-about .label {
    font-size: 0.9rem;
    color: var(--text-body);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 500;
}

/* --- Services Section (New Card Structure) --- */
/* Replaces old .service-card-elegant styles */
.service-card {
    background: var(--lightest-primary);
    border-radius: 12px;
    padding: 35px;
    text-align: center;
    border: 1px solid rgba(197, 164, 126, 0.1);
    transition: var(--transition);
    height: 100%;
    position: relative; /* Needed for potential future elements */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.service-card:hover {
    transform: translateY(-12px); /* Lift card on hover */
    border-color: var(--accent-gold);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
.service-icon {
    width: 70px; /* Slightly smaller icon */
    height: 70px;
    margin: 0 auto 25px auto;
    border-radius: 50%;
    background: rgba(255, 232, 100, 0.15); /* Use Teal/Yellow accent for icons */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem; /* Slightly smaller font size */
    color: var(--accent-teal);
    transition: var(--transition);
    box-shadow: 0 0 15px rgba(255, 232, 100, 0.3);
}
.service-card:hover .service-icon {
     background: var(--accent-teal); /* Invert colors on hover */
     color: var(--primary);
     transform: scale(1.1) rotate(5deg); /* Rotate slightly */
     box-shadow: 0 0 25px rgba(255, 232, 100, 0.6);
}
.service-title {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: var(--text-heading);
}
.service-card .lead-text { /* Styling for the description/lead text */
    font-size: 1rem;
    color: var(--text-body);
    margin-bottom: 25px;
    line-height: 1.6;
}
.service-link {
    font-family: var(--font-sans);
    color: var(--accent-gold); /* Use Gold for the link */
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 0.9rem;
    transition: var(--transition);
    display: inline-block;
}
.service-link:hover {
    color: var(--accent-teal); /* Hover color */
    letter-spacing: 1.5px; /* Subtle letter spacing change */
}
.service-link i { margin-left: 8px; transition: transform 0.3s ease; }
/* RTL adjustment for service link arrow */
[dir="rtl"] .service-link i {
     margin-left: 0;
     margin-right: 8px;
     transform: scaleX(-1); /* Flip the arrow horizontally */
}
.service-link:hover i { transform: translateX(5px); }
[dir="rtl"] .service-link:hover i { transform: translateX(-5px) scaleX(-1); } /* Flip the arrow and move left in RTL */


/* --- Featured Work (Projects) --- */
.filter-buttons { margin-bottom: 40px; text-align: center; }
.filter-btn {
    background: transparent;
    border: 1px solid rgba(197, 164, 126, 0.2);
    color: var(--text-body);
    padding: 10px 28px;
    margin: 5px;
    border-radius: 50px;
    font-weight: 500;
    font-size: 0.95rem;
    transition: var(--transition);
    letter-spacing: 1px;
    cursor: pointer;
}
.filter-btn:hover, .filter-btn.active {
    background: var(--accent-gold);
    color: var(--primary);
    border-color: var(--accent-gold);
    box-shadow: 0 5px 15px rgba(197, 164, 126, 0.3);
}

/* Style for the link wrapping the project card */
.project-card-link {
    text-decoration: none; /* Remove default link underline */
    display: block; /* Make it a block element */
    height: 100%; /* Ensure link fills the column height */
    color: inherit; /* Inherit color */
}
/* Ensure existing .project-card styles work within the link */
.project-card-link .project-card {
    height: 100%; /* Ensure card fills the link */
    /* Existing styles for .project-card, .project-img, .project-overlay-content etc. apply here */
}

.project-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4);
    aspect-ratio: 4/3; /* Maintain aspect ratio for project images */
    transition: box-shadow 0.5s ease;
    display: flex; /* Use flexbox to position overlay */
    flex-direction: column;
    justify-content: flex-end;
}
.project-card:hover {
     box-shadow: 0 25px 65px rgba(0, 0, 0, 0.6);
}
.project-img {
    position: absolute; /* Position image absolutely behind overlay */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1), filter 0.8s ease;
    z-index: 1;
}
.project-card:hover .project-img {
    transform: scale(1.08);
    filter: brightness(0.6) saturate(1.1); /* Darken and slightly saturate on hover */
}
.project-overlay-content {
    position: relative; /* Position relative to project-card (which is flex container) */
    width: 100%;
    padding: 30px;
    background: linear-gradient(to top, rgba(10, 17, 26, 0.98) 0%, transparent 100%);
    color: white;
    transform: translateY(100%); /* Initially hidden below */
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.6s ease;
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    z-index: 2; /* Ensure overlay is above image */
}
/* RTL adjustment for overlay content alignment */
[dir="rtl"] .project-overlay-content {
    align-items: flex-end; /* Align items right in RTL */
}

.project-card:hover .project-overlay-content {
    transform: translateY(0); /* Slide up on hover */
    opacity: 1;
}
.project-category {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent-teal);
    margin-bottom: 5px;
    display: block;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
}
.project-overlay-content h3 {
    font-size: 1.9rem;
    margin-bottom: 10px;
    color: var(--text-heading);
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
}
/* Removed old .project-view-btn styles */
/* .project-view-btn { ... } */


/* Style for the new .project-view-button within the overlay */
.project-view-button {
    display: inline-block; /* Or flex, depending on desired layout */
    margin-top: 10px; /* Space above the button */
    padding: 8px 15px;
    border: 1px solid var(--accent-gold); /* Gold border */
    border-radius: 50px; /* Pill shape */
    color: var(--accent-gold); /* Gold text */
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    transition: var(--transition);
    background: transparent;
    opacity: 0; /* Initially hidden for animation */
    transform: translateY(15px); /* Initial position for animation */
    /* Inherits transition from parent .project-overlay-content children */
}
.project-card:hover .project-view-button {
     color: var(--primary); /* Dark text on hover */
     background: var(--accent-gold); /* Gold background on hover */
     box-shadow: 0 4px 10px rgba(197, 164, 126, 0.3);
     transform: translateY(0); /* Animate to final position */
     opacity: 1; /* Fade in */
     transition: opacity 0.4s ease 0.5s, transform 0.4s ease 0.5s, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; /* Staggered transition */
}
.project-view-button span {
    display: flex;
    align-items: center;
}
.project-view-button i {
    margin-left: 8px;
    transition: transform 0.3s ease;
}
/* RTL adjustment for project button arrow */
[dir="rtl"] .project-view-button i {
    margin-left: 0;
    margin-right: 8px;
    transform: scaleX(-1); /* Flip the arrow horizontally */
}
.project-card:hover .project-view-button i {
     transform: translateX(5px); /* Move arrow on hover */
}
[dir="rtl"] .project-card:hover .project-view-button i {
     transform: translateX(-5px) scaleX(-1); /* Flip the arrow and move left in RTL */
}


/* Animate content within overlay on project card hover */
.project-card:hover .project-category,
.project-card:hover .project-overlay-content h3,
/* Target the button itself */
.project-card:hover .project-view-button {
    opacity: 1;
    transform: translateY(0);
}

/* Ensure the GSAP animations are correctly applied to the wrapper */
.project-item-wrapper.gsap-scale-in {
     opacity:0; /* Initial state for GSAP */
     transform: scale(0.8); /* Initial state for GSAP */
}


/* --- Team Section --- */
.team-member {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    transition: var(--transition);
    height: 100%;
}
.team-member:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
}
.team-img {
    position: relative;
    height: 380px;
    overflow: hidden;
}
.team-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease, filter 0.5s ease;
}
.team-member:hover .team-img img {
    transform: scale(1.08);
    filter: brightness(0.7); /* Darken image on hover */
}
.team-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(10, 17, 26, 0.95) 0%, transparent 70%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    opacity: 0; /* Initially hidden */
    transition: var(--transition);
}
/* RTL adjustment for team overlay content alignment */
[dir="rtl"] .team-overlay {
    align-items: flex-end; /* Align items right in RTL */
}

.team-member:hover .team-overlay { opacity: 1; }
.team-info h4 {
    font-size: 1.6rem;
    margin-bottom: 5px;
    color: var(--text-heading);
    opacity: 0; transform: translateY(20px); transition: var(--transition) 0.2s;
}
.team-info p {
    color: var(--accent-gold);
    margin-bottom: 15px;
    font-size: 0.95rem;
    letter-spacing: 1px;
    opacity: 0; transform: translateY(20px); transition: var(--transition) 0.3s;
}
.team-social {
    display: flex;
    margin-top: 15px;
    opacity: 0; transform: translateY(20px); transition: var(--transition) 0.4s;
}
/* RTL adjustment for team social icon margin */
[dir="rtl"] .team-social a {
    margin-right: 0;
    margin-left: 12px; /* Use left margin in RTL */
}
/* Last icon has no margin */
.team-social a:last-child {
    margin-right: 0;
    margin-left: 0; /* Ensure no margin on last item */
}
[dir="rtl"] .team-social a:last-child {
     margin-left: 0;
     margin-right: 0;
}


.team-member:hover .team-info h4,
.team-member:hover .team-info p,
.team-member:hover .team-social {
    opacity: 1; transform: translateY(0);
}
.team-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background: rgba(197, 164, 126, 0.2);
    border-radius: 50%;
    margin-right: 12px;
    color: var(--accent-gold);
    transition: var(--transition);
    font-size: 1.2rem;
    border: 1px solid rgba(197, 164, 126, 0.3);
}
.team-social a:hover {
    background: var(--accent-gold);
    color: var(--primary);
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 5px 15px rgba(197, 164, 126, 0.4);
}

/* --- Contact Section --- */
/* Keep the contact form wrapper */
.contact-section .contact-form-wrapper {
    background: var(--lightest-primary);
    padding: 50px;
    border-radius: 12px;
    border: 1px solid rgba(197, 164, 126, 0.1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    transition: var(--transition);
}
.contact-section .contact-form-wrapper:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
    border-color: var(--accent-gold);
}
.form-control-custom {
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(197, 164, 126, 0.25);
    border-radius: 0;
    padding: 15px 0;
    font-size: 1.05rem;
    color: var(--text-heading);
    transition: border-color 0.3s ease;
    margin-bottom: 30px; /* Consistent spacing */
}
.form-control-custom:focus {
    box-shadow: none;
    border-bottom-color: var(--accent-gold);
    background: var(--accent-teal);
}
.form-control-custom::placeholder { color: var(--text-subtle); opacity: 0.7; }
.contact-submit-btn {
    position: relative;
    background-color: var(--accent-gold);
    color: var(--primary);
    border: none;
    padding: 0.8rem 2rem;
    font-weight: 500;
    transition: var(--transition);
}

.contact-submit-btn:hover {
    background-color: var(--accent-teal);
    transform: translateY(-2px);
}

.contact-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.loading-text {
    color: var(--primary);
}

/* Toast Notifications */
.toast {
    background: var(--lightest-primary);
    border: 1px solid var(--accent-gold);
    color: var(--text-body);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    min-width: 300px;
}

.toast.success {
    border-color: #198754;
    background: linear-gradient(135deg, rgba(25, 135, 84, 0.1) 0%, var(--lightest-primary) 100%);
}

.toast.error {
    border-color: #dc3545;
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, var(--lightest-primary) 100%);
}

.toast.info {
    border-color: #0dcaf0;
    background: linear-gradient(135deg, rgba(13, 202, 240, 0.1) 0%, var(--lightest-primary) 100%);
}

.toast.warning {
    border-color: #ffc107;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, var(--lightest-primary) 100%);
}

.toast.success .toast-header {
    background-color: rgba(25, 135, 84, 0.15);
    border-bottom: 1px solid rgba(25, 135, 84, 0.3);
    color: #198754;
    border-radius: 8px 8px 0 0;
}

.toast.error .toast-header {
    background-color: rgba(220, 53, 69, 0.15);
    border-bottom: 1px solid rgba(220, 53, 69, 0.3);
    color: #dc3545;
    border-radius: 8px 8px 0 0;
}

.toast.info .toast-header {
    background-color: rgba(13, 202, 240, 0.15);
    border-bottom: 1px solid rgba(13, 202, 240, 0.3);
    color: #0dcaf0;
    border-radius: 8px 8px 0 0;
}

.toast.warning .toast-header {
    background-color: rgba(255, 193, 7, 0.15);
    border-bottom: 1px solid rgba(255, 193, 7, 0.3);
    color: #ffc107;
    border-radius: 8px 8px 0 0;
}

.toast-header {
    background-color: var(--lightest-primary);
    color: var(--text-heading);
    border-radius: 8px 8px 0 0;
    padding: 0.75rem 1rem;
}

.toast-body {
    color: var(--text-body);
    padding: 1rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.toast-container {
    z-index: 9999;
}

/* New Contact Info Card Structure */
/* Replaces old .contact-info-item styles */
.contact-info-card {
    background: var(--lightest-primary);
    padding: 50px;
    border-radius: 12px;
    border: 1px solid rgba(197, 164, 126, 0.1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    transition: var(--transition);
    height: 100%; /* Ensure it fills the column height */
}
.contact-info-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
    border-color: var(--accent-gold);
}
.contact-info-card h3 {
     font-family: var(--font-serif);
     font-size: 2rem;
     color: var(--accent-gold); /* Use accent for the card title */
     margin-bottom: 30px;
}

.contact-info-card .info-item {
    display: flex;
    align-items: flex-start; /* Align icon/text to the top */
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px dashed rgba(197, 164, 126, 0.1); /* Subtle separator */
}
.contact-info-card .info-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.contact-info-card .info-item i {
    font-size: 1.8rem;
    color: var(--accent-teal); /* Teal/Yellow for icons */
    margin-right: 20px;
    width: 35px; /* Fixed width for icon */
    text-align: center;
    flex-shrink: 0; /* Prevent icon from shrinking */
    transition: color 0.3s ease;
}
/* RTL adjustment for contact info icon margin */
[dir="rtl"] .contact-info-card .info-item i {
     margin-right: 0;
     margin-left: 20px;
}

.contact-info-card .info-item:hover i {
    color: var(--accent-gold); /* Gold on hover */
}
.contact-info-card .info-item strong {
    display: block;
    font-size: 1rem;
    color: var(--text-subtle); /* Subtle color for labels */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
    font-weight: 600;
}
.contact-info-card .info-item p,
.contact-info-card .info-item a {
    font-size: 1.1rem;
    color: var(--text-heading); /* Use heading color for info values */
    margin-bottom: 0; /* Remove default paragraph margin */
    text-decoration: none;
    transition: color 0.3s ease;
}
.contact-info-card .info-item a:hover {
    color: var(--accent-gold); /* Gold on hover */
}


/* --- Footer --- */
.footer {
    background: #020c1b; /* A very dark navy for footer base */
    color: var(--text-body);
    padding: 80px 0 0;
    position: relative;
}
.footer-top-border { /* Decorative line at the top of the footer */
    height: 5px;
    background: linear-gradient(90deg, var(--accent-gold) 0%, var(--accent-teal) 100%);
    margin-bottom: 80px;
}
.footer-brand {
    font-family: var(--font-serif);
    font-weight: 900;
    color: var(--accent-gold);
    font-size: 2.2rem;
    margin-bottom: 25px;
    letter-spacing: 1px;
    display: inline-block;
}
.footer-brand span { color: var(--text-heading); }
.footer-tagline { font-size: 0.95rem; margin-bottom: 30px; line-height: 1.8; }

/* Footer Heading (adjust for RTL) */
.footer-heading {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 25px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 10px;
}
.footer-heading::after { /* Underline for footer headings */
    content: '';
    position: absolute;
    bottom: 0;
    left: 0; /* Default LTR position */
    width: 40px;
    height: 3px;
    background: var(--accent-teal);
    border-radius: 1px;
    transition: left 0.3s ease, right 0.3s ease; /* Animate position change */
}
/* RTL adjustment for footer heading underline */
[dir="rtl"] .footer-heading::after {
    left: auto; /* Reset LTR position */
    right: 0; /* Set RTL position */
}


/* Footer Links (adjust for RTL) */
.footer-links { list-style: none; padding-left: 0; }
.footer-links li { margin-bottom: 14px; }
.footer-links a {
    color: var(--text-body);
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease, padding-right 0.3s ease; /* Include right padding transition */
    position: relative;
    font-size: 0.95rem;
    display: inline-block;
}
.footer-links a:hover { color: var(--accent-gold); padding-left: 10px; }
/* RTL adjustment for footer link hover padding */
[dir="rtl"] .footer-links a:hover {
    padding-left: 0; /* Reset LTR padding */
    padding-right: 10px; /* Add padding on the right */
}

.footer-links a::before { /* Animated arrow pseudo-element */
     content: ""; /* Default empty content */
     font-family: "Font Awesome 6 Free"; font-weight: 900;
     position: absolute;
     color: var(--accent-gold);
     opacity: 0;
     transition: opacity 0.3s ease, transform 0.3s ease;
     top: 50%; /* Vertically center */
     transform: translateY(-50%); /* Adjust for vertical centering */
}

.footer-links a:hover::before {
    opacity: 1;
    transform: translateY(-50%) translateX(-15px); /* Move left in LTR */
    content: "\f054"; /* Font Awesome right arrow (default LTR) */
    left: 0; /* Position relative to link start */
}
/* RTL adjustment for footer link hover arrow */
[dir="rtl"] .footer-links a:hover::before {
    content: "\f053"; /* Font Awesome left arrow */
    left: auto; /* Reset LTR position */
    right: 0; /* Position relative to link end */
    transform: translateY(-50%) translateX(15px); /* Move right in RTL */
}


/* Social Icons (adjust for RTL margin) */
.social-icons-footer {
    display: flex;
    margin-top: 15px;
    /* Keep existing justify-content: center; in responsive block */
}
.social-icons-footer a {
    color: var(--text-body);
    font-size: 1.4rem;
    margin-right: 20px; /* Default LTR margin */
    transition: color 0.3s ease, transform 0.3s ease;
}
/* RTL adjustment for social icon margin */
[dir="rtl"] .social-icons-footer a {
    margin-right: 0; /* Reset LTR margin */
    margin-left: 20px; /* Use left margin in RTL */
}
/* Remove margin from the last icon */
.social-icons-footer a:last-child {
    margin-right: 0;
    margin-left: 0; /* Ensure no margin on last item */
}
[dir="rtl"] .social-icons-footer a:last-child {
     margin-left: 0;
     margin-right: 0;
}

.social-icons-footer a:hover { color: var(--accent-gold); transform: translateY(-3px); }


/* Newsletter Form (adjust for RTL border-radius and padding) */
.newsletter-form .input-group {
     /* Add max-width for centering on smaller screens if needed */
     /* max-width: 350px; */
     /* margin: 0 auto; */
}
.newsletter-form .form-control {
    background-color: var(--lightest-primary);
    border-color: rgba(197, 164, 126, 0.2);
    color: var(--text-heading);
    border-radius: 50px 0 0 50px; /* Default LTR radius */
    padding-left: 20px; /* Default LTR padding */
    padding-right: 15px; /* Standard right padding */
    font-size: 0.95rem;
    transition: border-color 0.3s ease;
}
.newsletter-form .form-control:focus {
     box-shadow: none;
     border-color: var(--accent-gold);
     background-color: var(--lightest-primary); /* Keep background on focus */
}
/* RTL adjustment for newsletter input */
[dir="rtl"] .newsletter-form .form-control {
    border-radius: 0 50px 50px 0; /* Swap radii */
    padding-left: 15px; /* Standard left padding */
    padding-right: 20px; /* Use right padding in RTL */
}

.newsletter-form .form-control::placeholder { color: var(--text-subtle); opacity: 0.7; }
.newsletter-form .btn {
    background-color: var(--accent-gold);
    color: var(--primary);
    border-color: var(--accent-gold);
    border-radius: 0 50px 50px 0; /* Default LTR radius */
    padding: 0.6rem 1.3rem;
    font-size: 1rem;
    transition: var(--transition);
    display: flex; /* Use flex to center icon */
    align-items: center;
    justify-content: center;
}
/* RTL adjustment for newsletter button */
[dir="rtl"] .newsletter-form .btn {
    border-radius: 50px 0 0 50px; /* Swap radii */
}
.newsletter-form .btn:hover {
    background-color: var(--accent-teal);
    border-color: var(--accent-teal);
    transform: scale(1.05);
}
.newsletter-form .btn i {
     /* Icon styling if needed */
}


.copyright {
    text-align: center;
    padding: 35px 0;
    margin-top: 60px;
    border-top: 1px solid var(--lightest-primary);
    font-size: 0.9rem;
    color: var(--text-subtle);
}
.copyright .heart-icon { color: var(--accent-pink); }


/* --- Back to top Button --- */
.back-to-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px; /* Default LTR position */
    width: 55px;
    height: 55px;
    background: rgba(197, 164, 126, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-gold);
    font-size: 1.3rem;
    transition: var(--transition);
    z-index: 1000;
    opacity: 0; visibility: hidden;
    transform: translateY(20px) scale(0.9);
    border: 1px solid var(--accent-gold);
}
.back-to-top-btn.visible {
    opacity: 1; visibility: visible;
    transform: translateY(0) scale(1);
}
.back-to-top-btn:hover {
    background: var(--accent-gold);
    color: var(--primary);
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 8px 20px rgba(197, 164, 126, 0.3);
}
/* RTL adjustment for back to top button position */
[dir="rtl"] .back-to-top-btn {
    right: auto; /* Reset LTR position */
    left: 30px; /* Set RTL position */
}


/* --- Cost Calculator Sticky Icon --- */
.cost-calculator-trigger {
    position: fixed;
    bottom: 30px;
    right: 100px; /* Default LTR position */
    width: 60px;
    height: 60px;
    background-color: var(--accent-gold);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    z-index: 1000;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(197, 164, 126, 0.4);
    transition: var(--transition);
}
.cost-calculator-trigger:hover {
    transform: scale(1.1) rotate(10deg);
    box-shadow: 0 15px 35px rgba(197, 164, 126, 0.5);
}
/* RTL adjustment for cost calculator trigger position */
[dir="rtl"] .cost-calculator-trigger {
    right: auto; /* Reset LTR position */
    left: 100px; /* Set RTL position */
}


/* --- Cost Calculator Modal --- */
/* Re-styled to fit the dark theme better */
.modal-content {
    background-color: var(--lightest-primary);
    border: 1px solid rgba(197, 164, 126, 0.2);
    color: var(--text-body);
}
.modal-header {
    border-bottom: 1px solid rgba(197, 164, 126, 0.1);
    padding: 1.5rem; /* Added consistent padding */
}
.modal-header .modal-title { /* Style modal title */
    color: var(--text-heading);
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 700;
}
.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.8; /* Subtle opacity */
    transition: opacity 0.3s ease;
}
.modal-header .btn-close:hover {
    opacity: 1;
}
.modal-body {
    padding: 1.5rem; /* Added consistent padding */
}
/* If you ever use a modal-footer, style it */
.modal-footer {
     border-top: 1px solid rgba(197, 164, 126, 0.1);
     padding: 1.5rem; /* Added consistent padding */
}


/* Styling for form elements inside the modal */
.modal-body .form-label { /* Target labels specifically in the modal body */
    color: var(--text-heading); /* Label color */
    font-size: 0.95rem;
    font-weight: 600;
    display: inline-block; /* Ensures margin-bottom works */
    margin-bottom: 8px; /* Space below the label */
    letter-spacing: 0.5px;
}

.form-control-modal {
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(197, 164, 126, 0.25);
    border-radius: 0;
    padding: 12px 0;
    font-size: 1rem;
    color: var(--text-heading);
    transition: border-color 0.3s ease;
    width: 100%;
    margin-bottom: 1rem; /* Added margin */
    /* Remove default placeholder opacity if needed, but yours is already good */
    /* &::placeholder { color: var(--text-subtle); opacity: 0.7; } */
}
.form-control-modal:focus {
    box-shadow: none;
    border-bottom-color: var(--accent-gold);
    background: transparent;
}


.form-select-modal {
    display: block; /* Ensure it takes full width */
    width: 100%;
    padding: 10px 12px; /* Adjust padding */
    font-size: 1rem;
    font-weight: 400; /* Match form-control weight */
    line-height: 1.5;
    color: var(--text-heading); /* Use heading color for selected value */
    background-color: var(--lightest-primary); /* Match card background */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a8b2d1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); /* Default arrow color (text-body) */
    background-repeat: no-repeat;
    background-position: right 0.75rem center; /* Default LTR position */
    background-size: 16px 12px;
    border: 1px solid rgba(197, 164, 126, 0.25); /* Subtle border */
    border-radius: 0.25rem; /* Small radius */
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-position 0.3s ease; /* Add transition for position */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; /* Remove default system appearance */
    margin-bottom: 1rem; /* Added margin */
}
.form-select-modal:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 0.25rem rgba(197, 164, 126, 0.25);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23C5A47E' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); /* Arrow color on focus (accent-gold) */
}
/* RTL adjustment for select arrow position */
[dir="rtl"] .form-select-modal {
    background-position: left 0.75rem center; /* Position on the left in RTL */
}
.form-select-modal option {
    background-color: var(--lightest-primary); /* Background for options */
    color: var(--text-heading); /* Text color for options */
}


.modal-btn {
    background: var(--accent-gold);
    border: 2px solid var(--accent-gold);
    color: var(--primary);
    padding: 12px 30px;
    font-weight: 600;
    border-radius: 50px;
    transition: var(--transition);
    font-size: 1rem; /* Adjust font size */
    text-transform: uppercase; /* Uppercase text */
    letter-spacing: 1px; /* Add letter spacing */
}
.modal-btn:hover {
     background: transparent;
     color: var(--accent-gold);
}

/* Result section */
#cost-result {
    margin-top: 2rem;
    padding: 1.5rem;
    border: 1px dashed var(--accent-teal);
    border-radius: 8px;
    background-color: rgba(255, 232, 100, 0.05); /* Use Teal/Yellow accent color */
    text-align: center;
    color: var(--text-body); /* Keep body text color for description */
    font-size: 1rem;
}
#cost-result-value {
    font-size: 2.5rem;
    font-family: var(--font-serif);
    color: var(--accent-teal); /* Use Teal/Yellow for value */
    font-weight: 700;
    margin-top: 0.5rem;
}

/* --- intl-tel-input Styling --- */
.iti {
    width: 100%;
    display: block !important; /* Ensure it takes full width in modals/forms */
    margin-bottom: 1rem; /* Ensure consistent spacing below it */
}
.iti__country-list {
    background-color: var(--light-primary);
    border: 1px solid var(--accent-gold);
    font-family: var(--font-sans); /* Use sans-serif for country list */
    color: var(--text-body);
}
.iti__country {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 0.9rem;
    transition: background-color 0.2s ease;
}
.iti__country.iti__highlight {
    background-color: rgba(197, 164, 126, 0.2); /* Gold semi-transparent background */
}
.iti__dial-code {
    color: var(--text-subtle); /* Subtle color for dial code */
    font-weight: 400;
}

/* intl-tel-input styles */
.iti { width: 100%; }
.iti__flag { background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.21/img/flags.png"); }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag { background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.21/img/flags@2x.png"); }
}
.iti__selected-flag {
  padding: 0 6px 0 8px;
  border-radius: 3px 0 0 3px;
}
.iti__arrow {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #555;
  margin-left: 6px;
}
.iti__country-list {
  position: absolute;
  z-index: 999;
  list-style: none;
  text-align: left;
  padding: 0;
  margin: 0 0 0 -1px;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
  background-color: white;
  border: 1px solid #CCC;
  white-space: nowrap;
  max-height: 200px;
  overflow-y: scroll;
  width: 100%;
}
.iti__country {
  padding: 5px 10px;
  cursor: pointer;
}
.iti__country:hover {
  background-color: #f5f5f5;
}
.iti__country.iti__highlight {
  background-color: #f5f5f5;
}
.iti__country-name, .iti__dial-code {
  color: #333;
}

/* Style the input part within the intl-tel-input wrapper */
/* Apply form-control-modal styles to the actual input */
.iti input.form-control-modal { /* Target the input inside .iti with the custom class */
     padding-left: 10px !important; /* Adjust padding to not overlap flag */
     border-bottom: 2px solid rgba(197, 164, 126, 0.25); /* Match form control border */
     transition: border-color 0.3s ease;
     margin-bottom: 0 !important; /* Remove margin from input itself */
     height: auto; /* Allow height to adjust with padding */
     padding-top: 12px !important; /* Match input padding-top */
     padding-bottom: 12px !important; /* Match input padding-bottom */
}
.iti__selected-flag {
     padding: 0 8px; /* Adjust padding */
     background-color: transparent; /* Match form control background */
     border-bottom: 2px solid rgba(197, 164, 126, 0.25); /* Match form control border */
     transition: border-color 0.3s ease;
     display: flex; /* Use flex to vertically align flag and arrow */
     align-items: center;
     height: 100%; /* Take full height of parent */
     cursor: pointer; /* Indicate clickable flag */
}
.iti input.form-control-modal:focus + .iti__flag-container .iti__selected-flag {
    border-bottom-color: var(--accent-gold); /* Highlight border on input focus */
}
.iti__selected-flag:hover {
     background-color: transparent; /* No background change on flag hover */
}
.iti__selected-flag .iti__arrow {
    color: var(--text-subtle); /* Arrow color */
    margin-left: 6px; /* Space between flag and arrow */
    transition: color 0.3s ease;
}
[dir="rtl"] .iti__selected-flag .iti__arrow {
    margin-left: 0;
    margin-right: 6px;
}
.iti__selected-flag:focus-within .iti__arrow { /* Highlight arrow on flag focus */
    color: var(--accent-gold); /* Arrow color on focus */
}
.iti__flag-container {
     height: auto; /* Allow height to adjust */
     top: auto; bottom: 0; /* Position at the bottom of the input */
     padding-bottom: 12px; /* Match input padding-bottom */
     left: 0; /* Default LTR position */
}
/* RTL adjustment for flag container position */
[dir="rtl"] .iti__flag-container {
     left: auto; /* Reset LTR */
     right: 0; /* Set RTL */
}
/* RTL adjustment for input padding to clear flag */
[dir="rtl"] .iti input.form-control-modal {
    padding-left: 15px !important; /* Standard left padding */
    padding-right: 10px !important; /* Adjust padding to not overlap flag */
}


/* --- GSAP Initial Hidden States --- */
.gsap-fade-in { opacity: 0; }
.gsap-fade-in-up { opacity: 0; transform: translateY(40px); }
.gsap-scale-in { opacity:0; transform: scale(0.8); }

/* --- Project Detail Page --- */
/* --- Project Hero Section --- */
.project-hero {
    height: 65vh;
    min-height: 500px;
    background-size: cover;
    background-position: center center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}
.project-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(10, 17, 26, 0.7); /* Dark overlay for text readability */
}
.project-hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 900px;
}
.project-hero h1 {
    font-size: clamp(3rem, 7vw, 5.5rem);
    color: var(--text-heading);
    font-weight: 900;
    text-shadow: 0 5px 20px rgba(0,0,0,0.5);
    margin-bottom: 20px;
}
.project-hero .lead-text {
    font-size: clamp(1rem, 2.5vw, 1.35rem);
    color: var(--text-body);
    font-weight: 300;
}

/* Breadcrumb Navigation */
.breadcrumb-nav {
    padding: 20px 0;
    background-color: var(--light-primary);
    border-bottom: 1px solid var(--lightest-primary);
}
.breadcrumb {
    margin: 0;
    padding: 0;
}
.breadcrumb-item a {
    color: var(--accent-gold);
    text-decoration: none;
    transition: color 0.3s ease;
}
.breadcrumb-item a:hover {
    color: var(--text-heading);
}
.breadcrumb-item.active {
    color: var(--text-body);
}
.breadcrumb-item+.breadcrumb-item::before {
    color: var(--text-subtle);
}

/* Project Details Section */
.project-description h3 {
    font-size: 2.5rem;
    margin-bottom: 25px;
    color: var(--text-heading);
    position: relative;
    padding-bottom: 15px;
}
.project-description h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0; /* Default LTR position */
    width: 60px;
    height: 3px;
    background: var(--accent-gold);
    transition: left 0.3s ease, right 0.3s ease; /* Animate position change */
}
/* RTL adjustment for project description heading underline */
[dir="rtl"] .project-description h3::after {
    left: auto;
    right: 0;
}

.project-description p {
    font-size: 1.1rem;
    line-height: 1.9;
}
.project-meta-card {
    background: var(--lightest-primary);
    padding: 35px;
    border-radius: 12px;
    border: 1px solid rgba(197, 164, 126, 0.1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    transition: var(--transition);
    position: sticky; /* Make it sticky as user scrolls */
    top: 100px; /* Distance from the top */
}
.project-meta-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
    border-color: var(--accent-gold);
}
.meta-item {
    display: flex;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed rgba(197, 164, 126, 0.1); /* Subtle separator */
    font-size: 1rem;
    /* Default LTR icon/text alignment */
    text-align: left;
}
.meta-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.meta-item i {
    color: var(--accent-teal);
    font-size: 1.3rem;
    margin-right: 18px; /* Default LTR margin */
    width: 25px;
    text-align: center;
    flex-shrink: 0;
}
/* RTL adjustment for meta item icon margin */
[dir="rtl"] .meta-item i {
     margin-right: 0;
     margin-left: 18px;
}

.meta-item-content strong {
    display: block;
    color: var(--text-heading);
    margin-bottom: 2px;
    font-weight: 600;
    font-size: 0.95rem; /* Slightly smaller label */
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.meta-item-content span {
    color: var(--text-body);
    font-size: 1.05rem; /* Slightly larger value */
}

/* Project Gallery */
.project-gallery .section-heading {
     margin-bottom: 40px; /* Reduce margin bottom slightly */
}
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 0; /* Use g-4 gap from row instead of margin */
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transition: var(--transition);
    height: 100%; /* Ensure items fill their grid space */
}
.gallery-item:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
    display: block; /* Remove extra space below img */
}
.gallery-item:hover img {
    transform: scale(1.1);
}
/* Optional: Give large images a specific aspect ratio */
.project-gallery .col-12 .gallery-item {
     aspect-ratio: 16 / 9; /* Widescreen aspect ratio */
}
/* Optional: Give smaller images a different aspect ratio */
.project-gallery .col-md-6 .gallery-item {
     aspect-ratio: 4 / 3; /* Standard photo aspect ratio */
}


/* Gallery Modal (Lightbox) */
/* Use existing modal styles from Cost Calculator, refine for gallery */
/* These styles are already included in your provided CSS,
   I'm adjusting them slightly to ensure they apply correctly
   to the gallery modal */
#galleryModal .modal-content { background-color: var(--lightest-primary); border: 1px solid rgba(197, 164, 126, 0.2); }
#galleryModal .modal-header {
    border-bottom: none;
    padding: 1rem 1rem 0 1rem;
    position: absolute; /* Position header over the image */
    top: 15px;
    right: 15px; /* Default LTR position */
    z-index: 1060; /* Ensure it's above the image */
    /* Ensure no space is taken by the header */
    width: auto;
}
/* RTL adjustment for gallery modal header position */
[dir="rtl"] #galleryModal .modal-header {
    right: auto; /* Reset LTR */
    left: 15px; /* Set RTL */
}

#galleryModal .modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); opacity: 0.8; transition: opacity 0.3s ease; }
#galleryModal .modal-header .btn-close:hover { opacity: 1; }
#galleryModal .modal-body { padding: 1rem; } /* Adjust padding as needed */
#galleryModal .modal-body img {
    display: block; /* Remove extra space below image */
    margin: 0 auto; /* Center image if it doesn't fill width */
    max-width: 100%; /* Ensure image doesn't exceed modal width */
    max-height: 85vh; /* Limit max height to prevent overflow */
    width: auto; /* Allow width to adjust based on max height */
    object-fit: contain; /* Ensure whole image is visible */
}


/* Architect's Note */
/* This section is not in your home.html or category_projects.html,
   but the styles were in your provided CSS. I'll keep them
   in case they are used on the project detail page or elsewhere. */
.architect-note {
    background-color: var(--lightest-primary);
    padding: 60px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(197, 164, 126, 0.1);
}
.architect-note .quote-icon {
    font-size: 3rem;
    color: var(--accent-teal);
    opacity: 0.3;
    margin-bottom: 20px;
}
.architect-note blockquote {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.4rem;
    line-height: 1.8;
    color: var(--text-heading);
    margin-bottom: 25px;
}
.architect-note cite {
    display: block;
    font-style: normal;
}
.architect-note .name {
    color: var(--text-heading);
    font-weight: 600;
    font-size:  1.1rem;
}
.architect-note .title {
    color: var(--accent-gold);
    font-size: 0.9rem;
    letter-spacing: 1px;
}

/* Project Navigation CTA */
/* These styles are not in your home.html or category_projects.html,
   but were in your provided CSS. I'll keep them in case they are
   used on the project detail page or elsewhere. */
.project-navigation-cta {
    padding-top: 80px;
}
.project-nav-link {
    font-size: 1.3rem;
    color: var(--text-body);
    transition: color 0.3s ease;
    display: flex; /* Use flex to align text and arrow */
    align-items: center;
}
.project-nav-link:hover {
    color: var(--accent-gold);
}
.project-nav-link span {
    font-family: var(--font-serif);
    display: block;
    font-size: 1.8rem;
    color: var(--text-heading);
}
.project-nav-link i {
    margin-left: 15px; /* Space between text and arrow */
    transition: transform 0.3s ease;
}
/* RTL adjustment for nav arrow */
[dir="rtl"] .project-nav-link i {
     margin-left: 0;
     margin-right: 15px;
     transform: scaleX(-1); /* Flip the arrow horizontally */
}

.project-nav-link:hover i {
    transform: translateX(-5px); /* Move left in LTR */
}
/* RTL adjustment for nav arrow hover */
[dir="rtl"] .project-nav-link.next:hover i {
    transform: translateX(-5px) scaleX(-1); /* Flip and move left in RTL */
}
/* Correct hover for prev arrow in LTR */
.project-nav-link:not(.next):hover i {
     transform: translateX(-5px);
}
/* Correct hover for prev arrow in RTL */
[dir="rtl"] .project-nav-link:not(.next):hover i {
     transform: translateX(5px) scaleX(-1); /* Flip and move right in RTL */
}


.view-all-projects-btn {
    background: var(--accent-gold);
    border: 2px solid var(--accent-gold);
    color: var(--primary);
    padding: 16px 45px;
    font-weight: 600;
    border-radius: 50px;
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.9rem;
    display: inline-block;
}
.view-all-projects-btn:hover {
    background: transparent;
    color: var(--accent-gold);
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(197, 164, 126, 0.3);
}



/* --- Category Projects Page --- */

/* Category Header (Similar to Project Hero, but maybe shorter) */
.category-header {
    height: 40vh; /* Shorter than main hero/project hero */
    min-height: 300px;
    background-color: var(--primary); /* Default dark background */
    /* Optional: Add a subtle pattern or gradient */
    background-image: radial-gradient(
        circle 400px at 50% 50%,
        rgba(255, 232, 100, 0.08), /* Subtle teal/yellow light */
        transparent 70%
    );
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 100px 20px 40px; /* Adjust padding */
}
.category-header::before { /* Subtle overlay */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(10, 17, 26, 0.8) 0%, rgba(10, 17, 26, 0.4) 60%, transparent 100%);
    z-index: 1;
}
.category-header > div { /* Target container for z-index */
     position: relative;
     z-index: 2;
     color: white;
     max-width: 800px;
     margin: 0 auto;
}
.category-header h1 {
    font-family: var(--font-serif);
    font-size: clamp(2.8rem, 5vw, 4rem);
    font-weight: 900;
    color: var(--text-heading);
    margin-bottom: 15px;
    letter-spacing: 0.8px;
}
.category-header .lead-text {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    color: var(--text-body);
    line-height: 1.8;
    max-width: 700px;
    margin: 0 auto;
}

/* Projects Grid Section - No new styles needed for the grid itself,
   as it reuses .project-grid and .project-card styles from home.css */
/* Note: project-item-wrapper and child styles are defined in the Home Page section */


/* Pagination Styling */
.pagination {
    --bs-pagination-color: var(--text-body);
    --bs-pagination-bg: transparent;
    --bs-pagination-border-width: 1px;
    --bs-pagination-border-color: rgba(197, 164, 126, 0.2);
    --bs-pagination-border-radius: 5px;
    --bs-pagination-hover-color: var(--text-heading);
    --bs-pagination-hover-bg: rgba(197, 164, 126, 0.08);
    --bs-pagination-hover-border-color: var(--accent-gold);
    --bs-pagination-focus-color: var(--text-heading);
    --bs-pagination-focus-bg: rgba(197, 164, 126, 0.1);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(197, 164, 126, 0.25);
    --bs-pagination-active-color: var(--primary);
    --bs-pagination-active-bg: var(--accent-gold);
    --bs-pagination-active-border-color: var(--accent-gold);
    --bs-pagination-disabled-color: var(--text-subtle);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-border-color: rgba(197, 164, 126, 0.1);
}

.pagination .page-item .page-link {
    font-family: var(--font-sans);
    font-weight: 500;
    padding: 10px 15px;
    transition: var(--transition);
}
.pagination .page-item:first-child .page-link { border-top-left-radius: var(--bs-pagination-border-radius); border-bottom-left-radius: var(--bs-pagination-border-radius); }
.pagination .page-item:last-child .page-link { border-top-right-radius: var(--bs-pagination-border-radius); border-bottom-right-radius: var(--bs-pagination-border-radius); }
/* RTL adjustment for pagination item border radius */
[dir="rtl"] .pagination .page-item:first-child .page-link {
    border-top-left-radius: 0; border-bottom-left-radius: 0;
    border-top-right-radius: var(--bs-pagination-border-radius); border-bottom-right-radius: var(--bs-pagination-border-radius);
}
[dir="rtl"] .pagination .page-item:last-child .page-link {
    border-top-right-radius: 0; border-bottom-right-radius: 0;
    border-top-left-radius: var(--bs-pagination-border-radius); border-bottom-left-radius: var(--bs-pagination-border-radius);
}


/* --- Responsive Adjustments --- */
/* Existing media queries adjusted to account for new/modified styles */

@media (max-width: 991px) {
    .section:not(.hero) { padding: 90px 0; }
    .section-heading { margin-bottom: 60px; }

    .hero-canvas-container { height: 35vh; min-height: 250px; max-width: 600px; }
    .cores-grid { grid-template-columns: repeat(2, 1fr); gap: 3.5rem 2rem; }

    .about-content { flex-direction: column; }
    .about-image-wrapper { margin-bottom: 40px; width: 90%; max-width: 500px; }
    .about-text { text-align: center; padding: 0 15px; }
    .values-list { text-align: left; max-width: 400px; margin: 30px auto 0; }
    .stats-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
    .stat-item-about { padding: 20px 10px; }
    .stat-item-about .number { font-size: 2.5rem; }

    /* Adjust project card aspect ratio */
    .project-card { aspect-ratio: 1/1; } /* Square aspect ratio on tablets/mobiles */
    .project-gallery .col-md-6 .gallery-item { /* Also square the gallery items on md */
        aspect-ratio: 1/1;
    }

    .team-member { margin-bottom: 30px; }

     /* New contact info card adjustments */
     .contact-info-card {
        padding: 40px;
        margin-bottom: 40px; /* Add space below card on smaller screens */
     }


    .footer-top-border { margin-bottom: 50px;}
    /* Footer columns stack below md (i.e., on sm and xs).
       Bootstrap's text-start and text-center handle alignment.
       The .col-md-6 rule below 991px overrides text alignment
       explicitly for these columns, centering them. */
    .footer .col-md-6 { text-align: center; margin-bottom: 40px;}
    .social-icons-footer { justify-content: center; }
    /* Social icons margin already handled by RTL adjustments */
    /* .social-icons-footer a { margin: 0 10px;} */
    /* Footer links are now centered as inline-block */
    .footer-links { display: inline-block; text-align: left; } /* Centers the list block */
    /* Footer heading underline is centered below 991px */
    .footer-heading::after {
         left: 50%;
         right: auto; /* Ensure right is auto when centering */
         transform: translateX(-50%);
    }
    /* Newsletter form is centered below 991px */
    .newsletter-form { max-width: 350px; margin: 0 auto; }

    /* Project Detail Page adjustments */
    .project-meta-card {
        position: static; /* Remove sticky on tablets/mobiles */
        top: auto;
        margin-top: 40px; /* Add space below description */
    }
    .project-description h3 {
         font-size: 2rem; /* Adjust heading size */
    }
    .project-meta-card .meta-item i {
         font-size: 1.5rem;
         width: 28px;
         margin-right: 15px;
    }
    /* RTL adjustment for meta item icon margin */
    [dir="rtl"] .project-meta-card .meta-item i {
         margin-right: 0;
         margin-left: 15px;
    }
     .project-meta-card .meta-item-content strong {
         font-size: 0.9rem;
     }
     .project-meta-card .meta-item-content span {
          font-size: 1rem;
     }
}
@media (max-width: 767px) { /* Mobile specific adjustments */
    .section:not(.hero) { padding: 60px 0; }

    :root { --monolith-height: 280px; }

    .navbar-collapse {
        background: rgba(10, 17, 26, 0.95);
        backdrop-filter: blur(10px);
        padding: 20px;
        border-radius: 10px;
        margin-top: 15px;
    }

    .hero {
        justify-content: flex-start; /* Align content to the top */
        padding-top: 120px; /* Push content below the fixed navbar */
        padding-bottom: 60px;
        height: auto; /* Let content height be natural */
        min-height: 100vh; /* Ensure it at least fills the screen */
    }

    .hero-canvas-container { height: 30vh; min-height: 200px; max-width: 500px; margin-bottom: 20px; }
    .monolith-label { font-size: 1.3rem; }
    .monolith-content h3 { font-size: 1.2rem; }
    .monolith-content p { font-size: 0.9rem; }

    .section-heading h2 { font-size: 2.8rem; }
    .section-heading p.subtitle { font-size: 1rem; }
    .filter-buttons { display: flex; flex-direction: column; align-items: center;}
    .filter-btn { width: 90%; max-width: 250px; margin: 5px 0;}

    /* Adjust project card aspect ratio back to 4/3 or similar if desired on smaller mobile */
    .project-card { aspect-ratio: 4/3; }
    /* Gallery items on mobile should perhaps be taller too */
     .project-gallery .col-md-6 .gallery-item {
        aspect-ratio: 4/3;
    }


    .project-overlay-content h3 { font-size: 1.5rem; }

    .contact-section .contact-form-wrapper { padding: 30px; }

    /* New contact info card adjustments */
    .contact-info-card {
        padding: 30px;
    }
    .contact-info-card .info-item {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
    .contact-info-card .info-item i {
        font-size: 1.6rem;
        width: 30px;
        margin-right: 15px;
    }
    /* RTL adjustment for contact info icon margin */
    [dir="rtl"] .contact-info-card .info-item i {
         margin-right: 0;
         margin-left: 15px;
    }

    .contact-info-card .info-item strong {
        font-size: 0.95rem;
    }
    .contact-info-card .info-item p,
    .contact-info-card .info-item a {
         font-size: 1rem;
    }

    /* Footer adjustments below 767px (sm) */
    /* Columns are already stacked and centered by the >991px rule */


    /* Project Detail Page adjustments */
    .project-description h3 {
         font-size: 1.8rem;
         margin-bottom: 20px;
         padding-bottom: 10px;
    }
    .project-description h3::after {
        width: 40px;
    }
    .project-description p {
        font-size: 1rem;
    }
    .project-meta-card {
        padding: 30px;
    }
    .project-meta-card .meta-item i {
         font-size: 1.4rem;
         width: 25px;
         margin-right: 12px;
    }
    /* RTL adjustment for meta item icon margin */
    [dir="rtl"] .project-meta-card .meta-item i {
         margin-right: 0;
         margin-left: 12px;
    }

    .project-hero h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
    .project-hero .lead-text { font-size: 1rem; }
    #galleryModal .modal-body img { max-height: 70vh; }

     /* Category Page adjustments */
    .category-header {
        height: auto; /* Adjust height on mobile */
        min-height: 250px;
        padding: 80px 15px 30px;
    }
    .category-header h1 { font-size: 2.5rem; }
    .category-header .lead-text { font-size: 1rem; }

    /* Adjust Cost Calculator trigger position if needed due to other elements */
     .cost-calculator-trigger {
         right: 20px;
         bottom: 20px;
         width: 55px;
         height: 55px;
         font-size: 1.5rem;
         box-shadow: 0 8px 20px rgba(197, 164, 126, 0.3);
     }
     .back-to-top-btn {
        right: 90px; /* Move back-to-top to avoid overlap */
        bottom: 20px;
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
     }
     /* RTL adjustment for trigger positions */
     [dir="rtl"] .cost-calculator-trigger {
        right: auto; left: 20px;
     }
     [dir="rtl"] .back-to-top-btn {
        right: auto; left: 90px;
     }
}
@media (max-width: 576px) { /* Small mobile adjustments */
     :root { --monolith-height: 250px; }
     .navbar-brand { font-size: 1.5rem; }
     /* Adjust logo size on very small screens */
     .navbar-brand .logo {
         max-height: 35px;
     }
     .navbar.scrolled .navbar-brand .logo {
         max-height: 30px;
     }
     .nav-link { margin: 0 auto; padding: 10px 0 !important; width: fit-content; } /* Center nav items in mobile menu */
     .hero {
        padding-top: 100px; /* Override for very small screens */
        padding-bottom: 50px;
        padding-left: 15px;
        padding-right: 15px;
     }
     .hero-canvas-container { height: 25vh; min-height: 150px; max-width: 300px; margin-bottom: 20px;}
     .cores-grid { grid-template-columns: 1fr; gap: 3rem 1rem; }
     .monolith-label { font-size: 1.2rem; }
     .monolith-content { padding: 1.5rem; }

     .about-image-wrapper { width: 100%; }

     /* Footer adjustments below 576px (xs) */
     /* Columns are already stacked and centered by the >991px rule */

     /* Adjust Cost Calculator & Back to Top positions on smallest screens */
     .cost-calculator-trigger {
         right: 15px;
         bottom: 15px;
         width: 50px;
         height: 50px;
         font-size: 1.4rem;
         box-shadow: 0 8px 20px rgba(197, 164, 126, 0.3);
     }
      .back-to-top-btn {
        right: 75px; /* Move back-to-top to avoid overlap */
        bottom: 15px;
        width: 45px;
        height: 45px;
        font-size: 1rem;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
     }
     /* RTL adjustment for trigger positions */
     [dir="rtl"] .cost-calculator-trigger {
        right: auto; left: 15px;
     }
     [dir="rtl"] .back-to-top-btn {
        right: auto; left: 75px;
     }
}