/* ===== GENERAL ===== */
*{
    margin:0; 
    padding:0; 
    box-sizing:border-box; 
}
html, body{
    overflow-x:hidden;
    width:100%;
}

img{
    max-width:100%; 
    display:block;
}
a{
    text-decoration:none; 
    color:inherit;}

/* ===== HERO SECTION ===== */
.elite-hero{
    position:relative;
    padding:var(--hero-top-spacing) var(--hero-inline-padding) var(--hero-bottom-spacing);
    color:white;
    overflow:hidden;
    background:
        linear-gradient(to right, rgba(11,31,42,0.95) 0%, rgba(11,31,42,0.88) 35%, rgba(11,31,42,0.60) 60%, rgba(11,31,42,0.20) 80%, rgba(11,31,42,0.05) 100%),
        url('../images/bursa-alger.png') center/cover no-repeat;
}
.elite-container{ 
    max-width:900px;
 }
.hero-label{
     color:#ff7a00; 
     letter-spacing:2px; 
     font-size:16px; 
     margin-bottom:20px;
}
.elite-hero h1{ 
    font-size:56px; 
    font-weight:600;
     margin-bottom:25px;
      line-height:1.2; 
}
.hero-sub{
     font-size:20px; 
     opacity:.85;
}

/* ===== NEXT SECTION ===== */
.next-section{ 
    padding:100px 10%; 
    background:white; 
}
.text-container{ 
    display:flex; 
    gap:80px; 
    align-items:center; 
    flex-wrap:wrap; 
}
.left-text{
     flex:1; 
     min-width:300px;
}
.main-title{ 
    font-size:40px; 
    margin-bottom:15px; 
}
.typing-word{ 
    color:#00d4a3;
     font-weight:bold;
     }
.subtitle{ 
    color:#203a43;
     margin-bottom:10px;
      font-size:20px;
     }
.description{
     opacity:.8; 
     font-size:16px; 
     line-height:1.6;
     }
.right-block{
    flex:1;
    min-width:280px;
}
.agreement-ref{
    margin-top:20px;
    font-size:14px;
    color:#203a43;
    font-weight:500;
    opacity:0.8;
}
.right-list{
     flex:1; 
     min-width:280px; 
     list-style:none; 
    }
.right-list li{
    position:relative;
    background:#f0f4f7;
    padding:15px 20px 15px 50px;
    margin-bottom:15px;
    border-radius:8px;
    transition:.3s;
    cursor:pointer;
}
.right-list li::before{
    content:"➜";
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    color:#ff7a00; font-weight:bold; font-size:16px; transition:.3s;
}
.right-list li:hover{ 
    background:#00d4a3;
     color:black; 
     transform:translateX(10px);
     }
.right-list li:hover::before{ 
    transform:translateY(-50%) translateX(5px);
     color:black; 
    }



/* ===== ABOUT SECTION ===== */
.about-section{ 
    padding:100px 10%; 
    background:#f5f7fa; 
}
.about-container{
     display:flex;
      align-items:center;
       gap:80px; 
       flex-wrap:wrap; 
    }
.about-text{
     flex:1; 
     opacity:0;
      transform:translateX(-60px); 
      transition:1s ease; 
      min-width:300px; 
    }
.about-image{ 
    flex:1; 
    opacity:0; 
    transform:translateX(60px); 
    transition:1s ease; 
    min-width:280px;
 }
.about-text.active, .about-image.active{ 
    opacity:1; 
    transform:translateX(0); 
}
.about-text h2{ 
    font-size:38px;
     margin-bottom:20px; 
     color:#203a43;
     }
.about-text p{ 
    margin-bottom:15px; 
    opacity:.8; 
    font-size:16px; 
    line-height:1.6;
 }
.about-image img{ 
    width:100%; 
    border-radius:12px; 
    box-shadow:0 10px 30px rgba(0,0,0,.15); 
}
.features{ 
    display:grid; 
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
     gap:30px;
     }
.feature-card{
    background:white; 
    padding:35px 25px; 
    border-radius:12px; 
    text-align:center;
    box-shadow:0 5px 20px rgba(0,0,0,.05); 
    transition:.4s; 
    opacity:0; 
    transform:translateY(50px);
}
.feature-card.show-card{ 
    opacity:1; 
    transform:translateY(0);
 }
.feature-card:hover{ 
    transform:translateY(-10px);
     box-shadow:0 15px 40px rgba(0,0,0,.15); 
    }
