/* 

Sunflower Yellow: #FFD700
Ruby Red: #FF4500
Blush Pink: #FF69B4
Lavender Purple: #E6E6FA
Mint Green: #98FB98

*/





body {
  background-color: #fff;
  font-family: Georgia, serif, Arial;
  font-display: swap;
  font-size: 16px; /* restored base font size */
  color: black;
  padding: 0;
  margin: 0px;
  overflow-x: hidden;
}

.image-text-row {
  font-size: 1.125rem; /* ~18px relative to 16px base */
}
.image-text-row p {
  font-size: inherit; /* let paragraphs inherit the row size */
}

h1 {
  display: block;
  float: none;
  font-family: Georgia, serif;
}

h2, h3 {
  color: #2c5f2d;
  font-family: Georgia, serif;
}

#fullscreen-image {
  max-width: 100%;
  height: auto;
  object-fit: cover; /* Ensures the image fills the screen, cropping if necessary */
  display: block; /*removes default spacing from inline images */
}

.Hero.Image {
  /* For <div class="Hero Image"> */
  background-image: url("Images/Arch1.webp");
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 400px;
  display: block;
}

/* Dark overlay on the left side for text readability */
.Hero.Image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  pointer-events: none;
}

/* Text container that sits over the darkened area */
.hero-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 3rem;
  gap: 0.5rem;
  z-index: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  box-sizing: border-box;
}

.hero-text > * {
  max-width: 100%;
  word-wrap: break-word;
}

.hero-text h1 {
  margin: 0 0 0.5rem 0;
  font-size: clamp(1.75rem, 3vw + 0.5rem, 3rem);
  font-family: Georgia, serif;
  font-weight: normal;
}

.hero-text p {
  margin: 0;
  font-size: clamp(1rem, 1.2vw + 0.5rem, 1.25rem);
  line-height: 1.4;
  font-family: Georgia, serif;
}

/* Styled links for sidebar */
.hero-link {
  display: block;
  padding: 0.85rem 1.25rem;
  background: #f5f9f5;
  color: #2c5f2d !important;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.3s ease;
  font-weight: 500;
  text-align: left;
  border-left: 3px solid #97c99d;
  font-family: Georgia, serif;
}

.hero-link:link {
  color: #2c5f2d !important;
}

.hero-link:hover {
  background: #e8f5e9;
  color: #1a3d1b !important;
  border-left-color: #2c5f2d;
  padding-left: 1.5rem;
  box-shadow: 0 2px 8px rgba(44,95,45,0.15);
}

.hero-link:visited {
  color: #2c5f2d !important;
  background: #f5f9f5;
}

.hero-link:visited:hover {
  color: #1a3d1b !important;
  background: #e8f5e9;
}

.hero-link:visited:hover {
  color: #1a3d1b;
  background: #e8f5e9;
}

.responsive {
  width: 100%;
  max-width: 700px;
  height: auto;
  padding: 10px;
  align-items: center;
}

.responsive2 {
  width: 100%;
  max-width: 400px;
  height: auto;
  padding: 10px;
  align-items: center;
}

.responsive3 {
  width: 100%;
  max-width: 250px;
  height: auto;
  padding: 10px;
  align-items: center;
  
}

.responsive4 {
  width: 100%;
  max-width: 400px;
  height: auto;
  padding: 10px;
  align-items: center;
  float: none;
  
}

.responsive5 {
  width: 100%;
  max-width: 400px;
  height: auto;
  padding: 10px;
  align-items: center;
  
}

.responsive5:hover {
  transform: scale(1.5);
  transition: transform 0.3s ease;
}

.image-text-row {
  display: flex;
  align-items: flex-start;
  gap: 20px; /* space between image and text */
}



p {
  line-height: 1.3;
  padding: 10px;
}

/* Sidebar link styling */
.sidebar-links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0;
}

.sidebar-links .link {
  display: block;
  margin: 0;
}

.logo a {
  float: left;
  pointer-events: none;
  text-decoration: none;
 

}

.link {
  color: black;
  text-decoration: none;
  font-weight: bold;
  
}

.link:hover {
  border-bottom: 5px solid #98FB98;
  
}

.center {
  display: block;
  margin-left: 20%;
  margin-right: auto;
  width: 50%;
  max-width: 300px;
  height:300px; 
  bottom: 0px;
  position: absolute;
}
/* Grid layout styling for home page (page style 1) */

/* Padding Shorthand: top | right | bottom | left */

