:root {
    /**
   * colors
   */

    --cadet-blue-crayola: hsl(227, 13%, 73%);
    --maximum-yellow-red: hsl(41, 95%, 61%);
    --medium-sea-green: hsl(142, 43%, 54%);
    --blue-crayola_10: hsla(222, 100%, 61%, 0.05);
    --smocky-black_30: hsla(0, 0%, 6%, 0.3);
    --eerie-black-1: hsl(240, 5%, 8%);
    --eerie-black-2: hsl(228, 9%, 10%);
    --raisin-black: hsl(225, 15%, 16%);
    --blue-crayola: hsl(222, 100%, 61%);
    --roman-silver: hsl(223, 10%, 52%);
    --presian-red: hsl(0, 64%, 52%);
    --gunmetal_50: hsla(230, 16%, 22%, 0.5);
    --gainsboro: hsl(0, 0%, 85%);
    --cultured: hsl(0, 0%, 93%);
    --white_50: hsla(0, 0%, 100%, 0.5);
    --white_30: hsla(0, 0%, 100%, 0.3);
    --white_10: hsla(0, 0%, 100%, 0.1);
    --black_10: hsla(0, 0%, 0%, 0.1);
    --white: hsl(0, 0%, 100%);
    /**
   * gradient color
   */

    --gradient: linear-gradient(90deg, var(--white_10) 0px 77%, var(--white_50) 92%, transparent);
    /**
   * typography
   */

    --ff-dm-sans: 'DM Sans', sans-serif;
    --fs-1: 3.2rem;
    --fs-2: 3rem;
    --fs-3: 2.4rem;
    --fs-4: 2rem;
    --fs-5: 1.8rem;
    --fs-6: 1.5rem;
    --fs-7: 1.4rem;
    --fs-8: 1.2rem;
    --fw-500: 500;
    --fw-700: 700;
    /**
   * spacing
   */

    --section-padding: 100px;
    /**
   * shadow
   */

    --shadow-1: 0px 4px 8px var(--black_10);
    --shadow-2: 0px 30px 10px -20px var(--smocky-black_30);
    --shadow-3: 0px 15px 10px -20px var(--smocky-black_30);
    /**
   * radius
   */

    --radius-12: 12px;
    --radius-24: 24px;
    /**
   * transition
   */

    --transition-1: 0.25s ease;
    --transition-2: 0.5s ease;
    --transition-3: 1s ease;
    --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);
}

body {
    background-color: var(--eerie-black-2);
    color: var(--cadet-blue-crayola) !important;
    transition: var(--transition-3);
}

.logo {
    color: var(--white);
    font-size: 2.5rem;
    font-weight: var(--fw-700);
    display: flex;
    align-items: center;
    gap: 5px;
}

a {
    color: var(--blue-crayola);
}

.content-wrapper {
    background-color: transparent !important;
}

.main-footer {
    background-color: transparent;
    border-top: 0px;
    color: var(--cadet-blue-crayola);
}

.social-list {
    display: flex;
    justify-content: center;
    gap: 20px;
    list-style: none;
}

.social-link {
    font-size: 18px;
    transition: var(--transition-1);
    color: var(--cadet-blue-crayola);
}

    .social-link:hover {
        color: var(--blue-crayola);
    }


*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.main-footer {
    background-color: var(--eerie-black-1);
    font-size: 1.6rem;
}

    .main-footer .row {
        padding-left: 30px;
        padding-right: 30px;
    }

.footer-bottom {
    background-color: var(--eerie-black-2);
    padding-block: 20px;
}

.copyright {
    text-align: center;
    margin-block-end: 20px;
}

.footer-top {
    background-color: var(--eerie-black-1) !important;
    font-size: 1.6rem;
    line-height: 2;
    padding: 30px 0px;
    color: var(--white);
}

    .footer-top a {
        color: var(--white);
    }

        .footer-top a:hover {
            color: var(--blue-crayola);
        }

.main-footer .logo {
    font-size: 3rem;
}

.footer-title {
    color: var(--white);
    font-size: var(--fs-3);
    margin-block: 25px 20px;
}

.footer-list > li:first-child {
    margin-block-end: 20px;
}

li {
    list-style: none;
}

.footer-list-title {
    color: var(--white);
    font-size: var(--fs-3);
    font-weight: var(--fw-700);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.navbar-static-top {
    background-color: var(--eerie-black-1) !important;
}

.navbar-header .logo {
    background-color: transparent !important;
    font-size: 2.6rem !important;
}

    .navbar-header .logo img {
        margin-top: -7px;
    }

.navbar .nav a {
    font-size: var(--fs-7);
}

    .navbar .nav a:hover {
        background: var(--blue-crayola) !important;
    }

.navbar .nav > .active {
    background: var(--blue-crayola) !important;
}