body{
  min-height: 100vh;
  margin: 0;
  font-family: sans-serif;
}

/* HEADER LAYOUT FIX */
.header1 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  z-index: 2000;
  background: rgba(0,0,120,1);
  box-shadow: 0px 2px 10px grey;
  display: flex;
  align-items: center;
  justify-content: center; /* keep logo centered */
  color: white;
  font-size: 20px;
  font-family: "Luminari", "Brush Script MT", fantasy;
  font-weight: 800;
}

/* Keep the logo truly centered even with side elements */
.header1 .logo-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  display: flex;
  align-items: center;
  width: max-content;          /* shrink wrap to image */
  z-index: 2500;  
}

.logo-container{
  top: 7px;
}

.header1 .logo-img {
  height: 120%;
  width: auto;
  display: block;
}

/* Instagram icon pinned right with 10px gap */
.instagram-link {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  text-decoration: none;
}

.instagram-icon {
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

/* Hover and focus: subtle circular background + brand color */
.instagram-icon:hover {
  background-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.instagram-icon i:hover {
  color: #c21dbc; /* Instagram brand color */
  transition: color 0.3s ease;
}


/* Responsive tweak */
@media (max-width: 768px) {
  .header1 {
    height: 70px;
  }
  .menu-btn {
    font-size: 22px;
  }
  .instagram-icon {
    font-size: 22px;
    width: 35px;
    height: 35px;
  }
}


.logo-link {
  display: inline-flex;        /* was block */
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 0;   /* eliminates extra inline spacing */
}

/* Keep aspect ratio; fill header vertically */

.logo-img{
  width: auto;
  height: 100%;
  display: block;   /* avoid inline-img baseline gap */
}

form {
  position: relative;
  width: 90%;
  max-width: 700px;
  margin: 0 auto;
}

.search-field {
  width: 100%;
  padding: 10px 50px 10px 20px; /* right padding for button space */
  font-size: 20px;
  border-radius: 100px;
  border: 2px solid #000;
  outline: none;
  box-sizing: border-box;
}

.search-button {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.search-button img {
  width: 24px;
  height: 24px;
}

.search-button img:hover {
 box-shadow: 5px 5px 5px grey;
 border-radius: 10px;
 border: grey;
}



.counter{
  margin-right: 20px;
}

.indexpage{
  background-color: #8fa6ad;
}

.mainEverest, .mainindex, .maink2, .mainRainier, .mainKili, .mainAma, .mainAlpa{
  height: 100%;
  width: 100%;
  min-height: 100vh;
  background-size: cover;
  align-content: center;
  background-attachment: fixed;
  z-index: -1111;

}

.mainRainier{
  background-image: url(rainier.jpg);
}

.maink2{
  background-image: url(K2.jpg);
}

.mainKili{
  background-image: url(Kilimanjaro.jpg);
}

.mainAlpa{
  background-image: url(ama_dablam.jpg);
}

.mainAma{
  background-image: url(ama_dablam.jpg);
}

.mainindex{
  transition: background-image 1s ease-in-out;
  background-image: url(Denali.jpg);
  display: flex;
  align-items: center;
  justify-content: center;
}



.indexcontent{
  background: rgba(0,0,120,0.55);
  border:5px solid white;border-radius: 20px; border-width: thin;
  color: white; width: 60%; padding:10px 5px 10px 5px;
  margin-top: 5px;
}

.fixed-container-index, .contact-box{
  background-color: #ADD8E6;
  position:fixed;
  z-index: 1000;
  width: 70vw;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  justify-content: center; 
  box-shadow: 10px 0px 5px rgb(154, 191, 201),
                -10px 0px 5px rgb(154, 191, 201);
}

.fixed-container-index{
  display:flex;
}

.contact-box{
  display: inline-block;
}



.fixed-container{
  position:fixed;
  top: 205px;
  z-index: 1000;
  height: calc(100vh - 225px);
  width: 70vw;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center; 
  box-shadow: 10px 0px 5px rgb(154, 191, 201),
                -10px 0px 5px rgb(154, 191, 201);
}

.scrollable, .scrollable-index{
  height: 100%;
  overflow-y: auto; 
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Edge */
  background-color: rgba(219, 211, 197, 0.93); 
  width: 99%;
  border-left: 5px solid rgb(251, 246, 246);
  border-right: 5px solid rgb(251, 246, 246);
}

.scrollable{
  display: flex;
  flex-direction: column;  /* horizontal */
  align-items: center; 
}

.scrollable::-webkit-scrollbar {
  display: none;        /* Chrome, Safari */
}



.scrollable-index::-webkit-scrollbar {
  display: none;        /* Chrome, Safari */
}

.desktop-only-section {
  display: none; /* hidden by default */
  width: 90%;
  margin: 10px auto;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  text-align: center;
  color:rgb(0, 0, 125);
  box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
}


.more-pages, .blogs{
  display: grid;
  width:90%;
  height: 50px;
  border: 2px solid yellow;
  flex: 0 0 auto;
  margin-top: 10px;
}

h1{
 
  font-size: 25px;
  
}

.text{
  vertical-align: center;
  text-align: center;
  font-size: 15px;
  font-weight: normal;
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  color: white;
  margin-left: auto;
  margin-right: auto;
  border-style: solid;
  border-width: thin;
  padding: 10px 20px 10px 20px;
  border-color: white;
  border-radius: 15px;
  width: 90%;
  background: rgba(0,0,120,0.8);
}

footer{
  bottom: 0;
  color: white;
  width:100%;
  background-color: rgba(0,0,0,0.5);
  position:fixed;
}

a {color: inherit;}

td {
  color:white;
  width: auto;
}

th{
  border: none;
}

.table{
  margin-left: auto;
  margin-right: auto;
  font-size: 18px;
  width:97%;
}


.translucent{
  background: rgba(0,0,120,0.7);
}

.hyperlink{
  background: rgba(0,0,120,0.8);
  color: white;
  border-width: thin;
  font-size: 18px;
  width: 100px;
}
.hyperlink a{
  text-decoration: none;
}
.hyperlink a:hover{
  text-decoration: underline;
}
.hyperlink:hover {
  background: rgba(11,156,49,0.8);
  color: white;
}


.filterable{margin-top:15px}
.filterable .panel-heading .pull-right{margin-top:-20px}
.filterable .filters input[disabled]{
  background-color:transparent;
  border:none;
  cursor:auto;
  box-shadow:none;
  padding:0;
  height:auto;
  }
  .filterable .filters input[disabled]::-webkit-input-placeholder{color:#333}
  .filterable .filters input[disabled]::-moz-placeholder{color:#333}
  .filterable .filters input[disabled]:-ms-input-placeholder{color:#333}



/* Navigation side bar */
.side-bar{
  background:rgba(0, 0, 100, 1);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  width: 260px;
  height: 100vh;
  position: fixed;
  top: 0;
  left: -100%;
  overflow-y: auto;
  transition: 0.9s ease;
  transition-property: left;
  z-index: 1111111;
}

.side-bar.active{
  left: 0;
  z-index: 1111111;
}

.side-bar .menu{
  width: 100%;
  margin-top: 138px;
}

.side-bar .menu .item{
  position: relative;
  cursor: pointer;
}

.side-bar .menu .item a{
  color: #fff;
  background:rgba(8,14,44, 0.5);
  font-size: 14px;
  text-decoration: none;
  display: block;
  padding: 5px 30px;
  line-height: 40px;
}

.side-bar .menu .item .sub-item a{
  color: #fff;
  background:rgba(55, 67, 129, 0.8);
  font-size: 13px;
  text-decoration: none;
  display: block;
  padding: 5px 40px;
  line-height: 40px;
}

.side-bar .menu .item .sub-item .sub-sub-item a{
  color: #fff;
  background:rgba(55, 67, 129, 1);
  font-size: 11px;
  text-decoration: none;
  display: block;
  padding: 5px 40px;
  line-height: 40px;
}

.side-bar .menu .item a:hover{
  background: #ADD8E6;
  transition: 0.5s ease;
}

.side-bar .menu .item i{
  margin-right: 10px;
}

.side-bar .menu .item a .dropdown{
  position: absolute;
  right: 0;
  margin: 20px;
  transition: 0.1s ease;
}

.side-bar .menu .item .sub-menu{
  background:rgba(50, 50, 120, 1);
  display: none;
}

.side-bar .menu .item .sub-menu a:hover{
  background: #ADD8E6;
  transition: 0.5s ease;
}

.side-bar .menu .item .sub-menu a{
  padding-left: 40px;
  background:rgba(55, 67, 129, 1);
}

.side-bar .menu .item .sub-menu .sub-sub-menu a{
  padding-left: 40px;
  background:rgba(55, 67, 129, 1);
}

.side-bar .menu .item .sub-menu .sub-sub-menu a:hover{
  background: #ADD8E6;
  transition: 0.5s ease;
}

.rotate{
  transform: rotate(90deg);
}

.close-btn{
  position: absolute;
  color: #fff;
  font-size: 20px;
  right: 0;
  margin: 25px;
  cursor: pointer;
  border-color: white;
}

.close-btn:hover{
  color: black;
}

.menu-btn{
  position: absolute;          /* was fixed */
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;             /* keeps it tappable */
  width: 44px;                 /* bigger touch target */
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;               /* above the logo link */
  cursor: pointer;
}

/* end of navigation side-bar ---------------------------------------------------*/

/* Tiles -------------------------------------------------------*/




.result-tile{
  border: 2px solid rgba(184, 191, 184, 0.459);
  border-radius: 10px;
  background-color: rgb(250, 253, 253);
  box-shadow: 2px 2px 5px rgb(237, 235, 235),
              -2px -2px 5px rgb(237, 235, 235);
  margin-bottom: 10px;
  padding: 5px;
  min-height: 200px;
  height: auto;
  width: 98%;  
  display: grid;
  
  grid-template-columns: 7fr 9fr;
}

.result-tile {
  position: relative;   /* <-- new */
  overflow: visible;    /* ensure the badge can hang over the edge if desired */
}

.leader-home-tile {
  position: relative;   /* <-- new */
  overflow: visible;    /* ensure the badge can hang over the edge if desired */
}

/* badge styling/placement */
.leader-badge {
  position: absolute;
  top: 2px;   
  left: 2px;
  background: gold;
  color: black;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  z-index: 2;    /* sits above the image/title */
}

.result-tile:hover{
  cursor: pointer;
  box-shadow: 2px 2px 5px rgb(101, 101, 101),
              -2px -2px 5px rgb(101, 101, 101);
}

.result-tile.leader-tile {
  border: 2px solid #d4af37; /* gold tone */
  background: linear-gradient(
      135deg,
      #fff8dc 0%,
      #f9e076 25%,
      #d4af37 50%,
      #f9e076 75%,
      #fff8dc 100%
  );
  background-size: 200% 200%;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
  color: #000033;
  transition: all 0.3s ease-in-out;
}

/* Optional hover boost */
.result-tile.leader-tile:hover {
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.8);
  transform: scale(1.002);
}

.result-tile.leader-tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  animation: shine 3s infinite;
}

.leader-home-tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  animation: shine 4s infinite;
  pointer-events: none;
}

.leader-home-tile:hover {
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.8);
  transform: scale(1.002);
}

@keyframes shine {
  0% { left: -75%; }
  50% { left: 125%; }
  
}

.result-link{
  text-decoration: none;
  width:100%;
}

.result-link *{
  text-decoration: none;
}

.height, .location, .continent, .time, .cost, .seven_summit{
  border-radius: 10px;
  margin:3px;
  color: rgb(0,0,120);
  
}

.pic, .pic-provider{
  grid-area: pic;
  border-radius: 5px;
  margin:5px;
  max-height: 200px;
  border-radius: 5px;
}

.pic-provider{
  padding: 20px;
  grid-area: pic;
  background-color: rgba(0, 144, 184, 0.685);
  border: 3px solid rgba(0, 0, 125);
  max-height: 150px;

}

.fill-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius:5px;
}

.fill-img-provider {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.mountain_name, .leader_name{
  grid-area: name;
  display: flex;               /* Enables flexbox layout */
  align-items: center;         /* Vertical centering */
  justify-content: center;     /* horizontal center */   
  text-align: center;
  font-weight: bolder;
  font-size: 20px;
  border-radius: 5px;
  color: rgb(0,0,120);
}

.mountain_name{
  border-bottom: 6px solid rgb(0,0,120);
}

.leader_name{
  text-decoration: underline;
  text-decoration-thickness: 5px;
  text-decoration-skip-ink: none;
  margin-top: 15px;
}

.responsive-break{
  display: inline;
}

.height{
  grid-area: height;
  text-align: center;
}

.location{
  grid-area: location;
  text-align: center;
}

.time{
  grid-area: time;
  text-align: center;
}

.cost{
  grid-area: cost;
  text-align: center;
}

.country{
  grid-area: country;
  text-align: center;
}

.continent{
  grid-area: continent;
  text-align: center;
}

.bio, .bio2, .featured{
  
  border-radius: 10px;
  padding:5px;
  font-size: 15px;
  color:rgb(0,0,120);
  text-align: center;
  margin-top:3px;
  margin-right:5px;
}

.bio, .bio2{
  width: 95%;
}

.bio{
  border: 4px solid rgb(0,0,120);
  grid-area: bio;
}

.bio2{
  grid-area: bio2;
}

.featured{
  grid-area: featured;
  width:97%;
  display:grid;
  gap: 5px;
}


/* Hide on small screens */
.desktop-only {
  display: none;
}

.link-button {
  margin: auto 15px;
  padding: 5px 10px;
  font-size: 16px;
  max-height: 50px;
  background-color: #003366;
  
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s;
  grid-area: button;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.link-button:hover {
  background-color: #0055aa;
  
}


.mtn1, .mtn2, .mtn3, .mtn4{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  

}

.mtn1{
  grid-area: mtn1;
  
}

.mtn2{
  grid-area: mtn2;
}

.mtn3{
  grid-area: mtn3;
}

.mtn4{
  grid-area: mtn4;
}

/* End of tiles ---------------------------------------------- */

input[type=text] {
  float: center;
  padding: 6px;
  border: 3px solid black;
  margin-top: 8px;
  margin-right: 16px;
  font-size: 25px;
}

input[type=text1] {
  float: center;
  padding: 6px;
  border-color: black;
  margin-top: 8px;
  margin-right: 16px;
  font-size: 17px;
  width:19vh;
}


.container {
  width: 100%;
  /*height: 70px; */
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 1500;
  background: rgb(96, 199, 195);
  height: 50px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-shadow: 0px 2px 5px grey;
}



.ui-autocomplete {
    /* this sets the height */
    max-height:200px;
    /*  make it scroll for anything outside */
    overflow-y:scroll;
    border-radius: 5px;
    background-color: rgb(0, 149, 255) !important;
    z-index:10000 !important;
    border-radius: 10px !important;
    color: white !important;
    font-weight: bold !important;
    position:absolute;
    width:200px;
}

input::-webkit-calendar-picker-indicator {
  display: none !important;
}

body, html {
  height: auto;
  width: auto;
  margin: 0;
}

.map-wrapper {
  width: 60vw; height: 45vh;
  position: relative;
  margin: auto; z-index: 0;
  border-color: black;
  border-style: solid;
  border-width: thick;
}

.filter_button{
  background-color: rgba(0,0, 125);
  color: white;
  font-size: 17px;
  border-radius: 5px;
  padding: 5px 10px;
  border: 1px solid white;
  box-shadow: 2px 2px 10px grey;;
}
/* Filter Modal Styling */
.filter-modal {
  display: none;
  background: rgba(0,0,120,0.95);
  color: white;
  border: 1px solid white;
  border-radius: 10px;
  padding: 20px;
  width: 90%;
  max-width: 370px;
  margin: auto;
  z-index: 9999;
  position: fixed;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow-y: auto;
  max-height: 80vh;
  padding:20px;
  
}

.filter-modal-button{
  font-size: 15px;
  margin:0 10px;
}

.filter-modal-button:hover{
  cursor:pointer;
}
/* Sort Modal Styling */
.sort-modal {
  display: none;
  background: rgba(0,0,120,0.95);
  color: white;
  border: 1px solid white;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  padding: 20px;
  width: 90%;
  max-width: 600px;
  margin: auto;
  z-index: 9999;
  position: fixed;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  overflow-y: auto;
  max-height: 80vh;
  transition: top 0.5s ease;
  text-align: left;
}

.sort-modal.active {
  top: 100px;
}

.sort-header{
  top: 80px;
  left: 15px;
}

.sort_item{
  margin:10px;
  font-size: 20px;
}

/* Filter loading overlay */
#filter-loading {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  background: rgba(0, 0, 0, 0.35);
  display: none;              /* hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 2000000;           /* above sidebar, modals, etc. */
}

#filter-loading.active {
  display: flex;
}

.filter-loading-box {
  background: rgba(0, 0, 120, 0.95);
  color: white;
  padding: 18px 24px;
  border-radius: 10px;
  border: 2px solid white;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  animation: spin 0.8s linear infinite;
}

.loading-text {
  font-size: 15px;
  font-weight: 600;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


.close-filterbox {
  position: absolute;
  top: 30px;
  right: 15px;
  font-size: 30px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  z-index: 10000;
}

.close-filterbox:hover {
  color: red;
}


.close-sortbox {
  position: absolute;
  top: 40px;
  right: 15px;
  font-size: 30px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  z-index: 10000;
  
}

.close-sortbox:hover {
  color: red;
}



.filter-placeholder {
  display: block;
}



/* Custom jQuery UI slider styles */
.slider-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 25px;
  width: 90%;
  border: 1px solid white;
  border-radius: 10px;
  padding: 10px;
}

.slider-wrapper label {
  text-align: center;
  color: white;
  margin-bottom: 5px;
  font-size: 15px;
  
  
}

#price-slider,
#time-slider,
#height-slider {
  width: 80%;
  margin: 5px auto;
  display: block;
}

