/* ==========================================================
   COMPANY PAGE - 4 IMAGE CARDS
   ========================================================== */

.company-cards .company-card {
    position: relative;
    min-height: 360px;
    height: 100%;
    padding: 45px;

    display: flex;
    align-items: flex-end;

    overflow: hidden;
    isolation: isolate;

    cursor: pointer;

    background: transparent !important;
}


/* ==========================================================
   BACKGROUND IMAGE
   ========================================================== */

.company-cards .company-card::before {
    content: "";
    position: absolute;
    inset: 0;

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    z-index: 0;

    transform: scale(1);

    transition:
        transform 0.6s ease,
        filter 0.4s ease;
}


/* ==========================================================
   LIGHT OVERLAY - DEFAULT STATE
   ========================================================== */

.company-cards .company-card::after {
    content: "";
    position: absolute;
    inset: 0;

    background: rgba(255, 255, 255, 0.28);

    z-index: 1;

    transition: background 0.4s ease;
}


/* ==========================================================
   CARD 1 - WHAT WE STAND FOR
   ========================================================== */

.company-cards .company-card-1::before {
    background-image: none;
}


/* ==========================================================
   CARD 2 - OUR MISSION
   ========================================================== */

.company-cards .company-card-2::before {
    background-image: none;
}


/* ==========================================================
   CARD 3 - OUR VISION
   ========================================================== */

.company-cards .company-card-3::before {
    background-image: none;
}


/* ==========================================================
   CARD 4 - OUR STORY
   ========================================================== */

.company-cards .company-card-4::before {
    background-image: none;
}


/* ==========================================================
   CONTENT
   ========================================================== */

.company-cards .company-content {
    position: relative;
    z-index: 2;

    width: 100%;
}


/* ==========================================================
   HEADING
   ========================================================== */

.company-cards .company-card h4 {
    margin: 0;

    color: #25292b !important;

    transition:
        color 0.4s ease,
        margin-bottom 0.4s ease,
        transform 0.4s ease;
}


/* ==========================================================
   PARAGRAPH - HIDDEN INITIALLY
   ========================================================== */

.company-cards .company-card p {
    margin: 0;

    color: #25292b !important;

    opacity: 0;
    max-height: 0;

    overflow: hidden;

    transform: translateY(20px);

    transition:
        opacity 0.4s ease,
        max-height 0.6s ease,
        transform 0.4s ease,
        color 0.4s ease;
}


/* ==========================================================
   HOVER - DARKEN IMAGE
   ========================================================== */

.company-cards .company-card:hover::after {
    background: rgba(0, 0, 0, 0.64);
}


/* IMAGE ZOOM */

.company-cards .company-card:hover::before {
    transform: scale(1.07);
}


/* HEADING */

.company-cards .company-card:hover h4 {
    color: #ffffff !important;

    margin-bottom: 15px;

    transform: translateY(-3px);
}


/* SHOW COPY */

.company-cards .company-card:hover p {
    color: #ffffff !important;

    opacity: 1;
    max-height: 500px;

    transform: translateY(0);
}


/* Our Story card */
.company-card-3 {
    position: relative;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* Dark overlay over image */
.company-card-3::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 1;
}

/* Keep text above overlay */
.company-card-3 .company-content {
    position: relative;
    z-index: 2;
    color: #fff;
}

.company-card-3 .company-content h4,
.company-card-3 .company-content p {
    color: #fff;
}


/* ==========================================================
   MAKE ALL 4 BOXES SAME HEIGHT
   ========================================================== */

.company-cards > .col-md-6 {
    display: flex;
}

