@import url('https://fonts.googleapis.com/css2?family=Boogaloo&family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');


html {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;

    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}


*,
*::before,
*::after {
    box-sizing: inherit;
    text-decoration: none;
}


body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul {
    margin: 0;
    padding: 0;
}


:root {
    --blickishhh: #444444;
    --bluishhh: #134287;
    --backgroundishhh: #EEEEEE;
}


body {
    width: 100%;
    max-width: 100%;

    overflow-x: hidden;

    background-color:
        var(--backgroundishhh);

    font-family:
        "Google Sans",
        sans-serif;
}


body.sidebar_open {
    overflow: hidden;
}


img {
    display: block;

    width: 100%;
    max-width: 100%;

    height: auto;
}


button,
input,
select,
textarea {
    font: inherit;
}


button,
a {
    -webkit-tap-highlight-color:
        transparent;
}


.container {
    position: relative;

    width: 100%;
    max-width: 60rem;

    margin:
        0 auto;

    padding:
        0 2rem;

    background-color:
        white;

    z-index: 0;
}


h1,
h2 {
    font-family:
        "Boogaloo",
        sans-serif;

    font-weight: 400;
    font-style: normal;
}


h1 {
    font-size:
        clamp(3rem, 8vw, 5rem);

    line-height: 1;
}


h2 {
    padding-bottom:
        1.5rem;

    font-size:
        clamp(2.2rem, 6vw, 3rem);

    line-height: 1.1;
}


h3 {
    font-size:
        1.3rem;
}


p {
    font-size:
        clamp(1rem, 2vw, 1.2rem);

    line-height:
        1.55;
}


a {
    font-size:
        1.35rem;
}


.magnetLines_container {
    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;
    height: 100dvh;

    display: grid;

    justify-items: center;
    align-items: center;

    overflow: hidden;

    pointer-events: none;

    z-index: -1;
}


.magnetLines_container span {
    display: block;

    transform-origin: center;

    transform:
        rotate(var(--rotate));

    will-change:
        transform;
}


#navbar {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    font-family:
        Calibri,
        sans-serif;

    z-index: 900;

    transition:
        top 0.3s ease;
}


#navbar .navdiv {
    position: relative;

    width: 100%;
    max-width: 60rem;

    min-height:
        4rem;

    margin:
        0 auto;

    padding:
        0.6rem 2rem;

    display: flex;

    align-items: center;
    justify-content: space-between;

    background-color:
        white;

    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.12);
}


#navbar .navdiv .logo {
    min-width: 0;
}


#navbar .navdiv .logo a {
    display: inline-block;

    color:
        var(--blickishhh);

    font-size:
        clamp(1.4rem, 3vw, 2rem);

    font-weight:
        600;

    line-height:
        1;

    white-space:
        nowrap;
}


#navbar .navdiv ul {
    position: absolute;

    left: 50%;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap:
        2rem;

    list-style:
        none;
}


#navbar .navdiv ul li {
    display: block;
}


#navbar .navdiv ul li a {
    display: inline-block;

    margin:
        0;

    color:
        var(--blickishhh);

    font-size:
        1.15rem;

    font-weight:
        bold;

    white-space:
        nowrap;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


@media (hover: hover) and (pointer: fine) {

    #navbar .navdiv ul li a:hover {
        color:
            #111111;

        text-decoration:
            underline;

        transform:
            translateY(-2px);
    }

}


.menu_btn {
    width:
        44px;

    height:
        44px;

    flex:
        0 0 44px;

    margin:
        0;

    padding:
        6px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    background:
        transparent;

    border:
        0;

    cursor:
        pointer;
}


.bar1,
.bar2,
.bar3 {
    width:
        30px;

    height:
        4px;

    margin:
        0;

    flex:
        0 0 4px;

    border-radius:
        20px;

    background-color:
        #333333;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease,
        background-color 0.2s ease;
}


@media (hover: hover) and (pointer: fine) {

    .menu_btn:hover .bar1,
    .menu_btn:hover .bar2,
    .menu_btn:hover .bar3 {
        background-color:
            #871b1b;
    }

}


.change .bar1 {
    transform:
        translateY(9px) rotate(-45deg);
}


.change .bar2 {
    opacity:
        0;
}


.change .bar3 {
    transform:
        translateY(-9px) rotate(45deg);
}


.sidebar {
    position: fixed;

    top: 0;
    left: 0;

    width:
        min(250px, 86vw);

    height:
        100vh;

    height:
        100dvh;

    padding-top:
        60px;

    overflow-x:
        hidden;

    overflow-y:
        auto;

    background-color:
        var(--blickishhh);

    transform:
        translateX(-100%);

    transition:
        transform 0.4s ease;

    z-index:
        1100;
}


.sidebar.open {
    transform:
        translateX(0);
}


