body {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
}
a {
    color: black;
}
.navbar1 {
    background: #FFFFF0;
    filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));
}
.navbar-toggler {
    border: none;;
}
.nav-link {
    font-size: 1rem;
    margin-right: 50px;
    color: "#1e1e1e";
}

.nav-link:hover {
    color: black;
    /* font-weight: bold; */
}

.carousel-item {
    height: 780px;
    position: relative;
}

.carousel1 {
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 0 0 100px 100px;
}

/* .carousel-indicators [data-bs-target]{
    border-radius: 50%;
    width: 15px;
    height: 15px;
    
} */

/* .carousel .carousel-indicators button {
    width: 16px;
    height: 16px;
    border-radius: 100%;
    background-color: #000;

} */
.carousel-indicators {
    margin-right: 5%;
    justify-content: flex-end;

}


.carousel-indicators .carousel1-button {
    width: 16px;
    height: 16px;
    border: 1px solid rgba(0, 0, 0, 1);

    border-radius: 100%;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;

    background-color: #00000000;
}

.carousel .carousel-indicators button:hover {
    background-color: #000;
    opacity: 1;
}


.slide1 {
    background-color: #FFD700;
    font-size: 1.2rem;
    background-image: url('../assets/slide1.webp');
    background-size: cover;
    /* Ensures the image covers the whole container */
    background-position: center;
    /* Centers the image within the container */
    background-repeat: no-repeat;
    /* Prevents repeating the image */
}

.slide2 {
    background-color: #E44F43;
}

.slide3 {
    background-color: #D3D3D3;
    background-image: url('../assets/collage.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.content1 {
    max-width: 40%;
}

.carousel-slide1-title1 {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
    font-size: 96px;
    line-height: 128px;
    display: flex;
    align-items: center;
    letter-spacing: -0.02em;

}

.carousel-slide1-image1 {
    width: 292px;
    height: auto;
}

.carousel-slide1-text1 {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
}

/* Media query for screens smaller than 1000px wide */
@media (max-width: 999px) {

    /* 999px because less than 1000px means up to 999px */
    .carousel-slide1-text1 {
        display: none;
        /* Hide the div */
    }

    .carousel1 {
        padding: 0 0 10px 10px;
    }

    .carousel-item {
        height: 400px;
    }

    .content1 p {
        display: none;
    }

    .content3 p {
        display: none;
    }

}

.spacer-200 {
    height: 200px;
}

.spacer-50 {
    height: 50px;
}

.spacer-100 {
    height: 100px;
}

.spacer-100-with-button {
    height: 100px;
    display: flex;
    justify-content: flex-end;
}

.spacer-2rem {
    height: 2rem;
}

.spacer-3rem {
    height: 3rem;
}

.spacer-4rem {
    height: 4rem;
}

.spacer-5rem {
    height: 5rem;
}

.spacer-6rem {
    height: 6rem;
}

.narrative-thumbnail-holder1 {
    height: 198px;
    width: 100%;

}

.nthumb {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.narrative-scroll-container {
    display: flex;
    overflow-x: auto;
    /* Space between cards */
    /* gap: 6rem; */
    gap: 4vw;

    padding-bottom: 1rem;
    scroll-snap-type: x mandatory;
    /* Smooth snap between cards */
    min-height: 600px;
}

.narrative-card-holder1 {
    background: #FFFFF0;
    min-width: 400px;
    width: 20vw;
    flex: 0 0 auto;
    scroll-snap-align: start;
    /* Align each card to the start on scroll */
    border: 1px solid #000000;
    border-radius: 2px;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.narrative-card-holder1 .card-body {
    padding: 0;
}

@media (max-width: 768px) {
    .narrative-card-holder1 {
        width: 75vw;
        min-width: 100px;
        max-width: 400px;
        padding-left: 1rem;
        padding-right: 1rem;
        
    }
    
}

.narrative-heading {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400;
    font-size: 1.8rem;
    padding-bottom: .5rem;
    line-height: 110%;
}

.narrative-button {
    border: 1px solid #000000;
    border-radius: 2px;
    padding: 5px 10px;
}

.narrative-button:hover {
    border: 1px solid #000000;
    border-radius: 2px;
}

.styles-button {
    margin: 1em;
    float: left;
    background-color: #ffd700;
    border-radius: 2px;
}

.styles-button:hover {
    background-color: #ffd700;
    border: 1px solid #000000;
    border-radius: 2px;
}

#timeline-holder1 {
    min-height: 500px;
    width: 100%;
    height: 90vh;
    border: 0px solid silver;
    padding: 0px;
    overflow-x: scroll;
    overflow-y: visible;
    white-space: nowrap;
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For IE/Edge */

}

#timeline-holder::-webkit-scrollbar {
    display: none;
}

#timeline-holder-mobile {
    min-height: 250px;
    width: 100%;
    height: 90vh;
    border: 0px solid silver;
    padding: 0px;
    overflow-x: scroll;
    overflow-y: visible;
    white-space: nowrap;

}

