body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}




/*bootstrap image cards*/

h5 {
    text-align: center;
}

/*p {
            font-size: 14px;
        }*/

.p1 {
    margin-top: 25px;
    margin-bottom: 10px;
}

.card {
    overflow: hidden;
    position: relative;
}

.card {
    overflow: hidden;
    position: relative;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); /* Light shadow on the card */
    transition: box-shadow 0.3s ease-in-out; /* Transition for shadow effect */
}

.card-img-top {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.5s ease-in-out, filter 0.5s ease-in-out;
}

.card-img-container {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.card:hover .card-img-top {
    transform: scale(1.1);
    filter: brightness(0.7);
}


.card-title {
    transition: transform 0.5s ease-in-out, font-size 0.5s ease-in-out;
    display: inline-block;
}

.card:hover .card-title {
    transform: scale(1.1);
    /*font-size: 1.2em;*/
    filter: brightness(0.7);
}

.card:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); /* Darker and more visible shadow on hover */
}

/**/

/*for bootstrap menu*/
.navbar {
    padding-top: 0 !important;
    margin-top: 0 !important;
    background-color: transparent; /* Initial background color */
    z-index: 1000; /* Ensure the navbar is on top of other content */
}

    .navbar.scrolled {
        background-color: white !important;
        transition: background-color 0.3s;
    }

    .navbar.noscrolled {
        padding-top: 0 !important;
        margin-top: 0 !important;
        background-color: transparent; /* Initial background color */
        z-index: 1000; /* Ensure the navbar is on top of other content */
    }

#secondary-desktop .nav-link {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 2;
}



#secondary-desktop .fab {
    font-size: 20px;
    color: #ba7550 !important;
    transition: color 0.3s;
}

/* When the main .navbar has the .scrolled class */
.navbar.scrolled + #secondary-desktop .fab {
    color: #1d3c34 !important;
}


.navbar-brand {
    padding-left: 20px; /* Adjust the left padding as needed */
    padding-right: 20px; /* Adjust the right padding as needed */
}

.navbar-nav .nav-item {
    margin-left: 10px; /* Adjust the left margin between menu items */
    margin-right: 10px; /* Adjust the right margin between menu items */
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link2.active {
    color: #D49D74 !important; /* Replace with your preferred active color */
    /* font-weight: bold; */
}

.navbar-nav .nav-link {
    color: white !important;
    white-space: nowrap; /* Prevent text from wrapping */
    /* font-weight: bold; */
}

/*for main page*/
.navbar-nav .nav-link2 {
    color: #1D3C34 !important;
    white-space: nowrap; /* Prevent text from wrapping */
    /* font-weight: bold; */
}


/*for other pages*/
.navbar.scrolled .navbar-nav .nav-link {
    color: #1D3C34 !important;
    white-space: nowrap; /* Prevent text from wrapping */
}

    .navbar.scrolled .navbar-nav .nav-link.active {
        color: #D49D74 !important;
    }




/* Mobile Menu */
/*only used for mobile menu body fades out when menu opesn and fadein when closes*/

/* Customize hamburger button frame */
#navbar-mobile .navbar-toggler {
    border: 2px solid #D49D74; /* Border color */
    background-color: transparent;
    border-radius: 6px;
    padding: 0.5rem;
}

/* Default hamburger icon using SVG */
/* Style for the default hamburger icon */
#navbar-mobile .navbar-toggler-icon {
    display: block;
    width: 30px;
    height: 30px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23D49D74' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Smooth transition */
}

    /* Style for the toggler when showing the "X" */
    #navbar-mobile .navbar-toggler-icon.custom-x {
        background-image: none; /* Remove background image */
        color: #D49D74; /* Same color as the hamburger icon lines */
        font-size: 32px; /* Increase the size of the "X" */
        line-height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        transform: rotate(90deg); /* Add rotation for smooth transition */
        opacity: 1; /* Ensure it's fully visible */
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Smooth transition */
    }