#ps1 {
    display: grid;
    width: 100%;
    height: auto;
    grid-template-areas:
      "head head head"
      "main  main main"
      "news  news side"
      "main2 main2 main2"
      "lside lside rside"
      "foot foot foot";
    grid-template-rows: 140px 100vh auto 100vh auto auto;
    grid-template-columns: 50% 25% 25% ;
  }
  

  
  #ps1 > header {
    grid-area: head;
    background-color: #FFD700;
    padding:0;
   
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    
    
  }
  
  #ps1 > article {
    grid-area: news;
    background-color: #fff;
    color: #333;
    padding: 3rem 2rem 3rem 5%;
    margin-left: 0;
  }
  
  #ps1 > #sidebar {
    grid-area: side;
    background-color: #fff;
    padding: 3rem 2rem 3rem 0;
    position: relative;
  }
  
  #ps1 > #sidebar h2 {
    margin: 4rem 0 1.5rem 0;
    font-size: 1.5rem;
    color: #2c5f2d;
    border-bottom: 2px solid #97c99d;
    padding-bottom: 0.5rem;
    font-family: Georgia, serif;
    font-weight: normal;
  }
  
  #ps1 > #sidebar .sidebar-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  #ps1 > #sidebar p {
    margin-top: 2rem;
    color: #888;
    font-style: italic;
    font-size: 0.95rem;
  }
  
  #ps1 > article h2 {
    color: #2c5f2d;
    font-size: 2rem;
    margin-bottom: 1rem;
    font-family: Georgia, serif;
    font-weight: 600;
  }
  
  #ps1 > article h3 {
    color: #2c5f2d;
    font-size: 1.4rem;
    font-weight: 600;
  }
  
  #ps1 > article > p {
    max-width: 1200px;
    margin: 0 auto 2rem;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #555;
  }
  
  /* Card-based layout for image-text rows */
  .card-item {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    padding: 2.5rem 0;
    margin: 1.5rem auto;
    max-width: 1200px;
    border-bottom: 1px solid #e8e8e8;
  }
  
  .card-item:last-of-type {
    border-bottom: none;
  }
  
  .card-item img {
    width: 40%;
    max-width: 450px;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .card-item img:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  }
  
  .card-text {
    flex: 1;
    padding: 0.5rem 1rem;
  }
  
  .card-text h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.5rem;
    color: #2c5f2d;
  }
  
  .card-text p {
    margin: 0;
    line-height: 1.7;
    font-size: 1rem;
    color: #666;
  }
  
  /* Reverse layout for alternating cards */
  .card-item.reverse {
    flex-direction: row-reverse;
  }
  
  #ps1 > main {
    grid-area: main;
    background-color: #fff;
    padding:0px 0px 0px 0px;
      position: relative;
    
   
   
    
  }
  
  #ps1 > #sidebar {
    grid-area: side;
    background-color: #fff;
    padding:0px 1px 0px 1px;
    position: relative;
    margin-right: 50px;
    
   
    
  }

  #ps1 > #main2 {
    grid-area: main2;
    background-image: url(Images/shasta.webp);
    background-attachment: fixed;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  #ps1 > #lside {
    grid-area: lside;
    background-color: #fff;
    padding:15px 15px 15px 15px;
    margin-left: 25%;
  }
  
  #ps1 > #lside h2 {
    color: #2c5f2d;
    font-family: Georgia, serif;
    font-weight: normal;
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }
  
  #ps1 > #lside h3 {
    color: #2c5f2d;
    font-size: 1.3rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
  }
  
  #ps1 > #lside p {
    color: #666;
    line-height: 1.7;
    font-size: 1rem;
  }

  #ps1 > #social-sidebar {
    grid-area: rside;
    background-color: #fff;
    padding:15px 75px 15px 75px;
    
    
  }
  
  #ps1 > footer {
    grid-area: foot;
    background-image: url("Images/prideofbarbados.webp");
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    min-height: 100vh;
    padding: 4rem 15px;
    text-align: center;
    color: white;
    list-style-position: inside;
    box-shadow: 0 -5px 5px -5px #333;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Full-screen dark overlay for footer */
  #ps1 > footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 0;
  }
  
  /* Ensure footer content sits above overlay */
  #ps1 > footer .footer-container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
  }
  
  /* Three column layout for footer */
  #ps1 > footer .footer-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin-bottom: 3rem;
    text-align: left;
  }
  
  #ps1 > footer .footer-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  #ps1 > footer .footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 2px solid rgba(255, 255, 255, 0.3);
  }
  
  #ps1 > footer .footer-copyright {
    font-size: 1rem;
    margin: 0;
  }
  
  #ps1 > footer h3 {
    color: white;
    font-size: 2rem;
    font-weight: 600;
    margin: 2rem 0 1rem 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    letter-spacing: 0.5px;
  }
  
  #ps1 > footer h3:first-child {
    margin-top: 0;
  }
  
  #ps1 > footer p {
    color: white;
    font-size: 1.25rem;
    margin: 1rem 0;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    line-height: 1.6;
  }
  
  #ps1 > footer ul {
    color: white;
    font-size: 1.2rem;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    list-style: none;
    padding: 0;
    margin: 1rem 0 2rem 0;
    line-height: 1.8;
  }
  
  #ps1 > footer ul li {
    margin: 0.5rem 0;
  }
  
  #ps1 > footer a {
    color: #FFD700;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    font-size: 1.25rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    margin: 0.5rem 0;
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid #FFD700;
    border-radius: 8px;
  }
  
  #ps1 > footer a:hover {
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border-color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
  }
  
  /* Social icons styling */
  #ps1 > footer .social-icons {
    margin: 2rem 0;
    display: flex;
    justify-content: center;
    gap: 2rem;
  }
  
  #ps1 > footer .social-icons a {
    font-size: 3rem;
    color: #FFD700;
    transition: all 0.3s ease;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
  }
  
  #ps1 > footer .social-icons a:hover {
    color: #fff;
    transform: scale(1.2);
    background: none;
    border: none;
    box-shadow: none;
  }
  
  /* Email signup form styling */
  #ps1 > footer form {
    margin: 2rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  #ps1 > footer form input[type="email"] {
    height: 48px !important;
    padding: 0 20px !important;
    font-size: 1.1rem !important;
    min-width: 280px;
  }
  
  #ps1 > footer form button {
    height: 50px !important;
    padding: 0 32px !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
  }
