/*
    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 Social Icons: Positionierung anpassen */
    .social-icons {
        left: 0 !important;
        margin-left: 0 !important;
        justify-content: center !important;
    }

    /* 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 {
        margin-right: -100px;
        background: linear-gradient(
        to top, #05030f 0%,
            #0c0520 20%,
            #14093a 38%,
            #1e0f5c 54%,
            #3c1a9e 70%,
            #6b48ff 84%,
            #b08aff 100%
        );
        width: 300px !important;
        text-align: center;
        max-width: none;
    }

    p.text-white{
        text-align:right;
        margin-right: 10%;

    }
    #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;
    left: 0px !important;
    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;
}

.btn.btn-primary {
    color: var(--bs-white);
    border: none;
    background: var(--gradient-color) !important;

}

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

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

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


.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: transparent !important;
        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;
    }
}

/* ──────────────────────────────────────
   SOCIAL ICONS – RESPONSIVE & ZENTRIERT
─────────────────────────────────────── */

/* ==============================================
   SOCIAL ICONS – HORIZONTAL, schwarz, rund
   ============================================== */
.social-icons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
    justify-content: center;       /* immer zentriert – wichtig! */
    margin: 25px auto 40px auto;
    padding: 0 10px;
    width: 100%;
    margin-top: 615px !important;
    left: 330px;
    z-index: 9999;
}

.social-icons .btn.btn-sm.btn-primary {
        background: var(--gradient-color) !important;
        color: white !important;
        width: 48px;
        height: 48px;
        border-radius: 8px !important;
        font-size: 1.4rem;
        margin: 0 !important;
        padding: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.25s ease;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }

    .social-icons .btn.btn-sm.btn-primary:hover {
        background: var(--gradient-color-reverse) !important;
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(13,110,253,0.35);
    }

    /* KEIN margin-left mehr – damit alle Icons sichtbar und zentriert sind */
    .social-icons .btn.btn-sm.btn-primary {
        margin-left: 0 !important;
    }
    
.social-icons .btn-primary {
    background-color: var(--gradient-color) !important;
    color: white !important;
    font-weight: 200;
    width: 38px;                   /* feste Breite für einheitliches Aussehen */
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;            /* runde Buttons sehen bei Icons besser aus */
    margin: 0 !important;          /* überschreibt unerwünschte mb-2 Abstände */
    transition: all 0.25s ease;
}

.social-icons .btn-primary:hover {
    background: var(--gradient-color-reverse) !important;
    transform: scale(1.12);
}

/* Dein spezieller linker Abstand bleibt erhalten */
.social-icons .btn-primary {
    margin-left: 210px !important;  /* dein Wert */
}

/* ── Sehr kleine Bildschirme (≤ 576px) ── kompakter ── */
@media (max-width: 576px) {
    .social-icons {
        gap: 5px !important;
        margin-left: -370px;
        margin-top: 420px !important;
    }

    .social-icons .btn.btn-sm.btn-primary {
        width: 35px;
        height: 35px;
        font-size: 1.3rem;
    }
}
/* ────────────────────────────────
   Mobile & Tablet (≤ 991px)
   ──────────────────────────────── */
@media (max-width: 991px) {
    .social-icons {
        gap: 4px;
        justify-content: flex-start;
        padding-left: -30px;           /* etwas Luft vom Rand */
    }

    .social-icons .btn-primary {
        width: 36px;
        height: 36px;
        margin-top: 315px !important;
        margin-left: 0 !important;    /* auf Mobile keinen riesigen linken Abstand */
    }
}

.flag-icon{
    position: relative;
    text-align: center;
    left: 10px;
}

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

    .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: linear-gradient(
        to bottom, #05030f 0%,
            #0c0520 20%,
            #14093a 38%,
            #1e0f5c 54%,
            #3c1a9e 70%,
            #6b48ff 84%,
            #b08aff 100%
        );
        margin-right: 0 !important;          /* ← war schon da – wichtig! */
        width: 100% !important;              /* ← ändern von 330px → 100% */
        max-width: 100vw !important;
    }

    .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: auto;
    height: 100vh;
    margin-right: 97%;                    /* ← bleibt */
    top: 50%;
    transform: translateY(-50%);
    padding-right: 5px !important;
    z-index: 99;
    right: 0;                             /* ← neu – verankert rechts */
    overflow: hidden;                     /* ← neu – verhindert Inhalts-Overflow */
}

.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-left: 8px !;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0px !important;
    color: black;
    transition: 0.5s;
}

.nav-section .navbar .navbar-nav .nav-item {
    height: 40px;
    padding-left: 30px;
    margin-bottom: 3px;
    padding-left: 50px !;
    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-left:110px;
    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;
}

h2.text-body, h5.display-8 {
text-align: center;
margin-top: 30px;
}
.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-top {
    position: fixed;
    left: -210px !important;
    bottom: 0px;
    transition: 0.5s;
    z-index: 9;
    height: 100% !important;
    width: 42px !important;
    background: var(--gradient-color) !important;
}

     .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: linear-gradient(
        to bottom, #05030f 0%,
            #0c0520 20%,
            #14093a 38%,
            #1e0f5c 54%,
            #3c1a9e 70%,
            #6b48ff 84%,
            #b08aff 100%
        );
        margin-right: 0px !important;
        width: 330px !important;
    }

    .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;
}

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


}


}

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

/*** footer Start ***/
/*** footer Start ***/
.footer-content {
    background: var(--gradient-color) !important;
    color: white !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;          /* ← Höhe anpassen nach Geschmack */
    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;
    left: 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);
}

/* 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;
    }
    
    .nav-section .navbar .navbar-nav .nav-item {
    height: 40px;
    padding-left: 10px;
    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;
}
.navbar-nav .nav-link span {
    width: 40px; 
    height: 40px;
    margin-left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: black;
    transition: 0.5s;
}

.nav-section .navbar {
    position: fixed;
    width: auto;
    height: 100vh;
    margin-right: 87% !important;
    top: 50%;
    transform: translateY(-50%);
    padding-right: 5px !important;
    z-index: 99;
    right: 0;                         /* ← neu */
    overflow: hidden;
}

    .modal-close {
    position: absolute;
    top: 10px !important;
    left: 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);
    }
}
/* =========================================================
   TABLET VIEW FIX (992px – 1199px)
   KEINE BESTEHENDE ZEILE WIRD VERÄNDERT
   ========================================================= */

@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;
    }

    .social-icons {
        position: fixed;
        margin-top: 520px !important;
        left: 180px !important;
        gap: 20px !important;
    }

    .social-icons .btn.btn-sm.btn-primary {
        width: 42px;
        height: 42px;
        font-size: 1.2rem;
    }

    .nav-section .navbar {
        margin-right: 90% !important;
    }

    .img-container {
        height: 420px;
    }
}

/* =====================================================
   DESKTOP FIX – stellt ursprüngliche Social Icon Position wieder her
   ===================================================== */

@media (min-width: 1200px) {

    .social-icons {
        margin-top: 590px !important;
        left: -330px !important;
        gap: 30px !important;
    }

}

/* =====================================================
   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;
    }

    .social-icons {
        margin-top: 520px !important;
        left: 220px !important;
        gap: 20px !important;
    }

    .social-icons .btn.btn-sm.btn-primary {
        width: 42px;
        height: 42px;
        font-size: 1.2rem;
    }

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

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

    .social-icons .btn.btn-sm.btn-primary {
        width: 35px;
        height: 35px;
        font-size: 1.3rem;
    }
}