/* here you can put your own css to customize and override the theme */


@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap');


body{
    background-color: white !important;
}

p {
    font-size: 16px;
}

.c-layout-page{
    background-color: white;
}


/*------------------------------------------------------------------
  	[Camera Location]   
------------------------------------------------------------------*/

.#map {
    width: 100%;
    height: 60vh; /* or height: 60%; if you prefer */
    float: left;
}

.tools-container {
    width: 100%;
    height: 60vh; /* or height: 60%; if you prefer */
    float: left;
    overflow-y: auto; /* This adds a vertical scrollbar if content overflows */
}

@media (max-width: 767px) {

    #map {
        width: 100%;
        height: 50vh !important;
    }

    .tools-container {
        margin-top: 1rem;
        width: 100%;
        height: auto; 
    }
}


@media (min-width: 768px) {
}














    /*------------------------------------------------------------------
  	[Camera Registry]   /*Logo Display
------------------------------------------------------------------*/

    #registryContactAccordion .panel > .panel-heading > .panel-title > a {
    color: #3f444a !important;
}

#registryContactAccordion .c-content-accordion-1 .panel > .panel-heading > .panel-title > a.collapsed:hover, .c-content-accordion-1 .panel > .panel-heading > .panel-title > a.collapsed:focus {
    color: #3f444a !important;    
    transition: all 0.2s;
}

#registryContactAccordion .c-content-accordion-1 .panel > .panel-heading > .panel-title > a {
    color: #3f444a !important;
}

.c-content-person-1.c-option-2 .c-body {
    padding-top: 30px;
    padding-bottom: 30px;
    background: #fff;
    min-height: 100px; /* Adjust height as necessary */
}


/*------------------------------------------------------------------
  	[Camera Registry]   
------------------------------------------------------------------*/

.error-outline {
    border: 2px solid red !important; /* Red outline */
}

.short-top{
    padding-top: 20px !important;
}

.input-group-text {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.centered-container {
    width: 60%;
    margin: 0 auto; /* Center the container horizontally */
}

.centered-container-xl {
    width: 80%;
    margin: 0 auto; /* Center the container horizontally */
}

.centered-container-xxl {
    width: 80%;
    margin: 0 auto; /* Center the container horizontally */
}

.form-container label,
.form-container .form-control {
    text-align: left; /* Ensure text is left-aligned */
}


.stepper [data-kt-stepper-action=add-another] {
    display: none;
}

.stepper.last [data-kt-stepper-action=add-another] {
    display: inline-block;
}

.form-control.era-modal {
    height: 50.0167px !important;
}

.input-group-text.rounded-left {
    border-top-right-radius: 0; /* Adjust the radius as needed */
    border-bottom-right-radius: 0; /* Adjust the radius as needed */
    border-top-left-radius: 0.475rem !important; /* Adjust the radius as needed */
    border-bottom-left-radius: 0.475rem !important; /* Adjust the radius as needed */
}

.input-group-text.rounded-right {
    border-top-left-radius: 0; /* Adjust the radius as needed */
    border-bottom-left-radius: 0; /* Adjust the radius as needed */
    border-top-right-radius: 0.475rem !important; /* Adjust the radius as needed */
    border-bottom-right-radius: 0.475rem !important; /* Adjust the radius as needed */
}

.form-input-rounded-right {
    border-top-right-radius: 0.475rem !important; /* Adjust the radius as needed */
    border-bottom-right-radius: 0.475rem !important; /* Adjust the radius as needed */
}



@media (max-width: 768px) {
    .stepper-label {
        display: none !important;
    }

    .c-content-accordion-1 .panel > .panel-collapse > .panel-body {
        padding: 0px 0px 15px 0px;
    }

    .c-content-accordion-1 .panel > .panel-heading > .panel-title > a {
        padding: 30px 10px 25px 10px;
    }

    .desktop-form-padding {
        padding-left: 20px;
        padding-right: 20px;
    }



    /* Adjust stepper icon size and spacing for smaller screens */
    /*.stepper-icon {
        width: 30px;
        height: 30px;
    }*/

    /* Reduce spacing between step items */
    .stepper-item {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }


    .centered-container {
        width: 100%;
    }

    .centered-container-xl {
        width: 100%;
    }

    .centered-container-xxl {
        width: 100%;
    }

    .svg-icon img {
        /* Retain original size on smaller screens */
        width: 29.5px !important;
        height: 29.5px !important;
    }

    .input-group .input-group-text {
        font-size: 1.1rem; 
    }

/*    .form-control.era-modal {
        height: 40.4px !important;
    }
*/
    .screen-margin{
        margin-top: 0px !important;
    }

    .form-select.era-modal {
        height: 50.0167px !important;
    }

    #floorplan {
        line-height: 2.3 !important;
    }

    .col-md-6 .era-modal#floorPlan {
        line-height: 2.3 !important; /* Adjusts the line height for the input field */
    }

    #retentionPeriod-right {
        line-height: 2.25 !important;
    }

    #reviewSeparator{
        display: none !important;
    }

    .card-less-padding {
        padding-left: 0 !important; /* Override left padding */
        padding-right: 0 !important; /* Override right padding */
        padding-bottom: 0 !important;
    }
    .col-redued-padding {
        padding-left: 5px !important; 
        padding-right: 5px !important; 
    }
}

@media (min-width: 768px) {
    .mobile-div {
        display: none; /* Hide on larger screens */
    }

    .desktop-form-padding {
        padding-left: 60px;
        padding-right: 60px;
    }

}


@media (max-width: 767px) {
    .desktop-div {
        display: none; /* Hide on smaller screens */
    }
}



/*------------------------------------------------------------------
  	[Top bar]   /*Logo Display
------------------------------------------------------------------*/

    /* Initially hide the logo */
    .c-layout-header .c-brand .c-desktop-logo {
        display: none !important;
    }

    /* On scroll, hide the inverse logo and show the regular logo */
    .c-page-on-scroll.c-layout-header-fixed .c-layout-header .c-brand .c-desktop-logo {
        display: block !important;
    }

    .c-page-on-scroll.c-layout-header-fixed .c-layout-header .c-brand .c-desktop-logo-inverse {
        display: none !important;
    }

    /* Ensure that logos are handled properly on smaller screens */
    @media (max-width: 1000px) {
        /* Adjust the display for mobile screens */
        .c-layout-header .c-brand .c-desktop-logo {
            display: none !important; /* or block, depending on your design */
        }

        .c-page-on-scroll.c-layout-header-fixed .c-layout-header .c-brand .c-desktop-logo {
            display: none !important; /* Ensures no extra logo on scroll */
        }

        .c-page-on-scroll.c-layout-header-fixed .c-layout-header .c-brand .c-desktop-logo-inverse {
            display: block !important; /* Ensure the correct logo is shown */
        }
    }

    @media (min-width: 992px) {
        .c-page-on-scroll.c-layout-header-fixed .c-layout-header .c-brand {
            margin-top: 13.5px !important;
            margin-bottom: 13.5px !important;
        }
    }


    .header-navigation {
        font: 15px 'Inter', sans-serif;
        margin: 0 10px 0 0;
        padding: 0;
        float: left;
        text-transform: uppercase;
    }

    .border-left-login {
        border-left: solid 1px #d8d8d8;
    }

    .c-content-box.c-size-md {
        padding: 60px 0;
    }

    .header {
        display: flex;
        align-items: center; /* Center items vertically */
        justify-content: flex-end; /* Align items to the right */
        height: 100px; /* Adjust according to your header height */
        position: relative;
    }

    c-menu-type-classic.dropdown {
        border-bottom: none;
    }


    /* Apply Roboto font globally */
    body {
        font-family: 'Inter', sans-serif !important;
        background: white;
    }

    /* Example for other elements */
    h1, h2, h3, p {
        font-family: 'Inter', sans-serif !important;
    }

    p {
        font-family: 'Inter', sans-serif !important;
        font-weight: 400;
    }


    .header {
        margin-bottom: 0px;
    }


    .site-logo {
        float: left;
        font-size: 23px;
        font-weight: 400;
        margin-right: 67px;
        padding-top: 18px;
        padding-bottom: 18px;
    }

