/* ==========================================================================
   Root Variables
   ========================================================================== */
   :root {
    /* Colors */
    --primary-color: #2e86ab;
    --background-color: #ffffff;
    --accent-pink: #db2777;
    --accent-orange: #fb923c;
    --text-heading: #1a1a1a;
    --text-body: #4a4a4a;
    --text-muted: #6b7280;
    --text-hover: #374151;
    --text-active: #000000;
    --rating-color: #ffd700;
    --faq-answer-bg: #f9fafb;
    --contact-text: #6b7280;
    --contact-input-bg: rgba(255, 255, 255, 0.2);
    --contact-submit-bg: #000000;

    /* Spacing (Fluid Scaling) */
    --spacing-xs: clamp(0.125rem, 1vw, 0.25rem);
    --spacing-sm: clamp(0.25rem, 1.5vw, 0.5rem);
    --spacing-md: clamp(0.5rem, 2vw, 1rem);
    --spacing-lg: clamp(1rem, 3vw, 2rem);
    --spacing-xl: clamp(2rem, 4vw, 4rem);

    /* Border Radius */
    --border-radius-xs: 5px;
    --border-radius-sm: 10px;
    --border-radius-md: 20px;
    --border-radius-lg: 30px;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);

    /* Font Sizes (Fluid Scaling) */
    --font-size-sm: clamp(0.75rem, 2.5vw, 0.875rem);
    --font-size-md: clamp(0.875rem, 3vw, 1rem);
    --font-size-lg: clamp(1rem, 3.5vw, 1.25rem);

    /* Transitions */
    --transition-default: all 0.3s ease;
}

/* ==========================================================================
   Global Styles
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Figtree", sans-serif;
    background-color: var(--background-color);
    color: var(--text-body);
    font-size: var(--font-size-md);
    line-height: 1.6;
    padding-top: clamp(60px, 10vh, 80px);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.transition-all {
    transition: var(--transition-default);
}

.card-base {
    background-color: var(--background-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-lg);
    height: 100%;
    transition: var(--transition-default);
}

.card-base:hover {
    transform: translateY(-5px);
}

.section-padding {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}