/* ============================================================
   KARTULI NEWS DESIGN SYSTEM — FONT REGISTRATION
   ============================================================ */
@font-face {
    font-family: 'BPG Nino Mtavruli';
    src: url('../fonts/bpg_nino_mtavruli_normal.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* =================================================================== */
/* COMPLETE REDESIGN FOR CHECK-IN TRAVEL (7-PART)          */
/* AUTHOR: GEMINI (FOR MATEUS)                           */
/* */
/* This file is meticulously crafted to be complete and    */
/* reflect all design requirements.                        */
/* =================================================================== */
/* PART 1/7: FOUNDATION - VARIABLES & RESETS               */
/* =================================================================== */

/* --- 1. ROOT VARIABLES (THE DNA OF THE DESIGN) --- */
:root {
    /* 1.1. Color Palette */
    --primary-color: #b40000;      /* Main brand color from the logo */
    --secondary-color: #e0544e;    /* Darker shade for hover/active states */
    --accent-color: #b40000;       /* Red for important highlights */
    
    --heading-color: #1a202c;      /* Near-black for sharp, high-contrast headings */
    --text-color: #4a5568;         /* Softer, elegant gray for body text */
    --subtle-text-color: #718096;   /* Lighter gray for secondary text */
    
    --background-color: #ffffff;   /* Pure white background */
    --light-bg-color: #f7fafc;     /* Light gray for alternating sections */
    --dark-bg-color: #1a202c;       /* Dark background, matches heading color */
    
    --border-color: #e2e8f0;       /* Standard border color */

    /* 1.2. Typography */
    --font-primary: 'FiraGO', 'Helvetica', 'Arial', sans-serif;
    --font-headings: 'BPG Nino Mtavruli', 'FiraGO', sans-serif;
    --base-font-size: 16px;
    --line-height-base: 1.7;
    --line-height-heading: 1.3;

    /* 1.3. Layout & Effects */
    --container-width: 1240px;
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --transition-fast: all 0.2s ease-in-out;
    --transition-medium: all 0.3s ease-in-out;

    /* ============================================================
       KARTULI NEWS DESIGN SYSTEM TOKENS
       ============================================================ */
    --color-primary: #b40000;
    --color-primary-hover: #9a0000;
    --color-primary-active: #7a0000;
    --color-secondary: #e0544e;
    --color-red-600: #c90000;

    --font-body: 'Inter', 'FiraGO', 'Noto Sans Georgian', sans-serif;
    --font-heading: 'BPG Nino Mtavruli', 'Noto Serif Georgian', serif;

    --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
    --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem;
    --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem;

    --space-section: 6.25rem;
    --navbar-height: 70px;
    --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px;

    --shadow-xl: 0 25px 50px -12px rgba(0,0,0,0.25);
    --transition-slow: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    --bg-page: #fff; --bg-section: #f7fafc; --bg-dark: #1a202c; --bg-card: #fff;
    --fg-heading: #1a202c; --fg-body: #4a5568; --fg-subtle: #718096; --fg-muted: #a0aec0;
    --border-default: #e2e8f0;
}


/* --- 2. GLOBAL RESET & BASE STYLES --- */

/* A more modern reset approach */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape mode */
}

body {
    font-family: var(--font-primary);
    font-size: var(--base-font-size);
    line-height: var(--line-height-base);
    color: var(--text-color);
    background-color: var(--background-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Base styles for images and other elements */
img, video, svg {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
/* =================================================================== */
/* PART 2/7: TYPOGRAPHY & BUTTONS                          */
/* =================================================================== */

/* --- 3. TYPOGRAPHY HIERARCHY & TEXT STYLES --- */

/* General heading styles */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headings);
    color: var(--heading-color);
    font-weight: 700;
    line-height: var(--line-height-heading);
    letter-spacing: -0.5px; /* Adds elegance to Georgian fonts */
    margin-top: 0;
    margin-bottom: 1.25rem;
}

/* Fluid font sizes for responsiveness */
h1, .h1 { font-size: clamp(2.4rem, 5vw, 3.25rem); }
h2, .h2 { font-size: clamp(2rem, 4vw, 2.5rem); }
h3, .h3 { font-size: clamp(1.5rem, 3vw, 1.75rem); }
h4, .h4 { font-size: clamp(1.2rem, 2.5vw, 1.25rem); }
h5, .h5 { font-size: 1.1rem; }
h6, .h6 { font-size: 1rem; }

/* Paragraph and links */
p {
    margin-bottom: 1rem;
    max-width: 75ch; /* Improves readability by limiting line length */
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover {
    color: var(--secondary-color);
    text-decoration: none; /* No underline on hover for a cleaner look */
}

/* Other text elements */
strong, b {
    font-weight: 600;
    color: var(--heading-color);
}

em, i {
    font-style: italic;
}

blockquote {
    margin: 1.5rem 0;
    padding: 1.5rem;
    background-color: var(--light-bg-color);
    border-left: 4px solid var(--primary-color);
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
}

blockquote p {
    margin-bottom: 0;
    font-size: 1.1rem;
    font-style: italic;
    color: var(--heading-color);
}


/* --- 4. BUTTONS --- */

/* Base button style */
.btn {
    display: inline-block;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 14px 32px;
    border-radius: var(--border-radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition-medium);
    user-select: none; /* Prevent text selection on click */
    white-space: nowrap; /* Prevent button text from wrapping */
}

/* Primary Button (Main Call-to-Action) */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* Outline Button */
.btn-outline-primary {
    border: 2px solid var(--border-color);
    color: var(--heading-color);
    background: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

/* Accent Button (for special actions, uses red) */
.btn-accent {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
}

.btn-accent:hover,
.btn-accent:focus {
    background-color: #9a0000; /* Darker red */
    border-color: #9a0000;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -5px rgba(180, 0, 0, 0.4);
}

/* Button sizing */
.btn-lg {
    padding: 18px 40px;
    font-size: 1rem;
}

.btn-sm {
    padding: 10px 20px;
    font-size: 0.8rem;
}
/* =================================================================== */
/* PART 3/7: LAYOUT & GENERIC COMPONENTS                   */
/* =================================================================== */

/* --- 5. LAYOUT STRUCTURE --- */

/* Main container for centering content */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin-right: auto;
    margin-left: auto;
    padding-right: 20px;
    padding-left: 20px;
}

/* Base class for all major page sections */
.section {
    padding: 100px 0;
    position: relative;
    overflow: hidden; /* Prevents unwanted horizontal scroll from animations */
}

/* Modifier for sections with a light gray background */
.section.bg-light {
    background-color: var(--light-bg-color);
}

/* Standardized style for section titles */
.section-title {
    text-align: center;
    margin-bottom: 60px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* The small, uppercase text above the main section heading */
.section-title span {
    display: block;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

/* Optional descriptive paragraph within the section title block */
.section-title p {
    font-size: 1.1rem;
    color: var(--text-color);
    line-height: 1.6;
}


main {
    /* padding-top removed — navbar is sticky, not fixed */
}

/* --- 6. GENERIC CARD COMPONENT --- */

/* Base card style used for tours, employees, etc. */
.card {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    transition: var(--transition-medium);
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
}

/* Elegant hover effect for all cards */
.card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.card-img-top {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-bottom: 1px solid var(--border-color);
}

.card-body {
    padding: 25px 30px;
    flex-grow: 1; /* Allows body to take up available space */
    display: flex;
    flex-direction: column;
}

.card-title {
    font-size: 1.25rem;
    margin-bottom: 10px;
}

.card-text,
.card p {
    flex-grow: 1; /* Pushes footer content down */
    margin-bottom: 1.5rem;
}

.card-footer {
    padding: 20px 30px;
    background-color: transparent;
    border-top: 1px solid var(--border-color);
    margin-top: auto; /* Pushes footer to the absolute bottom of the card */
}


/* --- 7. GENERIC FORM STYLING --- */

.form-group {
    margin-bottom: 1.5rem;
}

.form-control {
    display: block;
    width: 100%;
    padding: 14px 20px;
    font-size: 1rem;
    font-family: var(--font-primary);
    font-weight: 400;
    line-height: 1.5;
    color: var(--heading-color);
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #d2d6dc; /* Slightly darker border for forms */
    border-radius: var(--border-radius-md);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-control::placeholder {
    color: var(--subtle-text-color);
    opacity: 1;
}

.form-control:focus {
    color: var(--heading-color);
    background-color: #fff;
    border-color: var(--primary-color);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(180, 0, 0, 0.2);
}

textarea.form-control {
    min-height: 150px;
    resize: vertical;
}
/* =================================================================== */
/* PART 4/7: HEADER & FOOTER                               */
/* =================================================================== */

/* --- 8. HEADER & NAVIGATION --- */
.navbar {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: var(--transition-medium);
    border-bottom: 1px solid transparent;
}

/* Style for the navbar when the page is scrolled */
.navbar.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--shadow-md);
    padding: 10px 0;
    border-bottom-color: var(--border-color);
}

.navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
    margin-right: 2rem;
}

.navbar-brand img {
    height: 45px;
    transition: var(--transition-fast);
}

.navbar-brand:hover img {
    transform: scale(1.05);
}

.navbar-nav {
    gap: 10px; /* Space between nav links */
}

.nav-link {
    color: var(--heading-color) !important;
    font-weight: 500;
    padding: 10px 16px !important;
    position: relative;
    border-radius: var(--border-radius-md);
}

.nav-link:hover {
    color: var(--primary-color) !important;
    background-color: rgba(180, 0, 0, 0.06);
}

/* Elegant underline effect for active/hovered links */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.nav-link.active::after,
.nav-link:hover::after {
    width: 25px;
}

.nav-link.active {
    color: var(--primary-color) !important;
    background-color: rgba(180, 0, 0, 0.06);
    border-radius: var(--border-radius-md);
}

/* Mobile menu hamburger icon */
.navbar-toggler {
    border: none;
    font-size: 1.5rem;
    color: var(--heading-color);
    padding: 5px 10px;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(180, 0, 0, 0.2);
    outline: none;
}

/* Language switcher styles */
.language-switcher {
    display: flex;
    align-items: center;
    margin-left: 15px;
    padding-left: 15px;
    border-left: 1px solid var(--border-color);
}

.language-switcher .nav-link {
    padding: 5px 12px !important;
    text-align: center;
}

.language-switcher .nav-link.active {
    background: rgba(180, 0, 0, 0.06);
    color: var(--primary-color) !important;
    font-weight: 700;
}
.language-switcher .nav-link.active::after {
    width: 0; /* No underline for active language selector */
}


/* --- 9. FOOTER --- */
.footer {
    background: var(--dark-bg-color);
    color: #a0aec0; /* Lighter gray for readability on dark background */
    padding: 80px 0 30px;
}

.footer h5 {
    color: #fff;
    margin-bottom: 25px;
    font-family: var(--font-headings);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer ul {
    list-style: none;
    padding: 0;
}

.footer ul li a {
    color: #a0aec0;
    display: block;
    padding: 8px 0;
    transition: var(--transition-fast);
}

.footer ul li a:hover {
    color: var(--primary-color);
    padding-left: 5px; /* Subtle indent on hover */
}

/* Newsletter form inside the footer */
.footer .newsletter-form .form-control {
    background-color: #2d3748;
    border-color: #4a5568;
    color: #fff;
}
.footer .newsletter-form .form-control::placeholder {
    color: var(--subtle-text-color);
}
.footer .newsletter-form .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(180, 0, 0, 0.2);
}

/* Social media links in the footer */
.footer .social-links a {
    color: #a0aec0 !important;
    margin-right: 8px;
    font-size: 1rem;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.footer .social-links a:hover {
    background: var(--primary-color, #b40000) !important;
    color: #fff !important;
    transform: translateY(-2px);
}

/* Copyright section at the bottom of the footer */
.footer-bottom {
    border-top: 1px solid #4a5568;
    padding-top: 30px;
    margin-top: 50px;
    text-align: center;
    color: var(--subtle-text-color);
    font-size: 0.9rem;
}
/* =================================================================== */
/* PART 5/7: MAIN PAGE SECTIONS (PART A)                   */
/* =================================================================== */

/* --- 10. HERO SECTION --- */
.hero-section {
    height: 90vh;
    min-height: 700px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed; /* Creates the parallax scrolling effect */
    position: relative;
    color: #fff;
}

/* Dark gradient overlay for text readability and elegance */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.4) 100%);
    z-index: 1;
}

.hero-section .container {
    position: relative;
    z-index: 2;
}

.hero-content {
    max-width: 750px;
}

.hero-content h1 {
    font-weight: 800;
    color: #fff;
    text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3);
    margin-bottom: 1.5rem;
}

.hero-content p {
    font-size: 1.2rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    max-width: 90%;
}


/* --- 11. TOURS / SERVICES SECTION --- */
.tour-card {
    background-color: var(--background-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tour-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.tour-card:hover img {
    transform: scale(1.05);
}

.tour-card-image {
    width: 100%;
    height: 450px;
    overflow: hidden;
}

.tour-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.tour-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.tour-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text-color);
}

.tour-description {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 15px;
    flex-grow: 1;
}

.tour-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}