@media (max-width: 991px) {
    .c-layout-header .c-brand {
        margin: 0; /* Remove existing margin */
        padding-top: 10px; /* Add some padding if necessary */
        padding-bottom: 10px; /* Add some padding if necessary */
        padding-right: 15px;
        padding-left: 15px;
        height: 65px; /* Match the height of the navbar */
        display: flex; /* Use flexbox for alignment */
        align-items: center; /* Center vertically */
        justify-content: space-between; /* Optional, space between items */
    }

    .era-theme-gray.h-115px {
        height: 65px !important; /* Change height for smaller screens */
    }

}



/*------------------------------------------------------------------
  	[Home Page About]   /*About
------------------------------------------------------------------*/


    /* Styles for smaller screens */
    @media (max-width: 768px) {

        .quote-media {
            display: none;
        }

        .c-tab-pane h4.c-font-30 {
            font-size: 20px !important;
        }

        .c-content-media-2 {
            min-height: 250px !important; /* Reduce the image height */
            background-size: cover; /* Ensure the image fits within the container */
        }

        video {
            min-height: 250px !important; /* Reduce the video height */
        }

        .c-content-media-2-slider {
            margin-bottom: 0;
        }
    }


/*------------------------------------------------------------------
  	[Form Submission Response]   /*Toast
------------------------------------------------------------------*/

    /* Customizing the toastr container */
    #toast-container > .toast {
        background-color: #333; /* Background color */
        color: #fff; /* Text color */
        border-radius: 8px; /* Rounded corners */
        padding: 15px; /* Padding */
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* Shadow effect */
    }

    /* Customizing success notification */
    #toast-container > .toast-success {
        background-color: #4CAF50; /* Success background color */
    }

    /* Customizing error notification */
    #toast-container > .toast-error {
        background-color: #F44336; /* Error background color */
    }

    /* Customizing the close button */
    #toast-container > .toast > .toast-close-button {
        color: #fff; /* Close button color */
        font-size: 16px; /* Close button size */
    }

    .toast-top-right-navbar {
        top: 65px; /* Adjusts the position to be 65px below the top of the viewport */
        right: 10px; /* Aligns the notification to the right side */
        position: fixed; /* Keeps it fixed in the viewport */
        z-index: 9999; /* Ensures it is on top of other elements */
    }



    /* Ensure the icon and text alignment */
    .toast-body {
        display: flex; /* Use Flexbox for alignment */
        align-items: center; /* Center items vertically */
    }

        .toast-body .toast-icon {
            margin-right: 20px !important; /* Space between icon and text */
        }

        .toast-body .toast-message {
            margin: 0; /* Remove default margin */
            font-size: 16px; /* Custom text size */
        }


    .toast-message {
        margin-left: 30px; /* Space between icon and text */
    }


    .mobi-toggler {
        margin-top: 20px !important;
    }


    .header-navigation > ul > li > a {
        padding: 25px 12px 25px;
    }

    .service-box p {
        color: #212121;
        font-size: 15px;
    }

    .component-padding {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .component-top {
        padding-top: 60px;
    }

    .component-top-small {
        padding-top: 30px;
    }


    .component-bottom {
        padding-bottom: 30px;
    }

    .recent-work-container {
        display: flex; /* Added */
        flex-wrap: wrap; /* Added */
        justify-content: space-between; /* Added */
    }

    .recent-work-item {
        flex: 0 0 24%; /* Added */
        box-sizing: border-box; /* Added */
        margin-bottom: 20px; /* Added */
        padding-left: 10px; /* Added */
    }

        .recent-work-item em img {
            max-width: 100%;
            height: auto;
            display: block;
        }

    .recent-work-description {
        display: block;
        text-align: left;
        margin-top: 10px;
    }


    .client-item {
        width: 50% !important;
    }

    .carousel-video-wrapper {
        position: relative;
        width: 100%;
        overflow: hidden;
        /* You can adjust height based on your design */
        height: auto;
    }

        .carousel-video-wrapper video {
            width: 100%;
            height: auto; /* Ensures the video scales correctly */
        }




    .carousel-slider .carousel-title-hero {
        font-size: 40px;
        font-weight: 400;
        font-family: "Montserrat", sans-serif;
        line-height: 1.4;
        color: #4A4A4A;
        text-align: center;
        text-transform: uppercase;
    }


    /* Carousel Subtitles */
    .carousel-slider .carousel-subtitle-hero {
        display: block;
        font-size: 40px;
        font-weight: 400;
        line-height: 1.4;
        color: #4A4A4A;
    }

    .border-top-bottom {
        border-top: 1px solid white;
        border-bottom: 1px solid white;
        padding: 3px 0;
    }





/*------------------------------------------------------------------
  	[Promo Section]   /*image Comparison
------------------------------------------------------------------*/
    @media (max-width: 991px) {
        .promo-section .promo-section-col {
            padding-top: 100px;
            padding-bottom: 100px;
        }
    }

    @media (min-width: 992px) {
        .promo-section {
            position: relative;
            height: 400px;
        }

            .promo-section .promo-section-col {
                width: 45%;
            }

            .promo-section .promo-section-img-left {
                position: absolute;
                top: 0;
                right: 50%;
            }

            .promo-section .promo-section-img-right {
                position: absolute;
                left: 50%;
            }

            .promo-section .ver-center {
                display: table;
                height: 400px;
            }

            .promo-section .ver-center-aligned {
                display: table-cell;
                vertical-align: middle;
            }
    }

    .ba-slider img {
        width: 100%;
    }



    /*image Comparison
*/
    @import "lesshat";

    .ba-slider {
        position: relative;
        overflow: hidden;
    }

        .ba-slider img {
            width: 100%;
            display: block;
        }

    .resize {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 50%;
        overflow: hidden;
    }


    .handle { /* Thin line seperator */
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 4px;
        margin-left: -2px;
        background: rgba(0,0,0,.5);
        cursor: ew-resize;
    }

        .handle:after {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 32px; /* Adjusted width */
            height: 32px; /* Adjusted height */
            margin: -16px 0 0 -16px; /* Center the handle */
            font-size: 18px; /* Adjusted font size for the arrow */
            line-height: 32px; /* Ensure the line height matches the height */
            text-align: center; /* Center text horizontally */
            display: flex; /* Use flexbox to center content */
            justify-content: center; /* Center horizontally */
            align-items: center; /* Center vertically */
            content: '\21d4'; /* Double-sided arrow */
            color: white;
            font-weight: bold;
            background: #ffb800; /* Orange background */
            border: 1px solid #e6a600; /* Darker border */
            border-radius: 50%; /* Circular shape */
            transition: all 0.3s ease;
            box-shadow: 0 2px 6px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.5), inset 0 60px 50px -30px #ffd466; /* Shadow effect */
        }

    .draggable:after {
        width: 48px;
        height: 48px;
        margin: -24px 0 0 -24px;
        line-height: 48px;
        font-size: 30px;
    }


    .icon-size {
        max-width: 85px;
        height: 85px;
    }


    div.component-padding:nth-child(1) > div:nth-child(1) > h3:nth-child(1) {
        margin-bottom: 15px;
        margin-bottom: 10px;
    }

    div.component-padding:nth-child(1) > div:nth-child(1) > p:nth-child(2) {
        margin-bottom: 15px;
        margin-top: 10px;
    }

    .c-content-feature-10 > div > h3 {
        margin-bottom: 15px;
    }

    .c-content-feature-10 > div > p {
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .c-content-title-1 > div > h3 {
        margin-bottom: 15px !important;
    }

    .c-content-title-1 > div > p {
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }

    .c-content-feature-16 .c-feature-16-container {
        padding: 40px 60px;
    }

    .c-content-accordion-1.c-theme .panel > .panel-heading > .panel-title > a {
        /*    background-color: #32c5d2;
*/
    }


    /*Hero image
*/
    .carousel-slider .item {
        height: calc(100vh - 50px);
    }

    .content-slider .carousel-indicators {
        width: 100vw;
    }

    .page-slider .carousel-indicators {
        width: 100% !important;
        left: 0 !important;
        margin-left: 0 !important;
    }

    .background-container {
        background-color: #F5F5DC;
    }


    .header-container {
        background-color: #F5F5DC;
    }


    .header-container {
        background-color: #F5F5DC;
        padding-bottom: 1rem !important
    }

    .background-padding-15 {
        background-color: #F5F5DC;
        padding-bottom: 4rem !important
    }

    .c-btn-red {
        border-color: #F1593D;
        color: #ffffff;
        background: #F1593D;
        border-color: #eb5d68;
    }






/*------------------------------------------------------------------
  	[SignUp Section]   /*SignUp
------------------------------------------------------------------*/

/*    #signup-container {
        background-color: var(--era-theme-light);
    }
*/
.c-content-box.c-size-md.signup-container {
    padding: 15px 0;
}

.c-content-pricing-1 .c-content {
    padding-top: 10px;
    padding-bottom: 10px;
}

    .c-content-pricing-1 .c-content > .c-row {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-right: 0 !important;
        padding-left: 0 !important;
        min-height: 50px; 
    }

    .c-content-pricing-1 .c-content.c-column-odd,
    .c-content-pricing-1 .c-content.c-column-even {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .c-content-pricing-1 .c-content > .c-row.c-type {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .c-content-pricing-1 .c-content > .c-row.c-title {
        padding-top: 10px;
        padding-bottom: 10px;
    }

.c-content-pricing-1.c-opt-2 .c-content.c-column-even {
    background: rgba(112, 128, 144, 0.09);
}

.c-content-pricing-1.c-opt-2 .c-content > .c-row {
    color: black;
    border-top-color: rgba(112, 128, 144, 0.1);
}

    .c-content-pricing-1.c-opt-2 .c-content > .c-row.c-type {
        color: black;
    }

    .c-content-pricing-1.c-opt-2 .c-content > .c-row.c-title {
        color: black;
    }

    .c-content-pricing-1.c-opt-2 .c-content > .c-row.c-dollar {
        color: #5b5f84;
    }

    .c-content-pricing-1.c-opt-2 .c-content > .c-row > .fa.fa-check {
        color: #75c199;
    }

    .c-content-pricing-1.c-opt-2 .c-content > .c-row > .fa.fa-times {
        color: #ff6b57;
    }

.signup-title {
    color: black;
}

.signup-note {
    color: black;
}


.c-empty {
    padding: 0 !important;
}

.c-content-pricing-1 .c-content > .c-row > .c-sub-title {
    display: none;
}

.c-content-pricing-1 {
    display: flex;
    flex-wrap: wrap;
}


/* Hide the first column only on smartphones in portrait view */
@media (max-width: 767px) and (orientation: portrait) {
    .c-content-pricing-1 > .col-md-3:first-of-type {
        display: none;
    }

    .c-content-pricing-1 > .col-md-3:not(:first-of-type) .c-sub-title {
        display: block;
    }
}

/* Show all columns on other screen sizes */
@media (min-width: 768px), (orientation: landscape) {
    .c-content-pricing-1 > .col-md-3 {
        display: block;
    }

        .c-content-pricing-1 > .col-md-3 .c-sub-title {
            display: none;
        }
}


















    /* Custom styles for accordion-container */
    .accordion-container .panel {
        /* Add your styles here to override the main CSS */
        background-color: #fff; /* Example: Override background color */
    }

    .accordion-container .panel-heading {
        /* Add your styles here to override the main CSS */
        background-color: #f5f5f5; /* Example: Override heading background */
    }

    .accordion-container .panel-title a {
        /* Add your styles here to override the main CSS */
        color: #333; /* Example: Override link color */
        font-weight: bold; /* Example: Override font weight */
    }

    .accordion-container .panel-body {
        /* Add your styles here to override the main CSS */
        padding: 15px; /* Example: Override padding */
        color: #555; /* Example: Override text color */
    }

    /* Repeat for accordion-container-2 if needed */
    .accordion-container-2 .panel {
        /* Add your styles here to override the main CSS */
        background-color: #fff; /* Example: Override background color */
    }

    .accordion-container-2 .panel-heading {
        /* Add your styles here to override the main CSS */
        background-color: #f5f5f5; /* Example: Override heading background */
    }

    .accordion-container-2 .panel-title a {
        /* Add your styles here to override the main CSS */
        color: #333; /* Example: Override link color */
        font-weight: bold; /* Example: Override font weight */
    }

    .accordion-container-2 .panel-body {
        /* Add your styles here to override the main CSS */
        padding: 15px; /* Example: Override padding */
        color: #555; /* Example: Override text color */
    }

    .definition-container {
        max-width: 800px;
        margin: 50px auto;
        padding: 20px;
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        border-radius: 8px;
    }

    .definition {
        border-left: 4px solid #007BFF;
        padding: 10px 15px;
        margin-bottom: 20px;
        background-color: #f9f9f9;
        border-radius: 5px;
    }

        .definition h3 {
            margin-top: 0;
            color: #007BFF;
        }

        .definition p {
            margin: 0;
        }

    .c-custom-font {
        font-size: 18px !important;
    }

    .c-content-client-logos-1 .c-logo img {
        max-width: 50%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    .c-content-client-logos-1 .c-img-pos {
        position: relative;
        left: 0;
        margin-left: 0px;
    }

    .c-content-client-logos-1 .c-logo-1.no-border {
        border-right: none;
        border-bottom: none;
    }


    .c-theme-bg {
        background-color: #FF5733 !important;
        /*    background-color: #32c5d2 !important;
*/
    }


    .c-content-testimonial-2 {
        background: #F5F5DC;
        padding: 50px 30px 50px 30px;
    }

    .imagecontour.effect2 {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%; /* or any specific height you need */
    }

        .imagecontour.effect2 img {
            max-width: 60%;
            height: auto;
        }


/*------------------------------------------------------------------
  	[Isotope Grid 4 by 4]   /*Different Screen Sizes
------------------------------------------------------------------*/

    .c-content-feature-11 .c-grid > .c-grid-row > li > .c-bg-opacity-1 {
        background-color: #FF5733;
    }

    .c-content-feature-11 .c-grid > .c-grid-row > li > .c-card {
        /*    padding: 50px;
*/
    }

    .c-content-isotope-grid.c-opt-1 .c-content-isotope-item {
        width: 50%; /* Ensure each item takes 50% width to align two per row */
        float: left; /* Ensure the items float to the left */
        padding: 10px; /* Add some padding for spacing between items */
    }

    .c-content-isotope-image-container {
        position: relative;
        width: 100%;
    }

    .c-content-isotope-image {
        width: 100%;
        height: auto;
    }

    .c-content-isotope-grid.c-opt-1 .c-content-isotope-item .c-content-isotope-image-container {
        padding: 0px;
    }


    /*------------------------------------------------------------------
  	[Partners Page]   /*Isotope Grid 2 by 1
------------------------------------------------------------------*/


    .c-content-isotope-grid.c-opt-3 .c-content-isotope-item {
        width: 50%; /* Ensure each item takes 50% width to align two per row */
        padding: 10px; /* Add some padding for spacing between items */
        border: none !important;
    }

        .c-content-isotope-grid.c-opt-3 .c-content-isotope-item.col-12 {
            width: 100%; /* Full width for the item that spans the entire row */
            box-shadow: none !important;
        }

    .c-content-isotope-grid.c-opt-3 {
        margin: -10px;
    }

        /* Adjust item width and padding */
        .c-content-isotope-grid.c-opt-3 .c-content-isotope-item {
            padding: 10px; /* Add padding for spacing between items */
        }

            /* Style for double-sized items (50% width) */
            .c-content-isotope-grid.c-opt-3 .c-content-isotope-item.c-item-size-double {
                width: 50%;
            }

            /* Style for image container */
            .c-content-isotope-grid.c-opt-3 .c-content-isotope-item .c-content-isotope-image-container {
                position: relative; /* Required for overlay positioning */
                padding: 7px;
                background-color: #fff;
                border: none !important;
                width: 100%;
            }

                /* Style for images */
                .c-content-isotope-grid.c-opt-3 .c-content-isotope-item .c-content-isotope-image-container .c-content-isotope-image {
                    width: 100%;
                    height: auto;
                }

                .c-content-isotope-grid.c-opt-3 .c-content-isotope-item .c-content-isotope-image-container .c-content-isotope-overlay {
                    position: absolute;
                    width: 100%;
                    height: 25%; /* Adjust height to 25% of the container's height */
                    bottom: 0; /* Position at the bottom of the container */
                    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
                    opacity: 0;
                    transition: opacity 0.2s ease-in-out;
                    display: flex; /* Align content within overlay */
                    align-items: center; /* Center content vertically */
                    justify-content: center; /* Center content horizontally */
                    text-align: center; /* Center text horizontally */
                    top: auto !important; /* Override theme's top positioning */
                    left: auto !important; /* Override theme's left positioning */
                }

                /* Style for overlay content */
                .c-content-isotope-grid.c-opt-3 .c-content-isotope-item .c-content-isotope-image-container .c-content-isotope-overlay-content {
                    width: 80%;
                    color: #fff; /* White text color */
                }

                    /* Style for overlay buttons */
                    .c-content-isotope-grid.c-opt-3 .c-content-isotope-item .c-content-isotope-image-container .c-content-isotope-overlay-content > .c-content-isotope-overlay-btn {
                        margin: 10px 0 0 0;
                    }

                        .c-content-isotope-grid.c-opt-3 .c-content-isotope-item .c-content-isotope-image-container .c-content-isotope-overlay-content > .c-content-isotope-overlay-btn:first-child {
                            margin-top: 0;
                        }

                /* Hover effect for image container */
                .c-content-isotope-grid.c-opt-3 .c-content-isotope-item .c-content-isotope-image-container:hover {
                    box-shadow: none !important;
                }

                    /* Overlay hover effect */
                    .c-content-isotope-grid.c-opt-3 .c-content-isotope-item .c-content-isotope-image-container:hover .c-content-isotope-overlay {
                        opacity: 1;
                        cursor: pointer;
                    }

    /* Target the specific columns */
    .specific-column {
        display: flex;
        justify-content: center;
        align-items: center;
    }

        /* Set the height of the image columns to match the text column's height */
        .specific-column .imagecontour.effect3 {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 95%; /* Ensure the image container scales with the text column */
            width: 100%; /* Scale proportionally within the container */
        }

            /* Scale the images to fit within the column without distortion */
            .specific-column .imagecontour.effect3 img {
                max-width: 100%;
                max-height: 100%; /* Ensure images fit within the column */
                object-fit: contain; /* Prevent distortion */
            }

        .specific-column .imagecontour.effect4 {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50%; /* Ensure the image container scales with the text column */
            width: auto; /* Scale proportionally within the container */
        }

            /* Scale the images to fit within the column without distortion */
            .specific-column .imagecontour.effect4 img {
                max-width: 100%;
                max-height: 100%; /* Ensure images fit within the column */
                object-fit: contain; /* Prevent distortion */
            }

    .c-content-media-1.less-padding {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    /* Ensure the text column doesn't change size */
    .text-column .c-content-media-1 {
        height: auto; /* Let the text define its own height */
    }

    /* Maintain the original size of the text */
    .text-column h3 {
        font-size: 25px;
        line-height: 34px;
    }


    .c-mega-menu.c-mega-menu-mobile.c-fonts-uppercase.c-fonts-sbold > .navbar-nav.c-theme-nav > .c-menu-type-classic.dropdown > .dropdown-menu > .dropdown-item > a {
        /* Add your styles here */
    }



    .menu-login.c-menu-type-classic {
    }



/*------------------------------------------------------------------
  	[Parallax Bars]   
------------------------------------------------------------------*/

    .parallax-container {
        min-height: 80vh !important;
        max-height: 200px;
    }

    /*.parallax-bars-container {
    min-height: 25vh !important;
    max-height: 200px;
}
*/
    .parallax-bars-container {
        min-height: 25vh;
        max-height: 200px;
        height: 25vh; /* Ensures it follows the viewport height rule */
    }

    .c-content-bar-4 > h3 {
        display: inline-block;
        color: #ffffff;
        font-weight: 500;
        font-size: 40px;
        line-height: 50px;
        margin: 69.933px auto 69.933px auto;
        padding: 20px;
        border: 2px solid rgba(255, 255, 255, 0.15);
    }



    @media (max-width: 1000px) {

        .parallax-bars-container {
            display: none;
        }
    }


/*------------------------------------------------------------------
  	[Spotlight]   
------------------------------------------------------------------*/


    .c-body.spotlight {
        padding-top: 30px !important;
        padding-bottom: 80px !important;
    }

    @media (max-width: 1000px) {

        #spotlight {
            padding-bottom: 0px !important;
        }

        .c-socials {
            display: none !important;
        }
    }

@media (max-width: 767px) {

    .c-content-person-1.c-option-2 .c-body {
        padding-left: 15px;
        padding-right: 15px;
    }
}







/*------------------------------------------------------------------
  	[Tab Section Home Page]   
------------------------------------------------------------------*/
.custom-tab-image {
    max-height: 312px;
    width: auto;
}

    .custom-font-color {
        color: var(--bs-body-color);
    }


    #c-tab2-opt1-one .c-tab-pane p {
        color: var(--bs-body-color);
    }

    #c-tab2-opt1-two .c-tab-pane p {
        color: var(--bs-body-color);
    }

    #c-tab2-opt1-three .c-tab-pane p {
        color: var(--bs-body-color);
    }

    #c-tab2-opt1-four .c-tab-pane p {
        color: var(--bs-body-color);
    }

    #c-tab2-opt1-five .c-tab-pane p {
        color: var(--bs-body-color);
    }

    .c-content-tab-2 > .c-tab-content .c-tab-pane > img {
        border: none !important;
    }


    .c-content-tab-2 .tab-pane .c-tab-pane .c-caption.c-content-overlay .c-overlay-object {
        float: right;
        margin-left: 100px;
        padding: 5px;
    }

    .c-content-tab-2 .tab-pane .c-tab-pane a img.custom-tab-image {
        float: right;
        margin-left: 100px;
        padding: 5px;
    }

    @media (max-width: 1000px) {

        .c-content-tab-2 > .nav {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto; /* Allow horizontal scrolling if necessary */
        }

            .c-content-tab-2 > .nav > li {
                flex: 1 0 auto; /* Allow items to shrink and grow */
                text-align: center;
                margin: 0;
            }

                .c-content-tab-2 > .nav > li > a {
                    padding: 10px;
                    font-size: 14px; /* Smaller font size */
                }

                    .c-content-tab-2 > .nav > li > a > .c-title {
                        font-size: 17px; /* Smaller title size */
                    }

                    .c-content-tab-2 > .nav > li > a > .icon-size {
                        width: 40px; /* Smaller icon size */
                        height: auto; /* Smaller icon size */
                    }

                    /*.c-content-tab-2 > .nav > li.active > .c-arrow {
                display: none;*/ /* Hide arrow on small screens */
                    /*}*/

                    .c-content-tab-2 > .nav > li > a > .c-title {
                        margin: 5px 0;
                    }


        .c-content-tab-2 > .c-tab-content .tab-content {
            padding: 40px 0;
            overflow: auto;
        }


        .c-content-tab-2 .tab-pane .c-tab-pane a img.custom-tab-image {
            float: right;
            margin-left: 100px;
        }

        #c-tab2-opt1-three .c-tab-pane img.custom-tab-image {
            float: right;
            margin-left: 100px;
        }

        .c-content-tab-2 > .c-tab-content .c-tab-pane > img {
            float: right;
            margin-left: 100px;
        }

        .custom-tab-image {
            width: 100%;
            max-width: 250px; /* Adjust this value as needed */
            height: auto; /* Maintain aspect ratio */
        }

        #c-tab2-opt1-one .custom-tab-image {
            max-width: 150px; /* Set the max width for this specific image */
        }

        #c-tab2-opt1-four .custom-tab-image {
            max-width: 150px; /* Set the max width for this specific image */
        }
    }

    /* Ensure that the menu items are on the same row and make them smaller */
    @media (max-width: 767px) {

        .c-content-tab-2 > .c-tab-content .tab-content {
            padding: 40px 0;
        }

        .c-content-tab-2 > .nav {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto; /* Allow horizontal scrolling if necessary */
        }

            .c-content-tab-2 > .nav > li {
                flex: 1 0 auto; /* Allow items to shrink and grow */
                text-align: center;
                margin: 0;
            }

                .c-content-tab-2 > .nav > li > a {
                    padding: 10px;
                    font-size: 14px; /* Smaller font size */
                }

                    .c-content-tab-2 > .nav > li > a > .c-title {
                        font-size: 17px; /* Smaller title size */
                    }

                    .c-content-tab-2 > .nav > li > a > .icon-size {
                        width: 30px; /* Smaller icon size */
                        height: auto; /* Smaller icon size */
                    }

                .c-content-tab-2 > .nav > li.active > .c-arrow {
                    display: none; /* Hide arrow on small screens */
                }

                .c-content-tab-2 > .nav > li > a > .c-title {
                    margin: 5px 0;
                }

        .c-content-tab-2 .tab-pane .c-tab-pane a img.custom-tab-image {
            display: block;
            float: none;
            margin-left: 0;
        }

        #c-tab2-opt1-three .c-tab-pane img.custom-tab-image {
            float: none;
            display: block; /* Ensure the image is displayed as a block element */
            margin: 0 auto; /* Center the image horizontally */
        }

        .c-content-tab-2 > .c-tab-content .c-tab-pane > img {
            float: none;
            display: block;
            margin: 0 auto;
        }

        .custom-tab-image {
            width: 100%;
            max-width: 250px; /* Adjust this value as needed */
            height: auto; /* Maintain aspect ratio */
        }

        #c-tab2-opt1-one .custom-tab-image {
            max-width: 150px; /* Set the max width for this specific image */
        }

        #c-tab2-opt1-four .custom-tab-image {
            max-width: 150px; /* Set the max width for this specific image */
        }
    }


    /*------------------------------------------------------------------
  	[HOME HERO]   
------------------------------------------------------------------*/


    .hero-section {
        background-color: #708090; /* SlateGray background */
        height: 100vh; /* Full viewport height */
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        padding: 0;
    }

    .content-wrapper {
        display: grid;
        grid-template-columns: repeat(9, 1fr); /* 9 virtual columns */
        width: 100%;
        align-items: center;
        justify-items: center;
        /* Confines content to middle third of the viewport */
        position: absolute;
        top: 15%; /* Start at the middle 1/3 */
        /*bottom: 33.33%;*/ /* End at the bottom of the middle 1/3 */
    }

    .text-block {
        grid-column: 2 / span 3; /* Spans columns 2, 3, and 4 */
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .image-block {
        grid-column: 6 / span 3; /* Spans columns 6, 7, and 8 */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #experience-text, #community-text {
        margin: 0;
        white-space: nowrap;
    }

    .hero-logo {
        max-width: 100%;
        height: auto;
    }

    .main-logo {
        max-width: 80%;
        height: auto;
    }

    /* Font sizing logic */
    #experience-text {
        font-size: calc(1vw + 1rem);
    }

    #community-text {
        font-size: calc(1vw + 1rem);
        border-top: 2px solid #fff;
        border-bottom: 2px solid #fff;
    }

    /* Skyline Carousel */
    .skyline-carousel {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 35vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .skyline-image {
        /*    width: 75vw !important;
    max-height: 500px !important;
    height: auto !important;
    object-fit: cover !important;

*/
        position: absolute;
        bottom: -3px;
        max-height: 100%;
        max-width: 100%;
        opacity: 0;
        transition: opacity 2s ease-in-out;
    }

        .skyline-image.active {
            opacity: 1;
        }


    @media (max-width: 767px) {
        /* Adjust padding/margin for the section to create space on the sides */
        .hero-section {
            padding-left: 15px;
            padding-right: 15px;
            height: 70vh;
        }

        /* Adjust content wrapper to ensure blocks are stacked with space in between */
        .content-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 20px; /* Space between text block and image block */
        }

        /* Text block adjustments */
        /*    .text-block {
        padding: 10px;
        font-size: 1rem;  
        line-height: 1.5rem; 
    }
*/
        /* Adjust the logo size inside the text block */
        .text-block img.hero-logo {
            width: 80%;
            max-width: 350px;
            height: auto;
        }

        /* Image block adjustments */
        .image-block img.main-logo {
            width: 70%; /* Scale down the image */
            max-width: 300px; /* Set a max width */
            height: auto;
        }

        /* Add space between image and text block */
        .image-block {
            margin-top: 10px;
        }
    }







    .dropdown-toggle {
        background: none; /* Removes any background image or style */
        content: none; /* Removes any pseudo-element content */
    }

        /* Specifically for the arrow in Bootstrap or similar frameworks */
        .dropdown-toggle::after {
            display: none; /* Hides the arrow pseudo-element */
        }





























    /*------------------------------------------------------------------
  	[Enage Bars]   /*Different Screen Sizes
------------------------------------------------------------------*/

    @media (max-width: 767px) {

        .c-content-bar-4 > h3 {
            font-size: 20px;
            line-height: 25px;
            margin: 30px auto 30px auto;
        }
    }

