/* Main CSS File - Imports all modular CSS files in optimal order */

/* Core Styles - These should load first */
@import 'core/variables.css';       /* CSS Variables first for dependency */
@import 'core/base.css';            /* Base styles */
@import 'core/theme-transitions.css'; /* Theme transition handling */

/* Components - UI Building blocks */
@import 'components/buttons.css';
@import 'components/header.css';
@import 'components/preloader.css'; /* Load preloader early */
@import 'components/footer.css';

/* Sections - Main content areas */
@import 'sections/hero.css';
@import 'sections/about.css';
@import 'sections/philosophy-carousel.css';
@import 'sections/skills.css';
@import 'sections/projects.css';
@import 'sections/projects-showcase.css';
@import 'sections/testimonials.css';
@import 'sections/contact.css';

/* Animations - Load after content for better performance */
@import 'animations.css';

/* Utilities - Special overrides and helpers */
@import 'utilities/custom.css';
@import 'utilities/hover-effects.css'; /* New hover effects */

/* Responsive styles - Should be loaded last to override other styles */
@import 'core/responsive.css';

/* Flag icon styling - Optimized and consolidated */
.flag-icon {
    margin-right: 0.5rem;
    border-radius: 0.125rem;
    position: relative;
    top: -0.05rem;
    display: inline-block;
    width: 1.25em;
    height: 1em;
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
}

.flag-icon-hr {
    background-image: url(https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/6.6.6/flags/4x3/hr.svg);
}

.flag-icon-gb {
    background-image: url(https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/6.6.6/flags/4x3/gb.svg);
}

.flag-icon-de {
    background-image: url(https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/6.6.6/flags/4x3/de.svg);
}