@import url(bootstrap.min.css);
@import url(bootstrap-icons-1.13.1/bootstrap-icons.min.css);
@import url(layout.css);

.bg {
    color: var(--f);
    background-color: hsla(var(--h) var(--s) var(--l) / var(--t));
}
.bg-blue-100 {
    color: #000;
    background-color: #cfe2ff
}

.bg-blue-200 {
    color: #000;
    background-color: #9ec5fe
}

.bg-blue-300 {
    color: #000;
    background-color: #6ea8fe
}

.bg-blue-400 {
    color: #000;
    background-color: #3d8bfd
}

.bg-blue-500 {
    color: #fff;
    background-color: #0d6efd
}

.bg-blue-600 {
    color: #fff;
    background-color: #0a58ca
}

.bg-blue-700 {
    color: #fff;
    background-color: #084298
}

.bg-blue-800 {
    color: #fff;
    background-color: #052c65
}

.bg-blue-900 {
    color: #fff;
    background-color: #031633
}

.bg-indigo-100 {
    color: #000;
    background-color: #e0cffc
}

.bg-indigo-200 {
    color: #000;
    background-color: #c29ffa
}

.bg-indigo-300 {
    color: #000;
    background-color: #a370f7
}

.bg-indigo-400 {
    color: #fff;
    background-color: #8540f5
}

.bg-indigo-500 {
    color: #fff;
    background-color: #6610f2
}

.bg-indigo-600 {
    color: #fff;
    background-color: #520dc2
}

.bg-indigo-700 {
    color: #fff;
    background-color: #3d0a91
}

.bg-indigo-800 {
    color: #fff;
    background-color: #290661
}

.bg-indigo-900 {
    color: #fff;
    background-color: #140330
}

.bg-purple-100 {
    color: #000;
    background-color: #e2d9f3
}

.bg-purple-200 {
    color: #000;
    background-color: #c5b3e6
}

.bg-purple-300 {
    color: #000;
    background-color: #a98eda
}

.bg-purple-400 {
    color: #000;
    background-color: #8c68cd
}

.bg-purple-500 {
    color: #fff;
    background-color: #6f42c1
}

.bg-purple-600 {
    color: #fff;
    background-color: #59359a
}

.bg-purple-700 {
    color: #fff;
    background-color: #432874
}

.bg-purple-800 {
    color: #fff;
    background-color: #2c1a4d
}

.bg-purple-900 {
    color: #fff;
    background-color: #160d27
}

.bg-pink-100 {
    color: #000;
    background-color: #f7d6e6
}

.bg-pink-200 {
    color: #000;
    background-color: #efadce
}

.bg-pink-300 {
    color: #000;
    background-color: #e685b5
}

.bg-pink-400 {
    color: #000;
    background-color: #de5c9d
}

.bg-pink-500 {
    color: #fff;
    background-color: #d63384
}

.bg-pink-600 {
    color: #fff;
    background-color: #ab296a
}

.bg-pink-700 {
    color: #fff;
    background-color: #801f4f
}

.bg-pink-800 {
    color: #fff;
    background-color: #561435
}

.bg-pink-900 {
    color: #fff;
    background-color: #2b0a1a
}

.bg-red-100 {
    color: #000;
    background-color: #f8d7da
}

.bg-red-200 {
    color: #000;
    background-color: #f1aeb5
}

.bg-red-300 {
    color: #000;
    background-color: #ea868f
}

.bg-red-400 {
    color: #000;
    background-color: #e35d6a
}

.bg-red-500 {
    color: #fff;
    background-color: #dc3545
}

.bg-red-600 {
    color: #fff;
    background-color: #b02a37
}

.bg-red-700 {
    color: #fff;
    background-color: #842029
}

.bg-red-800 {
    color: #fff;
    background-color: #58151c
}

.bg-red-900 {
    color: #fff;
    background-color: #2c0b0e
}

.bg-orange-100 {
    color: #000;
    background-color: #ffe5d0
}

.bg-orange-200 {
    color: #000;
    background-color: #fecba1
}

.bg-orange-300 {
    color: #000;
    background-color: #feb272
}

.bg-orange-400 {
    color: #000;
    background-color: #fd9843
}

.bg-orange-500 {
    color: #000;
    background-color: #fd7e14
}

.bg-orange-600 {
    color: #000;
    background-color: #ca6510
}

.bg-orange-700 {
    color: #fff;
    background-color: #984c0c
}

.bg-orange-800 {
    color: #fff;
    background-color: #653208
}

.bg-orange-900 {
    color: #fff;
    background-color: #331904
}

.bg-yellow-100 {
    color: #000;
    background-color: #fff3cd
}

.bg-yellow-200 {
    color: #000;
    background-color: #ffe69c
}

.bg-yellow-300 {
    color: #000;
    background-color: #ffda6a
}

.bg-yellow-400 {
    color: #000;
    background-color: #ffcd39
}

.bg-yellow-500 {
    color: #000;
    background-color: #ffc107
}

.bg-yellow-600 {
    color: #000;
    background-color: #cc9a06
}

.bg-yellow-700 {
    color: #000;
    background-color: #997404
}

.bg-yellow-800 {
    color: #fff;
    background-color: #664d03
}

.bg-yellow-900 {
    color: #fff;
    background-color: #332701
}

