/* ------------------------------------------------------------------
   Digital Cogito Academy — theme refinements

   The stock theme sets 110–120px of padding on the top AND bottom of every
   section and a 48px display size for section headings. Across eight sections
   that is roughly two full screens of empty space before any content is read,
   and on a laptop each heading fills a third of the viewport.

   This file tightens the vertical rhythm and the type scale, and applies the
   brand palette taken from digitalcogito.com. It loads after the theme so it
   overrides without touching shared CSS.
   ------------------------------------------------------------------ */

:root {
    --dc-navy: #193163;
    --dc-navy-deep: #0c1a38;
    --dc-crimson: #d10a51;
    --dc-ink: #1f2937;
    --dc-muted: #5b6b85;
    --dc-line: #e6ebf3;
}

/* ---------- vertical rhythm: the theme's own section classes ------- */
/* This is where the dead space actually lives. The stock theme sets, among
   others, 220px top + 340px bottom on the hero and 260px top on the counter
   band — over 1,500px of padding before a single utility class is involved. */
.banner-area, .banner-area-2, .banner-area-3 {
    padding: 82px 0 96px 0 !important;
}
.counter-area { padding-top: 64px !important; padding-bottom: 56px !important; }
.counter-area-2, .counter-3-area { padding-top: 56px !important; padding-bottom: 56px !important; }
/* .play-area pulls itself 110px into the next section and the counter band's
   original 260px top padding absorbed it. With the padding reduced, that
   overlap swallowed the counter heading — so drop the overlap instead of
   restoring the dead space. */
.play-area, .play-area-2 {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    margin-bottom: 0 !important;
}
.testimonials-area, .testimonials-2-area { padding-top: 58px !important; padding-bottom: 58px !important; }
.community-area { padding-top: 56px !important; padding-bottom: 60px !important; }
.we-do-area, .we-do-3, .sponsors-area, .our-courses-area, .exp-area,
.dream-course-area, .mentor-course, .services-area-3, .our-events-area {
    padding-top: 58px !important; padding-bottom: 58px !important;
}
.faq-area, .faq-answer-area, .course-details-area, .custom-page-area,
.contact-info-area, .contact-action-area, .pricing-area, .news-3-area {
    padding-top: 56px !important; padding-bottom: 56px !important;
}
.single-features { padding: 34px 26px !important; }
.single-services { padding: 34px 0 32px !important; }
.dream-course-content { padding: 38px 42px 42px !important; }
.bg_cover { padding-top: 56px; }
.footer-area, .footer-area-2 { padding-top: 56px !important; padding-bottom: 30px !important; }

/* ---------- vertical rhythm: utility classes ---------------------- */
.pt-120, .pt-115, .pt-110 { padding-top: 62px !important; }
.pb-120, .pb-115, .pb-110 { padding-bottom: 62px !important; }
.pt-100, .pt-95, .pt-90 { padding-top: 52px !important; }
.pb-100, .pb-95, .pb-90 { padding-bottom: 52px !important; }
.pt-80, .pt-75, .pt-70 { padding-top: 44px !important; }
.pb-80, .pb-75, .pb-70 { padding-bottom: 44px !important; }
.pt-60, .pt-55, .pt-50 { padding-top: 36px !important; }
.pb-60, .pb-55, .pb-50 { padding-bottom: 36px !important; }
.mb-60, .mb-55, .mb-50 { margin-bottom: 32px !important; }
.mt-60, .mt-55, .mt-50 { margin-top: 32px !important; }
.pt-40, .pb-40 { padding-top: 26px !important; padding-bottom: 26px !important; }

/* ---------- type scale ------------------------------------------- */
body { font-size: 15.5px; line-height: 1.65; color: var(--dc-ink); }

h1, .h1 { font-size: 38px !important; line-height: 1.18 !important; }
h2, .h2 { font-size: 28px !important; line-height: 1.25 !important; }
h3, .h3 { font-size: 21px !important; line-height: 1.3 !important; }
h4, .h4 { font-size: 17px !important; line-height: 1.35 !important; }
h5, .h5 { font-size: 15.5px !important; }

