:root {
    --card-bg: rgba(10, 10, 10, 0.8);
    --accent-glow: rgba(34, 197, 94, 0.3);
    --border-gradient: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05));
    --modal-accent: #6366f1;
    --modal-bg: rgba(255, 255, 255, 0.9);
    --modal-text: #1f2937;
}

/* =========================================================
   ABOUT WRAPPER
========================================================= */

.about-wrapper{
    max-width:1200px;
    margin:160px auto 100px;
    padding:0 5%;
}

/* =========================================================
   HERO SECTION
========================================================= */

.about-hero{
    text-align:center;
    margin-bottom:10rem;
}

.hero-display{
    font-size:clamp(3rem,8vw,5.5rem);
    font-weight:800;
    letter-spacing:-3px;
    line-height:1;
    margin-bottom:2rem;
    color:var(--text-black);
}

.hero-display span{
    font-family:'Dancing Script',cursive;
    color:var(--accent-color);
    font-weight:400;
}

.hero-lead{
    font-size:1.4rem;
    color:var(--text-muted);
    max-width:700px;
    margin:auto;
    line-height:1.6;
}

/* =========================================================
   STORY GRID
========================================================= */

.story-grid{
    display:grid;
    grid-template-columns:1.2fr 0.8fr;
    gap:100px;
    align-items:center;
    margin-bottom:12rem;
}

.story-img-box img{
    width:100%;
    border-radius:40px;
    filter:grayscale(100%);
    transition:var(--transition-premium);
}

.story-img-box:hover img{
    filter:grayscale(0%);
}

.img-caption{
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-top:1.5rem;
    color:var(--text-muted);
    font-weight:700;
}

.section-title{
    font-size:2.5rem;
    margin-bottom:1.5rem;
}

.story-text p{
    font-size:1.15rem;
    line-height:1.8;
    color:#444;
    margin-bottom:1.5rem;
}

/* =========================================================
   STATS
========================================================= */

.about-stats{
    display:flex;
    gap:40px;
    margin-top:3rem;
    padding-top:2rem;
    border-top:1px solid var(--glass-border);
}

.stat-num{
    display:block;
    font-size:2rem;
    font-weight:800;
    color:var(--accent-color);
}

.stat-label{
    font-size:.8rem;
    text-transform:uppercase;
    font-weight:700;
    color:var(--text-muted);
}

/* =========================================================
   MISSION BAR
========================================================= */

.mission-bar{
    background:var(--glass-bg);
    padding:100px 5%;
    border-radius:60px;
    margin-bottom:10rem;
    text-align:center;
}

.mission-bar blockquote{
    color:var(--accent-color);
    font-family:'Dancing Script',cursive;
    font-size:clamp(2rem,4vw,3.5rem);
}

/* =========================================================
   ADMIN CARD
========================================================= */

.admin-card-premium{
    margin:80px auto;
    max-width:850px;
    padding:2px;
    background:var(--border-gradient);
    border-radius:32px;
    position:relative;
    font-family:'Inter',sans-serif;
}

.glass-container{
    background:var(--card-bg);
    backdrop-filter:blur(20px);
    border-radius:31px;
    overflow:hidden;
    padding:40px;
}

.card-inner{
    display:flex;
    align-items:center;
    gap:40px;
}

.portrait-frame{
    position:relative;
    width:120px;
    height:120px;
}

.portrait-img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:28px;
    transform:rotate(-3deg);
    transition:.5s;
}

.admin-card-premium:hover .portrait-img{
    transform:rotate(0) scale(1.05);
}

.status-ring{
    position:absolute;
    bottom:-5px;
    right:-5px;
    width:24px;
    height:24px;
    background:#22c55e;
    border:4px solid #0a0a0a;
    border-radius:50%;
}

.premium-badge{
    background:rgba(34,197,94,0.1);
    color:#22c55e;
    padding:6px 14px;
    border-radius:100px;
    font-size:.7rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-bottom:15px;
}

.admin-signature{
    font-family:'Dancing Script',cursive;
    font-size:2.5rem;
    margin:0;
    background:linear-gradient(to right,#fff,#a1a1a1);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.admin-bio{
    color:rgba(255,255,255,.7);
    line-height:1.7;
    font-size:1.05rem;
}

/* =========================================================
   CONTACT CTA
========================================================= */

.contact-cta{
    text-align:center;
    padding:100px 0;
    border-top:1px solid var(--glass-border);
}

.cta-content span{
    color:var(--accent-color);
    font-family:'Dancing Script',cursive;
    font-weight:bold;
}

.btn-about-contact{
    display:inline-block;
    margin-top:2rem;
    padding:1.2rem 3rem;
    background:var(--text-black);
    color:#fff;
    border-radius:100px;
    font-weight:700;
    transition:var(--transition-premium);
}

.btn-about-contact:hover{
    background:var(--accent-color);
    transform:translateY(-5px);
}

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

.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.4);
    backdrop-filter:blur(15px);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
    opacity:0;
    transition:.4s;
}