/* Hide the default scrollbar */
.custom-scrollbar1::-webkit-scrollbar {
    height: 10px;
    width: 10px;

}


/* The track (background) of the scrollbar */
.custom-scrollbar1::-webkit-scrollbar-track {
    background: transparent;

    /* Transparent background to make it seem invisible */
}

.timeline-title {
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
}

.timeline-description {
    font-weight: normal;
    font-size: 12px;
    text-decoration: none;
}

.timeline-mobile-title {
    font-weight: bolder;
    font-size: 12px;
    text-decoration: none;
}

.timeline-mobile-description {
    font-weight: normal;
    font-size: 10px;
    text-decoration: none;
}

.timeline-building-title {
    font-weight: bolder;
    font-size: 12px;
    text-decoration: none;
}

.timeline-building-description {
    font-weight: normal;
    font-size: 11px;
    text-decoration: none;
}

.timeline-building-mobile-title {
    font-weight: bolder;
    font-size: 10px;
    text-decoration: none;
}

.timeline-building-mobile-description {
    font-weight: normal;
    font-size: 9px;
    text-decoration: none;
}

/* The thumb (the draggable part) */
.custom-scrollbar1::-webkit-scrollbar-thumb {
    background-color: rgba(173, 161, 161, 0.616);
    /* A semi-transparent black */
    border-radius: 2px;
    /* Rounded corners */
    border: 0.1px solid rgba(0, 0, 0, 1);
    /* Border to create contrast */
}

/* Thumb when hovered */
.custom-scrollbar1::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.4);
    /* Darken the thumb when hovered */
}

.custom-scrollbar1::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 0);
    /* A semi-transparent black */

    /* Rounded corners */

    /* Border to create contrast */
}


/* MAP */

.map-container {
    position: relative;
    /* Needed for absolute positioning of overlay */
    width: 100%;
    min-height: 660px;
    height: 85vh;
}

#map {
    width: 100%;
    height: 100%;
}

.map-popup1 {
    font-family: "Lato", sans-serif;
    font-size: 1rem;
}
.button2{
    display: inline-block;
    padding: 5px 10px;
    font-size: 16px;
    color: #000;
    /* Text color */

    /* Background color */
    border: 1px solid #000;
    /* Black border */
    border-radius: 2px;
    /* Rounded corners */
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.button2:hover {
    background-color: #d4d4d4;
    /* Slightly darker background on hover */
    color: #000;
}

/* Optional: Add an active state */
.button2:active {
    background-color: #cecece;
    /* Slightly darker when clicked */
}
.map-popup1 .mapboxgl-popup-content {
    background: #FFFFF0;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
    border-radius: 2px;
    padding-top: 30px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 10px !important;
}
.mapboxgl-popup-close-button {
    font-size: 30px !important; /* Adjust size as needed */
    line-height: 1 !important; /* Ensures proper alignment */
}
.map-popup-title {
    font-weight: bold;
    font-size: 1.2em;
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
}

.map-popup-image-holder {
    height: 5rem;
        background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 200px;
    width: 100%;
}

.map-popup-subject {
    font-size: .8rem;
    border-radius: 2px;
    font-style: normal;
    margin-top: 10px;
}


.map-popup-button .btn {
    background: #FFFFFF;
    border: 1px solid #000000 !important;
    border-radius: 2px;
}

.map-popup-button:hover {
    border: 1px solid #000000;
    border-radius: 2px;
}

.map-overlay {
    position: absolute;
    top: 20px;
    right: 0;
    /* Align to right */
    width: 50%;
    min-width: 300px;
    height: 80%;
    background: rgba(0, 31, 63, 0.9);
    color: white;
    border-left: 2px solid #ccc;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
    padding: 40px;
    overflow-y: auto;
    /* Enable scrolling if content exceeds height */
    display: none;
    /* Initially hidden */
    z-index: 10;
    /* Ensure it's above the map */
}


.map-comment-toggle-holder {
    pointer-events: auto;
}

.map-overlay-toggle-button {
    background: #0d1433;
    color: white;
    padding: 10px 15px;
    margin: 20px;
    border: black;
    stroke-width: 1px;
    border-radius: 2px;
    cursor: pointer;
    z-index: 11;
    /* Ensure it's above the overlay */
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);

}

#add-comment-button{
    background: white;
    color: black;
    padding: 10px 15px;
    border: black;
    stroke-width: 1px;
    border-radius: 2px;
    cursor: pointer;
    z-index: 11;
    /* Ensure it's above the overlay */
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
}
/* FOOTER */
.footer1 {
    min-height: 300px;
    background: #6A6A6A;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: .9rem;
}

