:root{
    
  --bg: #efeee7;
  --bgcolor: #efeee7;
  --fgcolor: #333333;
  --color1: #333333;
  --color2: #9ea993;
  --color3: #efeee7;
  --color4: #2a4339;
  --color4a: #2a4339cc;
  
  --color5: #d6ceb7;
  --color6: #e7ecf0;
  --color6a: #e7ecf0cc;

}
.sec1{
    background: var(--color2);
    color:var(--color3);
}
.sec2{
    background: var(--color3);
    color:var(--color4);
}
.sec3{
    background: var(--color5);
    /* color:var(--color3); */
}

.textbox{
    background: var(--color4a);
}

img.framed{
    width: 100%;
    max-width: 100%;
    max-height: 600px;
    object-fit: contain;
}

.fold2{
    align-items: center;
}
.fold2 .panel{
    width:40vw;
}
.textcenter{
    text-align: center;
}
.icons{
    display: flex;
    flex-wrap: wrap;
    gap:3rem;
    align-items: center;
    justify-content: center;
}
.icons img{
    width:200px;
    max-width:300px;
}

button{
    cursor: pointer;
}

.btn{
    display: inline-block;
    padding:1rem 2rem;
    background-color: var(--color4);
    color:var(--color3) !important;
    border-radius: 3rem;
}
.btn:hover{
    background-color: var(--color1);
}


.btnOutline{
    display: inline-block;
    padding:1rem 2rem;
    background-color: transparent;
    border: 2px solid var(--color2);
    color:var(--color1) !important;
    border-radius: 3rem;
}
.btnOutline:hover{
    background-color: var(--color2);
}
html{
  scroll-behavior: smooth;
}


body,html{
    margin:0;
    padding:0;
    width:100%;
    min-height: 100vh;
    background-color: var(--bg);
    line-height: 1.5;
    overflow: hidden;
}

main{
    overflow-x:hidden;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    height: 100vh;
    height: 100dvh;
}
section{
  position: relative;
    scroll-snap-align: start;
    flex-shrink: 0;
    overflow: hidden;
    height: 100dvh;
}


