@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
 
        body {
            font-family: "Roboto", sans-serif;
            font-weight: 400;
            font-style: normal;
            scroll-behavior: smooth;
            background-color:#0353a3;
            color: #e0e0e0;
        }

        a {
            text-decoration: none;
        }

        /* Navigation */

        .navbar {
            background: rgba(0, 0, 0, 0.8);
        }

        .navbar-brand,
        .nav-link {
            color: #0fd758 !important;
        }

        .nav-link:hover {
            color: #95e1a0 !important;
        }

        button.navbar-toggler {
            background: #0fd758 !important;
        }

        /* Hero Section */

        .hero {
            background: linear-gradient(135deg,#d103c0,#011b3b);
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            text-align: center;
            padding: 0 15px;
        }

        .hero .icon-large {
            font-size: 8rem;
            color: #0fd758;
            margin-bottom: 20px;
        }

        .hero h1 {
            font-size: 3rem;
            font-weight: bold;
            margin-bottom: 20px;
        }

        .hero p {
            font-size: 1.25rem;
            margin-bottom: 30px;
        }

        .form-control {
            width: rem;
        }

        footer {
            background: #1b1b1be1;
            color: #777;
            padding: 20px 0;
            font-size: 0.9rem;
        }

        footer a {
            color: #0ebc4e;
        }

        footer a:hover {
            color: #acebbb;
        }
        
        .profile-pic {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      object-fit: cover;
      margin: 20px auto;
      border: 2px solid #ccc;
    }