/*
    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
*/

/* Fix für Desktop-Ansicht: Kein horizontales Scrollen */
@media (min-width: 992px) {
    html, body {
        overflow-x: hidden !important;
        width: 100vw !important;
        max-width: 100% !important;
        position: relative;
    }

    .container-fluid {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    /* Fix für Bootstrap-Grid: Verhindert Überlauf */
    .row {
        width: 100%;
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Fix für alle Bilder und Medien: Verhindert Überlauf */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Fix für Portfolio-Galerie: Gleichmäßige Breite */
    .portfolio-gallery {
        width: 100%;
        max-width: 100%;
    }

    /* Fix für Navbar: Positionierung anpassen */
    .nav-section .navbar {
        right: 0;
        transform: none;
    }
}

:root {
    --gradient-color: linear-gradient(
        to bottom,
        #05030f 0%,
        #0c0520 20%,
        #14093a 38%,
        #1e0f5c 54%,
        #3c1a9e 70%,
        #6b48ff 84%,
        #b08aff 100%
    );
    --gradient-color-reverse: linear-gradient(
        to top,
        #05030f 0%,
        #0c0520 20%,
        #14093a 38%,
        #1e0f5c 54%,
        #3c1a9e 70%,
        #6b48ff 84%,
        #b08aff 100%
    );
}

/*** Spinner Start ***/
.container-fluid .header-content,
.container-fluid .about-header,
.container-fluid .education-header,
.container-fluid .experience-header,
.container-fluid .skills-header,
.container-fluid .service-header,
.container-fluid .portfolio-header,
.container-fluid .blog-header,
.container-fluid .testimonial-header,
.container-fluid .contact-header {
    background: var(--gradient-color);
}

#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

/*** Spinner End ***/

.back-to-top {
    position: fixed;
    right: 0px;
    bottom: 0px;
    transition: 0.5s;
    z-index: 9;
    height: 100% !important;
    width: 39px !important;
    background: var(--gradient-color) !important;
}


/*** Button Start ***/
.btn {
    font-weight: 600;
    transition: .5s;
}

.btn-square {
    width: 32px;
    height: 32px;
}

.btn-sm-square {
    width: 34px;
    height: 34px;
}

.btn-md-square {
    width: 40px;
    height: 40px;
}

.btn-lg-square {
    width: 46px;
    height: 46px;
}

.btn-xl-square {
    width: 56px;
    height: 56px;
}

.btn-square,
.btn-sm-square,
.btn-md-square,
.btn-lg-square,
.btn-xl-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}

/* -- ANPASSUNG: Alle Buttons mit dem Gradient -- */
.btn.btn-primary {
    color: var(--bs-white) !important;
    border: none;
    background: var(--gradient-color) !important;
}

.button-container-mobile.btn.btn-primary{
    margin-right: 200px !important;
    margin-top: 300px !important;

}


.btn-primary {
    background: var(--gradient-color) !important;
    gap: -20px;
    margin-top: -5px !important;
    margin-left: 210px !important;
    font-weight: 200;
}

.btn.btn-primary:hover {
    background: var(--gradient-color-reverse) !important;
    color: var(--bs-white) !important;
}

/* -- Kontakt-Icons (Adresse, E-Mail, Telefon) -- */
.btn-xl-square.bg-primary {
    background: var(--gradient-color) !important;
    color: white !important;
    border: none;
    transition: all 0.3s ease;
}

.btn-xl-square.bg-primary:hover {
    background: var(--gradient-color-reverse) !important;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* -- Social Media Icons im Footer -- */
.btn.btn-light.btn-md-square {
    background: var(--gradient-color) !important;
    color: white !important;
    border: none;
    transition: all 0.3s ease;
}

.btn.btn-light.btn-md-square:hover {
    background: var(--gradient-color-reverse) !important;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn.btn-light {
    color: var(--bs-primary);
    border: none;
}

.btn.btn-light:hover {
    color: var(--bs-white);
    background: var(--gradient-color);
}

.pt-6 {
    padding-top: 60px;
}

.ps-6 {
    padding-left: 60px;
}

.pe-6 {
    padding-right: 60px;
}

.pb-6 {
    padding-bottom: 60px;
}

.sub-title {
    font-family: "Edu TAS Beginner", cursive;
    font-weight: 700;
    font-size: 22px;
    padding-left: 30px;
}

.container-fluid {
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

@media (min-width: 992px) {
    .container-fluid::before {
        content: "";
        position: absolute;
        width: 300px;
        height: 100%;
        top: 0;
        left: 0;
        background:linear-gradient(
        to top,
        #05030f 0%,
        #0c0520 20%,
        #14093a 38%,
        #1e0f5c 54%,
        #3c1a9e 70%,
        #6b48ff 84%,
        #b08aff 100%
    );;
        z-index: -1;
    }
}

@media (max-width: 991px) {
    .container-fluid {
        border: none;
    }

    .container-fluid .header-content,
    .container-fluid .about-header,
    .container-fluid .education-header,
    .container-fluid .experience-header,
    .container-fluid .skills-header,
    .container-fluid .service-header,
    .container-fluid .portfolio-header,
    .container-fluid .blog-header,
    .container-fluid .testimonial-header,
    .container-fluid .contact-header {
        padding: 25px;
        height: 90px !important;
        background: var(--gradient-color);
    }

    .container-fluid .header-img,
    .container-fluid .about-content,
    .container-fluid .education-content,
    .container-fluid .experience-content,
    .container-fluid .skills-content,
    .container-fluid .service-content,
    .container-fluid .portfolio-content,
    .container-fluid .blog-content,
    .container-fluid .testimonial-content,
    .container-fluid .contact-content {
        padding-left: 0;
        padding-top: 25px;
    }
}

/*** Navbar Start ***/
.nav-section {
    position: relative;
}

.nav-section .navbar {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 50%;
    right: calc(40px - 100%);
    transform: translateY(-50%);
    z-index: 99;
}

.navbar.navbar-light {
    background: transparent;
    width: 100%;
}

.navbar .navbar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar .navbar-nav .nav-link {
    width: 100%;
    display: flex;
    align-items: center;
}

.navbar-nav .nav-link span {
    width: 40px;
    height: 40px;
    margin-right: 8px;
    border-right: 2px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: black;
    transition: 0.5s;
}

.nav-section .navbar .navbar-nav .nav-item {
    height: 40px;
    padding: 0;
    margin-bottom: 3px;
    border: 3px solid rgba(0, 0, 0, .08);
    background: rgb(219, 217, 217);
    color: var(--bs-body);
    font-size: 14px;
    font-weight: 700;
    transition: 0.5s;
}

.nav-section .navbar .navbar-nav .nav-item:hover {
    margin-right: calc(100% + 40px);
    color: black;
}

/*** Navbar End ***/

/*** About Start ***/
.about-content .about-img {
    position: relative;
    overflow: hidden;
}

.about-content .about-img .sosial-icon {
    position: absolute;
    width: 100%;
    height: 100%;
    top: -100%;
    left: 0;
    padding: 50px;
    background: rgba(0, 0, 0, .04);
    transition: 0.5s;
}

.about-content .about-img:hover .sosial-icon {
    top: 0;
}

/*** About End ***/

/*** Education Start ***/
.education-content .education-item {
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0, 0, 0, .03);
    transition: 0.5s;
    z-index: 1;
}

.education-content .education-item:hover {
    box-shadow: 0 0 30px rgba(0, 0, 0, .08);
}

.education-content .education-item::after {
    content: "";
    position: absolute;
    width: 25%;
    height: 100%;
    top: 50%;
    left: 0;
    padding: 0;
    transform: translateY(-50%);
    border: 100px solid;
    border-color: var(--bs-light) transparent var(--bs-light) var(--bs-light);
    z-index: -1;
}

.education-content .education-item::before {
    content: "";
    position: absolute;
    width: 25%;
    height: 100%;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    border: 100px solid;
    border-color: var(--bs-light) var(--bs-light) var(--bs-light) transparent;
    z-index: -1;
}

/*** Education End ***/

/*** Experience start ***/
.experience-content .experience-item {
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0, 0, 0, .03);
    transition: 0.5s;
    z-index: 1;
}

.experience-content .experience-item:hover {
    box-shadow: 0 0 30px rgba(0, 0, 0, .08);
}

.experience-content .experience-item::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 100%;
    top: 50%;
    left: 0;
    padding: 0;
    transform: translateY(-50%);
    border: 100px solid;
    border-color: var(--bs-light) transparent var(--bs-light) var(--bs-light);
    z-index: -1;
}

.experience-content .experience-item::before {
    content: "";
    position: absolute;
    width: 2px;
    height: 100%;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    border: 100px solid;
    border-color: var(--bs-light) var(--bs-light) var(--bs-light) transparent;
    z-index: -1;
}

/*** Experience End ***/

/*** Service start ***/
.service-content .service-item {
    box-shadow: 0 0 30px rgba(0, 0, 0, .03);
    transition: 0.5s;
}

.service-content .service-item:hover i {
    color: var(--bs-primary);
}

.service-content .service-item:hover {
    box-shadow: 0 0 30px rgba(0, 0, 0, .08);
}

/*** service End ***/

/*** Portfolio Start ***/
.portfolio-content .portfolio-item .portfolio-img {
    position: relative;
    width: 100%;
    height: 150px;
}

.portfolio-item .portfolio-img .portfolio-img-inner {
    width: 100%;
    height: 150px;
    position: absolute;
    top: 0;
    left: 0;
}

.portfolio-item .portfolio-img .portfolio-img-inner img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.portfolio-content .portfolio-item .view-img {
    display: flex;
    align-items: center;
    justify-content: end;
}

.portfolio-content .portfolio-item .portfolio-img .portfolio-img-inner {
    visibility: hidden;
    transition: 0.5s;
}

.portfolio-content .portfolio-item:hover .portfolio-img .portfolio-img-inner {
    visibility: visible;
    transform: rotate(-6deg);
}

/*** Portfolio End ***/

/*** Testimonial Start ***/
.testimonial-carousel {
    position: relative;
    transition: 0.5s;
}

.testimonial-carousel .testimonial-item {
    padding: 60px;
}

.testimonial-carousel .owl-nav .owl-prev {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-white);
    color: var(--bs-primary);
    transition: 0.5s;
}