/* Grid layout styling for about and contact pages (page style 2) */
  #ps2 {
    display: grid;
    width: 100%;
    height: auto;
    grid-template-areas: 
       "head head"
       "main main"
       "foot foot";
      grid-template-rows: 140px auto auto;
      grid-template-columns: 50% 50%;
      row-gap: 3rem;
  }
  #ps2 > header {
    grid-area: head;
    background-color: #2c5f2d;
    padding:0;
    box-shadow:inset 0 2px 2px -2px rgba(0,0,0,.2);
  }
  #ps2 > main {
    grid-area: main;
    background-color:#fff;
    padding: 4rem 75px;
    position: relative;
    box-shadow:  rgba(0, 0, 0, 0.35) 0px 5px 15px;
    margin-top: 0;
  }
  
  #ps2 > main h1 {
    color: #2c5f2d;
    font-family: Georgia, serif;
    margin-top: 0;
    padding-top: 0;
  }
  
  #ps2 > main h2 {
    color: #2c5f2d;
    font-family: Georgia, serif;
    margin-top: 2rem;
  }
  
  #ps2 > main p {
    line-height: 1.8;
    margin-bottom: 1.5rem;
  }
 #ps2 > footer {
    grid-area: foot;
    background-image: url("Images/prideofbarbados.webp");
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    min-height: 100vh;
    padding: 4rem 15px;
    text-align: center;
    color: white;
    list-style-position: inside;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Full-screen dark overlay for footer */
  #ps2 > footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 0;
  }
  
  /* Ensure footer content sits above overlay */
  #ps2 > footer .footer-container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
  }
  
  /* Three column layout for footer */
  #ps2 > footer .footer-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin-bottom: 3rem;
    text-align: left;
  }
  
  #ps2 > footer .footer-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  #ps2 > footer .footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 2px solid rgba(255, 255, 255, 0.3);
  }
  
  #ps2 > footer .footer-copyright {
    font-size: 1rem;
    margin: 0;
  }
  
  #ps2 > footer h3 {
    color: white;
    font-size: 2rem;
    font-weight: 600;
    margin: 2rem 0 1rem 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    letter-spacing: 0.5px;
  }
  
  #ps2 > footer h3:first-child {
    margin-top: 0;
  }
  
  #ps2 > footer p {
    color: white;
    font-size: 1.25rem;
    margin: 1rem 0;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    line-height: 1.6;
  }
  
  #ps2 > footer ul {
    color: white;
    font-size: 1.2rem;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    list-style: none;
    padding: 0;
    margin: 1rem 0 2rem 0;
    line-height: 1.8;
  }
  
  #ps2 > footer ul li {
    margin: 0.5rem 0;
  }
  
  #ps2 > footer a {
    color: #FFD700;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    font-size: 1.25rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    margin: 0.5rem 0;
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid #FFD700;
    border-radius: 8px;
  }
  
  #ps2 > footer a:hover {
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border-color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
  }
  
  /* Social icons styling */
  #ps2 > footer .social-icons {
    margin: 2rem 0;
    display: flex;
    justify-content: center;
    gap: 2rem;
  }
  
  #ps2 > footer .social-icons a {
    font-size: 3rem;
    color: #FFD700;
    transition: all 0.3s ease;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
  }
  
  #ps2 > footer .social-icons a:hover {
    color: #fff;
    transform: scale(1.2);
    background: none;
    border: none;
    box-shadow: none;
  }
  
  /* Email signup form styling */
  #ps2 > footer form {
    margin: 2rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  #ps2 > footer form input[type="email"] {
    height: 48px !important;
    padding: 0 20px !important;
    font-size: 1.1rem !important;
    min-width: 280px;
  }
  
  #ps2 > footer form button {
    height: 50px !important;
    padding: 0 32px !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
  }

  /* Grid layout styling for learn page (page style 3) */

  #ps3 {
    display: grid;
    width: 100%;
    height: auto;
    grid-template-areas:
      "head head head head"
      "main  main main main"
      "card1 card1 card2 card2"
      "card3 card3 card4 card4"
      "card5 card5 card6 card6"
      "card7 card7 card8 card8"
      "card9 card9 card10 card10"
      "foot foot foot foot";
    grid-template-rows: 140px auto auto auto auto auto auto auto;
    grid-template-columns: 25% 25% 25% 25%;
    
  }

  #ps3 > header {
    grid-area: head;
    background-color: #FFD700;
    padding:0;
    border-bottom: 1px solid black;
    box-shadow:  rgba(0, 0, 0, 0.35) 0px 5px 15px;
  }
  #ps3 > main {
    grid-area: main;
    background-color: #fff;
    padding:0px 75px 0px 75px;
    position: relative;
    box-shadow:  rgba(0, 0, 0, 0.35) 0px 5px 15px;
  }

  #ps3 > card1 {
    grid-area: card1;
    background-color: #fff;
    padding-left: 25px;
    
  }

  #ps3 > card2 {
    grid-area: card2;
    background-color: #ffff;
    padding-right: 25px;
    
  }

  #ps3 > card3 {
    grid-area: card3;
    background-color: #fff;
    padding-left: 25px;
    
  }

  #ps3 > card4 {
    grid-area: card4;
    background-color: #fff;
    padding-right: 25px;
    
  }

  #ps3 > card5 {
    grid-area: card5;
    background-color: #fff;
    padding-left: 25px;
    
  }

  #ps3 > card6 {
    grid-area: card6;
    background-color: #fff;
    padding-right: 25px;
   
  }

  #ps3 > card7 {
    grid-area: card7;
    background-color: #fff;
    padding-left: 25px;
    
  }

  #ps3 > card8 {
    grid-area: card8;
    background-color: #fff;
    padding-right: 25px;
    
  }

  #ps3 > card9 {
    grid-area: card9;
    background-color: #fff;
    padding-left: 25px;
   
  }

  #ps3 > card10 {
    grid-area: card10;
    background-color: #fff;
    padding-right: 25px;
    
  }

  #ps3 > footer {
    grid-area: foot;
    background-color: #FFD700;
    padding:15px;
    text-align: center;
    list-style-position: inside;
    color: black;
    box-shadow:inset  rgba(0, 0, 0, 0.35) 0px 5px 15px;
  }

