*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'Vazirmatn',sans-serif;

background:
linear-gradient(
135deg,
#08111f,
#0d1527,
#101c35
);

color:white;

overflow-x:hidden;

min-height:100vh;

}

/* ---------- Background Effects ---------- */

.bg-blur{

position:fixed;

border-radius:50%;

filter:blur(140px);

z-index:-1;

opacity:.35;

}

.blur1{

width:500px;
height:500px;

background:#00e5ff;

top:-150px;
right:-150px;

}

.blur2{

width:500px;
height:500px;

background:#8b5cf6;

bottom:-200px;
left:-150px;

}

/* ---------- Header ---------- */

header{

width:100%;

padding:20px 8%;

display:flex;

justify-content:space-between;

align-items:center;

position:fixed;

top:0;

backdrop-filter:blur(20px);

background:rgba(10,15,30,.45);

border-bottom:1px solid rgba(255,255,255,.08);

z-index:1000;

}

.logo img{

height:60px;

}

nav{

display:flex;
gap:25px;

}

nav a{

text-decoration:none;

color:white;

font-weight:500;

transition:.3s;

}

nav a:hover{

color:#00e5ff;

}

.register-btn{

padding:12px 25px;

background:
linear-gradient(
90deg,
#00e5ff,
#8b5cf6
);

border-radius:40px;

color:white;

text-decoration:none;

font-weight:700;

box-shadow:
0 0 20px rgba(0,229,255,.5);

}

/* ---------- Hero ---------- */

.hero{

min-height:100vh;

padding:140px 8% 50px;

display:flex;

align-items:center;

justify-content:space-between;

gap:50px;

}

.hero-text{

flex:1;

}

.badge{

display:inline-block;

padding:8px 20px;

border-radius:50px;

background:rgba(255,255,255,.08);

border:1px solid rgba(255,255,255,.15);

margin-bottom:20px;

}

.hero-text h1{

font-size:72px;

line-height:1.2;

margin-bottom:25px;

background:
linear-gradient(
90deg,
#00e5ff,
#00ffc6,
#8b5cf6
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.hero-text p{

font-size:22px;

line-height:2;

opacity:.9;

max-width:700px;

}

.hero-buttons{

display:flex;

gap:20px;

margin-top:40px;

}

.hero-buttons a{

text-decoration:none;

padding:15px 35px;

border-radius:50px;

font-weight:700;

transition:.3s;

}

.hero-buttons a:first-child{

background:#00e5ff;
color:black;

}

.hero-buttons a:last-child{

border:1px solid #00e5ff;

color:white;

}

.hero-buttons a:hover{

transform:translateY(-4px);

}

/* ---------- Hero Images ---------- */

.hero-image{

flex:1;

position:relative;

height:700px;

}

.boy{

position:absolute;

right:0;

height:650px;

animation:float 5s ease-in-out infinite;

}

.girl{

position:absolute;

left:0;

height:650px;

animation:float 6s ease-in-out infinite;

}

@keyframes float{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-20px);
}

100%{
transform:translateY(0);
}

}

/* ---------- Section ---------- */

section{

padding:100px 8%;

}

section h2{

font-size:48px;

margin-bottom:50px;

text-align:center;

}

/* ---------- Courses ---------- */

.course-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:25px;

}

.course-card{

background:
rgba(255,255,255,.05);

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.08);

border-radius:24px;

padding:30px;

transition:.4s;

}

.course-card:hover{

transform:
translateY(-10px);

border-color:#00e5ff;

box-shadow:
0 0 25px rgba(0,229,255,.4);

}

.course-card h3{

font-size:24px;

margin-bottom:15px;

}

.course-card p{

margin-bottom:20px;

opacity:.8;

}

.course-card a{

display:inline-block;

padding:10px 20px;

border-radius:30px;

background:#00e5ff;

color:black;

text-decoration:none;

font-weight:700;

}

/* ---------- About ---------- */

#about{

text-align:center;

}

#about p{

max-width:900px;

margin:auto;

line-height:2.2;

font-size:20px;

opacity:.85;

}

/* ---------- Floating Button ---------- */

.floating-btn{

position:fixed;

left:25px;

bottom:25px;

padding:16px 30px;

background:
linear-gradient(
90deg,
#00e5ff,
#8b5cf6
);

color:white;

text-decoration:none;

font-weight:700;

border-radius:50px;

box-shadow:
0 0 30px rgba(0,229,255,.5);

z-index:999;

animation:pulse 2s infinite;

}

