:root {
    --main-color: #ff4081;
    --dark-bg: #1a1a1a;
    --hover-color: #ffc107;
}


.main-header {
    background-color: var(--dark-bg);
}

    .main-header .nav-link {
        color: #fff;
        position: relative;
        transition: color 0.3s;
    }

        .main-header .nav-link::after {
            content: "";
            position: absolute;
            width: 0;
            height: 2px;
            background: var(--main-color);
            left: 50%;
            bottom: 0;
            transition: 0.3s;
        }

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

            .main-header .nav-link:hover::after {
                width: 100%;
                left: 0;
            }

.btn-outline-light:hover {
    background: var(--main-color);
    border-color: var(--main-color);
    color: #fff;
}

.offcanvas {
    background-color: var(--dark-bg);
}

    .offcanvas .nav-link {
        color: #fff;
    }

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

.icon-badge {
    position: relative;
}

    .icon-badge .badge {
        font-size: 0.6rem;
        padding: 3px 6px;
        position: absolute;
        top: -5px;
        right: -10px;
    }

.footer {
    background: #111;
}

    .footer h5,
    .footer h6 {
        color: #fff;
    }

    .footer .footer-links {
        list-style: none;
        padding: 0;
    }

        .footer .footer-links li {
            margin-bottom: 8px;
        }

        .footer .footer-links a {
            color: #bbb;
            text-decoration: none;
            transition: color 0.3s;
        }

            .footer .footer-links a:hover {
                color: var(--main-color);
            }

    .footer .social-icon {
        color: #bbb;
        font-size: 1.1rem;
        display: inline-block;
        transition: color 0.3s, transform 0.3s;
    }

        .footer .social-icon:hover {
            color: var(--main-color);
            transform: translateY(-2px);
        }

.btn-main {
    background: var(--main-color);
    border: none;
    color: #fff;
}

    .btn-main:hover {
        background: #e91e63;
    }