html {
            scroll-behavior: smooth;
        }

        body {
            transition: .3s;
        }

        .navbar {
            backdrop-filter: blur(10px);
        }

        .hero {
            min-height: 85vh;
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, #0d6efd, #6610f2);
            color: white;
        }

        .hero h1 {
            font-size: clamp(2.5rem, 7vw, 5rem);
        }

        .hero-text {
            max-width: 700px;
            margin: auto;
        }

        .section-title {
            position: relative;
            display: inline-block;
        }

        .section-title::after {
            content: "";
            position: absolute;
            width: 50%;
            height: 3px;
            background: #0d6efd;
            bottom: -10px;
            left: 25%;
            border-radius: 10px;
        }

        .skill-card,
        .project-card,
        .about-card,
        .contact-card {
            transition: .3s;
        }

        .skill-card:hover,
        .project-card:hover {
            transform: translateY(-8px);
        }

        .project-card {
            overflow: hidden;
        }

        .project-top {
            height: 6px;
            background: linear-gradient(90deg, #0d6efd, #6610f2);
        }

        .progress {
            height: 8px;
        }

        .contact-card {
            background: linear-gradient(135deg, #0d6efd, #6610f2);
            color: white;
        }

        .social-link {
            text-decoration: none;
            transition: .2s;
        }

        .social-link:hover {
            transform: translateY(-3px);
        }

        .top-btn {
            position: fixed;
            right: 20px;
            bottom: 20px;
            z-index: 1000;
            width: 45px;
            height: 45px;
            border-radius: 50%;
        }

        .dark {
            background: #121212 !important;
            color: #eee;
        }

        .dark .card,
        .dark .about-card,
        .dark .skill-card,
        .dark .project-card {
            background: #1e1e1e;
            color: #eee;
        }

        .dark .text-secondary {
            color: #aaa !important;
        }

        .dark .bg-light {
            background: #121212 !important;
        }

        .dark .form-control {
            background: #252525;
            color: white;
            border-color: #444;
        }

        .dark .form-control::placeholder {
            color: #888;
        }