/* coding-for-kids.css — page-specific styles for resources/views/codingforkids.blade.php
   Reuses site tokens/utilities from style.css (--Primary, font-48, Mfont-32, theme-btn,
   btn-white, rounded-sm, .hidden/.from-bottom/.from-top/.appear scroll-reveal). */

html {
    scroll-behavior: smooth;
}

/* style.css's generic .container carries its own vertical padding/margin (a base rule plus
   several breakpoint-specific overrides, e.g. margin-top/bottom:50px between 1280-1600px)
   which stacks with each section's own padding below, inflating the gap between sections.
   Neutralized here since this file only loads on this page and every section here already
   controls its own vertical rhythm explicitly. */
.container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ===== Hero ===== */

.cfk-hero-img-col {
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cfk-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cfk-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--Primary, #fb5850);
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s ease;
}

.cfk-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

.cfk-play-btn svg {
    width: 26px;
    height: 26px;
}

.cfk-hero-subtitle {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
    font-size: 18px;
    margin-top: 10px;
}

.cfk-hero-desc {
    margin-top: 14px;
    margin-bottom: 22px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 16px;
    line-height: 1.6;
    max-width: 560px;
}

.cfk-hero-note {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    margin-top: 14px;
}

/* ===== Stats ===== */

.cfk-stats {
    padding: 50px 0;
}

.cfk-stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}

.cfk-stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 14px;
    padding: 16px 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cfk-stat-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.09);
}

.cfk-stat-item img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

.cfk-stat-item h3 {
    font-weight: bold;
    font-size: 20px;
    color: var(--Primary, #fb5850);
    margin: 0;
}

.cfk-stat-item span {
    font-weight: 600;
    font-size: 12px;
    color: #52595b;
}

/* ===== Popular courses (tabs) ===== */

.cfk-courses {
    padding: 40px 0 60px;
}

.cfk-courses-head {
    text-align: center;
    margin-bottom: 30px;
}

.cfk-courses-head h2 {
    font-weight: bold;
    font-size: 30px;
    color: #303030;
}

.cfk-courses-head span {
    font-size: 16px;
    color: #52595b;
}

.cfk-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0 0 34px;
    flex-wrap: wrap;
}