.footer-line1 {
    height: 1px;
    background-color: #fff;
    border: none;
    opacity: 1;
}

.footer-link-1 {
    text-decoration: none;
}

.footer-link-1:hover {
    text-decoration: underline;
}

.footer-logo1 {
    width: 100%;
    max-width: 180px;
    height: auto;
}

.footer-left-div {
    padding-left: 1rem;
}

.footer-right-div {
    padding-right: 1rem;
}

.footer-social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    max-width: 100%;
}


/* FOOTER END */



.button1 {
    display: inline-block;
    padding: 5px 20px;
    font-size: 16px;
    color: #000;
    /* Text color */

    /* Background color */
    border: 1px solid #000;
    /* Black border */
    border-radius: 2px;
    /* Rounded corners */
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.button1:hover {
    background-color: #f0f0f0;
    /* Slightly darker background on hover */
    color: #000;
}

/* Optional: Add an active state */
.button1:active {
    background-color: #e0e0e0;
    /* Slightly darker when clicked */
}

.button-white1 {
    background-color: #fff;
}

.button-yellow1 {
    background-color: #FFD700;
    padding: 5px 20px;
}

/* Style for the Home button */
.mapboxgl-ctrl-home {
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 5px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Navigation button container */
.nav-buttons {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 1;
}

/* Style for each button */
.nav-buttons button {
    padding: 5px 10px;
    font-size: 16px;
    cursor: pointer;
    color: "#1e1e1e";
}


.marker-shadow {
    width: 25px;
    height: auto;
    position: absolute;
    left: 3px;
    top: 27px;
    pointer-events: none;
    opacity: 50%;
}

.marker-shadow-commented {
    width: 25px;
    height: auto;
    position: absolute;
    left: 5px;
    top: 40px;
    pointer-events: none;
    opacity: 50%;
}

.map-svg-marker {
    width: 30px;
    height: 30px;
    background-size: cover;
    background-repeat: no-repeat;
}

.map-svg-marker-commented {
    width: 42px;
    height: 45px;
    background-size: cover;
    background-repeat: no-repeat;
}

.map-comment-marker {
    width: 30px;
    height: 20px;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('../assets/mapicons/comment.svg');
}

.map-illustration-marker {
    background-size: cover;
    background-repeat: no-repeat;
}

.transparent-link {
    color: inherit;
    text-decoration: none;
}

.transparent-link:hover {
    color: inherit;
}

.transparent-link2 {
    color: inherit;
    text-decoration: underline;
}


.transparent-link2:hover {
    color: inherit;
}

.carousel2 {
    height: 100%;
}

.h50 {
    height: 50%;
    padding-top: 4rem;
    padding-right: 10rem;

}

.slide2-stats1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.slide2-image1 {
    height: 250px;
    width: auto;
}

.slide2-text1 {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
    font-size: 5rem;
    line-height: 5rem;
}

.slide2-text2 {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 600;
    font-size: 3rem;
    line-height: 3rem;

}

.slide2-button-holder1 {
    height: 250px;

}

.slide2-button1 {
    font-size: 1.5rem;
    border-radius: 2px;
}

.slide2-button1:hover {
    font-weight: 500;
    color: #fff;
    background-color: #ffffff52;
}


.content3 {
    max-width: 40%;
}

.carousel-slide3-title1 {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
    font-size: 96px;
    line-height: 128px;
    display: flex;
    align-items: center;
    letter-spacing: -0.02em;

}

@media (max-width: 768px) {
    .carousel-slide3-title1 {
        font-size: 40px;
    }

   
}

/* Screen size dependent content width */

@media (min-width: 1000px) {
    .container-fluid {
        max-width: 100%;
    }
}

@media (min-width: 1440px) {
    .container-fluid {
        max-width: 1400px;
    }
}

@media (min-width: 1600px) {
    .container-fluid {
        max-width: 1560px;
    }
}


/* NARRATIVES PAGE */

.narratives-landing1 {
    background-image: url('../assets/narratives-landing.webp');
    height: 640px;
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    padding-top: 100px;
}

.narratives-landing1-title1 {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
    font-size: 96px;
    line-height: 128px;
    letter-spacing: -0.02em;
}

.narratives-landing1-text1 {
    max-width: 500px;
}

.narratives-body1 {
    background-image: url('../assets/narratives-gridlines.svg');
    background-size: cover;
    background-position: top;
    background-repeat: repeat-y;
    /* height: 2000px; */
    padding: 5rem;

}

.narrative-item-thumbnail {
    height: 200px;
    width: 70%;
    /* min-width: 200px; */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 2px;
    cursor: pointer;


}

.narratives-category-title {
    font-weight: bold;
}

.narratives-item-title {
    cursor: pointer;
    font-family: 'Lato';
    font-style: bold;
    font-weight: 700;
    font-size: 20px;
    width: 300px;

}

.gradient-banner {
    width: 100%;
    height: 140px;
    background: linear-gradient(to right, #1e3c72, #e23a5a);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.gradient-banner::before,
.gradient-banner::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 50%;
    height: 3px;
    background-color: white;
}

.gradient-banner::before {
    left: 0;
    transform: translateY(-50%);
}

.gradient-banner::after {
    right: 0;
    transform: translateY(-50%);
}

.content {
    display: flex;
    align-items: center;
    background-color: transparent;
    padding: 0 10px;
    z-index: 1;
}

.content a {
    text-decoration: none;
}

.podcast-text {
    color: white;
    font-size: 18px;
    font-weight: bold;
}

.micicon {
    font-size: 3rem;
}

.podcast1-title {
    display: flex;
    flex-direction: row;
    background: linear-gradient(to right, #1e3c72, #e23a5a);
    color: white;
    height: 140px;
    align-items: center;

}

.podcast1-title:before,
.podcast1-title:after {
    content: "";
    flex: 1 1;
    border-bottom: 3px solid;
    margin: auto;
}

.podcast1-title:before {
    margin-right: 15px
}

.podcast1-title:after {
    margin-left: 15px
}

.podcast-link {
    text-decoration: none;
}

/* ABOUT PAGE */

.aboutus-row-1 {
    gap: 10px;
}


#about-image-1 {
    background-image: url('../assets/aboutus/aboutus-1.webp');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 200px;
    height: 300px;
}

#about-image-2 {
    background-image: url('../assets/aboutus/aboutus-2.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 200px;
    height: 300px;

}

#about-image-3 {
    background-image: url('../assets/aboutus/aboutus-3.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 200px;
    height: 300px;
}

#about-image-4 {
    background-image: url('../assets/aboutus/aboutus-4.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 200px;
    height: 300px;
}


#about-image-5 {
    background-image: url('../assets/aboutus/aboutus-5.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 400px;
    height: 200px;
}

#about-image-6 {
    background-image: url('../assets/aboutus/aboutus-6.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 150px;
    height: 300px;
}

#about-image-7 {
    background-image: url('../assets/aboutus/aboutus-7.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 400px;
    height: 200px;
}

.aboutus-yellow {
    background: linear-gradient(to right, #F5D31D, #FFFFF0);
    padding-top: 1rem;
    padding-bottom: 1rem;
}


.aboutus-red {
    color: #E44F43;
}

.aboutus-bottom {
    font-style: italic;
}

/* ABOUT PAGE END */



/* MAP LEGEND */
.legend-holder {
    display: flex;
    flex-direction: column; /* Allow vertical stacking */
    justify-content: flex-start;
    border-radius: 4px;
    z-index: 2;
    width: 80%;
    position: absolute;
    bottom: 35px;
    left: 10px;
  }
  .legend-toggle-btn {
    background-color: #ffffff;
    color: rgb(0, 0, 0);
    font-size: 12px;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: space-between;
   
    border: black;
    stroke-width: 1px;
    border-radius: 2px;
    cursor: pointer;
    z-index: 11;
    /* Ensure it's above the overlay */
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
    position: relative;
    padding: 10px 15px;
  }
  

  
  /* Rotate chevron when open */
  .legend-toggle-btn[aria-expanded="true"] .chevron-icon {
    transform: rotate(180deg); /* ▲ */
  }
  
  /* Animate chevron */
  .chevron-icon {
    transition: transform 0.3s ease;
    font-size: 0.9rem;
  }

.legend-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;;
    margin: 3px;
    border-radius: 2px;
    font-size: .5rem;
    font-weight: regular;
    min-width: 80px;
    text-align: center;
    z-index: 1000;
}
.legend-key {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.legend-key:last-child {
    margin-bottom: 0;
}

.legend-color {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    border-radius: 3px;
}

.legend-text {
    font-size: .8rem;
}

.legend-title {
    font-family: 'Playfair Display';

}

/* END OF MAP LEGEND */


/* MODAL */

.narratives-modal-title {
    font-family: 'Playfair Display';
    font-weight: 700;
    line-height: 3rem;
    font-size: 2rem;
    letter-spacing: -0.02em;
}

.modal-header .btn-close {
    padding-right: 50px;
}

.narrative-modal-primary-image {

    border-radius: 2px;
    padding: 40px;
    padding-bottom: 0px;
}

.narrative-modal-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 3 columns */
    gap: 20px;
    /* Space between grid items */
    padding: 40px;
    width: 100%;
    box-sizing: border-box;
}

.narrative-modal-grid-item {
    display: flex;
    flex-direction: column;
    align-items: left;
    text-align: left;
    width: 500px;
}

.narrative-modal-image-container {
    width: 100%;
    aspect-ratio: 1/1;
    background-size: cover;
    background-position: center;
    border-radius: 2px;
}

/* MODAL END */



/* Map modal */
/* Ensure modal content has a slight shadow and rounded corners */
.modal-content {
    border-radius: 2px !important; /* Subtle rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important; /* Soft shadow */
    display: flex;
    flex-direction: column;
    max-height: 90vh; /* Prevent excessive height */
    overflow: hidden;
}
#modal-login-section {
    background: none !important; /* Removes background */
    border: none !important; /* Removes any border */
    padding: 0 !important; /* Adjusts spacing if needed */
    margin: 0 !important; /* Removes margin */
}
/* Allow modal-body to be flexible and scroll if needed */
.modal-body {
    flex: 1;
    overflow-y: auto; /* Enables scrolling if content overflows */
    
    text-align: left !important;
    padding-left: 40px !important; /* Adds spacing */
    padding-right: 40px !important; /* Adds spacing */
}
.modal-body hr {
    display: none !important;
}
.modal-header {
    border-bottom: none !important;
    
    text-align: left;
    justify-content: flex-start !important;
    padding-left: 40px !important; /* Increased spacing */
    padding-top: 40px !important; /* Increased spacing */
}
.modal-header .narratives-modal-title {
    text-align: left;
    flex-grow: 1; /* Ensures it takes up available space */
}
/* Optional: Style the close button for a cleaner look */
.modal-header .btn-close {
    font-size: 14px;
    opacity: 0.8;
}

.modal-header .btn-close:hover {
    opacity: 1;
}
.modal .btn {
    border-radius: 2px !important;
    margin: 5px !important; /* Adds spacing between buttons */
}

.modal .modal-login-button,
.modal #comment_submit_button {
    background-color: #003E7E !important;
    border-color: #003E7E !important;
    color: white !important;
    border-radius: 2px !important;
}


/* Style Sign-up button */
.modal .btn-signup {
    background-color: #FFD700 !important;
    border-color: #FFD700 !important;
    color: black !important;
    font-weight: bold;
    border-radius: 2px !important;
}
#modal-comments-left #modal-login-section{
    text-align: left !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligns content to the left */
}

