.elementor-234 .elementor-element.elementor-element-72a74fc{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS *//* ================================================================
   SLOVENIA–AFRICA BUSINESS COUNCIL
   PREMIUM SINGLE EVENT TEMPLATE
   ELEMENTOR PRO — CUSTOM CSS

   ================================================================
   TEMPLATE:
   SABC | Premium Single Event

   USED WITH:
   The Events Calendar + Elementor Pro

   ================================================================
   OFFICIAL BRAND COLOURS:

   Green: #005936
   Blue:  #1C4483
   Red:   #E51B23

   DO NOT USE:
   #CC3366

   ================================================================
   SECTIONS COVERED:

   01. Hero Container
   02. Hero Typography
   03. Dynamic Event Categories
   04. Dynamic Event Title
   05. Dynamic Date & Time
   06. Dynamic Event Status
   07. Event Featured Image
   08. Event Details Section
   09. Dynamic Post Content
   10. Event Information Sidebar
   11. Back Button
   12. Responsive Design

   All body.elementor-page-234s are scoped to the SABC template.
================================================================ */


/* ================================================================
   01. PREMIUM HERO SECTION
================================================================ */

.sabc-se-hero {

    --sabc-green: #005936;
    --sabc-green-hover: #006D43;
    --sabc-green-dark: #003D29;

    --sabc-blue: #1C4483;

    --sabc-red: #E51B23;

    --sabc-ink: #17251E;
    --sabc-muted: #65736A;

    --sabc-heading: "Outfit", sans-serif;
    --sabc-body: "Average Sans", sans-serif;

    width: 100% !important;

    padding: 95px 28px 105px !important;

    background:
        radial-gradient(
            circle at 0 0,
            rgba(0, 89, 54, 0.045),
            transparent 45%
        ),
        #F7F9F6 !important;

}


/* ================================================================
   02. INNER HERO GRID

   Grid ensures correct proportions even if
   Elementor's Flexbox widths were set manually.

   Desktop:
   Left = 55%
   Right = 45%, approximately.
================================================================ */

.sabc-se-hero .sabc-se-hero-inner {

    width: 100% !important;

    max-width: 1400px !important;

    margin: 0 auto !important;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, 0.9fr);

    align-items: center !important;

    gap: 65px !important;

}


/* ================================================================
   03. LEFT HERO CONTENT
================================================================ */

.sabc-se-hero .sabc-se-hero-content {

    width: 100% !important;

    min-width: 0;

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    gap: 18px !important;

}


/* ================================================================
   04. COUNCIL EYEBROW
================================================================ */

.sabc-se-hero .sabc-se-hero-eyebrow {

    position: relative;

    margin-bottom: 15px;

    padding-left: 43px;

}


.sabc-se-hero .sabc-se-hero-eyebrow::before {

    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 30px;
    height: 2px;

    background: #E51B23;

    transform: translateY(-50%);

}


.sabc-se-hero .sabc-se-hero-eyebrow
:is(h1, h2, h3, h4, p, .elementor-heading-title) {

    margin: 0 !important;

    color: #005936 !important;

    font-family: "Outfit", sans-serif !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    line-height: 1.6 !important;

    letter-spacing: 0.08em !important;

    text-transform: uppercase;

}


/* ================================================================
   05. EVENT CATEGORIES

   Corrects Elementor's default blue links.

   Selected categories appear in refined
   institutional-style labels.
================================================================ */

.sabc-se-hero .sabc-se-event-categories {

    margin: 0 0 8px !important;

    color: #65736A;

    font-family: "Outfit", sans-serif;

    font-size: 13px;

}


.sabc-se-hero .sabc-se-event-categories a {

    display: inline-flex;

    align-items: center;

    margin: 5px 7px 5px 0;

    padding: 9px 13px;

    border: 1px solid #D6E7DC;

    border-radius: 4px;

    background: #E9F3EC !important;

    color: #005936 !important;

    font-family: "Outfit", sans-serif !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    text-decoration: none !important;

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;

}