/*------------------------------------------------------------------
  	[Features Section]   
------------------------------------------------------------------*/

/* Custom CSS for mobile screens */
@media (max-width: 767px) {
    .c-content-feature-10 {
        padding: 10px 0; /* Reduced padding for mobile */
    }

        .c-content-feature-10 > .c-list > li {
            display: block;
            width: 100%;
            padding: 0 10px 15px 10px; /* Adjusted padding for mobile */
        }

            .c-content-feature-10 > .c-list > li > .c-card {
                padding: 20px;
                margin-right: 0;
                margin-bottom: 10px; /* Spacing between cards */
            }

                .c-content-feature-10 > .c-list > li > .c-card > .c-content-left,
                .c-content-feature-10 > .c-list > li > .c-card > .c-content-right {
                    padding: 0; /* Remove excessive padding */
                }

                /*.c-content-feature-10 > .c-list > li > .c-card > .icon-size {
                    width: 50px;*/ /* Adjust icon size */
                    /*height: 50px;
                }*/

                .c-content-feature-10 > .c-list > li > .c-card > h3 {
                    font-size: 1.2em; /* Adjust heading size */
                }

                .c-content-feature-10 > .c-list > li > .c-card > p {
                    font-size: 0.9em; /* Adjust paragraph size */
                }

            .c-content-feature-10 > .c-list > li > .c-border-bottom {
                width: 100%;
                height: 1px;
                position: relative; /* Change position to relative for better flow */
                margin-left: 0;
            }

        .c-content-feature-10 > .c-list > .c-border-middle {
            display: none; /* Hide middle border on mobile */
        }

        /* Ensure content in cards is aligned */
        .c-content-feature-10 > .c-list > li > .c-card > .c-content {
            display: flex;
            flex-direction: column; /* Stack content vertically */
            align-items: flex-start;
        }
}



