[x-cloak] {
    display: none;
}


body {
    background-image: linear-gradient(to top, #cfd9dfd8 0%, #e2ebf0d5 100%);
}


main {
    max-height: 100vh;
    /* Ensure main content fits within the viewport */
    overflow-y: auto;
    /* Enable vertical scrolling */
}

.bg-dark {
    background-color: #2c3e50 !important;
}

.card {
    border-radius: 0.75rem;
}

.table-hover tbody tr:hover {
    background-color: rgba(44, 62, 80, 0.05);
}

.form-control:focus {
    border-color: #2c3e50;
    box-shadow: 0 0 0 0.2rem rgba(44, 62, 80, 0.25);
}

/* static/css/custom.css */
.color-preview {
    width: 40px;
    height: 38px;
    border: 1px solid #dee2e6;
}

.color-box {
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

.form-label {
    font-weight: 500;
    color: #2c3e50;
}

.card-header h3 {
    font-weight: 600;
    letter-spacing: -0.5px;
}

.table th {
    background-color: #f8f9fa;
    color: #2c3e50;
    font-weight: 600;
}

.choices {
    width: 100%;
    /* max-width: 600px; */
}

.choices__inner {
    padding: 0.5rem;
    border-radius: 0.25rem;
    border: 1px solid #ced4da;
}


.hexagon-gallery-dept {
    margin: auto;
    margin-top: 50px;
    max-width: 1000px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: 200px;
    gap: 14px;
    padding-bottom: 50px;
}

.hex {
    display: flex;
    position: relative;
    width: 240px;
    height: 265px;
    /* background-color: #424242; */
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.hex:first-child {
    grid-row-start: 1;
    grid-column: 2 / span 2;
}

.hex:nth-child(2) {
    grid-row-start: 1;
    grid-column: 4 / span 2;
}

.hex:nth-child(3) {
    grid-row-start: 1;
    grid-column: 6 / span 2;
}

.hex:nth-child(4) {
    grid-row-start: 2;
    grid-column: 1 / span 2;
}

.hex:nth-child(5) {
    grid-row-start: 2;
    grid-column: 3 / span 2;
}

.hex:nth-child(6) {
    grid-row-start: 2;
    grid-column: 5 / span 2;
}

.hex:nth-child(7) {
    grid-row-start: 2;
    grid-column: 7 / span 2;
}

.hex:nth-child(8) {
    grid-row-start: 3;
    grid-column: 2 / span 2;
}

.hex:nth-child(9) {
    grid-row-start: 3;
    grid-column: 4 / span 2;
}

.hex:nth-child(10) {
    grid-row-start: 3;
    grid-column: 6 / span 2;
}

.hex img {
    object-fit: fill;
    transform: scale(1.5);
    display: block;
    transition: transform 0.3s ease;
}

.hex:hover img {
    transform: scale(1.1);
}

/* Tablet */
@media (max-width: 1024px) {
    .hexagon-gallery-dept {
        grid-template-columns: repeat(8, 1fr);
        grid-auto-rows: 150px;
        /* gap: 10px; */
    }

    .hex {
        width: 200px;
        height: 225px;
    }
}

/* Small tablet / large phone */
@media (max-width: 768px) {
    .hexagon-gallery-dept {
        grid-template-columns: repeat(8, 1fr);
        grid-auto-rows: 140px;
        /* gap: 8px; */
    }

    .hex {
         
        width: 150px;
        height: 175px;
    
        -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    }
}

/* Mobile */
@media (max-width: 480px) {
    .hexagon-gallery-dept {
        grid-template-columns: repeat(8, 1fr);
        grid-auto-rows: 60px;
        gap: 6px;
    }

    .hex {
           
        width: 50px;
        height: 75px;


        -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    }
}

.typewriter {
    display: inline-block;
    overflow: hidden;
    border-right: .15em solid #222;
    white-space: nowrap;
    width: 7.5ch;
    /* 7 characters: 47POTUS */
    animation: typing 6s steps(7, end) infinite, blink-caret 0.7s step-end infinite;
    font-family: inherit;
    vertical-align: bottom;
}

@keyframes typing {

    /* 0% to 50%: typing (first 3s of 6s) */
    0% {
        width: 0
    }

    50% {
        width: 7.5ch
    }

    /* 50% to 83%: hold (next 2s of 3s) */
    83% {
        width: 7.5ch
    }

    /* 83% to 100%: erase instantly */
    84% {
        width: 0
    }

    100% {
        width: 0
    }
}

@keyframes blink-caret {

    0%,
    100% {
        border-color: transparent
    }

    50% {
        border-color: #222
    }
}