@charset "UTF-8";

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



:root {


    --color-black: #030609;
    --color-black-graphite: #080d12;
    --color-dark-graphite: #101820;
    --color-graphite: #18232c;
    --color-steel: #293640;

    --color-silver: #aeb7be;
    --color-light: #dde3e7;
    --color-white: #f4f6f7;

    /* Brand Red */
    --color-red: #e0002b;
    --color-red-dark: #8f001c;

    /* Brand Blue */
    --color-blue: #0066d6;
    --color-blue-dark: #003b7a;
    --color-blue-deep: #001d3d;
    --color-blue-light: #2f8cff;

    /* Borders */
    --color-border: rgba(174, 183, 190, 0.22);
    --color-border-light: rgba(221, 227, 231, 0.12);

    /* Overlays */
    --color-overlay: rgba(3, 6, 9, 0.72);


    /* -----------------------------------------------------
       TYPOGRAPHY
       ----------------------------------------------------- */

    --font-primary: 'Inter', sans-serif;
    --font-heading: 'Montserrat', sans-serif;


    /* -----------------------------------------------------
       FONT SIZES
       ----------------------------------------------------- */

    --fs-xs: 0.6875rem;
    /* 11px */

    --fs-sm: 0.75rem;
    /* 12px */

    --fs-body-sm: 0.8125rem;
    /* 13px */

    --fs-body: 0.9375rem;
    /* 15px */

    --fs-body-lg: 1rem;
    /* 16px */

    --fs-h6: 1.0625rem;
    /* 17px */

    --fs-h5: 1.25rem;
    /* 20px */

    --fs-h4: 1.5rem;
    /* 24px */

    --fs-h3: 2rem;
    /* 32px */

    --fs-h2: 2.75rem;
    /* 44px */

    --fs-h1: 4rem;
    /* 64px */


    /* -----------------------------------------------------
       FONT WEIGHTS
       ----------------------------------------------------- */

    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;


    /* -----------------------------------------------------
       LINE HEIGHTS
       ----------------------------------------------------- */

    --lh-none: 1;
    --lh-tight: 1.1;
    --lh-heading: 1.2;
    --lh-normal: 1.5;
    --lh-relaxed: 1.7;


    /* -----------------------------------------------------
       LETTER SPACING
       ----------------------------------------------------- */

    --ls-tight: -0.02em;
    --ls-normal: 0;
    --ls-wide: 0.04em;
    --ls-wider: 0.08em;
    --ls-uppercase: 0.12em;


    /* -----------------------------------------------------
       SPACING
       ----------------------------------------------------- */

    --space-1: 0.25rem;
    /* 4px */

    --space-2: 0.5rem;
    /* 8px */

    --space-3: 0.75rem;
    /* 12px */

    --space-4: 1rem;
    /* 16px */

    --space-5: 1.25rem;
    /* 20px */

    --space-6: 1.5rem;
    /* 24px */

    --space-8: 2rem;
    /* 32px */

    --space-10: 2.5rem;
    /* 40px */

    --space-12: 3rem;
    /* 48px */

    --space-16: 4rem;
    /* 64px */

    --space-20: 5rem;
    /* 80px */

    --space-24: 6rem;
    /* 96px */

    --space-32: 8rem;
    /* 128px */


    /* -----------------------------------------------------
       RADIUS
       ----------------------------------------------------- */

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;


    /* -----------------------------------------------------
       BORDERS
       ----------------------------------------------------- */

    --border-width: 1px;


    /* -----------------------------------------------------
       TRANSITIONS
       ----------------------------------------------------- */

    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;


    /* -----------------------------------------------------
       SHADOWS
       ----------------------------------------------------- */

    --shadow-sm:
        0 4px 12px rgba(0, 0, 0, 0.25);

    --shadow-md:
        0 10px 30px rgba(0, 0, 0, 0.35);

    --shadow-lg:
        0 20px 60px rgba(0, 0, 0, 0.45);
}

.header {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    min-height: 88px;

    background: transparent;

    z-index: 1000;
}

.header > .container {
    position: relative;

    height: 100%;

    display: flex;
    align-items: center;
}

.navbar {
    width: 100%;
    height: 100%;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);

    align-items: center;
}

.nav-menu {
    display: flex;
    align-items: center;

    height: 100%;

    margin: 0;
    padding: 0;

    gap: 1.8rem;
}

.nav-left {
    justify-content: flex-end;

    padding-right: 3rem;
}


.nav-right {
    justify-content: flex-start;

    padding-left: 3rem;
}

.nav-item {
    position: relative;

    display: flex;
    align-items: center;
}

