 body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            min-height: 100vh;
            background: linear-gradient(135deg, #20599c, #2b86cc, #062a78);
            color: #f8f9fa;
            display: flex;
            flex-direction: column;
            padding: 2rem 1rem;
        }

        .page-shell {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            min-height: calc(100vh - 4rem);
        }

        .site-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1.5rem;
        }

  
        main {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .card {
            border: none;
            border-radius: 0rem;
            overflow: hidden;
        }

        .hero {
            background: #263755;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .hero h1 {
            font-weight: 700;
        }

        .hero p {
            font-size: 1rem;
            color: #d1d5db;
        }

        .form-section {
            background: #ffffff;
            color: #212529;
            padding: 2rem;
        }

        .btn-primary {
            background: #2687d0;
            border: none;
        }

        .btn-primary:hover {
            background: #2687d0;
        }

        /*important class */
        .form__error-text {
            font-size: 13px;
            color: #fc4c3ff0;
        }

        .form__success-text {
            font-size: 16px;
            color: #4caf50;
        }


        .page-shell {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            min-height: calc(100vh - 4rem);
        }

        .site-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1.5rem;
            color: #1c3b20;
        }

.list-group-item {
    padding: var(--bs-list-group-item-padding-y) 0;
}


        .card {
            border-radius: 0rem;
            border: none;
            
        }