:root {
    --navy: #002b5b;
    --blue: #002b5b;
    --red: #002b5b; /* Pink/Red accent from s8.jpg */
    --white: #ffffff;
    --dark-bg: #001e3c;
}

/* Header & Navbar */
.top-bar { background-color: var(--navy); }
.text-navy { color: var(--navy); }
.navbar-brand { font-weight: 800; color: var(--navy) !important; }

/* Buttons */
.btn-red { 
    background-color: var(--red); 
    color: white; 
    border: none; 
    transition: 0.3s;
}
.btn-red:hover { background-color: #002b5b; color: white; }

.btn-outline-navy { 
    border: 2px solid var(--navy); 
    color: var(--navy); 
    font-weight: 600;
}
.btn-outline-navy:hover { background-color: var(--navy); color: white; }

/* Hero Section */
.hero {
    background: linear-gradient(rgba(0,30,60,0.8), rgba(0,30,60,0.8)), 
                url('../image/homeimage.jpeg');
    background-size: cover;
    background-position: center;
    padding: 120px 0 160px 0;
    color: var(--white);
}
.bg-navy { background-color: #002b5b; }

/* Service Cards */
.card-box {
    border-radius: 10px;
    border: none;
    transition: 0.3s;
}
.card-box:hover { transform: translateY(-10px); }
.border-top-blue { border-top: 5px solid var(--blue); }
.text-red { color: #002b5b; }

/* About Badge */
.exp-badge {
    background-color: #002b5b;
    color: white;
    padding: 20px 30px;
    border-radius: 12px;
}

/* Footer */
footer { background-color: var(--dark-bg); }
.border-blue { border-color: var(--blue) !important; }

/* Responsive Fix for s8.jpg */
@media (max-width: 991px) {
    .nav-auth-btns {
        border-top: 1px solid #eee;
        padding-top: 15px;
    }
}
/* Styling for the Banner Header */
.auth-header {
    background: linear-gradient(rgba(0,24,50,0.6), rgba(0,24,50,0.6)), 
                url('../image/signUp.jpg');
    background-size: cover;
    background-position: center;
    min-height: 250px;
}

/* Specific Auth Card Style from your image */
.auth-card {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-right: 15px solid #002b5b; /* The thick curved side border */
    border-bottom: 15px solid #002b5b;
    position: relative;
    z-index: 10;
}

/* Input styling to match sample */
.auth-input {
    background-color: #f8f9fa !important;
    border: 1px solid #eee !important;
    border-radius: 8px !important;
    padding: 12px !important;
}

.auth-input:focus {
    box-shadow: none;
    border-color: var(--red) !important;
}

/* Ensure the logo and toggle button have space on mobile */
.navbar-brand {
    max-width: 70%;
}

@media (max-width: 991px) {
    .navbar-brand img {
        height: 40px; /* Makes logo slightly smaller on phones */
    }
    
    .navbar-nav {
        padding-top: 20px;
        text-align: left;
    }

    /* Fix for the overlapping buttons in s8.jpg */
    .nav-auth-btns {
        margin-top: 15px;
        border-top: 1px solid #eee;
        padding-top: 15px;
    }
}
.brand-text {
    font-family: 'Poppins', sans-serif; /* Or Arial Bold if Poppins isn't loaded */
    font-weight: 800;
    font-size: 24px;
    color: #001e3c; /* Navy Blue to match SDashboard.jpg */
    letter-spacing: -0.5px;
    line-height: 1;
}

.text-pink {
    color: #e91e63; /* Pink color from your dashboard buttons */
}

/* Adjust size for mobile phones */
@media (max-width: 576px) {
    .brand-text {
        font-size: 18px;
    }
}