/* ============ HEADER ============ */
.sg-header{
    background:#fff;
    border-bottom:1px solid var(--sg-border);
    position:sticky; top:0; z-index:999;
}
.sg-header-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:14px; padding-bottom:14px; gap:24px;
}
.sg-logo-text{
    display:flex; align-items:center; gap:8px;
    font-size:22px; font-weight:800; color: var(--sg-orange);
}
.sg-logo-text i{ color: var(--sg-orange); }
.sg-logo-text.light{ color:#fff; }
.custom-logo{ max-height:56px; width:auto; }

.sg-nav{ flex:1; display:flex; justify-content:center; }
.sg-menu{ display:flex; gap:28px; }
.sg-menu li a{
    font-weight:600; font-size:15px; color: var(--sg-text);
    padding:8px 2px; position:relative;
}
.sg-menu li a:hover, .sg-menu li.current-menu-item > a{ color: var(--sg-orange); }
.sg-menu li.current-menu-item > a::after{
    content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background: var(--sg-orange);
}
.sg-menu li.menu-item-has-children{ position:relative; }
.sg-menu li.menu-item-has-children:hover > ul{ display:block; }
.sg-menu .sub-menu{
    display:none; position:absolute; top:100%; left:0; background:#fff; min-width:200px;
    box-shadow: var(--sg-shadow); border-radius:10px; padding:8px; z-index:20;
}
.sg-menu .sub-menu li a{ display:block; padding:8px 14px; }

.sg-header-actions{ display:flex; align-items:center; gap:14px; }
.sg-icon-btn{
    background:#F4F1FA; border:none; width:40px; height:40px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; color: var(--sg-purple); cursor:pointer; position:relative;
}
.sg-cart-count{
    position:absolute; top:-4px; right:-4px; background: var(--sg-orange); color:#fff;
    font-size:11px; min-width:18px; height:18px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-weight:700;
}
.sg-admit-btn{ padding:11px 22px; font-size:14px; white-space:nowrap; }
.sg-menu-toggle{ display:none; background:none; border:none; font-size:22px; color: var(--sg-purple); cursor:pointer; }

/* ============ HERO ============ */
.sg-hero{
    background: linear-gradient(135deg, #EAF3FB 0%, #F4EFFB 100%);
    padding:56px 0 0;
}
.sg-hero-grid{
    display:grid; grid-template-columns: 1.1fr 1fr; gap:40px; align-items:center; padding-bottom:40px;
}
.sg-hero-tagline{ font-size:19px; color: var(--sg-text); margin-bottom:6px; font-weight:500;}
.sg-hero-title{ font-size:42px; line-height:1.2; color: var(--sg-purple-dark); margin-bottom:16px; }
.sg-hero-title .sg-accent{ color: var(--sg-orange); }
.sg-hero-desc{ color: var(--sg-muted); font-size:16px; max-width:520px; margin-bottom:26px; }
.sg-hero-buttons{ display:flex; gap:16px; flex-wrap:wrap; }
.sg-hero-image img{ border-radius:20px; }

.sg-highlight-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
    background:#fff; border-radius:20px; padding:28px 32px; box-shadow: var(--sg-shadow);
    transform:translateY(30px); position:relative; z-index:5;
}
.sg-highlight-item{ display:flex; gap:14px; align-items:flex-start; }
.sg-highlight-icon{
    width:48px; height:48px; border-radius:50%; background:#FBEDE0; color: var(--sg-orange);
    display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0;
}
.sg-highlight-item:nth-child(3n+2) .sg-highlight-icon{ background:#EFE7F8; color: var(--sg-purple); }
.sg-highlight-item h4{ font-size:15px; margin-bottom:2px; }
.sg-highlight-item p{ font-size:13px; color: var(--sg-muted); margin:0; }

/* ============ BODY GRID ============ */
.sg-body-grid{
    display:grid; grid-template-columns: 2.1fr 1fr; gap:40px;
    padding-top:70px; padding-bottom:20px; align-items:start;
}

/* ============ COURSES ============ */
.sg-courses-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.sg-course-card{
    display:block; border-radius: var(--sg-radius); overflow:hidden; box-shadow: var(--sg-shadow);
    background:#fff; transition:.25s;
}
.sg-course-card:hover{ transform:translateY(-6px); }
.sg-course-thumb{ position:relative; aspect-ratio:4/3; overflow:hidden; background:#eee; }
.sg-course-thumb img{ width:100%; height:100%; object-fit:cover; }
.sg-course-placeholder{
    display:flex; align-items:center; justify-content:center; font-size:34px; color:#fff;
    background: var(--sg-gradient);
}
.sg-course-icon{
    position:absolute; bottom:-16px; left:16px; width:36px; height:36px; border-radius:10px;
    background:#fff; box-shadow:var(--sg-shadow); display:flex; align-items:center; justify-content:center; color: var(--sg-orange);
}
.sg-course-info{ padding:22px 16px 16px; }
.sg-course-info h4{ font-size:16px; margin-bottom:4px; }
.sg-course-info p{ font-size:13px; color: var(--sg-muted); margin:0; }

/* ============ STATS BAR ============ */
.sg-stats-bar{
    margin-top:44px; background: var(--sg-gradient); border-radius:16px;
    display:flex; justify-content:space-between; padding:26px 30px; flex-wrap:wrap; gap:20px;
}
.sg-stat-item{ display:flex; align-items:center; gap:12px; color:#fff; }
.sg-stat-item i{ font-size:22px; opacity:.9; }
.sg-stat-item strong{ display:block; font-size:22px; }
.sg-stat-item span{ font-size:13px; opacity:.9; }

/* ============ FEATURES ============ */
.sg-features{ margin-top:50px; }
.sg-features h2{ font-size:24px; margin-bottom:22px; }
.sg-features-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.sg-feature-item{ display:flex; gap:14px; align-items:flex-start; }
.sg-feature-icon{
    width:52px; height:52px; border-radius:14px; background:#FBEDE0; color: var(--sg-orange);
    display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0;
}
.sg-feature-item:nth-child(3n+2) .sg-feature-icon{ background:#EFE7F8; color: var(--sg-purple); }
.sg-feature-item:nth-child(3n) .sg-feature-icon{ background:#E8F3EA; color:#2E9E4B; }
.sg-feature-item h4{ font-size:15px; margin-bottom:3px; }
.sg-feature-item p{ font-size:13px; color: var(--sg-muted); margin:0; }

/* ============ SIDEBAR: EVENTS ============ */
.sg-events-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.sg-event-card{
    display:block; border-radius:12px; overflow:hidden; box-shadow: var(--sg-shadow); background:#fff;
}
.sg-event-thumb{ position:relative; aspect-ratio:4/3; background:#333; overflow:hidden; }
.sg-event-thumb img{ width:100%; height:100%; object-fit:cover; }
.sg-event-placeholder{
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:26px;
    background: linear-gradient(135deg, var(--sg-purple-dark), var(--sg-purple-darker));
}
.sg-event-date{
    position:absolute; top:10px; left:10px; background: var(--sg-orange); color:#fff;
    border-radius:8px; padding:5px 10px; text-align:center; font-weight:700; font-size:15px; line-height:1.1;
}
.sg-event-date small{ display:block; font-size:10px; font-weight:600; text-transform:uppercase; }
.sg-event-info{ padding:12px; }
.sg-event-info h4{ font-size:13.5px; margin-bottom:6px; }
.sg-event-info span{ display:block; font-size:11px; color: var(--sg-muted); margin-bottom:2px; }

/* ============ TESTIMONIALS ============ */
.sg-testimonials{ margin-top:40px; }
.sg-testimonials-grid{ display:flex; flex-direction:column; gap:16px; }
.sg-testimonial-card{
    background:#fff; border-radius:14px; padding:20px; box-shadow: var(--sg-shadow);
}
.sg-stars{ color:#F5A623; font-size:13px; margin-bottom:10px; }
.sg-testimonial-card p{ font-size:13.5px; color: var(--sg-text); margin-bottom:14px; }
.sg-testimonial-author{ display:flex; align-items:center; gap:10px; }
.sg-testimonial-author img{ width:40px; height:40px; border-radius:50%; object-fit:cover; }
.sg-avatar-placeholder{
    width:40px; height:40px; border-radius:50%; background: var(--sg-gradient); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:700;
}
.sg-testimonial-author strong{ display:block; font-size:13.5px; }
.sg-testimonial-author span{ font-size:12px; color: var(--sg-muted); }

/* ============ FOOTER ============ */
.sg-footer{ background: var(--sg-purple-darker); color:#D8D0E6; margin-top:60px; padding-top:60px; }
.sg-footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr 1.3fr; gap:30px; padding-bottom:40px; }
.sg-footer-col h3{ color:#fff; font-size:16px; margin-bottom:18px; }
.sg-footer-tagline{ color: var(--sg-orange); font-size:13px; margin:10px 0 4px; font-weight:600; }
.sg-footer-desc{ font-size:13px; line-height:1.7; }
.sg-footer-menu li{ margin-bottom:10px; }
.sg-footer-menu li a{ font-size:13.5px; color:#D8D0E6; }
.sg-footer-menu li a:hover{ color: var(--sg-orange); }
.sg-footer-contact{ font-size:13.5px; }
.sg-footer-contact li{ display:flex; gap:8px; margin-bottom:12px; }
.sg-footer-contact i{ color: var(--sg-orange); margin-top:3px; }
.sg-footer-newsletter p{ font-size:13px; margin-bottom:14px; }
.sg-newsletter-form{ display:flex; gap:0; border-radius:30px; overflow:hidden; background:#fff; padding:4px; }
.sg-newsletter-form input{
    flex:1; border:none; padding:10px 14px; font-size:13px; outline:none; border-radius:30px 0 0 30px;
}
.sg-newsletter-form button{ border-radius:30px; padding:10px 18px; font-size:13px; }
.sg-social{ display:flex; gap:10px; margin-top:16px; }
.sg-social a{
    width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.08);
    display:flex; align-items:center; justify-content:center; color:#fff;
}
.sg-social a:hover{ background: var(--sg-orange); }
.sg-footer-bottom{
    border-top:1px solid rgba(255,255,255,.1); padding:20px 0; text-align:center; font-size:13px; color:#B3A9C6;
}

/* ============ GENERIC PAGE / BLOG ============ */
.sg-generic-page{ display:grid; grid-template-columns:2.3fr 1fr; gap:40px; padding:50px 0; }
.sg-generic-page:has(.sg-generic-main:only-child){ grid-template-columns:1fr; }
.sg-page-title{ font-size:30px; margin-bottom:20px; color: var(--sg-purple-dark); }
.sg-page-thumb{ margin-bottom:20px; border-radius:14px; overflow:hidden; }
.sg-page-body{ font-size:15.5px; line-height:1.8; }
.sg-event-meta{ display:flex; gap:18px; margin-bottom:20px; color: var(--sg-muted); font-size:14px; flex-wrap:wrap; }
.sg-blog-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.sg-blog-card{ background:#fff; border-radius:14px; overflow:hidden; box-shadow: var(--sg-shadow); }
.sg-blog-thumb img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.sg-blog-body{ padding:18px; }
.sg-blog-body h3{ font-size:17px; margin-bottom:8px; }
.sg-readmore{ color: var(--sg-orange); font-weight:600; font-size:13px; }
.sg-archive-grid{ grid-template-columns:repeat(3,1fr); }
.sg-404{ text-align:center; padding:100px 0; }
.sg-404 h1{ font-size:90px; color: var(--sg-orange); margin-bottom:0; }
.widget-title{ font-size:16px; margin-bottom:14px; color: var(--sg-purple-dark); }
.widget{ margin-bottom:30px; background:#F7F5FB; padding:18px; border-radius:12px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1200px){
    .sg-body-grid{ grid-template-columns:1fr; }
    .sg-courses-grid{ grid-template-columns:repeat(3,1fr); }
    .sg-features-grid{ grid-template-columns:repeat(2,1fr); }
    .sg-generic-page{ grid-template-columns:1fr; }
}
@media (max-width: 900px){
    .sg-nav{ display:none; }
    .sg-menu-toggle{ display:block; }
    .sg-hero-grid{ grid-template-columns:1fr; }
    .sg-highlight-grid{ grid-template-columns:1fr 1fr; transform:none; margin-top:20px; }
    .sg-courses-grid{ grid-template-columns:repeat(2,1fr); }
    .sg-events-grid{ grid-template-columns:1fr; }
    .sg-footer-grid{ grid-template-columns:1fr 1fr; }
    .sg-blog-grid{ grid-template-columns:1fr; }
    .container{ padding:0 20px; }
}
@media (max-width: 560px){
    .sg-highlight-grid{ grid-template-columns:1fr; }
    .sg-courses-grid{ grid-template-columns:1fr; }
    .sg-features-grid{ grid-template-columns:1fr; }
    .sg-footer-grid{ grid-template-columns:1fr; }
    .sg-hero-title{ font-size:30px; }
    .sg-stats-bar{ flex-direction:column; }
}

/* Mobile nav drawer (JS toggled) */
.sg-nav.sg-nav-open{
    display:block; position:absolute; top:100%; left:0; right:0; background:#fff;
    box-shadow: var(--sg-shadow); padding:10px 20px;
}
.sg-nav.sg-nav-open .sg-menu{ flex-direction:column; gap:4px; }
.sg-nav.sg-nav-open .sg-menu li a{ display:block; padding:12px 0; border-bottom:1px solid var(--sg-border); }