h1, h2, h3, h4, h5 { letter-spacing: -0.01em; color: var(--dc-navy); }

/* Section headings: smaller, tighter, with a short brand rule instead of
   relying on sheer size to create hierarchy. */
.section-title h2,
.section-title .title,
.sec-title h2 {
    font-size: 27px !important;
    line-height: 1.22 !important;
    margin-bottom: 10px !important;
    color: var(--dc-navy) !important;
}
.section-title, .sec-title { margin-bottom: 30px !important; }
.section-title p, .sec-title p {
    font-size: 15px !important;
    color: var(--dc-muted) !important;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}
.section-title.text-left p, .section-title.text-start p { margin-left: 0; }

/* ---------- hero -------------------------------------------------- */
.banner-content h1.title, .banner-content h1 {
    font-size: 42px !important;
    line-height: 1.14 !important;
    margin-bottom: 18px !important;
    max-width: 15ch;
}
.banner-content span, .banner-content .sub-title {
    font-size: 13px !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .85;
}
.banner-content p {
    font-size: 16.5px !important;
    line-height: 1.6 !important;
    max-width: 60ch;
    margin-bottom: 22px !important;
}

/* The theme scatters cartoon clipart — planets, pencils, paper darts — across
   the hero. It reads as a children's product and fights the brand, so it goes. */
.banner-shape-1, .banner-shape-2, .banner-shape-3, .banner-shape { display: none !important; }

/* ---------- buttons ----------------------------------------------- */
/* .main-btn renders as an outline with no fill in this theme, so the primary
   action had no more weight than the secondary one. */
