@media (min-height: 1800px) {
    .contact-overlay {
        height: 480px;
        margin-top: 0 !important;
    }

    .menu-nav {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
        height: 80%;
    }

    .menu-overlay.footer-open .menu-diagonal {
        height: 648px !important;
        text-align: center;
    }

}

@media (min-height: 1000px) and (max-height: 1325px) {
    .hero {
        min-height: 100vh;
    }

    .hero-header-bottom {
        position: relative;
        height: 360px;
    }

    .mail {
        position: absolute;
        left: 0;
        bottom: 40px;

        transform: rotate(-90deg);
        transform-origin: left bottom;
    }
}

@media (min-width: 1600px) {
    .footer-arrow-wrapper {
        right: calc((100vw - 1600px) / 2 + 80px);
    }
}

@media (max-width: 1624px) {
    .contact .container {
        padding: 0 100px 0 104px;
    }
}

@media (max-width: 1024px) {

    .abou,
    .ski,
    .port {
        font-size: 88px !important;
    }
}

@media (max-width: 1024px) and (min-width: 751px) {
    .hero-header-bottom {
        height: 360px;
    }

    .mail {
        transform: translateY(230px) rotate(-90deg);
    }

    .abou,
    .ski,
    .port {
        font-size: 78px;
    }

    .menu-nav a {
        width: 480px !important;
    }

    .overlay-sayhi h2 {
        font-size: 48px !important;
    }

    .menu-overlay.footer-open .menu-diagonal {
        height: 308px !important;
    }
}


@media (min-width: 751px) and (max-width: 999px) {
    .skills-title span {
        display: inline-block;
        transform: translateY(18px);
    }

    .section-divider {
        position: relative;
    }

    .projects-intro {
        padding: 0px 80px;
    }

    .skills-title::before {
        top: 80%;
    }

    .skills-info {
        padding: 0px 20px;
    }

    .skills-title span {
        font-size: 48px;
    }

    .line-box {
        width: 150px;
    }

    .name-box .name {
        font-size: 38px;
    }

    .hero-title {
        font-size: 78px;
    }

    .project-details h3 {
        margin-top: 32px !important;
    }

    .project-header {
        margin-top: 24px;
        margin-bottom: 18px;
    }

    .project-image-wrapper {
        width: 430px !important;
        height: 272px !important;
    }

    .hover-border {
        width: 430px !important;
        height: 272px !important;
    }

    .project-content {
        gap: 10px;
    }

    .project-details,
    .project-number {
        padding: 0 100px 0 60px;
    }

    .project-side .right {
        padding: 0 60px 0 60px;
    }

    .about-image-wrapper img {
        max-width: 280px;
    }

    .references-controls {
        display: flex;
    }

    .ref-btn,
    .ref-dots,
    .ref-dot {
        display: flex;
    }

    .reference-item:not(.active) {
        pointer-events: none;
    }

    .references-list {
        --side-card: 115px;
        --active-card: 245px;
        --card-height: 360px;

        display: flex;
        justify-content: center;
        align-items: center;
        gap: 18px;
        width: 100%;
        position: relative;
        overflow: hidden;
    }

    .reference-item {
        flex: 0 0 var(--side-card);
        min-height: var(--card-height);

        opacity: 0.35;
        border: 4px solid transparent;
        cursor: default;
        overflow: hidden;
        box-sizing: border-box;

        transform: none;

        transition:
            flex-basis 0.35s ease,
            opacity 0.35s ease,
            border-color 0.35s ease,
            box-shadow 0.35s ease;
    }

    .reference-item.active {
        flex-basis: var(--active-card);
        min-height: var(--card-height);
        height: auto;

        opacity: 1;
        border-color: rgba(75, 71, 255, 1);
        box-shadow: 0 0 20px rgba(74, 71, 255, 0.486);

        padding: 32px 24px 28px;
    }

    .reference-item:not(.active) {
        display: flex;
        flex-direction: column;
        justify-content: center;

        padding: 24px 14px;
    }

    .reference-item:not(.active) .reference-header,
    .reference-item:not(.active) .reference-text {
        text-align: center;
    }

    .reference-item:not(.active) .reference-icon img {
        width: 22px;
        height: 22px;
    }

    .reference-item:not(.active) .reference-name {
        display: none;
    }

    .reference-item:not(.active) .reference-role {
        font-size: 7px;
    }

    .reference-item:not(.active) .reference-text {
        font-size: 8px;
        line-height: 1.25;
    }

    .reference-item.active .reference-header {
        text-align: center;
        margin-bottom: 24px;
    }

    .reference-item.active .reference-icon img {
        filter: invert(33%) sepia(99%) saturate(2600%) hue-rotate(236deg) brightness(102%) contrast(102%);
        width: 40px;
        height: 40px;
    }

    .reference-item.active .reference-role {
        margin-top: 8px;
    }

    .reference-item.active .reference-text {
        font-size: 18px;
        line-height: 1.45;
    }

    .references-controls {
        margin-top: 32px;
        justify-content: center;
        align-items: center;
        gap: 32px;
    }

    .ref-btn {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: none;
        background: #000;
        color: #fff;
        font-size: 26px;
        line-height: 1;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .ref-dots {
        gap: 10px;
    }

    .ref-dot {
        width: 12px;
        height: 12px;
        background: #000;
        border-radius: 50%;
        opacity: 0.3;
        transition: background 0.3s ease, opacity 0.3s ease;
    }

    .ref-dot.active {
        background: rgba(75, 71, 255, 1);
        opacity: 1;
    }

    .about-image-wrapper {
        position: relative;
        width: fit-content;
    }

    .about-border {
        opacity: 1;

        position: absolute;

        top: 14px;
        left: 14px;
        right: -14px;
        bottom: -14px;

        border: 4px solid black;

        z-index: 20;
        pointer-events: none;
    }

    .about .right img {
        position: relative;
        z-index: 20;

        width: 280px;
        height: auto;
        margin-top: 0;
    }

    .about .container {
        padding: 0 99px;
        margin-top: 120px;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 40px 0px;
        align-items: start;
    }

    .about-image-wrapper {
        width: auto !important;
    }

    .about .left {
        display: contents;
    }

    .about h2,
    .about .info,
    .about .btn-wrap {
        grid-column: 1;
    }

    .about h2 {
        grid-row: 1;
    }

    .about .info {
        grid-row: 2;
        display: flex;
        flex-direction: column
    }

    .about .btn-wrap {
        grid-row: 3;
        align-self: start;
    }

    .about .right {
        grid-column: 2;
        grid-row: 1 / 4;
    }

    .about .text {
        grid-column: 1 / 3;
        grid-row: 4;
        max-width: 100%;
        text-align: center;
    }

    .about .info .item {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .cta {
        padding: 15px 40px !important;
    }
}

@media (max-width: 900px) {
    .skills-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, 90px);
        justify-content: center;
        gap: 48px 32px;
        padding: 0 35px;
    }
}