.ps3 a:link, a:visited {
  background-color: #fff;
  color: black;
  border: 2px solid #FF69B4;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.ps3 a:hover, a:active {
  background-color: #98FB98;
  color: #FF69B4;
}


  footer a:link {
    text-decoration: none;
    color: black;
    font-weight: bold;
    padding:5px;
  }

footer a:visited {
  text-decoration: none;
  color: black;
}

footer a:hover {
  border-bottom: 5px solid #98FB98;
}

  .footer-container {
    margin-left: 10%;
    margin-right: 10%;
  }

   /* NAVBAR STYLING STARTS */
   .navbar {
   
    font-family: helvetica neue,Arial,sans-serif;
    font-size: 25px;
    font-weight: 300;
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    background-color: #FFD700;
    color: rgb(50, 50, 50);
    box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
    
}

.brand-title {
    font-size: 2rem;
    margin: .5rem;
    font-family: brush script mt;
}

.brand-title img {
  max-width: 250px;
  padding: 2px;
}

.brand-title a{
    text-decoration: none;
    display: block;
    color: white;
}

.navbar-links {
    height: 100%;
    font-family: inherit;
}

.navbar-links ul {
    display: flex;
    margin: 0;
    padding: 0;
}

.navbar-links li {
    list-style: none;
}