/* Mobile nav links styles remain unchanged */
#navbar-mobile .navbar-nav .nav-link {
    color: white !important;
}

    #navbar-mobile .navbar-nav .nav-link.active {
        color: #D49D74 !important;
    }

    #navbar-mobile .navbar-nav .nav-link:not(.active):hover {
        color: #cccccc !important;
    }

@media screen and (max-width: 770px) {
    /*to close the gap on top of the screen we add this code on smaller screen for mobile menu*/
    .mobile_small_screen {
        position: absolute;
        top: 0;
        background-color: transparent;
    }
}




/* END Mobile Menu */
/*this part for architectural section*/
#navbarCards .navbar {
    padding-top: 0 !important;
    margin-top: 0 !important;
    background-color: transparent; /* Initial background color */
    z-index: 1000; /* Ensure the navbar is on top of other content */
}



#navbarCards .navbar-brand {
    padding-left: 20px; /* Adjust the left padding as needed */
    padding-right: 20px; /* Adjust the right padding as needed */
}

#navbarCards .navbar-nav .nav-item {
    margin-left: 10px; /* Adjust the left margin between menu items */
    margin-right: 10px; /* Adjust the right margin between menu items */
}


#navbarCards .navbar-nav .nav-link {
    color: white !important;
    white-space: nowrap; /* Prevent text from wrapping */
    /* font-weight: bold; */
}


.scrolled2 {
    background-color: #3d8272 !important;
    transition: background-color 0.3s;
}

.noscrolled2 {
    padding-top: 0 !important;
    margin-top: 0 !important;
    background-color: transparent; /* Initial background color */
    z-index: 1000; /* Ensure the navbar is on top of other content */
}


/* When the main .navbar has the .scrolled class */
#secondary-desktop.scrolled2 .fab {
    color: white !important;
}



/*******************************************************************************************************************************/
/*Secondary Desktop menu*/
/* 1) Always fixed, never switch to relative */
.custom-dropdown-menu {
    position: fixed;
    top: 4px; /* match your navbar top offset */
    right: 0;
    /*background: rgba(0,0,0,0.9);*/
    background: rgba(212,157,116,0.7); /*this is #D49D74*/
    border-radius: 10px;
    padding: 15px;
    opacity: 0;
    transform: scale(0.8);
    transform-origin: top right; /* pivot from that corner */
    pointer-events: none;
    transition: opacity .8s ease, transform .8s ease;
    z-index: 1050;
}

    /* 2) When “show” is toggled, just turn on visibility & 100% scale */
    .custom-dropdown-menu.show {
        /* stay fixed, don’t change position */
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
    }

/* 3) Center your flags without making the IMG itself a flex container */
/*.custom-dropdown-menu .d-flex {
                justify-content: center;
                align-items: center;
            }*/

.flag-img {
    width: 20px;
    height: auto;
    transition: transform .2s;
    /* no flex on the img itself */
    display: inline-block;
}

    .flag-img.selected {
        border: 2px solid #fff;
        border-radius: 4px;
        transform: scale(1.1);
    }

/* 1) Make the close button smaller */
.close-language-dropdown {
    font-size: 0.75rem; /* smaller text */
    padding: 0.25rem 0.5rem; /* tighter hit-area */
    line-height: 1; /* no extra height */
    border-radius: 0.25rem; /* tighter corners */
}

/* 2) Center flags inside their links */
.custom-dropdown-menu .dropdown-item {
    display: flex !important; /* override BS’s block style */
    justify-content: center !important; /* horizontal centering */
    align-items: center !important; /* vertical centering */
    padding: 0.4rem 0.6rem; /* give them a little breathing room */
}

    /* 3) Red background on hover */
    .custom-dropdown-menu .dropdown-item:hover,
    .custom-dropdown-menu .dropdown-item:focus {
        /*background-color: #D49D74 !important;*/ /* force red on hover/focus */
        background-color: rgba(0,0,0,0.7) !important;
        color: #fff; /* ensure text/icon contrast */
    }