@media (min-width: 751px) {
    .email {
        margin-left: -150px;
    }
}

@media (min-width: 1001px) {
    .name-box .name {
        font-size: 48px;
    }

    .hero-title {
        font-size: 128px;
    }

    .about-border {
        margin-top: 80px;
        top: 20px;
        left: 20px;
        right: -20px;
        bottom: -20px;
        opacity: 0;
        position: absolute;
        border: 4px solid black;
        z-index: 1;
        pointer-events: none;
    }

    .about-image-wrapper img {
        max-width: 400px;
    }

    .project-content {
        height: 460px;
        gap: 90px;
    }
}

@media (min-width: 1201px) {
    .project-image-wrapper {
        width: 620px;
        height: 393px;
    }

    .project-details h3 {
        font-size: 45px;
    }

    .hover-border {
        width: 620px;
        height: 393px;
    }
}

@media (max-width: 1000px) {
    .section-divider {
        position: relative;
    }

    .project-content {
        height: auto;
        padding: 0 30px;
        gap: 24px;
        flex-direction: column;
    }

    .project-info-side {
        display: contents;
    }

    .project-header {
        order: 1;
    }

    .project-media-side {
        order: 2;
    }

    .project-details {
        order: 3;
        opacity: 1;
        transform: none;
        height: auto;
    }

    .project-number {
        margin-top: 0;
    }

    .project-image-wrapper img {
        max-width: 100%;
        max-height: none;
    }
}

@media (min-width: 1001px) and (max-width: 1199px) {
    .project-image-wrapper {
        width: 465px;
        height: 294px;
    }

    .hover-border {
        width: 465px;
        height: 294px;
    }
}

@media (max-width: 1200px) {

    .project-details h3 {
        font-size: 38px;
    }
}

@media (max-width: 1300px) {
    .footer-arrow-wrapper {
        padding-right: 100px;
    }

    .skills-note {
        display: block;
        margin-top: 12px;
    }
}

