/* OCCI Widgets — News Carousel + Service Cards */
/* All styles copied from original occi_optimized site CSS */

/* ================================================================
   NEWS CAROUSEL
   ================================================================ */

.occi-news-wrap {
    padding: 28px 46px;
    background: #e4e5e5;
    box-sizing: border-box;
}

/* mirrors .row-30 */
.occi-news-wrap .row-30 {
    margin: 0 -30px;
}
.occi-news-wrap .carousel-inner {
    padding: 0 30px;
    box-sizing: border-box;
}

/* mirrors .news-item */
.occi-news-wrap .news-item {
    margin-bottom: 20px;
}
.occi-news-wrap .news-item img {
    float: left;
    margin-right: 22px;
    width: 200px;
    height: auto;
}

/* mirrors .news-content */
.occi-news-wrap .news-content {
    overflow: hidden;
    font-weight: lighter;
}
.occi-news-wrap .news-content h3 {
    font-size: 128%;
    margin: 0 0 10px;
    font-weight: 600;
    color: #000;
}
.occi-news-wrap .news-content p {
    margin: 0;
    font-size: 100%;
}

/* mirrors a.more-news */
.occi-news-wrap a.more-news {
    text-transform: uppercase;
    font-weight: 700;
    color: #020000;
    text-decoration: none;
    margin-left: 6px;
}
.occi-news-wrap a.more-news:hover {
    color: #0b9e3d;
}

/* "For more news" link */
.occi-news-wrap .text-right {
    text-align: right;
    padding-top: 10px;
}
.occi-news-wrap .text-right a {
    color: #020000;
    text-decoration: none;
}
.occi-news-wrap .text-right a:hover {
    color: #0b9e3d;
}

/* Dots — matches original slick-dots override */
.occi-news-wrap .slick-dots {
    list-style: none;
    text-align: center;
    padding: 10px 0 0;
    margin: 0;
}
.occi-news-wrap .slick-dots li {
    display: inline-block;
    margin: 0 3px;
}
.occi-news-wrap .slick-dots li button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #222;
    border: none;
    padding: 0;
    text-indent: -99999px;
    cursor: pointer;
}
.occi-news-wrap .slick-dots li.slick-active button {
    background: #999;
}

/* Container overflow */
.news-carousel,
.news-carousel-rtl {
    max-height: 300px;
    overflow: hidden;
    position: relative;
}

@media (max-width: 768px) {
    .occi-news-wrap .news-item img {
        float: none;
        margin: 0 0 20px;
        width: 100%;
    }
}

/* ================================================================
   SERVICE CARDS
   ================================================================ */

/* mirrors .home-content-main */
.home-content-main {
    padding: 15px 0;
}

/* mirrors .cs-row */
.home-content-main .cs-row {
    margin: 0 -5px;
}

/* mirrors .card-item */
.home-content-main .card-item {
    padding: 0 5px;
    width: 12.5%;
    margin-bottom: 25px;
    box-sizing: border-box;
}

/* mirrors .flex */
.home-content-main .flex {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}

/* mirrors .flex-item */
.home-content-main .flex-item {
    display: -webkit-flex;
    display: flex;
}

/* mirrors .card-inner */
.home-content-main .card-inner {
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    padding: 13px 16px 16px;
    color: #fff;
    width: 100%;
    position: relative;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    cursor: pointer;
    box-sizing: border-box;
}

.home-content-main .card-inner > img {
    display: -webkit-flex;
    display: flex;
    align-self: flex-end;
}

.home-content-main .card-inner:hover > img {
    opacity: .6;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease;
}

.home-content-main .card-inner span {
    display: block;
    text-transform: uppercase;
    font-size: 128%;
    font-weight: 700;
    margin-top: auto;
}