@media screen and (max-width: 1800px) {
    .custom-dropdown-menu {
        padding: 13px;
    }
}


@media screen and (max-width: 1500px) {
    .custom-dropdown-menu {
        padding: 11px;
    }
}


/*******************************************************************************************************************************/




.d-flex.justify-content-end {
    margin-right: 0;
}

.d-flex.w-50.justify-content-start ~ .d-flex.justify-content-end {
    width: auto;
}

.nav-item.d-flex.flex-column.align-items-center .nav-link {
    display: inline-block;
}



.top-right-fixed {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1px;
}

    .top-right-fixed .nav-link {
        text-align: center;
        padding: 5px 0;
    }

    .top-right-fixed .dropdown-menu {
        position: absolute;
        right: 0;
        display: none;
        width: auto; /* Allow the dropdown menu to fit its content */
        min-width: 100px; /* Set a reasonable minimum width */
    }

    .top-right-fixed .dropdown:hover .dropdown-menu {
        display: block;
    }

.plan-visit-link {
    color: #D49D74 !important;
    font-size: 15px;
    font-weight: bold;
    padding: 5px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}


/*for other pages*/
/*.navbar.scrolled .navbar-nav .plan-visit-link {
    color: #1D3C34 !important;
    white-space: nowrap; 
}

*/
/**/
.bgimages {
    top: 0;
    width: 100%;
    min-width: 100%;
    height: auto;
    /*min-height: 852.282px;*/
    /*object-fit: cover;*/
    /*min-height: 100vh;*/
    /*max-width: none;*/
    display: block;
    box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.8);
    border-radius: 15px;
}

.maptophr {
    border: none;
    border-top: 4px dashed white; /* Dotted white line */
    width: 70%;
    text-align: center;
    margin: 0 auto;
}

.bgimages2 {
    top: 0;
    width: 100%;
    min-width: 100%;
    height: auto;
    margin: 0 auto;
    text-align: center;
}

/*.bgimages {
    top: 0;
    min-width: 100vw;
    height: auto;
    min-height: 100vh;
    object-fit: cover;
    
}*/


/**/

/*.videodiv {
    background-color: transparent;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 852.282px;
    position: absolute;
}*/





/*.video-js {
    position: relative;
    top: 0;
    left: 0;
    width: 100vw;
    max-width: 100vw;
    height: auto;
    min-height: 100vh;
}*/

/*.video-js {
    position: absolute; 
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    object-fit: cover; 
    transform: translate(-50%, -50%); 
}*/




/*.video-js2 {    
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 100%;
    overflow:hidden;
}*/




/*.videoplayer2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    object-fit: cover; 
   
}*/



.mapster-tooltip {
    font-size: 16px !important; /* Change font size */
    color: #ff0000 !important; /* Change font color */
    background-color: #fff !important; /* Tooltip background */
    border: 1px solid #000 !important; /* Tooltip border */
    padding: 8px;
    border-radius: 5px; /* Rounded corners */
}


.bgimages {
    /*position:absolute;
    top: 0;
    left:0;
    min-width: 100vw;
    height: auto;
    min-height: 100%;
    object-fit:cover;*/
}




/* Make sure the button is visible and positioned properly */
#move-up-btn {
    position: fixed; /* Fix the button in place */
    bottom: 20px; /* Set the distance from the bottom */
    right: 10px;
    font-size: 15px; /* Make the icon large enough */
    z-index: 9999; /* Ensure the button is always on top */
    opacity: 0; /* Hidden initially */
    visibility: hidden; /* Prevent interaction when hidden */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition */
}

    /* Optional: Add some hover effect for better interaction */
    #move-up-btn:hover {
        background-color: #957f58;
        color: #143730;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    }