.tour-category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    z-index: 1;
}

.tour-category-card:hover::before {
    transform: translateX(100%);
}

.tour-details-section {
    padding-top: 120px;
}


/* --- 12. FEATURED PROJECTS (CHECKERBOARD) --- */
.project-checkerboard {
    /* The main container doesn't need much styling itself */
    background-color: var(--light-bg-color);
}

.checkerboard-row {
    background-color: var(--background-color);
    display: flex;
    flex-wrap: wrap; /* Allows columns to stack on mobile */
    align-items: center;
    transition: var(--transition-medium);
}

/* Alternating background color for rows */
.project-checkerboard > .checkerboard-row:nth-child(even) {
    background-color: var(--light-bg-color);
}

/* Row hover effect for an interactive feel */
.checkerboard-row:hover {
    box-shadow: var(--shadow-lg);
    transform: scale(1.01);
    z-index: 5;
    position: relative;
}

.checkerboard-image {
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 500px; /* Taller image block for a premium feel */
}

.checkerboard-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the area without distortion */
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Image zoom effect on row hover */
.checkerboard-row:hover .checkerboard-image img {
    transform: scale(1.08);
}

.checkerboard-content {
    padding: 40px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.checkerboard-content .project-title {
    margin-bottom: 1.5rem;
}

.checkerboard-content .project-description {
    margin-bottom: 2rem;
}
/* =================================================================== */
/* PART 6/7: MAIN PAGE SECTIONS (B) & OTHER PAGES          */
/* =================================================================== */

/* --- 13. TEAM SECTION --- */
.team-card-v2 {
    background: #ffffff;
    border-radius: var(--border-radius, 8px);
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
    text-align: center;
    padding: 30px 20px;
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.team-card-v2:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
}

.featured-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #ffc107;
    font-size: 1.3rem;
    text-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.team-card-v2-image {
    margin: 0 auto 20px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #fff;
    box-shadow: 0 0 0 4px var(--primary-color, #ff6b35);
    transition: transform 0.3s ease;
}

.team-card-v2:hover .team-card-v2-image {
    transform: scale(1.05);
}

.team-card-v2-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-card-v2-content {
    flex-grow: 1;
}

.team-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-color, #333);
    margin-top: 10px;
    margin-bottom: 5px;
}

.team-position {
    font-size: 0.9rem;
    color: var(--primary-color, #ff6b35);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.team-contact-info {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 15px;
}

.team-contact-info p {
    margin-bottom: 5px;
    word-break: break-all;
}

.team-contact-info a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}
.team-contact-info a:hover {
    color: var(--primary-color, #ff6b35);
}

.team-contact-info i {
    margin-right: 8px;
}

.team-card-v2-footer {
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
}

.team-social a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #f1f1f1;
    color: #555;
    border-radius: 50%;
    margin: 0 5px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.team-social a:hover {
    background: var(--primary-color, #ff6b35);
    color: #fff;
    transform: scale(1.1);
}


/* --- 14. GALLERY SECTION --- */
#gallery-featured .swiper {
    padding: 10px 0; /* Add some vertical padding for shadow visibility */
}

.gallery-item-featured {
    position: relative;
    overflow: hidden;
    height: 400px;
    border-radius: var(--border-radius-md);
    background-color: var(--light-bg-color);
}

.gallery-item-featured img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.gallery-item-featured:hover img {
    transform: scale(1.05);
}

.gallery-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.2);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: var(--transition-medium);
}

.gallery-item-featured:hover .gallery-overlay {
    opacity: 1;
    background: rgba(0, 0, 0, 0.6);
}

.gallery-overlay i {
    font-size: 3rem;
    margin-bottom: 1rem;
    transform: scale(0.8);
    transition: transform 0.3s ease;
}
.gallery-item-featured:hover .gallery-overlay i {
    transform: scale(1);
}

.gallery-overlay h5 {
    position: absolute;
    bottom: 25px;
    left: 25px;
    right: 25px;
    text-align: center;
    font-family: var(--font-headings);
    font-size: 1.1rem;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.3s ease 0.1s; /* Add a slight delay */
}
.gallery-item-featured:hover .gallery-overlay h5 {
    transform: translateY(0);
    opacity: 1;
}

/* --- 15. CONTACT SECTION --- */
.contact-info, .contact-form {
    background: white;
    padding: 40px;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    height: 100%;
}

.contact-info h4 {
    margin-bottom: 20px;
}

.contact-info p {
    color: var(--text-color);
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
}

.contact-info i {
    color: var(--primary-color);
    margin-right: 15px;
    margin-top: 5px;
    width: 20px;
}

.map-container {
    margin-top: 2rem;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    line-height: 0; /* remove bottom space from iframe */
}

.map-container iframe {
    width: 100%;
    height: 450px;
    border: 0;
}

/* --- 16. LOGIN PAGE --- */
.login-container {
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding: 2rem 0;
    background-color: var(--light-bg-color);
}