.sabc-se-hero .sabc-se-event-categories a:hover {

    border-color: #005936 !important;

    background: #005936 !important;

    color: #FFFFFF !important;

}


/* ================================================================
   06. DYNAMIC EVENT TITLE

   Important:
   The text is supplied by The Events Calendar.
   CSS only changes its appearance.
================================================================ */

.sabc-se-hero .sabc-se-event-title {

    width: 100%;

    margin: 0 !important;

}


.sabc-se-hero .sabc-se-event-title
:is(h1, h2, h3, .elementor-heading-title) {

    margin: 0 !important;

    color: #17251E !important;

    font-family: "Outfit", sans-serif !important;

    font-size: clamp(
        44px,
        5vw,
        74px
    ) !important;

    font-weight: 500 !important;

    line-height: 1.08 !important;

    letter-spacing: -0.045em !important;

    overflow-wrap: anywhere;

}


/* ================================================================
   07. EVENT DATE & TIME — HERO
================================================================ */

.sabc-se-hero .sabc-se-event-datetime {

    margin-top: 12px !important;

    padding-top: 22px;

    border-top: 1px solid #DAE7DD;

    width: 100%;

    color: #005936 !important;

    font-family: "Outfit", sans-serif;

    font-size: 16px;

    line-height: 1.7;

}


.sabc-se-hero .sabc-se-event-datetime
:is(p, span, strong, time, a) {

    color: #005936 !important;

    font-family: "Outfit", sans-serif !important;

}


.sabc-se-hero .sabc-se-event-datetime svg {

    color: #005936 !important;

}


/* ================================================================
   08. EVENT STATUS

   The Events Calendar may only display
   this widget for past, cancelled or
   postponed events.

   We retain the widget's functionality.
================================================================ */

.sabc-se-hero .sabc-se-event-status {

    width: 100%;

    font-family: "Outfit", sans-serif;

    font-size: 14px;

}


/* ================================================================
   09. RIGHT HERO IMAGE CONTAINER
================================================================ */

.sabc-se-hero .sabc-se-hero-media {

    width: 100% !important;

    min-width: 0;

    position: relative;

    display: flex !important;

    align-items: stretch !important;

}


/* Decorative accent line */

.sabc-se-hero .sabc-se-hero-media::after {

    content: "";

    position: absolute;

    top: 30px;
    right: -14px;

    width: 2px;
    height: 110px;

    background: #E51B23;

    pointer-events: none;

}


/* ================================================================
   10. DYNAMIC EVENT FEATURED IMAGE
================================================================ */

.sabc-se-hero .sabc-se-event-image {

    width: 100% !important;

    min-width: 0;

    position: relative;

}


.sabc-se-hero .sabc-se-event-image img {

    display: block;

    width: 100% !important;

    height: 540px !important;

    max-height: none !important;

    object-fit: cover !important;

    object-position: center !important;

    border-radius:
        5px 75px 5px 5px !important;

    box-shadow:
        0 25px 65px rgba(0, 53, 31, 0.09);

    transition:
        transform 0.6s ease,
        box-shadow 0.6s ease;

}


.sabc-se-hero .sabc-se-hero-media:hover
.sabc-se-event-image img {

    transform: translateY(-5px);

    box-shadow:
        0 30px 70px rgba(0, 53, 31, 0.13);

}


/* ================================================================
   11. EVENT DETAILS SECTION
================================================================ */

.sabc-se-details {

    --sabc-green: #005936;
    --sabc-green-dark: #003D29;

    --sabc-red: #E51B23;

    --sabc-ink: #17251E;
    --sabc-muted: #65736A;

    width: 100% !important;

    padding: 110px 28px 120px !important;

    background: #FFFFFF !important;

}


/* ================================================================
   12. DETAILS INNER GRID

   Main Content: Approximately 65%
   Sidebar: Approximately 35%

   CSS Grid accounts for the spacing between
   columns without causing overflow.
================================================================ */

