/* @import url('https://fonts.googleapis.com/css2?family=Parkinsans:wght@300..800&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap'); /* Add Oswald font */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Playfair Display", serif;
    color: white;
}

h1,h2,h3,h4,h5,h6 {
    font-family: 'Oswald', sans-serif;
    letter-spacing: 2px;
}

.hero img{
    width: 100%;
    height: 92vh;
    object-fit: cover;
}

.hero-title, .hero-subtitle {
    font-family: 'Oswald', sans-serif; /* Set font to Oswald */
    color: #f0f0f0; /* Darker shade of grey for more contrast */
    text-shadow: 3px 3px 15px rgba(0, 0, 0, 0.8), -3px -3px 15px rgba(0, 0, 0, 0.8); /* Stronger and more pronounced shadow */
}

.hero-title {
    font-size: 4rem; 
}

.hero-subtitle {
    font-size: 2rem; 
}

.photographer h6 {
    position: absolute;
    bottom: 10px;
    right: 20px;
}

.map-list {
    margin-bottom: 0;
}

.map-list li {
    list-style-type: none;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 0;
    gap: 1rem;
}

.map-list li:hover {
    border-radius: 0.8rem;
    background-color: var(--bs-primary);
    color:var(--bs-white);
}

/* Ensure the map-list is horizontally scrollable */
.map-list {
    white-space: nowrap; /* Prevent wrapping of list items */
    overflow-x: auto; /* Enable horizontal scrolling */
    display: flex; /* Flex layout for horizontal arrangement */
    flex-wrap: nowrap; /* No wrapping of items */
}

/* Hide scrollbar for better visuals on supported browsers */
.map-list::-webkit-scrollbar {
    display: none;
}

.map-list li a {
    text-decoration: none;    /* Remove underline */
    color: inherit;           /* Inherit the color from the parent (list item) */
}

.map-list li a:hover {
    text-decoration: none;    /* Remove underline on hover */
    color: inherit;           /* No color change on hover */
}

article {
    font-size: large;
    width: 60%;
    margin: 0 auto;
}

article div p{
    padding: 1.6em 1em;
}

article div:first-child {
    border-bottom: 3px solid green;
}

article div:nth-child(3) {
    border-left: 3px solid green;
}

#map ,#political-map, #contour-map, #elephant-visit ,#slope, #EDA, #frequency-map, #heat-map, #hexamap {
    width: 100%;
    height: 90vh;
    position: sticky;
    left: 0;
    top: 8.5vh;
    z-index: 0;
}

.map-sidebar .card {
    display: flex;
    flex-direction: column;
    margin-left: 6rem;
    margin-top: 24rem;
    background-color: black;
    color: white;
    width: 24rem;
    padding: 1rem;
}

.map-contents {
    padding: 2rem;
    font-size: large;
    width: 60%;
    margin: 0 auto;
    text-align: justify;
    clear: both; /* Clear any floating elements or sticky elements */
}

.contour-contents p b {
    font-size: 2rem;
    color: #93d908;
}

.first-word {
    font-size: 3em;
    float: left;
    line-height: 1;
    margin-right: 10px;
    position: relative;
    top: -11px; /* Adjust this value to move it further up */
}    

.styled-paragraph::first-letter {
    font-size: 3em;
    float: left;
    line-height: 1;
    margin-right: 10px;
    position: relative;
    top: -13px;
}

.legend {
    position: fixed; /* Fixed at bottom-right */
    bottom: 6rem;
    right: 2.5rem;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    z-index: 10;
    transition: opacity 0.3s ease-in-out;
    
}

.karnataka {
    position:relative;
}

/* Fancy Legend */
.fancy-legend {
    position: absolute;
    top: 40%;
    right: 10%;
    z-index: 20;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.fancy-legend div {
    display: flex;
    justify-content: space-between;
}

.legend-line {
    width: 300px;
    height: 10px;
    border-radius: 8px;
    background: linear-gradient(to right, lightgreen, darkgreen);
}

.legend-heatmap-line {
    width: 300px;
    height: 10px;
    border-radius: 8px;
    background: linear-gradient(to right, rgb(255, 255, 0), rgb(253, 53, 186));
}

.heatmap-legend-con {
    display: flex;
    justify-content: space-between;
}

.hidden {
    opacity: 0; /* Smooth fade-out */
    pointer-events: none;
}

/* contour legned start */
.legend #con1 {
    display: inline-block;
    background-color: #d97b08;
    width: 50px;
    height: 8px;
    border-radius: 4px;
}

.legend #con2 {
    display: inline-block;
    background-color: #dacc07;
    width: 50px;
    height: 8px;
    border-radius: 4px;
}

.legend #con3 {
    display: inline-block;
    background-color: #978b0c;
    width: 50px;
    height: 8px;
    border-radius: 4px;
}

.legend #con4 {
    display: inline-block;
    background-color: #8f6105;
    width: 50px;
    height: 8px;
    border-radius: 4px;
}

.legend #con5 {
    display: inline-block;
    background-color: #5f8316;
    width: 50px;
    height: 8px;
    border-radius: 4px;
}

input[type="checkbox"] {
    margin-right: 2px; /* Adds 2px space between the checkbox and the next element */
    vertical-align: middle; /* Aligns the checkbox vertically with the text */
}
/* contour legned end */

