/* ─── HEADER ─── */

header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    min-height: calc(100vh - clamp(40px, 7vw, 90px));
    width: 100%;
}

#header_top {
    display: flex;
    align-items: flex-end;
    width: 100%;
    max-width: 1440px;
    padding: 0 clamp(20px, 3vw, 50px);
    box-sizing: border-box;
    gap: clamp(20px, 4vw, 60px);
}

#bg-shape-container {
    position: relative;
    width: 40vw;
    max-width: 600px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

#bg-shape {
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
}

#bg-shape-container:hover #bg-shape {
    transform: rotate(-20deg);
}

#filip-photo {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 117%;
    height: auto;
    object-fit: contain;
}

#header_right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    align-self: flex-end;
    flex: 1;
    height: clamp(240px, 38vw, 580px);
    padding: clamp(12px, 1.5vw, 20px) 0 clamp(28px, 4vw, 60px) 0;
}

/* ─── TITLE ─── */

#headtitle {
    color: var(--color-white);
    text-align: center;
}

#headtitle h1 {
    font-size: clamp(1.2rem, 5.5vw, 81px);
    margin: clamp(6px, 1.3vw, 18px);
}

#headtitle h2 {
    font-size: clamp(0.7rem, 2.7vw, 38px);
    font-weight: 400;
    margin: 0;
}

/* ─── ARROWS ─── */

#arrow {
    padding-top: clamp(20px, 8vw, 135px);
    display: block;
}

#arrow img {
    width: clamp(14px, 2.7vw, 45px);
    height: auto;
    opacity: 0.6;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#arrow img:hover {
    opacity: 1;
    transform: translateY(5px);
}

#arrow_top {
    display: block;
    text-align: right;
}

#arrow_top img,
#arrow_top_mobile img {
    width: clamp(14px, 2.7vw, 45px);
    height: auto;
    opacity: 0.6;
    transform: rotate(180deg);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#arrow_top img:hover,
#arrow_top_mobile img:hover {
    opacity: 1;
    transform: rotate(180deg) translateY(5px);
}

#arrow_top_mobile {
    display: none;
}

/* ─── SOCIAL ICONS ─── */

#social-icons {
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    gap: clamp(7px, 1vw, 15px);
}

#social-icons a,
#social-icons-footer a {
    opacity: 0.7;
    transition: opacity 0.3s ease;
    display: block;
}

#social-icons a:hover,
#social-icons-footer a:hover {
    opacity: 1;
}

#social-icons a img,
#social-icons-footer a img {
    width: clamp(12px, 1.8vw, 28px);
    height: auto;
    display: block;
}

#social-icons-footer {
    display: flex;
    gap: clamp(8px, 1.3vw, 18px);
}