.sabc-se-details .sabc-se-details-inner {

    width: 100% !important;

    max-width: 1400px !important;

    margin: 0 auto !important;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(310px, 0.85fr);

    gap: 65px !important;

    align-items: start !important;

}


/* ================================================================
   13. MAIN EVENT CONTENT
================================================================ */

.sabc-se-details .sabc-se-main-content {

    width: 100% !important;

    min-width: 0;

    display: flex !important;

    flex-direction: column !important;

    align-items: stretch !important;

}


/* ================================================================
   14. SECTION EYEBROW
================================================================ */

.sabc-se-details .sabc-se-section-eyebrow {

    margin-bottom: 22px;

}


.sabc-se-details .sabc-se-section-eyebrow
:is(h2, h3, h4, p, .elementor-heading-title) {

    color: #005936 !important;

    font-family: "Outfit", sans-serif !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    letter-spacing: 0.13em !important;

    text-transform: uppercase;

}


/* ================================================================
   15. ABOUT THIS EVENT HEADING
================================================================ */

.sabc-se-details .sabc-se-about-heading {

    margin-bottom: 31px;

}


.sabc-se-details .sabc-se-about-heading
:is(h2, h3, .elementor-heading-title) {

    margin: 0 !important;

    color: #17251E !important;

    font-family: "Outfit", sans-serif !important;

    font-size: clamp(
        37px,
        4vw,
        57px
    ) !important;

    font-weight: 500 !important;

    line-height: 1.12 !important;

    letter-spacing: -0.04em !important;

}


/* ================================================================
   16. DYNAMIC POST CONTENT

   Displays the event description and
   any content entered by Council staff.
================================================================ */

.sabc-se-details .sabc-se-post-content {

    color: #65736A;

    font-family: "Average Sans", sans-serif;

    font-size: 16px;

    line-height: 1.9;

}


.sabc-se-details .sabc-se-post-content p {

    margin: 0 0 22px;

    color: #65736A;

    font-family: "Average Sans", sans-serif;

    font-size: 16px;

    line-height: 1.9;

}


.sabc-se-details .sabc-se-post-content
:is(h2, h3, h4) {

    margin: 35px 0 18px;

    color: #17251E !important;

    font-family: "Outfit", sans-serif !important;

    font-weight: 500 !important;

    line-height: 1.3;

}


.sabc-se-details .sabc-se-post-content h2 {

    font-size: 30px;

}


.sabc-se-details .sabc-se-post-content h3 {

    font-size: 24px;

}


.sabc-se-details .sabc-se-post-content h4 {

    font-size: 20px;

}


.sabc-se-details .sabc-se-post-content
:is(ul, ol) {

    margin: 15px 0 26px;

    padding-left: 25px;

    color: #65736A;

    font-size: 16px;

    line-height: 1.9;

}


.sabc-se-details .sabc-se-post-content li {

    margin-bottom: 9px;

}


.sabc-se-details .sabc-se-post-content a {

    color: #005936 !important;

    text-decoration: underline;

    text-underline-offset: 4px;

}


.sabc-se-details .sabc-se-post-content a:hover {

    color: #E51B23 !important;

}


.sabc-se-details .sabc-se-post-content img {

    max-width: 100%;

    height: auto;

    border-radius: 5px;

}


/* ================================================================
   17. RIGHT SIDEBAR
================================================================ */

.sabc-se-details .sabc-se-sidebar {

    width: 100% !important;

    min-width: 0;

    display: flex !important;

    flex-direction: column !important;

    gap: 18px !important;

    position: sticky;

    top: 125px;

}


/* ================================================================
   18. EVENT INFORMATION CARD
================================================================ */

.sabc-se-details .sabc-se-info-card {

    width: 100% !important;

    padding: 38px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: stretch !important;

    gap: 22px !important;

    border-radius: 5px;

    background: #003D29 !important;

    color: #FFFFFF !important;

    box-shadow:
        0 24px 50px rgba(0, 53, 31, 0.08);

}


