/* Paste ALL CSS from the <style> tag in HTML here */
/* This includes all :root variables, header styles, animations, etc. */
/* Add this at the top of main.css: */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;900&display=swap');

:root {
    --primary: #000000;
    --secondary: #d81b60;
    --accent: #642f87;
    --light: #ffffff;
    --dark: #000000;
    --burgundy: #750f30;
    --pink: #e75a82;
    --purple: #642f87;
    --teal: #2be4dc;
    --yellow: #ffdd00;
}

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

/* Continue pasting ALL remaining CSS rules from the HTML */
/* ... (400+ lines of CSS) ... */

.loader-inner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--light);
    border-top: 3px solid var(--secondary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}