/* ==========================================================================
   COLOR CODES (Reference)
   Orange - #f1b327 | Indigo Blue - #1800AD | Off White - #F8F8F8 
   White - #FFF     | Dark Grey - #2a2E30   | Black - #000
   ========================================================================== */

/* 1. FONTS & GLOBAL TYPOGRAPHY */
.lora-hero { font-family: "Lora", serif; font-optical-sizing: auto; font-style: normal; }
.outfit-hero { font-family: "Outfit", sans-serif; font-optical-sizing: auto; font-weight: bold; font-style: normal; }
.lora-para { font-family: "Lora", serif; font-optical-sizing: auto; font-weight: bold; font-style: normal; }
.outfit-para { font-family: "Outfit", sans-serif; font-optical-sizing: auto; font-weight: bold; font-style: normal; }
.tasa-explorer-nav { font-family: "TASA Explorer", sans-serif; font-optical-sizing: auto; font-style: normal; }
.navfont { font-family: "TASA Explorer", sans-serif; font-size: 18px; font-weight: bold; font-style: normal; }
.heroFont { font-family: "TASA Explorer", sans-serif; font-size: 16px; font-weight: bold; font-style: normal; }
.heroParaFont { color:#fff; font-size: 20px; }
.main-hero-btn { font-family: "TASA Explorer", sans-serif; font-size: 15px; font-style: normal; }
.whiteText { color: #ffffff; }
.blackText { color: #000000; }

/* 2. NAVIGATION & LOGO */
.nav-bg { background-color: #EDEDED; }
.logoSize { max-height: 60px; }

/* 3. HERO SECTIONS (ALL ORIGINAL HEIGHTS PRESERVED) */
.herobgimg {
    background-image: url("../images/herobg.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.explore-hero {
    position: relative;
    width: 100%;
    height: 100vh; /* Original full viewport height */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.explore-hero video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
}

.explore-hero::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.4);
    z-index: 1;
}

.explore-hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 1rem 2rem;
}

.explore-para { margin: 1rem 0; line-height: 1.6; }

/* 4. SECTOR SPECIFIC HEROES */
/* Applied to: Arts, Tech, Business, Education, Finance, Health, Hosp, Law, Science, Trade */
[class*="-hero-bg"] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

[class*="-hero-bg"]::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.35);
    z-index: 1;
}

[class*="-hero-bg"] > .container { position: relative; z-index: 2; }

.arts-hero-bg      { background-image: url('../images/artherobg.png'); }
.tech-hero-bg      { background-image: url('../images/tech-hero-bg.png'); }
.business-hero-bg  { background-image: url('../images/buisness-hero-bg.jpg'); }
.education-hero-bg { background-image: url('../images/education-hero-bg.jpg'); }
.finance-hero-bg   { background-image: url('../images/finance-hero-bg.png'); }
.health-hero-bg    { background-image: url('../images/health-hero-bg.jpg'); }
.hosp-hero-bg      { background-image: url('../images/hosp-hero-bg.jpg'); }
.law-hero-bg       { background-image: url('../images/law-hero-bg.jpg'); }
.science-hero-bg   { background-image: url('../images/science-hero-bg.jpg'); }
.trade-hero-bg     { background-image: url('../images/trade-hero-bg.jpg'); }

/* 5. CAROUSEL & CARDS */
.carousel-item img { height: 400px; object-fit: cover; border-radius: 10px; }
.carousel-inner { border-radius: 10px; overflow: hidden; }
.carousel-fade .carousel-item { transition: opacity 1s ease-in-out; }
.carousel-item { transition: transform 1s ease-in-out, opacity 1s ease-in-out; }
.card-flyer { transition: all 0.3s ease-in-out;}
.card-flyer:hover { transform: translateY(-10px); /* The "Pop" upward */ box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* Increased shadow */}
#autoCarousel:hover { animation-play-state: paused; }

