*{
box-sizing:border-box;
}
html,
body{
margin-top:0;
padding:0;
width:100%;
min-height:100svh;
overflow-x:hidden;
color:white;
font-family:'Inter', serif;
}
/* ================================
🖥 DESKTOP BACKGROUND
================================ */
body{
position: fixed;
inset: 0;
background: url("images/background.png") center center / cover no-repeat;
z-index: -1;
}
.banner {
margin-left: 30px;
margin-top: 50px;
width: 500px;
filter:
brightness(1.15)
contrast(1.1)
saturate(1.2)
drop-shadow(0 0 12px #00aaff)
drop-shadow(0 0 30px #0066ff)
drop-shadow(0 0 60px rgba(0,170,255,.5));
}
.bannerContainer{
top: 15px;
left:0;
gap:20px;
width:100%;
height:360px;
margin-bottom: 20px;
z-index:9999;
box-shadow:
0 0 20px rgba(255,0,128,0.15);
}
.bannerContainer::before{
content:"";
position:absolute;
top:-350px;
left:-180px;
width:550px;
height:550px;
border-radius:50%;
background:
radial-gradient(
circle,
#4f97ff 0%,
#006bff 20%,
rgb(28 0 255 / 30%) 40%,
rgba(255,0,128,.08) 65%,
transparent 80%
);
filter:blur(90px);
opacity:.8;
pointer-events:none;
}
.bannerContainer::after {
content: "";
position: absolute;
top: 0;
left: -120%;
width: 60%;
height: 100%;
background: linear-gradient(
115deg,
transparent,
rgba(255,255,255,0.07),
transparent
);
transform: skewX(-20deg);
animation: shimmerSweep 7s linear infinite;
pointer-events: none;
}
.bannerLogo {position: absolute;
right: 500px;
top: 60px;
opacity: 0.9; /* tweak this */height: 300px;z-index: 3;}
.tagline{
position: absolute;
left: 90px;
top: 260px;
gap:10px;
font-weight: 600;
font-family:'Inter', serif;
font-size:22px;
letter-spacing:1px;
color:#ffffff;
text-shadow:
0 0 8px rgb(105 229 255 / 0%),
0 0 18px rgb(3 3 10 / 70%),
0 0 34px rgb(25 0 255);
}
.bannerP {
font-size: 11px;
font-weight: 300;
font-family: 'Inter', serif;
letter-spacing: 1px;
color: #ffffff;
text-shadow: 0 2px 6px rgb(0 0 0 / 100%);
background: rgba(0, 0, 0, 0.08);
padding-top: 10px;
border-radius: 4px;
}
h3 {
color: white;
font-size: 20px;
font-weight: 700;
text-align: right;
}
.savedNote{
margin-top:10px;
padding:12px;
background:#111;
border:1px solid #D8A94A;
border-radius:12px;
color:white;
font-size:14px;
}
.exitBtn{
margin-top:10px;
background:#111;
color:#D8A94A;
border:1px solid #D8A94A;
padding:12px 20px;
border-radius:12px;
cursor:pointer;
}
/* VIDEO PREVIEW BOX ---------------------------*/
/* ==============================
PREVIEW AREA
============================== */
.meetEyebrow {
display: flex;
top: 0;
margin-left: 20px;
padding: 7px 16px;
border: 1px solid #00d9ff;
border-radius: 6px;
color: #65eaff;
font-size: 8px;
font-weight: bold;
letter-spacing: 2px;
background: rgba(0,150,255,0.06);
box-shadow:
0 0 12px rgba(0,200,255,0.15);
}
.introBox {
display: flex;
flex-direction: row;
max-width: 1090px;
border: 3px solid #001cff;
border-radius: 10px;
background: #090e28db;
box-sizing: border-box;
}
/* ==============================
TEXT - LEFT
============================== */
#previewText {
flex: 0 0 300px;
width: 3epx;
padding-left: 20px;
}
#previewText .book-review {
color: #ffffff;
}
.title-text {
font-family: "Orbitron", serif;
font-size: 16px;
text-align: center;
color: #001cff;
text-decoration: underline;
padding-top: 20px;
margin: 0;
}
/* ==============================
VIDEO - RIGHT
============================== */
.preview-video {
max-width: 734px;
border: 1px solid #063f71;
box-shadow:
0 0 5px #063f71,
0 0 15px #063f71,
0 0 30px rgba(38, 6, 95, 0.7);
object-fit: contain;
display: block;
margin-left: 20px;
margin-right: 30px;
margin-top: 40px;
}
/*----------------------------------------------*/
.landingContainer {
display: flex;
flex-direction: column;
gap: 5px;
}
.landingBox {
display: flex;
border: 2px solid #006BFF;
border-radius: 12px;
box-shadow:
0 0 5px #006BFF,
0 0 10px #006BFF,
0 0 20px #00F5FF,
inset 0 0 8px rgba(0, 107, 255, 0.25);
border-radius: 16px;
background: #090e28db;
padding-left: 30px;
}
.landingContainer2 {
display: flex;
flex-direction: row;
gap: 20px;
width: 100%;
align-items: flex-start;
}
.landingBox1 {
width: 350px;
flex: 0 0 350px;
border:3px solid #00ff72;
border-radius: 10px;
background: #090e28db;
padding: 20px;
margin-left: 100px;
box-sizing: border-box;
}
.landingBox1P1 {
font-family: "Inter", serif;
font-size: 10px;
text-align: center;
padding-top: 20px;
padding-bottom: 40px;
font-weight: 100px;
color: #fff;
text-shadow:
0 0 2px #00ff72,
0 0 6px #00ff72,
0 0 12px #00bfff;
}
.landingBox2 {
display: flex;
align-items: flex-start;
border: 2px solid #006BFF;
border-radius: 12px;
box-shadow:
0 0 5px #006BFF,
0 0 10px #006BFF,
0 0 20px #00F5FF,
inset 0 0 8px rgba(0, 107, 255, 0.25);
border-radius: 16px;
padding: 30px;
width: 97.6%;
margin-left: 20px;
margin-bottom: 20px;
}
.landingH1B2 {
padding-top: 10px;
font-family: "Orbitron", serif;
font-weight: 800;
font-size: 20px;
padding-right: 20px;
}
.landingBox3 {
display: flex;
align-items: center;
border: 2px solid #006BFF;
border-radius: 12px;
box-shadow:
0 0 5px #006BFF,
0 0 10px #006BFF,
0 0 20px #00F5FF,
inset 0 0 8px rgba(0, 107, 255, 0.25);
border-radius: 16px;
margin-left: 20px;
padding-left: 30px;
width: 95%;
}
.badge {
height: 30px;
display: block;
margin: 0 auto 15px auto;
}
.landingBox1H1 {
font-family: "Inter", sans-serif;
color: #00ff72;
text-align: center;
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
text-shadow:
0 0 10px rgba(0,255,114,0.6),
0 0 20px rgba(0,255,114,0.3);
margin: 0 0 20px 0;
}
.feature {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.landingBox1P {
font-size: 12px;
margin: 0;
font-family: "Inter", sans-serif;
font-weight: 500;
padding-top: 1px;
}
.tick {
flex-shrink: 0;
}
.landingBox4 {
margin-left: 20px;
display: flex;
align-items: center;
border: 2px solid #006BFF;
border-radius: 12px;
box-shadow:
0 0 5px #006BFF,
0 0 10px #006BFF,
0 0 20px #00F5FF,
inset 0 0 8px rgba(0, 107, 255, 0.25);
border-radius: 16px;
padding-left: 30px;
width: 97.5%;
}
.landingBox4 h2 {
color: #00ff72;
font-family: Orbitron, sans-serif;
margin-bottom: 25px;
}
#question {
font-size: 1.2rem;
margin-bottom: 20px;
min-height: 60px;
}
.answer-btn {
display: block;
width: 100%;
margin-bottom: 10px;
padding: 12px;
background: rgba(255,255,255,.05);
border: 3px solid #00ff72;
border-radius: 8px;
color: white;
cursor: pointer;
transition: .3s;
}
.answer-btn:hover {
background: rgba(0,255,114,.15);
box-shadow: 0 0 15px rgba(0,255,114,.4);
}
#result {
font-size: 1.5rem;
color: #00ff72;
font-weight: bold;
}
.landingEyebrow {
align-self: flex-start;
margin-top: 0;
padding-top: 0;
padding-bottom: 20px;
}
.landingH1 {
font-family: "Orbitron", serif;
font-weight: 800;
font-size: 22px;
}
.landingH1 p {
font-family: "Inter", sans-serif;
font-weight: 300 !important;
font-size: 16px;
max-width: 900px;
padding-right: 20px;
}
.landingP2 {
font-family: "Inter", serif;
font-weight: 300;
font-size: 12px;
}
.landingH2 {
text-align: center;
margin-top: 20px;
font-family: "Inter", serif;
font-size: 13px;
padding-right: 0px;
}
.landingP1 {
text-align: center;
font-family: "Inter", serif;
font-weight: 300;
font-size: 11px;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 20px;
}
.landingBox5 {
margin-left: 20px;
border: 2px solid #006BFF;
border-radius: 12px;
box-shadow:
0 0 5px #006BFF,
0 0 10px #006BFF,
0 0 20px #00F5FF,
inset 0 0 8px rgba(0, 107, 255, 0.25);
border-radius: 16px;
padding-left: 30px;
padding-right: 500px;
}
.ea-contact__eyebrow {
display: inline-flex !important;
width: max-content !important;
max-width: 100% !important;
align-self: flex-start !important;
justify-self: start !important;
flex: 0 1 auto !important;
top: 0;
padding: 7px 16px;
border: 1px solid #00d9ff;
border-radius: 6px;
color: #65eaff;
font-size: 8px;
font-weight: bold;
font-family: "Inter", sans-serif;
letter-spacing: 2px;
background: rgba(0,150,255,0.06);
box-shadow:
0 0 12px rgba(0,200,255,0.15);
}
.landingBox6 {
margin-left: 20px;
display: flex;
align-items: center;
border: 3px solid #001cff;
border-radius: 10px;
background: #090e28db;
padding-left: 30px;
width: 95%;
}
.landingBox3H1 {
padding-top: 10px;
font-family: "Inter", serif;
font-weight: 800;
font-size: 14px;
padding-right: 20px;
}
.landingH1B4 {
padding-top: 10px;
font-family: "Orbitron", serif;
font-weight: 800;
font-size: 14px;
padding-right: 20px;
}
.accent-line {
width: 1px;
height: 200px;
background: linear-gradient(
to bottom,
rgba(0,170,255,0),
#00aaff 25%,
#00aaff 75%,
rgba(0,170,255,0)
);
border-radius: 999px;
filter: drop-shadow(0 0 8px #00aaff);
}
.icon1 {
width: 50px;
margin-left: 80px;
}
.icon2 {
width: 50px;
margin-left:80px;
}
.icon3 {
width: 50px;
margin-left: 90px;
}
.icon4 {
margin-left: 80px;
width: 50px;
}
.icon5 {
width: 190px;
margin-left: 80px;
}
.icon6 {
width: 190px;
margin-left:80px;
}
.icon7 {
width: 190px;
margin-left: 90px;
}
.icon8 {
margin-left: 190px;
width: 50px;
}
.dashboard-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
max-width: 900px;
margin-left: 320px;
padding: 0 16px;
}
.solservePanel{
width:min(100%,1000px);
margin:6px auto;
border-radius:16px;
padding: 20px;
background:
linear-gradient(
180deg,
rgba(12,8,18,0.88) 0%,
rgba(8,8,14,0.92) 45%,
rgba(18,10,24,0.96) 100%
);
backdrop-filter:blur(28px);
-webkit-backdrop-filter:blur(28px);
border:
1px solid #ff37e1;
box-shadow:
0 0 12px rgba(255, 196, 0, 0.601),
inset 0 1px 2px rgba(255,255,255,0.08);
}
/* TITLE */
.panelSub{
position:relative;
text-align:left;
font-size:
16px;
font-weight:900;
line-height:1;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:10px;
padding-bottom:8px;
background:
linear-gradient(
180deg,
#FFFBEA 0%,
#FFE08A 18%,
#F2C76B 40%,
#D8A94A 65%,
#A96A14 100%
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
text-shadow:
0 0 10px rgb(247 4 139 / 32%);
}
/* GRID */
.quickCommands{
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
gap:4px;
}
.modal{
position:fixed;
inset:0;
background:rgba(0,0,0,0.8);
display:none;
justify-content:center;
align-items:center;
z-index:99999;
}
.modalBox{
width:90%;
max-width:500px;
background:#111;
border:1px solid #564ad8;
border-radius:20px;
padding:20px;
color:white;
}
.modalBox input,
.modalBox textarea{
width:100%;
margin-top:10px;
padding:12px;
background:#000;
color:white;
border:1px solid #4a4fd8;
border-radius:10px;
}
.modalBox textarea{
height:150px;
resize:none;
}
/* ================================
💬 MESSAGES
================================ */
.msg{
width:100%;
margin:10px 0;
padding:14px;
border-radius:14px;
line-height:1.7;
font-size:
clamp(14px,4vw,17px);
white-space:pre-wrap;
overflow-wrap:anywhere;
word-break:break-word;
}
/* USER MESSAGE */
.user {
color: #a1aef8;
background: linear-gradient(
145deg,
rgba(35, 25, 5, 0.95),
rgba(80, 4, 245, 0.959)
);
border: 1px solid rgba(255, 215, 100, 0.4);
box-shadow:
0 0 12px rgba(255, 196, 0, 0.15),
inset 0 1px 2px rgba(255,255,255,0.08);
border-radius: 12px;
padding: 12px;
}
/* BOT MESSAGE */
.bot {
background: linear-gradient(
145deg,
rgba(5, 5, 5, 0.96),
rgba(18, 18, 18, 0.92)
);
color: #f5d97b;
border: 1px solid rgba(255, 215, 100, 0.18);
box-shadow:
0 0 15px rgba(255, 174, 0, 0.08),
inset 0 1px 2px rgba(255,255,255,0.04);
border-radius: 12px;
padding: 12px;
}
/* ================================
⌨ INPUT
================================ */
input{
width:100%;
padding:16px;
border-radius:14px;
font-size:16px;
background: rgba(10, 10, 10, 0.92);
color: #f8e7a1;
border-radius: 10px;
border: 1px solid rgba(255, 215, 100, 0.35);
outline: none;
box-shadow:
inset 0 1px 3px rgba(255,255,255,0.06),
0 0 10px rgba(255, 196, 0, 0.08);
transition: all 0.25s ease;
display:flex;
gap:10px;
margin-top:auto;
}
/* Input focus glow */
input:focus {
border-color: #ffd700;
box-shadow:
0 0 15px rgba(255, 215, 0, 0.35),
inset 0 1px 3px rgba(255,255,255,0.08);
}
/* Placeholder */
input::placeholder {
color: rgba(255, 230, 150, 0.45);
}
/* =========================
🌌 APP LAYOUT
========================= */
.appLayout{
display:flex;
width:100%;
min-height:100vh;
}
/* =========================
🖥 MAIN SCREEN
========================= */
.mainScreen{
flex:1;
display:flex;
flex-direction:column;
gap:20px;
padding:20px;
min-width:0;
}
/* =========================
⌨ INPUT
========================= */
.inputArea{
display:flex;
gap:12px;
align-items:center;
}
.inputArea input{
flex:1;
}
.sidebarLogo{
height:50px;
filter:
drop-shadow(0 0 8px rgb(105 139 255 / 45%))
drop-shadow(0 0 18px rgb(0 54 255 / 35%))
drop-shadow(0 0 28px rgba(255,215,0,0.18));
}
/* 🌸 PULSING GLOW */
@keyframes logoGlow{
0%{
filter:
drop-shadow(0 0 8px rgb(105 148 255 / 35%))
drop-shadow(0 0 18px rgb(0 92 255 / 25%))
drop-shadow(0 0 28px rgba(255,215,0,0.10));
transform:translateY(0px);
}
50%{
filter:
drop-shadow(0 0 14px rgb(105 214 255 / 75%))
drop-shadow(0 0 30px rgb(0 16 255 / 55%))
drop-shadow(0 0 44px rgba(255,215,0,0.22));
transform:translateY(-2px);
}
100%{
filter:
drop-shadow(0 0 8px rgb(105 155 255 / 35%))
drop-shadow(0 0 18px rgb(0 107 255 / 25%))
drop-shadow(0 0 28px rgba(255,215,0,0.10));
transform:translateY(0px);
}
}
/* =========================
SIDEBAR
========================= */
.sidebarBrand {
margin-top: 0px;
display: flex;
align-items: center;
gap: 12px;
}
.sidebarLogo {
width: 45px;
object-fit: contain;
}
.Banner {
margin: 0;
font-family: "Orbitron", sans-serif;
color: #ffffff;
font-size: 15px;
font-weight: 700;
letter-spacing: 2px;
}
.sidebar{
position: fixed;
top: 0;
width:100%;
left: 0;
background:
linear-gradient(
180deg,
rgba(12,8,18,0.88) 0%,
rgba(8,8,14,0.92) 45%,
rgba(18,10,24,0.96) 100%
);
z-index:70000;
}
.links {
display: block;
text-align: right;
padding-right: 20px;
margin: 8px 0;
color: #d8ffe3;
text-decoration: none;
font-size: 15px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
border-right: 3px solid transparent;
transition: all 0.3s ease;
}
.sidebar a:hover {
color: #ffffff;
text-shadow:
0 0 5px #0066ff,
0 0 12px #0066ff,
0 0 22px rgba(0, 102, 255, 0.7);
padding-right: 28px;
}
/* Active click */
.sidebar a:active {
color: #0066ff;
}
.sidebar a.contactButton {
display: inline-block;
padding: 12px 24px;
color: #ffffff;
background: linear-gradient(135deg, #0066ff, #003dcc);
border: 1px solid #3385ff;
border-radius: 8px;
text-align: center;
text-decoration: none;
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
box-shadow: 0 0 12px rgba(0, 102, 255, 0.25);
transition: all 0.3s ease;
}
.sidebar a.contactButton:hover {
color: #ffffff;
background: #0066ff;
border-color: #66a3ff;
box-shadow: 0 0 20px rgba(0, 102, 255, 0.65);
transform: translateY(-2px);
padding-right: 24px;
}
/* =========================
🎴 PREMIUM COMMAND BUTTON
========================= */
.commandCard{
position:relative;
width:100%;
background: none;
display:flex;
align-items:center;
justify-content:center;
margin: 10px auto 8px auto;
padding:8px 18px;
border-radius: 20px;
overflow:hidden;
cursor:pointer;
color:#fff4dc;
font-size:15px;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;
}
/* =========================
✨ INNER GLOW
========================= */
.commandCard::before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
background:
linear-gradient(
180deg,
rgba(255,255,255,0.04),
transparent 30%
);
pointer-events:none;
}
/* =========================
🌸 PINK AMBIENT GLOW
========================= */
.commandCard::after{
content:"";
position:absolute;
width:120px;
height:120px;
top:-50px;
right:-40px;
background:
radial-gradient(
circle,
rgba(255,0,128,0.16),
transparent 72%
);
filter:blur(18px);
opacity:0.7;
transition:all 0.3s ease;
pointer-events:none;
}
/* =========================
🔥 HOVER
========================= */
.commandCard:hover{
transform:
translateY(-3px)
scale(1.015);
border:
1px solid rgba(255,215,120,0.24);
background:
linear-gradient(
145deg,
rgba(20,10,30,0.98),
rgba(28,12,40,0.95)
);
box-shadow:
0 0 20px rgba(255,0,128,0.16),
0 0 40px rgba(255,215,0,0.08),
0 12px 35px rgba(0,0,0,0.45);
}
/* =========================
✨ HOVER GLOW INTENSITY
========================= */
.commandCard:hover::after{
opacity:1;
transform:scale(1.15);
}
/* =========================
💫 ACTIVE CLICK
========================= */
.commandCard:active{
transform:
scale(0.98);
}
/* =========================
🏛 FOOTER
========================= */
.sidebar h3{
margin-top:auto;
text-align:center;
font-size:8px;
letter-spacing:1px;
color:rgba(255,255,255,0.72);
text-transform:uppercase;
text-shadow:
0 0 10px rgba(255,215,0,0.3);
}
/* =========================
💖 PULSE ANIMATION
========================= */
@keyframes pinkPulse{
0%{
opacity:0.55;
filter:brightness(1);
}
50%{
opacity:1;
filter:brightness(1.45);
}
100%{
opacity:0.55;
filter:brightness(1);
}
}
/* =========================================
🌌 GRIFFY NEWS BAR — CINEMATIC VERSION
========================================= */
.griffy-news {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
width: 97.5%;
min-height: 74px;
padding: 0 28px;
background:
linear-gradient(
135deg,
rgba(6,10,30,0.96),
rgba(10,18,50,0.94),
rgba(5,8,28,0.96)
);
border-top: 1px solid rgba(255,0,180,0.12);
border-bottom: 1px solid rgba(34,211,238,0.08);
backdrop-filter: blur(18px);
box-shadow:
0 -1px 0 rgba(255,255,255,0.03),
0 12px 40px rgba(0,0,0,0.45),
inset 0 1px 0 rgba(255,255,255,0.04);
z-index: 20;
}
.griffy-news::before {
content: "";
position: absolute;
inset: -40%;
background:
radial-gradient(
circle at 20% 50%,
rgba(168,85,247,0.18),
transparent 35%
),
radial-gradient(
circle at 80% 50%,
rgba(34,211,238,0.14),
transparent 35%
);
animation: ambientMove 10s ease-in-out infinite alternate;
pointer-events: none;
}
.griffy-news::after {
content: "";
position: absolute;
top: 0;
left: -120%;
width: 60%;
height: 100%;
background: linear-gradient(
115deg,
transparent,
rgba(255,255,255,0.07),
transparent
);
transform: skewX(-20deg);
animation: shimmerSweep 7s linear infinite;
pointer-events: none;
}
.news-left {
display: flex;
align-items: center;
gap: 18px;
position: relative;
z-index: 2;
}
.news-icon {
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
color: #d00685;
font-size: 18px;
transition: all 0.3s ease;
}
/* =========================================
📰 TEXT BLOCK
========================================= */
.news-content {
display: flex;
flex-direction: column;
gap: 3px;
}
/* HEADLINE */
.griffy-news h3 {
margin: 0;
font-size: 15px;
font-weight: 800;
letter-spacing: 1.2px;
text-transform: uppercase;
color: rgba(255,255,255,0.95);
display: flex;
align-items: center;
gap: 10px;
}
/* LIVE TAG */
.griffy-news h3 span {
padding: 4px 10px;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
color: white;
background:
linear-gradient(
90deg,
#ff0080,
#7c3aed
);
box-shadow:
0 0 10px rgba(255,0,140,0.35);
animation: pulseTag 2.5s ease infinite;
}
/* PARAGRAPH */
.griffy-news p {
margin: 0;
font-size: 14px;
font-weight: 500;
color: rgba(203,213,245,0.78);
letter-spacing: 0.3px;
}
/* =========================================
🚀 BUTTON
========================================= */
.news-btn {
position: relative;
z-index: 2;
border: none;
outline: none;
padding: 12px 22px;
border-radius: 14px;
font-size: 16px;
font-weight: 800;
letter-spacing: 0.8px;
color: white;
cursor: pointer;
background:
linear-gradient(
135deg,
rgb(139 92 246 / 22%),
rgb(192 239 246 / 36%)
);
box-shadow:
0 6px 20px rgba(34,211,238,0.18),
0 0 12px rgba(139,92,246,0.22);
opacity: 0.1;
transition: all 0.25s ease;
}
/* BUTTON HOVER */
.news-btn:hover {
transform: translateY(-2px);
box-shadow:
0 10px 30px rgba(34,211,238,0.25),
0 0 18px rgba(139,92,246,0.28);
}
/* BUTTON ACTIVE */
.news-btn:active {
transform: scale(0.98);
}
.news-btn a {
color: #7dd3fc;
text-decoration: none;
transition: color 0.25s ease;
}
.news-btn a:hover {
color: #ff4fd8;
}
/* =========================================
✨ MICRO GLOW LINE
========================================= */
.griffy-news .top-line {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background:
linear-gradient(
90deg,
transparent,
rgba(34,211,238,0.4),
rgba(255,0,180,0.4),
transparent
);
opacity: 0.7;
}
/* =========================================
📱 RESPONSIVE
========================================= */
@media (max-width: 768px) {
.griffy-news {
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 18px;
}
.news-btn {
width: 100%;
}
.griffy-news h3 {
font-size: 14px;
}
.griffy-news p {
font-size: 13px;
}
}
/* =========================================
🎞️ ANIMATIONS
========================================= */
@keyframes shimmerSweep {
0% {
left: -120%;
}
100% {
left: 150%;
}
}
@keyframes ambientMove {
0% {
transform: translateX(-2%) translateY(0%);
}
100% {
transform: translateX(2%) translateY(2%);
}
}
@keyframes pulseTag {
0% {
box-shadow:
0 0 8px rgba(255,0,140,0.25);
}
50% {
box-shadow:
0 0 16px rgba(255,0,140,0.45);
}
100% {
box-shadow:
0 0 8px rgba(255,0,140,0.25);
}
}
.news-item img {
width: 100%;
border-radius: 8px;
}
.news-item h3 {
margin: 10px 0 5px;
}
.book-review {
font-size: 14px;
line-height: 1.4;
margin-bottom: 10px;
color: #666;
}
.news-item img {
width: 180px;
height: 260px;
object-fit: cover;
border-radius: 8px;
display: block;
margin: 0 auto 10px;
}
/* Input Area */
.inputArea{
display:flex;
gap:10px;
padding:15px;
border-top:1px solid rgba(64, 10, 225, 0.978);
}
.inputArea input{
flex:1;
padding:10px;
border-radius:10px;
}
.inputArea button{
padding:10px 20px;
border-radius: 10px;
}
#chat{
position:fixed;
bottom:120px;
right:20px;
width:500px;
height:350px;
display:none;
flex-direction:column;
padding:0; /* important */
overflow:hidden;
background:#0f172a;
border-radius:20px;
z-index:9998;
}
.bold {
font-weight: 900;
font-size: 12px;
}
/* =========================================
🔵 EDUAGENT NEWS BAR
BLUE / CYAN / NAVY ONLY
========================================= */
.griffy-news {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
width: 100%;
min-height: 72px;
padding: 10px 28px;
background:
linear-gradient(
135deg,
rgba(2, 10, 35, 0.98),
rgba(4, 22, 58, 0.96),
rgba(1, 10, 32, 0.98)
);
border-top: 1px solid rgba(0, 170, 255, 0.45);
border-bottom: 1px solid rgba(0, 170, 255, 0.22);
box-shadow:
0 0 18px rgba(0, 102, 255, 0.18),
0 8px 30px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
backdrop-filter: blur(18px);
z-index: 20;
}
/* =========================================
🌌 BLUE AMBIENT GLOW
========================================= */
.griffy-news::before {
content: "";
position: absolute;
inset: -100%;
background:
radial-gradient(
circle at 15% 50%,
rgba(0, 170, 255, 0.18),
transparent 30%
),
radial-gradient(
circle at 85% 50%,
rgba(0, 102, 255, 0.14),
transparent 32%
);
animation: eduNewsAmbient 10s ease-in-out infinite alternate;
pointer-events: none;
}
/* =========================================
⚡ CYAN SHIMMER
========================================= */
.griffy-news::after {
content: "";
position: absolute;
top: 0;
left: -120%;
width: 55%;
height: 100%;
background:
linear-gradient(
110deg,
transparent,
rgba(105, 229, 255, 0.10),
transparent
);
transform: skewX(-20deg);
animation: eduNewsShimmer 8s linear infinite;
pointer-events: none;
}
/* =========================================
🧠 NEWS CONTENT
========================================= */
.news-left {
display: flex;
align-items: center;
gap: 16px;
position: relative;
z-index: 2;
min-width: 0;
}
/* =========================================
🔵 NEWS ICON
========================================= */
.news-icon {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #00aaff;
font-size: 18px;
border: 1px solid rgba(0, 170, 255, 0.45);
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(0, 170, 255, 0.18),
rgba(0, 50, 120, 0.12)
);
box-shadow:
0 0 10px rgba(0, 170, 255, 0.35),
inset 0 0 12px rgba(0, 102, 255, 0.12);
transition: all 0.3s ease;
}
.griffy-news:hover .news-icon {
color: #69e5ff;
border-color: #00aaff;
box-shadow:
0 0 12px rgba(0, 170, 255, 0.55),
0 0 28px rgba(0, 102, 255, 0.25);
}
/* =========================================
📰 TEXT AREA
========================================= */
.news-content {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
/* =========================================
📰 LATEST NEWS
========================================= */
.griffy-news h3 {
margin: 0;
font-size: 13px;
font-weight: 800;
letter-spacing: 1.8px;
text-transform: uppercase;
color: #ffffff;
display: flex;
align-items: center;
gap: 9px;
text-shadow:
0 0 8px rgba(0, 170, 255, 0.35);
}
/* =========================================
🔵 LIVE TAG
========================================= */
.griffy-news h3 span {
padding: 3px 8px;
border-radius: 999px;
font-size: 9px;
font-weight: 800;
letter-spacing: 1px;
color: #ffffff;
background:
linear-gradient(
90deg,
#006bff,
#00aaff
);
box-shadow:
0 0 8px rgba(0, 170, 255, 0.45);
animation: eduNewsPulse 2.5s ease infinite;
}
/* =========================================
📰 NEWS ITEM
========================================= */
.news-item {
position: relative;
z-index: 5;
min-width: 0;
}
.news-item a {
display: block;
color: rgba(225, 245, 255, 0.92);
text-decoration: none;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: all 0.3s ease;
}
.news-item a:hover {
color: #69e5ff;
text-shadow:
0 0 8px rgba(0, 170, 255, 0.65),
0 0 18px rgba(0, 102, 255, 0.35);
}
/* =========================================
✨ TOP ENERGY LINE
========================================= */
.griffy-news .top-line {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background:
linear-gradient(
90deg,
transparent,
#006bff,
#00aaff,
#69e5ff,
#00aaff,
#006bff,
transparent
);
opacity: 0.9;
pointer-events: none;
}
/* =========================================
🎞️ ANIMATIONS
========================================= */
@keyframes eduNewsShimmer {
0% {
left: -120%;
}
100% {
left: 150%;
}
}
@keyframes eduNewsAmbient {
0% {
transform: translateX(-2%) translateY(0%);
}
100% {
transform: translateX(2%) translateY(2%);
}
}
@keyframes eduNewsPulse {
0% {
box-shadow:
0 0 7px rgba(0, 170, 255, 0.3);
}
50% {
box-shadow:
0 0 15px rgba(0, 170, 255, 0.65);
}
100% {
box-shadow:
0 0 7px rgba(0, 170, 255, 0.3);
}
}
/* =========================================
📱 MOBILE
========================================= */
@media (max-width: 768px) {
.griffy-news {
min-height: 68px;
padding: 10px 16px;
}
.news-left {
gap: 12px;
}
.news-icon {
width: 36px;
height: 36px;
}
.griffy-news h3 {
font-size: 12px;
}
.news-item a {
font-size: 12px;
}
}
/* =====================================
CYBER QUIZ BOX
===================================== */
.landingBox4 {
position: relative;
overflow: hidden;
padding: 15px 35px 35px;
border: 2px solid #123cff;
border-radius: 18px;
background:
radial-gradient(
circle at 65% 45%,
rgba(0, 170, 255, 0.14),
transparent 35%
),
linear-gradient(
135deg,
#050b25,
#07133a,
#020817
);
box-shadow:
0 0 25px rgba(0, 70, 255, 0.35),
inset 0 0 40px rgba(0, 70, 255, 0.08);
}
/* futuristic glow lines */
.landingBox4::before {
content: "";
position: absolute;
top: 0;
left: 40px;
width: 150px;
height: 3px;
background: #00ff91;
box-shadow:
0 0 12px #00ff91;
}
.landingBox4::after {
content: "";
position: absolute;
bottom: 0;
right: 40px;
width: 150px;
height: 3px;
background: #00cfff;
box-shadow:
0 0 12px #00cfff;
}
/* =====================================
HEADER
===================================== */
.quizHeader {
position: relative;
z-index: 2;
align-self: start;
margin-top: 0;
padding-top: 0;
}
.quizEyebrow {
align-self: start;
font-family: "Inter", sans-serif;
color: #59eaff;
margin-top: 0;
font-size: 8px;
font-weight: bold;
letter-spacing: 4px;
}
.thinkSpan {
color: #ffffff;
font-size: 10px;
}
.playSpan {
color: #ffffff;
font-size: 10px;
}
.changeSpan {
font-family: "Inter", sans-serif;
background: linear-gradient(
90deg,
#59eaff 0%,
#00ff91 50%,
#ffffff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 10px;
}
.trySpan {
color: white;
}
.quizTAGS {
text-align: center;
margin-top: 250px;
}
.landingH1B4 {
padding-top: 10px;
font-family: "Orbitron", serif;
font-weight: 800;
font-size: 20px;
padding-right: 20px;
color: white;
}
/* =====================================
ENGINE LABEL
===================================== */
.quizEngine {
display: inline-block;
margin-top: 20px;
padding: 7px 16px;
border: 1px solid #00d9ff;
border-radius: 6px;
color: #65eaff;
font-size: 8px;
font-weight: bold;
letter-spacing: 2px;
background: rgba(0,150,255,0.06);
box-shadow:
0 0 12px rgba(0,200,255,0.15);
}
.landingP {
max-width: 900px;
margin-top: 15px;
color: #cbd5e1;
font-size: 13px;
font-weight: 400;
line-height: 1.5;
}
.landingP1 {
font-weight: 800;
font-size: 14px;
background: linear-gradient(
90deg,
#59eaff 0%,
#00ff91 50%,
#ffffff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 13px;
line-height: 1.5;
}
/* =====================================
MAIN LAYOUT
===================================== */
.quizMain {
margin-left: 150px;
position: relative;
z-index: 2;
display: grid;
grid-template-columns:
0.8fr
1.2fr;
gap: 35px;
}
/* =====================================
LEFT INFO PANEL
===================================== */
.quizInfo {
padding: 20px;
border-left: 2px solid rgba(0,220,255,0.4);
background:
linear-gradient(
90deg,
rgba(0,150,255,0.05),
transparent
);
}
.quizIcon {
font-size: 42px;
margin-bottom: 5px;
filter:
drop-shadow(0 0 10px #00d9ff);
}
.quizIcon2 {
margin-top: 30px;
font-size: 32px;
margin-bottom: 15px;
filter:
drop-shadow(0 0 10px #00d9ff);
}
.quizInfo h2 {
margin: 5px 0;
font-size: 28px;
color: #00ff91;
text-shadow:
0 0 10px rgba(0,255,145,0.4);
}
.quizInfo p {
color: #aebbd0;
font-size: 12px;
line-height: 1.5;
}
/* =====================================
STATS
===================================== */
.quizStats {
display: flex;
margin-left: 130px;
gap: 20px;
margin-top: 30px;
padding-top:60px;
}
.quizStats div {
text-align: center;
padding-right: 18px;
border-right: 1px solid rgba(0,200,255,0.35);
}
.quizStats div:last-child {
border-right: none;
}
.quizStats strong {
display: block;
margin-bottom: 7px;
color: #00d9ff;
font-size: 22px;
text-shadow:
0 0 10px #00d9ff;
}
.quizStats span {
font-size: 9px;
line-height: 1.4;
letter-spacing: 1px;
color: #76eaff;
}
/* =====================================
QUIZ CONTAINER
===================================== */
#quizContainer {
position: relative;
width: 900px;
padding: 25px;
border: 1px solid rgba(0,210,255,0.6);
border-radius: 14px;
background:
linear-gradient(
145deg,
rgba(0,30,75,0.85),
rgba(3,10,30,0.95)
);
box-shadow:
inset 0 0 30px rgba(0,150,255,0.08),
0 0 20px rgba(0,100,255,0.15);
}
/* =====================================
QUESTION HEADER
===================================== */
.questionHeader {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
color: #00d9ff;
font-size: 10px;
font-weight: bold;
letter-spacing: 2px;
}
#questionNumber {
color: #00ff91;
font-size: 14px;
}
/* =====================================
QUESTION
===================================== */
#question {
margin: 0 0 25px;
color: white;
font-size: 24px;
font-weight: bold;
line-height: 1.25;
}
/* =====================================
ANSWERS
===================================== */
#answers {
display: flex;
flex-direction: column;
gap: 12px;
}
#answers button {
width: 100%;
min-height: 55px;
padding: 12px 18px;
border: 2px solid #00cfff;
border-radius: 10px;
background:
rgba(0,100,180,0.08);
color: white;
text-align: left;
font-size: 15px;
cursor: pointer;
transition:
0.25s ease;
box-shadow:
inset 0 0 10px rgba(0,200,255,0.03);
}
#answers button:hover {
transform: translateX(6px);
border-color: #00ff91;
background:
rgba(0,255,145,0.08);
box-shadow:
0 0 18px rgba(0,255,145,0.25);
}
/* =====================================
RESULT
===================================== */
#result {
margin-top: 20px;
font-size: 16px;
font-weight: bold;
color: #00ff91;
}
/* =====================================
MOBILE
===================================== */
@media (max-width: 850px) {
.quizMain {
grid-template-columns: 1fr;
}
.landingH1B4 {
font-size: 42px;
}
.quizStats {
gap: 10px;
}
}
.finalScore {
text-align: center;
padding: 25px;
}
.scoreIcon {
font-size: 45px;
margin-bottom: 10px;
}
.scoreTitle {
color: #00d9ff;
font-size: 13px;
font-weight: bold;
letter-spacing: 3px;
}
.scoreNumber {
margin: 15px 0;
font-size: 60px;
font-weight: 900;
color: #00ff91;
text-shadow:
0 0 15px rgba(0,255,145,0.6);
}
.scoreMessage {
color: #cbd5e1;
font-size: 15px;
margin-bottom: 25px;
}
.restart-btn {
width: auto !important;
padding: 12px 30px !important;
text-align: center !important;
border-color: #00ff91 !important;
color: #00ff91 !important;
}
.restart-btn:hover {
background: rgba(0,255,145,0.12) !important;
}
.landingLayout {
display: flex;
align-items: center;
width: 100%;
max-width: 1400px;
padding: 20px;
}
.landingBox1 {
margin-left: 550px;
max-height: 300px;
box-sizing: border-box;
}
@media (max-width: 768px) {
.landingLayout {
flex-direction: column;
}
.bannerImageContainer {
width: 100%;
}
.landingBox1 {
width: 100%;
max-width: 400px;
}
}
.learningCard {
width: 100%;
position: relative;
text-align: center;
padding: 20px;
cursor: pointer;
}
/* Keep the title visible */
.learningCard .landingH2 {
transition: opacity 0.3s ease;
}
/* Hide the description initially */
.learningCard .landingP1 {
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
}
/* Reveal the description on hover */
.learningCard:hover .landingP1 {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Optional: make the title glow on hover */
.learningCard:hover .landingH2 {
text-shadow: 0 0 10px #00e5ff;
}
/* HOW IT WORKS - independent styling */
.howEyebrow {
display: inline-block;
margin-top: 0px;
margin-left: 10px;
margin-bottom: 20px;
padding: 7px 16px;
border: 1px solid #00d9ff;
border-radius: 6px;
color: #65eaff;
font-size: 8px;
font-weight: bold;
letter-spacing: 2px;
background: rgba(0,150,255,0.06);
box-shadow:
0 0 12px rgba(0,200,255,0.15);
}
.understandIcon {
height: 20px;
width: 20px;
margin-bottom: 20px;
}
.explainIcon {
height: 20px;
width: 20px;
margin-bottom: 20px;
}
.focusedIcon {
height: 20px;
width: 20px;
margin-bottom: 20px;
}
.controlledIcon {
height: 20px;
width: 20px;
margin-bottom: 20px;
}
.howWorksBox {
width: 100%;
box-sizing: border-box;
background: #090e28;
border: 2px solid #006BFF;
border-radius: 12px;
box-shadow:
0 0 5px #006BFF,
0 0 10px #006BFF,
0 0 20px #00F5FF,
inset 0 0 8px rgba(0, 107, 255, 0.25);
border-radius: 16px;
color: #eeeeee;
}
.howWorksHeader {
font-family: "Orbitron", sans-serif;
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
width: 100%;
}
.howWorksTitle {
font-family: "orbitron", sans-serif;
color: #ffffff;
margin-left: 10px;
font-size: 20px;
weight: 800px;
}
.howWorksIntro {
margin-top: 15px;
margin-left: 10px;
color: #cbd5e1;
font-size: 13px;
font-weight: 400;
line-height: 1.5;
}
.howWorksCard {
padding: 18px;
border-radius: 16px;
background: #090d124e;
}
.howWorksDescription {
max-width: 600px;
margin-top: 15px;
color: #cbd5e1;
font-size: 13px;
font-weight: 400;
line-height: 1.5;
}
.howWorksArrow {
width: 2px;
height: 24px;
background: #00d9ff;
margin: 0 auto;
}
@media (max-width: 600px) {
.howWorksBox {
padding: 18px;
}
.howWorksTitle {
font-size: 22px;
}
}
/* HOW IT WORKS - 2 x 2 feature layout */
.howWorksBox {
width: 100%;
box-sizing: border-box;
padding: 25px;
background: #090e28b7;
border: 1px solid #252a30;
border-radius: 16px;
color: #eeeeee;
}
.howWorksFeatures {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
width: 100%;
}
.howWorksCard {
min-width: 0;
box-sizing: border-box;
padding: 18px;
}
.howWorksHeading {
padding-top: 10px;
font-family: "Orbitron", serif;
font-weight: 800;
font-size: 20px;
padding-right: 20px;
}
.howWorksDescription {
color: #c8c8c8;
font-size: 14px;
line-height: 1.6;
margin: 0;
}
@media (max-width: 600px) {
.howWorksFeatures {
grid-template-columns: 1fr;
gap: 16px;
}
.howWorksBox {
padding: 18px;
}
}
/* EDUAGENT FRAMEWORK CAROUSEL */
.landingBox2 {
width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.frameworkCarousel {
display: flex;
align-items: center;
gap: 16px;
width: 100%;
margin: 30px auto 15px;
}
.frameworkViewport {
flex: 1;
min-width: 0;
overflow: hidden;
border-radius: 16px;
}
.frameworkTrack {
display: flex;
transition: transform 0.45s ease-in-out;
will-change: transform;
}
.frameworkTrack .learningCard {
flex: 0 0 100%;
width: 100%;
min-width: 0;
box-sizing: border-box;
margin: 0;
padding: 32px;
border-radius: 16px;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 240px;
text-align: center;
}
.frameworkNumber {
display: block;
margin-bottom: 18px;
font-size: 12px;
font-weight: 700;
letter-spacing: 3px;
opacity: 0.7;
}
.frameworkTrack .landingH2 {
margin-bottom: 14px;
}
.frameworkTrack .landingP1 {
max-width: 520px;
margin: 0 auto;
line-height: 1.7;
}
/* Navigation arrows */
.frameworkArrow {
flex: 0 0 42px;
width: 42px;
height: 42px;
border: 1px solid currentColor;
border-radius: 50%;
background: transparent;
color: inherit;
font-size: 18px;
cursor: pointer;
transition: background 0.2s, opacity 0.2s;
}
.frameworkArrow:hover {
background: rgba(127, 127, 127, 0.15);
}
.frameworkArrow:disabled {
opacity: 0.3;
cursor: default;
}
/* Dots and counter */
.frameworkControls {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-top: 20px;
}
.frameworkDots {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
}
.frameworkDot {
width: 8px;
height: 8px;
padding: 0;
border: 0;
border-radius: 50%;
background: currentColor;
opacity: 0.3;
cursor: pointer;
transition: opacity 0.2s, transform 0.2s;
}
.frameworkDot.active {
opacity: 1;
transform: scale(1.35);
}
.frameworkCounter {
margin: 0;
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
}
/* Keyboard focus */
.frameworkArrow:focus-visible,
.frameworkDot:focus-visible {
outline: 2px solid currentColor;
outline-offset: 4px;
}
/* Mobile */
@media (max-width: 600px) {
.frameworkCarousel {
gap: 8px;
}
.frameworkArrow {
flex-basis: 32px;
width: 32px;
height: 32px;
font-size: 14px;
}
.frameworkTrack .learningCard {
padding: 24px 16px;
min-height: 220px;
}
.frameworkControls {
flex-wrap: wrap;
}
.frameworkDots {
gap: 7px;
}
}
@media (prefers-reduced-motion: reduce) {
.frameworkTrack {
transition: none;
}
}
/* =====================================
EDUAGENT NEURAL FRAMEWORK
===================================== */
.edu-neural {
--en-bg: #090E28;
--en-panel: #101936;
--en-line: #24365A;
--en-cyan: #58E6FF;
--en-text: #EAF5FF;
--en-muted: #91A8C8;
box-sizing: border-box;
width: 97.5%;
padding: clamp(24px, 4vw, 56px);
overflow: hidden;
color: var(--en-text);
background:
radial-gradient(ellipse at 25% 30%,
rgba(29, 91, 132, 0), transparent 48%),
var(--en-bg);
border: 1px solid rgb(88, 230, 255);
border-radius: 18px;
font-family: inherit;
}
.edu-neural *,
.edu-neural *::before,
.edu-neural *::after {
box-sizing: border-box;
}
.edu-neural__header {
max-width: 760px;
margin: 0 auto 36px;
}
.edu-neural__eyebrow {
top: 0;
padding: 7px 16px;
border: 1px solid #00d9ff;
border-radius: 6px;
color: #65eaff;
font-size: 8px;
font-weight: bold;
letter-spacing: 2px;
background: rgba(0,150,255,0.06);
box-shadow:
0 0 12px rgba(0,200,255,0.15);
}
.edu-neural__status,
.edu-neural__panel-tag,
.edu-neural__detail-label {
color: var(--en-cyan);
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
}
.edu-neural .landingH1B2 {
padding-top: 10px;
font-family: "Orbitron", serif;
font-weight: 800;
font-size: 20px;
padding-right: 20px;
color: var(--en-text);
}
.edu-neural__intro {
max-width: 600px;
margin-top: 15px;
color: #cbd5e1;
font-size: 13px;
font-weight: 400;
line-height: 1.5;
}
.edu-neural__layout {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(250px, .8fr);
align-items: center;
gap: 28px;
}
.edu-neural__visual {
position: relative;
min-width: 0;
padding: 12px;
border: 1px solid rgba(88, 230, 255, .13);
border-radius: 14px;
background: rgba(5, 13, 35, .55);
}
.edu-neural__status {
display: flex;
align-items: center;
gap: 9px;
padding: 8px 10px;
}
.edu-neural__status-dot {
display: inline-block;
width: 7px;
height: 7px;
flex: 0 0 7px;
border-radius: 50%;
background: var(--en-cyan);
box-shadow: 0 0 10px rgba(88, 230, 255, .7);
}
.edu-neural__svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.edu-neural__connections path {
fill: none;
stroke: var(--en-line);
stroke-width: 1.6;
stroke-linecap: round;
transition: stroke .25s, stroke-width .25s;
}
.edu-neural__connections path.is-active {
stroke: var(--en-cyan);
stroke-width: 2.5;
filter: url(#eduGlow);
}
.edu-neural__connections path.is-related {
stroke: #397DAD;
stroke-width: 2;
}
.edu-neural__core-ring {
fill: none;
stroke: rgba(88, 230, 255, .45);
stroke-width: 1;
stroke-dasharray: 5 8;
transform-box: fill-box;
transform-origin: center;
animation: eduOrbit 28s linear infinite;
}
.edu-neural__core {
fill: #102A4A;
stroke: var(--en-cyan);
stroke-width: 1.5;
filter: url(#eduGlow);
}
.edu-neural__core-title {
fill: #F0FBFF;
font-size: 15px;
font-weight: 800;
letter-spacing: 1px;
}
.edu-neural__core-sub {
fill: var(--en-cyan);
font-size: 9px;
letter-spacing: 2px;
}
.edu-node__circle {
fill: #101F40;
stroke: #3A5B83;
stroke-width: 1.5;
transition: fill .2s, stroke .2s;
}
.edu-node__halo {
fill: rgba(88, 230, 255, .04);
stroke: transparent;
transition: fill .2s, stroke .2s;
}
.edu-node__number {
fill: #D9F6FF;
font-size: 11px;
font-weight: 800;
text-anchor: middle;
pointer-events: none;
}
.edu-node__label {
fill: #A8BDD8;
font-size: 10px;
font-weight: 700;
letter-spacing: .7px;
text-anchor: middle;
pointer-events: none;
}
.edu-node:hover .edu-node__circle,
.edu-node:focus-visible .edu-node__circle,
.edu-node.is-selected .edu-node__circle {
fill: #15516A;
stroke: var(--en-cyan);
}
.edu-node:hover .edu-node__halo,
.edu-node:focus-visible .edu-node__halo,
.edu-node.is-selected .edu-node__halo {
fill: rgba(88, 230, 255, .12);
stroke: rgba(88, 230, 255, .4);
}
.edu-node.is-selected .edu-node__label {
fill: var(--en-cyan);
}
.edu-neural__hint {
margin: 8px 0 5px;
color: var(--en-muted);
font-size: 9px;
font-weight: 600;
letter-spacing: 1.3px;
text-align: center;
padding: 40px;
}
/* Information panel */
.edu-neural__panel {
min-width: 0;
padding: clamp(22px, 3vw, 34px);
border: 1px solid rgba(88, 230, 255, .23);
border-radius: 14px;
background: linear-gradient(
150deg,
rgba(20, 38, 72, .96),
rgba(10, 19, 45, .98)
);
box-shadow: 0 16px 45px rgba(0, 0, 0, .2);
}
.edu-neural__panel-tag {
display: block;
margin-top: 30px;
margin-bottom: 20px;
}
.edu-neural__panel .landingH2 {
margin: 0 0 16px;
color: var(--en-text);
font-size: clamp(10px, 2vw, 20px);
line-height: 1.4;
}
.edu-neural__panel .landingP1 {
margin: 0;
color: var(--en-muted);
font-size: 12px;
line-height: 1.9;
}
.edu-neural__divider {
height: 1px;
margin: 24px 0;
background: linear-gradient(
90deg, var(--en-cyan), transparent
);
opacity: .45;
}
.edu-neural__detail-label {
display: block;
margin-bottom: 9px;
}
.edu-neural__function {
color: var(--en-text);
font-size: 14px;
font-weight: 600;
}
.edu-neural__selected {
display: flex;
align-items: center;
gap: 10px;
margin-top: 26px;
color: var(--en-cyan);
font-size: 9px;
font-weight: 700;
letter-spacing: 1.3px;
}
.edu-neural__panel-footer {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
margin-top: 30px;
padding-top: 15px;
border-top: 1px solid rgba(145, 168, 200, .15);
color: #6F86A8;
font-size: 8px;
letter-spacing: 1px;
}
@keyframes eduOrbit {
to { transform: rotate(360deg); }
}
/* Tablet and mobile */
@media (max-width: 850px) {
.edu-neural__layout {
grid-template-columns: minmax(0, 1fr);
}
.edu-neural__visual {
max-width: 650px;
width: 100%;
margin: 0 auto;
}
.edu-neural__panel {
width: 100%;
}
}
@media (max-width: 480px) {
.edu-neural {
padding: 18px 12px;
}
.edu-neural__visual {
padding: 4px;
}
.edu-neural__svg {
width: 100%;
}
.edu-neural__connections path {
stroke-width: 2;
}
.edu-neural__panel {
padding: 22px 18px;
}
}
@media (prefers-reduced-motion: reduce) {
.edu-neural *,
.edu-neural *::before,
.edu-neural *::after {
animation: none !important;
transition: none !important;
}
}
.edu-neural .edu-node {
transform-origin: 0 0;
}
.edu-neural .edu-node:hover {
scale: none;
}
/* STOP THE EDUAGENT FRAMEWORK GRID RESIZING */
#eduFramework {
min-width: 0;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}
#eduFramework .edu-neural__header,
#eduFramework .edu-neural__layout,
#eduFramework .edu-neural__visual,
#eduFramework .edu-neural__panel {
min-width: 0;
box-sizing: border-box;
}
#eduFramework .edu-neural__layout {
width: 100%;
}
@media (max-width: 1024px) {
.banner {
width: min(500px, 65vw);
max-width: 100%;
margin-left: 20px;
}
.bannerLogo {
right: 5vw;
max-width: 30vw;
height: auto;
}
.tagline {
left: 24px;
max-width: calc(100% - 48px);
font-size: clamp(16px, 2.2vw, 22px);
}
.landingBox1 {
margin-left: 20px;
}
.dashboard-grid {
margin-left: 0;
max-width: 100%;
}
.quizStats {
margin-left: 0;
padding-top: 24px;
flex-wrap: wrap;
}
#quizContainer {
width: 100%;
max-width: 100%;
min-width: 0;
}
.landingH1B4 {
margin-right: 0;
font-size: clamp(32px, 5vw, 52px);
}
#eduFramework {
grid-template-columns: minmax(0, 1fr);
}
}
/* Tablets and phones */
@media (max-width: 768px) {
.bannerContainer {
height: auto;
min-height: 0;
padding: 16px;
margin: 0 0 18px;
overflow: hidden;
}
.banner {
display: block;
width: min(100%, 440px);
margin: 10px auto;
}
.bannerLogo {
position: relative;
display: block;
top: auto;
right: auto;
width: min(42vw, 180px);
max-width: 100%;
height: auto;
margin: 0 auto;
}
.tagline {
position: relative;
inset: auto;
margin: 12px auto 0;
text-align: center;
max-width: 100%;
font-size: clamp(16px, 4vw, 22px);
line-height: 1.35;
}
.bannerP {
font-size: 12px;
line-height: 1.5;
}
.introBox {
flex-direction: column;
width: calc(100% - 24px);
margin: 12px;
padding: 16px;
gap: 16px;
}
#previewText {
flex: 1 1 auto;
width: 100%;
padding: 0;
}
.preview-video {
display: block;
width: 100%;
max-width: 100%;
margin: 0;
}
.landingContainer {
width: 100%;
gap: 12px;
}
.landingBox,
.landingBox1,
.landingBox2,
.landingBox3,
.landingBox4,
.landingBox5,
.landingBox6 {
width: auto;
max-width: 100%;
min-width: 0;
margin-left: 12px;
margin-right: 12px;
padding: 20px;
}
.landingBox1 {
flex: 1 1 auto;
}
.landingContainer2 {
flex-direction: column;
align-items: stretch;
gap: 14px;
padding: 0;
}
.landingBox2,
.landingBox3,
.landingBox4,
.landingBox5,
.landingBox6 {
display: flex;
flex-direction: column;
align-items: stretch;
}
.landingH1,
.landingH1B2,
.landingBox3H1,
.landingH1B4 {
max-width: 100%;
padding-right: 0;
margin-right: 0;
overflow-wrap: anywhere;
}
.landingH1 {
font-size: clamp(20px, 5vw, 28px);
}
.landingH1 p {
max-width: 100%;
padding-right: 0;
font-size: 15px;
line-height: 1.6;
}
.landingP1 {
padding-left: 0;
padding-right: 0;
}
.icon1,
.icon2,
.icon3,
.icon4,
.icon5,
.icon6,
.icon7,
.icon8 {
display: block;
width: auto;
max-width: min(100%, 150px);
height: auto;
margin: 14px auto;
}
.accent-line {
width: 100%;
height: 1px;
margin: 12px 0;
background: linear-gradient(to right, transparent, #00aaff, transparent);
}
.dashboard-grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
width: 100%;
margin: 0;
padding: 0 12px;
}
.solservePanel {
width: calc(100% - 24px);
margin: 12px;
padding: 16px;
}
.quickCommands {
grid-template-columns: minmax(0, 1fr);
}
.mainScreen {
padding: 14px;
gap: 14px;
}
.sidebar {
width: 100%;
max-width: 100%;
}
.commandCard {
font-size: 14px;
padding: 12px;
}
.griffy-news {
flex-direction: column;
align-items: stretch;
gap: 12px;
padding: 14px;
}
.news-left {
align-items: flex-start;
gap: 10px;
}
.news-content {
flex: 1 1 auto;
}
.griffy-news h3 {
flex-wrap: wrap;
font-size: 12px;
letter-spacing: 1px;
line-height: 1.4;
}
.griffy-news p,
.news-item a {
font-size: 13px;
line-height: 1.5;
}
.news-btn {
width: 100%;
opacity: 1;
}
.news-item img {
width: min(100%, 180px);
height: auto;
max-height: 260px;
}
.quizMain {
grid-template-columns: minmax(0, 1fr);
gap: 18px;
}
.quizInfo {
padding: 16px;
}
.quizInfo h2 {
font-size: clamp(22px, 6vw, 28px);
}
.quizStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin: 18px 0 0;
padding: 0;
}
.quizStats div {
padding: 8px;
border-right: 0;
border: 1px solid rgba(0, 200, 255, 0.2);
border-radius: 8px;
min-width: 0;
}
.quizStats strong {
font-size: clamp(16px, 4vw, 22px);
}
.quizStats span {
font-size: 9px;
overflow-wrap: anywhere;
}
#quizContainer {
width: 100%;
padding: 16px;
}
.landingBox4 {
padding: 20px;
}
.landingH1B4 {
font-size: clamp(30px, 8vw, 44px);
line-height: 1.05;
letter-spacing: -1px;
}
.quizEyebrow {
font-size: 6px;
letter-spacing: 2px;
line-height: 1.5;
}
.quizEngine {
max-width: 100%;
font-size: 8px;
letter-spacing: 1px;
white-space: normal;
}
.modal {
padding: 14px;
}
.modalBox {
width: 100%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
padding: 16px;
}
#chatToggle {
width: 58px;
height: 58px;
right: 12px;
bottom: 12px;
}
#chat {
right: 10px;
bottom: 82px;
width: calc(100vw - 20px);
max-width: 500px;
height: min(420px, calc(100dvh - 110px));
max-height: calc(100dvh - 110px);
}
.chatMessages {
min-height: 0;
overflow-y: auto;
}
.inputArea {
gap: 8px;
padding: 10px;
}
.inputArea input {
min-width: 0;
width: 100%;
padding: 12px;
}
.inputArea button {
flex: 0 0 auto;
padding: 10px 12px;
}
#eduFramework {
grid-template-columns: minmax(0, 1fr);
gap: 18px;
width: 100%;
}
#eduFramework .edu-neural__layout {
grid-template-columns: minmax(0, 1fr);
}
#eduFramework .edu-neural__visual,
#eduFramework .edu-neural__panel {
width: 100%;
max-width: 100%;
}
}
/* Small phones */
@media (max-width: 480px) {
.mainScreen {
padding: 10px;
}
.bannerContainer {
padding: 12px;
}
.landingBox,
.landingBox1,
.landingBox2,
.landingBox3,
.landingBox4,
.landingBox5,
.landingBox6 {
margin-left: 8px;
margin-right: 8px;
padding: 14px;
border-width: 2px;
}
.landingBox1P,
.landingBox1P1,
.landingP,
.landingP2 {
font-size: 13px;
line-height: 1.55;
}
.title-text {
font-size: 15px;
padding-top: 8px;
}
.quizStats {
grid-template-columns: minmax(0, 1fr);
}
.quizStats div {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
text-align: left;
}
#question {
font-size: 1rem;
line-height: 1.5;
}
.answer-btn {
padding: 12px 10px;
font-size: 14px;
border-width: 2px;
}
#result {
font-size: 1.2rem;
overflow-wrap: anywhere;
}
.news-icon {
width: 34px;
height: 34px;
flex: 0 0 34px;
}
.griffy-news {
padding: 12px;
}
.msg {
padding: 11px;
font-size: 14px;
}
}
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Mobile feature list responsiveness */
@media (max-width: 768px) {
.feature {
display: flex;
align-items: flex-start;
gap: 8px;
width: 100%;
min-width: 0;
}
.tick {
flex: 0 0 auto;
width: 18px;
max-width: 18px;
margin-top: 2px;
}
.landingBox1P {
flex: 1 1 auto;
min-width: 0;
font-size: 13px;
line-height: 1.5;
overflow-wrap: anywhere;
}
}
/* =========================================================
EDUAGENT — CONTACT & FOOTER
Responsive desktop, tablet and mobile
========================================================= */
.ea-contact {
--ea-blue: #3047ff;
--ea-blue-light: #8194ff;
--ea-navy: #090e28;
--ea-white: #f4f6ff;
--ea-muted: #a4aecb;
--ea-border: rgba(91, 117, 255, 0.35);
position: relative;
width: 100%;
box-sizing: border-box;
overflow: hidden;
padding: 60px 30px 24px;
color: var(--ea-white);
background:
radial-gradient(
ellipse at 10% 0%,
rgba(48, 71, 255, 0.13),
transparent 45%
),
#090e28;
border-top: 2px solid var(--ea-blue);
font-family: inherit;
}
.ea-contact *,
.ea-contact *::before,
.ea-contact *::after {
box-sizing: border-box;
}
.ea-contact__inner {
width: 100%;
margin: 0 auto;
}
.ea-contact__status {
flex: 0 0 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ea-blue-light);
box-shadow: 0 0 12px rgba(129, 148, 255, 0.7);
}
/* MAIN LAYOUT */
/* MAIN LAYOUT */
.ea-contact__layout {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(min(100%, 400px), 1fr)
);
gap: clamp(20px, 4vw, 55px);
align-items: center;
width: 70%;
min-width: 0;
margin: 0;
box-sizing: border-box;
}
.ea-contact__intro {
font-family: "Inter", sans-serif;
max-width: 600px;
margin-top: 15px;
color: #cbd5e1;
font-size: 13px;
font-weight: 400;
line-height: 1.5;
}
.ea-contact__label {
margin: 0 0 18px;
color: var(--ea-blue-light);
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
}
.ea-contact__intro h2 {
max-width: 650px;
margin: 0 0 22px;
color: var(--ea-white);
font-size: 20px;
font-weight: 750;
line-height: 1.12;
letter-spacing: -1.5px;
overflow-wrap: anywhere;
}
.ea-contact__intro h2 span {
display: block;
color: var(--ea-blue-light);
}
.ea-contact__description {
max-width: 540px;
margin: 0;
color: var(--ea-muted);
font-size: 15px;
line-height: 1.85;
overflow-wrap: anywhere;
}
/* BUTTONS */
.ea-contact__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
.ea-contact__button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
min-height: 48px;
max-width: 100%;
padding: 13px 20px;
border: 1px solid var(--ea-blue);
border-radius: 7px;
background: var(--ea-blue);
color: #ffffff;
font-size: 13px;
font-weight: 700;
text-align: center;
text-decoration: none;
overflow-wrap: anywhere;
transition:
background 0.2s ease,
border-color 0.2s ease,
transform 0.2s ease;
}
.ea-contact__button:hover {
background: #4358ff;
border-color: #8194ff;
transform: translateY(-2px);
}
.ea-contact__button--secondary {
background: transparent;
border-color: var(--ea-border);
color: var(--ea-white);
}
.ea-contact__button--secondary:hover {
background: rgba(48, 71, 255, 0.12);
}
/* CONTACT CARDS */
.ea-contact__cards {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 14px;
min-width: 0;
}
.ea-contact__card {
display: flex;
align-items: flex-start;
gap: 16px;
min-width: 0;
padding: 22px;
border: 1px solid var(--ea-border);
border-radius: 10px;
background: rgba(15, 24, 59, 0.68);
color: var(--ea-white);
text-decoration: none;
transition:
border-color 0.2s ease,
background 0.2s ease,
transform 0.2s ease;
}
a.ea-contact__card:hover {
border-color: var(--ea-blue-light);
background: rgba(35, 48, 104, 0.55);
transform: translateX(3px);
}
.ea-contact__card--info {
cursor: default;
}
.ea-contact__icon {
display: flex;
flex: 0 0 42px;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: 1px solid var(--ea-border);
border-radius: 8px;
background: rgba(48, 71, 255, 0.12);
}
.ea-contact__icon svg {
width: 21px;
height: 21px;
fill: none;
stroke: var(--ea-blue-light);
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.ea-contact__card-content {
flex: 1 1 auto;
min-width: 0;
}
.ea-contact__card-content h3 {
margin: 0 0 7px;
color: var(--ea-white);
font-size: 15px;
font-weight: 700;
}
.ea-contact__card-content p {
margin: 0 0 12px;
color: var(--ea-muted);
font-size: 12px;
line-height: 1.7;
overflow-wrap: anywhere;
}
.ea-contact__card-content > span,
.ea-contact__card-content > a {
color: var(--ea-blue-light);
font-size: 12px;
font-weight: 700;
line-height: 1.6;
overflow-wrap: anywhere;
}
.ea-contact__card-content > a {
text-decoration: none;
}
.ea-contact__card-content > a:hover {
text-decoration: underline;
}
/* FOOTER */
.ea-contact__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px;
border-top: 1px solid rgba(91, 117, 255, 0.22);
}
.ea-contact__brand {
display: flex;
align-items: center;
gap: 10px;
color: var(--ea-white);
font-size: 14px;
font-weight: 750;
}
.ea-contact__brand-mark {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 1px solid var(--ea-blue);
border-radius: 6px;
background: rgba(48, 71, 255, 0.14);
color: var(--ea-blue-light);
font-size: 11px;
letter-spacing: 1px;
}
.ea-contact__footer > p {
margin: 0;
color: var(--ea-muted);
font-size: 11px;
line-height: 1.7;
}
.ea-contact__links {
display: flex;
flex-wrap: wrap;
gap: 18px;
}
.ea-contact__links a {
color: var(--ea-muted);
font-size: 11px;
text-decoration: none;
transition: color 0.2s ease;
}
.ea-contact__links a:hover {
color: var(--ea-blue-light);
}
.ea-contact__copyright {
width: 100%;
padding-top: 20px;
text-align: right;
}
/* TABLETS */
@media (max-width: 900px) {
.ea-contact {
padding: 45px 24px 22px;
}
.ea-contact__layout {
grid-template-columns: minmax(0, 1fr);
gap: 35px;
}
.ea-contact__intro h2 {
max-width: 700px;
font-size: clamp(32px, 6vw, 46px);
}
.ea-contact__cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ea-contact__card {
padding: 18px;
}
.ea-contact__footer {
margin-top: 45px;
}
}
/* MOBILE */
@media (max-width: 600px) {
.ea-contact {
padding: 34px 16px 20px;
}
.ea-contact__eyebrow {
margin-bottom: 28px;
font-size: 10px;
letter-spacing: 1.5px;
}
.ea-contact__layout {
gap: 28px;
}
.ea-contact__label {
font-size: 10px;
line-height: 1.6;
}
.ea-contact__intro h2 {
margin-bottom: 18px;
font-size: clamp(29px, 8vw, 38px);
letter-spacing: -0.8px;
line-height: 1.16;
}
.ea-contact__description {
font-size: 14px;
line-height: 1.75;
}
.ea-contact__actions {
flex-direction: column;
align-items: stretch;
gap: 10px;
margin-top: 24px;
}
.ea-contact__button {
width: 100%;
min-height: 46px;
padding: 12px 14px;
}
.ea-contact__cards {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}
.ea-contact__card {
gap: 13px;
padding: 17px 14px;
}
.ea-contact__icon {
flex-basis: 36px;
width: 36px;
height: 36px;
}
.ea-contact__icon svg {
width: 19px;
height: 19px;
}
.ea-contact__card-content h3 {
font-size: 14px;
}
.ea-contact__card-content p {
font-size: 12px;
}
.ea-contact__footer {
flex-direction: column;
align-items: flex-start;
gap: 16px;
margin-top: 35px;
padding-top: 20px;
}
.ea-contact__links {
gap: 14px;
}
.ea-contact__copyright {
font-size: 10px;
}
}
/* SMALL PHONES */
@media (max-width: 360px) {
.ea-contact {
padding-right: 12px;
padding-left: 12px;
}
.ea-contact__intro h2 {
font-size: 28px;
}
.ea-contact__card {
gap: 10px;
padding: 14px 11px;
}
.ea-contact__actions {
gap: 8px;
}
}
/* ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
.ea-contact *,
.ea-contact *::before,
.ea-contact *::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
/* FULL-WIDTH CONTACT LAYOUT */
.ea-contact {
width: 100%;
max-width: 100%;
margin: 0;
box-sizing: border-box;
}
.ea-contact__inner {
max-width: none;
margin: 0;
}
.ea-contact__layout {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0;
box-sizing: border-box;
}
.ea-contact__intro {
width: 100%;
max-width: none;
min-width: 0;
}
.ea-contact__intro h2 {
max-width: 800px;
}
.ea-contact__description {
max-width: 900px;
}
/* ==========================================================
EDUAGENT — NEURAL CONTACT TERMINAL
Responsive • Neon blue • Futuristic • Premium
========================================================== */
.landingBox5 {
--ea-blue: #3047ff;
--ea-cyan: #00e5ff;
--ea-lilac: #8194ff;
--ea-navy: #070b20;
--ea-white: #f4f7ff;
--ea-muted: #a4b2d4;
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
align-items: stretch;
width: 97.5%;
min-width: 0;
margin-left: 20;
margin-top: 20px;
padding: clamp(28px, 5vw, 68px);
box-sizing: border-box;
color: var(--ea-white);
font-family: inherit;
background:
radial-gradient(ellipse at 5% 0%,
rgba(48, 71, 255, 0.20), transparent 42%),
radial-gradient(ellipse at 100% 100%,
rgba(0, 229, 255, 0.09), transparent 40%),
linear-gradient(145deg, #0b1230 0%, #070b20 65%, #080d26 100%);
border: 1px solid rgba(48, 71, 255, 0.75);
border-radius: 18px;
box-shadow:
0 0 0 1px rgba(0, 229, 255, 0.06),
0 0 35px rgba(0, 72, 255, 0.13),
inset 0 1px 0 rgba(255, 255, 255, 0.045);
overflow: hidden;
}
/* Ambient light across the panel */
.landingBox5::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(circle at 12% 25%,
rgba(0, 229, 255, 0.12) 0 1px, transparent 3px),
radial-gradient(circle at 85% 18%,
rgba(129, 148, 255, 0.15) 0 1px, transparent 3px),
linear-gradient(115deg,
transparent 45%,
rgba(0, 229, 255, 0.025) 50%,
transparent 55%);
background-size: 90px 90px, 130px 130px, 100% 100%;
}
/* INNER WRAPPER */
.landingBox5 .ea-contact__inner {
width: 100%;
max-width: none;
min-width: 0;
margin: 0;
}
/* EYEBROW — BORDER WRAPS THE TEXT */
.landingBox5 .ea-contact__eyebrow {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: 10px;
width: fit-content;
max-width: 100%;
min-width: 0;
margin: 0 0 clamp(34px, 5vw, 58px);
padding: 9px 14px;
box-sizing: border-box;
color: var(--ea-cyan);
font-size: 8px;
font-weight: 800;
letter-spacing: 2px;
line-height: 1.5;
overflow-wrap: anywhere;
background: rgba(0, 229, 255, 0.045);
border: 1px solid rgba(0, 229, 255, 0.7);
border-radius: 6px;
box-shadow:
0 0 16px rgba(0, 229, 255, 0.06),
inset 0 0 12px rgba(0, 229, 255, 0.035);
}
.landingBox5 .ea-contact__eyebrow::before {
content: "";
flex: 0 0 7px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ea-cyan);
box-shadow: 0 0 10px var(--ea-cyan);
}
/* MAIN CONTENT */
.landingBox5 .ea-contact__layout {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0;
}
.landingBox5 .ea-contact__intro {
width: 100%;
max-width: 100%;
min-width: 0;
}
/* SECTION LABEL */
.landingBox5 .ea-contact__label {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 22px;
color: var(--ea-lilac);
font-size: 11px;
font-weight: 800;
letter-spacing: 2.5px;
line-height: 1.7;
}
.landingBox5 .ea-contact__label::before {
content: "";
flex: 0 0 6px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ea-lilac);
box-shadow: 0 0 12px rgba(129, 148, 255, 0.8);
}
/* HERO HEADING */
.landingBox5 .ea-contact__intro h2 {
max-width: 950px;
margin: 0 0 25px;
color: var(--ea-white);
font-family: "Orbitron";
font-size: 40px;
font-weight: 850;
line-height: 1.04;
letter-spacing: -2.5px;
overflow-wrap: anywhere;
text-wrap: balance;
}
.landingBox5 .ea-contact__intro h2 span {
display: block;
margin-top: 5px;
color: var(--ea-lilac);
background: linear-gradient(
90deg,
#8ea1ff 0%,
#a1b0ff 40%,
#00e5ff 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* DESCRIPTION */
.landingBox5 .ea-contact__description {
max-width: 780px;
margin: 0;
color: var(--ea-muted);
font-size: clamp(14px, 1.2vw, 16px);
line-height: 1.9;
overflow-wrap: anywhere;
}
/* ACTION BUTTONS */
.landingBox5 .ea-contact__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin-top: 34px;
}
.landingBox5 .ea-contact__button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 18px;
min-height: 52px;
max-width: 100%;
padding: 15px 22px;
box-sizing: border-box;
color: #fff;
font-size: 13px;
font-weight: 800;
line-height: 1.5;
text-align: center;
text-decoration: none;
overflow-wrap: anywhere;
background: linear-gradient(135deg, #4057ff, #293bdf);
border: 1px solid rgba(129, 148, 255, 0.75);
border-radius: 8px;
box-shadow: 0 5px 22px rgba(48, 71, 255, 0.22);
transition:
transform 180ms ease,
box-shadow 180ms ease,
border-color 180ms ease,
background 180ms ease;
}
.landingBox5 .ea-contact__button:hover {
transform: translateY(-3px);
border-color: var(--ea-cyan);
box-shadow:
0 8px 28px rgba(48, 71, 255, 0.3),
0 0 18px rgba(0, 229, 255, 0.12);
}
.landingBox5 .ea-contact__button span {
color: var(--ea-cyan);
font-size: 19px;
transition: transform 180ms ease;
}
.landingBox5 .ea-contact__button:hover span {
transform: translate(3px, -3px);
}
.landingBox5 .ea-contact__button--secondary {
color: var(--ea-white);
background: rgba(12, 19, 48, 0.7);
border-color: rgba(129, 148, 255, 0.35);
box-shadow: none;
}
.landingBox5 .ea-contact__button--secondary:hover {
background: rgba(48, 71, 255, 0.12);
}
/* FOOTER */
.landingBox5 .ea-contact__footer {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: 24px;
margin-top: 30px;
width: 100%;
min-width: 0;
}
.landingBox5 .ea-contact__brand {
display: flex;
align-items: center;
gap: 11px;
color: var(--ea-white);
font-size: 14px;
font-weight: 800;
}
.landingBox5 .ea-contact__brand-mark {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 36px;
width: 36px;
height: 36px;
color: var(--ea-cyan);
font-size: 11px;
font-weight: 900;
letter-spacing: 1px;
background: rgba(48, 71, 255, 0.12);
border: 1px solid rgba(0, 229, 255, 0.45);
border-radius: 8px;
box-shadow: inset 0 0 12px rgba(0, 229, 255, 0.04);
}
.landingBox5 .ea-contact__footer > p {
margin: 0;
color: var(--ea-muted);
font-size: 11px;
line-height: 1.8;
overflow-wrap: anywhere;
}
.landingBox5 .ea-contact__footer > p:not(.ea-contact__copyright) {
text-align: center;
}
.landingBox5 .ea-contact__links {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: 22px;
}
.landingBox5 .ea-contact__links a {
color: var(--ea-muted);
font-size: 11px;
font-weight: 650;
text-decoration: none;
transition: color 180ms ease;
}
.landingBox5 .ea-contact__links a:hover {
color: var(--ea-cyan);
}
.landingBox5 .ea-contact__copyright {
grid-column: 1 / -1;
width: 100%;
margin: 0;
}
/* TABLET */
@media (max-width: 900px) {
.landingBox5 {
padding: 36px 28px 24px;
}
.landingBox5 .ea-contact__footer {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 22px;
}
.landingBox5 .ea-contact__footer > p:not(.ea-contact__copyright) {
grid-column: 1 / -1;
grid-row: 2;
text-align: left;
}
.landingBox5 .ea-contact__links {
grid-column: 1 / -1;
justify-content: flex-start;
grid-row: 3;
}
.landingBox5 .ea-contact__copyright {
grid-row: 4;
}
}
/* MOBILE */
@media (max-width: 600px) {
.landingBox5 {
padding: 28px 18px 20px;
border-radius: 12px;
}
.landingBox5 .ea-contact__eyebrow {
margin-bottom: 35px;
font-size: 9px;
letter-spacing: 1.4px;
padding: 8px 10px;
}
.landingBox5 .ea-contact__label {
margin-bottom: 18px;
font-size: 10px;
letter-spacing: 1.8px;
}
.landingBox5 .ea-contact__intro h2 {
font-size: clamp(32px, 9vw, 46px);
letter-spacing: -1.4px;
line-height: 1.08;
}
.landingBox5 .ea-contact__description {
font-size: 14px;
line-height: 1.8;
}
.landingBox5 .ea-contact__actions {
flex-direction: column;
align-items: stretch;
gap: 11px;
margin-top: 26px;
}
.landingBox5 .ea-contact__button {
width: 100%;
min-height: 49px;
padding: 13px 15px;
}
.landingBox5 .ea-contact__footer {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
margin-top: 48px;
padding-top: 22px;
}
.landingBox5 .ea-contact__footer > p:not(.ea-contact__copyright) {
text-align: left;
}
.landingBox5 .ea-contact__links {
justify-content: flex-start;
gap: 20px;
}
.landingBox5 .ea-contact__copyright {
padding-top: 16px;
}
}
/* SMALL PHONES */
@media (max-width: 360px) {
.landingBox5 {
padding: 24px 14px 18px;
}
.landingBox5 .ea-contact__intro h2 {
font-size: 30px;
}
.landingBox5 .ea-contact__eyebrow {
letter-spacing: 1px;
}
}
/* ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
.landingBox5 *,
.landingBox5 *::before,
.landingBox5 *::after {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
}
/* ================================
EDUAGENT HEADER / NAVIGATION
================================ */
.sidebar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 76px;
padding: 12px 24px;
margin: 0;
box-sizing: border-box;
background: rgba(5, 8, 25, 0.96);
border-bottom: 1px solid rgba(0, 102, 255, 0.25);
}
/* LOGO + EDUAGENT BRAND */
.sidebarBrand {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 12px;
width: auto;
margin: 0;
padding: 0;
flex: 0 0 auto;
}
.sidebarLogo {
display: block;
width: 44px;
height: 44px;
object-fit: contain;
margin: 0;
}
.Banner {
margin: 0;
padding: 0;
color: #ffffff;
font-size: 20px;
font-weight: 700;
letter-spacing: 2px;
line-height: 1.2;
}
/* NAVIGATION LINKS */
.sidebar .links {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 20px;
width: auto;
margin: 0 0 0 auto;
padding: 0;
flex: 0 0 auto;
}
/* HOME + ABOUT */
.sidebar .links a {
display: inline-block;
margin: 0;
padding: 10px 0;
color: #c8d9ff;
font-size: 14px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
border-bottom: 2px solid transparent;
transition: color 0.25s ease,
border-color 0.25s ease,
text-shadow 0.25s ease;
}
.sidebar .links a:not(.contactButton):hover {
color: #ffffff;
border-bottom-color: #0066ff;
text-shadow: 0 0 10px rgba(0, 102, 255, 0.8);
}
/* CONTACT BUTTON */
.sidebar .links a.contactButton {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 13px 26px;
margin: 0;
color: #ffffff;
background: linear-gradient(135deg, #087cff, #0044cc);
border: 1px solid #3385ff;
border-radius: 9px;
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
text-decoration: none;
box-shadow: 0 0 14px rgba(0, 102, 255, 0.2);
transition: all 0.25s ease;
}
.sidebar .links a.contactButton:hover {
color: #ffffff;
background: #0066ff;
border-color: #80b5ff;
box-shadow: 0 0 22px rgba(0, 102, 255, 0.55);
transform: translateY(-2px);
}
/* MOBILE LAYOUT */
@media (max-width: 600px) {
.sidebar {
flex-wrap: wrap;
gap: 14px;
padding: 12px 16px;
}
.sidebarBrand {
gap: 8px;
}
.sidebarLogo {
width: 36px;
height: 36px;
}
.Banner {
font-size: 16px;
}
.sidebar .links {
width: 100%;
justify-content: flex-end;
gap: 16px;
}
.sidebar .links a {
font-size: 12px;
}
.sidebar .links a.contactButton {
padding: 10px 16px;
}
}