/* Reset defaults */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
font-family: "Forum", serif;
  background-color: white;
      font-family: "Forum", serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
text-wrap: balance;
}



.forum-regular {
  font-family: "Forum", serif;
  font-weight: 400;
  font-style: normal;
    text-wrap: balance;
}


/* header section */
.header {
    position: sticky;
  top: 0;
  z-index: 1000;
 
 
}




/* Top blue stripe */
.top-bar1 {
  background-color: #446281;
 height: 1vh;

}


.top-bar {
  background-color: #446281;
  color: white;
  padding-top: .5vh;
  padding-bottom: .5vh;
  display: flex; 
     justify-content: center;
  align-items: center;
  border-top: 1px solid #beccd3;
  border-bottom: 1px solid #beccd3;
}

.top-bar2 {
  background-color: #446281;
   height: 1vh;

}


.top-bar t1 {
        font-size: clamp(12px, 2vw, 20px); 
  color: ;


}


    .spacer {
        margin-left: clamp(1px, 22vw, 22vw); 
    }





/* Logo section */
.logo-section {
    background-color: white;
  align-items: center;
     text-align: center;
}


.logo {
    margin-top: .5vh;
    height: clamp(100px, 10vw, 180px); 
    margin-bottom: .5vh;
}


.navbar {
  background-color: #f9f9f9;
  top: 0;
  z-index: 1000;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
       margin-bottom: .3vh;
}

.navbar_bg {
  background-color: white;
 height: clamp(30px, 4.5vh, 5vh);
        margin-bottom: .3vh;
}

.navbar ul {

  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: .2vh;

}

.navbar li {
  margin: 0 .6vw;
    padding-top: .3vh;

    padding-right: .6vw;
}

.navbar a {
        
  text-decoration: none;
        font-size: clamp(12px, 1.8vw, 24px); 
  color: #7692af;
  font-weight: normal;
  transition: color 0.4s;

; /* Sets a 2px solid blue border */
  padding: 2px; /* Adds space between the text and the border */
  display: inline-block; /* Allows the border to wrap tightly around the text */
}

.navbar a:hover {

   
  color: #fca179;
  font-weight: bold;
}


/* Book Nav */



.book a {
        
  text-decoration: none;
        font-size: clamp(24px, 3vw, 28px); 
  color: #396ca0;
    background-color: #cbdae2;
  font-weight: strong;
  transition: color 0.2s;
        border-radius: 5px;
; /* Sets a 2px solid blue border */
    
              outline: 1px solid white;
  outline-offset: -.4vw;
   
  padding: .4vw; /* Adds space between the text and the border */
    margin-bottom: 1vh;
         padding-left: .6vw; /* Adds space between the text and the border */
     padding-right: .6vw; /* Adds space between the text and the border */
  display: inline-block; /* Allows the border to wrap tightly around the text */
}


.book a:hover {

    background-color: #7dacc4;
  color: white;
             outline: 1px solid white;
  outline-offset: -.4vw;
  font-weight: bold;
}




/* Hero image */
.hero img {
  width: clamp(200px, 60vw, 60vw); 
  height: auto;
  display: block;
  margin-top: 2vh;
  margin-left: auto;
  margin-right: auto;
  outline: 1px solid white;
  outline-offset: -.8vw;
}



/* Hero image */
.hero2 img {
  width: clamp(200px, 40vw, 40vw); 
  height: auto;
  display: block;
  margin-top: vh;
  margin-left: auto;
  margin-right: auto;
  outline: 1px solid white;
  outline-offset: -.2vw;
}


/* Hero image */
.hero2 img {
  width: clamp(200px, 40vw, 40vw); 
  height: auto;
  display: block;
  margin-top: vh;
  margin-left: auto;
  margin-right: auto;

}


/* Intro text */
.intro-text {
  text-align: center;
  padding: 1vh;
}

.intro-text h1 {
  font-size: clamp(30px, 3.5vw, 45px);
  font-weight: bold;
  color:  #446281;
  margin-bottom: .5vh;
}

