:root {
    --brand-purple: #4c35c1;
    --text-white: #ffffff;
    --text-muted: #e0d9ff;
    --bg-light: #f4f7f9;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* font-family: 'Plus Jakarta Sans', sans-serif; */
}
/* 
body{
    width: 1400px;
    margin: auto;
} */

/* 1. All Headings par Space Grotesk */
h1, h2, h3, h4, h5, h6, 
.sk-contact-title, 
.sk-contact-heading, 
.sk-section-title-center, 
.sk-form-title,
.sk-cta-heading {
    font-family: 'Space Grotesk'  !important;
}

/* 2. Poore Body Text par Outfit */
body, p, span, li, a, label, input, textarea, select {
    font-family: 'Outfit' ;
}

/* 3. Buttons par Outfit */
button, 
.sk-btn-submit, 
.sk-btn-solid, 
.sk-btn-outline {
    font-family: 'Outfit' !important;
    font-weight: 600; /* Buttons ke liye thora bold text acha lagta hai */
}

/* Overlines (Chote capital text) ke liye bhi Space Grotesk use kar sakte hain agar design demand kare */
.sk-overline-sm, .sk-overline-center {
    font-family: 'Space Grotesk';
    letter-spacing: 1px;
}
:root {
    --sk-purple: #4c35c1;
    --sk-white: #ffffff;
    --sk-muted: #e0d9ff;
}
/* Homepage */
.sk-hero-wrapper {
    background-color: var(--sk-purple);
    color: var(--sk-white);
    padding: 0 20px 100px;
    overflow: hidden;
}

.sk-hero-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header Styles */
.sk-header {
    background-color: #4c35c1; /* Brand Purple */
    padding: 20px 20px;
    /* font-family: 'Plus Jakarta Sans', sans-serif; */
    color: #ffffff;
    width: 100%;
}



.sk-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo Section */
.sk-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #ffffff;
}

.sk-logo img {
    width: 100px;
}

.sk-logo span {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 1px;
}

/* Menu Links */
.sk-nav-menu {
    display: flex;
    list-style: none;
    gap: 35px;
    margin: 0;
    padding: 0;
}

.sk-nav-menu a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: 0.3s;
}

.sk-nav-menu a:hover, 
.sk-nav-menu a.active {
    color: #ffffff;
}

/* Actions (Right Side) */
.sk-nav-actions {
    display: flex;
    align-items: center;
    gap: 30px;
}

.sk-cart-icon {
    position: relative;
    cursor: pointer;
}

.sk-cart-icon img {
    width: 24px;
    filter: brightness(0) invert(1);
}

.sk-cart-count {
    position: absolute;
    top: -5px;
    right: -10px;
    background-color: #6343ef;
    color: white;
    font-size: 10px;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sk-auth-links {
    display: flex;
    align-items: center;
    gap: 15px;
}

.sk-auth-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
}

.sk-divider {
    height: 18px;
    width: 1.5px;
    background-color: rgba(255, 255, 255, 0.3);
}

/* Responsive */
@media (max-width: 992px) {
    .sk-nav-menu {
        display: none; /* Usually replaced by a burger menu on mobile */
    }
}

/* Hero Layout */
.sk-hero-layout {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-top: 60px;
}

.sk-hero-visual { flex: 1; position: relative; display: flex; justify-content: flex-start; }
.sk-hero-text { flex: 1; }

/* Image Masking */
.sk-image-mask {
    width: 100%;
    max-width: 500px;
    aspect-ratio: 4.8 / 5.5;
    /* overflow: hidden; */
}

.sk-image-mask img { width: 100%; height: 100%; object-fit: contain; }

/* Text Content */
.sk-overline { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; opacity: 0.9; }
.sk-hero-text h1 {
    font-size: clamp(34px, 5vw, 54px);
    line-height: 1.1;
    margin: 20px 0;
    font-weight: 800;
}

.sk-hero-text p { color: var(--sk-muted); margin-bottom: 40px; font-size: 16px; line-height: 1.6; }