#map2 {
    height: 800px; /* Adjust height as needed */
    max-height: 90vh; /* Prevents it from getting too tall */
    width: 100%; /* Ensures it fills the container */
    border-radius: 2px; /* Matches modal style */
}
/* Map modal close */

/* CMS PAGES */

.page-content {
    min-height: 1000px;
}

/* CMS PAGES END */

/* STORYMAP */


.storymap-banner-desktop {
    height: 817px;
    width: 100%;
    background-image: url('../assets/storymap/storymap-banner.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 100px;
}
.storymap-banner-mobile {
    display: none;
}

@media (max-width: 768px) {
    .storymap-banner-mobile{
display: block;
    }
    .storymap-banner-desktop {
        display: none;
    }
    .storymap-banner-text{
        padding: 2rem;
    }
}

.storymap-banner-content {
    width: 35vw;
    min-width: 350px;
    margin-left: 10vw;
    background-color: #ffffff52;
    
}

.storymap-banner-title {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
    font-size: 64px;
    line-height: 64px;
    letter-spacing: -0.02em;
    padding-left: 2rem;
}

.storymap-map-holder {
    display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  min-height: 800px; /* Or whatever height your map needs */
}
.storymap-map {
    flex: 1;
    min-height: 800px;
  }
  .storymap-overlay-content {
   
    padding: 40px;
    /* Padding around the text */
   
    z-index: 1000;
    /* Ensure the text stays above the map */
    padding-left: 5rem;
    padding-right: 5rem;
    pointer-events: none;
    overflow-y: auto;
}

  .overlay-narrow {
    width: 25vw;
    min-width: 300px;
}
/* .overlay-left {
    order: 0 !important
}

.overlay-right {
    order: 1;
} */
/* Default order: overlay first (left) */
.storymap-map-holder.overlay-left .storymap-overlay-content {
    order: 0;
  }
  
  .storymap-map-holder.overlay-left .storymap-map {
    order: 1;
  }
  
  /* Reversed order: overlay last (right) */
  .storymap-map-holder.overlay-right .storymap-overlay-content {
    order: 1;
  }
  
  .storymap-map-holder.overlay-right .storymap-map {
    order: 0;
  }
  
.overlay-wide {
    width: 35vw;
    min-width: 300px;
}

@media (max-width: 768px) {
   
    .storymap-map-holder {
        flex-direction: column;
      }
      .storymap-overlay-content {
        width: 100%;
        order: -1; /* Moves overlay to the top */
      }
      .storymap-map {
        width: 100%;
      }
      .overlay-narrow {
        width: 100vw;
        min-width: 400px;
    }
    .overlay-right {
        order: 0;
    }
    
.overlay-wide {
    width: 100vw;
    min-width: 300px;
}
}


.map-blackbg {
    background: black;
}

.map-whitebg {
    background: white;
}





.overlay-dark {
    background: rgba(0, 0, 0, 1);
    /* Semi-transparent background for better visibility */
    color: white;
    /* Text color */
}

.overlay-light {
    background: rgba(255, 255, 255, .5);
    /* Semi-transparent background for better visibility */
    color: black;
    /* Text color */
}



.overlay-center {
    top: 30vh;
    left: 30vw;
}



.storymap-overlay-title {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 52px;
    letter-spacing: -0.02em;
}

.storymap-overlay-text {
    font-size: 1rem;
}

.storymap-gap1 {
    height: 50px;
}

.storymap-section-holder {
    height: 800px;
    width: 100%;
    position: relative;

}

#storymap-section1 {
    background-image: url('../assets/storymap/mughal-gardens.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#section1-overlay {
    right: 15vw;
    top: 6vh;
}

.leaflet-container a.leaflet-popup-close-button{
    position: absolute;
    top: 10px;
    right:10px;
    color: white;
}
.storymap-comment-popup .leaflet-popup-content-wrapper,
.storymap-comment-popup  {
    
    background: #0D1433;
    color: white;
    font-size: 1rem;
    padding: .8rem;
    border-radius: 2px;
}
.leaflet-popup-tip{
    background: #0D1433;
    padding: .8rem;
    
}

.storymap-button1-text {
    font-size: 1rem;
}


/* Storymap mobile view */
@media (max-width: 999px) {
    /* .storymap-banner-text, .storymap-overlay-text {
        display: none;
    } */
    .storymap-overlay-title {
        font-size: 21px;
        line-height: 26px;
        letter-spacing: -0.02em;
    }
    #storymap-section1 {
        background-image: url('../assets/storymap/mughal-gardens.webp');
        width: 100%;
        background-position: center;
        background-repeat: no-repeat;
    }
}