/*******************************************************************************************************/
.cookie-disclaimer {
    background: #000000;
    color: #FFF;
    opacity: 0.9;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 1000011;
    height: 170px;
    position: fixed;
}

    .cookie-disclaimer .container {
        text-align: center;
        vertical-align: middle;
        padding-top: 30px;
        padding-bottom: 20px;
    }

    .cookie-disclaimer .containerRU {
        font-size: 11px;
    }

    .cookie-disclaimer .container a:hover, .cookie-disclaimer .container a:focus {
        color: yellowgreen;
    }

    .cookie-disclaimer .cookie-close {
        float: right;
        padding: 10px;
        cursor: pointer;
    }

@media screen and (max-width: 500px) {
    .cookie-disclaimer {
        background: #000000;
        color: #FFF;
        opacity: 0.9;
        width: 100%;
        bottom: 0;
        left: 0;
        z-index: 1000011;
        height: 200px;
        position: fixed;
    }



        .cookie-disclaimer .container {
            text-align: center;
            vertical-align: middle;
            padding-top: 10px;
            padding-bottom: 20px;
            font-size: 11px;
        }

        .cookie-disclaimer .accept-cookie {
            padding: 10px;
            font-size: 11px;
        }
}



@media screen and (max-width: 270px) {
    .cookie-disclaimer {
        background: #000000;
        color: #FFF;
        opacity: 0.9;
        width: 100%;
        bottom: 0;
        left: 0;
        z-index: 100001;
        height: 200px;
        position: fixed;
    }



        .cookie-disclaimer .container {
            text-align: center;
            vertical-align: middle;
            padding-top: 4px;
            padding-bottom: 14px;
            font-size: 9px;
        }

        .cookie-disclaimer .accept-cookie {
            padding: 7px;
            font-size: 9px;
        }
}






/******************************************************************************************************************************************************/

/***********************************************************************************************************************************/
.loader_bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999;
    background: #004833;
    width: 100vw;
    min-width: 100vw;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

.loader_bg2 {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999;
    background: #004833;
    width: 100vw;
    min-width: 100vw;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

.loader_bg2_farsi {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999;
    background: #004833;
    width: 100vw;
    min-width: 100vw;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

.loader {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

    .loader .row {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }

    .loader .preloadergif {
        max-width: 150px;
        height: auto;
        padding: 10px;
        margin-bottom: 5px; /* Space between gif and logo */
        transform-style: preserve-3d;
        animation: rotate3d360 4s infinite linear;
    }

    .loader .preloaderlogo {
        max-width: 250px;
        height: auto;
    }





@keyframes rotate3d360 {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}



/* for brochure download buttons */
.btn-light:hover {
    background-color: #957f58 !important; /* Change background to black */
    color: #fff !important; /* Change text to white */
}



/**/
img:is([sizes="auto" i], [sizes^="auto," i]) {
    contain-intrinsic-size: 3000px 1500px
}
/**/








/* this is for disable right click popup the code is in main.js */
#logo-popup {
    width: 150px; /* Adjust as needed */
    height: auto;
    margin-bottom: 10px;
}

.popup-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 400px;
    height: auto;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 5px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    text-align: center;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Optional: Add a shadow */
}


/**/

/**/
.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload),
.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) * {
    background-image: none !important;
}

@media screen and (max-height: 1024px) {
    .e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload),
    .e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload) * {
        background-image: none !important;
    }
}

@media screen and (max-height: 640px) {
    .e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload),
    .e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload) * {
        background-image: none !important;
    }
}

/**/



/* Main Cards Bootstrap Carousel*/
:root {
    --slide-width: 100%;
    --slide-height: 350px;
}

#multiCarousel1 .carousel-inner {
    display: flex;
    flex-wrap: nowrap;
    direction: ltr; /* Ensures carousel behaves as expected even in RTL */
}

#multiCarousel1 .carousel-item {
    transition: transform 0.5s ease;
}

    #multiCarousel1 .carousel-item .row {
        margin: 0;
        flex-direction: row; /* In case of RTL, prevent reversed order */
    }

#multiCarousel1 .col-12 {
    padding: 0 !important;
    margin: 0 !important;
}