.cfk-tab-btn {
    border: none;
    background: #fff2ee;
    color: var(--Primary, #fb5850);
    font-weight: bold;
    font-size: 15px;
    padding: 10px 28px;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.cfk-tab-btn:hover {
    background: #ffe1d8;
}

.cfk-tab-btn.active {
    background: var(--Primary, #fb5850);
    color: #fff;
}

.cfk-course-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.cfk-course-card-link {
    text-decoration: none;
    display: block;
}

.cfk-course-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

.cfk-course-card-link:hover .cfk-course-card {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.1);
}

.cfk-course-media {
    position: relative;
}

.cfk-course-media > img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
}

.cfk-course-cert {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: linear-gradient(360deg, #000000 10%, rgba(0, 0, 0, 0) 95%);
}

.cfk-course-cert img {
    width: 22px;
    height: auto;
}

.cfk-course-cert h3 {
    font-weight: bold;
    font-size: 13px;
    color: #fff;
    margin: 0;
}

.cfk-course-cert h5 {
    font-weight: normal;
    font-size: 12px;
    color: #fff;
    margin: 2px 0 0;
}

.cfk-course-body {
    padding: 18px 20px 20px;
}

.cfk-course-body h4 {
    font-weight: bold;
    font-size: 17px;
    color: #303030;
    margin: 0 0 10px;
}

.cfk-hidden-content {
    display: none !important;
}

.cfk-age-badge {
    display: inline-block;
    font-weight: bold;
    font-size: 12px;
    color: #ff8f00;
    background: rgba(255, 143, 0, 0.12);
    border: 1px solid rgba(255, 143, 0, 0.15);
    border-radius: 100px;
    padding: 5px 14px;
    margin-bottom: 14px;
}

.cfk-course-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.cfk-view-details {
    font-weight: bold;
    font-size: 13px;
    text-transform: uppercase;
    color: var(--Primary, #fb5850);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cfk-view-details::after {
    content: "\2192";
    transition: transform 0.25s ease;
}

.cfk-course-card-link:hover .cfk-view-details::after {
    transform: translateX(4px);
}

/* ===== Guinness / AI banner images ===== */

.cfk-guinness {
    padding: 40px 0;
}

.cfk-guinness-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.cfk-guinness-item img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

/* ===== Why Cyber Square ===== */

.cfk-why {
    padding: 50px 0;
}

.cfk-why-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 40px;
}

.cfk-why-intro h2 {
    font-weight: bold;
    font-size: 30px;
    color: #303030;
    margin-bottom: 16px;
}

.cfk-why-intro h3 {
    font-weight: normal;
    font-size: 17px;
    line-height: 28px;
    color: #52595b;
    margin-bottom: 20px;
}

.cfk-know-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    color: var(--Primary, #fb5850);
    text-decoration: none;
}

.cfk-know-more svg {
    width: 18px;
    height: 18px;
    transition: transform 0.25s ease;
}

.cfk-know-more:hover svg {
    transform: translateX(4px);
}

.cfk-why-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 20px;
}

.cfk-why-item {
    background: #ffffff;
    border-radius: 16px;
    padding: 22px 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cfk-why-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}

.cfk-why-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ff8f00;
    border-radius: 14px;
    margin-bottom: 18px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.cfk-why-icon--2 { background: #d94a00; }
.cfk-why-icon--3 { background: #007ba8; }
.cfk-why-icon--4 { background: #739e00; }
.cfk-why-icon--5 { background: #964097; }
.cfk-why-icon--6 { background: #b3241d; }

.cfk-why-item h2 {
    font-weight: bold;
    font-size: 18px;
    color: #303030;
    margin: 0 0 8px;
}

.cfk-why-item h3 {
    font-weight: normal;
    font-size: 14px;
    line-height: 22px;
    color: #52595b;
    margin: 0;
}

/* ===== Projects ===== */

.cfk-projects {
    padding: 50px 0 60px;
    background: #fff7f6;
}

.cfk-projects-head {
    text-align: center;
    margin-bottom: 34px;
}

.cfk-projects-head h2 {
    font-weight: bold;
    font-size: 30px;
    color: #303030;
}

.cfk-projects-head span {
    font-size: 15px;
    color: #52595b;
}

.cfk-projects-carousel {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
}

.cfk-project-slide {
    flex: 0 0 320px;
    scroll-snap-align: start;
}

.cfk-project-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cfk-project-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.1);
}

.cfk-project-media {
    position: relative;
}

.cfk-project-media > img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.cfk-project-avatar {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.cfk-project-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cfk-project-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--Primary, #fb5850);
    cursor: pointer;
    transition: transform 0.25s ease;
}

.cfk-project-play svg {
    width: 22px;
    height: 22px;
}

.cfk-project-play:hover {
    transform: scale(1.1);
}

.cfk-project-body {
    padding: 16px 18px;
}

.cfk-project-body h4 {
    font-weight: bold;
    font-size: 16px;
    color: #303030;
    margin: 0 0 4px;
}

.cfk-project-body strong {
    font-weight: normal;
    font-size: 13px;
    color: #6d6d78;
}

.cfk-video-modal .modal-content {
    border-radius: 16px;
    overflow: hidden;
    border: none;
}

.cfk-video-modal .close_popup {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

/* ===== Meet Our CEO ===== */

.cfk-ceo {
    padding: 50px 0 60px;
}

.cfk-ceo-grid {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: 40px;
    align-items: center;
}

.cfk-ceo-photo {
    text-align: center;
}

.cfk-ceo-photo picture img {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.cfk-ceo-photo h3 {
    font-weight: bold;
    font-size: 20px;
    color: #303030;
    margin: 16px 0 10px;
}

.cfk-ceo-more {
    display: inline-block;
    font-weight: bold;
    font-size: 13px;
    text-transform: uppercase;
    color: var(--Primary, #fb5850);
    border: 1px solid var(--Primary, #fb5850);
    border-radius: 100px;
    padding: 8px 22px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.cfk-ceo-more:hover {
    background: var(--Primary, #fb5850);
    color: #fff;
}

.cfk-ceo-quote {
    background: #fff7f6;
    border-radius: 20px;
    padding: 34px 36px;
}

.cfk-ceo-quote picture img {
    margin-bottom: 12px;
}

.cfk-ceo-quote p {
    font-size: 15px;
    line-height: 26px;
    color: #52595b;
    margin: 0 0 16px;
}

.cfk-ceo-quote h5 {
    font-size: 15px;
    color: #303030;
    margin: 0;
}

/* ===== Associated Institutions (marquee) ===== */

.cfk-associated {
    padding: 50px 0;
    overflow: hidden;
}

.cfk-associated-heading {
    font-weight: bold;
    font-size: 30px;
    color: #303030;
    text-align: center;
    margin-bottom: 30px;
}

.cfk-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.cfk-marquee-track {
    display: flex;
    align-items: center;
    gap: 40px;
    width: max-content;
    animation: cfk-scroll 60s linear infinite;
}

.cfk-marquee:hover .cfk-marquee-track {
    animation-play-state: paused;
}

.cfk-marquee-item {
    flex: 0 0 auto;
    height: 60px;
    display: flex;
    align-items: center;
}

.cfk-marquee-item img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.7;
    transition: filter 0.25s ease, opacity 0.25s ease;
}

.cfk-marquee-item img:hover {
    filter: grayscale(0);
    opacity: 1;
}

@keyframes cfk-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .cfk-marquee-track {
        animation: none;
    }
}

/* ===== Global Offices ===== */

.cfk-offices {
    padding: 50px 0 60px;
}

.cfk-offices-heading {
    font-weight: bold;
    font-size: 26px;
    color: #303030;
    text-align: center;
    margin-bottom: 30px;
}

.cfk-offices-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.cfk-office-item {
    background: #fff;
    border-radius: 14px;
    padding: 22px 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cfk-office-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.09);
}

.cfk-office-item h5 {
    font-weight: bold;
    font-size: 15px;
    color: var(--Primary, #fb5850);
    margin: 0 0 10px;
}

.cfk-office-item p {
    font-size: 13px;
    color: #52595b;
    line-height: 20px;
    margin: 0 0 10px;
}

.cfk-office-item a {
    font-size: 14px;
    font-weight: 600;
    color: #303030;
    text-decoration: none;
}

.cfk-office-item a:hover {
    color: var(--Primary, #fb5850);
}

/* ===== Responsive ===== */

@media (max-width: 991px) {
    .cfk-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

    .cfk-why-grid {
        grid-template-columns: 1fr;
    }

    .cfk-why-features {
        grid-template-columns: 1fr 1fr;
    }

    .cfk-ceo-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 575.98px) {
    .cfk-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cfk-course-grid {
        grid-template-columns: 1fr;
    }

    .cfk-guinness-grid {
        grid-template-columns: 1fr;
    }

    .cfk-why-features {
        grid-template-columns: 1fr;
    }

    .cfk-project-slide {
        flex-basis: 82vw;
    }

    .cfk-offices-grid {
        grid-template-columns: 1fr;
    }

    .cfk-hero-desc {
        max-width: 100%;
    }
}

/* Bootstrap's col-sm-*/col-md-*/col-lg-*/col-xl-* classes only get a width from 576px up;
   below that, floated columns with no matching bare col class have no width rule at all and
   shrink-to-fit their content. None of the sections above rely on col-* + float layout (all
   use CSS grid/flexbox), so no such fix is needed here. */