.intro-text h2 {
  font-size: clamp(20px, 3vw, 36px);
  font-weight: bold;
  color:  #6287ad;
  margin-bottom: .1vh;
}

.intro-text h3 {
  font-size: clamp(16px, 2vw, 28px);
  font-weight: bold;
  color:  #6287ad;
  margin-bottom: 1px;
}


.intro-text h4 {
  font-size: clamp(12px, 1.5vw, 18px);
  color:  #6287ad;
  margin-bottom: 1px;
}


/* availability_button */
.button {
  text-align: center;
  padding: 2vh;
    
}

.button a  {
  
 background-color: #cbdae2;
  font-size: clamp(2vw, 3.5vw, 36px);
  font-weight: bold;
           color: #396ca0;

  margin-bottom: .5vh;
  padding: 1vw;
  text-decoration: none;
  font-weight: bold;
  border-radius: 8px;
          outline: 1px solid white;
  outline-offset: -.5vw;
  transition: background-color 0.3s;
      
}



.availability_button:hover {
         background-color: #7dacc4;
  color: white;

  
}





.bottom-bar t1 {
        font-size: clamp(1.2vw, 1.5vw, 1.7vw);
  color: white;
  margin-bottom: 1rem 2rem;
}







/* Grid section (always 2x2, matches hero width, fixed gap, scrollable on mobile) */
.grid-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, auto);
  column-gap: 3vw;
  width: 60%;              /* Matches hero width */
  margin: 0 auto;          /* Centers the grid */
  text-align: center;
  justify-items: center;
  align-items: start;
  overflow-x: auto;        /* Enables horizontal scroll if screen is too narrow */
  scroll-snap-type: x mandatory; /* Smooth scroll snapping on mobile */
  padding: 1px;
}




.grid-section h1 {
  font-size: clamp(14px, 2vw, 24px);
  font-weight: bold;
 text-decoration: underline solid #446281 1px  ;
    text-underline-offset: 3px;
  color: #002d6b;
  margin-top: 6px;
  margin-bottom: 6px;
}

.grid-section h2 {
  font-size: clamp(12px, 1.8vw, 22px);
  font-weight: normal;
  color: #002d6b;
    text-wrap: balance;

}


.grid-section a {
      font-weight: normal;
  color: #69a2ef;
    }

.grid-section a:hover {
      font-weight: normal;
  color: #3f71b5;

}

.grid-item {
    
     width: clamp(200px, 60vw, 60vw); 
  height: auto;
  display: block;
  margin-top: 2vh;
  margin-left: auto;
  margin-right: auto;
    
    
    
  width: 100%;
  max-width: 500px;
  scroll-snap-align: start;
  flex-shrink: 0;
}

.grid-item img {
  width: 100%;
  height: auto;
  border-radius: 6px;
      outline: 1px solid white;
  outline-offset: -.5vw;
}

.grid-item  {
  margin-top: 1.5vh;
  font-weight: bold;
  color: #002d6b;
}

/* Optional — Hide scrollbars for a cleaner look */
.grid-section::-webkit-scrollbar {
  display: none;
}
.grid-section {
  -ms-overflow-style: none;
  scrollbar-width: none;
}






/* slideshow */


img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
    

    
    margin-top: 50px;
  max-width: 1000px;
  position: relative;
  margin: auto;
}





.ta img {
  width: clamp(150px, 12vw, 12vw); 
  height: auto;
    margin-top: 2vh;
    margin-bottom: 2vh;
  display: block;
  margin-left: auto;
  margin-right: auto;
    
}
/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 4s;
}

@keyframes fade {
  from {opacity: .1} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}


/* Bottom blue stripe */
.bottom-bar {
  background-color: #446281;
  color: white;
  text-align: center;
  padding: 2rem 1rem;
  height: 6vh;
  display: flex;
  align-items: center;
  justify-content: center;
}



/* Responsive tweaks */
@media (max-width: 768px) {
  .intro-text h1 {
    font-size: 1.5rem;
  }
    

    



}

  .book-button {
    padding: 0.6rem 1.5rem;
  }
}