/*html, body {
    margin: 0;
    padding: 0;
    width: 100% !important;
    height: 100% !important;
}*/
@font-face {
    font-family: 'Roboto';
    src: url('/Fonts/Roboto-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


html, body {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden; /*so there is no sliver of dead space to the right*/
}

.content {
    padding: 0 !important;
}

.full-width-image {
    width: 100%;
    height: 12cm !important;
    object-fit: cover !important; /* This will make sure your image covers the full width and height without stretching */
}

.header-banner {
    /*padding-top: 35px;
    padding-bottom: 100px;*/
    height: 70vh;
    min-height: 500px;
    max-height: 800px;
    /*height: 700px;*/
    color: #ffffff;
    font-family: Helvetica, serif;
    font-weight: 100;
    background-image: url("https://grapesjs.com/img/bg-gr-v.png"), url("https://grapesjs.com/img/work-desk.jpg"); /*change this, does not work*/
    background-attachment: scroll, scroll;
    background-position: left top, center center;
    background-repeat: repeat-y, no-repeat;
    background-size: contain, cover;
}

#iq35 {
    background-repeat: repeat, no-repeat;
    background-position: left top, center center;
    background-attachment: scroll, scroll;
    background-size: auto, cover;
    /*background-image: linear-gradient(rgba(100,100,100,0.00) 0%, rgba(100,100,100,0.00) 10%), url('/Images/LometiBannerImage.png');*/
    /*background-image: linear-gradient(rgba(19,0,141,0.33) 0%, rgba(19,0,141,0.33) 100%), url('/Images/LometiBannerImage.png');*/
    /*background-image: linear-gradient(rgba(0,0,0,0.33) 0%, rgba(0,0,141,0.33) 100%), url('/Images/LometiBannerImage.png');*/
    /*background-image: linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 100%), url('/Images/LometiBannerImage2.jpg');*/
    background-image: linear-gradient(rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.00) 10%), url('/Images/CM bg 1.png');
    /*background-image: url('/Images/LometiBannerImage.png');*/
    perspective: 0px;
    box-shadow: 0 0 5px 0 black;
    position: relative;
    transition: background-image 1s ease-in-out; /* Smooth transition for background change */
}

.aanbod-panel {
    position: absolute;
    top: -100%; /* Default closed state */
    height: 0; /* Default closed state */
    width: 100%;
    /*background-color: rgba(255, 255, 255, 0.2);*/
    border: 2px solid black;
    z-index: 4;
    box-sizing: border-box;
    transition: top 1.5s ease, height 1.5s ease !important;
}

/*for the aanbod image background*/
.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    background-image: url('/Images/LometiBannerImage2.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    pointer-events: none;
}

    .banner-overlay.visible {
        opacity: 1;
        pointer-events: auto;
    }
/*for the aanbod image background*/

/*for the aanbod panel content V*/