@keyframes pulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.08);
}

100%{
transform:scale(1);
}

}

/* ---------- Responsive ---------- */

@media(max-width:1200px){

.hero{

flex-direction:column;

text-align:center;

}

.hero-text h1{

font-size:58px;

}

.hero-image{

height:auto;

}

.boy,
.girl{

position:relative;

height:350px;

}

}

@media(max-width:768px){

header{

padding:15px 5%;

}

nav{

display:none;

}

.hero{

padding-top:120px;

}

.hero-text h1{

font-size:42px;

}

.hero-text p{

font-size:18px;

}

.hero-buttons{

flex-direction:column;

}

section h2{

font-size:34px;

}

.course-grid{

grid-template-columns:1fr;

}

}


.contact-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:25px;

margin-top:50px;

}

.contact-card{

padding:30px;

border-radius:25px;

background:rgba(255,255,255,.05);

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.08);

text-align:center;

}

.contact-card h3{

margin-bottom:15px;

color:#00e5ff;

}


.section-desc{

text-align:center;

opacity:.8;

margin-top:-20px;

margin-bottom:50px;

font-size:18px;

}

.course-card{

position:relative;

overflow:hidden;

}

.course-card::before{

content:"";

position:absolute;

top:-50%;

right:-50%;

width:200px;

height:200px;

background:
radial-gradient(
circle,
rgba(0,229,255,.18),
transparent
);

}

.course-icon{

width:90px;

height:90px;

display:flex;

justify-content:center;

align-items:center;

margin-bottom:25px;

border-radius:20px;

background:
linear-gradient(
135deg,
rgba(0,229,255,.15),
rgba(139,92,246,.15)
);

border:1px solid rgba(255,255,255,.1);

}

.course-icon svg{

width:45px;

height:45px;

color:#00e5ff;

stroke-width:1.8;

filter:
drop-shadow(0 0 15px rgba(0,229,255,.8));

}

.course-card span{

display:block;

margin-bottom:20px;

font-weight:700;

color:#00ffc6;

font-size:18px;

}

/* ========================= */
/* Countdown */
/* ========================= */

.countdown-section{

padding-top:120px;

padding-bottom:40px;

display:flex;

justify-content:center;

}

.countdown-container{

width:min(1000px,95%);

padding:30px;

border-radius:30px;

background:
linear-gradient(
135deg,
rgba(0,229,255,.12),
rgba(123,97,255,.12)
);

border:1px solid rgba(255,255,255,.1);

backdrop-filter:blur(20px);

text-align:center;

box-shadow:
0 0 40px rgba(0,229,255,.15);

}

