/* --- Base Typography and Colors for Education Site --- */
:root {
    --color-primary: #004499;       /* Deep Trustworthy Blue */
    --color-secondary: #33AADD;     /* Vibrant Teal/Light Blue */
    --color-text: #333;
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Open Sans', sans-serif;
}

body {
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
    color: var(--color-text);
}

/* --- Header Styling --- */
header {
    background-color: var(--color-primary); /* Use the primary blue color */
    color: white; /* Text color is white for high contrast */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.header-container {
    max-width: 1200px; /* Limits the width for better readability on large screens */
    margin: 0 auto;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between; /* Pushes logo to the left, navigation to the right */
    align-items: center; /* Vertically aligns items */
}

/* Logo Styling */
.logo {
    font-family: var(--font-heading);
    font-size: 1.8em;
    font-weight: 600;
    color: white;
    text-decoration: none; /* Removes the underline */
    display: flex;
    align-items: center;
}

.logo-icon {
    margin-right: 8px;
    font-size: 1.2em; /* Make the graduation cap a bit larger */
}

/* Navigation Styling */
.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Aligns menu items horizontally */
}

.main-nav li {
    margin-left: 25px;
}

.main-nav a {
    color: white;
    text-decoration: none;
    font-weight: 400;
    padding: 5px 0;
    transition: color 0.3s;
}

.main-nav a:hover {
    color: var(--color-secondary); /* Changes color on hover */
}

/* Call-to-Action (CTA) Button Styling */
.cta-button {
    background-color: var(--color-secondary); /* Use the accent color */
    color: var(--color-primary) !important; /* Important to override the white link color */
    padding: 8px 15px;
    border-radius: 5px;
    font-weight: 700 !important;
    text-transform: uppercase;
    transition: background-color 0.3s, transform 0.2s;
}

.cta-button:hover {
    background-color: #ffffff; /* A slightly darker teal on hover */
    color: rgb(255, 255, 255) !important;
    transform: translateY(-2px); /* Subtle lift effect */
}
/* --- Quick Links Section Styling --- */

.quick-links-section {
    padding: 40px 20px;
    background-color: #f4f7fa; /* A very light, subtle background color */
    text-align: center;
}

.links-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    /* Arranges the cards in a row, wrapping onto new lines if needed */
    flex-wrap: wrap; 
    justify-content: space-between; /* Evenly distributes space between the cards */
    gap: 20px; /* Space between the cards */
}

.quick-link-card {
    /* Each card takes up roughly 1/3 of the container width, adjusting for the gap */
    flex: 1 1 300px; 
    
    background-color: white;
    border-radius: 10px;
    padding: 30px 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    /* Ensure the link looks like a card */
    text-decoration: none; 
    color: var(--color-text);
    display: block; 
}

.quick-link-card:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
    border-bottom: 4px solid var(--color-secondary); /* Highlight border */
}

/* Icon Styling */

.section-icon {
  width: 160px; /* Set the desired width */
  height: 160px; /* Set the desired height */
  margin-right: 28px; /* Space between the icon and the text */
  /* Optional: align vertically with the text */
  vertical-align: middle;
}

.quick-link-card .icon {
    font-size: 3em;
    display: block;
    margin-bottom: 10px;
    color: var(--color-primary); /* Use the primary blue for the icons */
}

/* Heading Styling */
.quick-link-card h3 {
    font-family: var(--font-heading);
    font-size: 1.3em;
    margin: 10px 0;
    color: var(--color-primary);
}

/* Description Text */
.quick-link-card p {
    font-size: 0.9em;
    color: #666;
}

/* Highlight the primary action card (e.g., Login) */
.quick-link-card.primary-action {
    background-color: var(--color-secondary); 
    color: white; /* Text inside the primary card should be white */
}

.quick-link-card.primary-action .icon,
.quick-link-card.primary-action h3 {
    color: white; /* Keep icon and heading white */
}

.quick-link-card.primary-action p {
    color: rgba(255, 255, 255, 0.85); /* Slightly muted white for body text */
}
/* css for ques2 page */
.row1 {
    background-color: #004499; /* A nice shade of blue */
    color: #FFFFFF;           /* White text */
    padding: 10px;            /* Optional: Adds space inside the row */
    text-align: center;       /* Optional: Centers the text */
    font-size: large;
    font-weight: bold;
}
.row0 {
    background-color: #f2f4f7; /* A nice shade of blue */
    color: #FFFFFF;           /* White text */
    padding: 10px;            /* Optional: Adds space inside the row */
    text-align: center;       /* Optional: Centers the text */
    font-size: large;
    font-weight: bold;
}