.aanbod-panel-content {
    padding: 1rem;
    /*color: #fff;*/
    background-color: rgba(255, 255, 255, 0.3);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.house-display {
    display: flex;
    /*background: rgba(255, 255, 255, 0.1);*/
    padding: 1rem;
    border-radius: 8px;
    width: 80%;
    max-width: 1000px;
    /*margin: 0 auto 1rem auto;*/
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.left-column {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-right: 1rem;
}


.house-info {
    flex: 0 0 80%;
    /*padding: 0.2rem;*/

    display: flex;
    align-items: center; /* vertically centers child elements */
    justify-content: center; /* horizontally centers child elements */

    border-right: 1px solid rgba(255,255,255,0.3);
    border-radius: 8px;
    background-color: rgba(1, 13, 50, 0.7); /*rgba(50,50,50,0.7);*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.house-info-inner {
    width: 98%;
    height: 98%;
    margin: 0 auto; /* Center it horizontally */
    background-color: rgba(1, 13, 50, 0.7); /*rgba(8, 2, 91, 0.7);*/ /*rgba(40, 40, 40, 0.7); */ /* A slightly different dark color */
    padding: 0.5rem; /* Optional: adjust as needed */
    box-sizing: border-box;
    border-radius: 8px;
}



/*thumbnails*/
.thumbnail-carousel {
    flex: 0 0 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /*border-radius: 8px;*/
    /* Alternatively, set a fixed height:
       height: 80px; */
}

.thumbnails {
    display: flex;
    gap: 0.5rem;
}

.thumbnail {
    background: none;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    /* Set thumbnails to be square; here, we choose a fixed size */
    width: 70px;
    height: 70px;
    transition: border 0.2s ease;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

    .thumbnail.active {
        border-color: #fff;
    }

    .thumbnail:hover {
        transform: scale(1.1);
    }

    .thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
    }

.thumb-arrow {
    background: none;
    border: none;
    color: rgba(1, 13, 50, 0.7); /*rgba(50,50,50,0.7);*/ /*#fff;*/
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    transition: transform 0.2s ease;
}

    .thumb-arrow:hover {
        transform: scale(1.1);
    }
/*thumbnails*/

.house-images {
    flex: 1;
    /*padding: 1rem;*/

    width: 100%;
    height: 400px;/*100%;*/ /* Ensures the container fills the available space */
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

    .house-images img {
        max-width: 100%;
        border-radius: 8px;
        height: 400px;
        width:100%;
        object-fit: cover; /* Ensures the image covers the container */
        object-position: center; /* Centers the image */
    }

.arrow {
    background: none;
    border: none;
    color: rgba(1, 13, 50, 0.7); /*#fff;*/
    font-size: 2rem;
    cursor: pointer;
    padding: 0.5rem;
    transition: transform 0.2s ease;
}

    .arrow:hover {
        transform: scale(1.1);
    }

/*for the aanbod panel content*/


/*fade in image, this is the top one*/

#imageOverlay {
    background-image: url('/Images/LometiBannerImage2.jpg'); /* This is the primary image shown initially */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: opacity 1s ease-in-out;
    z-index: 1; /* Ensure this is above #iq35 but below everything else */
}


/*this here is the background video style*/
#background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Makes the video cover the entire container */
    z-index: -1; /* Place the video behind other elements */
}

/*fade in image, this is the top one*/

/*for the sliding image*/

.slide-image {
    position: absolute;
    left: 50%; /* Position at the center horizontally */
    top: 50%; /* Align vertically to the center */
    transform: translate(-50%, -50%); /* Adjust for the logo's own dimensions to center it */
    transition: transform 1s; /* Animate the transform property */
    cursor: pointer;
    z-index: 2;
    clip-path: circle(48%); /*circle(60%);*/ /* Clips the image to a circle, so that the edges are not accidently touched when its rotating */
    height:65vh;
}


/*with another box*/
.info-panel {
    position: absolute;
    top: 1%; /* Ensure consistency */
    left: 0;
    bottom: 1%; /* Ensure it doesn't touch the very bottom */
    width: 0%;
    max-height: 98%; /* Consistency in visual appearance */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    overflow: hidden;
    transition: width 0.5s ease-in-out;
    z-index: 2; /* Maintains layering order */
    display: flex;
    align-items: center; /* Center the inner box vertically */
    justify-content: center; /* Center the inner box horizontally */
}

.inner-box {
    width: 98%; /* Slightly smaller than the info panel */
    height: 98%; /* Slightly smaller than the info panel */
    background-color: rgba(0, 0, 0, 0.5);
    /*background-color: #ebffff;*/ /* Light blue background */
    padding: 20px; /* Padding inside the inner box */
    box-sizing: border-box; /* Include padding in width/height calculations */
    overflow: auto; /* Adds scroll if content overflows */
}

.grey-overlay {
    position: absolute;
    top: 0;
    right: 0; /* Align to the right */
    width: 0%; /* Start with no visible width */
    height: 100%;
    background-color: rgba(228,252,255,0.1);/*rgba(0, 0, 0, 0.5);*/
    transition: width 1s ease; /* Animate the width */
    overflow: hidden; /* Prevent any content from showing outside */
    z-index: 1;
}

/*for the sliding image*/

.gjs-row {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: nowrap;
    padding: 10px;
}

.gjs-cell {
    min-height: 75px;
    flex-grow: 1;
    flex-basis: 100%;
}

#iw037k {
    /*height: 582px;*/
    height: 700px;
}

#ietxu {
    /*padding: 10px 10px 12px 10px;*/
    /*font-family: Impact, Charcoal, sans-serif;*/
    font-family: Roboto, sans-serif;
    font-weight: 100;
    text-align: center;
    text-decoration: none;
    border-radius: 0px 0px 0px 0px;
    line-height: 0px;
    top: 0px;
    margin: 269px 0px 0px 0px;
    font-size: 82px; /*72px;*/
    text-shadow: 2px 2px 0px black;
    /*background: rgba(0.5, 0.5, 0.5, 0.5) !important;*/ /* Semi-transparent overlay */
    /*padding: 30px 30px !important;*/
    /*border-radius: 50px !important;*/

    background: rgba(0, 0, 0, 0.2); /*rgba(255, 255, 255, 0.5);*/ /* rgba(0, 0, 0, 0.2); */ /* Semi-transparent black */
    padding: 40px 40px; /* Adds padding around the text */
    display: inline-block; /* Makes the div only as wide as its content */
    border-radius: 10px; /* Optional: adds rounded corners */
}

.text-lometi {
    color: whitesmoke;/*whitesmoke;*//*#623381;*/ /*black;*/ /*lightslategray;*/ /*whitesmoke;*/ /*  aqua;*/ /*#623381;*/ /* Purple color */
}

.text-bv {
    color: whitesmoke;/*whitesmoke;*//*#b1e36b; *//*black;*/ /*lightslategray;*/ /*whitesmoke;*/ /*aqua;*/ /*#b1e36b;*/ /*#a5e36b;*/ /*#b9c363;*/ /* Green color */
}

#ietxutwee {
    padding: 25px 10px 8px 10px;
    font-family: Impact, Charcoal, sans-serif;
    font-weight: 100;
    text-align: center;
    text-decoration: none;
    border-radius: 0px 0px 0px 0px;
    line-height: 0px;
    top: 0px;
    margin: 0px 0px 20px 0px;          /*top right bottom left*/
    color: aliceblue;
    font-size: 36px;
    text-shadow: 2px 2px 0px black;
}