.nav-link {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 0.45rem;

    padding: 0.5rem 0;

    color: var(--color-light);

    font-family: var(--font-heading);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);

    line-height: 1;
    letter-spacing: 0.14em;

    text-transform: uppercase;

    white-space: nowrap;

    transition:
        color var(--transition-base);
}

.nav-link:hover {
    color: var(--color-white);
}


.nav-link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 1px;

    background-color: var(--color-red);

    transition:
        width var(--transition-base);
}

.nav-link:hover::after {
    width: 100%;
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown summary {
    list-style: none;

    cursor: pointer;
}

.nav-dropdown summary::-webkit-details-marker {
    display: none;
}


.nav-dropdown summary::marker {
    display: none;
}


.nav-dropdown-toggle {
    border: 0;
    outline: 0;

    background: transparent;
}


.nav-dropdown-toggle .bi {
    font-size: 0.5rem;

    transition:
        transform var(--transition-base);
}

.nav-dropdown[open]
.nav-dropdown-toggle
.bi {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;

    top: calc(100% + 1.5rem);
    left: 50%;

    width: 240px;

    margin: 0;
    padding: 0.5rem 0;

    background-color: rgba(8, 13, 18, 0.97);

    border: 1px solid var(--color-border);

    box-shadow: var(--shadow-md);

    opacity: 0;
    visibility: hidden;

    transform:
        translateX(-50%)
        translateY(-8px);

    transition:
        opacity var(--transition-base),
        visibility var(--transition-base),
        transform var(--transition-base);
}


.nav-dropdown[open]
.nav-dropdown-menu {
    opacity: 1;
    visibility: visible;

    transform:
        translateX(-50%)
        translateY(0);
}

.nav-dropdown-item {
    width: 100%;
}

.nav-dropdown-link {
    display: flex;
    align-items: center;

    width: 100%;

    padding: 0.75rem 1.15rem;

    color: var(--color-silver);

    font-family: var(--font-primary);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);

    line-height: 1.4;

    transition:
        color var(--transition-base),
        background-color var(--transition-base),
        padding-left var(--transition-base);
}


.nav-dropdown-link:hover {
    color: var(--color-white);

    background-color: rgba(255, 255, 255, 0.035);

    padding-left: 1.35rem;
}

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

    justify-self: center;

    width: 190px;

    transition:
        opacity var(--transition-base),
        transform var(--transition-base);
}

.logo img {
    display: block;

    width: 60%;
    height: auto;

    object-fit: contain;
}

.logo:hover {
    opacity: 0.92;

    transform: translateY(-1px);
}

.nav-cta {
    margin-left: 0.4rem;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.85rem;

    min-height: 2.75rem;

    padding: 0.7rem 1rem 0.7rem 1.25rem;

    color: var(--color-white);

    background-color: transparent;

    border: 1px solid var(--color-red);
    border-radius: var(--radius-pill);

    font-family: var(--font-heading);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);

    line-height: 1;
    letter-spacing: 0.12em;

    text-transform: uppercase;

    white-space: nowrap;

    transition:
        color var(--transition-base),
        background-color var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base);
}

.btn-primary:hover {
    color: var(--color-white);

    background-color: var(--color-red);

    border-color: var(--color-red);

    box-shadow:
        0 8px 25px rgba(224, 0, 43, 0.18);
}

.nav-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--color-red);

    font-size: 0.7rem;

    transition:
        color var(--transition-base),
        transform var(--transition-base);
}


.btn-primary:hover .nav-cta-icon {
    color: var(--color-white);

    transform: translateX(3px);
}

.menu-toggle {
    display: none;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    padding: 0;

    color: var(--color-white);

    background: transparent;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-sm);

    font-size: 1.25rem;

    transition:
        color var(--transition-base),
        border-color var(--transition-base),
        background-color var(--transition-base);
}

.menu-toggle:hover {
    color: var(--color-red);

    border-color: var(--color-red);

    background-color: rgba(224, 0, 43, 0.04);
}

.close-menu {
    display: none;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    padding: 0;

    color: var(--color-white);

    background: transparent;

    font-size: 1.1rem;

    transition:
        color var(--transition-base);
}

.close-menu:hover {
    color: var(--color-red);
}


/*FOOTER*/

.footer-main {
    width: 100%;

    background-color: var(--color-black-graphite);

    border-top: 1px solid rgba(174, 183, 190, 0.12);
}