/*------------------------------------------------------------------
  	[Footer Section]   /*Footer
------------------------------------------------------------------*/

/* Ensure the column has a flex display */
.col-md-6.col-sm-12.col-xs-12.footer-links {
    display: flex;
    flex-direction: column; /* Align children vertically */
}

/* Center the .c-links container */
.c-links.c-full-width {
    width: 100%; /* Make sure it takes full width of the column */
}

    /* Use Flexbox for the list and space out the items evenly */
    .c-links.c-full-width .c-nav {
        display: flex; /* Align items in a row */
        justify-content: space-between; /* Space out the list items evenly */
        padding: 0;
        margin: 0;
        list-style: none; /* Remove default list styles */
    }

        /* Ensure each .c-nav item (li) takes up equal space */
        .c-links.c-full-width .c-nav > li {
            flex: 1; /* Make each list item take up equal space */
            text-align: center; /* Center text inside the links */
            box-sizing: border-box; /* Include padding and borders in the element's width and height */
        }


.c-layout-footer-6 .c-line {
    width: 100%;
    height: 1px;
    background-color: #e8f0f5;
    margin: 20px auto;
}

.c-layout-footer.c-layout-footer-6 .c-links .c-nav {
    padding: 0;
    margin: 0;
    list-style: none;
}

    .c-layout-footer.c-layout-footer-6 .c-links .c-nav > li {
        padding: 4px 0;
        display: inline-block;
    }

        .c-layout-footer.c-layout-footer-6 .c-links .c-nav > li > a.c-active {
            border: 1px solid;
            border-top-color: currentcolor;
            border-right-color: currentcolor;
            border-bottom-color: currentcolor;
            border-left-color: currentcolor;
            margin: 0;
        }

        .c-layout-footer.c-layout-footer-6 .c-links .c-nav > li > a {
            font-size: 15px;
            text-transform: uppercase;
            padding: 10px 20px;
            margin: 0 1px;
            line-height: 3em;
        }