@media (max-width: 750px) {

    .menu-overlay.footer-open .menu-diagonal {
        height: 308px !important;
    }

    .menu-nav a+a {
        height: 80px !important;

    }

    .overlay-sayhi h2::after {
        content: "Say hi!";
        font-size: 48px;
        font-weight: 900;
        letter-spacing: 1%;
    }

    .overlay-sayhi h2 {
        font-size: 0px !important;
    }

    .corner-v {
        width: 4px;
        height: 24px !important;
    }

    .corner-h {
        width: 18px !important;
        height: 4px;
    }

    .menu-nav a {
        width: 280px !important;
    }

    .abou,
    .ski,
    .port {
        font-size: 45px !important;
    }

    .project-side .right {
        position: absolute;
    }

    .project-content .left {
        justify-content: flex-end;
    }

    .header .container,
    .container,
    .about .container,
    .skills .container,
    .project-content {
        padding: 0 24px 0 24px !important;
    }

    .email {
        position: absolute;
        transform: translateY(260px) rotate(-90deg);
        font-size: 18px !important;
        left: 24px;
        left: -130px;
        font-size: 22px;
    }

    .hero-title .title-line,
    .hero-title .second-line {
        font-size: 45px;
        display: block;
        margin-bottom: 12px;
    }

    .title-line {
        padding-left: 15px;
    }

    .line-box {
        width: 180px;
    }

    .line .name {
        font-size: 23px;
    }

    .about h2 {
        font-size: 36px;
        text-align: center;
        padding-bottom: 20px;
    }

    .about .container {
        gap: 10px;
        display: flex;
        flex-direction: column;
    }

    .about .left {
        width: 100%;
        gap: 34px;
    }

    .about .left p,
    span {
        font-size: 20px;
    }

    .about-image-wrapper {
        display: flex !important;
        justify-content: center;
        align-items: center;
        width: 100% !important;
    }

    .about .right img {
        margin-top: auto;
        position: relative;
        height: auto;
        object-fit: cover;
        margin: 0 auto;
    }

    .info {
        padding-top: 0;
    }

    .section-divider .container {
        right: 60px;
        margin-right: auto;
    }

    .references-list {
        display: flex;
        gap: 24px;
        flex-direction: column;
    }

    .skills-title span {
        font-size: 36px;
    }

    .skills-frame::before,
    .skills-frame::after {
        top: 25px;
    }

    .skill img {
        height: 60px;
    }

    .skills-grid {
        margin-top: 63px;
        gap: 25px;
        padding: 0;
    }

    .scroll-link {
        display: block;
    }

    .projects h2 {
        font-size: 36px !important;
    }

    .projects-intro {
        font-size: 20px;
    }

    .project-number {
        font-size: 23px !important;
    }

    .project-image-wrapper {
        width: min(316px, calc(100vw - 48px)) !important;
        height: auto !important;
        aspect-ratio: 316 / 200;
    }

    .project-image-wrapper {
        width: min(360px, calc(100vw - 48px)) !important;
        height: auto !important;
        aspect-ratio: 316 / 200;
    }

    .project-content {
        padding: 0 24px !important;
    }

    .project-media-side {
        width: fit-content;
        max-width: fit-content;
    }

    .project-right .project-media-side {
        margin-left: auto;
        margin-right: -12px;
    }

    .project-left .project-media-side {
        margin-right: auto;
        margin-left: -12px;
    }

    .project-image-wrapper {
        width: min(360px, calc(100vw - 48px)) !important;
        height: auto !important;
        aspect-ratio: 316 / 200;
    }

    .project-image-wrapper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }

    .hover-border {
        width: 100% !important;
        height: 100% !important;
    }

    .project-image-left .hover-circle {
        left: calc(var(--border-offset) + 99%) !important;
    }

    .project-image-right .hover-circle {
        right: calc(var(--border-offset) + 99%) !important;
    }

    .skills-info {
        padding: 20px;
    }

    .references .container h2 {
        font-size: 38px;
    }

    .references-intro p {
        font-size: 20px;
    }

    .contact h2 {
        font-size: 0px;
    }

    .contact h2::after {
        content: "Say hi!";
        font-size: 45px;
        font-weight: 900;
    }

    .contact-form {
        width: 340px;
    }

    .footer-arrow-wrapper {
        position: absolute;
        right: clamp(0px, calc((100vw - 1240px) / 2), 100px) !important;
        bottom: 150px;
        width: 30px;
        height: 60px;
        z-index: 10;
        pointer-events: none;
    }

    .disabled-btn {
        padding: 20px 40px;
    }

    .contact-privacy {
        flex-wrap: wrap;
    }

    .contact-privacy .padding {
        padding-left: 35px;
    }
}

@media (hover: none) {

    .hover-circle::after {
        opacity: 1;
    }

    .project-item.is-hovered .hover-border,
    .project-item.is-hovered .hover-circle,
    .project-item.is-hovered .hover-circle::after {
        opacity: 1;
    }

}