.sk-btn-white {
    background: white;
    border: none;
    padding: 18px 40px;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

/* Badges */
.sk-badge {
    position: absolute;
    padding: 15px 20px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.sk-badge-awards {
    background: white;
    color: #333;
    left: -30px;
    bottom: 20%;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sk-badge-trusted {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    right: 5%;
    bottom: 5%;
    border: 1px solid rgba(255,255,255,0.3);
    text-align: center;
}

.sk-avatars { display: flex; justify-content: center; margin: 10px 0; }
.sk-avatars img { 
    width: 32px; height: 32px; 
    border-radius: 50%; border: 2px solid var(--sk-purple);
    margin-left: -10px;
}

/* RESPONSIVE DESIGN */
@media (max-width: 1024px) {
    /* .sk-hero-layout { flex-direction: column-reverse; text-align: center; } */
    .sk-nav-links { display: none; }
    .sk-image-mask { max-width: 400px; margin: 0 auto; }
    .sk-hero-visual { justify-content: center; width: 100%; }
    .sk-badge { scale: 0.85; }
}

@media (max-width: 480px) {
    .sk-badge-awards { left: 0; bottom: 10%; }
    .sk-hero-text h1 { font-size: 32px; }
}

/* Partners */
.partners {
    text-align: center;
    padding: 60px 5%;
    background: #EFF6F8;
}

.logo-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    margin-top: 30px;
    opacity: 0.6;
}

.brand { font-weight: 700; font-size: 22px; }
.boxed { border: 2px solid #000; padding: 5px 15px; }



.sk-categories-section {
    padding: 100px 0 0 0;
    background-color: #ffffff;
    text-align: center;
}

/* Header Styling */
.sk-section-header {
    margin-bottom: 60px;
}

.sk-overline {
    font-size: 13px;
    font-weight: 700;
    color: #000;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.sk-section-title {
    font-size: 36px;
    font-weight: 800;
    color: #0f172a;
    margin-top: 15px;
    line-height: 1.3;
}

/* Grid Layout */
.sk-category-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 columns for large screens */
    gap: 20px;
}

/* Card Styling */
.sk-cat-card {
    border: 1px solid #E2E8F0;
    padding: 40px 20px;
    border-radius: 4px;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sk-cat-card:hover {
    border-color: #4c35c1;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

/* Icon Backgrounds */
.sk-cat-icon-bg {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.sk-cat-icon-bg img {
    width: 32px;
    height: 32px;
    opacity: 0.7;
}

.sk-soft-cyan { background-color: #f0f9ff; }
.sk-soft-blue { background-color: #f1f5f9; }

/* Card Text */
.sk-cat-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 10px;
    line-height: 1.4;
}

.sk-cat-card p {
    font-size: 14px;
    color: #64748b;
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 1024px) {
    .sk-category-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 per row on tablets */
    }
}

@media (max-width: 768px) {
    .sk-category-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 per row on small tablets */
    }
    .sk-section-title {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .sk-category-grid {
        grid-template-columns: 1fr; /* 1 per row on phones */
    }
}
/* Unique Scoped Styles for Banner Section */
.sk-promo-wrapper {
    padding: 50px 0 100px 0;
    background-color: #ffffff;
}

.sk-promo-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 25px; /* Spacing between the two boxes */
}

.sk-promo-box {
    flex: 1;
    min-height: 280px;
    border-radius: 12px;
    padding: 45px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Left Box: Image Background */
.sk-promo-bg-img {
    background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)), 
                url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=800');
    background-size: cover;
    background-position: center;
}

/* Right Box: Cream Background */
.sk-promo-bg-cream {
    background-color: #f1f1e8; /* Matches the screenshot's light beige */
    justify-content: space-between;
}

.sk-promo-title {
    font-size: 26px;
    font-weight: 800;
    color: #0d233e;
    line-height: 1.2;
    margin-bottom: 25px;
}

/* Button Styling */
.sk-promo-btn {
    display: inline-block;
    padding: 14px 30px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.sk-promo-btn:hover {
    transform: translateY(-2px);
}

.sk-promo-btn-yellow {
    background-color: #ffb800;
    color: #000;
}

.sk-promo-btn-black {
    background-color: #000;
    color: #fff;
}

/* Visual Components (Video UI) */
.sk-promo-visual {
    flex-shrink: 0;
}

.sk-promo-img-frame {
    position: relative;
    width: 240px;
    height: 160px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.sk-promo-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sk-promo-video-controls {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.sk-ctrl-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.sk-ctrl-green { background: #24d164; color: white; }
.sk-ctrl-white { background: #fff; color: #333; }
.sk-ctrl-red { background: #ff3b30; color: white; }

/* Responsive adjustments */
@media (max-width: 992px) {
    .sk-promo-container {
        flex-direction: column;
    }
    .sk-promo-box {
        width: 100%;
    }
}
/* All Courses Section */
.sk-course-grid-wrapper {
    background-color: #f8fafc;
    padding: 80px 0;
}

.sk-course-grid-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header & Filters */
.sk-course-grid-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
}

.sk-course-grid-overline {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 1px;
}

.sk-course-grid-title h2 {
    font-size: 32px;
    font-weight: 800;
    color: #0f172a;
    margin-top: 5px;
}

.sk-course-grid-filter {
    display: flex;
    gap: 20px;
}

.sk-course-grid-filter-btn {
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    transition: 0.3s;
}

.sk-course-grid-filter-btn.active, 
.sk-course-grid-filter-btn:hover {
    color: #0f172a;
    border-bottom: 2px solid #4c35c1;
}

/* Grid Layout */
.sk-course-grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

/* Card Styling */
.sk-course-grid-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.sk-course-grid-card:hover {
    transform: translateY(-8px);
}

.sk-course-grid-thumb {
    position: relative;
    height: 220px;
}

.sk-course-grid-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sk-course-grid-badge {
    position: absolute;
    bottom: -15px;
    right: 20px;
    background: #1a0dab;
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    border: 4px solid #f8fafc;
}

.sk-course-grid-body {
    padding: 30px 25px 20px;
}

.sk-course-grid-category {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
}

.sk-course-grid-body h3 {
    font-size: 18px;
    line-height: 1.4;
    margin: 12px 0;
    color: #0f172a;
    height: 50px;
    overflow: hidden;
}

.sk-course-grid-rating {
    color: #f59e0b;
    font-size: 12px;
}

.sk-course-grid-rating span {
    color: #94a3b8;
    margin-left: 5px;
}

/* Card Footer */
.sk-course-grid-footer {
    display: flex;
    border-top: 1px solid #f1f5f9;
}

.sk-course-grid-info {
    flex: 1;
    text-align: center;
    padding: 15px 0;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}

.sk-course-grid-info:first-child {
    border-right: 1px solid #f1f5f9;
}

/* Bottom CTA */
.sk-course-grid-cta {
    margin-top: 60px;
    text-align: center;
}

.sk-course-grid-cta-btn {
    display: inline-block;
    background-color: #6366f1;
    color: #fff;
    padding: 16px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: 0.3s;
}

.sk-course-grid-cta-btn:hover {
    background-color: #4f46e5;
    transform: scale(1.02);
}

/* Responsive */
@media (max-width: 768px) {
    .sk-course-grid-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .sk-course-grid-filter {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 10px;
    }
}
/* Personalized Learning Section */
.sk-personal-wrapper {
    padding: 100px 0;
    background-color: #ffffff;
}

.sk-personal-container {
    max-width: 1400px;
    margin: 0 auto;
    /* padding: 0 20px; */
    display: flex;
    align-items: center;
    gap: 80px;
}

/* Image Stack Logic */
.sk-personal-visual {
    flex: 1;
}

.sk-personal-img-stack {
    position: relative;
    height: 500px;
}

.sk-personal-img-main {
    width: 70%;
    height: 400px;
    object-fit: cover;
    border-radius: 4px;
    position: absolute;
    right: 0;
    top: 50px;
}

.sk-personal-img-sub {
    width: 60%;
    height: 350px;
    object-fit: cover;
    border-radius: 4px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    border: 10px solid #fff;
}

.sk-personal-badge-top {
    position: absolute;
    top: 0;
    left: 0;
    background: #1a0dab; /* Dark navy-purple from image */
    color: #fff;
    padding: 25px 30px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 15px;
}

.sk-personal-number {
    font-size: 42px;
    font-weight: 800;
}

.sk-personal-badge-text {
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
}

/* Content Area */
.sk-personal-content {
    flex: 1;
}

.sk-personal-overline {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 1px;
}

.sk-personal-title {
    font-size: 40px;
    font-weight: 800;
    color: #0f172a;
    margin: 15px 0 25px;
    line-height: 1.1;
}

.sk-personal-desc {
    color: #64748b;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 35px;
}

/* Grid Checklist */
.sk-personal-checklist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    list-style: none;
    margin-bottom: 45px;
}

.sk-personal-checklist li {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    padding-left: 25px;
    position: relative;
}

.sk-personal-checklist li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #0f172a;
    font-size: 20px;
}

/* Light Support Box */
.sk-personal-support-box {
    background-color: #f1f7f9;
    padding: 30px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sk-personal-support-text h3 {
    font-size: 18px;
    margin-bottom: 5px;
}

.sk-personal-support-text p {
    font-size: 14px;
    color: #64748b;
}

.sk-personal-btn-black {
    background: #000;
    color: #fff;
    padding: 14px 28px;
    text-decoration: none;
    font-weight: 700;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 992px) {
    .sk-personal-container {
        flex-direction: column;
    }
    .sk-personal-visual {
        width: 100%;
        margin-bottom: 50px;
    }
    .sk-personal-img-stack {
        height: 400px;
    }
}
/* Testimonial Section */
.sk-testimonial-wrapper {
    background-color: #5f40bf; /* Brand Purple */
    color: rgb(255, 255, 255);
    padding: 100px 20px;
    /* font-family: 'Plus Jakarta Sans', sans-serif; */
    overflow: hidden;
}

.sk-testimonial-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Hide Radio Buttons */
input[name="sk-slide"] { display: none; }

/* Header & Stats */
.sk-testimonial-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 60px;
}

.sk-testimonial-title-group { flex: 1; }
.sk-testimonial-overline { font-size: 12px; font-weight: 700; opacity: 0.8; letter-spacing: 1px; }
.sk-testimonial-heading { font-size: 40px; font-weight: 800; margin-top: 10px; max-width: 450px; }

.sk-testimonial-stats { display: flex; gap: 40px; align-items: center; }
.sk-stat-num { font-size: 48px; font-weight: 800; border-right: 1px solid rgba(255,255,255,0.3); padding-right: 20px; }
.sk-stat-label { font-size: 11px; font-weight: 600; opacity: 0.8; }

/* Slider Box Area */
.sk-testimonial-slider-box {
    position: relative;
    height: 450px;
}

.sk-testimonial-slide {
    position: absolute;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 60px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-in-out;
    transform: translateX(30px);
}

.sk-testimonial-img { flex: 0 0 380px; }
.sk-testimonial-img img { width: 100%; height: 450px; object-fit: cover; border-radius: 4px; }

.sk-testimonial-content { flex: 1; }
.sk-testimonial-text { font-size: 20px; line-height: 1.6; font-weight: 400; margin-bottom: 30px; }

.sk-testimonial-author h4 { font-size: 22px; font-weight: 700; }
.sk-testimonial-author span { font-size: 13px; opacity: 0.7; font-weight: 600; }

/* CSS Slider Logic */
#sk-slide-1:checked ~ .sk-testimonial-slider-box .sk-slide-content-1,
#sk-slide-2:checked ~ .sk-testimonial-slider-box .sk-slide-content-2,
#sk-slide-3:checked ~ .sk-testimonial-slider-box .sk-slide-content-3 {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Navigation Arrow Styling */
.sk-testimonial-nav {
    position: absolute;
    bottom: 20px;
    left: 440px; /* Aligned next to the image */
    display: flex;
    gap: 15px;
}

.sk-nav-group { display: none; gap: 15px; }

.sk-arrow {
    width: 50px;
    height: 50px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    transition: 0.3s;
    user-select: none;
    color: rgb(255, 255, 255);
}

.sk-arrow:hover { background: rgb(255, 255, 255); color: #533cd1; }

/* Show correct Nav Group based on checked radio */
#sk-slide-1:checked ~ .sk-testimonial-slider-box .sk-nav-1,
#sk-slide-2:checked ~ .sk-testimonial-slider-box .sk-nav-2,
#sk-slide-3:checked ~ .sk-testimonial-slider-box .sk-nav-3 {
    display: flex;
}

/* Responsive */
@media (max-width: 992px) {
    .sk-testimonial-header { flex-direction: column; align-items: flex-start; gap: 30px; }
    .sk-testimonial-slide { flex-direction: column; position: relative; height: auto; margin-bottom: 50px; }
    .sk-testimonial-img { flex: 0 0 auto; width: 100%; }
    .sk-testimonial-nav { left: 0; position: relative; justify-content: center; margin-top: 20px; }
    .sk-testimonial-slider-box { height: auto; }
}
/* Trending Programs Section */
.sk-trending-wrapper {
    background-color: #f1f7f9; /* Light subtle blue background */
    padding: 100px 0;
    /* font-family: 'Plus Jakarta Sans', sans-serif; */
}

.sk-trending-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.sk-trending-header {
    margin-bottom: 50px;
}

.sk-trending-overline {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    letter-spacing: 1px;
}

.sk-trending-title {
    font-size: 36px;
    font-weight: 800;
    color: #0f172a;
    margin-top: 10px;
}

/* Grid Layout */
.sk-trending-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
}

/* Card Component */
.sk-trending-card {
    background: #ffffff;
    border-radius: 4px; /* Matches the sharper edges in the design */
    overflow: visible; /* Important for the overlapping price badge */
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: transform 0.3s ease;
}

.sk-trending-card:hover {
    transform: translateY(-5px);
}

.sk-trending-thumb {
    position: relative;
    height: 200px;
}

.sk-trending-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The Circular Price Badge */
.sk-trending-price {
    position: absolute;
    bottom: -22px;
    right: 20px;
    background: #1a0dab; /* Dark Purple/Navy */
    color: #ffffff;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    z-index: 2;
}

.sk-trending-body {
    padding: 30px 20px 25px;
}

.sk-trending-cat {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.5px;
}

.sk-trending-body h3 {
    font-size: 18px;
    color: #0f172a;
    line-height: 1.4;
    margin: 12px 0;
    height: 50px;
    overflow: hidden;
}

.sk-trending-rating {
    color: #f59e0b; /* Golden Yellow */
    font-size: 12px;
}

.sk-trending-rating span {
    color: #94a3b8;
    margin-left: 5px;
    font-weight: 600;
}

/* Responsive adjustment */
@media (max-width: 600px) {
    .sk-trending-grid {
        grid-template-columns: 1fr;
    }
}
/* Why Choose Us Section */
.sk-features-wrapper {
    background-color: #f1f7f9; /* Matches light background from image */
    padding: 100px 0;
    /* font-family: 'Plus Jakarta Sans', sans-serif; */
    text-align: center;
}

.sk-features-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.sk-features-header {
    margin-bottom: 70px;
}

.sk-features-overline {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.sk-features-title {
    font-size: 36px;
    font-weight: 800;
    color: #0f172a;
    margin: 15px 0 20px;
}

.sk-features-subtitle {
    color: #64748b;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
    font-size: 15px;
}

/* Features Grid */
.sk-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 40px;
}

.sk-features-item {
    padding: 20px;
}

.sk-features-icon {
    font-size: 40px;
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    color: #0f172a;
}

.sk-features-item h3 {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 15px;
}

.sk-features-item p {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
}

/* Responsive adjustment */
@media (max-width: 768px) {
    .sk-features-grid {
        grid-template-columns: 1fr;
    }
    .sk-features-title {
        font-size: 28px;
    }
    .sk-personal-wrapper{
        padding: 20px 0;
    }
}
/* Why Choose Us Scoped Styles */
.sk-why-choose-wrapper {
    padding: 100px 0;
    background-color: #f8fafc; /* Very light grey/blue background as per design */
    /* font-family: 'Plus Jakarta Sans', sans-serif; */
    text-align: center;
}



/* Header Styling */
.sk-why-header {
    margin-bottom: 70px;
}

.sk-overline {
    font-size: 12px;
    font-weight: 700;
    color: #000;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 15px;
}

.sk-why-title {
    font-size: 36px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 20px;
}

.sk-why-subtitle {
    font-size: 15px;
    color: #64748b;
    line-height: 1.6;
}

/* Feature Grid Layout */
.sk-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.sk-feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Icon Styling */
.sk-feature-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sk-feature-icon img {
    width: 100%;
    height: auto;
    opacity: 0.8;
}

/* Feature Text */
.sk-feature-item h3 {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 15px;
}

.sk-feature-item p {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    max-width: 240px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .sk-why-grid {
        grid-template-columns: 1fr 1fr; /* 2x2 grid on tablets */
        gap: 50px 30px;
    }
}

@media (max-width: 600px) {
    .sk-why-grid {
        grid-template-columns: 1fr; /* Stacked on mobile */
    }
    .sk-why-title {
        font-size: 28px;
    }
    .sk-why-subtitle br, .sk-why-title br {
        display: none; /* Remove line breaks on small screens */
    }
}
/* Footer Global Styles */
.sk-footer-section {
    /* font-family: 'Plus Jakarta Sans', sans-serif; */
    color: #ffffff;
}


/* CTA Banner Styling */
.sk-cta-banner {
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1523240715181-2f0f9f20dd98?q=80&w=1200');
    background-size: cover;
    background-position: center;
    padding: 80px 0;
}

.sk-cta-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.sk-cta-text { flex: 2; }
.sk-cta-text h2 { font-size: 32px; font-weight: 800; margin-bottom: 15px; }
.sk-cta-text p { font-size: 14px; opacity: 0.9; line-height: 1.6; max-width: 600px; }

.sk-cta-btns { flex: 1; display: flex; gap: 15px; justify-content: flex-end; }

.sk-btn-purple {
    background: #6343ef;
    color: white;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
}

.sk-btn-outline {
    border: 1px solid white;
    color: white;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
}
/* CTA Section with Background Image */
.sk-cta-section {
    position: relative;
    padding: 100px 20px;
    /* Background Image setup with dark overlay */
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), 
                url('/Rectangle 45136.png');
    background-size: cover;
    background-position: center;
    color: #ffffff;
    /* font-family: 'Plus Jakarta Sans', sans-serif; */
}


/* Flex layout to keep items aligned */
.sk-cta-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.sk-cta-content {
    flex: 2; /* Takes up more space for the text */
}

.sk-cta-heading {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1.2;
}

.sk-cta-subtext {
    font-size: 15px;
    line-height: 1.6;
    opacity: 0.9;
    max-width: 650px;
}

/* Button Group - Single Line Force */
.sk-cta-actions {
    flex: 1;
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    white-space: nowrap; /* Prevents text from wrapping inside buttons */
}

.sk-btn-solid {
    background-color: #6343ef; /* Specific footer purple */
    color: #ffffff;
    padding: 14px 28px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    border-radius: 4px;
    transition: 0.3s;
}

.sk-btn-outline {
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #ffffff;
    padding: 14px 28px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    border-radius: 4px;
    transition: 0.3s;
}

.sk-btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .sk-cta-flex {
        flex-direction: column;
        text-align: center;
    }
    
    .sk-cta-actions {
        justify-content: center;
    }
    
    .sk-cta-subtext {
        margin: 0 auto;
    }
}

@media (max-width: 600px) {
    .sk-cta-heading {
        font-size: 28px;
    }
    
    .sk-cta-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .sk-btn-solid, .sk-btn-outline {
        text-align: center;
    }
}
/* Main Footer Styling */
.sk-footer-main {
    background-color: #6343ef;
    padding-top: 80px;
        padding-left: 20px;
    padding-right: 20px;
}

.sk-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 60px;
}

.sk-footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 20px;
    margin-bottom: 20px;
}

.sk-footer-logo img { width: 100px; filter: brightness(0) invert(1); }

.sk-footer-brand p {
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.8;
    max-width: 300px;
}

.sk-footer-links h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 25px;
}

.sk-footer-links ul { list-style: none; padding: 0; }
.sk-footer-links li { margin-bottom: 15px; }
.sk-footer-links a {
    color: white;
    text-decoration: none;
    font-size: 14px;
    opacity: 0.8;
    transition: 0.3s;
}

.sk-footer-links a:hover { opacity: 1; padding-left: 5px; }

/* Bottom Bar */
.sk-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 30px 0;
    font-size: 12px;
    letter-spacing: 1px;
}

/* Responsive */
@media (max-width: 992px) {
    .sk-cta-flex { flex-direction: column; text-align: center; }
    .sk-cta-btns { justify-content: center; }
    .sk-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .sk-footer-grid { grid-template-columns: 1fr; text-align: center; }
    /* .sk-footer-brand p { margin: 0 auto; } */
}

/* About Hero Specific Styles */




/* Purple Top Header */
.sk-about-header-bg {
    background-color: #4c35c1;
    color: #ffffff;
    text-align: center;
    padding: 80px 20px 160px; 
}

.sk-overline-white {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    opacity: 0.9;
}

