/* ====================== */
/*      CANVAS STYLES     */
/* ====================== */

.canvas-container {
    margin-left: auto;
    margin-right: auto;  /* Centers the container horizontally */
    display: block;
    position: relative;
    width: 600px;       /* Fixed width for canvas area */
    height: 600px;      /* Fixed height for canvas area */
    background: white;
    box-shadow: 0 0 20px rgba(0,0,0,0.1); /* Subtle shadow for depth */
    border-radius: 10px; /* Rounded corners */
    
    /* Creates subtle horizontal lines pattern */
    background-image: linear-gradient(to bottom, 
        rgba(0,0,0,0.05) 1px,
        transparent 1px);
    background-size: 100% 2px; /* Controls line spacing */
}

/* ====================== */
/*    BUTTON CONTAINER    */
/* ====================== */

/* Button container styling */
.button-container {
    display: flex;
    justify-content: center; /* Center the buttons horizontally */
    gap: 1rem; /* Add spacing between buttons */
    margin: 20px auto; /* Center the container vertically and horizontally */
    width: fit-content; /* Make the container only as wide as its content */
    padding: 1rem; /* Add some padding around the buttons */
}

/* ====================== */
/*   INDIVIDUAL BUTTONS   */
/* ====================== */

/* Action button styling */
.action-btn {
    text-align: center;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.action-btn:hover {
    transform: scale(1.05); /* Slight grow effect */
}

/* Circular icon container */
.action-btn .btn-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;     /* Makes it perfectly round */
    background-color: #485088; /* Dark blue background */
    display: flex;
    align-items: center;    /* Centers icon vertically */
    justify-content: center; /* Centers icon horizontally */
    margin: 0 auto;         /* Centers the icon horizontally */
    margin-bottom: 0.5rem;  /* Space between icon and text */
    transition: all 0.3s ease; /* Smooth hover animations */
    box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1); /* Subtle shadow */
}

/* Icon image styling */
.action-btn .btn-icon img {
    width: 50px;            /* Scales down the image */
    height: 50px;
    object-fit: contain;    /* Ensures image keeps proportions */
}

/* Button text styling */
.action-btn .btn-text {
    text-align: center;
    color: #8f8f8f;            /* Dark gray text */
    font-family: Arial, sans-serif;
    font-size: 0.8rem;      
    font-weight: 500;      
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    line-height: 1.2;       
    max-width: 100px;       
    margin-top: 0.5rem;     /* Space between text and icon */
}

/* ====================== */
/*      HOVER EFFECTS     */
/* ====================== */
.action-btn:hover .btn-icon {
    transform: translateY(-5px); /* Lifts button slightly */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
    background-color: #bcedf8;   /* Changes to white background */
}

.action-btn:hover .btn-text {
    color: #ffffff;         /* Changes text to white on hover */
}

/* ====================== */
/*      MODAL STYLES      */
/* ====================== */

/* Modal overlay styling for dark mode (scoped to About Us page) */
.aboutus-modal .popup-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* Darker semi-transparent background */
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Higher z-index to prevent overlap */
}

/* Show modal when active */
.aboutus-modal .popup-overlay.active {
    display: flex; /* Show modal */
}

/* Modal window styling for dark mode */
.aboutus-modal .popup-window {
    background: #1e1e2f; /* Dark background for the modal */
    padding: 20px;
    border-radius: 10px;
    width: 80%;
    max-width: 600px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6); /* Stronger shadow for depth */
    position: relative;
    color: #ffffff; /* White text for contrast */
    border: 1px solid rgba(255,255,255,0.04);
}

/* Modal header styling */
.aboutus-modal .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #2a2a3d; /* Slightly lighter dark background */
    color: #ffffff; /* White text */
    padding: 10px;
    border-bottom: 1px solid #444; /* Subtle border for separation */
    cursor: move; /* Indicate draggable area */
    font-size: 1.2rem; /* Slightly larger font for the title */
    font-weight: bold;
}

/* Modal content styling */
.aboutus-modal .popup-content {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
    color: #d1d1d1; /* Softer white for content text */
    font-size: 0.9rem; /* Slightly smaller font for readability */
    line-height: 1.5; /* Better spacing for text */
}

/* Close button styling */
.aboutus-modal .popup-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #ffffff; /* White close button */
    cursor: pointer;
    transition: color 0.3s ease;
}

.aboutus-modal .popup-close:hover {
    color: #ff6b6b; /* Red color on hover for better visibility */
}

/* Scrollbar styling for modal content */
.aboutus-modal .popup-content::-webkit-scrollbar {
    width: 8px;
}

.aboutus-modal .popup-content::-webkit-scrollbar-thumb {
    background: #444; /* Dark scrollbar thumb */
    border-radius: 4px;
}

.aboutus-modal .popup-content::-webkit-scrollbar-thumb:hover {
    background: #666; /* Lighter thumb on hover */
}

/* ========================= */
/* Modal visual enhancements */
/* ========================= */

/* Accent stripe and subtle glass */
.aboutus-modal .popup-window {
    background: linear-gradient(180deg, rgba(27,28,44,0.98) 0%, rgba(29,30,46,0.94) 100%);
    border-radius: 14px;
    padding: 22px 22px 18px 22px;
    box-shadow: 0 18px 50px rgba(3,6,23,0.7), inset 0 1px 0 rgba(255,255,255,0.02);
    backdrop-filter: blur(4px);
}

/* Decorative top accent bar */
.aboutus-modal .popup-window::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 6px;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    background: linear-gradient(90deg, #00ffea 0%, #3f4265 60%, rgba(63,66,101,0.9) 100%);
}

/* Header — stronger, with small subtitle */
.aboutus-modal .popup-header {
    gap: 12px;
    padding: 12px 10px 10px 10px;
    background: transparent;
    align-items: flex-start;
}