.footer-container {
    display: grid;
    grid-template-columns:
        1.5fr
        0.8fr
        1fr
        1.2fr;

    gap: var(--space-12);

    padding-top: var(--space-14);
    padding-bottom: var(--space-14);
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


.footer-logo-link {
    display: inline-flex;

    text-decoration: none;
}


.footer-logo {
    display: block;

    width: 150px;
    height: auto;
}

.footer-brand-description {
    max-width: 310px;

    margin: var(--space-1) 0 0;

    color: var(--color-silver);

    font-family: var(--font-primary);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-regular);

    line-height: 1.7;
}

.footer-social {
    display: flex;
    align-items: center;

    gap: var(--space-3);

    margin-top: var(--space-6);
}

.footer-social-link {
    width: 38px;
    height: 38px;

    margin-bottom: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--color-light);

    background-color: transparent;

    border: 1px solid rgba(174, 183, 190, 0.25);
    border-radius: 50%;

    text-decoration: none;

    transition:
        color 0.3s ease,
        border-color 0.3s ease,
        background-color 0.3s ease,
        transform 0.3s ease;
}

.footer-social-link i {
    font-size: 15px;
}


.footer-social-link:hover {
    color: var(--color-white);

    background-color: var(--color-red);

    border-color: var(--color-red);

    transform: translateY(-2px);
}


.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


.footer-column-title {
    position: relative;

    margin: 2rem 0 var(--space-6);

    color: var(--color-white);

    font-family: var(--font-primary);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);

    line-height: 1.2;
    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.footer-column-title::before {
    content: "";

    display: block;

    width: 28px;
    height: 2px;

    margin-bottom: var(--space-3);

    background-color: var(--color-red);
}

.footer-navigation-list,
.footer-services-list {
    display: flex;
    flex-direction: column;

    gap: var(--space-3);

    margin: 0;
    padding: 0;

    list-style: none;
}

.footer-navigation-link,
.footer-services-link {
    display: inline-block;

    color: var(--color-silver);

    font-family: var(--font-primary);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-regular);

    line-height: 1.5;

    text-decoration: none;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.footer-navigation-link:hover,
.footer-services-link:hover {
    color: var(--color-white);

    transform: translateX(4px);
}

.footer-contact {
    display: flex;
    flex-direction: column;

    gap: var(--space-5);

    margin: 0;
    padding: 0;
}


.footer-contact-item {
    display: flex;
    align-items: flex-start;

    gap: var(--space-4);
}

.footer-contact-icon {
    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--color-red);

    border: 1px solid rgba(224, 0, 43, 0.4);
    border-radius: 50%;
}


.footer-contact-icon i {
    font-size: 14px;
}


.footer-contact-content {
    display: flex;
    flex-direction: column;

    gap: 4px;
}


.footer-contact-label {
    color: var(--color-silver);

    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: var(--fw-semibold);

    line-height: 1.2;
    letter-spacing: 0.1em;

    text-transform: uppercase;
}

.footer-contact-text,
.footer-contact-link {
    color: var(--color-light);

    font-family: var(--font-primary);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-regular);

    line-height: 1.5;

    text-decoration: none;
}


.footer-contact-link {
    transition: color 0.3s ease;
}

.footer-contact-link:hover {
    color: var(--color-red);
}


.footer-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: var(--space-4);

    margin-top: var(--space-7);
    padding: 13px 20px;

    color: var(--color-white);

    background-color: var(--color-red);

    border: 1px solid var(--color-red);
    border-radius: 999px;

    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: var(--fw-semibold);
    margin-top: 1rem;
    margin-left: 1rem;

    line-height: 1;
    letter-spacing: 0.06em;

    text-transform: uppercase;
    text-decoration: none;

    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.footer-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    transition: transform 0.3s ease;
}


.footer-cta:hover {
    background-color: transparent;

    border-color: var(--color-red);

    transform: translateY(-2px);
}


.footer-cta:hover .footer-cta-icon {
    transform: translate(2px, -2px);
}


/*BOTTOM*/


.footer-bottom {
    width: 100%;

    border-top: 1px solid rgba(174, 183, 190, 0.10);

}


.footer-bottom-container {
    min-height: 40px;

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

    gap: var(--space-6);
}


.footer-copyright {
    margin: 0;

    color: rgba(174, 183, 190, 0.7);

    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: var(--fw-regular);

    line-height: 1.5;
}


.footer-legal {
    display: flex;
    align-items: center;

    gap: var(--space-6);
}


.footer-legal-link {
    color: rgba(174, 183, 190, 0.7);

    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: var(--fw-regular);

    line-height: 1.5;

    text-decoration: none;

    transition: color 0.3s ease;
}


.footer-legal-link:hover {
    color: var(--color-white);
}