.company-cards > .col-md-6 > .company-card {
    width: 100%;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 991.98px) {

    .company-cards .company-card {
        min-height: 330px;
        padding: 35px;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767.98px) {

    .company-cards .company-card {
        min-height: 300px;
        padding: 30px;
    }

    .company-cards .company-card::after {
        background: rgba(0, 0, 0, 0.55);
    }

    .company-cards .company-card h4 {
        color: #ffffff !important;
        margin-bottom: 12px;
    }

    .company-cards .company-card p {
        color: #ffffff !important;

        opacity: 1;
        max-height: 600px;

        transform: translateY(0);
    }
}

/* Our Story - Darken background image */
.company-card-4 {
    position: relative;
    isolation: isolate;
}

.company-card-4::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: -1;
    border-radius: inherit;
}


/*****Locations ******/

.location-bullet {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 10px;
}

.locations {
    font-size: 12px;
    line-height: 26px;
    margin: 0 auto;
}


@media (min-width: 768px) {
    .locations {
        margin: 0;
    }
}


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

.image-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

    .image-container img {
        width: 100%;
        height: auto;
    }

.vertical-padding {
    padding-top: 20px;
    padding-bottom: 20px;
}

@media (min-width: 768px) and (max-width: 929px) {
    .ctaimage {
        flex-direction: column-reverse;
    }

    .article-text {
        order: 2;
    }

    .article-image {
        order: 1;
        width: 100%;
    }

        .article-image img {
            width: 100%;
            height: auto;
        }
}

.card {
    border: none;
    flex: 1 1 50%;
    display: flex;
}

@media (max-width: 992px) {
    .card {
        flex: 1 1 100%;
    }
}

.card-image {
    background-image: none;
    background-size: cover;
    background-position: center;
    height: 100%;
}

.card-img-top {
    height: 100%;
    object-fit: cover;
}

.card-group {
    display: flex;
    flex-wrap: wrap;
}

    .card-group > .card {
        margin-bottom: 0 !important;
    }

.card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 50px;
    text-align: left;
}

.column {
    float: left;
    width: 50%;
    padding: initial;
}

    .column img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

@media screen and (max-width: 900px) {
    .column {
        width: 50%;
    }
}

@media screen and (max-width: 900px) {
    .column {
        width: 100%;
    }
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.logo-row img {
    padding: 15px;
}

@media (min-width: 1200px) {
    .logo-row img {
        padding: 0 15px;
    }
}



@media (max-width: 768px) {
    .container-lg {
        width: 100%;
    }
}



.header {
    background-color: #4d94ff;
    color: #fff;
    padding: 20px;
    text-align: center;
}

.content {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    align-items: stretch;
}

h2, h3 {
    margin-top: 0;
}

.medium-hero {
    margin-bottom: 0; /* Ensure no margin below the hero image */
}

@media (max-width: 767px) { /* Media query for mobile devices */
    .medium-hero, .company, .company img {
        width: 100%;
        margin: 0;
    }

    .companymain {
        margin-bottom: 0;
    }

    .container-lg.vertical-padding {
        padding: 0; /* Adjust padding if needed */
    }

    .col-12 {
        padding: 0; /* Remove padding from columns */
    }

}

/* Flickity Styles */
.slider {
    margin: 0 auto;
}

.slider-item {
    margin-right: 10px;
    width: 72%;
    height: 500px;
    background-size: cover;
    background-position: center center;
    position: relative;
}

    .slider-item img {
        width: 100%;
        height: auto;
        display: block;
    }

.flickity-prev-next-button {
    background: #4054AC; /* Add background color */
    border: none;
    width: 44px;
    height: 42px;
    border-radius: 0 !important;
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
}

    .flickity-prev-next-button.previous {
        background-image: none;
        left: 12% !important; /* Adjust as needed */
    }

    .flickity-prev-next-button.next {
        background-image: none;
        right: 12% !important; /* Adjust as needed */
    }

    .flickity-prev-next-button .arrow {
        fill: white;
    }

.flickity-button:hover {
    border: none;
    width: 44px;
    height: 42px;
    /* border-radius: 50%; */
    border-radius: 0 !important;
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
}

.flickity-page-dots {
    bottom: 20px;
}

    .flickity-page-dots .dot {
        background: #fff;
    }