.login-card {
    /* Uses base .card styles, with some specific overrides */
    border: none;
    box-shadow: var(--shadow-lg);
}

.login-header {
    background: none;
    padding: 2.5rem;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}

.login-logo {
    width: 90px;
    height: auto;
    margin-bottom: 1rem;
}

.login-body {
    padding: 2rem 2.5rem;
}

/* Password visibility toggle button */
.input-group .toggle-password {
    border-left: 0;
    background-color: #fff;
    color: var(--subtle-text-color);
}
.input-group .toggle-password:hover {
    color: var(--primary-color);
}

/* --- 17. OTHER/LEGACY COMPONENTS (TO ENSURE COMPLETENESS) --- */
/* Styles for components found in the original CSS, but not in current PHP files */

/* =================================================================== */
/* PART 7/7: RESPONSIVE DESIGN (MEDIA QUERIES)             */
/* =================================================================== */

/* --- 18. RESPONSIVE STYLES --- */

/* For Laptops and Large Tablets (up to 1200px) */
@media (max-width: 1199.98px) {
    .container {
        max-width: 960px;
    }
}


/* For Tablets (up to 992px) */
@media (max-width: 991.98px) {
    /* Adjust base typography and layout for smaller screens */
    h1, .h1 { font-size: 2.5rem; }
    h2, .h2 { font-size: 2rem; }

    /* main padding-top removed — navbar is sticky */
    .section { padding: 80px 0; scroll-margin-top: 72px; }

    /* --- Navbar on Mobile --- */
    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--background-color);
        box-shadow: var(--shadow-lg);
        padding: 15px;
        border-top: 1px solid var(--border-color);
    }
    .navbar-nav { 
        flex-direction: column; 
        align-items: stretch; 
        gap: 5px; 
    }
    .nav-link { text-align: left; }
    .nav-link:hover, .nav-link.active {
        background-color: rgba(180, 0, 0, 0.06);
    }
    .nav-link::after { display: none; } /* Hide underline effect in mobile menu */
    
    .language-switcher { 
        border-left: none; 
        margin-left: 0; 
        padding-left: 0; 
        margin-top: 10px; 
        justify-content: flex-start;
    }

    /* --- Section adjustments --- */
    .hero-section { 
        background-attachment: scroll; /* Parallax is often buggy on mobile/tablet */
    }

    /* --- Checkerboard on Tablet (Your requested layout) --- */
    /*
      NOTE: This implements your request for a side-by-side layout on tablets.
      This can cause text to be small. The standard approach is stacking.
    */
    .checkerboard-row {
        display: flex;
        flex-wrap: nowrap; /* Force columns to stay in one row */
    }
    .checkerboard-row .col-lg-6 {
        flex: 0 0 50%; /* Each column takes exactly 50% */
        max-width: 50%;
    }
    .checkerboard-image { min-height: 380px; }
    .checkerboard-content { padding: 30px; }
    .checkerboard-content h3 { font-size: 1.4rem; }
    .checkerboard-content p { font-size: 0.9rem; }
}


/* For Mobile Devices (up to 768px) */
@media (max-width: 767.98px) {
    /* Center hero content on mobile */
    .hero-content {
        text-align: center;
        max-width: 100%;
    }
    .hero-content p {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    /* Checkerboard on Mobile: Reverting to a stacked layout for usability.
      The side-by-side view becomes unreadable on small phone screens.
    */
    .checkerboard-row {
        display: block; /* Revert to normal stacking flow */
    }
    .checkerboard-row .col-lg-6 {
        max-width: 100%; /* Columns are now full-width */
    }
    .checkerboard-row .order-lg-2 {
        order: 1 !important; /* Ensure image is always first on mobile */
    }
    .checkerboard-row .order-lg-1 {
        order: 2 !important; /* Text block comes after image */
    }
    .checkerboard-image {
        min-height: 300px;
    }
}


/* For very small devices (up to 576px) */
@media (max-width: 575.98px) {
    body { 
        font-size: 15px; 
        line-height: 1.6;
    }
    .section { padding: 60px 0; }
    
    h1, .h1 { font-size: 2rem; }
    h2, .h2 { font-size: 1.75rem; }

    .btn { padding: 12px 24px; font-size: 0.8rem; }

    /* Adjust padding for contact and login forms */
    .contact-form, .contact-info, .login-body { 
        padding: 25px; 
    }
}
/* =================================================================== */
/* MISSING STYLES - REFACTORED FOR THE NEW DESIGN (7-PART) */
/* AUTHOR: GEMINI (FOR MATEUS)                           */
/* */
/* NOTE: This code should be ADDED AFTER the previously      */
/* provided 7 parts.                                     */
/* =================================================================== */
/* PART 1/7: MISCELLANEOUS & GENERAL PURPOSE ADDITIONS     */
/* =================================================================== */

/* --- Body User-Select Property --- */
body {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none;     /* Internet Explorer/Edge */
  user-select: none;         /* Standard syntax to prevent text selection */
}

/* Admins should be able to select/copy text when authenticated */
body.admin-copy-enabled,
body.admin-copy-enabled * {
  -webkit-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}


/* --- Room Features List (from original tour-related styles) --- */
.room-features {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.room-features li {
    color: var(--text-color);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}

.room-features i {
    color: var(--primary-color);
    margin-right: 12px;
    width: 20px;
    text-align: center;
}


/* --- Price Tag (from original tour card styles) --- */
.price-tag {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-headings);
    color: var(--primary-color);
}


/* --- Form Check Custom Styling --- */
.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.form-check-input:checked + .form-check-label {
    color: var(--heading-color);
    font-weight: 600;
}


/* --- reCAPTCHA Validation Feedback --- */
.is-invalid-captcha > div {
    border: 1px solid var(--accent-color) !important; /* Use accent color for errors */
    border-radius: var(--border-radius-sm);
}

.invalid-feedback.d-block {
    display: block !important;
    color: var(--accent-color);
    font-weight: 500;
}
/* =================================================================== */
/* PART 2/7: INNER PAGE TITLE SECTION                      */
/* =================================================================== */

/* This section is used as a banner on top of pages like "About Us",
  "Employees", "Gallery", etc. to display the page title.
*/

.page-title-section {
    background-size: cover;
    background-position: center;
    background-color: var(--dark-bg-color); /* Fallback color if image fails */
    padding: 140px 0 80px 0;
    text-align: center;
    position: relative;
    color: #fff;
    /* This negative margin helps it sit flush against the scrolled navbar,
       assuming the main content has padding-top. */
    margin-top: -80px; 
}

/* Dark overlay for better text readability */
.page-title-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1;
}

.page-title-section .container {
    position: relative;
    z-index: 2; /* Ensures content is above the overlay */
}

.page-title-section h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    color: #fff;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

