/* Caudex */
.caudex-regular {
    font-family: "Caudex", serif;
    font-weight: 400;
    font-style: normal;
}

.caudex-bold {
    font-family: "Caudex", serif;
    font-weight: 700;
    font-style: normal;
}

.caudex-regular-italic {
    font-family: "Caudex", serif;
    font-weight: 400;
    font-style: italic;
}

.caudex-bold-italic {
    font-family: "Caudex", serif;
    font-weight: 700;
    font-style: italic;
}

/* Inter */
.inter {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "slnt" 0;
}

.inter-bold {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings: "slnt" 0;
}

.inter-regular-italic {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: italic;
    font-variation-settings: "slnt" 0;
}

.inter-bold-italic {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: italic;
    font-variation-settings: "slnt" 0;
}



/* Hexagon */
.hexagon-wrapper {
    /* position: relative; */
    position: absolute;
    bottom: 0;
    right: 0;

    width: 540px;
    height: 500px;
    overflow: hidden;
}

.hexagon {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;

    background: rgb(2, 11, 138);
    background: linear-gradient(300deg, rgba(2, 11, 138, 1) 0%, rgba(9, 9, 121, 1) 60%, rgba(1, 85, 170, 1) 100%);
    clip-path: path('M171 6.4903810567666a45 45 0 0 1 45 0l128.20508075689 74.019237886467a45 45 0 0 1 22.5 38.9711431703l0 148.03847577293a45 45 0 0 1 -22.5 38.9711431703l-128.20508075689 74.019237886467a45 45 0 0 1 -45 0l-128.20508075689 -74.019237886467a45 45 0 0 1 -22.5 -38.9711431703l2.3577493210774e-13 -148.03847577293a45 45 0 0 1 22.5 -38.9711431703');
    border-radius: 5px;

}

.hexagon1 {
    transform: translateX(45%) translateY(80%) rotate(15deg) scale(1.45);
    z-index: 4;
}

.hexagon2 {
    transform: translateX(35%) translateY(75%) rotate(15deg) scale(1.45);
    z-index: 3;
}

.hexagon3 {
    transform: translateX(25%) translateY(70%) rotate(15deg) scale(1.45);
    z-index: 2;
}

@media (max-width: 639px) {

    .hexagon1 {
        transform: translateX(45%) translateY(80%) rotate(15deg) scale(1.25);
    }

    .hexagon2 {
        transform: translateX(35%) translateY(75%) rotate(15deg) scale(1.25);
    }

    .hexagon3 {
        transform: translateX(25%) translateY(70%) rotate(15deg) scale(1.25);
    }
}

.htmx-indicator{
    opacity:0;
    transition: opacity 500ms ease-in;
}
.htmx-request .htmx-indicator{
    opacity:1
}
.htmx-request.htmx-indicator{
    opacity:1
}
