/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Typography */
h1, h2, h3, h4 {
    font-family: 'Merriweather', serif;
    font-weight: 700;
}

.section-title {
    font-size: 2.5rem;
    color: #8B4513;
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(45deg, #D2691E, #CD853F);
    margin: 1rem auto;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(139, 69, 19, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    transition: all 0.3s ease;
    padding: 1rem 0;
}

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

.nav-brand h1 {
    color: #F4E4C1;
    font-size: 1.8rem;
    font-weight: 400;
}

.nav-menu {
    display: flex;
    gap: 2rem;
}

.nav-link {
    color: #F4E4C1;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative;
}

.nav-link:hover {
    color: #DEB887;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: #DEB887;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.bar {
    width: 25px;
    height: 3px;
    background: #F4E4C1;
    margin: 3px 0;
    transition: 0.3s;
}

/* Hero Section */
.hero {
    height: 100vh;
    background: linear-gradient(45deg, rgba(139, 69, 19, 0.7), rgba(210, 105, 30, 0.5)),
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 600"><rect fill="%23F4A460" width="1000" height="600"/><path fill="%23D2691E" d="M0 300L50 280C100 260 200 220 300 200C400 180 500 180 600 200C700 220 800 260 850 280L900 300V600H850C800 600 700 600 600 600C500 600 400 600 300 600C200 600 100 600 50 600H0V300Z"/><path fill="%23CD853F" d="M0 400L50 380C100 360 200 320 300 300C400 280 500 280 600 300C700 320 800 360 850 380L900 400V600H850C800 600 700 600 600 600C500 600 400 600 300 600C200 600 100 600 50 600H0V400Z"/></svg>') center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
}

.hero-content {
    position: relative;
    z-index: 2;
    color: white;
    max-width: 800px;
    padding: 0 20px;
}

.hero-title {
    font-size: 4rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-subtitle {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #F4E4C1;
}

.hero-description {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    line-height: 1.8;
}

.cta-button {
    display: inline-block;
    padding: 15px 35px;
    background: linear-gradient(45deg, #D2691E, #CD853F);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(210, 105, 30, 0.3);
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(210, 105, 30, 0.4);
}

/* About Section */
.about {
    padding: 100px 0;
    background: #FAEBD7;
}

.about-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-text h3 {
    color: #8B4513;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    margin-top: 2rem;
}

.about-text h3:first-child {
    margin-top: 0;
}

.about-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    color: #5D4E37;
}

.about-image .image-placeholder {
    height: 400px;
    background: linear-gradient(135deg, #D2691E, #CD853F);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 10px 30px rgba(139, 69, 19, 0.2);
}

/* Mining Section */
.mining {
    padding: 100px 0;
    background: white;
}

.mining-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
}

.mining-text h3 {
    color: #8B4513;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    margin-top: 2rem;
}

.mining-text h3:first-child {
    margin-top: 0;
}

.mining-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    color: #5D4E37;
}

.mining-features {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.feature-card {
    background: #F4E4C1;
    padding: 2rem;
    border-radius: 15px;
    border-left: 4px solid #D2691E;
    box-shadow: 0 5px 15px rgba(139, 69, 19, 0.1);
}

.feature-card h4 {
    color: #8B4513;
    margin-bottom: 0.5rem;
}

.feature-card p {
    color: #5D4E37;
    font-size: 0.95rem;
}

/* Tourism Section */
.tourism {
    padding: 100px 0;
    background: #FAEBD7;
}

.tourism-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.activity-card {
    background: white;
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(139, 69, 19, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top: 4px solid #D2691E;
}

.activity-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(139, 69, 19, 0.15);
}

.activity-card h3 {
    color: #8B4513;
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.activity-card p {
    color: #5D4E37;
    line-height: 1.7;
}

/* Gallery Section */
.gallery {
    padding: 100px 0;
    background: white;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.gallery-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 15px;
    transition: transform 0.3s ease;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(139, 69, 19, 0.2);
}

.gallery-image.large {
    height: 300px;
}

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

/* Image styling */
.about-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(139, 69, 19, 0.2);
}

.overview-image {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(139, 69, 19, 0.2);
}

.overview-image-tree {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(139, 69, 19, 0.2);
}

.featured-image-section {
    margin-top: 3rem;
    text-align: center;
}

.featured-image {
    width: 100%;
    max-width: 800px;
    height: 400px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(139, 69, 19, 0.2);
    margin: 0 auto;
}

/* Contact Section */
.contact {
    padding: 100px 0;
    background: #FAEBD7;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.contact-info h3,
.contact-form h3 {
    color: #8B4513;
    margin-bottom: 2rem;
    font-size: 1.8rem;
}

.info-item {
    margin-bottom: 2rem;
}

.info-item h4 {
    color: #D2691E;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.info-item p {
    color: #5D4E37;
    line-height: 1.6;
}

.visitor-form {
    background: white;
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(139, 69, 19, 0.1);
}

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

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #8B4513;
    font-weight: 600;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #E5D5B7;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #D2691E;
}

.submit-button {
    width: 100%;
    padding: 15px;
    background: linear-gradient(45deg, #D2691E, #CD853F);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(210, 105, 30, 0.3);
}

/* Footer */
.footer {
    background: #8B4513;
    color: #F4E4C1;
    padding: 60px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-section h3 {
    margin-bottom: 1rem;
    color: #DEB887;
}

.footer-section p {
    line-height: 1.6;
    color: #F4E4C1;
}

.footer-section ul {
    list-style: none;
}

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

.footer-section ul li a {
    color: #F4E4C1;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: #DEB887;
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(244, 228, 193, 0.3);
    color: #DEB887;
}

/* Hero variations for different pages */
.merzouga-hero {
    background: linear-gradient(45deg, rgba(244, 164, 96, 0.8), rgba(210, 105, 30, 0.6)),
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 600"><rect fill="%23F4A460" width="1000" height="600"/><path fill="%23DEB887" d="M0 200L50 220C100 240 200 280 300 300C400 320 500 320 600 300C700 280 800 240 850 220L900 200V600H850C800 600 700 600 600 600C500 600 400 600 300 600C200 600 100 600 50 600H0V200Z"/><path fill="%23F5DEB3" d="M0 350L50 370C100 390 200 430 300 450C400 470 500 470 600 450C700 430 800 390 850 370L900 350V600H850C800 600 700 600 600 600C500 600 400 600 300 600C200 600 100 600 50 600H0V350Z"/></svg>') center/cover;
}

.zagora-hero {
    background: linear-gradient(45deg, rgba(34, 139, 34, 0.7), rgba(144, 238, 144, 0.5)),
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 600"><rect fill="%23228B22" width="1000" height="600"/><path fill="%2390EE90" d="M0 250L50 270C100 290 200 330 300 350C400 370 500 370 600 350C700 330 800 290 850 270L900 250V600H850C800 600 700 600 600 600C500 600 400 600 300 600C200 600 100 600 50 600H0V250Z"/><path fill="%23ADFF2F" d="M0 400L50 420C100 440 200 480 300 500C400 520 500 520 600 500C700 480 800 440 850 420L900 400V600H850C800 600 700 600 600 600C500 600 400 600 300 600C200 600 100 600 50 600H0V400Z"/></svg>') center/cover;
}

.alnif-hero {
    background: linear-gradient(45deg, rgba(139, 69, 19, 0.8), rgba(205, 133, 63, 0.6)),
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 600"><rect fill="%238B4513" width="1000" height="600"/><path fill="%23CD853F" d="M0 150L50 170C100 190 200 230 300 250C400 270 500 270 600 250C700 230 800 190 850 170L900 150V600H850C800 600 700 600 600 600C500 600 400 600 300 600C200 600 100 600 50 600H0V150Z"/><path fill="%23DEB887" d="M0 300L50 320C100 340 200 380 300 400C400 420 500 420 600 400C700 380 800 340 850 320L900 300V600H850C800 600 700 600 600 600C500 600 400 600 300 600C200 600 100 600 50 600H0V300Z"/></svg>') center/cover;
}

.trees-hero {
    background: linear-gradient(45deg, rgba(34, 139, 34, 0.8), rgba(107, 142, 35, 0.7)),
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 600"><rect fill="%2322A522" width="1000" height="600"/><path fill="%236B8E23" d="M0 100L50 120C100 140 200 180 300 200C400 220 500 220 600 200C700 180 800 140 850 120L900 100V600H850C800 600 700 600 600 600C500 600 400 600 300 600C200 600 100 600 50 600H0V100Z"/><path fill="%23228B22" d="M0 250L50 270C100 290 200 330 300 350C400 370 500 370 600 350C700 330 800 290 850 270L900 250V600H850C800 600 700 600 600 600C500 600 400 600 300 600C200 600 100 600 50 600H0V250Z"/><path fill="%2332CD32" d="M0 400L50 420C100 440 200 480 300 500C400 520 500 520 600 500C700 480 800 440 850 420L900 400V600H850C800 600 700 600 600 600C500 600 400 600 300 600C200 600 100 600 50 600H0V400Z"/></svg>') center/cover;
}

/* Hero stats styling */
.hero-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 2rem;
}

.stat {
    text-align: center;
}

.stat h3 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: #F4E4C1;
}

.stat p {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: rgba(139, 69, 19, 0.98);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        padding: 2rem 0;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .nav-toggle.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .about-grid,
    .mining-content,
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .tourism-grid {
        grid-template-columns: 1fr;
    }

    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .container {
        padding: 0 15px;
    }

    .about,
    .mining,
    .tourism,
    .gallery,
    .contact,
    .overview,
    .history,
    .culture,
    .attractions,
    .fossils,
    .local-life,
    .modern,
    .practical-info,
    .date-palms,
    .other-trees,
    .traditional-uses,
    .cultivation,
    .conservation {
        padding: 60px 0;
    }

    .hero-stats {
        flex-direction: column;
        gap: 1rem;
    }

    .hero-stats .stat {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: rgba(0,0,0,0.3);
        padding: 1rem;
        border-radius: 10px;
    }

    .hero-stats .stat h3 {
        margin-bottom: 0;
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-description {
        font-size: 1rem;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .activity-card,
    .visitor-form {
        padding: 1.5rem;
    }

    .feature-card {
        padding: 1.5rem;
    }
}

/* Desert Trees Page Specific Styles */
.feature-list {
    list-style: none;
    padding: 0;
}

.feature-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #E5D5B7;
}

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

.variety-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.variety-card {
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    border-left: 4px solid #228B22;
    box-shadow: 0 5px 15px rgba(139, 69, 19, 0.1);
}

.variety-card h4 {
    color: #228B22;
    margin-bottom: 0.5rem;
}

.trees-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.tree-card {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(139, 69, 19, 0.1);
    border-top: 4px solid #228B22;
}

.tree-card h3 {
    color: #8B4513;
    margin-bottom: 1rem;
}

.tree-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.feature-tag {
    background: #228B22;
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
}

.uses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.use-category {
    background: #F4E4C1;
    padding: 2rem;
    border-radius: 15px;
    border-left: 4px solid #228B22;
}

.use-category h3 {
    color: #8B4513;
    margin-bottom: 1.5rem;
}

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

.use-category li {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(139, 69, 19, 0.2);
}

.use-category li:last-child {
    border-bottom: none;
}

.practice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.practice-card {
    background: #FAEBD7;
    padding: 2rem;
    border-radius: 15px;
    border-top: 4px solid #228B22;
    box-shadow: 0 5px 15px rgba(139, 69, 19, 0.1);
}

.practice-card h3 {
    color: #8B4513;
    margin-bottom: 1rem;
}

.palm-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    margin-top: 2rem;
}

.conservation-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    margin-top: 2rem;
}

.conservation-actions {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.action-card {
    background: #F4E4C1;
    padding: 1.5rem;
    border-radius: 10px;
    border-left: 4px solid #228B22;
}

.action-card h4 {
    color: #8B4513;
    margin-bottom: 0.5rem;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Loading animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeInUp 0.8s ease-out forwards;
}