.sk-main-title {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.1;
    margin-top: 15px;
}

/* White Bottom Content Area */
.sk-about-content-bg {
    background-color: transparent;
    padding-bottom: 100px;
    margin-top: -120px;
}

.sk-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* Visual Components */
.sk-about-visual {
    position: relative;
}

.sk-image-wrapper {
    position: relative;
    border-radius: 4px;
    /* height: 500px; */
}
.sk-img{
    height: 635px;
    object-fit: cover;
    object-position: center;
}
.sk-image-wrapper img {
    width: 100%;
    display: block;
    border-radius: 4px;
}

/* Trusted Badge (Matching exactly the design) */
.sk-trusted-badge {
    position: absolute;
    bottom: -50px;
    right: -100px;
    transform: translateX(-50%);
    background: #6343ef;
    color: white;
    padding: 20px 30px;
    border-radius: 12px;
    text-align: center;
    width: 280px;
    box-shadow: 0 15px 30px rgba(99, 67, 239, 0.3);
}

.sk-badge-label { font-size: 10px; opacity: 0.8; margin-bottom: 4px; }
.sk-badge-count { font-size: 14px; font-weight: 700; margin-bottom: 10px; }

.sk-avatars { display: flex; justify-content: center; margin-bottom: 10px; }
.sk-avatars img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #6343ef;
    margin: 0 -5px;
}

.sk-stars { font-size: 12px; color: #ffb800; }
.sk-stars span { color: white; opacity: 0.8; margin-left: 5px; }

/* Text & Stats Components */
.sk-about-text{
    padding-top: 180px;
}
.sk-overline-dark {
    font-size: 12px;
    font-weight: 700;
    color: #000;
    letter-spacing: 1.5px;
}

.sk-story-title {
    font-size: 40px;
    font-weight: 800;
    color: #0f172a;
    margin: 15px 0 25px;
    line-height: 1.2;
}

.sk-story-desc {
    color: #64748b;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 40px;
}

/* Stats Row */
.sk-about-stats {
    display: flex;
    gap: 40px;
}

.sk-stat-val {
    display: block;
    font-size: 36px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 5px;
}

.sk-stat-tag {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.5px;
}

/* Responsive Mobile Layout */
@media (max-width: 992px) {
    .sk-about-grid {
        grid-template-columns: 1fr;
        gap: 60px;
        margin-top: -60px;
    }
    .sk-main-title { font-size: 38px; }
    .sk-about-text { text-align: center; }
    .sk-about-stats { justify-content: center; }
}

/* Why we are Different */



/* Feature Bar */
.sk-feature-bar {
    background-color: #6343ef;
    color: white;
    padding: 40px 0;
    margin-bottom: 80px;
}

.sk-bar-flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.sk-bar-item {
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 700;
    font-size: 16px;
}

/* Header */
.sk-diff-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.sk-overline {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #000;
}

.sk-diff-title {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.3;
    margin-top: 20px;
}

/* Grid and Cards */
.sk-diff-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.sk-diff-card {
    background-color: #f1f7f9; /* Light blue/grey */
    padding: 40px 30px;
    border-radius: 4px;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 320px;
}

.sk-card-num {
    font-size: 32px;
    font-weight: 800;
    display: block;
    margin-bottom: 15px;
}

.sk-diff-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
}

.sk-diff-card p {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Hover/Active Button logic */
.sk-card-btn {
    background: #000;
    color: #fff;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    border-radius: 4px;
    margin-top: auto;
    opacity: 0; /* Hidden by default */
    transform: translateY(10px);
    transition: 0.3s ease;
}

/* The Hover Effect */
.sk-diff-card:hover, 
.sk-diff-card.active {
    background-color: #ecf3f6; /* Slightly darker shift */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    height: fit-content;
}

.sk-diff-card:hover .sk-card-btn,
.sk-diff-card.active .sk-card-btn {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile Responsiveness */
@media (max-width: 1024px) {
    .sk-diff-grid { grid-template-columns: 1fr 1fr; }
    .sk-bar-flex { flex-direction: column; gap: 20px; }
}

@media (max-width: 600px) {
    .sk-diff-grid { grid-template-columns: 1fr; }
    .sk-diff-title { font-size: 24px; }
}
/* What we offer */
.sk-offer-section {
    padding-top: 50px;
    padding-bottom: 100px;
    background-color: #ffffff;
    /* font-family: 'Plus Jakarta Sans', sans-serif; */
}

.sk-offer-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* Overlapping Image Visuals */
.sk-offer-visual {
    position: relative;
    height: 500px;
    display: flex;
    align-items: center;
}

.sk-circle-bg {
    position: absolute;
    width: 380px;
    height: 380px;
    border: 5px solid #a394e7; 
    border-radius: 50%;
    top: 150px;
    left: 50px;
    z-index: 1;
}
.sk-black-circle-bg{
    position: absolute;
    width: 120px;
    height: 120px;
    background-color: black;
    border-radius: 50%;
    top: 50px;
    left: 150px;
    z-index: 2;
}

.sk-img-back {
    /* position: absolute; */
    /* width: 280px; */
    /* height: 380px; */
    left: -50px;
    z-index: 2;
    overflow: hidden;
    border-radius: 150px 0 0 0;
}

.sk-img-back img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sk-img-front {
    position: relative;
    width: 300px;
    /* height: 450px; */
    margin-left: 50px;
    z-index: 3;
    /* box-shadow: 20px 20px 60px rgba(0,0,0,0.05); */
}

.sk-img-front img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

/* Content Text Styling */
.sk-offer-overline {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #000;
    display: block;
    margin-bottom: 15px;
}

.sk-offer-title {
    font-size: 44px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 25px;
}

.sk-offer-desc {
    font-size: 16px;
    color: #64748b;
    margin-bottom: 35px;
    max-width: 500px;
}

/* Two-column Bullet List */
.sk-offer-list {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 15px 30px;
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
}

.sk-offer-list li {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    position: relative;
    padding-left: 20px;
}

.sk-offer-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #000;
    font-weight: 900;
}

/* Questions Callout Box */
.sk-questions-callout {
    background-color: #f1f7f9;
    padding: 30px 40px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.sk-callout-text h4 {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 8px;
}

.sk-callout-text p {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

.sk-btn-get-started {
    background-color: #000000;
    color: #ffffff;
    text-decoration: none;
    padding: 16px 32px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    transition: 0.3s;
}

.sk-btn-get-started:hover {
    background-color: #333;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .sk-offer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .sk-offer-visual {
        /* justify-content: center; */
        height: 550px;
        margin-bottom: 40px;
    }
    .sk-offer-list {
        justify-content: center;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    .sk-questions-callout {
        flex-direction: column;
        text-align: center;
    }
}

/* Instructor Section Styles */
.sk-instructor-section {
    padding: 100px 0;
    background-color: #ffffff;
    /* font-family: 'Plus Jakarta Sans', sans-serif; */
    overflow: hidden;
}


.sk-instructor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* Content Area */
.sk-instructor-title {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.1;
    color: #0f172a;
    margin-bottom: 25px;
}

.sk-instructor-desc {
    font-size: 16px;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 40px;
    max-width: 500px;
}

.sk-btn-black {
    background-color: #000000;
    color: #ffffff;
    padding: 16px 35px;
    text-decoration: none;
    font-weight: 700;
    border-radius: 6px;
    display: inline-block;
    transition: 0.3s;
}

/* Visual Area */
.sk-instructor-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Large Purple Graphic */
.sk-circle-graphic {
    position: relative;
    width: 450px;
    height: 450px;
    background-color: #6343ef;
    border-radius: 50%;
    z-index: 1;
    overflow: hidden;
}

.sk-instructor-img-wrapper {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 2;
    border-radius: 50%; 
}

.sk-instructor-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Floating Badges */
.sk-floating-badge {
    position: absolute;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 30px;
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    z-index: 3;
    left: 0;
}


.sk-floating-badge span { font-size: 12px; font-weight: 700; margin-bottom: 5px; color: black;}
.sk-stars { color: #ffb800; font-size: 12px; }

/* Responsive */
@media (max-width: 992px) {
    .sk-instructor-grid { grid-template-columns: 1fr; text-align: center; }
    .sk-instructor-desc { margin: 0 auto 40px; }
    .sk-circle-graphic { width: 350px; height: 350px; }
}
/* Testimonials */
.sk-testimonial-section {
    background-color: #f8fafc;
    /* font-family: 'Plus Jakarta Sans', sans-serif; */
    text-align: center;
    overflow: hidden;
}

/* .sk-testimonial-wrapper {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
} */

/* Quote Icon */
.sk-quote-icon {
    margin-bottom: 30px;
    opacity: 0.6;
}

/* Slider Logic */
input[type="radio"] {
    display: none; /* Hide the actual radio buttons */
}

.sk-slides {
    display: flex;
    width: 300%; /* Enough for 3 slides */
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.sk-slide {
    width: 33.333%;
    padding: 0 20px;
}

.sk-testi-text {
    font-size: 18px;
    color: #f9fafb;
    line-height: 1.8;
    margin-bottom: 30px;
    font-style: italic;
}

.sk-testi-name {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 5px;
}

.sk-testi-role {
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Arrows Styling */
.sk-testi-nav {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.sk-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    cursor: pointer;
    margin: 0 10px;
    font-size: 20px;
    transition: 0.3s;
    user-select: none;
}

.sk-arrow:hover {
    background: #ffffff;
    color: #fff;
}

/* Functional CSS Logic (The "Magic") */
#slide1:checked ~ .sk-testimonial-wrapper .sk-slides { transform: translateX(0%); }
#slide2:checked ~ .sk-testimonial-wrapper .sk-slides { transform: translateX(-33.333%); }
#slide3:checked ~ .sk-testimonial-wrapper .sk-slides { transform: translateX(-66.666%); }

/* Only show the arrows relevant to the current slide */
.sk-nav-group { display: none; }
#slide1:checked ~ .sk-testimonial-wrapper .n1 { display: flex; }
#slide2:checked ~ .sk-testimonial-wrapper .n2 { display: flex; }
#slide3:checked ~ .sk-testimonial-wrapper .n3 { display: flex; }

/* Hero Section Scoped Styles */


/* Purple Header Background */
.sk-hero-purple-bg {
    background-color: #4c35c1;
    color: #ffffff;
    text-align: center;
    padding: 100px 0 160px; /* Large bottom padding to allow floating cards to overlap */
}

.sk-overline-white {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0.9;
}

.sk-hero-title {
    font-size: 56px;
    font-weight: 800;
    line-height: 1.1;
    margin-top: 20px;
}

/* White Content Area */
.sk-hero-white-bg {
    padding-bottom: 80px;
}

/* The Floating Grid (Overlaps the purple and white sections) */
.sk-floating-categories {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    background: #ffffff;
    padding: 40px 10px;
    border-radius: 4px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.05);
    margin-top: -100px; /* This pulls the box up into the purple section */
    position: relative;
    z-index: 10;
}

/* Category Card Styling */
.sk-hero-cat {
    text-align: center;
    padding: 20px 10px;
    border-right: 1px solid #f1f5f9;
}

.sk-hero-cat:last-child {
    border-right: none;
}

.sk-cat-icon {
    width: 60px;
    height: 60px;
    background-color: #f0f9ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.sk-cat-icon img {
    width: 28px;
    height: 28px;
    opacity: 0.7;
}

.sk-hero-cat h4 {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.4;
    margin-bottom: 8px;
}

.sk-hero-cat p {
    font-size: 12px;
    color: #64748b;
}
/* Pagination */
.sk-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.sk-page-num {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 50%;
    background: #ffffff;
    color: #0f172a;
    font-weight: 700;
    font-size: 14px;
    transition: 0.3s;
}

.sk-page-num.active {
    background: #000000;
    color: #ffffff;
}
/* Responsive Breakpoints */
@media (max-width: 1024px) {
    .sk-floating-categories {
        grid-template-columns: repeat(3, 1fr);
        margin-top: -60px;
    }
    .sk-hero-cat { border-bottom: 1px solid #f1f5f9; }
    .sk-hero-cat:nth-child(3n) { border-right: none; }
}

@media (max-width: 600px) {
    .sk-hero-title { font-size: 36px; }
    .sk-floating-categories {
        grid-template-columns: repeat(2, 1fr);
    }
    .sk-hero-cat:nth-child(odd) { border-right: 1px solid #f1f5f9; }
}

/* Course Detail Styles */
.sk-detail-hero {
    /* font-family: 'Plus Jakarta Sans', sans-serif; */
    position: relative;
}



/* Banner Background */
.sk-detail-banner {
    position: relative;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
                url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=1200');
    background-size: cover;
    background-position: center;
    padding: 120px 0 160px; /* Extra bottom padding for overlap */
    color: #ffffff;
}

.sk-category-tag {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 20px;
}

.sk-detail-title {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.1;
    max-width: 800px;
    margin-bottom: 25px;
}

.sk-detail-rating {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sk-stars {
    color: #ffb800;
    letter-spacing: 2px;
}

.sk-rating-val {
    font-size: 14px;
    opacity: 0.9;
}

/* Floating Stats Bar */
.sk-detail-stats-bar {
    margin-top: -60px; /* Pulls the bar up into the banner */
    position: relative;
    z-index: 10;
}

.sk-stats-grid {
    background-color: #ecf3f6; /* Light blue-grey tint from screenshot */
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 35px 20px !important;
    border-radius: 4px;
}

.sk-stat-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0 15px;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
}

.sk-stat-item:last-child {
    border-right: none;
}

.sk-stat-icon img {
    width: 28px;
    height: 28px;
    opacity: 0.7;
}

.sk-stat-info strong {
    display: block;
    font-size: 14px;
    color: #0f172a;
    font-weight: 700;
}

.sk-stat-info p {
    font-size: 12px;
    color: #64748b;
    margin-top: 4px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .sk-stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    .sk-stat-item { border-right: none; }
    .sk-detail-title { font-size: 38px; }
}

@media (max-width: 600px) {
    .sk-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.sk-course-info-section {
    padding: 60px 0 100px;
    background-color: #ffffff;
    /* font-family: 'Plus Jakarta Sans', sans-serif; */
}

/* Tab Navigation Styling */
.sk-tabs-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the row of buttons */
    width: 100%;
}

/* This creates the single horizontal row */
.sk-tab-list {
    display: flex;
    flex-direction: row; 
    justify-content: center;
    gap: 5px; /* Adds space between buttons */
    width: 100%;
    flex-wrap: wrap; /* Allows wrapping on very small screens */
}

.sk-tabs-container input[type="radio"] {
    display: none;
}

.sk-tab-btn {
    padding: 12px 35px;
    background-color: #ecf3f6;
    color: #0f172a;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
    border-radius: 4px;
    text-align: center;
}

.sk-tab-content {
    width: 100%;
    margin-top: 50px;
    text-align: left;
}
/* Tab Row Layout */
.sk-tabs-container label {
order: 1; /* Moves labels to the top */

}

.sk-tab-content {
order: 2; /* Moves content below labels */
width: 100%;
margin-top: 50px;
text-align: left;

}

/* Active Tab Logic */
#tab-details:checked + label {
background-color: #5e3bee;
color: #ffffff;

}

#tab-modules:checked + label,
#tab-instructor:checked + label,
#tab-faqs:checked + label,
#tab-questions:checked + label {
background-color: #5e3bee;
color: #ffffff;

}

/* Pane Visibility Logic */

.sk-pane { display: none; }
#tab-details:checked ~ .sk-tab-content #details-pane {
display: block;

}

/* Content Typography */
.sk-content-group {
margin-bottom: 40px;
max-width: 900px;

}

.sk-section-title {
font-size: 32px;
font-weight: 800;
color: #0f172a;
margin-bottom: 25px;

}

.sk-sub-title {
font-size: 24px;
font-weight: 700;
color: #0f172a;
margin-bottom: 20px;

}

.sk-body-text {
font-size: 16px;
color: #64748b;
line-height: 1.7;
margin-bottom: 20px;

}

/* List Styling */

.sk-check-list {
list-style: none;
padding: 0;

}

.sk-check-list li {
font-size: 15px;
color: #475569;
margin-bottom: 12px;
position: relative;
padding-left: 20px;

}

.sk-check-list li::before {
content: "•";
position: absolute;
left: 0;
color: #64748b;
font-weight: bold;

}
/* Active Tab Logic using Sibling Selector */
#tab-details:checked ~ .sk-tab-list label[for="tab-details"],
#tab-modules:checked ~ .sk-tab-list label[for="tab-modules"],
#tab-instructor:checked ~ .sk-tab-list label[for="tab-instructor"],
#tab-faqs:checked ~ .sk-tab-list label[for="tab-faqs"],
#tab-questions:checked ~ .sk-tab-list label[for="tab-questions"] {
    background-color: #5e3bee;
    color: #ffffff;
}

/* Pane Visibility Logic */
.sk-pane { display: none; }
#tab-details:checked ~ .sk-tab-content #details-pane {
    display: block;
}

/* Hide dummy text if details is selected */
#tab-details:checked ~ .sk-tab-content .sk-pane-empty {
    display: none;
}

/* Show dummy text if anything else is selected (for now) */
#tab-modules:checked ~ .sk-tab-content .sk-pane-empty,
#tab-instructor:checked ~ .sk-tab-content .sk-pane-empty,
#tab-faqs:checked ~ .sk-tab-content .sk-pane-empty,
#tab-questions:checked ~ .sk-tab-content .sk-pane-empty {
    display: block;
}
.sk-course-description {
    padding: 100px 0;
    background-color: #f8fafc;
    /* font-family: 'Plus Jakarta Sans', sans-serif; */
}