.img-container {
    background-color: black; /* Set the background color to black */
    padding: 5px; /* Add some padding to create space around the image */
    transform: scale(2.0);
    transition: transform 0.3s ease;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    overflow: hidden; /* Hide overflow */
}

.img-container img {
    width: 100% !important; /* Adjust the width to fit within the scaled container */
    height: auto !important; /* Maintain the aspect ratio */
}

.text-box {
    background-color: black; /* Set the background color to white */
    width: 86.52% !important /* same width as .img-container */;
    height: 385px;
    max-height: 700px; /* Adjust based on your design */
    overflow-y: auto; /* Allows for a vertical scrollbar if there's overflow */
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
    box-sizing: border-box; /* Makes sure padding doesn't affect the width */
    padding: 1px; /* Add some padding inside the box */
    /*margin-top: 10px;*/ /* Adds space between the carousel and the text box */
    /* Set the same horizontal margin or width as the .img-container to align them */
}

.text-box::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, and Opera */
}


/* Styles for making the welcome text bigger and bold */
.welcome {
    font-size: 1.5em; /* Bigger text */
    font-weight: bold; /* Bold text */
    text-align: center; /* Center align text */
    margin-bottom: 20px; /* Space below the paragraph */
}

/* Styles for the contact information */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Creates four equal columns */
    column-gap: 30px; /* Space between columns */
    row-gap: 20px; /* Space between rows */
    max-width: 1000px; /* Set a max-width for the grid if needed */
    margin: auto; /* Centers the grid horizontally */
}

.contact-label {
    font-weight: bold;
    text-align: left; /* Aligns label to the right side */
    padding-right: 5px; /* Adds some space between label and data */
}

.contact-data {
    text-align: left; /* Aligns data to the left side */
}

.icon {
    width: 20px;
    vertical-align: middle;
    margin-right: 10px; /* Space between the icon and text */
}

a {
    color: inherit; /* Inherits the font color from the parent */
    text-decoration: none; /* Removes the underline from links */
}

/* Container for all carousels */
.carousel-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /* Adjust this as needed */
    align-items: stretch; /* This ensures that items are aligned */
}


.carousel-control-container {
    flex: 0 1 calc(20% - 10px);
    display: flex;
    flex-direction: column; /* Ensures items are stacked vertically */
    align-items: center; /* Centers the items horizontally */
    margin: 5px; /* Adds some space around each carousel */
    margin-bottom: 90px;
}

.carousel-title, .carousel-text {
    text-align: center;
    width: 100%; /* Ensures the text takes up the full width */
    margin-top: 10px; /* Adjust as needed */
}


@media (max-width: 768px) {
    .carousel-control-container {
        flex: 0 1 calc(50% - 10px); /* Adjust for smaller screens */
    }
}

/*AAAA*/

/* Container for contact-info and map */
.container {
    display: flex;
    justify-content: space-between;
    padding: 20px;
}

/* Contact info box */
.contact-info {
    flex: 1;
    padding: 20px;
    margin-right: 40px;
    text-align: center;
    color: #EFEFEF;
    position: relative; /* To position the inner box */
}

/* Inner black box for contact details */
.inner-contact-box {
    position: absolute;
    top: 50px; /* Adjust the top position based on the Contact Us title size */
    left: 5%; /* Centers the box with equal margins */
    right: 5%;
    bottom: 5%; /* Gives some padding at the bottom */
    background-color: black;
    display: flex;
    justify-content: space-between;
    padding: 2%; /* Adds some padding inside the black box */
}

.contact-details-left, .contact-details-right {
    color: white;
    flex-basis: 45%; /* Slightly less than half to fit the padding */
}

    /* Contact details styling */
    .contact-details-left p, .contact-details-right p {
        margin: 10px 0;
    }

    .contact-details-right a {
        color: white;
        text-decoration: none;
    }

        .contact-details-right a:hover {
            text-decoration: underline;
        }

/* Icons styles */
.contact-info img {
    width: 20px;
    vertical-align: middle;
    margin-right: 8px;
}


/*new map container css for slider*/

#simple-map-container {
    position: absolute;
    top: 1%;
    right: 0; /* Ensures alignment to the right edge */
    bottom: 1%;
    width: 0%; /* Initially no width */
    max-height: 98%; /* Consistent with other dimensions */
    transition: width 0.5s ease-in-out; /* Transition for smooth expansion/retraction */
    overflow: hidden;
    z-index: 1; /* Ensure layering is correct */
}

#simple-map {
    width: 0% !important;
    height: 900px !important;
    width: 1000px !important;
    /*overflow: hidden;*/
}



/*for phones for info panel and map*/
/*@media only screen and (max-width: 480px) {*/
    /* Force both panels out of absolute mode and into block flow */
    /*#simple-map-container,
    #infoPanel {
        position: static !important;
        width: 100% !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        margin: 0 0 1rem !important;*/ /* add a little space between them */
    /*}
}*/

/*for phones for info panel and map*/