#price-value-display,
#time-value-display,
#height-value-display {
  font-weight: bold;
  color: white;
  text-align: center;
  margin-bottom: 5px;
  display: block;
}

#price-slider .ui-slider-handle, #time-slider .ui-slider-handle, #height-slider .ui-slider-handle {
  background-color: #000080 !important; /* dark blue */
  border: 2px solid white;
  width: 1.2em;
  height: 1.2em;
  top: -0.4em;
  border-radius: 50%;
}

#price-slider .ui-slider-range, #time-slider .ui-slider-range, #height-slider .ui-slider-range {
  background-color: rgb(131, 223, 240) !important;
}

#price-slider.ui-slider-horizontal, #time-slider.ui-slider-horizontal, #height-slider.ui-slider-horizontal {
  height: 0.5em;
  background-color: #ccc;
  border-radius: 5px;
}

.filter-panel{
  border:1px solid red;
  background-color: rgba(0,0,125);
  color:white;
  height: 97%;
  padding: 10px;
  overflow-y: auto;
  display: block;
}

/* Sort dropdown container for large screens */
.clear-filters-desktop {
  display: none; /* hidden by default */
  margin: 0 auto 15px auto;  /* centers horizontally */
  background-color: rgba(0, 0, 125, 0.85); /* matches theme */
  color: white;
  border: 2px solid white;
  padding: 6px 12px;
  border-radius: 5px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  position: sticky;
  top: 5px;
  box-shadow: 2px 2px 10px grey;
}
.clear-filters-desktop:hover {
  background-color: rgb(88, 115, 196);
  box-shadow: 1px 1px 5px rgb(26, 26, 24);
}

