@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Cormorant+Garamond:wght@600;700&display=swap');

html {
    scroll-behavior: smooth;
}

:root {
    --primary: #5c4033;
    /* Dark Brown from logo */
    --primary-light: #8b5e3c;
    --accent: #d4af37;
    /* Gold from logo */
    --background: #ffffff;
    --foreground: #1a1a1a;
    --muted: #f5f5f5;
    --muted-foreground: #737373;
    --card: #ffffff;
    --card-foreground: #1a1a1a;
    --border: #e5e5e5;
    --radius: 0.75rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--background);
    color: var(--foreground);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
    font-family: 'Cormorant Garamond', serif;
    letter-spacing: 0.02em;
}

/* Glassmorphism utility */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.animate-fadeIn {
    animation: fadeIn 0.5s ease-out forwards;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--muted);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-light);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* Tubaaty-style vertical hero images */
.hero-image-container {
    height: 80vh;
    overflow: hidden;
    position: relative;
    border-radius: var(--radius);
}

.hero-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.hero-image-container:hover img {
    transform: scale(1.05);
}