/* 
@author: Khatik Sahil 
@version: 1.0.0 
@since: 2025-10-22 
*/
/*---------------------------------- CSS Variables ----------------------------------*/
:root {
    --me-brown-hex: #5D1F2D;
    --me-brown-rgb: 93, 31, 45;
    --me-golden-hex: #9E772C;
    --me-golden-rgb: 158, 119, 44;
    --me-bg: #FFF5EC;
    --me-bg-rgb: 255, 245, 236;
    --me-font: 'Libre Bodoni', serif;
    --me-font-secondary: 'Poppins', sans-serif;
    --dark-color: #1a1a1a;
    --light-color: #f8f9fa;
    --header-height: 80px;
    --background-color: #0a0a0a;

    /* Breakpoints (Mobile → Desktop) */
    --breakpoint-xs: 480px;
    /* Extra Small - Mobile Portrait */
    --breakpoint-sm: 767px;
    /* Small - Mobile Landscape / Phablet */
    --breakpoint-md: 1023px;
    /* Medium - Tablet Portrait */
    --breakpoint-lg: 1279px;
    /* Large - Tablet Landscape / Small Laptop */
    --breakpoint-xl: 1535px;
    /* Extra Large - Desktop */
    --breakpoint-2xl: 1920px;
    /* 2XL - Widescreen / 1080p+ monitors */
}

/* Small devices (tablet + mobile): taller header */
@media screen and (max-width: 1023px) {
    :root {
        --header-height: 100px;
    }
}

/*---------------------------------- Animations ----------------------------------*/
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*---------------------------------- Utility Classes ----------------------------------*/
.h-100 {
    height: 100% !important;
}

.w-100 {
    width: 100% !important;
}

.fadeInUp {
    animation: fadeInUp 1s ease-out 0.3s both;
}

.me-btn-primary {
    --bs-btn-bg: var(--me-brown-hex);
    --bs-btn-color: var(--light-color);
    --bs-btn-border-color: var(--me-brown-hex);
    --bs-btn-hover-color: var(--light-color);
    --bs-btn-hover-bg: var(--me-golden-hex);
    --bs-btn-hover-border-color: var(--me-golden-hex);
    --bs-btn-focus-shadow-rgb: 248, 249, 250;
    --bs-btn-active-color: var(--light-color);
    --bs-btn-active-bg: var(--me-golden-hex);
    --bs-btn-active-border-color: var(--me-golden-hex);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #f8f9fa;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #f8f9fa;
    --bs-gradient: none;
}

.me-form-control {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--me-brown-hex);
    background-color: transparent;
    padding: 10px;
    margin-bottom: 10px;
    font-style: italic;
}

.me-form-control:focus {
    outline: 1px solid var(--me-brown-hex);
    border-radius: 2px;
    background-color: #fff;
}

.object-fit-cover {
    object-fit: cover;
}