/* STORYMAP END */

/* ARK PAGES */

.item-primary-image-container {
    width: 100%;
    height: 70vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

}

.card1 {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card1:hover {
    transform: scale(1.01);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.bibliography {
    width: 80%;
    height: 5rem;
}

.item-grid-container {
    gap: 20px;

}

.item-grid-item {
    display: flex;
    flex-direction: column;
    align-items: left;
    text-align: left;
    width: 400px;
    max-width: 100%;
}

.item-image-container {
    width: 100%;
    aspect-ratio: 1/1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.pdf-container {
    border: 1px solid black;
}

.item-image-caption {
    padding-left: 1rem;
    padding-right: 1rem;
}
.item-table {
    width: 100%;
    border-collapse: collapse;
    border: none; /* Removes all table borders */
}

.item-table td, 
.item-table th {
    border: none; /* Removes all inner cell borders */
}

/* Add a top border to the first row */
.item-table tr:first-child th,
.item-table tr:first-child td {
    border-top: 1px solid black;
}

/* Add a vertical border after the first column */
.item-table td:first-child,
.item-table th:first-child {
    border-right: 1px solid black;
    
}
.item-table td, .item-table th {
    border: none;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}


.item-title {
    font-family: 'Playfair Display';
    font-weight: 400;
    line-height: 3rem;
    letter-spacing: -0.02em;
}

.item-media-title {
    font-family: 'Playfair Display';
    font-weight: 600;
    line-height: 2rem;
    letter-spacing: -0.02em;
}

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

/* ARK PAGES END */


/* FOLLOW ARCHITECT */

.followarch-container {
    
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem;
    position: relative;
  }
  #fa-opening-collage {
    width: 100%;
    aspect-ratio: 1587.5/885;
    background-image: url('../assets/followarch1/Opening collage with text.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}
  .followarch-h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 2.5rem;
    margin-top: 1rem;
  }

  .followarch-h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  .subheading {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 2rem;
  }

  .image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
  }
  figure {
    margin: 0;
  }

  figure img {
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
  }

  figcaption {
    font-size: 0.8rem;
    margin-top: 0.5rem;
    color: #333;
  }

.opening-content-a{
    margin-top: -480px; margin-left: 10px;
}
.opening-content-b{
    margin-top: 220px; margin-left: 10px;
}

#followarch-desktop {
    display: block;
}

#followarch-mobile {
    display: none;
}


  @media (max-width: 768px) {

    #followarch-desktop {
      display: none;
    }
    #followarch-mobile {
      display: block;
    }
    .opening-content-a {
        margin-top:auto;
      width: 100%;
      margin-bottom: 10px;
    }
    .opening-content-b {
        margin-top:auto;
      width: 100%;
      margin-bottom: 10px;
    }
    
}
 
  @media (max-width: 600px) {
    .followarch-h1 {
      font-size: 2rem;
    }
    
    .subheading {
      font-size: 1rem;
    }
  }

