/* General Styles */
:root {
    /* Primary Colors */
    --color-primary: #3D8EEB;               /* Main blue */
    --color-primary-light: #88CCFF;         /* Light blue */
    --color-primary-dark: #06283D;          /* Dark blue */
    --color-primary-accent: #5A74EE;        /* Purple-blue gradient accent */
    --color-primary-cta: #0D6EFD; 
    
    /* Secondary Colors */
    --color-secondary: #FF9C39;             /* Orange accent */
    --color-secondary-light: rgba(68, 155, 245, 0.15); /* Light blue transparent */
    
    /* Text Colors */
    --color-text: #212121;                  /* Primary text */
    --color-text-secondary: #3E3E59;        /* Secondary text */
    --color-text-light: #D9D9D9;            /* Light gray text */
    --color-text-dark: #1C1934;             /* Dark text (copyright) */
    --color-text-tertiary: #5C5C75;         /* For less important text */
    
    /* Background Colors */
    --white: #FFFFFF;                       /* White background */
    --color-bg: #FFFFFF;                    /* White background */
    --color-bg-light: #F8F9FA;              /* Light gray background */
    --color-bg-dark: #212529;               /* Dark background */
    
    /* UI Elements */
    --color-border: #EBEBEB;                /* Default border */
    --color-border-light: #EAEAEA;          /* Lighter border */
    --color-border-gray: #D0DDEA;          /* Lighter border */
    --color-border-dark: rgba(18, 42, 82, 0.15); /* Dark border with opacity */
    --color-shadow: rgba(0, 0, 0, 0.1);     /* Default shadow */
    --color-shadow-blue: rgba(48, 124, 213, 0.03); /* Blue tinted shadow */
    
    /* Footer Specific */
    --color-footer-border: var(--color-border);
    --color-footer-corner: var(--color-bg);  /* Corner elements */
    --color-footer-link: var(--color-text-secondary);
    
    /* Social Icons */
    --color-social-bg: var(--color-bg);
    --color-social-border: var(--color-border-dark);
    
    /* Gradients */
    --gradient-header: linear-gradient(272deg, var(--color-primary) 27.37%, var(--color-primary-accent) 53.72%, var(--color-secondary) 78.05%);
    --gradient-footer-border: linear-gradient(272deg, var(--color-primary) 27.37%, var(--color-primary-accent) 53.72%, var(--color-secondary) 78.05%);
    
    /* Effects */
    --border-radius: 8px;
    --border-radius-lg: 24px;               /* Large radius (footer container) */
    --box-shadow: 0 4px 6px var(--color-shadow);
    --box-shadow-sm: 0px 3px 3px var(--color-shadow-blue); /* Small shadow */
    --transition: all 0.3s ease;
    
    /* Spacing */
    --footer-gap: 36px;                     /* Column gap in footer */
}

/* Global Reset */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}

/* Transitions */
:root {
    --trans: all 0.35s ease-in-out;
}

/* HTML and Body */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

html * {
    font-family: 'Segoe UI', Arial, sans-serif;
}

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    color: var(--color-text);
    line-height: 1.6;
    background-color: var(--color-bg);
    margin: 0;
    position: relative;
    overflow-x: hidden;
}

body .container {
    position: relative;
}

/* Global Styles */
.main-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (max-width: 1020px) {
    .container {
        padding: 0 24px;
    }
}

/* Typography */
h1, h2, h3, h4, h5, h6, p{
    margin-block-start: 0;
    margin-block-end: 0;

}

/* Images */
img {
    width: 100%;
    display: block;
}

/* Main Section */
main {
    background-position: center 0px;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Animation Classes */
.fade-in {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 1s ease-out, transform 1s ease-out !important;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    visibility: hidden;
    opacity: 0;
    z-index: 999;
    transition: opacity 0.3s ease-in-out;
}

/* General */
.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text);
}

.row {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
}

strong {
    font-weight: 700;
}