/* Card background colors */
.home-content-main .card-green  .card-inner { background: #088934; }
.home-content-main .card-blue   .card-inner { background: #054189; }
.home-content-main .card-yellow .card-inner { background: #aa8925; }

/* Hover panel darker shade */
.home-content-main .card-blue   .card-hover { background: #002f68; }
.home-content-main .card-yellow .card-hover { background: #8f6e0c; }

/* Card close button */
.home-content-main .card-close {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #fff;
    font-size: 24px;
    text-decoration: none;
    display: none;
}

/* mirrors .card-hover — slides OUT from right edge by default */
.home-content-main .card-hover {
    position: absolute;
    width: 0;
    height: 100%;
    right: 100%;  /* default: panel is to the LEFT of card, slides out to the right */
    top: 0;
    background: #095122;
    -webkit-transition: width .3s ease;
    transition: width .3s ease;
    overflow: hidden;
    z-index: 100;
}

/* hover-left class: panel slides out to the LEFT (same as default right:100%) */
/* hover-right class: panel slides out to the RIGHT */
.home-content-main .hover-left .card-hover {
    left: 100%;
    right: auto;
}

/* active state: expand panel */
.home-content-main .card-inner.active .card-hover {
    width: 443px;
}

.home-content-main .card-hover img {
    float: left;
    margin-right: 25px;
    height: auto;
    max-width: 180px;
}

/* mirrors .card-hover-content */
.home-content-main .card-hover-content {
    padding: 0 18px 16px 0;
    opacity: 0;
    -webkit-transition: opacity .2s ease .3s;
    transition: opacity .2s ease .3s;
}

.home-content-main .active .card-hover-content {
    opacity: 1;
}

.home-content-main .card-hover-content ul {
    margin: 0;
    padding-top: 20px;
    list-style: none;
}

.home-content-main .card-hover-content li {
    margin-bottom: 8px;
}

.home-content-main .card-hover-content a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
}

.home-content-main .card-hover-content a:hover {
    opacity: .6;
}

/* newsletter card */
.home-content-main .news-letter .gform_wrapper,
.home-content-main .news-letter .elementor-form {
    margin-top: 7px;
    padding-left: 15px;
}
.home-content-main .news-letter .gform_wrapper ul { margin: 0; }
.home-content-main .news-letter .gform_fields li { padding: 0; margin-bottom: 5px; }
.home-content-main .news-letter .gfield_label { color: #fff; line-height: 12px; }
.home-content-main .news-letter .gform_footer { text-align: right; }
.home-content-main .news-letter .elementor-form .elementor-field-label { color: #fff; }

/* Responsive — mirrors original */
@media (max-width: 1200px) {
    .home-content-main .card-item { width: 25%; }
    .home-content-main .card-close { display: block; z-index: 102; }

    /* Hover panel becomes a fixed full-screen overlay on mobile/tablet */
    .home-content-main .card-hover {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100vw;
        max-height: 100vh;
        -moz-transform: none;
        -webkit-transform: none;
        transform: none;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: opacity .3s ease, visibility .3s ease;
        transition: opacity .3s ease, visibility .3s ease;
        font-size: 0;
        background: rgba(0,0,0,.5) !important;
        padding: 0;
        z-index: 99999;

        /* center the white content box */
        display: -webkit-flex;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .home-content-main .cs-row.flex { position: relative; }

    .home-content-main .card-inner.active .card-hover {
        opacity: 1;
        visibility: visible;
    }

    .home-content-main .card-hover-content {
        display: block;
        width: 90%;
        max-width: 420px;
        max-height: 85vh;
        overflow-y: auto;
        font-size: 16px;
        background: #fff;
        color: #000;
        padding: 20px;
        border-radius: 6px;
        box-sizing: border-box;
        position: relative;
    }

    .home-content-main .card-hover-content a { color: #000; }
    .home-content-main .card-hover-content img {
        float: none;
        display: block;
        max-width: 100%;
        height: auto;
        margin: 0 auto 15px;
    }

    /* Close button anchored to the white box, not the screen edge */
    .home-content-main .card-close {
        position: absolute;
        right: 10px;
        top: 10px;
        color: #000;
        opacity: .7;
    }
    .home-content-main .card-close:hover { opacity: 1; }

    /* prevent body scroll behind overlay when open */
    body.occi-card-open { overflow: hidden; }
}

@media (max-width: 768px) {
    .home-content-main .card-item { width: 33.333%; }
}

@media (max-width: 600px) {
    .home-content-main .card-item { width: 50%; }
}