.logo-footer {
    max-width: 40%;
    height: auto;
}

.col-md-3.col-sm-12.col-xs-12 {
    display: block; /* Makes the image a block-level element */
    margin: 0 auto; /* Centers the block-level element horizontally */
}

.col-md-6.col-sm-12.col-xs-12 img {
    display: block; /* Makes the image a block-level element */
    margin: 0 auto; /* Centers the block-level element horizontally */
}

.era-logo-footer {
    max-width: 75%;
    height: auto;
}

.col-md-5 img {
    display: block; /* Makes the image a block-level element */
    margin: 0 auto; /* Centers the block-level element horizontally */
}

/* Medium screens (769px to 991px): show the regular logo on scroll */
@media (min-width: 769px) and (max-width: 991px) {
    .logo-footer {
        max-width: 100%;
        height: auto;
    }
}



@media (max-width: 768px) {


    .c-content-title-1.c-title-md > h3.c-font-uppercase {
        font-size: 16px;
    }

    .c-postfooter .d-flex {
        display: block !important; /* Override flex display for smartphone screens */
    }


    .c-postfooter.c-bg-dark-2 {
        margin-top: 10px !important;
    }


    .c-layout-footer-6 .c-foot .c-text {
        margin-bottom: 20px;
    }

    .c-links.c-full-width .c-nav {
        flex-direction: row !important; /* Align items in a row */
        flex-wrap: wrap !important; /* Allow items to wrap onto multiple lines */
        justify-content: center !important; /* Center items horizontally */
    }

        .c-links.c-full-width .c-nav > li {
            flex: 1 1 50% !important; /* Each item takes 50% of the width */
            max-width: 50% !important; /* Ensure items do not exceed 50% width */
            box-sizing: border-box !important; /* Include padding and border in width calculation */
            text-align: center !important; /* Center text within each item */
        }

    .c-layout-footer-6 .c-prefooter {
        padding: 0 !important;
    }

    /* Center copyright text and links */
    .copyright {
        text-align: center !important; /* Center the entire copyright text */
    }

        /* Container to wrap the text and links */
        .copyright .text-line {
            display: flex !important;
            flex-direction: column !important; /* Stack the two lines */
            align-items: center !important; /* Center align items horizontally */
            gap: 5px !important; /* Space between lines */
        }

            .copyright .text-line > span {
                display: flex !important;
                flex-direction: row !important;
                justify-content: center !important; /* Center items horizontally */
                align-items: center !important; /* Center items vertically */
            }

            .copyright .text-line a {
                margin: 0 5px !important; /* Add space between links */
            }

    /* Center social footer items */
    .payments {
        text-align: center !important; /* Center align text */
        margin-top: 10px !important; /* Add margin to separate from the copyright section */
    }

    .social-footer {
        display: inline-block !important; /* Center block-level list */
        padding: 0 !important;
        margin: 0 !important;
    }

        .social-footer li {
            display: inline !important; /* Align social buttons horizontally */
            margin: 0 5px !important; /* Add space between social buttons */
        }

    .c-postfooter .container .row {
        align-items: center !important;
        text-align: center !important; /* Ensure row content is centered */
    }
}