.blue-card-box { background-color: #1800ad; border-radius: 20px; }
.white-card-box { background-color: #fff; border: 1px solid #1800ad; border-radius: 20px; color: #000; }

/* NEW: Icon Container Fixes */
.icon-header {
    background: #fcfcfc;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #f0f0f0;
    padding: 15px;
}

.career-icon {
    max-height: 55px;
    max-width: 55px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
    transition: transform 0.3s ease;
}

/* Ensure images don't look blurry on hover */
.career-mini-card:hover .career-icon { transform: scale(1.1); }

/* 6. BUTTONS */
.orange-button { background-color: #f1b327; color: #fff; border: none; }
.blue-button { background-color: #1800AD; color: #fff; border: none; }

/* 7. STATE MAP & LABELS */
#map-container { position: relative; max-width: 100%; }
#map-container img { display: block; width: 100%; height: auto; }

.state-label {
    position: absolute;
    text-decoration: none;
    font-weight: bold;
    color: #000; 
    background-color: rgba(255, 255, 255, 0.85);
    padding: 1px 3px;
    border-radius: 2px;
    z-index: 10; 
    border: 1px solid #333;
    transition: all 0.2s;
    line-height: 1; 
    cursor: pointer;
    /* NEW: Clamp prevents text overlap on mobile while keeping original 11px on desktop */
    font-size: clamp(7px, 1.2vw, 11px); 
}

.state-label:hover, .state-label.active {
    background-color: #0d6efd;
    color: #fff;
    transform: scale(1.1);
    z-index: 15;
}

/* Original State Positions */
#label-wa { top: 10%; left: 12%; }
#label-or { top: 20%; left: 11%; }
#label-ca { top: 40%; left: 6%; }
#label-nv { top: 36%; left: 12%; }
#label-id { top: 24%; left: 20%; }
#label-ut { top: 37%; left: 22%; }
#label-az { top: 53%; left: 20%; }
#label-mt { top: 14%; left: 28%; }
#label-wy { top: 27%; left: 31%; }
#label-co { top: 39%; left: 32%; }
#label-nm { top: 53%; left: 30%; }
#label-nd { top: 14%; left: 42%; }
#label-sd { top: 24%; left: 40%; }
#label-ne { top: 34%; left: 41%; }
#label-ks { top: 44%; left: 45%; }
#label-ok { top: 55%; left: 46%; }
#label-tx { top: 67%; left: 44%; } 
#label-mn { top: 17%; left: 50%; }
#label-ia { top: 32%; left: 52%; }
#label-mo { top: 43%; left: 53%; }
#label-ar { top: 55%; left: 54%; }
#label-la { top: 70%; left: 55%; }
#label-wi { top: 22%; left: 57%; }
#label-il { top: 37%; left: 60%; }
#label-in { top: 35%; left: 64%; }
#label-mi { top: 20%; left: 65%; }
#label-oh { top: 36%; left: 68%; }
#label-ky { top: 45%; left: 66%; }
#label-tn { top: 52%; left: 66%; }
#label-ms { top: 62%; left: 59%; }
#label-al { top: 65%; left: 64%; }
#label-fl { top: 80%; left: 76%; } 
#label-ga { top: 63%; left: 71%; }
#label-sc { top: 57%; left: 75%; }
#label-nc { top: 50%; left: 78%; }
#label-va { top: 44%; left: 77%; }
#label-wv { top: 40%; left: 72%; }
#label-pa { top: 33%; left: 78%; }
#label-ny { top: 24%; left: 78%; }
#label-vt { top: 18%; left: 78%; }
#label-nh { top: 14%; left: 82%; }
#label-me { top: 13%; left: 90%; }
#label-ma { top: 22%; left: 91%; }
#label-ri { top: 26%; left: 90%; font-size: 8px;}
#label-ct { top: 31%; left: 88%; font-size: 8px;}
#label-nj { top: 33%; left: 85%; font-size: 8px;}
#label-de { top: 38%; left: 84%; font-size: 8px;}
#label-md { top: 41%; left: 84%; font-size: 8px;}
#label-dc { top: 47%; left: 84%; font-size: 6px;} 
#label-ak { top: 75%; left: 5%; font-size: 16px; } 
#label-hi { top: 85%; left: 28%; font-size: 16px; }

/* 8. CAREER ASSESSMENT & UTILITIES */
.assess-container {
    width: 100%; margin: 0 auto; padding: 0 1rem;
    background-color: #ffffff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    max-width: 100%;
}
@media (min-width: 576px) { .assess-container { max-width: 540px; } }
@media (min-width: 768px) { .assess-container { max-width: 720px; } }
@media (min-width: 992px) { .assess-container { max-width: 960px; } }
@media (min-width: 1200px) { .assess-container { max-width: 1140px; } }

.top-banner { width: 100%; padding: 40px 20px; background: #2a2E30; }
.banner-row { display: flex; align-items: center; justify-content: space-between; gap: 30px; max-width: 1200px; margin: 0 auto; }
.banner-col { flex: 1; }
.banner-col-img img { width: 100%; max-width: 350px; height: auto; border-radius: 8px; object-fit: cover; }
.banner-col-text h1 { font-size: 3.5rem; font-family: "Outfit", sans-serif; margin: 0; color: #f8f8f8; }

.career-top-banner {background-image: url('../images/career-hero-banner.png'); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; }
.career-quizzes-section { background: #ffffff; padding: 60px 20px; border-top: 1px solid #e0e0e0; }
.career-quizzes-container { max-width: 900px; margin: 0 auto; }
.cq-title { font-size: 2rem; font-weight: 700; margin-bottom: 20px; }
.cq-description { font-size: 1.1rem; line-height: 1.7; margin-bottom: 30px; }
.cq-subtitle { font-size: 1.4rem; font-weight: 600; margin-bottom: 15px; }
.cq-list { list-style: none; padding: 0; }
.cq-list a { color: #0077cc; font-weight: 500; text-decoration: none; }
.cq-list a:hover { text-decoration: underline; }

.resume-banner {background:url('../images/resumeBanner.jpg') center / cover no-repeat; height: 40vh; min-height: 250px; max-height: 500px;}

.quiz1-image-container { width: 100px; height: 200px; overflow: hidden; margin: 10px auto; text-align: center; line-height: 200px; font-size: 0; }
.quiz1-image-container img { width: 100%; height: auto; display: inline-block; }

.glass-back {
    position: fixed; bottom: 25px; right: 25px; width: 55px; height: 55px;
    background: rgba(255,255,255,0.35); backdrop-filter: blur(10px);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #0d6efd; font-size: 26px; text-decoration: none; box-shadow: 0 4px 15px rgba(0,0,0,0.25);
    opacity: 0; transition: opacity .3s ease; z-index: 999;
}
.glass-back.show { opacity: 1; }

.join-card { max-width: 980px; margin: 2.5rem auto; }
.step-icon { width: 56px; height: 56px; display:flex; align-items:center; justify-content:center; border-radius:12px; background-color:#f1f5f9; }
.cta-btn { min-width: 160px; }

/* Responsive tweaks for Assessment banner */
@media (max-width: 768px) {
    .banner-row { flex-direction: column; text-align: center; }
    .banner-col-text h1 { font-size: 2rem; }
}

/* 9. RESUME TEMPLATE & UTILITIES */

    .resume-template-container {max-width: 1200px; margin: 2rem auto; padding: 0 1rem;}
    .resume-templates-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; }
    .resume-template-card {background: #ffffff; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 16px rgba(0,0,0,0.08); transition: transform 0.2s ease, box-shadow 0.2s ease;}
    .resume-template-card:hover {transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.12);}
    .resume-template-preview {height: 320px; background: #e5e7eb; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #6b7280; }
    .resume-template-body {padding: 1rem;}
    .resume-template-body h3 {margin: 0 0 0.25rem 0;}
    .resume-template-body p { font-size: 0.9rem; color: #4b5563; margin-bottom: 1rem;}
    .resume-template-actions { display: flex; gap: 0.5rem;}
    .resume-template-btn {flex: 1; padding: 0.5rem; border: none; border-radius: 6px; cursor: pointer; font-weight: bold;}
    .resume-template-btn-preview { background: #e5e7eb;}
    .resume-template-btn-select { background: #2563eb; color: white;}
    .resume-template-btn-select:hover { background: #1d4ed8;}