*{
    font-family: "Jost",Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

h1,h2,h3,h4,h5{
    margin:0;
}
.sec h1{
    font-size:5rem;
    line-height: 3rem;
    font-family: "Corinthia";
    font-weight: 400;
    font-style: normal;
    margin-bottom: 2rem;
}
.sec h3{
    font-size:1.5rem;
    margin-bottom: 2rem;
}



.centervh{
    display:flex;
    align-items: center;
    justify-content: center;
}
a, a:visited, a:active{
    text-decoration: none;
    color:#000;
}

.height100vh{
    height:100vh;
}
.maxwidth{
    max-width: 1280px;
}

.flex{display:flex}
.wrap{flex-wrap: wrap;}
.gap{gap:1rem;}
.gap2{gap:2rem;}
.gap6{ gap:4rem;}
.padding2{padding:2rem;}
.padding5{padding:5rem;}

.card-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.labelnum{
    display: block;
    width:2rem;
    height:2rem;
    background-color: #000;
    color:#fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

.upper{
    text-transform: uppercase;
}


.round{
    border-radius: 0.4rem;
}

    #sidebar {
      width: 320px;
      height: 100%;
      background: #f8f8f8cc;
      border-right: 1px solid #dcdfe6;
      display: flex;
      flex-direction: column;
    }

    .sidebar-header {
      padding: 20px 20px 10px;
      border-bottom: 1px solid #f0f0f0;
    }

    .sidebar-header h1 {
      margin: 0;
      font-size: 20px;
    }

    .sidebar-header p {
      margin: 6px 0 0;
      font-size: 13px;
      color: #6b7280;
    }

    #locations-list {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      gap: 12px;
      display: flex;
      flex-direction: column;
    }

    .location-card {
      border: 1px solid #e0e4eb;
      border-radius: 4px;
      padding: 12px;
      background: #ffffff;
      cursor: pointer;
      transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
      box-shadow: 0 1px 1px rgba(15, 42, 27, 0.04);
    }

    .location-card:hover {
      border-color: var(--color4);
      box-shadow: 0 3px 8px rgba(30, 77, 70, 0.1);
    }

    .location-card.active {
      border-color: var(--color4);
      box-shadow: 0 4px 12px rgba(35, 88, 88, 0.25);
    }


    .location-description {
      font-size: 13px;
      color: #4b5563;
      margin-bottom: 6px;
    }

    .location-coords {
      font-size: 12px;
      color: #6b7280;
    }

    .location-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      font-size: 13px;
    }

    .location-actions a {
      text-decoration: none;
      color: var(--color4);
      font-weight: 600;
    }

    button {
      border: 1px solid var(--color4);
      background: transparent;
      color: var(--color4);
      padding: 4px 8px;
      border-radius: 6px;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.2s;
    }

    button:hover:not(:disabled) {
      background: var(--color4);
      color: #ffffff;
    }

    button:disabled {
      opacity: 0.6;
      cursor: default;
    }

    .empty-state, .error-state {
      font-size: 14px;
      color: #6b7280;
      padding: 16px;
    }

    #map {
      flex: 1;
      height: 100%;
      z-index: 1;
    }

    .marker-label {
      font-family: sans-serif;
      font-size: 12px;
      font-weight: bold;
      fill: white;
      text-anchor: middle;
      dominant-baseline: middle;
      pointer-events: none;
    }

    .mapcontainer{
        display:flex;
        flex-wrap: wrap;
        height:100dvh;
        flex-direction: row;
    }

    @media only screen and (max-height: 500px) {

        .icons p{margin:0.2rem}
      .icons img{
        width:50px;
      }

      
    }

    @media only screen and (max-width: 1200px) {
        /* .calendar{display: none;} */        
        /* .fold2 .panel:first-child{
            display: none;
        } */
        .fold2 .panel{
            width:100vw;
        }
        
        /*For two fold layout*/
        .paper{
            width:100% !important;
            
        }

        .fold2imagebox{
position:relative !important;
height:30vh;
z-index: 1;
        }
        section{
          min-height: 100dvh;
          height:auto !important;
          padding-top:8rem !important;
        }

        .gap6{gap:2rem}
        h3{font-size: 1rem !important;}

        img.about{
          width:100%;
          height:400px;
          object-fit: cover;
        }


    }
    @media only screen and (max-width: 600px) {


main{
    scroll-snap-type: y proximity;
}


      .mapcontainer {
        flex-direction: column;
      }
      
      #sidebar {
        width: 100%;
        height: 45vh;
        border-right: none;
        border-bottom: 1px solid #dcdfe6;
      }

      #map {
        width: 100%;
        height: 55vh;
      }
      .icons img{
        width:80px;
      }
      
        .fold2 .panel{
            width:100vw;
        }


    }

.fold2imagebox{
    position:sticky;top:0;left:0;
}
.paper{
    width:46%;
}





body {
    
  /* Fallback/Standard for Firefox, Chrome, Edge (since v121) */
  scrollbar-color: var(--color4) transparent;
  scrollbar-width: thin; /* Optional: Sets a thinner scrollbar for Firefox */
}

/* For WebKit browsers (Chrome, Safari, Opera) */
body::-webkit-scrollbar {
  width: 12px;
}

body::-webkit-scrollbar-track {
  background: transparent;
}

body::-webkit-scrollbar-thumb {
  background-color: var(--color4); /* Thumb color */
  border-radius: 6px;
}

.hidden{
    display:none;
}


.left {
  float: left;
  margin: 0 15px 15px 0;
}

.right {
  float: right;
  margin: 0 15px 15px 0;
}

.info img{
    max-width: 100%;
}
.info p{
    min-width:100%;
}

.leaflet-tile {
    filter: grayscale(80%) !important;
}

.box{
  display:flex;
  background-color: var(--color5);
  color:#333;
  backdrop-filter: blur(2px);
}


nav.bar{
  position:fixed;
  left:50%;
  top:1rem;
  transform: translateX(-50%);
  z-index: 52;
  /* background-color: #f5f5f5; */
  padding:0.4rem 0.8rem;
  border-radius: 0.8rem;
  display: flex;
  gap:0.8rem;
  flex-wrap: wrap;
  /* box-shadow: 0 0 10px #cccc; */
  transition: background 0.2s;
}
nav.bar:hover{
  background-color: #f5f5f5;
}
nav.backtop{
  position:fixed;
  right:2rem;
  bottom:1rem;
  z-index: 50;
}

#SectionHome{
  position:relative;
  z-index: 51;
}


img.circle{
  width:200px;
  height:200px;
  object-fit: cover;
  border-radius:50%;
}

.filtered img{
  filter: saturate(20%);
}