.followarch-title2 {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400;
    font-size: 30px;
    line-height: 44px;
    letter-spacing: -0.02em;
}

.canvas2 {
    width: 100%;
    height: 2rem;
}

.fa-caption1 {
    font-size: 0.7rem;
}

#fa-group-photo1 {
    width: 100%;
    aspect-ratio: 1920/1205;
    background-image: url('../assets/followarch1/group-photo1.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}

.fa-para-1 {
    min-width: 400px;
}

.fa-video1 {
    width: 100%;
    aspect-ratio: 853/480;
}

.followarch-line1 {
    height: 20px;
    width: calc(100% - (100% - 1320px)/2);
    background-image: url('../assets/followarch1/dotted-line-circle1.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right;
}

.followarch-line2 {
    height: 20px;
    width: calc(100% - (100% - 1320px)/2);
    background-image: url('../assets/followarch1/dotted-line-circle2-left.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left;
    float: right;
}

.followarch-line-2dots {
    background-image: url('../assets/followarch1/line2.svg');
    height: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.followarch-canvas1 {
    width: 100%;
}

/* FOLLOW ARCHITECT END */

.timeline-map {
    width: 100%;
    height: 100vh;
}


/* ITEM TEMPLATE */

.item-carousel-item {
    height: 500px;
    position: relative;
}

.item-carousel-indicators {
    gap: 10px;
    width: 100%;
    overflow-x: auto;
    max-height: 600px;
}

.item-carousel-button {
    width: 200px;
    min-width: 200px;
    height: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.item-carousel-button:hover {
    border-color: #007bff;
}

.item-carousel-slide {
    height: 100%;

}

.item-carousel-pdf-container {
    height: 100%;
}

.item-carousel-image-container {
    height: 100%;
}

.item-carousel-image-caption {
    line-height: 2rem;
    padding: 10px;
}

.item-carousel-prev,
.item-carousel-next {
    height: calc(100% - 5rem);
}

.map-popup-comments-count {
    cursor: pointer
}

.comment-box {
    height: 8rem;
    min-height: 4rem;
    width: 100%;
}

#comment_map {
    height: 25rem;
    width: 100%;
    min-height: 200px;
}

#comment_building_project {
    width: 30rem;
}

.vertical-5rem {
    width: 100%;
    height: 5rem;
}

.tabulator {
    background-color: #fffcec;
}

.box1 {
    max-width: 40rem;
}

.input1 {
    min-width: 30rem;
}

.comment-card {
    padding: 5px 5px;
}

.input2 {
    min-width: 15rem;
}

.input3 {
    width: 5rem;
}

.sideborder1 {
    border-left: solid 1px #000;
}

.aboutus-content h2 {
    font-family: 'Playfair Display';
    font-size: 3rem;
    color: #E44F43;
    font-weight: 400;
    line-height: 3rem;
    letter-spacing: -0.02em;
}

.aboutus-content2 h2 {
    font-family: 'Playfair Display';
    font-weight: 400;
    line-height: 3rem;
    letter-spacing: -0.02em;
}

#timeline-holder1 {
    display: block;
}

#timeline-holdermobile {
    display: none;
}


/* Show mobile version, Hide desktop version when screen width is 768px or smaller */
@media (max-width: 768px) {
    #timeline-holder1 { display: none; }
    #timeline-holdermobile { display: block; 
        display: block; 
        overflow-x: auto;  /* Enables horizontal scrolling */
        white-space: nowrap; /* Prevents content from wrapping */
        width: 100%;
        height: 650px; /* Adjust height as needed */
        border: 1px solid #ddd; /* Optional: Visual clarity */
        padding-bottom: 10px;}
        .timeline2 {
            display: inline-block; /* Ensures it behaves as a scrollable content */
        }


      
        .legend-holder {
            left: 5%;
            bottom: 10px;
            width: auto;
          }
        
          #legendContent {
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
            z-index: 1000;
          }
          .legend-box{
            width: auto;
            height: auto;
            padding: 10px 30px;
            margin: 10 px;
            font-size: 0.8rem;
          }
    
}