#multiCarousel1 .image-wrapper {
    width: 100%;
    height: var(--slide-height);
    overflow: hidden;
    cursor: pointer;
}

    #multiCarousel1 .image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.4s ease;
        transform: scale(1.0);
    }

    #multiCarousel1 .image-wrapper:hover img {
        transform: scale(1.1);
    }

#multiCarousel1 .carousel-control-prev-icon,
#multiCarousel1 .carousel-control-next-icon {
    background-image: none !important;
    width: 2rem;
    height: 2rem;
}

/* RTL-specific fixes for control icons */
html[dir="rtl"] #multiCarousel1 .carousel-control-prev-icon,
html[dir="rtl"] #multiCarousel1 .carousel-control-next-icon {
    transform: rotate(180deg);
}

#multiCarousel1 .carousel-control-prev,
#multiCarousel1 .carousel-control-next {
    background: none !important;
    border: none;
    opacity: 1;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    padding: 0.5rem;
    z-index: 10;
}

/* Default (LTR) positions */
#multiCarousel1 .carousel-control-prev {
    left: 0;
}

#multiCarousel1 .carousel-control-next {
    right: 0;
}

/* Swap control button positions for RTL */
html[dir="rtl"] #multiCarousel1 .carousel-control-prev {
    right: 0;
    left: auto;
}

html[dir="rtl"] #multiCarousel1 .carousel-control-next {
    left: 0;
    right: auto;
}

#multiCarousel1 .slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff;
    padding: 10px;
    font-size: 1.4rem;
    text-align: center;
    font-weight: 500;
}


/**/


/*Home page carousel*/

#carouselExampleDark {
    /*background-color: azure;*/
    width: 100%;
}

#carouselExampleDark .carousel-item img {
    height: 500px;
    object-fit: cover;
    width: 100%;
}

.homeCarouselDiv2 {
    text-align: center;
    margin: 0 auto;
    /*background-color: aquamarine;*/
}

@media screen and (max-width: 770px) {
    #carouselExampleDark .carousel-item img {
        height: 300px;
        object-fit: cover;
        width: 100%;
    }

    .homeCarouselDiv2 {
        text-align: center;
        margin: 0 auto;
        /*background-color: aquamarine;*/
        width:100%;
        min-width:98%;
        max-width: 100vw;
        margin-left:10px;
    }

    #carouselExampleDark {
        /*background-color: azure;*/
        width: 100%;
        min-width: 92vw;
    }
}


#carouselExampleDark .carousel-control-prev-icon,
#carouselExampleDark .carousel-control-next-icon {
    background-color: transparent !important; /* removes semi-transparent gray */
    background-image: none !important; /* removes default Bootstrap arrow background */
    filter: none !important; /* removes any grayscale/opacity filters */
}

#carouselExampleDark .carousel-control-prev,
#carouselExampleDark .carousel-control-next {
    background: none !important; /* removes background from button wrapper */
}


#carouselExampleDark .carousel-control-prev-icon,
#carouselExampleDark .carousel-control-next-icon {
    background-image: none !important; /* Remove default Bootstrap background */
    width: 2rem;
    height: 2rem;
}

#carouselExampleDark .carousel-control-prev,
#carouselExampleDark .carousel-control-next {
    background: none !important; /* Remove button background */
    border: none;
    opacity: 1;
}

#carouselExampleDark .carousel-control-prev {
    left: 0;
}

#carouselExampleDark .carousel-control-next {
    right: 0;
}

#carouselExampleDark .carousel-control-prev,
#carouselExampleDark .carousel-control-next {
    top: 50%;
    transform: translateY(-50%);
    width: auto; /* Don't reserve a wide clickable area */
    padding: 0.5rem;
    z-index: 10; /* Make sure it stays on top */
    background: none !important;
}

#carouselExampleDark .carousel-indicators [data-bs-target] {
    background-color: white;
    opacity: 1;
}

#carouselExampleDark .carousel-indicators .active {
    background-color: #d4966d;
}

/**/