* { box-sizing: border-box; margin:0; padding:0; }
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: linear-gradient(180deg, #fff5f5 0%, #ffeaea 50%, #ffd6d6 100%);
    font-family:'Inter', sans-serif;
    color: #1f1f1f;
}

/* Scrollbar hidden */
body::-webkit-scrollbar { display: none; }
body { -ms-overflow-style: none; scrollbar-width: none; }

/* Form Controls */
.input-group {
    border: 1px solid #e5e5e5;
    border-radius: 36px;
    overflow: hidden;
    background: #f9f9f9;
}

/* Icon part */
.input-group-text {
    width: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f0f0;
    border-radius: 36px 0 0 36px;
    border: 1px solid #e5e5e5;
    color: #a00000;
    font-size: 1.2rem;
}


.input-group-text i {
    color: #b80f0f;
    font-size: 18px;
}

.input-group-text svg {
    width: 22px;
    height: 22px;
    fill: #b80f0f; /* deep premium red */
}


.form-control {
    border-radius: 0 36px 36px 0;
    border: none !important;
    box-shadow: none !important;
    background: transparent;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 15px 20px;
}


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

.form-control:focus {
    background: #fff;
    box-shadow: none;
    outline: none;
}



select.form-control {
    appearance: none;
    background: #f9f9f9 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M0 0 L5 6 L10 0" stroke="red" stroke-width="1" fill="none"/></svg>') no-repeat right 12px center;
    background-size: 12px;
}

/* Buttons */
.btn-pill { border-radius: 36px; padding: 15px 15px; font-weight:600; font-size: 1.1rem; transition: all .2s ease-in-out; }
/* Premium gradient buttons */
.btn-signup {
    background: linear-gradient(180deg,#ff4d4d 0%,#b80f0f 100%);
    color:#fff;
    border:none;
    box-shadow: 0 4px 10px rgba(184,15,15,.25);
}
.btn-signup:hover { filter: brightness(.95); transform: translateY(-2px); }

/* Login button (top form) premium design */
.btn-login-top {
    background: linear-gradient(180deg,#ff6b6b 0%,#a00000 100%);
    color:#fff;
    border:none;
    box-shadow: 0 4px 10px rgba(160,0,0,.25);
}
.btn-login-top:hover { filter: brightness(.95); transform: translateY(-2px); }

/* HERO SECTION */
.hero{
    min-height:100svh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding: 2rem;
}
.title {
    font-size: 30px; /* default desktop size */
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #a00000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 480px) {
    .title {
        font-size: 25px;
    }
}
.sub { font-size:22px; color:#444; margin:30px 0; }

footer { text-align:center; padding:1rem 0 2rem; font-size:.9rem; color:#666; }

.modal-content{ border-radius:20px; padding:1rem 1.5rem; box-shadow: 0 10px 35px rgba(0,0,0,.12); }


/* Only Logo with subtle load animation */
.logo-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 15vh;
    margin: 0 auto;
}

.logo {
    width: 80px;
    height: 80px;
    opacity: 0;
    transform: translateY(-10px);
    animation: logoLoad 1s ease forwards;
    animation-delay: 0.3s;
    filter: drop-shadow(0 6px 15px rgba(200,0,0,0.4));
}

@keyframes logoLoad {
    0% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}


/* Responsive */
@media (max-width:992px){ .info-cards .info-card{ width: 80%; margin:1rem auto; } }
@media (max-width:768px){ .section-title{ font-size:1.6rem; } .info-card p{ font-size:0.95rem; } }
@media (max-width:480px){ .info-card{ padding:1.5rem 1rem; } .info-card p{ font-size:0.9rem; } }