/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* Colors */

html {
    scroll-behavior: smooth;
}

.bg-dark-blue {
    background-color: var(--e-global-color-2b13763);
}

.bg-dark-green {
    background-color: #0C3F2F;
}

.text-yellow {
    color: var(--e-global-color-accent);
}

.text-white {
    color: #fff;
}

.text-grey {
    color: #BACFD8;
}

.outer-container {
    padding: 0px 30px;
}

.container {
    max-width: 1600px;
    margin: auto;
}

.small-container {
    max-width: 1200px;
    margin: auto;
}

.mw-700 {
    max-width: 700px;
    margin: auto;
}

.section-pad {
    padding: 120px 0px;
}

.section-pad-large-top {
    padding-top: 240px !important;
}

.text-center {
    text-align: center;
}

/* Margin */

.mb-0 {
    margin-bottom: 0;
}

/* Fonts */
.concierge h1 {
    font-family: var(--e-global-typography-27a0d29-font-family), Sans-serif;
    font-size: var(--e-global-typography-27a0d29-font-size);
    font-weight: var(--e-global-typography-27a0d29-font-weight);
    text-transform: var(--e-global-typography-27a0d29-text-transform);
    line-height: var(--e-global-typography-27a0d29-line-height);
    margin-bottom: 2rem;
}

.concierge .h2 {
    font-family: var(--e-global-typography-3494fef-font-family), Sans-serif;
    font-size: var(--e-global-typography-3494fef-font-size);
    font-weight: var(--e-global-typography-3494fef-font-weight);
    line-height: var(--e-global-typography-3494fef-line-height);
}

.concierge .h3 {
    font-family: var(--e-global-typography-c0689d3-font-family), Sans-serif;
    font-size: var(--e-global-typography-c0689d3-font-size);
    font-weight: var(--e-global-typography-c0689d3-font-weight);
    line-height: var(--e-global-typography-c0689d3-line-height);
}

.concierge .xl-body {
    font-family: var(--e-global-typography-7ab8c96-font-family), Sans-serif;
    font-size: var(--e-global-typography-7ab8c96-font-size);
    font-weight: var(--e-global-typography-7ab8c96-font-weight);
    line-height: var(--e-global-typography-7ab8c96-line-height);
}

.concierge .lg-body {
    font-family: var(--e-global-typography-3bd9a9f-font-family), Sans-serif;
    font-size: var(--e-global-typography-3bd9a9f-font-size);
    font-weight: var(--e-global-typography-3bd9a9f-font-weight);
    line-height: var(--e-global-typography-3bd9a9f-line-height);
}

.concierge .subhead {
    font-family: var(--e-global-typography-072d6bb-font-family), Sans-serif;
    font-size: var(--e-global-typography-072d6bb-font-size);
    font-weight: var(--e-global-typography-072d6bb-font-weight);
    line-height: var(--e-global-typography-072d6bb-line-height);
}


/* Timeline */

.timeline {
    position: relative;
    z-index: 0;
    padding-top: 240px;
    padding-bottom: 120px;
}


.timeline section {
    z-index: 2;
    position: relative;
    padding-top: 120px;
}

.TL-line {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0%);
    height: 100%;
    z-index: 1;
}

.TL-line::after {
    content: '';
    width: 2px;
    background-color: #fff;
    display: block;
    opacity: 0.6;
    height: 100%;
    z-index: 1;
}

.img-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    /* Spacing between images */
    max-width: 1200px;
    margin: auto;
}

.img-grid img {
    width: calc(33.333% - 14px);
    /* Adjusts for gap */
    height: auto;
    object-fit: cover;
}


.square-img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}


/* Split Container */
.split-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    /* Creates space between the two sections */
}

/* Left and Right Sections */
.split {
    flex: 1;
    /* Makes both sides equal */
    padding: 0px 20px;
}



.bg-container {
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: rgba(25, 46, 61, 0.9);
    box-shadow: 0 0 50px 50px rgba(25, 46, 61, 0.9);
}


/* Full width split section */

.split-section {
    display: flex;
    align-items: stretch;
    /* Ensures both sections are equal height */
    width: 100%;
    /* Full height of viewport */
}

.split-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px;
    background: white;
}

.split-image {
    flex: 1;
    overflow: hidden;
}

.split-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensures the image covers the entire section */
}




@media only screen and (max-width: 1024px) {
    .section-pad {
        padding: 80px 0px;
    }

    .img-grid img {
        width: calc(50% - 10px);
        /* Adjusts for gap */
    }

    .split-container {
        flex-direction: column;
        /* Stack on small screens */
        gap: 20px;
    }

    .split {
        padding: 0px;
        width: 100%;
    }

    .timeline {
        padding-top: 120px !important;
    }
}


@media only screen and (max-width: 767px) {

    .section-pad-large-top {
        padding-top: 140px !important;
    }

    .outer-container {
        padding: 0px 20px;
    }

    .img-grid img {
        width: 100%;
        /* Adjusts for gap */
    }

    .timeline {
        padding-top: 50px !important;
    }

}