.desktop-sort-dropdown {
  display: none; /* default hidden */
  margin: 20px 0;
}

.sort-dropdown {
  width: 100%;
  padding: 8px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid white;
  background-color: white;
  color: #000080;
}

/* CONTACT FORM----------------------------------------------- */
.contact-form {
    max-width: 600px;
    margin: auto;
    padding: 20px;
}

.contact-form label {
    display: block;
    margin-top: 15px;
    font-weight: bold;
}

.contact-form input[type="text"],
.contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1em;
}

.contact-form .button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
}

.leader-home-tile, .about-tile {
  display: grid;
  
  box-sizing: border-box;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;

  text-decoration: none;       /* Remove underline just in case */
  color: inherit;              /* Inherit text color */
  cursor: default; 
  margin: 5px auto 16px;
  padding: 16px;
  width: 97%;
}

.about-tile{
  grid-template-areas: 
    "name name name"
    "bio2 bio2 bio2"
    "bio2 bio2 bio2";
    border: 2px solid rgba(184, 191, 184, 0.459);
    border-radius: 10px;
    background-color: rgb(250, 253, 253);
    box-shadow: 2px 2px 5px rgb(237, 235, 235),
              -2px -2px 5px rgb(237, 235, 235);
}

.leader-home-tile{
  grid-template-areas: 
    "pic bio bio"
    "pic bio bio"
    "pic bio bio"
    "featured featured featured";
  background: linear-gradient(
      135deg,
      #fff8dc 0%,
      #f9e076 10%,
      #d4af37 30%,
      #f9e076 50%,
      #f7c709 70%
  );
  color: #fff;
  border: 4px solid rgb(249, 249, 248);
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}