/* Optional lead paragraph under the title */
.page-title-section .lead {
    font-size: 1.25rem;
    max-width: 650px;
    margin: 1rem auto 0;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

/* =================================================================== */
/* PART 3/7: "ABOUT US" PAGE COMPONENTS                    */
/* =================================================================== */

/* --- About Page Main Content Area --- */
.about-content .section-subtitle {
    font-size: 1.8rem;
    font-weight: 600;
    font-family: var(--font-headings);
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.about-content p {
    color: var(--text-color);
    line-height: var(--line-height-base);
}


/* --- Services/Features List with Icons --- */
.services-list {
    list-style: none;
    padding-left: 0;
    margin-top: 1.5rem;
}

.services-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.25rem;
    font-size: 1rem;
    color: var(--heading-color);
}

.services-list li i {
    color: var(--primary-color);
    margin-right: 15px;
    margin-top: 5px; /* Aligns icon nicely with the first line of text */
    font-size: 1.2rem;
    width: 20px;
}


/* --- Director's Showcase Card --- */
.director-card {
    background: var(--background-color);
    padding: 2.5rem;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
    transition: var(--transition-medium);
}

.director-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.director-card img {
    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: 50%;
    border: 6px solid var(--primary-color);
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.director-card .director-name {
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
    color: var(--heading-color);
}

.director-card .director-title {
    font-weight: 500;
    color: var(--primary-color);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* =================================================================== */
/* PART 4/7: VISA & DESTINATION PAGE COMPONENTS            */
/* =================================================================== */

/* --- Visa Service Card --- */
.visa-service-card {
    background-color: var(--background-color);
    padding: 2.5rem;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    border-left: 5px solid var(--primary-color);
    transition: var(--transition-medium);
}

.visa-service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.visa-country-title {
    font-family: var(--font-headings);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 1.5rem;
}

.visa-service-card p {
    line-height: var(--line-height-base);
    color: var(--text-color);
}

/* Fees section inside the visa card */
.visa-fees {
    font-weight: 600;
    font-size: 1.1rem;
    font-family: var(--font-headings);
    color: var(--primary-color);
    text-align: center;
    background: rgba(180, 0, 0, 0.06); /* Use primary color with low opacity */
    padding: 10px 15px;
    border-radius: var(--border-radius-sm);
    margin-top: 1.5rem;
}


/* --- Clickable Destination Card --- */

/* This turns the entire card into a clickable link */
.destination-card-link {
    text-decoration: none;
    color: inherit;
    display: block; /* Makes the link fill the grid column */
    transition: var(--transition-medium);
    height: 100%;
    border-radius: var(--border-radius-md); /* Ensures hover effect respects the border radius */
}

/* The card itself, nested inside the link */
.destination-card {
    /* Inherits most styles from the base .card */
    /* No separate hover effect needed, as it's on the parent link */
}

.destination-card-link:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.destination-card .card-img-top {
    height: 200px;
}

/* "Discover" button/text that appears on hover */
.discover-btn {
    color: var(--primary-color);
    font-weight: 600;
    text-align: right;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease;
}

.destination-card-link:hover .discover-btn {
    opacity: 1; /* Appears on hover */
}
/* =================================================================== */
/* PART 5/7: "SOCIAL REELS" PAGE COMPONENTS                */
/* =================================================================== */

/* --- Reel Card Styling --- */
.reel-card {
    /* Inherits from base .card, but with specific structure */
    display: flex;
    flex-direction: column;
}

/* Wrapper for embedding videos to maintain aspect ratio */
.reel-video-wrapper {
    position: relative;
    padding-bottom: 177.77%; /* Default 9:16 aspect ratio for TikTok/Reels */
    height: 0;
    overflow: hidden;
    background-color: #000;
}

/* Ensure the embedded content fills the wrapper */
.reel-video-wrapper iframe,
.reel-video-wrapper blockquote,
.reel-video-wrapper .tiktok-embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;  /* !important is needed to override embed's inline styles */
    height: 100% !important;
    border: 0;
}

/* Modifier class for standard 16:9 videos (e.g., YouTube) */
.reel-card.aspect-16-9 .reel-video-wrapper {
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}


/* --- Reel Card Content Styling --- */
.reel-card-body {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.reel-title {
    font-family: var(--font-headings);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--heading-color);
}

.reel-description {
    font-size: 0.95rem;
    color: var(--text-color);
    margin-bottom: 15px;
    flex-grow: 1; /* Allows description to take available space */
    min-height: 95px; /* Ensures consistent height before "Read More" */
    position: relative;
}

.reel-badge {
    display: inline-block;
    padding: 5px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: var(--primary-color);
    border-radius: 50px; /* Pill shape */
    align-self: flex-start;
    margin-top: auto; /* Pushes to the bottom */
}


/* --- "Read More" Functionality Styles --- */

/* The actual text paragraph that will be truncated */
.reel-description-text {
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: var(--text-color);
    line-height: 1.6;
}

/* Class to be toggled by JavaScript to collapse text */
.reel-description-text.collapsed {
    max-height: 65px; /* Approx. 3 lines of text */
    overflow: hidden;
    position: relative;
}

/* Optional: Add a subtle fade-out effect to the collapsed text */
.reel-description-text.collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 25px;
    background: linear-gradient(to bottom, transparent, var(--background-color));
}

/* The "Read More" button */
.read-more-btn {
    background: none;
    border: none;
    color: var(--primary-color);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-size: 0.9rem;
    display: none; /* Hidden by default, shown by JavaScript when needed */
}

.read-more-btn:hover {
    text-decoration: underline;
    color: var(--secondary-color);
}
/* =================================================================== */
/* PART 6/7: ADMIN PANEL STYLES                            */
/* =================================================================== */

/* --- Admin Panel Layout --- */
.admin-container {
    padding: 2rem;
    background-color: var(--light-bg-color);
}

.admin-sidebar {
    background: var(--background-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.admin-content {
    background: var(--background-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    padding: 2rem;
}


/* --- Admin Sidebar Components --- */
.admin-profile {
    text-align: center;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.admin-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
    border: 3px solid var(--primary-color);
}

.admin-profile h5 {
    margin-bottom: 0.25rem;
    color: var(--heading-color);
}

.admin-profile p {
    margin-bottom: 0;
    color: var(--subtle-text-color);
    font-size: 0.9rem;
}

/* Premium Admin Dashboard Styles */
.admin-body {
    background-color: #f5f7fa;
    font-family: 'Poppins', sans-serif;
}

.stat-card-v2 {
    background: linear-gradient(135deg, var(--card-color) 0%, color-mix(in srgb, var(--card-color) 70%, black) 100%);
    color: white;
    border-radius: 12px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
    border: none;
}

.stat-card-v2:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.stat-card-v2 .card-icon {
    font-size: 2.5rem;
    opacity: 0.9;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
}

.stat-card-v2 .card-content {
    flex-grow: 1;
}

.stat-card-v2 .card-title {
    color: rgba(255,255,255,0.9);
    font-size: 1rem;
    margin-bottom: 5px;
    font-weight: 400;
}

.stat-card-v2 .stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: white;
    margin: 0 0 10px 0;
}

.stat-card-v2 .stat-link {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Quick Actions Styling */
.quick-actions-v2 {
    display: grid;
    gap: 10px;
}

.quick-actions-v2 .action-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
    color: var(--text-color);
    background: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border: 1px solid var(--border-color);
}

.quick-actions-v2 .action-item:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(180, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.quick-actions-v2 .action-item i {
    font-size: 1.3rem;
    margin-right: 15px;
    width: 24px;
    text-align: center;
}

/* Activity Feed Styling */
.activity-feed-v2 {
    list-style: none;
    padding: 0;
    margin: 0;
}

.activity-feed-v2 .feed-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    background: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.activity-feed-v2 .feed-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.activity-feed-v2 .feed-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
}

.activity-feed-v2 .feed-content {
    flex-grow: 1;
}

.activity-feed-v2 .feed-content strong {
    display: block;
    margin-bottom: 5px;
    color: var(--heading-color);
}

.activity-feed-v2 .feed-content p {
    font-size: 0.9rem;
    margin-bottom: 5px;
    color: var(--text-color);
}

.activity-feed-v2 .feed-content small {
    font-size: 0.8rem;
    color: var(--subtle-text-color);
}


/* --- Admin Navigation Menu --- */
.admin-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.admin-menu li {
    margin-bottom: 0.5rem;
}

.admin-menu li a {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-radius: var(--border-radius-md);
    color: var(--text-color);
    font-weight: 500;
    transition: var(--transition-fast);
}

.admin-menu li a:hover {
    background: rgba(180, 0, 0, 0.06);
    color: var(--primary-color);
}

.admin-menu li a i {
    margin-right: 12px;
    width: 20px;
    text-align: center;
    font-size: 1.1rem;
    color: var(--subtle-text-color);
    transition: var(--transition-fast);
}

.admin-menu li a:hover i {
    color: var(--primary-color);
}

/* Style for the active menu item */
.admin-menu li.active a {
    background: rgba(180, 0, 0, 0.06);
    color: var(--primary-color);
    font-weight: 600;
}

.admin-menu li.active a i {
    color: var(--primary-color);
}


/* --- Admin Content Area --- */
.admin-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.admin-section-header h2 {
    margin-bottom: 0;
}


/* =================================================================== */
/* PART 7/7: RESPONSIVE ADJUSTMENTS FOR MISSING COMPONENTS */
/* =================================================================== */

/* For Tablets (up to 992px) */
@media (max-width: 991.98px) {

    /* Adjust page title section on tablets */
    .page-title-section h1 {
        font-size: 2.8rem;
    }
    .page-title-section {
        padding: 120px 0 70px 0;
    }

    /* Add spacing for director card when it stacks */
    .director-card {
        margin-top: 3rem;
    }

    /* Admin content adjustments */
    .admin-content {
        margin-top: 2rem;
    }
}


/* For Mobile Devices (up to 768px) */
@media (max-width: 767.98px) {
    
    /* Further reduce page title on mobile */
    .page-title-section h1 {
        font-size: 2.2rem;
    }
    .page-title-section .lead {
        font-size: 1.1rem;
    }

    /* Stack admin section header elements vertically */
    .admin-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    /* Adjust padding on various cards for smaller screens */
    .director-card,
    .visa-service-card {
        padding: 2rem;
    }

    .visa-country-title {
        font-size: 1.5rem;
    }
}


/* For very small devices (up to 576px) */
@media (max-width: 575.98px) {
    .admin-container,
    .admin-content {
        padding: 1rem;
    }
    
    .admin-section-header {
        padding-bottom: 1rem;
        margin-bottom: 1.5rem;
    }
}
/* =================================================================== */
/* FINAL ADDITIONS - MINOR UTILITY CLASSES FROM OLD CSS    */
/* =================================================================== */

/* For hiding elements on specific devices */
@media (max-width: 991.98px) {
	.mobile-hidden { 
        display: none !important; 
    }
}

@media (min-width: 992px) {
    .mobile-only { 
        display: none !important; 
    }
}

/* A very specific component from the old file */

/* Ensure swiper container is always visible */
.employees-swiper {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fix for swiper slides */
.swiper-wrapper {
    display: flex;
    align-items: stretch; /* Make all cards same height */
}

.swiper-slide {
    height: auto; /* Allow slide to take natural height */
    display: flex; /* Needed for equal height */
}

/* Team card adjustments */
.team-card-v2 {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.team-card-v2-content {
    flex-grow: 1; /* Push footer to bottom */
}

/* Hero Background-ის დინამიური სტილი */
.hero-background {
    /* საერთო სტილები, რომლებიც ორივე ვერსიას სჭირდება */
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: background-image 0.3s ease-in-out; /* სურვილისამებრ, ეფექტისთვის */

    /* ნაგულისხმევი (Mobile-First) სურათი მობილურისთვის */
    background-image: url('<?php echo BASE_URL; ?>/assets/images/mobile-bg.jpg');
}

/* Media Query: ეს სტილი იმუშავებს მხოლოდ დიდ ეკრანებზე (992px და მეტი) */
@media (min-width: 991.98px) {
    .hero-background {
        /* დესკტოპის სურათი, რომელიც გადააწერს მობილურისას */
        background-image: url('<?php echo BASE_URL; ?>/assets/images/hero-bg.jpg');
    }
}

/* დავამატოთ style.css-ში მობილურის მედია კვერის ქვეშ */
@media (max-width: 767.98px) {
    .employees-swiper .swiper-button-next,
    .employees-swiper .swiper-button-prev {
        width: 40px !important;
        height: 40px !important;
        background: rgba(255, 255, 255, 0.9) !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
        border: 1px solid var(--border-color) !important;
    }
    
    .employees-swiper .swiper-button-next::after,
    .employees-swiper .swiper-button-prev::after {
        font-size: 1.2rem !important;
        color: var(--primary-color) !important;
        font-weight: bold !important;
    }
    
    /* დავამატოთ ინდიკატორიც (dots) თუ საჭიროა */
    .employees-swiper .swiper-pagination {
        position: relative !important;
        margin-top: 20px !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    .employees-swiper .swiper-pagination-bullet {
        width: 10px !important;
        height: 10px !important;
        background: var(--border-color) !important;
        opacity: 1 !important;
    }
    
    .employees-swiper .swiper-pagination-bullet-active {
        background: var(--primary-color) !important;
    }
}

/* --- Library Module Styles --- */
.alphabet-filter a {
    display: inline-block;
    padding: 5px 10px;
    margin: 2px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
}
.alphabet-filter a:hover,
.alphabet-filter a.active {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.author-card-link {
    text-decoration: none;
}
.author-card {
    transition: var(--transition-medium);
}
.author-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}
.author-card-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}
.author-card-title {
    color: var(--heading-color);
    font-size: 0.9rem;
    font-weight: 600;
}

.book-card-title a {
    text-decoration: none;
    color: var(--heading-color);
    font-weight: 500;
}
.book-cover-sm {
    transition: var(--transition-medium);
    border-radius: var(--border-radius-sm);
}
.book-cover-sm:hover {
    transform: scale(1.05);
}

/* Star Rating */
.average-rating-stars .fa-star,
.user-rating-stars .fa-star {
    color: #f8c102;
    font-size: 1.2rem;
}
.user-rating-stars .fa-star {
    cursor: pointer;
    transition: transform 0.2s;
}
.user-rating-stars .fa-star:hover {
    transform: scale(1.2);
}

/* Reviews */
.review-item {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1.5rem;
}
.review-item:last-child {
    border-bottom: none;
}

/* =================================================================== */
/* LIBRARY MODULE - MOBILE RESPONSIVE STYLES               */
/* =================================================================== */

@media (max-width: 767.98px) {

    /* --- General Adjustments for Library Pages --- */
    .library-section-title h2,
    .section-title h2 {
        font-size: 2rem; /* სათაურების შემცირება მობილურზე */
    }

    /* --- Library Page (library.php) --- */
    .alphabet-filter {
        /* ჰორიზონტალური სქროლვა, რათა ანბანი ერთ ხაზზე დარჩეს და არ გაიწელოს */
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch; /* გლუვი სქროლი iOS-ზე */
    }
    .alphabet-filter::-webkit-scrollbar {
        height: 4px; /* სქროლბარის ვიზუალი */
    }
    .alphabet-filter::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: 10px;
    }
    .alphabet-filter a {
        padding: 4px 8px;
        font-size: 0.9rem;
    }
    .author-card-img {
        height: 150px; /* ავტორის სურათის სიმაღლის კორექცია */
    }
    .author-card-title {
        font-size: 0.8rem;
    }


    /* --- Author Page (author.php) --- */
    .author-info-block .col-md-3,
    .author-info-block .col-md-9 {
        text-align: center; /* ავტორის სურათის და ტექსტის ცენტრირება */
    }
    .author-info-block .col-md-9 {
        margin-top: 1.5rem;
    }
    .author-info-block h1 {
        font-size: 2.2rem; /* ავტორის სახელის ზომის კორექცია */
    }


    /* --- Book Page (book.php) --- */
    .book-details-container .col-md-4 {
        margin-bottom: 2rem; /* დაშორება წიგნის ყდასა და დეტალებს შორის */
    }
    .book-details-container h1 {
        font-size: 1.8rem; /* წიგნის სათაურის ზომის კორექცია */
        text-align: center;
    }
    .book-details-container h4 {
        font-size: 1.1rem;
        text-align: center;
    }
    .book-details-container .d-flex {
        justify-content: center; /* რეიტინგის ვარსკვლავების ცენტრირება */
    }
    .review-item img {
        width: 40px; /* კომენტარის ავტორის სურათის დაპატარავება */
        height: 40px;
    }
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* უზრუნველყოფს, რომ body ყოველთვის ეკრანის სიმაღლეა */
}

main {
    flex-grow: 1; /* აიძულებს <main> კონტენტს, დაიკავოს ყველა თავისუფალი სივრცე */
}

.back-link {
    text-decoration: none;
    color: var(--subtle-text-color);
    font-weight: 600;
    font-size: 0.9rem;
    transition: var(--transition-fast);
}
.back-link:hover {
    color: var(--primary-color);
}
.back-link i {
    transition: transform 0.2s ease-in-out;
}
.back-link:hover i {
    transform: translateX(-3px);
}
/* --- Library Stats Cards --- */
.stat-card-library {
    background-color: var(--light-bg-color);
    border: 1px solid var(--border-color);
    padding: 2rem 1.5rem;
    border-radius: var(--border-radius-md);
    transition: var(--transition-medium);
}
.stat-card-library:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}
.stat-icon {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}
.stat-number {
    font-size: 2.2rem;
    font-weight: 700;
    font-family: var(--font-headings);
    color: var(--heading-color);
    line-height: 1.2;
}
.stat-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--subtle-text-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* --- Premium Team Credits Widget Styles --- */
.team-credit-item {
    padding: 0.75rem 0.5rem;
}
.team-credit-item:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
}
.team-credit-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    border: 2px solid var(--primary-color);
    padding: 2px;
    background-color: #fff;
    box-shadow: var(--shadow-sm);
}
.team-credit-name {
    font-weight: 600;
    color: var(--heading-color);
    font-size: 1rem;
    line-height: 1.3;
}
.team-credit-status {
    font-size: 0.8rem;
    color: var(--primary-color);
    font-weight: 500;
}

/* --- Mobile Fixes for Team Credits Widget --- */
@media (max-width: 767.98px) {
    
    /* კონკრეტულად ამ სათაურისთვის ვამცირებთ შრიფტის ზომას მობილურზე */
    .card-title.h6.text-center.text-muted.mb-3 {
        font-size: 0.8rem; /* შეგიძლიათ ეს ზომა შეცვალოთ (მაგ: 0.75rem) */
        white-space: nowrap; /* ეს სტილი კრძალავს ტექსტის გადმოტანას */
        overflow: hidden; /* იმ შემთხვევაში, თუ ტექსტი მაინც არ ეტევა */
        text-overflow: ellipsis; /* ბოლოში დაამატებს სამ წერტილს ... */
    }

    /* ადმინისტრატორის სტატუსისთვის ვამცირებთ შრიფტის ზომას */
    .team-credit-status {
        font-size: 0.75rem; /* შეგიძლიათ ეს ზომა შეცვალოთ (მაგ: 0.7rem) */
        white-space: nowrap; /* ეს სტილი კრძალავს ტექსტის გადმოტანას */
    }
}

/* --- Facebook Share Button Style --- */
.btn-facebook {
    background-color: #1877F2;
    border-color: #1877F2;
    color: #fff;
    text-transform: none; /* სურვილისამებრ, რომ ტექსტი არ იყოს დიდი ასოებით */
}

.btn-facebook:hover,
.btn-facebook:focus {
    background-color: #166fe5;
    border-color: #166fe5;
    color: #fff;
}
/*
--- Admin Statistics Page Styles ---
*/

.stat-card-admin {
    background-color: #fff;
    border-radius: var(--border-radius-md);
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
}

.stat-card-admin:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    border-color: var(--primary-color);
}