.main-btn {
    display: inline-block;
    padding: 13px 26px !important;
    font-size: 14.5px !important;
    font-weight: 600;
    border-radius: 7px !important;
    background: var(--dc-crimson) !important;
    border: 1px solid var(--dc-crimson) !important;
    color: #fff !important;
    transition: all .18s ease;
}
.main-btn:hover { background: #b00845 !important; border-color: #b00845 !important; color: #fff !important; }
.main-btn-2 {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    color: #fff !important;
}
.main-btn-2:hover { background: rgba(255, 255, 255, .12) !important; border-color: #fff !important; }
/* On light sections the outline variant needs brand ink, not white. */
.dream-course-content .main-btn-2, section:not(.banner-area) .main-btn-2 {
    border-color: var(--dc-navy) !important;
    color: var(--dc-navy) !important;
}

/* ---------- cards ------------------------------------------------- */
.course-item, .single-course, .course-card,
.category-item, .single-category,
.instructor-item, .single-instructor,
.feature-item, .single-feature {
    border-radius: 10px;
    border: 1px solid var(--dc-line);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: transform .18s ease, box-shadow .18s ease;
}
.course-item:hover, .single-course:hover, .course-card:hover,
.category-item:hover, .single-category:hover,
.instructor-item:hover, .single-instructor:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(16, 24, 40, .10);
}
.course-item h3, .single-course h3, .course-card h3,
.course-item h4, .single-course h4 {
    font-size: 17px !important;
    line-height: 1.35 !important;
}
.course-content, .course-item .content, .single-course .content { padding: 16px 18px !important; }

/* Course thumbnails already carry their title, so keep them from dominating. */
.course-item img, .single-course img, .course-card img { aspect-ratio: 16 / 10; object-fit: cover; }

/* ---------- price ------------------------------------------------- */
.course-price, .price, .current-price {
    font-size: 17px !important;
    font-weight: 700;
    color: var(--dc-crimson) !important;
}
.previous-price, .old-price, del { font-size: 13.5px !important; color: #94a3b8 !important; }

/* ---------- buttons ----------------------------------------------- */
.primary-btn, .btn-primary, .theme-btn, .main-btn {
    padding: 11px 22px !important;
    font-size: 14.5px !important;
    border-radius: 7px !important;
    letter-spacing: .01em;
}

/* ---------- fun facts / counters ---------------------------------- */
.counter-item h2, .fun-fact-item h2, .counter-content h2 { font-size: 32px !important; }
.counter-item p, .fun-fact-item p { font-size: 14.5px !important; }

/* ---------- testimonials ------------------------------------------ */
.testimonial-item p, .single-testimonial p { font-size: 15.5px !important; line-height: 1.7 !important; }

/* ---------- footer ------------------------------------------------ */
.footer-area { padding-top: 52px !important; padding-bottom: 0 !important; }
.footer-area h3, .footer-area h4 { font-size: 16px !important; margin-bottom: 14px !important; }
.footer-area p, .footer-area a, .footer-area li { font-size: 14.5px !important; }

/* Logos are wordmarks, not icons — cap them so they sit in the bar properly. */
.logo img, .header-logo img, .footer-logo img { max-height: 46px; width: auto; }

/* ---------- course cards: stop the overlap ------------------------ */
/* The theme pins the category pill to `right: 30px; bottom: 0` of the thumb,
   so a long French category name grows leftward and escapes the card. The
   instructor/price row is a justify-between flex with no min-width guard, so
   a wrapped name and the price stack on top of each other. */
.single-courses {
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: calc(100% - 30px);
}

.single-courses .courses-thumb .corses-thumb-title {
    right: auto !important;
    left: 14px !important;
    bottom: 14px !important;
    max-width: calc(100% - 28px);
}
.single-courses .courses-thumb .corses-thumb-title .category,
.single-courses .courses-thumb .corses-thumb-title a {
    display: block;
    max-width: 100%;
    padding: 5px 12px !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    font-weight: 600;
    border-radius: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #fff !important;
    color: var(--dc-navy) !important;
    box-shadow: 0 2px 10px rgba(12, 26, 56, .18);
}

.single-courses .courses-content { padding: 18px 20px 16px !important; }
.single-courses .courses-content .title {
    font-size: 16.5px !important;
    line-height: 1.38 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.76em;
    margin-bottom: 4px;
}

/* Instructor and price share one justify-between row. In a 3-up grid there is
   not enough width for both, so the name was being squeezed to a single
   character. Stack them instead — the name gets a full line, the price its own. */
.single-courses .courses-content .courses-info {
    display: block !important;
    padding-top: 10px !important;
}
.single-courses .courses-content .courses-info .item {
    min-width: 0;
    margin-bottom: 6px;
}
.single-courses .courses-content .courses-info .item p {
    margin: 0;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    color: var(--dc-muted) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.single-courses .courses-content .courses-info .price {
    display: flex;
    align-items: baseline;
    gap: 9px;
    background: none !important;
    padding: 0 !important;
}
.single-courses .courses-content .courses-info .price span {
    background: none !important;
    padding: 0 !important;
    font-size: 16.5px !important;
    font-weight: 700;
    color: var(--dc-crimson) !important;
    white-space: nowrap;
}
.single-courses .courses-content .courses-info .price span.pre-price {
    font-size: 13px !important;
    font-weight: 500;
    color: #9aa7bd !important;
    text-decoration: line-through;
}
/* students / duration strip */
.single-courses .courses-content ul { margin-top: auto; padding-top: 12px; }
.single-courses .courses-content ul li {
    font-size: 13px !important;
    white-space: nowrap;
    color: var(--dc-muted);
}

/* ---------- sidebar filters: stop the wrap escaping --------------- */
/* Each label is `<label><span></span>Text</label>` with the span acting as the
   custom radio. It is positioned out of flow, so a wrapped label put its second
   line underneath the control and past the panel's left edge. Making the label
   a flex row keeps the text in its own column and indents wraps correctly. */
.radio_common-2 li, .radio_style2 li { margin-bottom: 11px !important; }
.radio_common-2 label, .radio_style2 label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px;
    padding-left: 0 !important;
    font-size: 14px !important;
    line-height: 1.42 !important;
    overflow-wrap: anywhere;
    cursor: pointer;
    margin-bottom: 0 !important;
}
.radio_common-2 label span, .radio_style2 label span {
    position: static !important;
    flex: 0 0 auto;
    margin-top: 3px;
    top: auto !important;
    left: auto !important;
}
.course-price-filter, .course-catagory, .course-type,
.course-price-filter .course-title, .course-catagory .course-title {
    overflow: hidden;
}
.course-title .title { font-size: 16.5px !important; margin-bottom: 4px !important; }

/* ---------- breadcrumb: was a 280px washed-out slab ---------------- */
/* .page-title carries pt-140 pb-140 and, with no breadcrumb image uploaded,
   renders as a flat grey-blue band taller than the content beneath it. */
.page-title {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
    background-image: linear-gradient(120deg, var(--dc-navy-deep) 0%, var(--dc-navy) 55%, #24407a 100%) !important;
    background-color: var(--dc-navy) !important;
    position: relative;
}
.page-title::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    background: var(--dc-crimson);
}
.page-title .page-title-item h2,
.page-title .page-title-item h1,
.page-title .title {
    font-size: 30px !important;
    margin-bottom: 8px !important;
    color: #fff !important;
}
.page-title .breadcrumb {
    justify-content: center;
    background: none;
    margin-bottom: 0;
    padding: 0;
    font-size: 13px !important;
}
.page-title .breadcrumb-item, .page-title .breadcrumb-item a { color: rgba(255, 255, 255, .82) !important; }
.page-title .breadcrumb-item.active { color: #fff !important; }

/* ---------- domain tiles on the home page ------------------------- */
/* Tiles sit in a bordered grid, so a two-line label made one cell taller than
   its neighbours and broke the row. A fixed min-height keeps the grid even. */
.single-services {
    min-height: 172px !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 26px 18px !important;
    transition: background .18s ease;
}
.single-services:hover { background: #f7f9fd; }
.single-services i { font-size: 32px !important; margin-bottom: 14px; }
.single-services .title {
    font-size: 14.5px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    text-align: center;
    color: var(--dc-navy) !important;
}

/* ---------- overlay bands ----------------------------------------- */
/* The theme hardcodes an electric #2400ff → #0090ff gradient across eight
   different section overlays. Against a navy and crimson identity each one
   reads as a different website, so they are all re-pointed at the brand. */
.offer-area::before,
.offer-2-area::before,
.counter-area::before,
.counter-area.counter-area-2.counter-contact::before,
.sponsors-area::before,
.faq-answer-area::before,
.advance-courses-area.mentor-course::before,
.banner-area.banner-area-2::before {
    background-image: linear-gradient(100deg, var(--dc-navy-deep) 0%, var(--dc-navy) 58%, #2b1b4d 100%) !important;
    opacity: .96 !important;
}
.offer-area { margin-bottom: 0 !important; background-attachment: scroll !important; }
.offer-area .offer-content .title {
    font-size: 30px !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
    color: #fff !important;
}
.offer-area .offer-content p { font-size: 16px !important; max-width: 62ch; margin: 0 auto 22px; }
.offer-area .offer-content ul { gap: 12px; display: flex; justify-content: center; flex-wrap: wrap; }

/* ---------- domain tile grid: 3 across, not 4 --------------------- */
/* Six domains in a four-column grid left two dead cells on the second row. */
@media (min-width: 992px) {
    .services-border .col-lg-3 {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}

/* ---------- replace the theme's stock photography ------------------ */
/* The bundled backgrounds are Western campus stock shots — a smiling student
   with a satchel — which look bought-in next to a Ouagadougou IT consultancy.
   Swapped for brand-palette panels. The theme sets these via data-bg on a
   .lazy element, so the override has to be !important and on the resolved
   background-image. */
.features-area.bg_cover {
    background-image: url('/assets/tenant/image/dc/features_bg.jpg') !important;
    background-color: #eef2f8 !important;
}
.testimonials-area.bg_cover {
    background-image: url('/assets/tenant/image/dc/testimonial_bg.jpg') !important;
    background-color: var(--dc-navy) !important;
}
.play-area .play-thumb img {
    content: url('/assets/tenant/image/dc/play_thumb.jpg');
    border-radius: 10px;
}
/* These bands sit on the navy overlay, but the theme styles their headings with
   the dark ink colour — navy text on a navy panel, effectively invisible. */
.counter-area, .counter-area *,
.testimonials-area, .testimonials-area * {
    color: #fff !important;
}
.counter-area .section-title .title,
.testimonials-area .section-title .title,
.counter-area h2, .testimonials-area h2,
.counter-area h3, .testimonials-area h3,
.counter-area h4, .testimonials-area h4 { color: #fff !important; }
/* keep the accent on the attribution line */
.testimonials-area .client-info span,
.testimonials-area .designation,
.testimonials-area .occupation { color: #ffb3ce !important; }
/* Client photos render at their natural size as a square block; the design
   expects a small circular portrait. */
.testimonials-area img, .single-testimonial img, .testimonial-item img {
    width: 74px !important;
    height: 74px !important;
    border-radius: 50% !important;
    object-fit: cover;
    margin: 0 auto 10px;
    display: block;
    border: 3px solid rgba(255, 255, 255, .28);
}
.testimonials-area .single-testimonial p { font-size: 16px !important; max-width: 64ch; margin: 0 auto 16px; }

.counter-area .single-counter .title { font-size: 30px !important; }
.counter-area .single-counter p, .counter-area .single-counter span { font-size: 14px !important; }
/* decorative wedges render as stray yellow triangles at this scale */
.counter-area .single-counter::before, .counter-area .single-counter::after,
.counter-area .section-title::before, .testimonials-area .section-title::before { display: none !important; }

/* Feature tiles: the theme puts a decorative corner wedge that reads as a
   rendering glitch at this size. */
.single-features::before, .single-features::after { display: none !important; }
.single-features { border-radius: 10px; height: calc(100% - 30px); }
.single-features .title { font-size: 16px !important; margin-bottom: 8px !important; }
.single-features p { font-size: 14px !important; line-height: 1.6 !important; }

/* The features band was laid out around a stock photo on the right. With that
   photo gone the tiles were stranded in the left two-thirds, so let them use
   the full width in three columns. */
@media (min-width: 992px) {
    .features-area .features-content, .features-area .col-lg-8, .features-area .col-lg-7 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .features-area .col-lg-6 { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .features-area .features-thumb, .features-area .col-lg-4, .features-area .col-lg-5 { display: none; }
}

/* The intro video panel was nearly a full screen tall on its own. */
.play-area .play-thumb img { max-height: 420px; width: 100%; object-fit: cover; }
.play-area .play-thumb { border-radius: 10px; overflow: hidden; }

/* ---------- global overflow guards -------------------------------- */
html, body { overflow-x: hidden; }
img, svg, video, table { max-width: 100%; }
.container, .container-fluid { overflow-wrap: break-word; }

/* ---------- smaller screens --------------------------------------- */
@media (max-width: 991px) {
    .banner-area, .banner-area-2, .banner-area-3 { padding: 54px 0 60px 0 !important; }
    .counter-area, .play-area, .testimonials-area, .community-area,
    .we-do-area, .sponsors-area, .our-courses-area, .faq-area,
    .course-details-area, .footer-area {
        padding-top: 40px !important; padding-bottom: 40px !important;
    }
    .pt-120, .pt-115, .pt-110, .pt-100, .pt-95, .pt-90 { padding-top: 42px !important; }
    .pb-120, .pb-115, .pb-110, .pb-100, .pb-95, .pb-90 { padding-bottom: 42px !important; }
    h1, .h1, .hero-content h1, .hero-area h1 { font-size: 29px !important; }
    h2, .h2, .section-title h2, .sec-title h2 { font-size: 23px !important; }
    .hero-area, .hero-section, .banner-area { padding-top: 52px !important; padding-bottom: 52px !important; }
}

@media (max-width: 575px) {
    body { font-size: 15px; }
    h1, .h1, .hero-content h1 { font-size: 25px !important; }
    h2, .h2, .section-title h2 { font-size: 21px !important; }
    .pt-120, .pt-115, .pt-110, .pt-100 { padding-top: 34px !important; }
    .pb-120, .pb-115, .pb-110, .pb-100 { padding-bottom: 34px !important; }
}