.search-top-red {
    /* height: 466px; */
    background: #E44F43;
    padding-top: 6rem;
    padding-bottom: 6rem;
}


.search-top-red-imageholder {
    height: 200px;
    width: 100px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right;

}

/* .search-top-red .row {
    margin-left: -100px;
} */

.search-top-red-number {
    font-size: 5rem;
    line-height: 5rem;
}

.search-top-red-label {
    font-size: 2rem;
    line-height: 2rem;
    font-weight: 700;
}

.search-top {
    padding-left: 5rem;
    padding-right: 5rem;
}

@media (max-width: 768px) {
    .search-top {
        padding: 3rem !important;
        }

    .search-top-red-number {
        font-size: 3rem !important;
        line-height: 2.5rem !important;}

    .search-top-red-label {
        font-size: 1rem!important;
        line-height: 2.5rem!important;
        font-weight: 700!important;
    }
    .slide2-button-holder1 {
        height: 50px!important;
    }

element.style {
background-image: url(./assets/red-buildings.svg);
}
.search-top-red-imageholder {
height: 80px!important;
width: 40px!important;
background-size: cover;
background-repeat: no-repeat;
background-position: right;
padding: 20px!important;
}
.h50 {

padding-top: 1rem;
padding-right: .2rem;
justify-content: space-between;
}



}