.stat-card-admin i {
    font-size: 2.5rem;
    color: var(--primary-color);
}

.stat-card-admin .stat-info {
    display: flex;
    flex-direction: column;
}

.stat-card-admin .stat-number {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--heading-color);
    line-height: 1.2;
}

.stat-card-admin .stat-label {
    font-size: 1rem;
    color: var(--text-color);
}

.card-header h4 {
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
    color: var(--heading-color);
}

/* =================================================================== */
/* LIVE TV PAGE STYLES                                     */
/* =================================================================== */

.live-player-wrapper {
    position: relative;
    max-width: 900px; /* შეგიძლიათ შეცვალოთ ზომა */
    border-radius: var(--border-radius-lg);
    overflow: hidden; /* ეს მნიშვნელოვანია, რომ პლეერმა კუთხეები შეინარჩუნოს */
    box-shadow: var(--shadow-lg);
    background-color: #000;
}

.player-logo {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 120px; /* ლოგოს ზომა */
    height: auto;
    z-index: 10;
    opacity: 0.8;
    pointer-events: none; /* ლოგო არ იქნება კლიკვადი და არ დაბლოკავს პლეერის კონტროლს */
    transition: var(--transition-fast);
}

/* ვიზუალური ეფექტი, როცა პლეერზე მაუსი არაა */
.live-player-wrapper:not(:hover) .player-logo {
    opacity: 0.9;
}

