:root {
    --bs-font-sans-serif: Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --primary-orange: #F8660A;
    --midnight-blue: #18206fff;
    --deep-navy: #17255aff;
    --champagne-mist: #f5e2c8ff;
    --sweet-salmon: #d88373ff;
    --mahogany-red: #bd1e1eff;
    --midnight-blue-rgb: rgba(24, 32, 111, 1);
    --deep-navy-rgb: rgba(23, 37, 90, 1);
    --champagne-mist-rgb: rgba(245, 226, 200, 1);
    --sweet-salmon-rgb: rgba(216, 131, 115, 1);
    --mahogany-red-rgb: rgba(189, 30, 30, 1);
    --gradient-top: linear-gradient(0deg, #18206fff, #17255aff, #f5e2c8ff, #d88373ff, #bd1e1eff);
    --gradient-right: linear-gradient(90deg, #18206fff, #17255aff, #f5e2c8ff, #d88373ff, #bd1e1eff);
    --gradient-bottom: linear-gradient(180deg, #18206fff, #17255aff, #f5e2c8ff, #d88373ff, #bd1e1eff);
    --gradient-left: linear-gradient(270deg, #18206fff, #17255aff, #f5e2c8ff, #d88373ff, #bd1e1eff);
    --gradient-top-right: linear-gradient(45deg, #18206fff, #17255aff, #f5e2c8ff, #d88373ff, #bd1e1eff);
    --gradient-bottom-right: linear-gradient(135deg, #18206fff, #17255aff, #f5e2c8ff, #d88373ff, #bd1e1eff);
    --gradient-top-left: linear-gradient(225deg, #18206fff, #17255aff, #f5e2c8ff, #d88373ff, #bd1e1eff);
    --gradient-bottom-left: linear-gradient(315deg, #18206fff, #17255aff, #f5e2c8ff, #d88373ff, #bd1e1eff);
    --gradient-radial: radial-gradient(#18206fff, #17255aff, #f5e2c8ff, #d88373ff, #bd1e1eff);
}

.btn-primary {
    --bs-primary: var(--primary-orange);
    --bs-blue: var(--primary-orange);
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--primary-orange);
    --bs-btn-border-color: var(--primary-orange);
    --bs-btn-disabled-bg: var(--primary-orange);
    --bs-btn-disabled-border-color: var(--primary-orange);
}

.btn:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--deep-navy);
    border-color: var(--deep-navy);
}

body {
    background-color: #ffffff;
    color: #212529;
}

.section {
    padding: 80px 0;
}

.section-light {
    background-color: #f8f9fa;
}

.hero {
    padding: 120px 0;
}

section#services .intro {
    max-width: 500px;
}

section#services .fa {
    font-size: 3em;
    line-height: 2;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--deep-navy);
}

.highlight {
    color: var(--primary-orange);
    font-weight: 700;
}

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

.text-deep-navy {
    color: var(--deep-navy);
}

a.brand-name {
    text-decoration: none;
}

.brand-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .brand-container .brand-logo {
        width: 60px;
        height: 60px;
        object-fit: contain;
    }

    .brand-container .brand-v {
        font-size: 60px;
        font-weight: 700;
        color: var(--primary-orange);
        line-height: 1;
    }

    .brand-container .brand-i {
        font-size: 60px;
        font-weight: 700;
        color: var(--deep-navy);
        line-height: 1;
    }

    .brand-container .brand-text {
        line-height: 1.05;
        font-weight: 600;
        letter-spacing: 1px;
    }

        .brand-container .brand-text .brand-software {
            color: var(--deep-navy);
            display: block;
            font-size: 24px;
            font-weight: 700;
            letter-spacing: 3px;
            text-transform: uppercase;
        }

        .brand-container .brand-text .brand-development {
            color: var(--primary-orange);
            display: block;
            font-size: 20px;
            font-weight: 700;
            text-transform: uppercase;
        }

footer {
    background: linear-gradient(0deg, rgba(245, 246, 200, 0.9), rgba(245, 246, 200, 0.9)), var(--champagne-mist);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 575px) {
    .brand-container .brand-logo {
        width: 40px;
        height: 40px;
    }

    .brand-container .brand-v,
    .brand-container .brand-i {
        font-size: 40px;
    }

    .brand-container .brand-text .brand-software {
        font-size: 18px;
        letter-spacing: 2px;
    }

    .brand-container .brand-text .brand-development {
        font-size: 14px;
    }
}