/* Import Modern Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

/* Root Variables */
:root {
    --dark-blue: #0B2D72;
    --blue: #0992C2;
    --light-blue: #0AC4E0;
    --white: #ffffff;
    --text-dark: #1a1a1a;
    --text-light: #666666;
    --gradient-1: linear-gradient(135deg, #0B2D72 0%, #0992C2 50%, #0AC4E0 100%);
    --gradient-2: linear-gradient(135deg, rgba(11, 45, 114, 0.95) 0%, rgba(9, 146, 194, 0.95) 100%);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.15);
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.7;
    color: var(--text-dark);
    overflow-x: hidden;
    background: #fafbfc;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    opacity: 0;
    animation: pageTransition 0.5s ease-in forwards;
    touch-action: pan-y;
    overscroll-behavior-x: none;
    position: relative;
    width: 100%;
    max-width: 100vw;
}

body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100vh;
    touch-action: none;
}

body.page-transition-out {
    animation: pageTransitionOut 0.3s ease-out forwards;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    line-height: 1.3;
}

html {
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: rgba(9, 146, 194, 0.2);
    overflow-x: hidden;
    touch-action: pan-y;
    width: 100%;
    position: relative;
}

html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    overflow-x: hidden;
}

section {
    width: 100%;
    overflow-x: hidden;
    position: relative;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pageTransition {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pageTransitionOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}