.navbar-links li a {
    display: block;
    text-decoration: none;
    color: rgb(11, 10, 10);
    padding: 1rem;
}

.navbar-links li:hover {
    text-decoration: none;
    border-bottom: 5px solid #FF4500;
}

.toggle-button {
    position: absolute;
    top: 1.20rem;
    right: 1rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
}

.toggle-button .bar {
    height: 3px;
    width: 100%;
    background-color: rgb(11, 10, 10);
    border-radius: 10px;
}

/* Mobile: Single column layout (up to 768px) */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Now the hamburgur menu will be visible */
    .toggle-button {
        display: flex;
    }

    /* Now the links will disapper and */
    .navbar-links {
        display: none;
        width: 100%;
    }

    .navbar-links ul {
        width: 100%;
        flex-direction: column;
    }

    .navbar-links ul li {
        text-align: center;
    }

    .navbar-links ul li a {
        padding: .5rem 1rem;
    }

    .navbar-links.active {
        display: flex;
    }


    #ps1, #ps2 {
      display: grid;
      width: 100%;
      height: auto;
      grid-template-areas:
        "head"
        "main"
        "news"
        "side"
        "main2"
        "lside"
        "foot";
      grid-template-rows: auto;
      grid-template-columns: 1fr;
      padding: 0;
      row-gap: 1rem;
    }

    #ps1 > article {
        grid-area: news;
        padding: 2rem 1rem;
        margin: 0;
    }
    
    /* Mobile card styles */
    .card-item {
      flex-direction: column;
      padding: 1.5rem;
      gap: 1rem;
    }
    
    .card-item.reverse {
      flex-direction: column;
    }
    
    .card-item img {
      width: 100%;
      max-width: 100%;
    }
    
    .card-text {
      padding: 0;
    }
    
    #ps1 > main {
      grid-area: main;
      padding: 0;
      display: block;
      margin: 0;
      margin-top: -1rem;
    }
    
    /* Ensure hero image displays properly on mobile */
    .Hero.Image {
      background-attachment: scroll;
      min-height: 100vh;
      height: 100vh;
    }
    
    /* Full-width overlay on mobile */
    .Hero.Image::after {
      width: 100%;
    }
    
    .hero-text {
      width: 100%;
      padding: 1.5rem 1rem;
      justify-content: center;
      overflow: hidden;
    }
    
    .hero-text h1 {
      font-size: clamp(1.5rem, 5vw, 2rem);
      line-height: 1.2;
      margin-bottom: 0.5rem;
    }
    
    .hero-text p {
      font-size: clamp(0.9rem, 3.5vw, 1rem);
      line-height: 1.4;
    }
    
    #ps1 > #sidebar {
      grid-area: side;
      padding: 2rem 1rem;
      margin: 0;
    }
  
    #ps1 > #main2 {
      grid-area: main2;
      background-image: url(Images/shasta.webp);
      background-attachment: scroll;
    
      /* Center and scale the image nicely */
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
  
    #ps1 > #lside {
      grid-area: lside;
      padding: 15px;
      margin: 0;
    }
  
    #ps1 > #social-sidebar {
      display: none;
    }
    
    /* Mobile: stack footer columns */
    #ps1 > footer .footer-columns {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    #ps1 > footer {
      grid-area: foot;
      background-image: url("Images/prideofbarbados.webp");
      background-attachment: scroll;
      background-size: cover;
      background-position: center center;
      min-height: 100vh;
      padding: 3rem 10px;
      text-align: center;
      color: white;
      list-style-position: inside;
      box-shadow: 0 -5px 5px -5px #333;
    }
  /* Grid layout styling for about and contact pages (page style 2) */
   
 
    #ps2 > main {
      grid-area: main;
      padding: 2rem 1rem;
    }
    
    #ps2 > main h1 {
      font-size: 2rem;
    }
    
    #ps2 > main h2 {
      font-size: 1.5rem;
    }
    #ps2 > footer {
      grid-area: foot;
      background-image: url("Images/prideofbarbados.webp");
      background-attachment: scroll;
      background-size: cover;
      background-position: center center;
      min-height: 100vh;
      padding: 3rem 10px;
      text-align: center;
      color: white;
      list-style-position: inside;
      box-shadow: 0 -5px 5px -5px #333;
    }
    
    #ps2 > footer .footer-columns {
      grid-template-columns: 1fr;
      gap: 2rem;
      text-align: center;
    }
  

      
    

  #ps3 {
    display: grid;
    width: 100%;
    height: auto;
    grid-template-areas:
      "head head head head"
      "main  main main main"
      "card1 card1 card1 card1"
      "card2 card2 card2 card2"
      "card3 card3 card3 card3"
      "card4 card4 card4 card4"
      "card5 card5 card5 card5"
      "card6 card6 card6 card6"
      "card7 card7 card7 card7"
      "card8 card8 card8 card8"
      "card9 card9 card9 card9"
      "card10 card10 card10 card10"
      "foot foot foot foot";
    grid-template-rows: auto;
    grid-template-columns: auto;
    padding: 5px;
  
  }
  .footer-container {
    margin: 0;
  }

  #ps3 > main {
    grid-area: main;
    
    padding:10px;
    
  }
  #ps3 > card1 {
    grid-area: card1;
    background-color: #fff;
    padding:5px;
  }

  #ps3 > card2 {
    grid-area: card2;
    background-color: #fff;
    padding:5px;
  }

  #ps3 > card3 {
    grid-area: card3;
    background-color: #fff;
    padding:5px;
  }

  #ps3 > card4 {
    grid-area: card4;
    background-color: #fff;
    padding:5px;
  }

  #ps3 > card5 {
    grid-area: card5;
    background-color: #fff;
    padding:5px;
  }

  #ps3 > card6 {
    grid-area: card6;
    background-color: #fff;
    padding:5px;
  }

  #ps3 > card7 {
    grid-area: card7;
    background-color: #fff;
    padding:5px;
  }

  #ps3 > card8 {
    grid-area: card8;
    background-color: #fff;
    padding:5px;
  }

  #ps3 > card9 {
    grid-area: card9;
    background-color: #fff;
    padding:5px;
  }

  #ps3 > card10 {
    grid-area: card10;
    background-color: #fff;
    
  }
}