.testimonial-carousel .owl-nav .owl-next {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-white);
    color: var(--bs-primary);
    transition: 0.5s;
}

.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
    background: var(--bs-primary);
    color: var(--bs-white);
}

.testimonial-carousel .owl-dots {
    width: 100%;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 60px 60px 60px;
    transition: 0.5s;
}

@media (max-width: 576px) {
    .testimonial-carousel .owl-dots {
        justify-content: start;
    }
    .back-to-tops {
    position: fixed;
    left: 10px !important;
    bottom: 0px;
    transition: 0.5s;
    z-index: 9;
    height: 100% !important;
    width: 39px !important;
    background: var(--gradient-color) !important;
}
    .back-to-tops {
    position:fixed;
    margin-left: 0px !important;
    bottom: 0px;
    transition: 0.5s;
    z-index: 9;
    height: 100% !important;
    width: 39px !important;
            flex-direction:row;

    background: var(--gradient-color) !important;
}

}

.back-to-topsy {
    position:fixed;
    margin-left: 0px !important;
    bottom: 0px;
    transition: 0.5s;
    z-index: 9;
    flex-direction:row;
    height: 100% !important;
    width: 39px !important;
    background: var(--gradient-color) !important;
}
.testimonial-carousel .owl-dots .owl-dot img {
    width: 40px;
    height: 40px;
    margin-right: 15px;
    border: 3px solid var(--bs-white);
    transition: 0.5s;
}