.live-actions {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.live-actions .btn {
    min-width: 180px;
}

/* Video.js-ის დიზაინის მორგება თქვენს ფერებზე */
.video-js .vjs-big-play-button {
    background-color: rgba(180, 0, 0, 0.7) !important;
    border-color: rgba(180, 0, 0, 0.8) !important;
    width: 2em !important;
    height: 2em !important;
    border-radius: 50% !important;
    margin-top: -1em !important;
    margin-left: -1em !important;
}

.video-js .vjs-control-bar {
    background-color: rgba(26, 32, 44, 0.8) !important;
}

.video-js .vjs-play-progress, 
.video-js .vjs-volume-level {
    background: var(--primary-color) !important;
}
/* =================================================================== */
/* LIVE PROMO SECTION STYLES (HOMEPAGE)                    */
/* =================================================================== */

.live-promo-section {
    padding: 80px 0;
    background-color: var(--dark-bg-color);
    /* რეკომენდაცია: უკეთესი ეფექტისთვის შეგიძლიათ გამოიყენოთ ფოტოსურათი: */
    /* background-image: linear-gradient(rgba(26, 32, 44, 0.8), rgba(26, 32, 44, 0.8)), url('../images/your-sports-image.jpg'); */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax ეფექტი */
    position: relative;
    overflow: hidden;
}

/* დეკორატიული ანიმაცია ფონზე */
.live-promo-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 800px;
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    animation: pulse 5s infinite ease-in-out;
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0.7;
    }
    70% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0;
    }
}

.live-promo-section .container {
    position: relative;
    z-index: 2;
}

.live-promo-title {
    font-family: var(--font-headings);
    color: #ffffff;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 2rem;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

.live-promo-btn {
    border-radius: 50px; /* მომრგვალებული ღილაკი */
    padding: 18px 45px;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 10px 30px -5px rgba(180, 0, 0, 0.5);
    transition: all 0.3s ease;
    border-width: 2px;
}

.live-promo-btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 40px -5px rgba(180, 0, 0, 0.6);
}

/* =================================================================== */
/* WEATHER PROMO SECTION STYLES (HOMEPAGE)                 */
/* =================================================================== */

.weather-promo-section {
    padding: 80px 0;
    background-color: #34495e; /* ფონი ფოტოს გარეშე */
    /* რეკომენდაცია: უკეთესი ეფექტისთვის გამოიყენეთ ფოტოსურათი: */
    background-image: linear-gradient(rgba(44, 62, 80, 0.8), rgba(44, 62, 80, 0.8)), url('https://images.unsplash.com/photo-1558486012-817176f84c6d?q=80&w=2534&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax ეფექტი */
    position: relative;
    overflow: hidden;
}

.weather-promo-title {
    font-family: var(--font-headings);
    color: #ffffff;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 1rem; /* შევამცირეთ დაშორება */
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

.weather-promo-subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.1rem;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.weather-promo-btn {
    border-radius: 50px; /* მომრგვალებული ღილაკი */
    padding: 18px 45px;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    background-color: #3498db; /* ღილაკის ფერი */
    border-color: #3498db;
    box-shadow: 0 10px 30px -5px rgba(52, 152, 219, 0.5);
    transition: all 0.3s ease;
}

.weather-promo-btn:hover {
    background-color: #2980b9;
    border-color: #2980b9;
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 40px -5px rgba(52, 152, 219, 0.6);
}

/* =================================================================== */
/* LIVE TV & RECORDINGS STYLES                             */
/* =================================================================== */

.recordings-section .card .card-img-top {
    cursor: pointer;
    transition: opacity 0.3s ease;
}
.recordings-section .card:hover .card-img-top {
    opacity: 0.8;
}

.glightbox-clean .gslide-description {
    background: rgba(0,0,0,0.7) !important;
}

.facebook-plugin-container {
    max-width: 970px;
    margin: 2rem auto;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.facebook-plugin-container h4 {
    color: var(--primary-color);
    margin: 0;
    font-size: 1.25rem;
}

.facebook-plugin-container p {
    color: var(--text-color);
    margin-bottom: 1rem;
}

/* Facebook iframe სტილები */
.fb-page {
    width: 100%;
    display: flex;
    justify-content: center;
}

.fb-page iframe {
    width: 100% !important;
    max-width: 500px;
    border: none;
    overflow: hidden;
    border-radius: 8px;
}

/* მობილურისთვის ადაპტაცია */
@media (max-width: 767px) {
    .facebook-plugin-container {
        padding: 15px;
        margin: 1rem auto;
    }
    
    .fb-page, 
    .fb-page span, 
    .fb-page iframe {
        width: 100% !important;
    }
}


/* =================================================================== */
/* ADMIN TRANSLATIONS - RESPONSIVE TABLE STYLES            */
/* =================================================================== */

@media (max-width: 991.98px) {
    /* მივმართავთ კონკრეტულად თარგმანების ცხრილს */
    .admin-content table.table-bordered {
        border: 0;
    }

    .admin-content table.table-bordered thead {
        /* ვმალავთ სტანდარტულ სათაურს, მაგრამ ვტოვებთ ხელმისაწვდომს ეკრანის წამკითხველებისთვის */
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    .admin-content table.table-bordered tr {
        display: block;
        margin-bottom: 1.5rem;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius-md);
        box-shadow: var(--shadow-sm);
        background: #fff;
    }

    .admin-content table.table-bordered td {
        display: block;
        text-align: right;
        font-size: 0.9rem;
        border-bottom: 1px solid var(--border-color);
        padding-left: 50%; /* ვტოვებთ ადგილს მარცხნივ სათაურისთვის */
        position: relative;
    }

    .admin-content table.table-bordered td:last-child {
        border-bottom: 0;
    }

    .admin-content table.table-bordered td::before {
        /* ვიყენებთ data-label ატრიბუტს სათაურის გენერირებისთვის */
        content: attr(data-label);
        position: absolute;
        left: 1rem;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: 600;
        color: var(--heading-color);
    }

    /* ღილაკების სექციის გასწორება */
    .admin-content table.table-bordered td[data-label="Actions"] {
        display: flex;
        justify-content: flex-end;
        gap: 0.5rem;
    }
}

/* Profile Page Specific Styles */
.profile-avatar {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid var(--primary-color);
    box-shadow: var(--shadow-md);
}

.card-body.p-5 {
    padding: 2.5rem !important;
}

@media (max-width: 767.98px) {
    .card-body.p-5 {
        padding: 1.5rem !important;
    }
    
    .d-flex.align-items-center.mb-5 {
        flex-direction: column;
        text-align: center;
    }
    
    .d-flex.align-items-center.mb-5 .me-5 {
        margin-right: 0 !important;
        margin-bottom: 1.5rem;
    }
}

/* Form validation styles */
.is-invalid {
    border-color: var(--accent-color) !important;
}

.invalid-feedback {
    display: block;
    color: var(--accent-color);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* =================================================================== */
/* VIRTUAL GALLERY MODULE STYLES                           */
/* =================================================================== */

.virtual-gallery-container {
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#gallery-scene-container {
    background-color: #000;
}

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

.gallery-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    border: 5px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    transform: translate(-50%, -50%);
    z-index: 10;
}

@keyframes spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.gallery-instructions {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 10px 20px;
    border-radius: var(--border-radius-md);
    font-size: 0.8rem;
    text-align: center;
    z-index: 5;
}

.gallery-exit-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 5;
    color: var(--heading-color);
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border-color);
}

.gallery-exit-btn:hover {
    background-color: white;
}


/* =================================================================== */
/* PART 8/7: ADMIN PANEL SIDEBAR HEADINGS (MODIFICATIONS)  */
/* =================================================================== */

.admin-sidebar-heading {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--subtle-text-color);
    padding: 0.75rem 1.25rem;
    margin-top: 1rem; /* ეს ქმნის ვიზუალურ დაშორებას სექციებს შორის */
    background-color: var(--light-bg-color);
    border-radius: var(--border-radius-sm);
    border-bottom: 1px solid var(--border-color);
    
    /* --- START: დამატებული სტილები Guide Icon-ისთვის --- */
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* --- END: დამატებული სტილები Guide Icon-ისთვის --- */
}