.modal-overlay.active{
    display:flex;
    opacity:1;
}

.modal-content.glass-card{
    background:rgba(255,255,255,.85);
    border:1px solid rgba(255,255,255,.4);
    box-shadow:0 40px 100px rgba(0,0,0,.1);
    border-radius:40px;
    width:100%;
    max-width:650px;
    padding:60px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:991px){

.story-grid{
grid-template-columns:1fr;
gap:50px;
text-align:center;
}

.about-hero{
margin-bottom:5rem;
}

.about-stats{
justify-content:center;
text-align:center;
}

.card-inner{
flex-direction:column;
text-align:center;
}

}

@media (max-width:768px){

.modal-content.glass-card{
padding:40px 25px;
border-radius:30px;
}

.section-title{
font-size:2rem;
}

}

@media (max-width:600px){

.story-text p{
font-size:1rem;
line-height:1.7;
}

}

.grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    justify-items: center; /* centers the items inside the grid */
    width: 100%;
}

.story-img-box img{
    width: auto;
    height: 300px;
}


/* contact modal */ /* --- 1. Modal Overlay --- */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(15px); /* Stronger blur for premium feel */ -webkit-backdrop-filter: blur(15px); z-index: 9999; /* Ensure it's above everything */ display: none; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.4s ease; } .modal-overlay.active { display: flex; opacity: 1; } /* --- 2. Modal Content Card --- */ .modal-content.glass-card { background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.1); border-radius: 40px; width: 100%; max-width: 650px; padding: 60px; position: relative; transform: translateY(40px) scale(0.95); transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .modal-overlay.active .modal-content { transform: translateY(0) scale(1); } /* --- 3. Close Button --- */ .close-modal { position: absolute; top: 30px; right: 30px; width: 40px; height: 40px; border-radius: 50%; background: #f0f0f0; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; color: var(--text-black); } .close-modal:hover { background: var(--text-black); color: #fff; transform: rotate(90deg); } /* --- 4. Modal Header --- */ .modal-header { text-align: center; margin-bottom: 40px; } .modal-header .eyebrow { display: block; text-transform: uppercase; letter-spacing: 4px; font-size: 0.75rem; font-weight: 800; color: var(--accent-color); margin-bottom: 10px; } .modal-header h2 { font-size: 2.5rem; font-weight: 800; letter-spacing: -1.5px; color: var(--text-black); } .modal-header h2 span { font-family: 'Dancing Script', cursive; color: var(--accent-color); font-weight: 400; } /* --- 5. Form & Inputs --- */ .input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-bottom: 25px; } .input-wrapper { position: relative; margin-bottom: 25px; } .input-wrapper input, .input-wrapper textarea { width: 100%; background: rgba(0, 0, 0, 0.03); border: 1px solid rgba(0, 0, 0, 0.05); padding: 18px 24px; border-radius: 16px; font-size: 1rem; font-weight: 500; color: var(--text-black); transition: all 0.3s ease; outline: none; } .input-wrapper textarea { min-height: 140px; resize: none; } .input-wrapper input:focus, .input-wrapper textarea:focus { background: #fff; border-color: var(--accent-color); box-shadow: 0 10px 30px rgba(99, 102, 241, 0.1); } /* Animated Underline */ .input-focus-line { position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: var(--accent-color); transition: all 0.4s ease; transform: translateX(-50%); border-radius: 2px; } .input-wrapper input:focus ~ .input-focus-line, .input-wrapper textarea:focus ~ .input-focus-line { width: 40%; /* Subtle indicator */ } /* --- 6. Submit Button --- */ #submitBtn { width: 100%; padding: 20px; border-radius: 100px; background: var(--text-black); color: #fff; border: none; font-weight: 700; font-size: 1rem; cursor: pointer; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; align-items: center; justify-content: center; } #submitBtn:hover { background: var(--accent-color); transform: translateY(-5px); box-shadow: 0 20px 40px rgba(99, 102, 241, 0.2); } #formResponse { margin-top: 20px; text-align: center; font-weight: 600; font-size: 0.9rem; } /* --- Responsive --- */ @media (max-width: 768px) { .modal-content.glass-card { padding: 40px 25px; border-radius: 30px; } .input-row { grid-template-columns: 1fr; gap: 0; } .modal-header h2 { font-size: 2rem; } } /* --- Loading Spinner --- */ .spinner { display: none; /* Hidden by default */ width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.8s linear infinite; margin-left: 10px; } @keyframes spin { to { transform: rotate(360deg); } } /* Button Loading State */ #submitBtn.loading { background: var(--text-muted); pointer-events: none; cursor: not-allowed; } #submitBtn.loading .spinner { display: inline-block; } /* Response Message Styles */ .success-msg { color: #10b981; animation: fadeIn 0.5s ease; } .error-msg { color: #ef4444; animation: fadeIn 0.5s ease; }