/*
    Website Framework & Source Code
    Developed and maintained by ClaxDesign
    www.ClaxDesign.com

    Author:
    Dr. Omid Ghafouri
    Founder / Designer / Developer

    Copyright © 2014 – Present
    All Rights Reserved.

    Technology:
    HTML5
    CSS3
    JavaScript (ES5 / ES6+)

    Description:
    This website including its structure, layout, visual design,
    interactive components and all custom source code has been
    concepted, designed and programmed by Dr. Omid Ghafouri for
    ClaxDesign.

    The project includes custom front-end architecture, UI/UX design,
    responsive layouts, JavaScript interactions and optimized web
    performance techniques developed specifically for this website.

    License & Usage:
    This code and design are proprietary intellectual property of
    ClaxDesign.

    Unauthorized copying, reproduction, modification, distribution,
    mirroring, scraping or reuse of any part of this website including:

        - HTML structure
        - CSS styling
        - JavaScript logic
        - layout or UI design
        - graphical elements
        - animations or interaction systems

    is strictly prohibited without explicit written permission from
    the author.

    This includes usage for:
        commercial projects
        private websites
        templates
        themes
        frameworks
        derivative works

    Any attempt to copy, reverse engineer, replicate or redistribute
    this website or its source code may result in legal action under
    international copyright and intellectual property laws.

    Developers Notice:
    Viewing source code for educational purposes is permitted.
    Reusing or redistributing the code is not permitted.

    Maintenance:
    This website has been continuously maintained and improved
    since its initial release in 2014.

    Changelog:
        v5.x        current production version
        v4.x        performance optimization and responsive redesign
        v3.x        UI improvements and modern JavaScript updates
        v2.x        structural redesign and responsive layout system
        v1.0        initial website release (2014)

    Official Website:
    https://www.ClaxDesign.com
    https://www.NEXTS.one
*/
/* Container für das Bild */
.img-container {
    position: relative;
}

/* Social Media Icons */
.about-img {
    position: relative;
}

.social-icons {
    position: absolute;
    left: 10px;
    top: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 10;
}

.social-icons .btn {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
/* Button Container für Desktop */
.button-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.button-container .btn {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: none;
    border-radius: 4px;
}

/* Modal Styles */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.modal-overlay.active {
    display: flex;
}

.modal-box {
    width: 100%;
    max-width: 780px;
    max-height: 92vh;
    background: rgba(18, 18, 28, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.65);
    color: #e9e9e9;
}

.modal-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: rgba(26, 26, 36, 0.98);
    padding: 1.1rem 1.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.6rem;
    color: white;
}

.modal-close {
    background: none;
    border: none;
    font-size: 2.8rem;
    font-weight: 300;
    color: #bbb;
    cursor: pointer;
    line-height: 1;
    padding: 0 8px;
}

.modal-close:hover {
    color: white;
}

.modal-scroll-area {
    max-height: calc(92vh - 70px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.modal-body {
    padding: 1.8rem 2.2rem 2.5rem;
    line-height: 1.72;
}

.modal-body h3 {
    color: #d4d4d4;
    margin: 2.2rem 0 1rem;
    font-size: 1.32rem;
}

.modal-body ul {
    padding-left: 1.6rem;
    margin: 1rem 0 1.5rem;
}

.modal-body a {
    color: #8ab4ff;
}

/* Scrollbar */
.modal-scroll-area::-webkit-scrollbar {
    width: 8px;
}

.modal-scroll-area::-webkit-scrollbar-track {
    background: rgba(30, 30, 40, 0.6);
}

.modal-scroll-area::-webkit-scrollbar-thumb {
    background: rgba(110, 110, 130, 0.7);
    border-radius: 4px;
}

.modal-scroll-area::-webkit-scrollbar-thumb:hover {
    background: rgba(150, 150, 170, 0.9);
}

.social-icons{
    margin-top: 20px;
    margin-left: 20px;
    border: 5px;
}