.sk-desc-header {
    margin-bottom: 50px;
}

.sk-overline {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 1px;
}

.sk-section-title {
    font-size: 48px;
    font-weight: 800;
    color: #0f172a;
    margin-top: 10px;
}

/* Grid Layout */
.sk-desc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Image Wrapper and Overlay */
.sk-desc-image-wrapper {
    position: relative;
    height: 480px;
    border-radius: 4px;
    overflow: hidden;
}

.sk-desc-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sk-desc-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.9) 100%);
}

/* Circular Badge */
.sk-badge-free-alt {
    position: absolute;
    top: 60px; /* Positioned slightly from the top-right as seen in ref */
    right: 25px;
    background-color: #2e00a5;
    color: #ffffff;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    z-index: 5;
}

/* Content over image */
.sk-desc-content {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    z-index: 5;
    color: #ffffff;
}

.sk-desc-cat {
    font-size: 11px;
    font-weight: 700;
    opacity: 0.8;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.sk-desc-name {
    font-size: 22px;
    font-weight: 700;
    margin: 15px 0;
    line-height: 1.3;
}

.sk-desc-rating {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sk-stars {
    color: #ffb800;
}

.sk-rating-val {
    font-size: 12px;
    opacity: 0.9;
}

/* Responsive */
@media (max-width: 1024px) {
    .sk-desc-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .sk-desc-grid { grid-template-columns: 1fr; }
    .sk-desc-image-wrapper { height: 400px; }
    .sk-section-title { font-size: 32px; }
}
/* FAQ Global Styles */
.sk-faq-hero {
    background-color: #4c35c1;
    color: #ffffff;
    text-align: center;
    padding: 100px 0 140px;
}

.sk-faq-title {
    font-size: 56px;
    font-weight: 800;
    margin-bottom: 20px;
}

.sk-faq-subtitle {
    font-size: 16px;
    opacity: 0.9;
    max-width: 600px;
}

/* Layout Grid */
.sk-faq-content {
    background-color: #ffffff;
    padding: 100px 0;
}

.sk-faq-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 80px;
    position: relative;
    z-index: 10;
}

/* Sidebar Styling */
.sk-faq-sidebar {
    background-color: #f0f7f9;
    border-radius: 4px;
    overflow: hidden;
    height: fit-content;
}

.sk-nav-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    text-decoration: none;
    color: #0f172a;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid rgba(0,0,0,0.03);
    transition: 0.3s;
}

.sk-nav-item.active {
    background-color: #5e3bee;
    color: #ffffff;
}

.sk-nav-item:hover:not(.active) {
    background-color: #e2eff3;
}

.sk-arrow {
    font-size: 18px;
    opacity: 0.7;
}

/* Accordion Styling */
.sk-faq-accordion {
    padding-top: 60px;
}
.sk-accordion{
    background-color: white;
    padding-left: 20px;
    padding-right: 20px;
}
.sk-accordion-item {
    border-bottom: 1px solid #e2e8f0;
}

.sk-accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0;
    background: none;
    border: none;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.sk-plus {
    font-size: 24px;
    color: #0f172a;
    font-weight: 400;
}

/* Responsive */
@media (max-width: 1024px) {
    .sk-faq-grid {
        gap: 40px;
        margin-top: -40px;
    }
    .sk-faq-sidebar {
        max-width: 400px;
        margin: 0 auto;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .sk-faq-title { font-size: 36px; }
    .sk-accordion-header { font-size: 16px; }
}
/* Hide Radio Buttons */
input[type="radio"] { display: none; }

/* 1. Sidebar Category Switching Logic */
.sk-tab-pane { display: none; }

#cat-enroll:checked ~ .sk-faq-sidebar label[for="cat-enroll"],
#cat-tech:checked ~ .sk-faq-sidebar label[for="cat-tech"],
#cat-grading:checked ~ .sk-faq-sidebar label[for="cat-grading"] {
    background-color: #5e3bee;
    color: #ffffff;
}

#cat-enroll:checked ~ .sk-faq-panes #pane-enroll,
#cat-tech:checked ~ .sk-faq-panes #pane-tech,
#cat-grading:checked ~ .sk-faq-panes #pane-grading {
    display: block;
}

/* 2. Accordion Logic */
.sk-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    border-bottom: 1px solid #e2e8f0;
}

.sk-accordion input:checked + label + .sk-accordion-body {
    max-height: 200px; /* Expands the content */
    padding: 20px 0;
}

.sk-accordion input:checked + label .sk-plus {
    transform: rotate(45deg); /* Turns + into x */
}

/* Base Styles */
.sk-faq-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 80px;
    margin-top: -60px;
}

.sk-nav-item {
    display: flex;
    justify-content: space-between;
    padding: 20px 25px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
}

.sk-accordion-header {
    display: flex;
    justify-content: space-between;
    padding: 30px 0;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    border-bottom: 1px solid #e2e8f0;
}

.sk-plus { transition: 0.3s; display: inline-block; }
/* Blog Listing Styles */
.sk-blog-hero {
    background-color: #4c35c1;
    color: #ffffff;
    padding: 100px 0 160px;
    /* font-family: 'Plus Jakarta Sans', sans-serif; */
}

.sk-blog-overline {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    opacity: 0.9;
    display: block;
    margin-bottom: 15px;
}

.sk-blog-main-title {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.1;
    max-width: 600px;
}

/* Listing Grid */
.sk-blog-listing {
    padding: 100px 0;
    background-color: #ffffff;
}

.sk-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.sk-blog-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.sk-blog-card:hover {
    transform: translateY(-5px);
}

.sk-blog-img {
    height: 240px;
    overflow: hidden;
}

.sk-blog-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sk-blog-info {
    padding: 25px;
}

.sk-blog-cat {
    font-size: 11px;
    font-weight: 700;
    color: #0f172a;
    display: block;
    margin-bottom: 12px;
}

.sk-blog-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.4;
    margin-bottom: 15px;
}

.sk-blog-date {
    font-size: 13px;
    color: #94a3b8;
}

/* Pagination */
.sk-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 60px;
}

.sk-page-num {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    background-color: #f1f5f9;
    color: #0f172a;
    transition: 0.3s;
}

.sk-page-num.active {
    background-color: #000000;
    color: #ffffff;
}

.sk-page-num:hover:not(.active) {
    background-color: #e2e8f0;
}

/* Responsive */
@media (max-width: 1024px) {
    .sk-blog-grid { grid-template-columns: 1fr 1fr; }
    .sk-blog-main-title { font-size: 40px; }
}

@media (max-width: 650px) {
    .sk-blog-grid { grid-template-columns: 1fr; }
}
/* Blog Detail Hero Styling */
.sk-blog-detail-hero {
    position: relative;
    /* Use the same background image as the card from the previous page */
    background-image: url('https://images.unsplash.com/photo-1427504494785-3a9ca7044f45?q=80&w=1600');
    background-size: cover;
    background-position: center;
    min-height: 500px;
    display: flex;
    align-items: center;
    /* font-family: 'Plus Jakarta Sans', sans-serif; */
}

/* Dark Overlay for Text Readability */
.sk-blog-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Deep dark overlay */
    display: flex;
    align-items: center;
    text-align: center;
}



/* Meta Data (Category & Author) */
.sk-blog-meta-top {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
}

.sk-detail-cat, 
.sk-detail-author {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ffffff;
    text-transform: uppercase;
}

.sk-meta-divider {
    color: rgba(255, 255, 255, 0.6);
}

/* Main Title */
.sk-blog-detail-title {
    font-size: 64px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    max-width: 900px;
}

/* Date */
.sk-detail-date {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .sk-blog-detail-title {
        font-size: 48px;
    }
}