.testimonial-carousel .owl-dots .owl-dot.active img {
    width: 70px;
    height: 70px;
    border: 3px solid var(--bs-primary);
}

/*** Testimonial End ***/

.about-img {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-img img {
    margin-bottom: 15px;
}

.img-container {
    position: relative;
    width: 340;
    height: auto;
}

/*** footer Start ***/
.footer-content {
    background: var(--gradient-color) !important;
    color: white !important;
    text-align: center;
}
.footer-content {
    background: var(--gradient-color) !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    padding-bottom: 50px !important;
}

/* Row im Footer resetten, falls vorhanden */
.footer-content .row {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* Social-Icons oder andere Kinder resetten */
.footer-content [class*="col-"],
.footer-content .col {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

@media (max-width: 991px) {
    .container-fluid .footer-content {
        padding-left: 0;
    }
}


/*** footer End ***/

/* ==========================================================================
   PORTFOLIO GALLERY – 2 Bilder nebeneinander + Hover + Modal
   ========================================================================== */
.portfolio-gallery {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.gallery-item {
    flex: 1;
    min-width: 0;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: all 0.35s ease;
}

.gallery-item:hover {
    transform: scale(1.06);
    box-shadow: 0 12px 35px rgba(0,0,0,0.18);
    z-index: 5;
}

.gallery-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
}

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

/* Vollbild Modal */
.image-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.92);
    overflow: auto;
}

.image-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    max-width: 94vw;
    max-height: 94vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 0 60px rgba(0,0,0,0.7);
    transform: scale(0.92);
    transition: transform 0.4s ease;
}