.feature-card .icon{
    width:70px; 
    height:70px; 
    margin:auto; 
    margin-bottom:20px;
     border-radius:50%;
    background:rgba(255, 123, 0, 0.034); 
    display:flex; 
    align-items:center; 
    justify-content:center;
    font-size:28px; 
    color:#ff7a00; 
    transition:.4s;
}
.feature-card:hover .icon{
     background:#ff7a00; 
     color:white; 
     transform:rotateY(180deg); 
    }
.feature-card h3{ 
    margin-bottom:10px; 
    color:#203a43; 
}
.feature-card p{ opacity:.7; }

/* ===== ENGAGEMENT SECTION ===== */
.engagement-section{
    padding:100px 10%; 
    background:linear-gradient(135deg,#0f2027,#203a43); 
    color:white;
}
.section-header{
    text-align:center; 
    margin-bottom:70px;
}
.section-header h2{ 
    font-size:42px; 
    margin-bottom:12px; 
    font-weight:600; 
    letter-spacing:1px;
 }
.section-header p{ 
    font-size:18px; 
    opacity:.8; 
    max-width:700px; 
    margin:auto;
 }
.engagement-grid{
    display:grid;
     grid-template-columns: repeat(4, 1fr);
      gap:40px;
}
.engagement-card{
    background: rgba(255,255,255,0.07); 
    padding: 40px 30px; 
    border-radius: 15px; 
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.15); 
    transition: all .5s ease; 
    opacity:0;
     transform:translateY(50px);
    cursor:pointer; 
    display:flex; 
    flex-direction:column; 
    justify-content:center;
     align-items:center; 
     text-align:center;
}
.engagement-card h3{ 
    margin-bottom:15px; 
    font-size:22px;
     color:#00d4a3;
      font-weight:600;
     }
.engagement-card p{ 
    opacity:.9; 
    line-height:1.7; 
    font-size:16px;
 }
.engagement-card:hover{ 
    transform:translateY(-10px) scale(1.02); 
    background:rgba(0,212,163,0.15); 
    box-shadow:0 20px 50px rgba(230,135,26,0.4);
 }
.engagement-card.show{
     opacity:1; 
     transform:translateY(0); 
     transition: all .6s ease;
     }
.animate-up{ animation:fadeUp 0.8s forwards; }
.animate-right{ animation:fadeRight 0.8s forwards; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(40px);} to{opacity:1; transform:translateY(0);} }
@keyframes fadeRight{ from{opacity:0; transform:translateX(40px);} to{opacity:1; transform:translateX(0);} }
.cursor{ display:inline-block; width:2px; background:#00d4a3; margin-left:2px; animation:blink 0.7s infinite; }
@keyframes blink{ 0%,50%,100%{opacity:1;} 25%,75%{opacity:0;} }

/* ===== RESPONSIVE ===== */
@media (max-width:1024px){
    .text-container{ flex-direction:column; gap:50px; }
    .about-container{ flex-direction:column; gap:50px; }
    .right-list{ padding-left:0; }
}
@media (max-width:768px){
    .elite-hero h1{ font-size:42px; }
    .hero-sub{ font-size:18px; }
    .main-title{ font-size:32px; }
    .subtitle{ font-size:18px; }
    .description{ font-size:15px; }
    .about-text h2{ font-size:32px; }
    .about-text p{ font-size:15px; line-height:1.5; }
    .feature-card{ padding:30px 20px; }
    .feature-card .icon{ width:60px; height:60px; font-size:24px; }
    .engagement-grid{ grid-template-columns: repeat( 2,1fr); }
}
@media (max-width:480px){
    .elite-hero{ padding:120px 5% 100px; }
    .elite-hero h1{ font-size:32px; }
    .hero-sub{ font-size:16px; }
    .main-title{ font-size:28px; }
    .subtitle{ font-size:16px; }
    .description{ font-size:14px; }
    .about-text h2{ font-size:28px; }
    .about-text p{ font-size:14px; line-height:1.4; }
    .features{ grid-template-columns:1fr; gap:20px; margin-top: 25px;}
    .engagement-grid{ grid-template-columns:1fr; gap:20px; }
    .text-container{ flex-direction:column; gap:30px; }
    .about-container{ flex-direction:column; gap:30px; }
    .right-list li{ padding-left:40px; font-size:14px; }
}