@media (max-width: 1100px) {
    .c-layout-footer-6 .c-prefooter {
        padding: 0;
    }

    /* Ensure copyright text and links are split correctly */
    .copyright {
        text-align: center; /* Center the entire copyright text */
    }

        /* Container to wrap the text and links */
        .copyright .text-line {
            display: flex;
            flex-direction: column; /* Stack the two lines */
            align-items: center; /* Center align items horizontally */
            gap: 5px; /* Space between lines */
        }

            .copyright .text-line > span {
                display: flex;
                flex-direction: row;
                justify-content: center; /* Center items horizontally */
                align-items: center; /* Center items vertically */
            }

            .copyright .text-line a {
                margin: 0 5px; /* Add space between links */
            }

    /* Center social footer items */
    .payments {
        text-align: center; /* Center align text */
        margin-top: 10px; /* Add margin to separate from the copyright section */
    }

    .social-footer {
        display: inline-block; /* Center block-level list */
        padding: 0;
        margin: 0;
    }

        .social-footer li {
            display: inline; /* Align social buttons horizontally */
            margin: 0 5px; /* Add space between social buttons */
        }

    .c-postfooter .container .row {
        align-items: center !important;
        text-align: center; /* Ensure row content is centered */
    }
}







    /*------------------------------------------------------------------
  	[Footer Section]   /*Footer
------------------------------------------------------------------*/
    /* Ensure the column has a flex display */
    /*.col-md-6.col-sm-12.col-xs-12.footer-links {
        display: flex;
        flex-direction: column;*/ /* Align children vertically */
    /*}*/

    /* Center the .c-links container */
    /*.c-links.c-full-width {
        width: 100%;*/ /* Make sure it takes full width of the column */
    /*}*/

    /* Use Flexbox for the list and space out the items evenly */
    /*.c-links.c-full-width .c-nav {
            display: flex;*/ /* Align items in a row */
    /*justify-content: space-between;*/ /* Space out the list items evenly */
    /*padding: 0;
            margin: 0;
            list-style: none;*/ /* Remove default list styles */
    /*}

            .c-links.c-full-width .c-nav > li {
                text-align: center;*/ /* Center text within each item */
    /*}

    .c-layout-footer-6 .c-line {
        width: 100%;
        height: 1px;
        background-color: #e8f0f5;
        margin: 20px auto;
    }

    .c-layout-footer.c-layout-footer-6 .c-links .c-nav {
        padding: 0;
        margin: 0;
        list-style: none;
    }

        .c-layout-footer.c-layout-footer-6 .c-links .c-nav > li {
            padding: 4px 0;
            display: inline-block;
        }

            .c-layout-footer.c-layout-footer-6 .c-links .c-nav > li > a.c-active {
                border: 1px solid;
                border-top-color: currentcolor;
                border-right-color: currentcolor;
                border-bottom-color: currentcolor;
                border-left-color: currentcolor;
                margin: 0;
            }

            .c-layout-footer.c-layout-footer-6 .c-links .c-nav > li > a {
                font-size: 15px;
                text-transform: uppercase;
                padding: 10px 20px;
                margin: 0 1px;
                line-height: 3em;
            }

    .logo-footer {
        max-width: 40%;
        height: auto;
    }

.col-md-3 col-sm-12 col-xs-12 {
    display: block;*/ /* Makes the image a block-level element */
    /*margin: 0 auto;*/ /* Centers the block-level element horizontally */
    /*}


.col-md-6.col-sm-12.col-xs-12 img {
    display: block;*/ /* Makes the image a block-level element */
    /*margin: 0 auto;*/ /* Centers the block-level element horizontally */
    /*}

    .era-logo-footer {
        max-width: 75%;
        height: auto;
    }

    .col-md-5 img {
        display: block;*/ /* Makes the image a block-level element */
    /*margin: 0 auto;*/ /* Centers the block-level element horizontally */
    /*}*/

    /* Medium screens (769px to 991px): show the regular logo on scroll */
    /*@media (min-width: 769px) and (max-width: 991px) {
    .logo-footer {
        max-width: 100%;
        height: auto;
    }
}


    @media (max-width: 768px) {
        .c-links.c-full-width .c-nav {
            flex-direction: row;*/ /* Align items in a row */
    /*flex-wrap: wrap;*/ /* Allow items to wrap onto multiple lines */
    /*justify-content: space-between;*/ /* Space items evenly */
    /*}

            .c-links.c-full-width .c-nav > li {
                flex: 1 1 50%;*/ /* Each item takes 50% of the width */
    /*max-width: 50%;*/ /* Ensure items do not exceed 50% width */
    /*box-sizing: border-box;*/ /* Include padding and border in width calculation */
    /*text-align: center;*/ /* Center text within each item */
    /*}

        .c-layout-footer-6 .c-prefooter {
            padding: 0;
        }*/
    /* Ensure copyright text and links are split correctly */
    /*.copyright {
            text-align: center;*/ /* Center the entire copyright text */
    /*}*/

    /* Container to wrap the text and links */
    /*.copyright .text-line {
                display: flex;
                flex-direction: column;*/ /* Stack the two lines */
    /*align-items: center;*/ /* Center align items horizontally */
    /*gap: 5px;*/ /* Space between lines */
    /*}

                .copyright .text-line > span {
                    display: flex;
                    flex-direction: row;
                    justify-content: center;*/ /* Center items horizontally */
    /*align-items: center;*/ /* Center items vertically */
    /*}

                .copyright .text-line a {
                    margin: 0 5px;*/ /* Add space between links */
    /*}*/

    /* Center social footer items */
    /*.payments {
            text-align: center;*/ /* Center align text */
    /*margin-top: 10px;*/ /* Add margin to separate from the copyright section */
    /*}

        .social-footer {
            display: inline-block;*/ /* Center block-level list */
    /*padding: 0;
            margin: 0;
        }

            .social-footer li {
                display: inline;*/ /* Align social buttons horizontally */
    /*}


        .c-postfooter .container .row {
            align-items: center !important;
        }

        .c-layout-footer-6 .c-foot .c-text {
            margin-bottom: 20px;
        }

        .era-logo-footer {
            margin-bottom: 20px;
        }
    }

    @media (max-width: 1100px) {

        .c-layout-footer-6 .c-prefooter {
            padding: 0;
        }*/
    /* Ensure copyright text and links are split correctly */
    /*.copyright {
            text-align: center;*/ /* Center the entire copyright text */
    /*}*/

    /* Container to wrap the text and links */
    /*.copyright .text-line {
                display: flex;
                flex-direction: column;*/ /* Stack the two lines */
    /*align-items: center;*/ /* Center align items horizontally */
    /*gap: 5px;*/ /* Space between lines */
    /*}

                .copyright .text-line > span {
                    display: flex;
                    flex-direction: row;
                    justify-content: center;*/ /* Center items horizontally */
    /*align-items: center;*/ /* Center items vertically */
    /*}

                .copyright .text-line a {
                    margin: 0 5px;*/ /* Add space between links */
    /*}*/

    /* Center social footer items */
    /*.payments {
            text-align: center;*/ /* Center align text */
    /*margin-top: 10px;*/ /* Add margin to separate from the copyright section */
    /*}

        .social-footer {
            display: inline-block;*/ /* Center block-level list */
    /*padding: 0;
            margin: 0;
        }

            .social-footer li {
                display: inline;*/ /* Align social buttons horizontally */
    /*}



        .c-postfooter .container .row {
            align-items: center !important;
        }
    }*/







    /*------------------------------------------------------------------
  	[Contact Page]   
------------------------------------------------------------------*/

