@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    color: #333;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* 1. Video Background & Overlay */
.video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    overflow: hidden;
}
.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the entire screen without stretching */
}
.video-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white overlay */
    backdrop-filter: blur(8px); /* Frosted glass effect */
    z-index: -1;
}

/* 2. Main Layout Containers */
.main-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    padding: 20px;
}
.content-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 900px; /* Max width for the content area including logos */
}

/* 3. Main Title Styling */
.main-title {
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    margin-bottom: 2rem;
    text-align: center;
}

/* 4. Form & Marksheet Container Styling */
.form-container, .marksheet-container {
    background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent */
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 500px;
    text-align: center;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 5. Logo Styling */
.side-logo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    position: absolute;
    z-index: 0;
}
.left-logo { left: 0; }
.right-logo { right: 0; }

/* 6. Button and Form Element Styling (from before) */
.header-title h4{color:#333;}.header-title h5{color:#555;font-weight:500;}.header-title h6{color:#777;font-weight:400;}.header-title h5,.header-title h4,.header-title h6{margin:0;line-height:1.4;}
.captcha-box{display:flex;align-items:center;gap:10px;}.captcha-box img{border-radius:5px;border:1px solid #ddd;}.captcha-box button{font-size:1.2rem;}
.btn-custom{background-color:#6d5dd3;color:#fff;font-weight:500;padding:12px;border:none;transition:background-color .3s ease;}.btn-custom:hover{background-color:#5849b0;color:#fff;}

/* 7. Responsive Adjustments with Media Queries */
@media (max-width: 992px) {
    /* Hide logos on tablets and mobile phones to avoid clutter */
    .side-logo {
        display: none;
    }
    .main-title {
        font-size: 2.2rem;
    }
}
@media (max-width: 576px) {
    .main-title {
        font-size: 1.8rem;
    }
    .form-container, .marksheet-container {
        padding: 25px;
    }
}

/* Styles for Result Page (view_result.php) */
.marksheet-container{max-width:850px;text-align:left;position:relative;}
.result-stamp{position:absolute;top:90px;right:30px;font-size:5rem;font-weight:700;color:green;opacity:.15;transform:rotate(-15deg);border:10px solid green;padding:10px 20px;border-radius:10px;text-transform:uppercase;user-select:none;}.result-stamp.fail{color:red;border-color:red;}
.student-details{padding:15px;background:#f8f9fa;border-radius:8px;margin-bottom:25px;border:1px solid #eee;}
.table thead th{background-color:#495057;color:#fff;}
.table tfoot tr{font-weight:600;}
@media print{body{background:#fff;}.no-print{display:none;}.marksheet-container{box-shadow:none;border:1px solid #ccc;margin:0;}.result-stamp{opacity:.1;}}