/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
/* Set the size of the div element that contains the map */
#map {
  height: 400px;
  /* The height is 400 pixels */
  width: 100%;
  /* The width is the width of the web page */
}


/* Small Screens */



/* Tablet Portrait: Single column layout (769px - 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  #ps1, #ps2 {
    grid-template-areas:
      "head"
      "main"
      "news"
      "side"
      "main2"
      "lside"
      "foot";
    grid-template-columns: 1fr;
    padding: 10px;
  }
  
  #ps1 > article {
    margin: 0;
    padding: 2rem;
  }
  
  #ps1 > #sidebar {
    margin: 0;
    padding: 2rem;
  }
  
  .card-item {
    flex-direction: column;
    padding: 1.5rem;
  }
  
  .card-item.reverse {
    flex-direction: column;
  }
  
  .card-item img {
    width: 100%;
    max-width: 100%;
  }
  
  #ps1 > #lside {
    margin: 0;
    padding: 20px;
  }
  
  #ps1 > #social-sidebar {
    display: none;
  }
  
  #ps1 > footer .footer-columns {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Additional mobile/tablet styles */
@media screen and (max-width: 1024px) {
  .responsive5:hover {
    transform: none !important;
    transition: none !important;
  }

  .image-text-row {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
  
  .cb-slideshow {
    display: none;
  }
}

  /* Contact Form Styles */
  * {
    box-sizing: border-box;
  }
  
  input[type=text], textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
  }

  
  label {
    padding: 12px 12px 12px 0;
    display: inline-block;
  }
  
  input[type=submit] {
    background-color: #E6DAA9;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: right;
  }
  
  input[type=submit]:hover {
    background-color: #E6DAA9;
  }
  
  .container {
    border-radius: 5px;
    background-color: #E6DAA9;
    padding: 20px;
    height: 24em;
  }
  
  .col-25 {
    float: left;
    width: 25%;
    margin-top: 6px;
  }
  
  .col-75 {
    float: left;
    width: 75%;
    margin-top: 6px;
  }
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .col-25, .col-75, input[type=submit] {
      width: 100%;
      margin-top: 0;
    }
    }