.sidebar a {
    display:
        block;

    padding:
        0.7rem 2rem;

    color:
        #a7a7a7;

    font-size:
        1.5rem;

    line-height:
        1.3;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


@media (hover: hover) and (pointer: fine) {

    .sidebar a:hover {
        color:
            #f1f1f1;

        transform:
            translateX(4px);
    }

}


.sidebar .closebtn {
    position:
        absolute;

    top:
        0;

    right:
        1rem;

    width:
        auto;

    margin:
        0;

    padding:
        0.1rem 0.5rem;

    color:
        #a7a7a7;

    font-size:
        4rem;

    line-height:
        1;

    transform:
        none;
}


@media (hover: hover) and (pointer: fine) {

    .sidebar .closebtn:hover {
        color:
            white;

        transform:
            scale(1.05);
    }

}


.sidebar_backdrop {
    position:
        fixed;

    inset:
        0;

    background:
        rgba(0, 0, 0, 0.35);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;

    z-index:
        1000;
}


.sidebar_backdrop.open {
    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;
}


.container .hero_section {
    min-height:
        32rem;

    padding-top:
        7rem;

    padding-bottom:
        3rem;

    display:
        grid;

    grid-template-columns:
        minmax(0, 2fr) minmax(14rem, 1fr);

    grid-template-areas:
        "hero_text_area hero_image_area";

    gap:
        2rem;

    align-items:
        center;
}


.container .hero_section .hero_text {
    min-width:
        0;

    grid-area:
        hero_text_area;

    padding-right:
        1rem;

    font-family:
        "Archivo Black",
        sans-serif;
}


.container .hero_section .hero_text h1 {
    padding-bottom:
        2rem;
}


.container .hero_section .hero_image {
    min-width:
        0;

    grid-area:
        hero_image_area;

    overflow:
        hidden;

    border-radius:
        5px;
}


.container .hero_section .hero_image img {
    width:
        100%;

    height:
        auto;
}


.section_info_box {
    max-width:
        48rem;

    margin:
        0 auto;

    padding:
        3rem 3rem 4rem;

    text-align:
        center;
}


.container .columns {
    display:
        grid;

    grid-template-columns:
        repeat(3,
            minmax(0, 1fr));

    gap:
        1rem;

    margin-bottom:
        5rem;
}


.container .columns .column {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    border:
        3px solid var(--blickishhh);

    border-radius:
        5px;

    background-color:
        white;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.container .columns .column h3,
.container .columns .column p {
    padding:
        1rem 1rem 0.5rem;
}


.container .columns .column p {
    flex:
        1 1 auto;
}


.container .columns .column a {
    display:
        inline-block;

    align-self:
        flex-start;

    margin-top:
        auto;

    padding:
        1rem;

    color:
        var(--blickishhh);

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


@media (hover: hover) and (pointer: fine) {

    .container .columns .column:hover {
        transform:
            translateY(-4px);
    }


    .container .columns .column:hover h3,
    .container .columns .column:hover a {
        text-decoration:
            underline;
    }


    .container .columns .column a:hover {
        transform:
            translateX(3px);
    }

}


.container .studies_section .columns .column img {
    width:
        100%;

    aspect-ratio:
        16 / 9;

    object-fit:
        cover;

    border-radius:
        1px 1px 0 0;
}


@media (hover: hover) and (pointer: fine) {

    .container .studies_section .columns .column:hover {
        box-shadow:
            0 10px 18px rgba(0, 0, 0, 0.12);
    }

}


.job_image_area {
    width:
        100%;

    height:
        90px;

    padding:
        15px;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        flex-start;
}


.container .job_experince_section .columns .column .job_image_area img {
    width:
        60px;

    height:
        60px;

    object-fit:
        contain;

    transform-origin:
        top left;

    transition:
        transform 0.2s ease;
}


@media (hover: hover) and (pointer: fine) {

    .container .job_experince_section .columns .column:hover .job_image_area img {
        transform:
            scale(1.25);
    }

}


.container .projekts_section .galeri {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        flex-start;

    gap:
        1rem;
}


.container .projekts_section .galeri>.column {
    flex:
        1 1 calc((100% - 2rem) / 3);

    max-width:
        calc((100% - 2rem) / 3);

    min-width:
        0;
}


.container .projekts_section .galeri .column img {
    display:
        block;

    width:
        100%;

    margin-top:
        1rem;

    vertical-align:
        middle;
}


.overlay_container {
    position:
        relative;

    overflow:
        hidden;
}


.overlay {
    position:
        absolute;

    inset:
        1rem 0 0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background-color:
        #1d1d1dd3;

    opacity:
        0;

    transform:
        scale(0.98);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;

    pointer-events:
        none;
}


@media (hover: hover) and (pointer: fine) {

    .overlay_container:hover .overlay {
        opacity:
            1;

        transform:
            scale(1);
    }

}


.text {
    max-width:
        calc(100% - 2rem);

    overflow:
        hidden;

    color:
        white;

    text-align:
        center;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


input[type="text"],
select,
textarea {
    width:
        100%;

    margin-top:
        6px;

    margin-bottom:
        16px;

    padding:
        12px;

    border:
        1px solid #cccccc;

    border-radius:
        4px;

    background-color:
        white;
}


textarea {
    min-height:
        200px;

    resize:
        vertical;
}


.conatct_form {
    margin:
        4rem 6rem 2rem;

    padding:
        20px;

    border-radius:
        5px;

    background-color:
        #f2f2f2;
}


.form_buttons {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        0.75rem;
}


.submit_btn {
    min-height:
        44px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        12px 20px;

    overflow:
        hidden;

    border:
        none;

    border-radius:
        5px;

    background-color:
        var(--blickishhh);

    color:
        white;

    font-size:
        1rem;

    line-height:
        1.2;

    cursor:
        pointer;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}


.submit_btn span {
    position:
        relative;

    display:
        inline-block;

    padding-right:
        1.25rem;
}


.submit_btn span::after {
    content:
        "\00bb";

    position:
        absolute;

    top:
        50%;

    right:
        0;

    opacity:
        0;

    transform:
        translate(6px, -50%);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


@media (hover: hover) and (pointer: fine) {

    .submit_btn:hover {
        background-color:
            #2f2f2f;

        transform:
            translateY(-2px);
    }


    .submit_btn:hover span::after {
        opacity:
            1;

        transform:
            translate(0, -50%);
    }

}


.footer_top {
    width:
        100%;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr) auto minmax(0, 1fr);

    align-items:
        center;

    gap:
        1.7rem;

    margin-top:
        5rem;
}


.footer_top .footer_name:first-child {
    text-align:
        left;
}


.footer_top .footer_name:last-child {
    text-align:
        right;
}


.social_panel {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        1rem;
}


.social_panel a {
    width:
        44px;

    height:
        44px;

    flex:
        0 0 44px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--blickishhh);

    font-size:
        1.45rem;

    line-height:
        1;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


@media (hover: hover) and (pointer: fine) {

    .social_panel a:hover {
        color:
            red;

        transform:
            translateY(-5px);
    }

}


.footer_bottom {
    margin-top:
        2rem;

    padding-top:
        15px;

    border-top:
        1px solid var(--blickishhh);

    text-align:
        center;
}


.footer_bottom p {
    margin-bottom:
        0.8rem;

    color:
        gray;

    font-size:
        1rem;
}


@media (max-width: 1053px) {

    #navbar .navdiv ul {
        display:
            none;
    }

}


@media (max-width: 768px) {

    .container {
        padding:
            0 1rem;
    }


    #navbar .navdiv {
        padding:
            0.6rem 1rem;
    }


    .container .hero_section {
        min-height:
            auto;

        grid-template-columns:
            1fr;

        grid-template-areas:
            "hero_text_area"
            "hero_image_area";

        padding-top:
            6.5rem;
    }


    .container .hero_section .hero_text {
        padding-right:
            0;
    }


    .container .hero_section .hero_image {
        max-width:
            28rem;
    }


    .section_info_box {
        padding:
            3rem 1rem;
    }


    .container .columns {
        grid-template-columns:
            repeat(2,
                minmax(0, 1fr));
    }


    .container .projekts_section .galeri>.column {
        flex-basis:
            100%;

        max-width:
            100%;
    }


    .conatct_form {
        margin:
            4rem 0 2rem;
    }


    .footer_top {
        grid-template-columns:
            1fr;

        justify-items:
            center;

        text-align:
            center;

        gap:
            1rem;
    }


    .footer_top .footer_name:first-child,
    .footer_top .footer_name:last-child {
        text-align:
            center;
    }

}


@media (max-width: 600px) {

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


    .container .hero_section {
        padding-top:
            6rem;
    }


    .container .hero_section .hero_text h1 {
        padding-bottom:
            1.5rem;
    }


    .conatct_form {
        padding:
            1rem;
    }


    .form_buttons {
        flex-direction:
            column;
    }


    .submit_btn {
        width:
            100%;
    }

}


@media (max-width: 380px) {

    .container {
        padding:
            0 0.75rem;
    }


    #navbar .navdiv {
        padding:
            0.5rem 0.75rem;
    }


    #navbar .navdiv .logo a {
        font-size:
            1.3rem;
    }


    .section_info_box {
        padding-left:
            0;

        padding-right:
            0;
    }

}


a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline:
        3px solid var(--bluishhh);

    outline-offset:
        2px;
}


@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior:
            auto;
    }


    *,
    *::before,
    *::after {
        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }

}