/* ===================================
   GoSeva Website - Main Stylesheet
   =================================== */

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333333;
    background-color: #ffffff;
    overflow-x: hidden;
}

/* CSS Variables
   ============= */
:root {
    /* Colors */
    --color-primary: rgb(255, 179, 71);
    --color-primary-hover: rgb(230, 154, 46);
    --color-secondary: rgb(100, 149, 237);
    --color-secondary-hover: rgb(75, 124, 212);
    --color-accent: rgb(146, 227, 169);
    --color-background: rgb(255, 255, 255);
    --color-background-alt: rgb(255, 218, 185);
    --color-text: rgb(51, 51, 51);
    --color-text-light: rgb(128, 138, 153);
    --color-border: rgb(220, 220, 220);
    --color-button-primary: rgb(73, 88, 103);
    --color-button-primary-hover: rgb(48, 63, 78);

    /* Typography */
    --font-primary: 'Nunito', sans-serif;
    --font-secondary: 'Nunito', sans-serif;

    /* Font Sizes */
    --font-size-h1: 42px;
    --font-size-h2: 36px;
    --font-size-h3: 28px;
    --font-size-h4: 24px;
    --font-size-h5: 20px;
    --font-size-h6: 14px;
    --font-size-body: 16px;
    --font-size-body-large: 18px;
    --font-size-body-small: 14px;
    --font-size-nav: 16px;

    /* Mobile Font Sizes */
    --font-size-h1-mobile: 32px;
    --font-size-h2-mobile: 28px;
    --font-size-h3-mobile: 24px;
    --font-size-h4-mobile: 20px;
    --font-size-body-mobile: 15px;

    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;

    /* Layout */
    --container-width: 1240px;
    --header-height: 70px;

    /* Transitions */
    --transition-speed: 0.3s;
    --transition-timing: ease;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 999px;
}

/* Typography
   ========== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-primary);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
}

h1 {
    font-size: var(--font-size-h1);
}

h2 {
    font-size: var(--font-size-h2);
}

h3 {
    font-size: var(--font-size-h3);
}

h4 {
    font-size: var(--font-size-h4);
}

h5 {
    font-size: var(--font-size-h5);
}

h6 {
    font-size: var(--font-size-h6);
    text-transform: uppercase;
}

p {
    margin-bottom: var(--spacing-sm);
    line-height: 1.6em;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-speed) var(--transition-timing);
}

a:hover {
    color: var(--color-primary);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Layout Utilities
   ================ */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

.section {
    padding: var(--spacing-xl) 0;
}

.section--alt {
    background-color: var(--color-background-alt);
}

.section--primary {
    background-color: var(--color-secondary);
    color: white;
}

/* Grid System
   =========== */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(var(--spacing-sm) * -1);
    align-items: stretch;
}

.col {
    flex: 1;
    padding: 0 var(--spacing-sm);
    display: flex;
    flex-direction: column;
}

.col-half {
    flex: 0 0 50%;
    padding: 0 var(--spacing-sm);
    display: flex;
    flex-direction: column;
}

.col-third {
    flex: 0 0 33.333%;
    padding: 0 var(--spacing-sm);
    display: flex;
    flex-direction: column;
}

.col-quarter {
    flex: 0 0 25%;
    padding: 0 var(--spacing-sm);
    display: flex;
    flex-direction: column;
}

/* Text Utilities
   ============== */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-primary {
    color: var(--color-primary);
}

.text-secondary {
    color: var(--color-secondary);
}

.text-light {
    color: var(--color-text-light);
}

/* Spacing Utilities
   ================= */
.mt-0 {
    margin-top: 0;
}

.mt-sm {
    margin-top: var(--spacing-sm);
}

.mt-md {
    margin-top: var(--spacing-md);
}

.mt-lg {
    margin-top: var(--spacing-lg);
}

.mt-xl {
    margin-top: var(--spacing-xl);
}

.mb-0 {
    margin-bottom: 0;
}

.mb-sm {
    margin-bottom: var(--spacing-sm);
}

.mb-md {
    margin-bottom: var(--spacing-md);
}

.mb-lg {
    margin-bottom: var(--spacing-lg);
}

.mb-xl {
    margin-bottom: var(--spacing-xl);
}

.pt-sm {
    padding-top: var(--spacing-sm);
}

.pt-md {
    padding-top: var(--spacing-md);
}

.pt-lg {
    padding-top: var(--spacing-lg);
}

.pt-xl {
    padding-top: var(--spacing-xl);
}

.pb-sm {
    padding-bottom: var(--spacing-sm);
}

.pb-md {
    padding-bottom: var(--spacing-md);
}

.pb-lg {
    padding-bottom: var(--spacing-lg);
}

.pb-xl {
    padding-bottom: var(--spacing-xl);
}

/* Display Utilities
   ================= */
.d-none {
    display: none;
}

.d-block {
    display: block;
}

.d-flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

/* Visibility Utilities
   ==================== */
.hide-mobile {
    display: block;
}

.show-mobile {
    display: none;
}

/* Mobile Responsive Styles
   ======================== */
@media (max-width: 768px) {
    :root {
        --font-size-h1: var(--font-size-h1-mobile);
        --font-size-h2: var(--font-size-h2-mobile);
        --font-size-h3: var(--font-size-h3-mobile);
        --font-size-h4: var(--font-size-h4-mobile);
        --font-size-body: var(--font-size-body-mobile);
    }

    body {
        font-size: 15px;
    }

    .section {
        padding: var(--spacing-md) 0;
    }

    .col,
    .col-half,
    .col-third,
    .col-quarter {
        flex: 0 0 100%;
        margin-bottom: var(--spacing-md);
    }

    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }
}

/* Tablet Responsive Styles
   ======================== */
@media (min-width: 769px) and (max-width: 1024px) {

    .col-third,
    .col-quarter {
        flex: 0 0 50%;
    }
}