.aboutus-modal #popupTitle {
    color: #e6ffff;
    font-size: 1.3rem;
    margin: 0;
    line-height: 1.1;
}

.aboutus-modal .popup-subtitle {
    display: block;
    font-size: 0.85rem;
    color: rgba(230,255,255,0.7);
    margin-top: 4px;
    font-weight: 500;
}

/* Close button — circular, subtle background */
.aboutus-modal .popup-close {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.03);
}

.aboutus-modal .popup-close:hover {
    background: rgba(255,255,255,0.03);
    transform: translateY(-2px);
}

/* Footer actions (if present) */
.aboutus-modal .popup-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 10px;
}

.aboutus-modal .btn-action {
    padding: 8px 14px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-weight: 700;
    color: #081018;
    background: linear-gradient(90deg, #00ffea 0%, #3f4265 100%);
    box-shadow: 0 8px 18px rgba(0,255,234,0.08);
}

.aboutus-modal .btn-secondary {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.04);
    background: rgba(255,255,255,0.02);
    color: rgba(230,240,250,0.9);
}

/* ========================= */
/* Modal list (ul / li) styles */
/* ========================= */
.aboutus-modal .popup-content ul {
    margin: 0.8rem 0 0.6rem 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.aboutus-modal .popup-content li {
    position: relative;
    padding: 12px 14px 12px 46px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.01) 100%);
    color: #d8f7f7;
    border: 1px solid rgba(255,255,255,0.03);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.aboutus-modal .popup-content li:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
    background: linear-gradient(180deg, rgba(0,255,234,0.03) 0%, rgba(63,66,101,0.03) 100%);
}

/* Decorative icon on the left of each li */
.aboutus-modal .popup-content li::before {
    content: '\2022'; /* bullet */
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: #00ffea;
    text-shadow: 0 4px 12px rgba(0,255,234,0.08);
}

.aboutus-modal .popup-content li strong {
    color: #ffffff;
}

.aboutus-modal .popup-content li p {
    margin: 0;
    color: rgba(225,245,245,0.9);
    font-size: 0.98rem;
    line-height: 1.45;
}

/* Compact responsive tweaks */
@media (max-width: 480px) {
    .aboutus-modal .popup-window { padding: 14px; }
    .aboutus-modal .popup-content li { padding-left: 44px; }
    .aboutus-modal .popup-window::before { height: 5px; }
}

.content-page{
    display: none;
}

/* Glowing effect for correct letters */
.glowing {
  color: #00d9ff; /* Bright blue color for glowing effect */
  text-shadow: 0 0 10px #00e5ff, 0 0 20px #00e5ff, 0 0 30px #00e5ff;
  font-weight: bold;
}

/* ====================== */
/*   ANIMATED TEXT STYLES */
/* ====================== */

.animated-text-container {
    text-align: center; /* Center the text */
    margin: 2rem 0; /* Add spacing around the text */
}

#my-h2 {
    font-size: 3rem; /* Make the text large */
    font-weight: bold;
    color: #ffffff; /* White text for dark mode */
    text-shadow: 0 0 10px #00e5ff, 0 0 20px #00e5ff; /* Glowing effect */
    transition: all 0.3s ease; /* Smooth transition for glowing effect */
}

#my-h2 .glowing {
    color: #00e5ff; /* Bright blue for glowing letters */
    text-shadow: 0 0 10px #00e5ff, 0 0 20px #00e5ff, 0 0 30px #00e5ff;
}


.survey-invite {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 3rem 0 2rem 0;
}

.survey-invite-text {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.middle-text {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
    padding: 0.75rem 1.5rem;
    border-radius: 1.5rem;
    margin-bottom: 1.2rem;
    letter-spacing: 0.5px;
    display: inline-block;
}

/* ====================== */
/*   CONTENT PAGE CARD    */
/* ====================== */
.content-page {
    /* Hide by default, show via JS when active */
    display: none;

    /* Card appearance */
    background: #23233a; /* Dark card background */
    border-radius: 1.5rem;
    box-shadow: 0 4px 24px rgba(0,255,234,0.08), 0 1.5px 6px rgba(0,255,234,0.04);
    padding: 2.5rem 2rem 2rem 2rem;
    margin: 2.5rem auto;
    max-width: 700px;
    width: 100%;
    position: relative;
    z-index: 1;
    color: #e9f7fa;

    /* Gradient border accent at the top */
    border-top: 6px solid transparent;
    border-image: linear-gradient(90deg, #00ffea 0%, #3f4265 100%);
    border-image-slice: 1;
}

/* ====================== */
/*   CONTENT FORMATTING   */
/* ====================== */
.content-page p {
    color: #e9f7fa;
    font-size: 1.08rem;
    line-height: 1.7;
    margin-bottom: 1.1rem;
    text-align: left;
    letter-spacing: 0.01em;
    padding-left: 0.2rem;
}

.content-page ul {
    margin: 1.1rem 0 1.1rem 0.5rem;
    padding-left: 1.2rem;
    max-width: 97%;
    list-style: disc inside;
}

.content-page li {
    color: #e9f7fa;
    font-size: 1.01rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
    text-align: left;
    padding-left: 0.2rem;
    letter-spacing: 0.01em;
}

.content-page strong {
    color: #00ffea;
    font-weight: 700;
    background: linear-gradient(90deg, #00ffea 0%, #3f4265 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ====================== */
/*   RESPONSIVE DESIGN    */
/* ====================== */
@media (max-width: 800px) {
    .content-page {
        padding: 1.2rem 0.7rem;
        max-width: 98vw;
    }
    .section-title {
        font-size: 1.3rem;
    }
}