.btn-danger{
    background: rgb(228, 79, 67);
    border-radius: 2px;
}
.btn-danger:hover{
    background-color: rgba(228, 79, 67, 0.8);
    }

.form-control{
    border-radius: 2px!important;
    
    border: 1px solid black!important;
}
.btn-outline-secondary{
    border-radius: 2px !important;;
}
.search-top-search-container {
    width: calc(100% - 10rem);
    min-width: 20rem;
}
h3{
    font-family: 'Lato';
    font-style: bold;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -0.02em;
}
.search-heading1 {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 48px;
    letter-spacing: -0.02em;
}

#search-results-sorter {
    width: 10rem;
}

.playfair {
    font-family: 'Playfair Display';
    
}
.w700 {
    letter-spacing: -0.02rem;
    font-weight: 700;
}

.search-tips-table {
    background-color: #e6e6fa;
}

.search-tips-table thead {
    font-weight: bold;
}

.search-tips-table td {
    border: 1px solid black;
    padding: 0.4rem;
}

.search-checkbox1 {
    transform: scale(1.5);
    vertical-align: middle;
    width: 2rem;
    border-radius: 2px !important;
    border-color: #000!important;
}

.search-checkbox-label {
    margin-left: 5px;
}

.search-checkbox2 {
    transform: scale(1.5);
    vertical-align: middle;
    width: 2rem;
}

.search-widescreen {
    padding-left: calc( max(0.5rem, 0.7vw) );
    padding-right: calc( max(0.5rem, 0.1vw) );
    max-width: 90%;
    
}

.search-result-thumbnail {
    width: 100%;
    height: auto;
}

.search-result-cell {
    height: calc(200px + 4rem);
    width: 220px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;

}

.search-result-cell:hover {
    border-color: #000;
}

.search-filters-accordion-body {
    max-height: 20rem;
    overflow-y: auto;
}
label{
    font-size: 1rem;
    font-weight: 700;
}
checkbox{
    transform: scale(1.5);
    vertical-align: middle;
    width: 2rem;
    border-radius: 2px !important;
    border-color: #000!important;
}
.accordion-button {
    color: black !important;  /* Set your desired text color */
    background-color: white !important;  
    --bs-accordion-active-color: inherit;
    --bs-accordion-active-bg: transparent;
    outline: none !important;
    box-shadow: none !important;
} 
.accordion-button.collapsed {
    padding: 0.5rem 1rem !important; /* Adjust padding as needed */
}
.irs {
    position: relative;
    display: block;
    
    font-size: 12px;
    font-family: Lato, sans-serif;
}
.irs--round .irs-handle {
    top: 26px;
    width: 24px;
    height: 24px;
    border: 0px solid #e44f43;
    background-color: #e44f43;
    border-radius: 24px;
    box-shadow: 0  rgba(0, 0, 255, 0.0);
}

.irs--round .irs-from, .irs--round .irs-to, .irs--round .irs-single {
    font-size: 14px;
    line-height: 1;
    text-shadow: none;
    padding: 3px 5px;
    background-color: #fff;
    color: #000;
    border-radius: 2px;
}
    
.irs--round .irs-line {
    top: 36px;
    height: 1px;
    background-color: #000;
    border-radius: 2px;
}

.irs--round .irs-from:before {
    border-top-color: #ffffff;
}

.irs--round .irs-from:before {
    border-top-color: #ffffff;
}
.irs--round .irs-to:before {
    border-top-color: #ffffff;
}
.irs--round .irs-grid-text {
    color: black;
    font-size: 13px;
}
.irs--round .irs-bar {
    top: 36px;
    height: 4px;
    background-color: #000;
}

.select-black-border {
    border-radius: 2px;
    border: 1px solid black;
}

.btn-light {
    border-radius: 2px!important;
}


@media (min-width: 768px) {
    /* For wide-screens */
    .sayt-box {
        display: none;
    }
}

.arkid-icon {
    font-size: 2rem;
}

.arkid-citation {
    min-width: 5rem;
    max-width: calc( max(60%, 300px)) ;
}

.arkid-sharebox {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

.hard-wrap {
    word-break: break-word;       /* Break words if needed (deprecated but widely supported) */
    overflow-wrap: break-word;    /* Modern standard */
    word-wrap: break-word;        /* Legacy support for older browsers */
}

.search-indent1 {
    padding-left: 0.5rem;
    
}

.media-audio-embed {
    width: 100%;
}