.countdown-title{

font-size:30px;

font-weight:800;

margin-bottom:10px;

background:
linear-gradient(
90deg,
#00e5ff,
#00ffc6,
#7b61ff
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.countdown-subtitle{

opacity:.8;

margin-bottom:25px;

}

#countdown{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.time-box{

width:140px;

height:140px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

border-radius:25px;

background:
rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

transition:.3s;

}

.time-box:hover{

transform:translateY(-8px);

box-shadow:
0 0 30px rgba(0,229,255,.35);

}

.time-box span{

font-size:50px;

font-weight:900;

color:#00e5ff;

text-shadow:
0 0 20px rgba(0,229,255,.8);

}

.time-box small{

margin-top:10px;

font-size:16px;

opacity:.8;

}

.course-hero{

padding-top:180px;

text-align:center;

}

.course-hero h1{

font-size:70px;

margin-bottom:20px;

background:
linear-gradient(
90deg,
#00e5ff,
#8b5cf6
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.course-info{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:25px;

}

.info-card{

padding:25px;

border-radius:25px;

background:
rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

text-align:center;

}

.course-list{

max-width:700px;

margin:auto;

line-height:3;

font-size:18px;

}

.course-hero{

min-height:100vh;

display:flex;

align-items:center;

justify-content:space-between;

padding:120px 8%;

position:relative;

overflow:hidden;

}

.course-hero::before{

content:"";

position:absolute;

width:600px;

height:600px;

background:#00e5ff;

filter:blur(250px);

opacity:.15;

right:-200px;

top:-100px;

}

.course-content{

max-width:700px;

z-index:5;

}

.course-badge{

display:inline-block;

padding:10px 20px;

border-radius:50px;

background:rgba(255,255,255,.08);

margin-bottom:20px;

}

.course-hero h1{

font-size:85px;

font-weight:900;

line-height:1.1;

margin-bottom:20px;

background:
linear-gradient(
90deg,
#00e5ff,
#00ffc6,
#7b61ff
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.course-hero p{

font-size:24px;

opacity:.85;

margin-bottom:40px;

}

.course-register{

padding:18px 40px;

border-radius:60px;

text-decoration:none;

background:
linear-gradient(
90deg,
#00e5ff,
#7b61ff
);

font-weight:800;

color:white;

}

.course-image img{

height:600px;

filter:
drop-shadow(
0 0 50px rgba(0,229,255,.5)
);

}

/* ========================= */
/* Course Detail Page Styles */
/* ========================= */

.course-detail-hero {
    padding-top: 160px;
    padding-bottom: 60px;
    text-align: center;
}

.course-detail-hero h1 {
    font-size: 55px;
    margin-bottom: 25px;
    background: linear-gradient(90deg, #00e5ff, #00ffc6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.course-detail-hero p {
    font-size: 20px;
    opacity: 0.85;
    max-width: 800px;
    margin: 0 auto;
    line-height: 2;
}

/* Layout for Details & Instructor */
.course-content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    padding: 0 8% 80px;
}

.course-info-box, .instructor-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 25px;
    padding: 40px;
}

.course-info-box h2 {
    font-size: 30px;
    margin-bottom: 30px;
    text-align: right;
    color: #fff;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.05);
    padding: 15px 20px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.info-item i {
    color: #00e5ff;
    width: 30px;
    height: 30px;
}

.info-item div {
    display: flex;
    flex-direction: column;
}

.info-item strong {
    font-size: 13px;
    opacity: 0.7;
    font-weight: 400;
}

.info-item span {
    font-size: 16px;
    font-weight: 700;
}

.price-highlight {
    color: #00ffc6 !important;
}

.course-description h3 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #8b5cf6;
}

.course-description p {
    line-height: 2.2;
    opacity: 0.85;
}

/* Instructor Card */
.instructor-card {
    text-align: center;
    position: sticky;
    top: 120px;
}

.instructor-img-wrapper {
    width: 150px;
    height: 150px;
    margin: 0 auto 20px;
    border-radius: 50%;
    padding: 5px;
    background: linear-gradient(135deg, #00e5ff, #8b5cf6);
}

.instructor-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #0d1527;
}

.instructor-card h3 {
    font-size: 24px;
    margin-bottom: 5px;
}

.instructor-title {
    display: block;
    color: #00e5ff;
    font-size: 14px;
    margin-bottom: 20px;
}

.instructor-bio {
    font-size: 15px;
    line-height: 2;
    opacity: 0.8;
}

/* Map Section */
.map-section {
    padding: 0 8% 100px;
    text-align: center;
}

.address-text {
    font-size: 18px;
    margin-bottom: 30px;
    opacity: 0.9;
}

.map-container {
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Responsive adjustments */
@media(max-width: 992px) {
    .course-content-grid {
        grid-template-columns: 1fr;
    }
    .instructor-card {
        position: relative;
        top: 0;
    }
}

/* متمایز کردن باکس‌های زمان‌بندی */
.schedule-female {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.schedule-female i {
    color: #8b5cf6; /* رنگ بنفش ملایم برای گروه خواهران */
}

.schedule-male {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.15), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(0, 229, 255, 0.3);
}

.schedule-male i {
    color: #00e5ff; /* رنگ آبی برای گروه برادران */
}

/* باکس هشدار پیش‌نیاز */
.prerequisite-alert {
    background: linear-gradient(135deg, rgba(255, 170, 0, 0.15), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 170, 0, 0.4);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 35px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.prerequisite-alert i {
    color: #ffaa00; /* رنگ نارنجی/زرد هشدار */
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 10px rgba(255, 170, 0, 0.5));
}

.prerequisite-alert strong {
    display: block;
    font-size: 18px;
    color: #ffaa00;
    margin-bottom: 5px;
}

.prerequisite-alert p {
    margin: 0;
    font-size: 15px;
    opacity: 0.9;
    line-height: 1.6;
}

@media(max-width: 576px) {
    .prerequisite-alert {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
}