/* Exact shared layout. Used by:
 * - training/Training.css
 * - training/TrainingAdmin.css
 */
*{ margin:0; padding:0; box-sizing:border-box; font-family:'Hind Siliguri', sans-serif; } body{ background:#eef4ff; color:#111827; overflow-x:hidden; } .container{ width:100%; max-width:1200px; margin:auto; padding:0 18px; } .hero{ background:linear-gradient(135deg,#06142e,#0b2447,#19376d); padding:80px 0 120px; position:relative; overflow:hidden; } .hero::before{ content:''; position:absolute; width:450px; height:450px; background:rgba(255,255,255,.05); border-radius:50%; top:-120px; right:-100px; } .hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:35px; align-items:center; position:relative; z-index:2; } .top-badge{ display:inline-block; background:#ffb703; color:#111; padding:10px 18px; border-radius:40px; font-weight:700; margin-bottom:22px; font-size:15px; box-shadow:0 10px 25px rgba(0,0,0,.2); } .hero h1{ font-size:60px; line-height:1.1; color:white; margin-bottom:22px; font-weight:700; } .hero h1 span{ color:#ffd60a; } .hero p{ color:#dbeafe; font-size:20px; line-height:1.9; margin-bottom:30px; } .hero-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:30px; } .mini-card{ background:rgba(255,255,255,.08); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.12); border-radius:22px; padding:22px; color:white; } .mini-card h3{ font-size:18px; margin-top:10px; margin-bottom:10px; } .mini-card p{ font-size:14px; line-height:1.7; color:#dbeafe; margin:0; } .icon{ font-size:34px; } .form-card{ background:white; border-radius:32px; padding:35px; box-shadow:0 20px 50px rgba(0,0,0,.18); } .form-card h2{ font-size:34px; color:#071a52; margin-bottom:10px; } .form-card p{ color:#6b7280; margin-bottom:25px; line-height:1.7; } .form-group{ margin-bottom:18px; } .form-group label{ display:block; margin-bottom:8px; font-weight:600; color:#111827; } .form-control{ width:100%; padding:16px 18px; border-radius:16px; border:1px solid #dbe4f0; font-size:16px; background:#f8fbff; transition:.3s; } .form-control:focus{ outline:none; border-color:#2563eb; background:white; box-shadow:0 0 0 4px rgba(37,99,235,.12); } .submit-btn{ width:100%; border:none; background:linear-gradient(135deg,#ffb703,#ffd60a); padding:18px; border-radius:18px; font-size:18px; font-weight:700; cursor:pointer; transition:.3s; margin-top:10px; } .submit-btn:hover{ transform:translateY(-3px); } .section{ padding:80px 0; } .section-title{ text-align:center; margin-bottom:50px; } .section-title h2{ font-size:42px; color:#071a52; margin-bottom:12px; } .section-title p{ font-size:18px; color:#6b7280; } .course-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; } .course-card{ background:white; border-radius:28px; padding:30px; box-shadow:0 15px 40px rgba(0,0,0,.08); transition:.3s; position:relative; overflow:hidden; } .course-card::before{ content:''; position:absolute; width:120px; height:120px; background:rgba(37,99,235,.08); border-radius:50%; top:-40px; right:-40px; } .course-card:hover{ transform:translateY(-8px); } .course-card h3{ font-size:24px; color:#071a52; margin:18px 0 14px; } .course-card p{ color:#4b5563; line-height:1.8; } .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:60px; } .stat-card{ background:white; border-radius:25px; text-align:center; padding:35px 20px; box-shadow:0 12px 30px rgba(0,0,0,.08); } .stat-card h2{ font-size:42px; color:#2563eb; margin-bottom:10px; } .stat-card p{ color:#6b7280; font-size:17px; } .cta-box{ background:linear-gradient(135deg,#0b2447,#19376d); border-radius:35px; padding:60px 30px; text-align:center; color:white; margin-top:80px; box-shadow:0 20px 50px rgba(0,0,0,.18); } .cta-box h2{ font-size:46px; margin-bottom:18px; } .cta-box p{ color:#dbeafe; font-size:20px; line-height:1.8; margin-bottom:28px; } .phone-btn{ display:inline-block; background:#ffb703; color:#111; padding:18px 35px; border-radius:18px; text-decoration:none; font-size:24px; font-weight:700; } footer{ background:#06142e; color:white; text-align:center; padding:28px; margin-top:80px; } @media(max-width:950px){ .hero-grid{ grid-template-columns:1fr; } .hero h1{ font-size:42px; } .hero-cards{ grid-template-columns:1fr; } .stats{ grid-template-columns:repeat(2,1fr); } .section-title h2, .cta-box h2{ font-size:34px; } } @media(max-width:600px){ .stats{ grid-template-columns:1fr; } .hero{ padding-top:60px; } .hero h1{ font-size:36px; } .form-card{ padding:25px; } }