@media (max-width: 768px) {
    .sk-blog-detail-hero {
        min-height: 400px;
    }
    .sk-blog-detail-title {
        font-size: 36px;
    }
}
/* Main Content Layout */
.sk-blog-main-content {
    background-color: #ffffff;
    padding-bottom: 100px;
    /* font-family: 'Plus Jakarta Sans', sans-serif; */
}

.sk-article-wrapper {
    max-width: 900px;
    margin: -80px auto 0; /* Creates the overlap with the hero section */
    background: #ffffff;
    padding: 60px;
    position: relative;
    z-index: 10;
}

/* Typography */
.sk-article-body p {
    font-size: 16px;
    line-height: 1.8;
    color: #1e293b;
    margin-bottom: 25px;
}

.sk-article-h2 {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    margin: 45px 0 20px;
}

/* Quote Section */
.sk-article-quote {
    background-color: #f1f5f9;
    padding: 40px;
    border-radius: 12px;
    margin: 40px 0;
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.sk-article-quote p {
    font-size: 16px;
    font-style: italic;
    color: #475569;
    margin-bottom: 0;
    line-height: 1.7;
}

/* Author Card */
.sk-author-card {
    background-color: #5e3bee;
    border-radius: 4px;
    padding: 40px;
    margin-top: 60px;
    display: flex;
    align-items: center;
    gap: 35px;
    color: #ffffff;
}

.sk-author-img {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.sk-author-img img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.sk-author-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    opacity: 0.8;
    display: block;
    margin-bottom: 8px;
}

.sk-author-name {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 15px;
}

.sk-author-info p {
    font-size: 15px;
    line-height: 1.6;
    opacity: 0.9;
}

/* Responsive */
@media (max-width: 768px) {
    .sk-article-wrapper {
        padding: 30px 20px;
        margin-top: -40px;
    }
    .sk-author-card {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
    }
    .sk-article-quote {
        flex-direction: column;
        gap: 15px;
    }
}
/* Related Blogs Section Styling */
.sk-related-blogs {
    padding: 100px 0;
    background-color: #ffffff;
    /* font-family: 'Plus Jakarta Sans', sans-serif; */
    border-top: 1px solid #f1f5f9;
}

.sk-related-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.sk-overline-sm {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #0f172a;
    display: block;
    margin-bottom: 12px;
}

.sk-related-title {
    font-size: 42px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 20px;
}

.sk-related-subtitle {
    font-size: 15px;
    line-height: 1.6;
    color: #64748b;
}

/* Grid Layout */
.sk-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.sk-related-card {
    border: 1px solid #e2e8f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sk-related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.sk-related-img {
    height: 220px;
    overflow: hidden;
}

.sk-related-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sk-related-info {
    padding: 25px;
}

.sk-related-cat {
    font-size: 11px;
    font-weight: 700;
    color: #0f172a;
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px;
}

.sk-related-name {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.4;
    margin-bottom: 15px;
}

.sk-related-date {
    font-size: 13px;
    color: #94a3b8;
}

/* Responsive Scaling */
@media (max-width: 1024px) {
    .sk-related-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 650px) {
    .sk-related-grid { grid-template-columns: 1fr; }
    .sk-related-title { font-size: 32px; }
}
/* Contact Hero */
.sk-contact-hero {
    background-color: #4c35c1;
    color: #ffffff;
    padding: 100px 0 140px;
    /* font-family: 'Plus Jakarta Sans', sans-serif; */
}

.sk-contact-title {
    font-size: 56px;
    font-weight: 800;
}

/* Contact Body Layout */
.sk-contact-body {
    /* padding-bottom: 100px; */
    padding-top: 50px;
}

.sk-contact-grid {
    display: grid;
    grid-template-columns: 1fr 450px;
    gap: 80px;
    margin-top: -80px; /* Overlap effect */
}

/* Left Content */
.sk-contact-info {
    padding-top: 120px;
}

.sk-overline-sm {
    font-size: 11px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 15px;
}

.sk-contact-heading {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 25px;
    color: #0f172a;
}

.sk-contact-desc {
    font-size: 16px;
    line-height: 1.6;
    color: #64748b;
    max-width: 500px;
    margin-bottom: 40px;
}

.sk-signature-block { margin-top: 30px; }
.sk-sig-img { height: 60px; margin-bottom: 10px; }
.sk-sig-name { font-weight: 700; font-size: 16px; margin: 0; }
.sk-sig-title { font-size: 13px; color: #94a3b8; }

/* Form Styling */
.sk-contact-form-wrapper {
    background-color: #f0f7f9;
    padding: 50px 40px;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.sk-form-title { font-size: 24px; font-weight: 700; margin-bottom: 10px; }
.sk-form-subtitle { font-size: 14px; color: #64748b; margin-bottom: 30px; }

.sk-input-group { margin-bottom: 20px; }

.sk-contact-form input, 
.sk-contact-form textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: #ffffff;
    font-family: inherit;
    font-size: 14px;
}

.sk-checkbox-container {
    display: block;
    font-size: 13px;
    color: #64748b;
    margin: 25px 0;
    cursor: pointer;
}

.sk-btn-submit {
    width: 100%;
    background-color: #000000;
    color: #ffffff;
    padding: 18px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

.sk-btn-submit:hover { background-color: #4c35c1; }

/* Responsive */
@media (max-width: 1024px) {
    .sk-contact-info { padding-top: 40px; }
    .sk-contact-form-wrapper { max-width: 500px; margin: 0 auto; }
}
/* Contact Details Grid */
.sk-location-section {
    padding: 100px 0;
    text-align: center;
}

.sk-overline-center {
    font-size: 11px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 10px;
}

.sk-section-title-center {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 60px;
}

.sk-details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.sk-detail-item {
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: left;
}

.sk-detail-icon {
    width: 60px;
    height: 60px;
    background: #f8fafc;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
}

.sk-detail-icon img { width: 100%; opacity: 0.7; }

.sk-detail-text h4 { font-weight: 700; margin-bottom: 5px; }
.sk-detail-text p { font-size: 14px; color: #64748b; line-height: 1.5; }

/* FAQ Section Logic */
.sk-contact-faq {
    background-color: #f0f7f9;
    padding: 80px 0;
}

.sk-faq-layout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: center;
    margin-top: 40px;
}

/* NO-JS Accordion Logic */
.sk-acc-item input[type="radio"] { display: none; }

.sk-acc-header {
    display: flex;
    justify-content: space-between;
    padding: 25px 0;
    font-weight: 700;
    border-bottom: 1.5px solid #e2e8f0;
    cursor: pointer;
    transition: color 0.3s;
}

.sk-acc-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    background-color: transparent;
}

.sk-acc-content p {
    padding: 0 0 20px 0;
    font-size: 15px;
    color: #475569;
    line-height: 1.6;
}

/* Activation */
.sk-acc-item input:checked + .sk-acc-header { color: #5e3bee; }
.sk-acc-item input:checked ~ .sk-acc-content {
    max-height: 200px; /* Expands smoothly */
}

/* Illustration Scaling */
.sk-faq-illustration img {
    width: 100%;
    max-width: 450px;
}

/* Responsive */
@media (max-width: 1024px) {
    .sk-faq-layout { grid-template-columns: 1fr; }
    .sk-faq-illustration { order: -1; } /* Image on top for mobile */
}
/* Login Page Layout */
.sk-login-page {
    height: 100vh;
    display: flex;
    /* font-family: 'Plus Jakarta Sans', sans-serif; */
    overflow: hidden;
}

.sk-login-container {
    display: flex;
    width: 100%;
}

/* Left Brand Side */
.sk-login-brand {
    flex: 1;
    background-color: #5e3bee;
    background-image: url('https://www.transparenttextures.com/patterns/cubes.png'); /* Subtle doodle/pattern effect */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    padding: 60px;
    position: relative;
}

.sk-logo-white {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
}

.sk-logo-white img {
    width: 150px;
    margin-bottom: 10px;
}

.sk-logo-white span {
    font-weight: 800;
    letter-spacing: 2px;
    font-size: 24px;
}

.sk-welcome-text {
    font-size: 64px;
    font-weight: 800;
    text-align: center;
    max-width: 500px;
}

/* Right Form Side */
.sk-login-form-area {
    flex: 1;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
}

.sk-form-box {
    width: 100%;
    max-width: 450px;
}

.sk-login-header {
    font-size: 48px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 10px;
    text-align: center;
}

.sk-login-subheader {
    text-align: center;
    color: #64748b;
    font-size: 16px;
    margin-bottom: 40px;
}

/* Form Styling */
.sk-form-group {
    margin-bottom: 25px;
}

.sk-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 8px;
}

.sk-form-group input {
    width: 100%;
    padding: 15px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 15px;
}

.sk-form-options {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 30px;
}

.sk-no-account {
    color: #64748b;
}

.sk-signup-link {
    color: #0f172a;
    font-weight: 700;
    text-decoration: none;
}

.sk-btn-login {
    width: 100%;
    background-color: #1e293b;
    color: #ffffff;
    padding: 18px;
    border: none;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
}

.sk-btn-login:hover {
    background-color: #5e3bee;
}

/* Responsive */
@media (max-width: 1024px) {
    .sk-login-form-area { flex: 1; }
}
/* Auth Shared Layout */
.sk-auth-page {
    height: 100vh;
    display: flex;
    /* font-family: 'Plus Jakarta Sans', sans-serif; */
}

.sk-auth-container {
    display: flex;
    width: 100%;
}

/* Purple Side */
.sk-auth-brand {
    flex: 1;
    background-color: #5e3bee;
    /* Uses a doodle-style background pattern as seen in your screenshot */
    background-image: url('https://www.transparenttextures.com/patterns/p6-dark.png'); 
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    padding: 40px;
}

.sk-logo-wrap {
    text-align: center;
    margin-bottom: 30px;
}

.sk-logo-wrap img { width: 150px; }
.sk-logo-wrap span {
    display: block;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 1px;
    margin-top: 10px;
}

.sk-welcome-title {
    font-size: 58px;
    font-weight: 800;
    text-align: center;
    line-height: 1.1;
}

/* White Form Side */
.sk-auth-form-area {
    flex: 1;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.sk-form-wrapper {
    width: 100%;
    max-width: 420px;
}

.sk-form-main-title {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 8px;
}

.sk-form-subtitle {
    color: #64748b;
    font-size: 15px;
    margin-bottom: 35px;
}

/* Input Styling */
.sk-input-field { margin-bottom: 20px; }
.sk-input-field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.sk-input-field input {
    width: 100%;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 14px;
}

/* Checkbox Logic */
.sk-checkbox-group { margin: 25px 0; }
.sk-custom-checkbox {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    cursor: pointer;
}

.sk-box-label {
    font-size: 13px;
    color: #1e293b;
    line-height: 1.4;
}

/* Button & Footer */
.sk-btn-register {
    width: 100%;
    background-color: #1e293b;
    color: #ffffff;
    padding: 16px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

.sk-btn-register:hover { background-color: #5e3bee; }

.sk-auth-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    font-size: 14px;
}

.sk-login-link {
    color: #1e293b;
    font-weight: 700;
    text-decoration: none;
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .sk-auth-brand { display: none; }
}
/* Recovery Specific Subtitle adjustment */
.sk-form-subtitle {
    color: #64748b;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Ensure the button matches the dark-to-purple hover effect */
.sk-btn-register {
    width: 100%;
    background-color: #1e293b;
    color: #ffffff;
    padding: 16px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 10px;
}

.sk-btn-register:hover {
    background-color: #5e3bee;
}

/* Footer alignment for the back-to-login link */
.sk-auth-footer {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 25px;
    font-size: 14px;
}

.sk-login-link {
    color: #1e293b;
    font-weight: 700;
    text-decoration: underline;
}

.sk-login-link:hover {
    color: #5e3bee;
}
/* ===================================================
   MOBILE HEADER + SIDEBAR (CSS ONLY)
   =================================================== */

/* Hide mobile header by default */
.sk-mobile-header {
    display: none;
}

/* Tablet & Mobile */
@media (max-width: 992px) {

    /* Hide desktop header */
    .sk-header {
        display: none;
    }

    /* Show mobile header */
    .sk-mobile-header {
        display: block;
        background: #4c35c1;
        position: relative;
        z-index: 9999;
    }

    .sk-mobile-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
    }

    /* Hamburger */
    .sk-hamburger {
        display: flex;
        flex-direction: column;
        gap: 6px;
        cursor: pointer;
    }

    .sk-hamburger span {
        width: 26px;
        height: 3px;
        background: #ffffff;
        border-radius: 2px;
    }

    /* Hide checkbox */
    #sk-menu-toggle {
        display: none;
    }

    /* Sidebar */
    .sk-sidebar {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: #4c35c1;
        padding: 30px 25px;
        transition: 0.4s ease;
        z-index: 10000;
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    /* Open Sidebar */
    #sk-menu-toggle:checked ~ .sk-sidebar {
        right: 0;
    }

    /* Overlay */
    .sk-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        opacity: 0;
        pointer-events: none;
        transition: 0.3s;
    }

    #sk-menu-toggle:checked ~ .sk-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    /* Close Button */
    .sk-close {
        font-size: 24px;
        color: #ffffff;
        cursor: pointer;
        align-self: flex-end;
    }

    /* Sidebar Menu */
    .sk-sidebar-menu {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .sk-sidebar-menu a {
        color: #ffffff;
        text-decoration: none;
        font-size: 16px;
        font-weight: 600;
    }

    /* Auth Links */
    .sk-sidebar-auth {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-top: auto;
    }

    .sk-sidebar-auth a {
        text-align: center;
        padding: 12px;
        border-radius: 30px;
        background: #ffffff;
        color: #4c35c1;
        font-weight: 700;
        text-decoration: none;
    }
}

/* Responsive */
/* --- Pixel Perfect Educational Hero Responsive Adjustments --- */

/* 1. Desktop Polish (Animation) */
@media (min-width: 1025px) {
    .sk-badge {
        animation: sk-float 6s ease-in-out infinite;
    }
    .sk-badge-trusted {
        animation-delay: 2s;
    }
}

@keyframes sk-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* 2. Tablets (Re-stacking and Badge Scaling) */
@media (max-width: 1024px) {
    .sk-hero-layout {
        gap: 40px !important;
        margin-top: 40px !important;
    }

    .sk-hero-text h1 {
        font-size: 42px !important;
        br { display: none; } /* Flatten title for better flow on tablet */
    }

    .sk-hero-text p {
        max-width: 600px;
        margin: 0 auto 30px auto !important;
    }

    .sk-badge {
        scale: 0.8 !important; /* Unified scaling */
    }

    .sk-badge-awards {
        left: -10px !important;
    }

    .sk-badge-trusted {
        right: -10px !important;
    }
}

/* 3. Standard Mobile (Viewport Safety) */
@media (max-width: 768px) {
    .sk-login-brand{
        display: none;
    }
    .sk-hero-wrapper {
        padding: 40px 0 !important;
    }

    .sk-image-mask {
        max-width: 320px !important;
        margin-bottom: 20px !important;
    }

    .sk-badge-awards {
        bottom: 15% !important;
        padding: 10px 15px !important;
    }

    .sk-badge-trusted {
        bottom: 0% !important;
        right: 0 !important;
        padding: 12px !important;
    }

    .sk-hero-text h1 {
        font-size: 34px !important;
    }
}

/* 4. Small Mobile Devices (The "Overlapping" Fix) */
@media (max-width: 480px) {
    .sk-hero-visual {
        margin-bottom: 30px !important;
    }
    .sk-hero-layout{
        display: flex;
        flex-direction: column;
        padding: 20px;
    }

    .sk-image-mask {
        max-width: 280px !important;
    }

    /* Move badges to prevent content clutter */
    .sk-badge-awards {
        left: -5% !important;
        bottom: 5% !important;
        scale: 0.75 !important;
    }


    /* Alternatively, if you want to keep Trusted, use this: */
    /* .sk-badge-trusted { scale: 0.7; right: -5%; bottom: -5%; } */

    .sk-hero-text h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    .sk-btn-white {
        padding: 15px 30px !important;
    }
}

/* 5. Extra Small Phones */
@media (max-width: 360px) {
    .sk-hero-text h1 {
        font-size: 24px !important;
    }
    
    .sk-badge-awards {
        scale: 0.65 !important;
        left: -15% !important;
    }
}
/* --- Pixel Perfect Partners Responsive Adjustments --- */

/* 1. Desktop Polish */
@media (min-width: 1025px) {
    .brand {
        transition: opacity 0.3s ease, transform 0.3s ease;
        cursor: pointer;
    }
    .brand:hover {
        opacity: 1;
        transform: translateY(-2px);
    }
}

/* 2. Tablets & Small Laptops */
@media (max-width: 1024px) {
    .partners {
        padding: 50px 5% !important;
    }
    
    .logo-grid {
        gap: 30px !important; /* Tighten the gap to keep them on one line longer */
        flex-wrap: wrap; /* Safety fallback */
    }

    .brand {
        font-size: 20px !important;
    }
}

/* 3. Standard Mobile (Grid Break) */
@media (max-width: 768px) {
    .partners {
        padding: 40px 20px !important;
    }

    .partners p {
        font-size: 0.95rem;
        line-height: 1.4;
        margin-bottom: 20px;
    }

    .logo-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr); /* 3x2 grid */
        gap: 25px !important;
        margin-top: 20px !important;
    }

    .brand {
        font-size: 18px !important;
    }
    
    .boxed {
        padding: 3px 10px !important;
        border-width: 1.5px !important;
    }
}

/* 4. Small Mobile Devices (The "Thumb" View) */
@media (max-width: 480px) {
    .logo-grid {
        grid-template-columns: repeat(2, 1fr); /* 2x3 grid for better legibility */
        gap: 20px 10px !important;
    }

    .brand {
        font-size: 16px !important;
    }

    .partners p {
        font-size: 0.85rem;
    }
}

/* 5. Extra Small Phones */
@media (max-width: 360px) {
    .logo-grid {
        gap: 15px !important;
    }
    
    .brand {
        font-size: 14px !important;
    }
}
/* --- Pixel Perfect Testimonial Slider Responsive Adjustments --- */

/* 1. Large Screen Refinement (Nav Position) */
@media (min-width: 1200px) {
    .sk-testimonial-nav {
        left: 440px !important; /* Precision alignment with image edge */
    }
}

/* 2. Tablets & Small Laptops */
@media (max-width: 1024px) {
    .sk-testimonial-heading {
        font-size: 32px !important;
        max-width: 100% !important;
    }

    .sk-testimonial-img {
        flex: 0 0 320px !important; /* Scale image down */
    }

    .sk-testimonial-img img {
        height: 380px !important;
    }

    .sk-testimonial-slider-box {
        height: 400px !important;
    }

    .sk-testimonial-nav {
        left: 380px !important;
    }
}

/* 3. Standard Mobile (Layout Break) */
@media (max-width: 768px) {
    .sk-testimonial-wrapper {
        padding: 60px 20px !important;
    }

    /* Stack Header Stats */
    .sk-testimonial-header {
        align-items: center !important;
        text-align: center;
        margin-bottom: 40px !important;
    }

    .sk-testimonial-stats {
        margin-top: 20px;
        justify-content: center;
        width: 100%;
    }

    .sk-stat-num {
        font-size: 36px !important;
        padding-right: 15px !important;
    }

    /* Stack Slider Content */
    .sk-testimonial-slide {
        flex-direction: column !important;
        gap: 30px !important;
        transform: translateX(20px); /* Smaller entry animation for mobile */
    }

    .sk-testimonial-img {
        width: 100% !important;
        flex: none !important;
    }

    .sk-testimonial-img img {
        height: 300px !important;
        border-radius: 12px !important;
    }

    .sk-testimonial-content {
        text-align: center;
    }

    .sk-testimonial-text {
        font-size: 17px !important;
        margin-bottom: 20px !important;
    }

    /* Move Nav to Center Bottom */
    .sk-testimonial-nav {
        position: relative !important;
        left: 0 !important;
        bottom: 0 !important;
        justify-content: center;
        margin-top: 30px;
    }

    .sk-testimonial-slider-box {
        height: auto !important; /* Allow content to dictate height */
        display: flex;
        flex-direction: column;
    }
}

/* 4. Small Mobile Devices (iPhone / Android) */
@media (max-width: 480px) {
    .sk-testimonial-heading {
        font-size: 26px !important;
    }

    .sk-testimonial-stats {
        gap: 20px !important;
    }

    .sk-stat-num {
        font-size: 28px !important;
    }

    .sk-testimonial-img img {
        height: 250px !important;
    }

    .sk-arrow {
        width: 44px !important;
        height: 44px !important;
        font-size: 18px !important;
        border-color: #000; /* Easier to see on light backgrounds */
    }
}

/* 5. Accessibility & Interaction */
@media (hover: hover) {
    .sk-arrow:hover {
        background: #ffffff00 !important;
        color: #fff !important;
        transform: scale(1.1);
    }
}
.sk-bar-flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* padding: 15px 320px;
    flex-direction: row;
    gap: 58px;
    margin-left: -170px; */
}

.sk-bar-item {
    display: flex;
    align-items: center;
    gap: 10px; /* Icon aur text ke beech ka fasla */
    font-family: 'Outfit', sans-serif; /* Aapka preferred font */
    font-weight: 500;
}

.sk-real-icon {
    color: #ffffff; /* Blue color jo aapke theme mein hai */
    font-size: 30px;
    vertical-align: middle;
}
/* Fix for invisible slides on stack */
@media (max-width: 768px) {
    /* When stacked, absolute positioning can hide content */
    .sk-testimonial-slide {
        position: relative !important;
        display: none;
    }
    
    #sk-slide-1:checked ~ .sk-testimonial-slider-box .sk-slide-content-1,
    #sk-slide-2:checked ~ .sk-testimonial-slider-box .sk-slide-content-2,
    #sk-slide-3:checked ~ .sk-testimonial-slider-box .sk-slide-content-3 {
        display: flex !important;
    }
}
/* --- Pixel Perfect About Hero Responsive Adjustments --- */

/* 1. Large Screen & Desktop (Safety Check) */
@media (min-width: 1400px) {
    .sk-trusted-badge {
        right: -60px !important; /* Prevents it from going too far off on huge screens */
        transform: none !important;
    }
}

/* 2. Tablets & Small Laptops */
@media (max-width: 1199px) {
    .sk-about-grid {
        gap: 40px !important;
    }

    .sk-trusted-badge {
        right: -20px !important;
        scale: 0.9;
    }

    .sk-main-title {
        font-size: 44px !important;
    }
}

/* 3. Medium Tablets (Switch to Stacked) */
@media (max-width: 992px) {
    .sk-about-header-bg {
        padding: 60px 20px 120px !important;
    }

    .sk-about-content-bg {
        margin-top: -80px !important;
        padding-bottom: 60px !important;
    }

    .sk-about-grid {
        grid-template-columns: 1fr !important;
        gap: 120px !important; /* Space for the floating badge */
    }

    .sk-img {
        height: 500px !important;
        width: 100%;
    }

    .sk-trusted-badge {
        bottom: -60px !important;
        right: 50% !important;
        transform: translateX(50%) !important; /* Center the badge on mobile */
        scale: 1;
    }

    .sk-about-text {
        padding-top: 0 !important; /* Remove huge desktop padding */
        text-align: center;
    }

    .sk-about-stats {
        justify-content: center;
        flex-wrap: wrap; /* Safety for small screens */
    }
}

/* 4. Standard Mobile Devices */
@media (max-width: 768px) {
    .sk-main-title {
        font-size: 32px !important;
    }

    .sk-story-title {
        font-size: 28px !important;
    }

    .sk-img {
        height: 400px !important;
    }

    .sk-about-stats {
        gap: 20px !important;
    }

    .sk-stat-val {
        font-size: 28px !important;
    }
}

/* 5. Small Mobile (iPhone SE / Small Androids) */
@media (max-width: 480px) {
    .sk-about-header-bg {
        padding: 40px 0 100px !important;
    }

    .sk-main-title {
        font-size: 26px !important;
    }

    .sk-trusted-badge {
        width: 240px !important;
        padding: 15px 20px !important;
    }

    .sk-badge-count {
        font-size: 12px !important;
    }

    .sk-about-stats {
        display: grid !important;
        grid-template-columns: 1fr 1fr; /* 2x2 grid for stats */
        gap: 30px !important;
    }
    
    .sk-stat-box:last-child {
        grid-column: span 2; /* Center the 100% stat */
    }
}
/* --- Pixel Perfect Offer Section Responsive Adjustments --- */

/* 1. Large Screen & Desktop (Animation) */
@media (min-width: 1025px) {
    .sk-offer-visual:hover .sk-circle-bg {
        transform: scale(1.05) rotate(5deg);
        transition: 0.6s ease;
    }
    .sk-offer-visual:hover .sk-black-circle-bg {
        transform: translate(-10px, -10px);
        transition: 0.4s ease;
    }
}

/* 2. Tablets & Small Laptops */
@media (max-width: 1024px) {
    .sk-offer-grid {
        gap: 40px !important;
        display: flex;
    }
.sk-img-back {
    margin-top: -100px;
}
    .sk-offer-title {
        font-size: 36px !important;
    }

    .sk-circle-bg {
        width: 300px !important;
        height: 300px !important;
        left: 20px !important;
    }

    .sk-img-front {
        width: 250px !important;
        margin-left: 30px !important;
    }
}

/* 3. Medium Tablets (Switch to Stacked) */
@media (max-width: 992px) {
    .sk-offer-section {
        padding-bottom: 60px !important;
    }

    .sk-offer-grid {
        grid-template-columns: 1fr !important;
        text-align: center;
    }

    .sk-offer-visual {
        justify-content: center;
        height: 400px !important;
        margin-bottom: 40px;
    }

    .sk-circle-bg {
        top: 50px !important;
        left: 50% !important;
        transform: translateX(-80%) !important;
    }

    .sk-black-circle-bg {
        left: 50% !important;
        transform: translateX(40%) !important;
    }

    .sk-offer-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .sk-offer-list {
        justify-content: center;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* 4. Standard Mobile Devices */
@media (max-width: 768px) {
    .sk-offer-grid{
        display: block;
    }
    .sk-offer-title {
        font-size: 30px !important;
    }

    /* Simplify visuals for mobile performance */
    .sk-img-back {
        width: 280px !important;
        border-radius: 80px 0 0 0 !important;
    }

    .sk-img-front {
        width: 280px !important;
        margin-left: -40px !important; /* Overlap them more tightly */
    }

    .sk-circle-bg {
        width: 220px !important;
        height: 220px !important;
    }

    .sk-offer-list {
        grid-template-columns: 1fr !important; /* Stack bullets for legibility */
        text-align: left;
        display: inline-block;
    }

    .sk-offer-list li {
        margin-bottom: 10px;
    }
        .sk-black-circle-bg{
            transform: translateX(0%) !important;
        }
}

/* 5. Small Mobile (The "Callout" Fix) */
@media (max-width: 480px) {
    .sk-offer-title {
        font-size: 26px !important;
    }

    .sk-offer-visual {
        height: 320px !important;
    }

    .sk-black-circle-bg {
        width: 80px !important;
        height: 80px !important;
    }

    .sk-questions-callout {
        padding: 20px !important;
        flex-direction: column;
        gap: 20px;
    }

    .sk-btn-get-started {
        width: 100%;
        text-align: center;
    }
}
/* --- Pixel Perfect Instructor Section Responsive Adjustments --- */

/* 1. Desktop Polish & Hover Effects */
@media (min-width: 1025px) {
    .sk-btn-black:hover {
        background-color: #6343ef;
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(99, 67, 239, 0.2);
    }

    .sk-circle-graphic:hover img {
        transform: scale(1.05);
        transition: transform 0.5s ease;
    }

    .sk-floating-badge {
        animation: sk-badge-float 4s ease-in-out infinite;
    }
}

@keyframes sk-badge-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* 2. Tablets & Small Laptops */
@media (max-width: 1024px) {
    .sk-instructor-grid {
        gap: 50px !important;
    }

    .sk-instructor-title {
        font-size: 38px !important;
    }

    .sk-circle-graphic {
        width: 400px !important;
        height: 400px !important;
    }
}

/* 3. Medium Tablets (Stacked Layout) */
@media (max-width: 992px) {
    .sk-instructor-section {
        padding: 60px 0 !important;
    }

    .sk-instructor-grid {
        /* Content above visual for better narrative flow here */
        display: flex !important;
        flex-direction: column !important;
        text-align: center;
    }

    .sk-instructor-title {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    .sk-instructor-visual {
        margin-top: 50px;
    }

    .sk-floating-badge {
        left: 50% !important;
        transform: translateX(-140%) !important; /* Offset to the side of the circle */
        bottom: 20px;
    }
}

/* 4. Standard Mobile Devices */
@media (max-width: 768px) {
    .sk-instructor-title {
        font-size: 32px !important;
    }

    .sk-circle-graphic {
        width: 320px !important;
        height: 320px !important;
    }

    .sk-instructor-desc {
        font-size: 15px !important;
    }

    .sk-floating-badge {
        padding: 10px 20px !important;
        transform: translateX(-120%) !important;
    }
}

/* 5. Small Mobile (The "Tight Space" Fix) */
@media (max-width: 480px) {
    .sk-instructor-title {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    .sk-circle-graphic {
        width: 280px !important;
        height: 280px !important;
    }

    .sk-floating-badge {
        left: 0 !important;
        transform: none !important;
        margin-top: -30px;
        align-self: center;
        width: fit-content;
    }

    .sk-btn-black {
        width: 100%; /* Full width tap target */
        text-align: center;
    }
}
/* --- Pixel Perfect Courses Hero Responsive Adjustments --- */

/* 1. Tablet & Small Laptop (Refine Grid) */
@media (max-width: 1100px) {
    .sk-floating-categories {
        grid-template-columns: repeat(3, 1fr); /* 3x2 Grid */
        margin-top: -80px !important;
    }
    
    .sk-hero-cat {
        border-right: none;
        border-bottom: 1px solid #f1f5f9;
    }

    /* Remove bottom border on the last row */
    .sk-hero-cat:nth-child(n+4) {
        border-bottom: none;
    }
}

/* 2. Medium Tablet (Title Scaling) */
@media (max-width: 992px) {
    .sk-hero-purple-bg {
        padding: 80px 0 140px !important;
    }

    .sk-hero-title {
        font-size: 42px !important;
    }
}

/* 3. Standard Mobile (Grid & Icon Scaling) */
@media (max-width: 768px) {
    .sk-hero-title {
        font-size: 34px !important;
    }

    .sk-floating-categories {
        grid-template-columns: repeat(2, 1fr); /* 2x3 Grid */
        padding: 20px 0 !important;
        margin-top: -60px !important;
    }

    /* Reset borders for 2-column layout */
    .sk-hero-cat {
        border-bottom: 1px solid #f1f5f9 !important;
    }

    .sk-hero-cat:nth-child(odd) {
        border-right: 1px solid #f1f5f9 !important;
    }

    .sk-hero-cat:nth-last-child(-n+2) {
        border-bottom: none !important;
    }

    .sk-cat-icon {
        width: 50px !important;
        height: 50px !important;
    }
}

/* 4. Small Mobile (The "Readability" Fix) */
@media (max-width: 480px) {
    .sk-hero-purple-bg {
        padding: 60px 20px 100px !important;
    }

    .sk-hero-title {
        font-size: 28px !important;
        br { display: none; } /* Allow text to flow naturally */
    }

    .sk-hero-cat h4 {
        font-size: 13px !important;
        br { display: none; } /* Prevent jagged line breaks in icons */
    }

    .sk-cat-icon {
        margin-bottom: 10px !important;
    }
}

/* 5. Interactivity Polish */
@media (hover: hover) {
    .sk-hero-cat {
        transition: background-color 0.3s ease;
        cursor: pointer;
    }
    .sk-hero-cat:hover {
        background-color: #f0f9ff;
    }
    .sk-hero-cat:hover .sk-cat-icon {
        background-color: #ffffff;
        transform: translateY(-5px);
        transition: 0.3s ease;
    }
}
/* --- Pixel Perfect Detail Hero Responsive Adjustments --- */

/* 1. Desktop Polish */
@media (min-width: 1025px) {
    .sk-detail-banner {
        /* Adds a subtle parallax-like feel */
        background-attachment: fixed;
    }
}

/* 2. Tablets & Small Laptops */
@media (max-width: 1200px) {
    .sk-stats-grid {
        max-width: 95% !important; /* Prevents edge-hitting */
    }
}

/* 3. Medium Tablets (Grid Refinement) */
@media (max-width: 1024px) {
    .sk-detail-banner {
        padding: 80px 0 120px !important;
    }

    .sk-detail-title {
        font-size: 36px !important;
        max-width: 100% !important;
    }

    .sk-stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        padding: 25px 15px !important;
    }

    /* Remove specific borders that break symmetry in 3-column mode */
    .sk-stat-item {
        border-right: none !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        padding: 15px 10px !important;
    }

    .sk-stat-item:nth-child(n+4) {
        border-bottom: none;
    }
}

/* 4. Standard Mobile (2-Column Grid) */
@media (max-width: 768px) {
    .sk-detail-banner {
        text-align: center;
    }

    .sk-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        margin-top: -40px !important; /* Less overlap for smaller screens */
    }

    /* Symmetry for 2-column layout */
    .sk-stat-item:nth-child(odd) {
        border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
    }

    .sk-stat-item:nth-child(4) {
        border-bottom: none !important;
    }

    /* Make the 5th item span both columns for balance */
    .sk-stat-item:last-child {
        grid-column: span 2;
        justify-content: center;
        border-right: none !important;
    }
}

/* 5. Small Mobile (List Style) */
@media (max-width: 480px) {
    .sk-detail-title {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    .sk-detail-banner {
        padding: 60px 0 100px !important;
    }

    .sk-stat-info strong {
        font-size: 13px !important;
    }

    .sk-stat-icon img {
        width: 22px !important;
        height: 22px !important;
    }

    /* Optional: switch to 1-column if text is too long */
    /* .sk-stats-grid { grid-template-columns: 1fr !important; } */
}
/* --- Pixel Perfect Course Info & Tabs Responsive Adjustments --- */

/* 1. Tab List Mobile Optimization */
@media (max-width: 992px) {
    .sk-tab-list {
        justify-content: flex-start !important; /* Align left for scrolling */
        overflow-x: auto; /* Enable horizontal swipe on mobile */
        white-space: nowrap;
        padding: 10px 0 20px !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Hide scrollbar Firefox */
    }

    .sk-tab-list::-webkit-scrollbar {
        display: none; /* Hide scrollbar Chrome/Safari */
    }

    .sk-tab-btn {
        flex: 0 0 auto; /* Prevent buttons from shrinking */
        padding: 10px 20px !important;
        font-size: 13px !important;
    }

    .sk-tab-content {
        margin-top: 30px !important;
    }
    .sk-course-info-section{
        padding: 50px;
    }
}

/* 2. Content Typography Scaling */
@media (max-width: 768px) {
    .sk-section-title {
        font-size: 28px !important;
    }

    .sk-sub-title {
        font-size: 20px !important;
    }

    .sk-body-text {
        font-size: 15px !important;
    }
    
    .sk-course-info-section {
        padding: 40px 0 !important;
    }
    .sk-course-info-section{
        padding: 20px 0 !important;
    }
}

/* 3. Course Description Grid (The Image Cards) */
@media (max-width: 1024px) {
    .sk-desc-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 650px) {
    .sk-desc-grid {
        grid-template-columns: 1fr !important; /* Stack cards vertically */
    }

    .sk-desc-image-wrapper {
        height: 350px !important;
    }

    .sk-desc-name {
        font-size: 20px !important;
    }
}

/* 4. Interactive Polish (Non-JS Hover) */
@media (hover: hover) {
    .sk-tab-btn:hover {
        background-color: #deeaf0;
    }

    .sk-desc-image-wrapper:hover img {
        transform: scale(1.08);
        transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
    }

    .sk-desc-image-wrapper:hover .sk-desc-overlay {
        background: linear-gradient(to bottom, rgba(15, 23, 42, 0.2) 0%, rgba(94, 59, 238, 0.8) 100%);
        transition: 0.4s ease;
    }
}
/* --- Pixel Perfect FAQ Responsive Adjustments --- */

/* 1. Header & Typography Scaling */
@media (max-width: 1024px) {
    .sk-faq-hero {
        padding: 60px 0 100px !important;
    }

    .sk-faq-title {
        font-size: 42px !important;
    }

    .sk-faq-grid {
        gap: 30px !important;
    }
}

/* 2. Sidebar to Horizontal Nav (Mobile) */
@media (max-width: 768px) {
    .sk-faq-sidebar {
        background-color: transparent !important;
        max-width: 100% !important;
    }

    .sk-faq-nav {
        display: flex !important;
        overflow-x: auto; /* Horizontal swipe for categories */
        gap: 10px;
        padding-bottom: 15px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .sk-faq-nav::-webkit-scrollbar {
        display: none;
    }

    .sk-nav-item {
        flex: 0 0 auto;
        border-radius: 50px !important; /* Pill shape for mobile */
        border: 1px solid #e2e8f0 !important;
        background-color: #ffffff;
        padding: 10px 20px !important;
        font-size: 13px !important;
    }

    .sk-arrow {
        display: none; /* Remove arrows to save space on mobile pills */
    }

    #cat-enroll:checked ~ .sk-faq-sidebar label[for="cat-enroll"],
    #cat-tech:checked ~ .sk-faq-sidebar label[for="cat-tech"],
    #cat-grading:checked ~ .sk-faq-sidebar label[for="cat-grading"] {
        border-color: #5e3bee !important;
    }
    .sk-faq-grid {
        grid-template-columns: 1fr;
    }
    .sk-faq-content{
        padding: 50px;
    }
}

/* 3. Accordion Polish */
@media (max-width: 600px) {
    .sk-faq-title {
        font-size: 32px !important;
    }

    .sk-accordion-header {
        font-size: 15px !important;
        padding: 20px 0 !important;
    }

    .sk-accordion-body p {
        font-size: 14px;
        line-height: 1.6;
    }

    .sk-plus {
        font-size: 20px !important;
    }
    .sk-faq-content{
        padding: 20px;
    }
}

/* 4. Smooth Content Expansion */
.sk-accordion-body {
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease !important;
}

/* 5. Desktop Interaction */
@media (min-width: 1025px) {
    .sk-nav-item:hover {
        padding-left: 35px !important; /* Subtle "push" effect */
    }
    
    .sk-accordion-header:hover {
        color: #5e3bee;
    }
}
/* --- Pixel Perfect Blog Hero Responsive Adjustments --- */

/* 1. Desktop Polish */
@media (min-width: 1025px) {
    .sk-blog-main-title {
        /* Subtle text shadow for better depth on solid purple */
        text-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
}

/* 2. Tablets & Small Laptops */
@media (max-width: 1024px) {
    .sk-blog-hero {
        padding: 80px 0 120px !important;
    }

    .sk-blog-main-title {
        font-size: 44px !important;
        max-width: 500px;
    }
}

/* 3. Medium Tablets */
@media (max-width: 768px) {
    .sk-blog-hero {
        text-align: center; /* Center-align for better mobile balance */
        padding: 60px 0 100px !important;
    }

    .sk-blog-main-title {
        font-size: 36px !important;
    }

    .sk-blog-overline {
        margin-bottom: 10px;
    }
    .sk-blog-listing{
        padding: 50px 0;
    }
}

/* 4. Small Mobile (The "Tight Spacing" Fix) */
@media (max-width: 480px) {
    .sk-blog-hero {
        padding: 50px 0 80px !important;
    }

    .sk-blog-main-title {
        font-size: 28px !important;
        line-height: 1.2 !important;
        max-width: 100%;
    }

    .sk-blog-overline {
        font-size: 10px !important;
        letter-spacing: 0.5px !important;
    }
    .sk-blog-listing{
        padding: 20px 0;
    }
}

/* 5. Decorative Element (Optional Background Pattern) */
.sk-blog-hero {
    position: relative;
    overflow: hidden;
}

.sk-blog-hero::after {
    content: "";
    position: absolute;
    top: -10%;
    right: -5%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    z-index: 1;
}
/* --- Pixel Perfect Blog Detail Hero Responsive Adjustments --- */

/* 1. Desktop Polish & Parallax Feel */
@media (min-width: 1025px) {
    .sk-blog-detail-hero {
        background-attachment: fixed; /* Parallax effect for desktop */
    }
    
    .sk-blog-detail-title {
        transition: transform 0.3s ease;
    }
}

/* 2. Tablets & Small Laptops */
@media (max-width: 1024px) {
    .sk-blog-detail-hero {
        min-height: 450px !important;
    }

    .sk-blog-detail-title {
        font-size: 48px !important;
        max-width: 800px;
    }
}

/* 3. Medium Tablets (Readability Focus) */
@media (max-width: 768px) {
    .sk-blog-detail-hero {
        min-height: 400px !important;
        background-attachment: scroll; /* Disable parallax for mobile performance */
    }

    .sk-blog-detail-title {
        font-size: 36px !important;
        line-height: 1.2 !important;
    }

    .sk-blog-meta-top {
        margin-bottom: 15px !important;
    }

    .sk-detail-cat, .sk-detail-author {
        font-size: 11px !important;
    }
}

/* 4. Small Mobile (The "Aspect Ratio" Fix) */
@media (max-width: 480px) {
    .sk-blog-detail-hero {
        min-height: 350px !important;
    }

    .sk-blog-hero-overlay {
        background: rgba(0, 0, 0, 0.75); /* Darken slightly more for smaller screens */
    }

    .sk-blog-detail-title {
        font-size: 28px !important;
    }

    .sk-detail-date {
        font-size: 13px !important;
    }
    
    .sk-meta-divider {
        margin: 0 5px !important;
    }
}

/* 5. Style Refinements for Meta Text */
.sk-blog-meta-top {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: #ffffff;
}

.sk-detail-cat {
    background: #5e3bee;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.sk-detail-author {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    opacity: 0.9;
}

.sk-blog-detail-title {
    color: #ffffff;
    font-size: 56px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 25px;
}

.sk-detail-date {
    color: #ffffff;
    font-size: 14px;
    opacity: 0.7;
    font-weight: 500;
}

/* 2. Tablet & Large Phone Adjustments */
@media (max-width: 992px) {
    .sk-article-wrapper {
        max-width: 90% !important;
        padding: 40px !important;
    }

    .sk-author-name {
        font-size: 28px !important;
    }
}

/* 3. Mobile Refinement (768px and below) */
@media (max-width: 768px) {
    .sk-article-wrapper {
        margin-top: -60px !important; /* Slightly more overlap for impact */
        padding: 30px 20px !important;
        border-radius: 8px;
    }

    .sk-article-h2 {
        font-size: 24px !important;
        line-height: 1.3;
    }

    /* Author Card Mobile Stack */
    .sk-author-card {
        flex-direction: column !important;
        text-align: center;
        gap: 20px !important;
        padding: 35px 25px !important;
    }

    .sk-author-img {
        width: 100px !important;
        height: 100px !important;
    }

    .sk-author-info p {
        font-size: 14px !important;
    }

    /* Quote Mobile Polish */
    .sk-article-quote {
        flex-direction: column !important;
        padding: 25px !important;
        gap: 15px !important;
    }
    
    .sk-quote-icon svg {
        width: 32px;
        height: 32px;
    }
    .sk-blog-main-content{
        padding-bottom: 50px;
    }
    .sk-related-blogs{
        padding: 50px 0;
    }
}

/* 4. Small Mobile (480px) */
@media (max-width: 480px) {
    .sk-article-body p {
        font-size: 15px !important; /* Slightly smaller text for small screens */
        line-height: 1.7;
    }

    .sk-article-wrapper {
        margin-top: -40px !important;
    }

    .sk-author-name {
        font-size: 24px !important;
    }
    .sk-related-blogs{
        padding: 20px 0;
    }
    .sk-blog-main-content{
        padding-bottom: 20px;
    }
}

/* 5. Typography Polish */
.sk-article-body p:first-of-type::first-letter {
    float: left;
    font-size: 48px;
    line-height: 40px;
    padding-top: 4px;
    padding-right: 8px;
    padding-left: 3px;
    font-weight: 800;
    color: #5e3bee;
}


/* 2. Tablet Refinement (1024px and below) */
@media (max-width: 1024px) {
    .sk-contact-grid {
        margin-top: -60px !important;
        gap: 60px !important;
    }

    .sk-contact-info {
        padding-top: 80px !important;
    }


    .sk-signature-block {
        display: flex;
        flex-direction: column;
    }

    .sk-contact-form-wrapper {
        max-width: 600px !important; /* Slightly wider for tablets */
        width: 100%;
    }
}

/* 3. Mobile Polish (768px and below) */
@media (max-width: 768px) {
    .sk-contact-hero {
        padding: 60px 0 100px !important;
    }

    .sk-contact-title {
        font-size: 42px !important;
        text-align: center;
    }

    .sk-contact-heading {
        font-size: 32px !important;
    }

    .sk-contact-form-wrapper {
        padding: 35px 25px !important;
    }
    .sk-contact-grid{
        grid-template-columns: 1fr;
    }

    .sk-form-footer {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .sk-contact-body{
        padding-bottom: 50px;
    }
    .sk-details-grid{
        grid-template-columns: 1fr;
    }
    .sk-location-section{
        padding: 50px 0;
    }
}

/* 4. Small Mobile (480px) */
@media (max-width: 480px) {
    .sk-contact-title {
        font-size: 32px !important;
    }

    .sk-contact-heading {
        font-size: 26px !important;
    }

    .sk-btn-submit {
        padding: 15px !important;
        font-size: 15px;
    }

    .sk-sig-img {
        height: 50px !important;
    }
    .sk-contact-body{
        padding-bottom: 20px;
    }
    .sk-location-section{
        padding: 20px 0;
    }
}

/*  */
.sk-form-footer {
    display: flex;
    flex-direction: column;
    align-items: center; /* Poore footer ko center karne ke liye */
    gap: 20px;
    margin-top: 15px;
}

.sk-checkbox-container {
    display: flex; /* Sab ko ek line mein lane ke liye */
    align-items: center; /* Checkbox aur text ko vertically center karne ke liye */
    justify-content: center;
    gap: 10px; /* Checkbox aur text ke beech ka fasla */
    cursor: pointer;
    font-size: 14px;
    color: #666;
    user-select: none;
    width: 100%;
}

/* Checkbox ka size fix karne ke liye */
.sk-checkbox-container input {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

.sk-checkbox-text {
    line-height: 1; /* Text ko line ke beech mein rakhne ke liye */
}

.sk-btn-submit {
    width: 100%;
    background: #000;
    color: #fff;
    padding: 15px;
    border: none;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.3s;
}

.sk-btn-submit:hover {
    background: #333;
}


/* home page responsive */
/* =====================================================
   GLOBAL RESPONSIVE SYSTEM
===================================================== */

*{
    box-sizing:border-box;
}

img{
    max-width:100%;
    height:auto;
}

/* containers safe width */
.sk-main-container,
.sk-hero-container,
.sk-course-grid-container,
.sk-promo-container,
.sk-personal-container,
.sk-testimonial-container,
.sk-trending-container{
    width:100%;
    max-width:1400px;
    margin:auto;
    padding-left:20px;
    padding-right:20px;
}


/* =====================================================
   TABLET (1024px)
===================================================== */

@media (max-width:1024px){

.sk-hero-layout{
    flex-direction:column;
    gap:40px;
    text-align:center;
}

.sk-category-grid{
    grid-template-columns:repeat(3,1fr);
}

.sk-course-grid-layout{
    grid-template-columns:repeat(2,1fr);
}

.sk-trending-grid{
    grid-template-columns:repeat(2,1fr);
}

.sk-personal-container{
    flex-direction:column;
    gap:40px;
}

.sk-cta-flex{
    flex-direction:column;
    text-align:center;
    gap:25px;
}

}


/* =====================================================
   MOBILE (768px)
===================================================== */

@media (max-width:768px){

/* hide desktop header */
.sk-header{
    display:none;
}

/* show mobile header */
.sk-mobile-header{
    display:block;
}

/* HERO */
.sk-hero-layout{
    flex-direction:column;
    text-align:center;
}

.sk-hero-text h1{
    font-size:32px;
    line-height:1.3;
}

/* partners */
.logo-grid{
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

/* categories */
.sk-category-grid{
    grid-template-columns:1fr 1fr;
}

/* promo */
.sk-promo-container{
    flex-direction:column;
    gap:20px;
}

/* courses */
.sk-course-grid-layout{
    grid-template-columns:1fr;
}

/* trending */
.sk-trending-grid{
    grid-template-columns:1fr;
}

/* testimonial */
.sk-testimonial-slide{
    flex-direction:column;
    text-align:center;
}

/* personal section */
.sk-personal-container{
    flex-direction:column;
}

.sk-personal-img-sub{
    display:none;
}

/* footer */
.sk-footer-grid{
    grid-template-columns:1fr 1fr;
    gap:30px;
}

}


/* =====================================================
   SMALL MOBILE (480px)
===================================================== */

@media (max-width:480px){

h1{
    font-size:26px;
}

h2{
    font-size:22px;
}

p{
    font-size:15px;
}

/* single column everywhere */
.sk-category-grid,
.sk-footer-grid{
    grid-template-columns:1fr;
}

/* buttons full width */
.sk-btn-solid,
.sk-btn-outline,
.sk-btn-white{
    width:100%;
    text-align:center;
}

/* reduce spacing */
section{
    padding-top:50px;
    padding-bottom:50px;
}

}


/*  */


/* ===================================
   MOBILE ONLY FIXED WIDTH (1200px)
   Desktop stays 1400px
   =================================== */

@media (max-width: 991px) {

    html, body {
        min-width: 1200px;
        width: 1200px;
        margin: 0 auto;
        overflow-x: auto;
    }

}