/* პირველ სათაურს არ სჭირდება ზედა დაშორება */
.admin-sidebar .list-group-flush .admin-sidebar-heading:first-of-type {
    margin-top: 0;
}

/* --- START: ახალი სტილები Guide Icon-ისთვის --- */
.guide-icon {
    font-size: 1rem; /* ხატულის ზომა */
    color: var(--subtle-text-color);
    text-decoration: none;
    transition: var(--transition-fast);
}

.guide-icon:hover,
.guide-icon:focus {
    color: var(--primary-color);
    transform: scale(1.1);
}
/* --- END: ახალი სტილები Guide Icon-ისთვის --- */


/* --- START: ახალი სტილები Guide Modal-ისთვის --- */
#guidesModal .modal-header {
    background-color: var(--light-bg-color);
    border-bottom: 1px solid var(--border-color);
}

#guidesModal .modal-title {
    color: var(--heading-color);
    font-weight: 600;
}

#guidesModal .list-group-item {
    font-weight: 500;
    color: var(--text-color);
    border: none;
    border-bottom: 1px solid var(--border-color);
    padding-left: 1.25rem;
    transition: all 0.2s ease-in-out;
}

#guidesModal .list-group-item:last-child {
    border-bottom: none;
}

#guidesModal .list-group-item:hover,
#guidesModal .list-group-item:focus {
    background-color: var(--light-bg-color);
    color: var(--primary-color);
    border-left: 3px solid var(--primary-color);
    padding-left: calc(1.25rem - 3px); /* კომპენსაცია border-ისთვის */
    transform: translateX(5px);
}

#guidesModal .list-group-item i {
    color: var(--subtle-text-color);
    transition: var(--transition-fast);
}

#guidesModal .list-group-item:hover i,
#guidesModal .list-group-item:focus i {
    color: var(--primary-color);
}
/* --- END: ახალი სტილები Guide Modal-ისთვის --- */

/* =================================================================== */
/* PART 9: MODERN MEDIA CARD (PROJECTS REDESIGN)             */
/* =================================================================== */

.media-project-card {
    display: block;
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    background-color: var(--dark-bg-color); /* იმ შემთხვევისთვის, თუ სურათი არ ჩაიტვირთა */
    box-shadow: var(--shadow-md);
    transition: var(--transition-medium);
    height: 100%;
    /* ფიქსირებული სიმაღლე ან Aspect Ratio, რომ ყველა ბარათი სწორად დაჯდეს */
    aspect-ratio: 4 / 3; 
    min-height: 350px; /* მობილურებისთვის მინიმალური სიმაღლე */
}

/* Hover ეფექტი მთლიან ბარათზე */
.media-project-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

/* სურათის სტილი და ანიმაცია */
.media-card-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.media-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* სურათი ავსებს მთელ სივრცეს დამახინჯების გარეშე */
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* სურათის ზუმი Hover-ზე */
.media-project-card:hover .media-card-img {
    transform: scale(1.1);
}

/* მუქი გრადიენტი, რომ ტექსტი ყოველთვის იკითხებოდეს */
.media-card-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom, 
        transparent 0%, 
        transparent 40%, 
        rgba(0, 0, 0, 0.8) 75%, 
        rgba(0, 0, 0, 0.95) 100%
    );
    transition: opacity 0.3s ease;
}

/* კონტენტის პოზიციონირება */
.media-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 25px;
    z-index: 2;
    color: #fff;
}

/* სათაური */
.media-card-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 5px; /* საწყისი პოზიცია */
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    transition: transform 0.3s ease;
}

/* Hover-ის დროს სათაური ოდნავ ზემოთ იწევს */
.media-project-card:hover .media-card-title {
    transform: translateY(-10px);
    color: var(--primary-color); /* სურვილის შემთხვევაში სათაური გაწითლდეს */
}

/* დამალული ინფო (აღწერა და ღილაკი) */
.media-card-hidden-info {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease;
}

/* Hover-ის დროს ინფო გამოჩნდება */
.media-project-card:hover .media-card-hidden-info {
    max-height: 150px; /* საკმარისი სიმაღლე ტექსტისთვის */
    opacity: 1;
    margin-top: 10px;
}

.media-card-desc {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 15px;
    line-height: 1.5;
    /* ტექსტის შეზღუდვა 3 ხაზზე */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.media-card-btn {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--primary-color);
    letter-spacing: 1px;
}


/* =================================================================== */
/* FIXES: MOBILE SCROLL & CARD SPACING                       */
/* =================================================================== */

/* 1. ჰორიზონტალური სქროლის მოკვლა (მობილურის ფიქსი) */
html, body {
    overflow-x: hidden !important;
    width: 100%;
    position: relative;
}

/* კონტეინერებმა არ გაარღვიონ ეკრანი */
.container, .container-fluid {
    max-width: 100vw;
    overflow-x: hidden;
    padding-left: 15px; /* უსაფრთხო დაშორება კიდეებიდან */
    padding-right: 15px;
}


/* =================================================================== */
/* HOMEPAGE PREMIUM REDESIGN - KARTULI.NEWS                             */
/* Full-page visual polish for all devices                               */
/* =================================================================== */


/* =========================================== */
/* HERO SECTION - COMPLETE REWRITE             */
/* =========================================== */

.hero-section {
    position: relative;
    min-height: 100vh;
    min-height: 100svh; /* safe viewport height for mobile */
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
}

.hero-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--desktop-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
    animation: heroZoom 20s ease-in-out infinite alternate;
}

@keyframes heroZoom {
    0%   { transform: scale(1); }
    100% { transform: scale(1.06); }
}

.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(10,12,18,0.55) 0%, rgba(10,12,18,0.3) 50%, rgba(10,12,18,0.65) 100%),
        linear-gradient(90deg, rgba(180,0,0,0.08) 0%, transparent 50%);
}

/* Floating particles */
.hero-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.h-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    animation: particleFloat 12s linear infinite;
}
.h-particle--1 { left: 15%; animation-delay: 0s; animation-duration: 14s; }
.h-particle--2 { left: 45%; animation-delay: 3s; animation-duration: 18s; width: 3px; height: 3px; }
.h-particle--3 { left: 72%; animation-delay: 6s; animation-duration: 16s; width: 5px; height: 5px; background: rgba(180,0,0,0.25); }
.h-particle--4 { left: 88%; animation-delay: 9s; animation-duration: 20s; width: 2px; height: 2px; }

@keyframes particleFloat {
    0%   { transform: translateY(100vh) scale(0); opacity: 0; }
    10%  { opacity: 1; transform: translateY(80vh) scale(1); }
    90%  { opacity: 1; }
    100% { transform: translateY(-10vh) scale(0); opacity: 0; }
}

/* Hero content */
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 780px;
    padding: 0;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    margin-bottom: 1.5rem;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 8px 20px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.12);
}

.hero-eyebrow-dot {
    width: 8px;
    height: 8px;
    background: var(--primary-color);
    border-radius: 50%;
    display: inline-block;
    animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(180,0,0,0.5); }
    50%      { box-shadow: 0 0 0 8px rgba(180,0,0,0); }
}

.hero-content h1 {
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 1.25rem;
    text-shadow: none;
    letter-spacing: -0.5px;
}

.hero-content p {
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.8;
    color: rgba(255,255,255,0.85);
    margin-bottom: 2.5rem;
    max-width: 90%;
    text-shadow: none;
}

/* CTA button group */
.hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.hero-btn-main {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    border-radius: 50px;
    padding: 16px 36px;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 8px 30px rgba(180, 0, 0, 0.35);
}

.hero-btn-main:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(180, 0, 0, 0.45);
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}

.hero-btn-ghost {
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 50px;
    padding: 16px 32px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.35s ease;
}

.hero-btn-ghost:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.5);
    color: #fff;
    transform: translateY(-3px);
}

/* Scroll indicator */
.hero-scroll-hint {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: rgba(255,255,255,0.5);
    transition: color 0.3s ease;
}

.hero-scroll-hint:hover { color: rgba(255,255,255,0.8); }

.scroll-mouse {
    width: 24px;
    height: 38px;
    border: 2px solid rgba(255,255,255,0.35);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    padding-top: 6px;
}

.scroll-dot {
    width: 3px;
    height: 8px;
    background: rgba(255,255,255,0.6);
    border-radius: 2px;
    animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50%      { transform: translateY(10px); opacity: 0.3; }
}

.scroll-text {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 500;
}