/* ================================================================
   19. SIDEBAR EYEBROW
================================================================ */

.sabc-se-details .sabc-se-info-label {

    margin-bottom: 9px;

    padding-bottom: 19px;

    border-bottom:
        1px solid rgba(255,255,255,0.22);

}


.sabc-se-details .sabc-se-info-label
:is(h2, h3, h4, p, .elementor-heading-title) {

    margin: 0 !important;

    color: #BCE0C6 !important;

    font-family: "Outfit", sans-serif !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    line-height: 1.5 !important;

    letter-spacing: 0.12em !important;

    text-transform: uppercase;

}


/* ================================================================
   20. SIDEBAR DYNAMIC EVENT WIDGETS

   Applies consistent styling across the
   event-specific information widgets.

   Individual widget content remains dynamic.
================================================================ */

.sabc-se-details .sabc-se-info-card
:is(
    .sabc-se-info-date,
    .sabc-se-info-venue,
    .sabc-se-info-organizer,
    .sabc-se-info-website
) {

    padding-bottom: 20px;

    border-bottom:
        1px solid rgba(255,255,255,0.18);

    color: #FFFFFF;

    font-family: "Average Sans", sans-serif;

    font-size: 15px;

    line-height: 1.8;

}


/* Text inside event widgets */

.sabc-se-details .sabc-se-info-card
:is(
    .sabc-se-info-date,
    .sabc-se-info-venue,
    .sabc-se-info-organizer,
    .sabc-se-info-website
)
:is(p, span, strong, time, address, dt, dd, h3, h4) {

    color: #FFFFFF !important;

    font-family: "Average Sans", sans-serif;

    line-height: 1.8;

}


/* Dynamic labels */

.sabc-se-details .sabc-se-info-card
:is(dt, h3, h4, strong) {

    color: #C6E1CE !important;

    font-family: "Outfit", sans-serif !important;

}


/* SVG icons */

.sabc-se-details .sabc-se-info-card svg {

    color: #C6E1CE !important;

}


/* Sidebar links */

.sabc-se-details .sabc-se-info-card a {

    color: #FFFFFF !important;

    text-decoration: underline;

    text-underline-offset: 4px;

    transition: color 0.3s ease;

}


.sabc-se-details .sabc-se-info-card a:hover {

    color: #BCE0C6 !important;

}


/* ================================================================
   21. BACK TO EVENTS BUTTON
================================================================ */

.sabc-se-details .sabc-se-back-button {

    width: 100%;

}


.sabc-se-details .sabc-se-back-button
.elementor-button {

    width: 100%;

    min-height: 56px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #005936 !important;

    border-radius: 4px;

    background: #FFFFFF !important;

    color: #005936 !important;

    font-family: "Outfit", sans-serif !important;

    font-size: 14px !important;

    font-weight: 500 !important;

    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;

}


.sabc-se-details .sabc-se-back-button
.elementor-button:hover {

    border-color: #005936 !important;

    background: #005936 !important;

    color: #FFFFFF !important;

    transform: translateY(-2px);

}


.sabc-se-details .sabc-se-back-button
.elementor-button:hover
.elementor-button-text {

    color: #FFFFFF !important;

}


/* ================================================================
   22. LARGE TABLETS
================================================================ */

@media (max-width: 1199px) {

    .sabc-se-hero .sabc-se-hero-inner {

        gap: 40px !important;

    }

    .sabc-se-hero .sabc-se-event-image img {

        height: 470px !important;

    }

    .sabc-se-details .sabc-se-details-inner {

        gap: 40px !important;

    }

    .sabc-se-details .sabc-se-info-card {

        padding: 30px !important;

    }

}


/* ================================================================
   23. TABLETS

   Switch the hero and content areas
   to one-column layouts.
================================================================ */