.c-content-title-1 a {
    color: #001F3F; /* Change to whatever color you want */
}

    .logo-wrapper {
        position: relative; /* Allows for positioning of the child element */
        height: 100%; /* Ensure it covers the container */
    }

    .bottom-right-logo {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 70px; /* Adjust as needed */
        height: auto; /* Maintain aspect ratio */
        /*padding: 2px;*/ /* Adjust as needed for spacing */
    }

/*------------------------------------------------------------------
  	[FAQ Page]   
------------------------------------------------------------------*/

    .terminology-container {
        background: #708090;
    }

    .tilesWrap {
        display: flex;
        justify-content: space-between; /* Distributes space between items */
        padding: 0;
        margin: 0;
        list-style: none;
    }

        .tilesWrap li {
            flex: 1 1 20%; /* Grow and shrink, with base width of 20% */
            min-width: 200px; /* Minimum width */
            max-width: 230px; /* Maximum width */
            padding: 80px 20px 40px;
            position: relative;
            vertical-align: top;
            background: #ffffff;
            border: 1px solid #252727;
            text-align: left;
            box-sizing: border-box; /* Ensures padding and border are included in the width */
        }

            .tilesWrap li h2 {
                font-size: 114px;
                margin: 0;
                position: absolute;
                opacity: 0.2;
                top: 50px;
                right: 10px;
                transition: all 0.3s ease-in-out;
            }

            .tilesWrap li h3 {
                font-size: 20px;
                /*            color: #b7b7b7;
*/ margin-bottom: 5px;
            }

            .tilesWrap li p {
                font-size: 16px;
                line-height: 18px;
                /*            color: #b7b7b7;
*/ margin-top: 5px;
            }

            .tilesWrap li button {
                background: transparent;
                border: 1px solid #b7b7b7;
                padding: 10px 20px;
                /*            color: #b7b7b7;
*/ border-radius: 3px;
                position: relative;
                transition: all 0.3s ease-in-out;
                transform: translateY(-40px);
                opacity: 0;
                cursor: pointer;
                overflow: hidden;
            }

                .tilesWrap li button:before {
                    content: '';
                    position: absolute;
                    height: 100%;
                    width: 120%;
                    background: #b7b7b7;
                    top: 0;
                    opacity: 0;
                    left: -140px;
                    border-radius: 0 20px 20px 0;
                    z-index: -1;
                    transition: all 0.3s ease-in-out;
                }

            .tilesWrap li:hover button {
                transform: translateY(5px);
                opacity: 1;
            }

            .tilesWrap li button:hover {
                color: #262a2b;
            }

                .tilesWrap li button:hover:before {
                    left: 0;
                    opacity: 1;
                }

            .tilesWrap li:hover h2 {
                top: 0px;
                opacity: 0.6;
            }

            .tilesWrap li:before {
                content: '';
                position: absolute;
                top: -2px;
                left: -2px;
                right: -2px;
                bottom: -2px;
                z-index: -1;
                background: #fff;
                transform: skew(2deg, 2deg);
            }

            .tilesWrap li:after {
                content: '';
                position: absolute;
                width: 40%;
                height: 100%;
                left: 0;
                top: 0;
                background: rgba(255, 255, 255, 0.02);
            }

            .tilesWrap li:nth-child(1):before {
                background: #C9FFBF;
                background: -webkit-linear-gradient(to right, #FFAFBD, #C9FFBF);
                background: linear-gradient(to right, #FFAFBD, #C9FFBF);
            }

            .tilesWrap li:nth-child(2):before {
                background: #f2709c;
                background: -webkit-linear-gradient(to right, #ff9472, #f2709c);
                background: linear-gradient(to right, #ff9472, #f2709c);
            }

            .tilesWrap li:nth-child(3):before {
                background: #c21500;
                background: -webkit-linear-gradient(to right, #ffc500, #c21500);
                background: linear-gradient(to right, #ffc500, #c21500);
            }

            .tilesWrap li:nth-child(4):before {
                background: #FC354C;
                background: -webkit-linear-gradient(to right, #0ABFBC, #FC354C);
                background: linear-gradient(to right, #0ABFBC, #FC354C);
            }


    .tilesWrap2 {
        display: flex;
        flex-wrap: wrap; /* Allow items to wrap to the next line */
        justify-content: space-between; /* Distribute space between items */
        padding: 0;
        margin: 0;
        list-style: none;
    }

        .tilesWrap2 li {
            flex: 0 0 48%; /* Each item takes up approximately half the width of the container */
            margin-bottom: 20px; /* Space between rows */
            padding: 20px;
            position: relative;
            background: #ffffff;
            /*        border: 1px solid #252727;
*/ text-align: left;
            box-sizing: border-box; /* Ensures padding and border are included in the width */
            min-height: 150px; /* Adjust as needed for visual balance */
        }

            /* Adjusted h2 styling */
            .tilesWrap2 li h2 {
                font-size: 24px;
                margin: 0 0 10px 0;
                position: relative;
                opacity: 1;
                top: 0;
                left: 0;
                transition: all 0.3s ease-in-out;
                padding: 10px 0; /* Add padding for space between h2 and top */
            }

            /* Adjusted p styling */
            .tilesWrap2 li p {
                font-size: 16px;
                line-height: 22px;
                /*            color: #b7b7b7;
*/ margin-top: 10px; /* More space between h2 and p */
                padding-left: 5px; /* Slight padding to align with h2 */
            }

            .tilesWrap2 li button {
                background: transparent;
                border: 1px solid #b7b7b7;
                padding: 10px 20px;
                /*            color: #b7b7b7;
*/ border-radius: 3px;
                position: relative;
                transition: all 0.3s ease-in-out;
                cursor: pointer;
                overflow: hidden;
            }

                .tilesWrap2 li button:before {
                    content: '';
                    position: absolute;
                    height: 100%;
                    width: 120%;
                    background: #b7b7b7;
                    top: 0;
                    opacity: 0;
                    left: -140px;
                    border-radius: 0 20px 20px 0;
                    z-index: -1;
                    transition: all 0.3s ease-in-out;
                }

            .tilesWrap2 li:nth-child(1):before {
                background: #001F3F;
                background: -webkit-linear-gradient(to right, #FF5733, #001F3F);
                background: linear-gradient(to right, #FF5733, #001F3F);
            }

            .tilesWrap2 li:nth-child(2):before {
                background: #001F3F;
                background: -webkit-linear-gradient(to right, #FF5733, #001F3F);
                background: linear-gradient(to right, #FF5733, #001F3F);
            }

            .tilesWrap2 li:nth-child(3):before {
                background: #001F3F;
                background: -webkit-linear-gradient(to right, #FF5733, #001F3F);
                background: linear-gradient(to right, #FF5733, #001F3F);
            }

            .tilesWrap2 li:nth-child(4):before {
                background: #001F3F;
                background: -webkit-linear-gradient(to right, #FF5733, #001F3F);
                background: linear-gradient(to right, #FF5733, #001F3F);
            }

            .tilesWrap2 li:hover button {
                opacity: 1;
            }

            .tilesWrap2 li button:hover {
                color: #262a2b;
            }

                .tilesWrap2 li button:hover:before {
                    left: 0;
                    opacity: 1;
                }

            /*        .tilesWrap2 li:hover h2 {
            top: 20px;
            opacity: 0.6;
        }
*/
            .tilesWrap2 li:before {
                content: '';
                position: absolute;
                top: -2px;
                left: -2px;
                right: -2px;
                bottom: -2px;
                z-index: -1;
                background: #fff;
                transform: skew(2deg, 2deg);
            }

/* Media query for smartphones */
@media (max-width: 767px) {
    .tilesWrap2 li {
        flex: 0 0 100%; /* Each item takes full width */
        max-width: 100%; /* Ensure the item does not exceed the width */
    }
}

.tilesWrap3 {
    display: flex;
    justify-content: center; /* Horizontally center the li */
    align-items: center; /* Vertically center the li */
    padding: 0;
    margin: 0;
    list-style: none;
    height: 100vh; /* Full viewport height to vertically center the content */
}

    .tilesWrap3 li {
        flex: 0 0 auto; /* Prevent resizing, keep li at its natural width */
        padding: 20px;
        background: #ffffff;
        text-align: center; /* Center text inside li */
        box-sizing: border-box; /* Include padding in width calculation */
        min-height: 150px; /* Adjust as needed */
        position: relative; /* Keep same structure as tilesWrap2 */
    }

        .tilesWrap3 li h2 {
            font-size: 64px;
            margin: 0 0 10px 0;
            padding: 10px 0; /* Space between h2 and top */
        }

        .tilesWrap3 li p {
            font-size: 16px;
            line-height: 22px;
            margin-top: 10px; /* Space between h2 and p */
            padding-left: 5px; /* Slight padding to align with h2 */
        }

        .tilesWrap3 li button {
            background: transparent;
            border: 1px solid #b7b7b7;
            padding: 10px 20px;
            border-radius: 3px;
            position: relative;
            transition: all 0.3s ease-in-out;
            cursor: pointer;
            overflow: hidden;
        }

            .tilesWrap3 li button:before {
                content: '';
                position: absolute;
                height: 100%;
                width: 120%;
                background: #b7b7b7;
                top: 0;
                opacity: 0;
                left: -140px;
                border-radius: 0 20px 20px 0;
                z-index: -1;
                transition: all 0.3s ease-in-out;
            }

        /* Same color gradient as .tilesWrap2 */
        .tilesWrap3 li:before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            z-index: -1;
            background: #001F3F;
            background: -webkit-linear-gradient(to right, #FF5733, #001F3F);
            background: linear-gradient(to right, #FF5733, #001F3F);
            transform: skew(2deg, 2deg);
        }

        .tilesWrap3 li:hover button {
            opacity: 1;
        }

        .tilesWrap3 li button:hover {
            color: #262a2b;
        }

            .tilesWrap3 li button:hover:before {
                left: 0;
                opacity: 1;
            }



.traffic-accident {
    width: auto;
    height: 348px;
}

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

.benefit-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    z-index: 2;
}

.c-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(30,34,45,0.6);
    z-index: 1;
}


/*------------------------------------------------------------------
  	[About Page]   
------------------------------------------------------------------*/


/* General image styling */
.image-responsive {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Styling for the image in different screen sizes */

/* Ensure the image spans the height of the left column */
.pd-funeral {
    width: 100%; /* Ensure the image fills the width of the column */
    height: 100%; /* Ensure the image spans the height of the column */
    object-fit: cover; /* Cover the container, cropping if necessary */
    overflow: hidden; /* Hide overflow if the image is larger than the container */
    align-items: center;
    padding-bottom: 20px !important;
}

/* For screens 768px and below */
@media (max-width: 768px) {
    .c-content-feature-11 .row {
        flex-direction: column;
        align-items: center;
    }

    .c-content-feature-11 .col-lg-6,
    .c-content-feature-11 .col-md-6 {
        width: 100%;
        margin-bottom: 1.5rem;
        /*text-align: center;*/ /* Center text on smaller screens */
    }

    .pd-funeral {
        width: 80%; /* Ensure image remains proportional */
        height: auto; /* Maintain aspect ratio */
        object-fit: contain; /* Adjust for smaller screens */
        margin: 0 auto;
        padding-bottom: 0 !important;
    }
}


/*@media only screen and (max-width: 1024px) {
    #envisage-card-parallax {
        background-image: url('../../common/images/envisageThinCard.png') !important; 
    }
}
*/

@media (max-width: 991px) {
    /* 991px */

    #envisage-card-parallax {
        background-image: none !important;
    }

    .c-content-box.c-no-padding {
        padding: 0 !important;
    }

    .c-content-feature-4 {
        height: auto;
        margin-bottom: 0;
    }
        .c-content-feature-4 .c-feature-bg {
            width: 0;
            height: 0;
            margin-bottom: 0;
        }

        .c-content-feature-4 .c-feature-content {
            padding: 0;
            height: auto;
            width: 100%;
        }

            .c-content-feature-4 .c-feature-content > .c-content-v-center {
                height: auto;
                padding-top: 0px;
            }
}


























    /*------------------------------------------------------------------
  	[Quote Request]   
------------------------------------------------------------------*/

    .c-content-feature-14 {
        display: none; /* Hide all blocks initially */
        height: 100vh; /* Full viewport height */
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .c-content-feature-14.active {
            display: flex; /* Only display the active one */
        }

    .quote-image {
        height: 50%;
        width: auto;
    }

    .c-content-box.image-comparison {
        display: none;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .c-content-box.image-comparison {
        padding: 80px 0;
        overflow: auto;
    }






    /*------------------------------------------------------------------
  	[MODALS]   
------------------------------------------------------------------*/
    .modal {
        top: 75px !important;
    }

    /*.form-control {
    height: calc(1.5em + 1.1rem + 2px) !important;*/
    /* Other styles */
    /*}

.input {
    height: calc(1.5em + 1.1rem + 2px) !important;*/
    /* Other styles */
    /*}*/


    /* Adjust backdrop styles to be more specific */
    .modal-backdrop {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background-color: rgba(0, 0, 0, 0.5) !important; /* Adjust opacity */
        z-index: 1050 !important; /* Ensure this is higher than modal z-index */
    }

        .modal-backdrop.fade {
            opacity: 0 !important; /* Apply this during fade-out */
        }

        .modal-backdrop.show {
            opacity: 0.5 !important; /* Ensure this is visible */
        }


    .modal-body {
        padding-top: 10px;
    }

    .modal-header {
        margin-top: 30px;
        display: flex;
        justify-content: flex-start; /* Align items to the left */
        align-items: center; /* Center items vertically */
    }

    .btn.btn-secondary.eraButton {
        margin-top: 0;
        margin-bottom: 0;
    }

    .btn.btn-primary.eraButton {
        margin-top: 0;
        margin-bottom: 0;
    }



    /* Optional: to ensure that the border-radius doesn't apply to the input itself */
    /*.input-group .form-control {
    border-radius: 0;*/ /* Removes border-radius from the input to avoid overlap */
    /*}*/

    /*.svg-icon svg {
    height: 1.75rem !important;
    width: 1.70rem !important;
}*/


.center-icon {
    display: block; /* Ensure it's treated as a block element */
    margin: 0 auto; /* Centers it horizontally */
}


.c-content-list-1.c-separator-dot > li::before {
    opacity: 1 !important;
}