/* Hero mobile */
@media (max-width: 768px) {
    .hero-section { min-height: 100svh; align-items: flex-end; padding-bottom: 100px; }
    .hero-background { background-image: var(--mobile-bg); animation: none; }
    .hero-content { text-align: center; max-width: 100%; }
    .hero-content p { max-width: 100%; margin-left: auto; margin-right: auto; }
    .hero-cta-group { justify-content: center; }
    .hero-scroll-hint { bottom: 20px; }
    .hero-btn-main, .hero-btn-ghost { padding: 14px 28px; font-size: 0.88rem; }
    .hero-particles { display: none; }
}

@media (max-width: 480px) {
    .hero-cta-group { flex-direction: column; width: 100%; }
    .hero-btn-main, .hero-btn-ghost { width: 100%; text-align: center; }
}


/* =========================================== */
/* UNIVERSAL PROMO BANNERS SYSTEM              */
/* =========================================== */

.promo-banner {
    position: relative;
    padding: 100px 0;
    color: #fff;
    text-align: center;
    overflow: hidden;
}

.promo-banner__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: 0;
    transition: transform 0.4s ease;
}

.promo-banner__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.promo-banner__inner {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
}

.promo-banner__icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: 1.5px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 1.6rem;
    color: #fff;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.promo-banner:hover .promo-banner__icon {
    transform: scale(1.08) translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

.promo-banner__title {
    font-family: var(--font-headings);
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 16px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.25);
    line-height: 1.25;
}

.promo-banner__subtitle {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.85);
    max-width: 600px;
    margin: 0 auto 24px;
    line-height: 1.7;
}

.promo-banner__divider {
    width: 50px;
    height: 3px;
    background: rgba(255,255,255,0.4);
    margin: 0 auto 32px;
    border-radius: 2px;
}

.promo-banner__btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 50px;
    padding: 16px 38px;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.5px;
    border: 2px solid rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.promo-banner__btn:hover {
    background: #fff;
    border-color: #fff;
    color: #1a202c;
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.2);
}

.promo-banner__btn--gold {
    border-color: var(--gallery-accent, #E0C97F);
    color: var(--gallery-accent, #E0C97F);
}
.promo-banner__btn--gold:hover {
    background: var(--gallery-accent, #E0C97F);
    border-color: var(--gallery-accent, #E0C97F);
    color: #0A0A0A;
}

/* --- News Promo (Purple) --- */
.promo-banner--news .promo-banner__overlay {
    background: linear-gradient(135deg, rgba(88,107,210,0.88) 0%, rgba(108,65,152,0.9) 100%);
}

/* --- Weather Promo (Dark Blue) --- */
.promo-banner--weather .promo-banner__overlay {
    background: linear-gradient(135deg, rgba(30,55,90,0.88) 0%, rgba(52,73,94,0.9) 100%);
}

/* --- Library Promo (Teal) --- */
.promo-banner--library .promo-banner__overlay {
    background: linear-gradient(135deg, rgba(18,95,115,0.88) 0%, rgba(22,140,170,0.9) 100%);
}

/* --- Gallery Promo (Dark Luxury) --- */
.promo-banner--gallery {
    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a2e 100%);
}
.promo-banner--gallery .promo-banner__overlay {
    background: radial-gradient(ellipse at center, rgba(224,201,127,0.06) 0%, transparent 60%);
}

/* Promo responsive */
@media (max-width: 768px) {
    .promo-banner { padding: 70px 0; }
    .promo-banner__bg { background-attachment: scroll; }
    .promo-banner__btn { padding: 14px 30px; font-size: 0.92rem; }
    .promo-banner__icon { width: 60px; height: 60px; font-size: 1.3rem; margin-bottom: 20px; }
}

@media (max-width: 480px) {
    .promo-banner { padding: 56px 0; }
    .promo-banner__title { font-size: 1.8rem; }
    .promo-banner__subtitle { font-size: 1rem; }
}


/* =========================================== */
/* CONTACT SECTION ENHANCEMENTS                */
/* =========================================== */

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

.contact-info-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(180, 0, 0, 0.06);
    color: var(--primary-color);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.contact-info-item:hover .contact-info-icon {
    background: var(--primary-color);
    color: #fff;
    transform: scale(1.05);
}

.contact-info-text {
    padding-top: 8px;
    font-size: 0.95rem;
    color: var(--text-color);
    line-height: 1.5;
}

/* Working hours table */
.working-hours-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(0,0,0,0.06);
    font-size: 0.9rem;
}

.working-hours-list li:last-child {
    border-bottom: none;
}

.wh-day {
    font-weight: 600;
    color: var(--heading-color);
}

.wh-time {
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
}

.wh-closed {
    color: var(--accent-color);
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Contact info card refinement */
.contact-info {
    position: relative;
    background: #fff;
    padding: 40px;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    height: 100%;
    overflow: hidden;
}

.contact-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
    border-radius: 4px 0 0 4px;
}

.contact-form {
    background: #fff;
    padding: 40px;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    height: 100%;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.3s ease;
}

.contact-form:hover {
    box-shadow: var(--shadow-md);
}

.contact-form h4,
.contact-info h4 {
    font-size: 1.3rem;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

/* Social links in contact */
.contact-info .social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--light-bg-color);
    color: var(--text-color);
    font-size: 1rem;
    margin-right: 10px;
    transition: all 0.3s ease;
}

.contact-info .social-links a:hover {
    background: var(--primary-color);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(180,0,0,0.2);
}

/* Submit button full-width enhancement */
.contact-form .btn-primary.btn-lg.w-100 {
    border-radius: var(--border-radius-md);
    padding: 16px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.contact-form .btn-primary.btn-lg.w-100:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(180,0,0,0.3);
}

@media (max-width: 575.98px) {
    .contact-info, .contact-form { padding: 24px; }
    .contact-info-icon { width: 36px; height: 36px; min-width: 36px; font-size: 0.9rem; }
}


/* =========================================== */
/* SECTION TITLE POLISH                        */
/* =========================================== */

.section-title span::before,
.section-title span::after {
    content: '';
    display: inline-block;
    width: 28px;
    height: 1px;
    background: var(--primary-color);
    vertical-align: middle;
    opacity: 0.4;
}

.section-title span::before { margin-right: 12px; }
.section-title span::after  { margin-left: 12px; }

.section-title h2 {
    position: relative;
}

.section-title h2::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background: var(--primary-color);
    margin: 16px auto 0;
    border-radius: 2px;
}


/* =========================================== */
/* MAP CONTAINER POLISH                        */
/* =========================================== */

.map-container {
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

.map-container iframe {
    width: 100%;
    height: 400px;
    border: 0;
    display: block;
}


/* =========================================== */
/* TEAM CARD ENHANCEMENTS                      */
/* =========================================== */

.team-card-v2 {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.team-card-v2:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border-color: transparent;
}

.team-card-v2-image {
    position: relative;
}

.team-card-v2-image::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.team-card-v2:hover .team-card-v2-image::before {
    opacity: 0.3;
}

/* Swiper overrides for team */
.employees-swiper .swiper-button-next,
.employees-swiper .swiper-button-prev {
    color: var(--primary-color);
    background: rgba(255,255,255,0.9);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.employees-swiper .swiper-button-next::after,
.employees-swiper .swiper-button-prev::after {
    font-size: 1rem;
    font-weight: 700;
}

.employees-swiper .swiper-button-next:hover,
.employees-swiper .swiper-button-prev:hover {
    background: var(--primary-color);
    color: #fff;
    transform: scale(1.08);
}

.employees-swiper .swiper-pagination-bullet-active {
    background: var(--primary-color);
}


/* =========================================== */
/* PROJECT CARDS - MOBILE TOUCH ENHANCEMENT    */
/* =========================================== */

@media (hover: none) and (pointer: coarse) {
    /* On touch devices, always show the hidden info */
    .media-project-card .media-card-hidden-info {
        max-height: 150px;
        opacity: 1;
        margin-top: 8px;
    }
    .media-project-card .media-card-title {
        transform: translateY(-5px);
    }
    .media-card-gradient {
        background: linear-gradient(
            to bottom,
            transparent 0%,
            transparent 25%,
            rgba(0, 0, 0, 0.85) 65%,
            rgba(0, 0, 0, 0.97) 100%
        ) !important;
    }
}


/* =========================================== */
/* SMOOTH SCROLL & SECTION SPACING FIX         */
/* =========================================== */

#projects { scroll-margin-top: 80px; }
#team     { scroll-margin-top: 80px; }
#contact  { scroll-margin-top: 80px; }
#gallery-promo { scroll-margin-top: 80px; }

/* Section dividers */
.section + .promo-banner,
.promo-banner + .section,
.promo-banner + .promo-banner {
    /* No extra gaps between alternating sections */
}
/* FIX: Force interactive elements above any potential overlays/ads */
.promo-banner .container,
.section .container,
.hero-content,
.media-project-card {
    position: relative;
    z-index: 100 !important; /* ვაიძულებთ იყოს ძალიან მაღლა */
    pointer-events: auto; /* ვაიძულებთ კლიკების მიღებას */
}

/* თუ რეკლამის კონტეინერი გამჭვირვალეა და ხელს უშლის, ვცადოთ მისი იზოლირება */
.ad-zone-container { 
    position: relative; 
    z-index: 1; 
}