.bg-green-100 {
    color: #000;
    background-color: #d1e7dd
}

.bg-green-200 {
    color: #000;
    background-color: #a3cfbb
}

.bg-green-300 {
    color: #000;
    background-color: #75b798
}

.bg-green-400 {
    color: #000;
    background-color: #479f76
}

.bg-green-500 {
    color: #fff;
    background-color: #198754
}

.bg-green-600 {
    color: #fff;
    background-color: #146c43
}

.bg-green-700 {
    color: #fff;
    background-color: #0f5132
}

.bg-green-800 {
    color: #fff;
    background-color: #0a3622
}

.bg-green-900 {
    color: #fff;
    background-color: #051b11
}

.bg-teal-100 {
    color: #000;
    background-color: #d2f4ea
}

.bg-teal-200 {
    color: #000;
    background-color: #a6e9d5
}

.bg-teal-300 {
    color: #000;
    background-color: #79dfc1
}

.bg-teal-400 {
    color: #000;
    background-color: #4dd4ac
}

.bg-teal-500 {
    color: #000;
    background-color: #20c997
}

.bg-teal-600 {
    color: #000;
    background-color: #1aa179
}

.bg-teal-700 {
    color: #fff;
    background-color: #13795b
}

.bg-teal-800 {
    color: #fff;
    background-color: #0d503c
}

.bg-teal-900 {
    color: #fff;
    background-color: #06281e
}

.bg-cyan-100 {
    color: #000;
    background-color: #cff4fc
}

.bg-cyan-200 {
    color: #000;
    background-color: #9eeaf9
}

.bg-cyan-300 {
    color: #000;
    background-color: #6edff6
}

.bg-cyan-400 {
    color: #000;
    background-color: #3dd5f3
}

.bg-cyan-500 {
    color: #000;
    background-color: #0dcaf0
}

.bg-cyan-600 {
    color: #000;
    background-color: #0aa2c0
}

.bg-cyan-700 {
    color: #fff;
    background-color: #087990
}

.bg-cyan-800 {
    color: #fff;
    background-color: #055160
}

.bg-cyan-900 {
    color: #fff;
    background-color: #032830
}

.bg-gray-100 {
    color: #000;
    background-color: #f8f9fa
}

.bg-gray-200 {
    color: #000;
    background-color: #e9ecef
}

.bg-gray-300 {
    color: #000;
    background-color: #dee2e6
}

.bg-gray-400 {
    color: #000;
    background-color: #ced4da
}

.bg-gray-500 {
    color: #000;
    background-color: #adb5bd
}

.bg-gray-600 {
    color: #fff;
    background-color: #6c757d
}

.bg-gray-700 {
    color: #fff;
    background-color: #495057
}

.bg-gray-800 {
    color: #fff;
    background-color: #343a40
}

.bg-gray-900 {
    color: #fff;
    background-color: #212529
}

.bg-white {
    color: #000;
    background-color: #fff
}

.bg-black {
    color: #fff;
    background-color: #000
}

.grad-1 {
    background: rgb(255, 245, 223); background: linear-gradient(90deg, rgb(255 252 246) 0%, rgb(255 254 242) 49%, rgb(254 254 243) 53%, rgb(243 255 235) 78%, rgb(232 255 255) 100%);
    background: linear-gradient(90deg, #f9f0ef 0%, #f3eded 49%, #f6efee 53%, #deede9 78%, #dbf0eb 100%);
}

/* figure */
.figure1 {
    & .swiper-slide {
        overflow: hidden;
    }

    figure {
        position: relative;
        overflow: hidden;

        img {
            height: 480px;
            width: 100%;
            object-fit: cover;
            object-position: center;
            border-radius: 2rem;
        }

        figcaption {
            position: absolute;
            bottom: 0;
            padding: 0.5rem 1rem;
            text-align: center;
            background-color: hsl(0deg 0% 0% / 66%);
            color: #fff;
            width: 100%;
            border-radius: 2rem;

            a {
                text-decoration: none;
                color: #fff;
            }

            p {
                text-align: center;
            }
        }

        figure:hover figcaption a {
            text-decoration: underline;
        }
    }
}

.figure-style1 {
    figure img {
        height: 250px !important;
    }

    figcaption {
        h4 {
            font-size: 1.1rem !important;
        }

        p {
            font-size: 0.9rem !important;
        }
    }
}
.figure-style2 {
    figure {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        align-items: center;

        img {
            width: 100px;
            height: 100px;
            border: 1px solid var(--bs-border-color);
            object-fit: contain;
            padding: 4px;
        }
    }

    figcaption {
        h4 {
            font-size: 1.1rem !important;
        }

        p {
            font-size: 0.8rem !important;
        }
    }
}
.cattheme {
    border-radius: 0.5rem;
    border-bottom: 1px solid;
    padding: 0.25rem 0.5rem;
    border-left: 0.35rem solid;
    font-size: 1.25rem;
}

/* Custom styling for the upload area */
.uploadArea {
    min-height: 12rem; /* h-48 equivalent */
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s ease-in-out; /* transition-colors equivalent */
    position: relative; /* For positioning the remove button */
    &:hover {
        border-color: rgba(var(--bs-primary-rgb),var(--bs-border-opacity)) !important; /* hover:border-blue-500 equivalent */
    }
}

.imagePreview {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}