.leader-home-logo {
  width:100%;
  box-sizing: border-box;
  border-radius: 10px;
  border: 3px solid white;
  padding: 8px;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.15);
  grid-area: pic; 

}

.leader-home-logo img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;       /* often enough by itself */
  height: auto;      /* keeps the aspect ratio */
  display: block;
}

/* SMALL SCREEN ----------------------------------------------- */
@media (max-width: 768px){
  .header1{
    height: 70px;
  }

  .logo-img {
    height: 120%;
  }

  .menu-btn{
    left: 12px;
    
    transform: translateY(-50%);
    font-size: 24px;
    width: 40px;
    height: 40px;
  
  }

  .container{
    height: 50px;
    padding-top:0;
    padding-bottom:0;
    top:70px;
  }

  .search-field{
    font-size: 15px;
  }

  .search-field {
    font-size: 16px;
    padding-right: 45px;
  }

  .search-button img {
    width: 20px;
    height: 20px;
  }

  .indexcontent{
    width: 90%;
  }
  
  .text{
    font-size: 13px;
    width: 85%;
  }
  .content{
    margin-top: 60px;
  }

  .fixed-container, .fixed-container-index, .contact-box{
    width: 99vw;
    top: 120px;
    height: calc(100vh - 140px);
  }

  .contact-box{
    width: 90vw;
  }

  .desktop-only-section {
  display:none;
}

.desktop-only {
  display: none;
}

  .scrollable{
    border:none;
  }

  .hyperlink{
    font-size: 10px;
    width: auto;
  }

  h1{
    font-size: 16px;
    width: 85%;
  }

  .featured{
    grid-template-areas:
    "mtn1 mtn2"
    "mtn3 mtn4";
    grid-template-columns: 1fr 1fr;
  }

.result-tile{
  width: 95%;  
  min-height: 200px;
  height: auto;
  grid-template-areas: 
    "pic name"
    "pic height"
    "pic location"
    "pic time"
    "pic cost"
    "bio bio";
}

.pic-provider{
  max-height: 60px;
}
.bio{
  font-size: 15px;
  height: auto;
}

.height, .location, .continent, .time{
  border-bottom: 1px solid rgb(94, 148, 248);
  border-radius: 0px;
  padding-bottom: 3px;
}

.mountain_name{
  padding: 5px 5px;
}

.filter-modal {
    width: 87%;
    display: none;
    height: 65vh;
  }

.filter-panel{
  display: none;
}

.filter_button_panel{
  display: flex;
  margin: 5px auto;
  gap:20px;

  position: sticky;
  top:0px;
  z-index: 1600; /* Should be above content but below autocomplete (z-index: 9999) */
  background-color: #add8e6e5; /* Optional: match surrounding background */
  padding: 5px 10px;
  box-shadow: 2px 2px 10px grey;
  border-radius: 10px;
  }

  .contact-form input[type="text"],
.contact-form textarea {
  width: 90%;
  }

  .contact-form textarea {
  height: 20px;
  }

  .leader-home-tile{
    width:97.5%;
    grid-template-areas:
    "pic pic pic pic"
    "bio bio bio bio"
    "featured featured featured featured"
    "featured featured featured featured" ;
    grid-template-columns: repeat(auto-fit, max(1fr));
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  

  .leader-badge {
  font-size: 12px;
}

.bio{
  font-size: 12px;
}
}

/* LARGE SCREEN ----------------------------------------------- */
@media (min-width: 768px) {
  .header1{
    height: 90px;
  } 
  
  .logo-img {
    height: 120%;
  }

  .menu-btn{
  top: 50%;
  font-size: 25px;
  margin-left: 25px;
  }

  .container{
    top: 85px;
  }

  .fixed-container, .fixed-container-index, .contact-box{
    height: calc(100vh - 178px);
    top: 158px;
    background-color: #add8e6da;
  }

  .fixed-container-index{
    display: grid;
    grid-template-areas: 
    "filter scrollable";
    grid-template-columns: 3fr 7fr;
  }

  .scrollable{
    background-color: rgba(219, 211, 197, 0.75);
  }

  

  .desktop-only-section {
    display: block; /* visible only on large screens */
  }

  .leader-home-logo{
  display: flex;
  justify-content: center;  /* horizontal */
  align-items: center; 
  background-color:#f7c709 ;
  border-color: #ffffff;
  }  

  .featured{
    grid-template-areas:
    "mtn1 mtn2 mtn3 mtn4";
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .result-tile{
  grid-template-areas: 
    "pic pic pic pic pic pic pic name name name name name name name name name"
    "pic pic pic pic pic pic pic height height height height height height height height height"
    "pic pic pic pic pic pic pic location location location location location location location location location"
    "pic pic pic pic pic pic pic time time time time time time time time time"
    "pic pic pic pic pic pic pic cost cost cost cost cost cost cost cost cost"
    "bio bio bio bio bio bio bio bio bio bio bio bio button button button button";
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

  pointer-events: none;        /* Prevent click */
  text-decoration: none;       /* Remove underline just in case */
  color: inherit;              /* Inherit text color */
  cursor: default; 
  background-color: rgba(250, 253, 253, 0.5);
  }

  
  .result-link .result-tile {
    pointer-events: auto;        /* Re-enable interactions inside the tile */
  }
  
  .responsive-break {
    display: none;
  }

   .label::after {
    content: ":";
    margin-right: 2px;
  }

  .height, .location, .continent, .time, .cost, .seven_summit{
    display: flex;
    align-items: center;
    justify-content: center;
  }

 .desktop-only {
    display: inline-block;
  }

  .filter_button_panel{
  display:none;
}

 .close-filterbox {
    display: none !important;

}

.filter-panel{
  border: none;
  background-color: rgba(0, 0, 125, 0.65);
}

 .clear-filters-desktop {
    display: block;
  }

.desktop-sort-dropdown {
    display: block;
}

.filter-panel .filter-modal-button:last-of-type {
    display: none !important;
  }

.filter-panel .filter-modal-button {
    display: block;
    margin: 0 auto 15px auto; /* center horizontally */
    background-color: rgba(0, 0, 125, 0.85);
    color: white;
    border: 2px solid white;
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    box-shadow: 2px 2px 10px grey;
}

  .filter-panel .filter-modal-button:hover {
    background-color: rgb(88, 115, 196);
    box-shadow: 1px 1px 5px rgb(26, 26, 24);
}

}