@media (max-width: 1024px) {

    .sabc-se-hero {

        padding: 80px 24px 85px !important;

    }

    .sabc-se-hero .sabc-se-hero-inner {

        grid-template-columns: 1fr !important;

        gap: 45px !important;

    }

    .sabc-se-hero .sabc-se-hero-content,
    .sabc-se-hero .sabc-se-hero-media {

        width: 100% !important;

    }

    .sabc-se-hero .sabc-se-event-title
    :is(h1, h2, h3, .elementor-heading-title) {

        font-size: 56px !important;

    }

    .sabc-se-hero .sabc-se-event-image img {

        height: 480px !important;

    }

    .sabc-se-details {

        padding: 85px 24px !important;

    }

    .sabc-se-details .sabc-se-details-inner {

        grid-template-columns: 1fr !important;

        gap: 45px !important;

    }

    .sabc-se-details .sabc-se-sidebar {

        position: static;

        top: auto;

    }

}


/* ================================================================
   24. MOBILE
================================================================ */

@media (max-width: 767px) {

    .sabc-se-hero {

        padding: 65px 18px 75px !important;

    }

    .sabc-se-hero .sabc-se-hero-inner {

        gap: 32px !important;

    }

    .sabc-se-hero .sabc-se-hero-content {

        gap: 15px !important;

    }

    .sabc-se-hero .sabc-se-hero-eyebrow {

        padding-left: 32px;

    }

    .sabc-se-hero .sabc-se-hero-eyebrow::before {

        width: 22px;

    }

    .sabc-se-hero .sabc-se-hero-eyebrow
    :is(h1, h2, h3, h4, p, .elementor-heading-title) {

        font-size: 10px !important;

    }

    .sabc-se-hero .sabc-se-event-title
    :is(h1, h2, h3, .elementor-heading-title) {

        font-size: clamp(
            35px,
            9vw,
            45px
        ) !important;

        line-height: 1.13 !important;

        letter-spacing: -0.04em !important;

    }

    .sabc-se-hero .sabc-se-event-datetime {

        font-size: 14px;

        padding-top: 18px;

    }

    .sabc-se-hero .sabc-se-event-image img {

        height: 340px !important;

        border-radius:
            5px 45px 5px 5px !important;

    }

    .sabc-se-hero .sabc-se-hero-media::after {

        right: -8px;

        top: 20px;

        height: 75px;

    }

    .sabc-se-details {

        padding: 70px 18px 80px !important;

    }

    .sabc-se-details .sabc-se-details-inner {

        gap: 35px !important;

    }

    .sabc-se-details .sabc-se-about-heading
    :is(h2, h3, .elementor-heading-title) {

        font-size: 36px !important;

    }

    .sabc-se-details .sabc-se-post-content,
    .sabc-se-details .sabc-se-post-content p {

        font-size: 15px;

        line-height: 1.8;

    }

    .sabc-se-details .sabc-se-info-card {

        padding: 27px !important;

    }

}


/* ================================================================
   25. SMALL MOBILE
================================================================ */

@media (max-width: 380px) {

    .sabc-se-hero .sabc-se-event-title
    :is(h1, h2, h3, .elementor-heading-title) {

        font-size: 33px !important;

    }

    .sabc-se-hero .sabc-se-event-image img {

        height: 290px !important;

    }

    .sabc-se-details .sabc-se-about-heading
    :is(h2, h3, .elementor-heading-title) {

        font-size: 32px !important;

    }

}


/* ================================================================
   26. REDUCED MOTION
================================================================ */

@media (prefers-reduced-motion: reduce) {

    .sabc-se-hero *,
    .sabc-se-details * {

        animation-duration: 0.01ms !important;

        transition-duration: 0.01ms !important;

    }

}


/* ================================================================
   END — PREMIUM SINGLE EVENT TEMPLATE STYLING

   SCOPED TO:

   .sabc-se-hero
   .sabc-se-details

   GLOBAL HEADER: UNAFFECTED
   GLOBAL FOOTER: UNAFFECTED

   OFFICIAL COLOURS:

   #005936
   #1C4483
   #E51B23

================================================================ *//* End custom CSS */