.image-modal.show .modal-content {
    transform: scale(1);
}

.modal-close {
    position: absolute;
    top: 10px !important;
    right: 0px !important;
    color: #fff;
    font-size: 30px;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.3s;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

.modal-close:hover {
    color: var(--bs-primary);
    transform: rotate(90deg);
}

.desk {
    margin-left: -420px;
    width: 300px !important;
}

.fixen {
    position: relative;
    margin-left: -635px !important;
    margin-top: 170px;
}


/* Responsive – bei sehr kleinen Bildschirmen nur 1 Bild pro Zeile */
@media (max-width: 576px) {
    .portfolio-gallery {
        flex-direction: column;
        gap: 20px;
    }

    .gallery-img {
        height: 260px;
    }

    .modal-close {
        position: absolute;
        top: 10px !important;
        right: 0px !important;
        color: #fff;
        font-size: 30px;
        font-weight: 300;
        cursor: pointer;
        transition: all 0.3s;
        text-shadow: 0 2px 10px rgba(0,0,0,0.6);
    }
   

    .fixen {
        position: relative;
        margin-left: -455px !important;
        margin-top: 170px;
        width: 340px !important;
    }

    .fixens {
        position: relative;
        margin-left: -210px !important;
        margin-top: 70px;
        width: 340px;
    }
    
    .btn-primary{
    background: linear-gradient(
            to bottom, #05030f 0%,
                #0c0520 20%,
                #14093a 38%,
                #1e0f5c 54%,
                #3c1a9e 70%,
                #6b48ff 84%,
                #b08aff 100%
            );
    gap: -20px;
    margin-top: -5px !important;
    margin-left: 210px;
    font-weight: 200;
}
}

/* =====================================================
   TABLET VIEW (992px – 1199px) – nur Tablet Anpassung
   ===================================================== */
@media (min-width: 992px) and (max-width: 1199px) {
    .container-fluid .header-content,
    .container-fluid .about-header,
    .container-fluid .education-header,
    .container-fluid .experience-header,
    .container-fluid .skills-header,
    .container-fluid .service-header,
    .container-fluid .portfolio-header,
    .container-fluid .blog-header,
    .container-fluid .testimonial-header,
    .container-fluid .contact-header {
        width: 240px !important;
        margin-right: -40px !important;
    }

    .nav-section .navbar {
        margin-left: 90px !important;
    }
}

@media (max-width: 776px) {
    
}

/* RTL-Anpassungen */
[dir="rtl"] .navbar-nav {
    float: right;
    text-align: right;
}

[dir="rtl"] .language-dropdown-content {
    right: 0;
    left: auto;
}

/* =====================================================
   TABLET-Korrektur: Buttons (Impressum/Datenschutz/AGB) NICHT nach rechts schieben
   ===================================================== */
@media (min-width: 608px) and (max-width: 991.98px) {

    /* Alle negativen Margins & fixe Left-Werte killen */
    .fixens,
    .fixen,
    .button-container-mobile,
    .col-12.d-lg-none {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 15px !important;   /* Bootstrap-Standard wiederherstellen */
        padding-right: 15px !important;
        left: 0 !important;
        transform: none !important;
    }

    /* Zentrieren + maximale Breite sinnvoll begrenzen */
    .fixens {
        margin: 1.5rem auto !important;
        max-width: 740px;                /* oder 480px – probiere aus was optisch passt */
        width: 100% !important;
        position: relative !important;
    }

    /* Buttons selbst 100% Breite halten, aber nicht verschieben */
    .button-container-mobile {
        width: 100%;
        margin: 0 auto !important;
    }

    .button-container-mobile .btn.btn-primary {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}