/*legend for political and distribution*/
.legend #p1, .legend #eda1 {
    display: inline-block;
    height: 14px;
    width: 14px;
    background-color: #93d908;
} 

.legend #eda2 {
    display: inline-block;
    height: 14px;
    width: 14px;
    background-color:#f0f0f0;
} 
/*legend for political and distribution*/


/* EV legend start  */
.legend #ev1 {
    display: inline-block;
    background-color: #f91aaf;
    width: 12px;
    height: 10px;
    border-radius: 50%;
}

.legend #ev2 {
    display: inline-block;
    border: 2px solid #29ec13;
    width: 24px;
    height: 8px;
    
}

.legend #ev3 {
    display: inline-block;
    border: 2px solid #FFFFFF;    
    width: 24px;
    height: 8px; 
}
/* EV legend end  */

/* hexagon map legend start  */
#hexamap-legend .hl1{
    display: inline-block;
    background-color: rgb(1, 152, 189);
    width: 50px;
    height: 8px;
    border-radius: 4px;
} 

#hexamap-legend .hl2{
    display: inline-block;
    background-color:  rgb(73, 227, 206);
    width: 50px;
    height: 8px;
    border-radius: 4px;
} 

#hexamap-legend .hl3{
    display: inline-block;
    background-color:rgb(216, 254, 181);    ;
    width: 50px;
    height: 8px;
    border-radius: 4px;
} 

#hexamap-legend .hl4{
    display: inline-block;
    background-color:  rgb(254, 237, 177);
    width: 50px;
    height: 8px;
    border-radius: 4px;
} 

#hexamap-legend .hl5{
    display: inline-block;
    background-color: rgb(254, 173, 84);
    width: 50px;
    height: 8px;
    border-radius: 4px;
} 

#hexamap-legend .hl6{
    display: inline-block;
    background-color: rgb(209, 55, 78);
    width: 50px;
    height: 8px;
    border-radius: 4px;
} 
/* hexagon map legend end  */


/* karnataka legend start */
#karnataka-legend .kar1 {
    display: inline-block;
    background-color: rgb(209, 55, 78);
    width: 50px;
    height: 8px;
    border-radius: 4px;
}

#karnataka-legend .kar2 {
    display: inline-block;
    background-color: rgb(255, 0, 197);
    width: 50px;
    height: 8px;
    border-radius: 4px;
}

#karnataka-legend .kar3 {
    display: inline-block;
    background-color: rgb(179, 148, 86);
    width: 50px;
    height: 8px;
    border-radius: 4px;
}

/* karnataka legend end */


/* legend slope start */
.legend #slope1 {
    display: inline-block;
    background-color: #D7C29E;
    width: 50px;
    height: 8px;
    border-radius: 4px;
}

.legend #slope2 {
    display: inline-block;
    background-color: #FFBEEB;
    width: 50px;
    height: 8px;
    border-radius: 4px;
}

.legend #slope3 {
    display: inline-block;
    background-color: #D7C29E;
    width: 50px;
    height: 8px;
    border-radius: 4px;
}

.legend #slope4 {
    display: inline-block;
    background-color: #E60000;
    width: 50px;
    height: 8px;
    border-radius: 4px;
}

.legend #slope5 {
    display: inline-block;
    background-color: black;
    width: 50px;
    height: 8px;
    border-radius: 4px;
}

/* legend slope start */


#scroll-right {
    display: none;
}

#scroll-left {
    display: none;
}


/* For tablet screens (width 768px and below) */
@media (max-width: 768px) {
    .map-sidebar .card {
      width: 100vw; /* Occupy full width */
      margin-top: 26rem;
      margin-left: 0;
    }

    .legend{
        bottom: 0.5rem;
        right: 0.5rem;
    }

    .photographer h6 {
        bottom: 1px;
        right: 10px;
    }

    #scroll-right {
        display: block;
    }
    
    #scroll-left {
        display: block;
    }
    
  }
  
  /* For mobile screens (width 480px and below) */
  @media (max-width: 480px) {

    h1,h2,h3,h4,h5,h6 {
        font-family: 'Oswald', sans-serif;
        letter-spacing: 1px;
    }

    .hero-title {
        font-size: 3rem; 
    }
    
    .hero-subtitle {
        font-size: 1.5rem; 
    }

    article {
        font-size: medium;
        width: 92%;
        margin: 0 auto;
        text-align: justify;
    }
    
    article div p{
        padding: 0.5em 1em;
    }

    .map-sidebar .card {
      width: 100vw; /* Occupy full width */
      margin-left: 0;
      margin-top: 32rem;
    }

    .legend{
        bottom: 0.5rem;
        right: 0.5rem;
    }

    .map-contents {
        padding: 1rem;
        font-size: medium;
        width: 90%;
        margin: 0 auto;
        text-align: justify;
        clear: both; /* Clear any floating elements or sticky elements */
        
    }

    .photographer h6 {
        bottom: 1px;
        right: 10px;
    }

    #scroll-right {
        display: block;
    }
    
    #scroll-left {
        display: block;
    } 
  }

  @media (max-width: 1024px) {
    #scroll-right {
        display: block;
    }
    
    #scroll-left {
        display: block;
    } 
  }