body {
   font-family: 'Lato', Arial, sans-serif;
   background: linear-gradient(to bottom, #e3f2fd, #bbdefb);
   color: #333;
   margin: 0;
   padding: 0;
   min-height: 100vh; /* Ensures body can grow with content */
   overflow-x: hidden; /* Prevents horizontal scrolling */
}

/* Container Styling */
.container {
   margin: 2vh auto; /* Add space between the title and container */
   width: 90%;
   max-width: 75vw;
   background-color: #fff;
   padding: 3vh;
   border-radius: 1vw;
   box-shadow: 0 0.5vw 1.25vw rgba(0, 0, 0, 0.15);
   overflow: visible;
}

/* Header Styling */
.header {
   display: flex;
   flex-wrap: wrap; /* Allows elements to wrap to the next line if necessary */
   justify-content: center; /* Centers all items horizontally */
   align-items: center; /* Centers items vertically */
   text-align: center; /* Centers text for wrapped elements */
   gap: 2vh 4vw; /* Adds spacing between items */
}

.weather-icon {
   position: relative; /* Enables positioning of text inside the image */
   width: 10vw; /* Adjust size as needed */
   height: 10vw; /* Ensure it's a square for the circular shape */
   display: flex; /* Enables flexbox for centering */
   flex-direction: column; /* Stacks elements vertically */
   align-items: center; /* Centers horizontally */
   justify-content: center; /* Centers vertically */
   text-align: center; /* Ensures text is centered below the image */
   margin: auto; /* Centers the entire container within the parent */
}

#current-description {
   position: absolute; /* Position text over the image */
   top: 50%; /* Vertically center the text */
   left: 50%; /* Horizontally center the text */
   transform: translate(-50%, -50%); /* Ensures perfect centering */
   color: white; /* White text for contrast */
   font-size: 2rem; /* Adjust text size as needed */
   font-weight: bold; /* Makes text stand out */
   text-align: center;
   pointer-events: none; /* Ensures text does not block interaction */
   line-height: 1; /* Prevents extra spacing between lines */
   margin: 0; /* Removes any default margins */
   padding: 0;
}

/* Current Weather */
.current-weather h1 {
   font-size: 3.5vw;
   font-weight: bold;
   color: #444;
}

/* Toggle Button */
#toggleButton {
   display: inline-block;
   font-size: 1vw;
   padding: 0.5rem 1rem;
   font-family: 'Lato', Arial, sans-serif;
   color: #ffffff;
   background: linear-gradient(135deg, #42a5f5, #1e88e5);
   border: none;
   border-radius: 1vw;
   box-shadow: 0 0.5vw 1.25vw rgba(0, 0, 0, 0.15);
   transition: transform 0.3s ease, background 0.3s ease;
   cursor: pointer;
   margin-top: 1vh;
   position: absolute; /* Place it relative to the title section */
   top: 2vh; /* Adjust this to align vertically */
   right: 2vw; /* Adjust this to align horizontally */
}

#toggleButton:hover {
   background: linear-gradient(135deg, #1e88e5, #1565c0);
   transform: translateY(-0.3vh);
   box-shadow: 0 0.6vw 1.5vw rgba(0, 0, 0, 0.2);
}

#toggleButton:active {
   transform: translateY(0);
   box-shadow: 0 0.3vw 0.75vw rgba(0, 0, 0, 0.1);
}

/* Location Section */
.location h2 {
   font-size: 2vw;
   font-weight: 600;
   color: #555;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   text-align: center;
   gap: 1vh;
   max-width: 100%;
   margin-bottom: 3vh;
   overflow-wrap: break-word;
   word-break: break-word;
   hyphens: auto;
   padding: 0 1vw;
}

#location {
   font-size: 1.2rem;
   font-weight: 600;
   color: #555;
   word-wrap: break-word;
   overflow-wrap: break-word;
   word-break: break-word;
   hyphens: auto;
   max-width: 25vw;
   padding: 0 1vw;
   box-sizing: border-box;
}

/* Advice Section */
#advice {
   display: flex;
   justify-content: center;
   align-items: center;
   background: #ffefd5;
   border: 0.1vw solid #ffc107;
   border-radius: 1vw;
   padding: 1.5vh 2vw;
   max-width: 25vw;
   margin: 2vh auto;
   box-shadow: 0 0.3vw 0.75vw rgba(0, 0, 0, 0.1);
   font-size: 1rem;
   color: #333;
   text-align: center;
   width: 25vw;
   word-wrap: break-word;
   overflow-wrap: break-word;
   word-break: break-word;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
   height: 1vh;
   width: 0.5vw;
   background-color: #f0f0f0;
}

::-webkit-scrollbar-thumb {
   background-color: #42a5f5;
   border-radius: 0.5vw;
}

/* Hourly Forecast Section */
.hourly-forecast {
   display: flex;
   justify-content: left; /* Centered alignment */
   overflow-x: auto;
   gap: 3vw;
   padding: 2vh 0;
}

.box {
   background: linear-gradient(to bottom, #e3f2fd, #bbdefb);
   padding: 1.5vh;
   width: 8vw;
   text-align: center;
   border-radius: 1vw;
   box-shadow: 0 0.3vw 1vw rgba(0, 0, 0, 0.1);
   font-size: 1rem;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.box:hover {
   transform: scale(1.05);
   box-shadow: 0 0.6vw 1.5vw rgba(0, 0, 0, 0.15);
}

/* Highlights Section */
.highlights {
   padding: 2vh 2vw;
   background: #fff8e1;
   border-radius: 2vw;
   box-shadow: 0 0.3vw 0.75vw rgba(0, 0, 0, 0.1);
   text-align: left;
   font-size: 1.1vw;
}

.highlights h3 {
   font-size: 1.6vw;
   font-weight: bold;
   margin-bottom: 2vh;
   color: #444;
}

.highlights ul {
   list-style: none;
   padding-left: 2vw;
}

.highlights li {
   padding: 0.8vh 0;
   font-size: 1.2rem;
}

/* Sun Times Section */
.sun-times {
   display: flex;
   justify-content: center;
   gap: 2vw;
   margin-top: 2vh;
}

.sun-time-box {
   background: linear-gradient(to bottom, #ffffff, #f0f4c3);
   padding: 1.5vh 2vw;
   border-radius: 1vw;
   box-shadow: 0 0.3vw 1vw rgba(0, 0, 0, 0.1);
   text-align: center;
   min-width: 10vw;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sun-time-box:hover {
   transform: scale(1.1);
   box-shadow: 0 0.6vw 1.5vw rgba(0, 0, 0, 0.15);
}

#sunrise-time, #sunset-time {
   font-size: 1.2rem;
   color: #666;
}

/* Weekly Weather Section */
.weekly-weather {
   display: flex;
   justify-content: left; 
   gap: 1.5vw;
   overflow-x: auto;
   overflow-y: hidden;
   padding: 4vh 0;
}

.day-box {
   height: 32vw;
   width: 18vw;
   text-align: center;
   border: 0.1vw solid #ddd;
   border-radius: 1vw;
   background: linear-gradient(to bottom, #f9f9f9, #e3f2fd);
   margin-top: 2vw;
   font-size: 1vw;
   font-weight: bold;
   box-shadow: 0 0.3vw 0.75vw rgba(0, 0, 0, 0.1);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.day-box:hover {
   transform: translateY(-0.5vh);
   box-shadow: 0 0.6vw 1.5vw rgba(0, 0, 0, 0.15);
}

/* Weather Icon */
.weather-icon {
   display: block;
   font-size: 7vw;
   margin-bottom: 1vh;
   color: #42a5f5;
}

/* Thermometer */
.thermometer-icon {
   height: 16vw;
   width: 6vw;
}

.thermometer-container {
   display: flex;
   align-items: flex-start;
   justify-content: center;
}

.temperatures {
   display: flex;
   flex-direction: column;
   margin-right: 1vw;
}

.high-temp {
   margin-bottom: 8vw;
}

/* Select Location Button */
#SelectLocationBtn {
   display: inline-block;
   font-size: 1rem;
   padding: 1vh 2vw;
   font-family: 'Lato', Arial, sans-serif;
   color: #ffffff;
   background: linear-gradient(135deg, #42a5f5, #1e88e5);
   border: none;
   border-radius: 0.5vw;
   box-shadow: 0 0.5vw 1.25vw rgba(0, 0, 0, 0.15);
   transition: transform 0.3s ease, background 0.3s ease;
   cursor: pointer;
   margin-top: 1vh;
   white-space: nowrap; 
}

#SelectLocationBtn:hover {
   background: linear-gradient(135deg, #1e88e5, #1565c0);
   transform: translateY(-0.3vh);
   box-shadow: 0 0.6vw 1.5vw rgba(0, 0, 0, 0.2);
}

#SelectLocationBtn:active {
   transform: translateY(0);
   box-shadow: 0 0.3vw 0.75vw rgba(0, 0, 0, 0.1);
}

/* Lightbox Styling */
#locationLightbox {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(0.5vw);
   z-index: 1000; /* Ensures lightbox is on top of all other elements */
}

.lightbox-content {
   display: flex;
   justify-content: center;
   width: 60%;
   height: 80%;
   border: 1vw;
   border-radius: 2vw;
   margin: auto;
   margin-top: 4vh;
   margin-bottom: 4vh;
   text-align: center;
}

/* Moon Phase Link */
.moon-phase-link {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   width: 4vw;
   height: 4vw;
   border: 0.2vw solid #ddd;
   border-radius: 50%;
   background-color: #f9f9f9;
   text-decoration: none;
   font-size: 2vw;
   color: #333;
   transition: all 0.3s ease-in-out;
}

.moon-phase-link:hover {
   background-color: #ffefd5;
   color: #fff;
   border-color: #ffefd5;
}

#loading-screen {
   position: fixed; 
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(255, 255, 255, 0.8); 
   display: flex; 
   justify-content: center;
   align-items: center;
   z-index: 9999;
}

#loading-screen img {
   width: 10vw; 
   height: auto;
}

#loading-screen {
   display: none; 
}

.current-weather-image {
   display: flex;
   border-radius: 50%; /* Makes the image circular */
   width: 100%; /* Fills the parent container */
   height: 100%; /* Fills the parent container */
   object-fit: cover; /* Ensures the image scales proportionally */
   border: 0.2vw solid #ddd; /* Optional border for styling */
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   flex: 0 0 auto; /* Prevent these from stretching or shrinking */
   text-align: center; /* Ensure internal text is centered */
}

.title-section {
   display: flex; /* Align logo and text horizontally */
   flex-direction: column; /* Stack logo above the text */
   align-items: center; /* Center horizontally */
   justify-content: center; /* Center vertically */
   padding: 2vh; /* Add padding around the title */
   text-align: center; /* Center the text */
   background-color: #e3f2fd; /* Optional background to match the theme */
   border-bottom: 0.2vw solid #bbdefb; /* Optional subtle border for separation */
   position: relative; /* Ensures it doesn’t scroll with the page */
   width: 100%; /* Full width to span the page */
   box-sizing: border-box; /* Ensure padding is included in width */
   z-index: 1; /* Ensure it's below the content for simplicity */
}

.title-logo {
   height: 4vw; /* Adjust logo size */
   width: auto; /* Maintain aspect ratio */
   margin-bottom: 1vh; /* Space between logo and text */
}

.title-text {
   font-size: 2rem; /* Adjust title size */
   color: #333; /* Neutral text color */
   font-family: 'Lato', Arial, sans-serif; /* Match the font of the site */
   margin: 0; /* Remove extra margins */
}

.advice-title {
   font-size: 1.5rem; /* Adjust size as needed */
   font-weight: bold;
   color: #444; /* Matches your text color scheme */
   margin-bottom: 1vh; /* Adds space between the title and the content */
   text-align: center; /* Centers the title */
}


@media only screen and (max-width: 768px) {
   /* For mobile phones: */
   body {
      font-family: 'Lato', Arial, sans-serif;
      background: linear-gradient(to bottom, #e3f2fd, #bbdefb);
      color: #333;
      margin: 0;
      padding: 0;
      min-height: 100vh; /* Ensures body can grow with content */
      overflow-x: hidden; /* Prevents horizontal scrolling */
   }
   
   /* Container Styling */
   .container {
      margin: 2vh auto; /* Add space between the title and container */
      width: 90%;
      max-width: 75vw;
      background-color: #fff;
      padding: 3vh;
      border-radius: 1vw;
      box-shadow: 0 0.5vw 1.25vw rgba(0, 0, 0, 0.15);
      overflow: visible;
   }
   
   /* Header Styling */
   .header {
      display: flex;
      flex-wrap: wrap; /* Allows elements to wrap to the next line if necessary */
      justify-content: center; /* Centers all items horizontally */
      align-items: center; /* Centers items vertically */
      text-align: center; /* Centers text for wrapped elements */
      gap: 2vh 4vw; /* Adds spacing between items */
   }
   
   .weather-icon {
      position: relative; /* Enables positioning of text inside the image */
      width: 50vw; /* Adjust size as needed */
      height: 50vw; /* Ensure it's a square for the circular shape */
      display: flex; /* Enables flexbox for centering */
      flex-direction: column; /* Stacks elements vertically */
      align-items: center; /* Centers horizontally */
      justify-content: center; /* Centers vertically */
      text-align: center; /* Ensures text is centered below the image */
      margin: auto; /* Centers the entire container within the parent */
   }
   
   #current-description {
      position: absolute; /* Position text over the image */
      top: 50%; /* Vertically center the text */
      left: 50%; /* Horizontally center the text */
      transform: translate(-50%, -50%); /* Ensures perfect centering */
      color: white; /* White text for contrast */
      font-size: 2rem; /* Adjust text size as needed */
      font-weight: bold; /* Makes text stand out */
      text-align: center;
      pointer-events: none; /* Ensures text does not block interaction */
      line-height: 1; /* Prevents extra spacing between lines */
      margin: 0; /* Removes any default margins */
      padding: 0;
   }
   
   /* Current Weather */
   .current-weather h1 {
      font-size: 10vw;
      font-weight: bold;
      color: #444;
   }
   
   /* Toggle Button */
   #toggleButton {
      display: inline-block;
      font-size: 3vw;
      padding: 0.5rem 1rem;
      font-family: 'Lato', Arial, sans-serif;
      color: #ffffff;
      background: linear-gradient(135deg, #42a5f5, #1e88e5);
      border: none;
      border-radius: 1vw;
      box-shadow: 0 0.5vw 1.25vw rgba(0, 0, 0, 0.15);
      transition: transform 0.3s ease, background 0.3s ease;
      cursor: pointer;
      margin-top: 1vh;
      position: absolute; /* Place it relative to the title section */
      top: 1vh; /* Adjust this to align vertically */
      right: 2vw; /* Adjust this to align horizontally */
   }
   
   #toggleButton:hover {
      background: linear-gradient(135deg, #1e88e5, #1565c0);
      transform: translateY(-0.3vh);
      box-shadow: 0 0.6vw 1.5vw rgba(0, 0, 0, 0.2);
   }
   
   #toggleButton:active {
      transform: translateY(0);
      box-shadow: 0 0.3vw 0.75vw rgba(0, 0, 0, 0.1);
   }
   
   /* Location Section */
   .location h2 {
      font-size: 2vw;
      font-weight: 600;
      color: #555;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      text-align: center;
      gap: 1vh;
      max-width: 100%;
      margin-bottom: 3vh;
      overflow-wrap: break-word;
      word-break: break-word;
      hyphens: auto;
      padding: 0 1vw;
   }
   
   #location {
      font-size: 1.2rem;
      font-weight: 600;
      color: #555;
      word-wrap: break-word;
      overflow-wrap: break-word;
      word-break: break-word;
      hyphens: auto;
      max-width: 50vw;
      padding: 0 1vw;
      box-sizing: border-box;
   }
   
   /* Advice Section */
   #advice {
      display: flex;
      justify-content: center;
      align-items: center;
      background: #ffefd5;
      border: 0.1vw solid #ffc107;
      border-radius: 1vw;
      padding: 1.5vh 2vw;
      max-width: 75vw;
      margin: 2vh auto;
      box-shadow: 0 0.3vw 0.75vw rgba(0, 0, 0, 0.1);
      font-size: 4vw;
      color: #333;
      text-align: center;
      width: 50vw;
      word-wrap: break-word;
      overflow-wrap: break-word;
      word-break: break-word;
   }

   #date {
      font-size: 4vw;
      font-weight: 300;
      color: #555;
      word-wrap: break-word;
      overflow-wrap: break-word;
      word-break: break-word;
      hyphens: auto;
      max-width: 50vw;
      padding: 0 1vw;
      box-sizing: border-box;
   }
   
   /* Scrollbar Styling */
   ::-webkit-scrollbar {
      height: 1vh;
      width: 0.5vw;
      background-color: #f0f0f0;
   }
   
   ::-webkit-scrollbar-thumb {
      background-color: #42a5f5;
      border-radius: 0.5vw;
   }
   
   /* Hourly Forecast Section */
   .hourly-forecast {
      display: flex;
      justify-content: left; /* Centered alignment */
      overflow-x: auto;
      gap: 3vw;
      padding: 2vh 0;
   }
   
   .box {
      background: linear-gradient(to bottom, #e3f2fd, #bbdefb);
      padding: 1.5vh;
      width: 13vw;
      text-align: center;
      border-radius: 1vw;
      box-shadow: 0 0.3vw 1vw rgba(0, 0, 0, 0.1);
      font-size: 1rem;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
   }
   
   .box:hover {
      transform: scale(1.05);
      box-shadow: 0 0.6vw 1.5vw rgba(0, 0, 0, 0.15);
   }
   
/* Highlights Section */
.highlights {
   padding: 2vw;
   background: #fff8e1;
   border-radius: 2vw;
   box-shadow: 0 0.3vw 0.75vw rgba(0, 0, 0, 0.1);
   text-align: center;
   font-size: 5vw;
}

.highlights h3 {
   font-size: 7vw;
   font-weight: bold;
   margin-bottom: 2vw;
   color: #444;
}

#highlights-title {
   font-size: 6vw;
   font-weight: bold;
   margin-bottom: 2vw;
   color: #444;
}

.highlights ul {
   list-style: none;
   padding-left: 2vw;
}

.highlights li {
   padding: 0.8vh 0;
   font-size: 1.2rem;
}
   
   /* Sun Times Section */
   .sun-times {
      display: flex;
      justify-content: center;
      gap: 2vw;
      margin-top: 2vh;
      margin-bottom: 2vh;
   }
   
   .sun-time-box {
      background: linear-gradient(to bottom, #ffffff, #f0f4c3);
      padding: 1.5vh 2vw;
      border-radius: 1vw;
      box-shadow: 0 0.3vw 1vw rgba(0, 0, 0, 0.1);
      text-align: center;
      min-width: 10vw;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
   }
   
   .sun-time-box:hover {
      transform: scale(1.1);
      box-shadow: 0 0.6vw 1.5vw rgba(0, 0, 0, 0.15);
   }
   
   #sunrise-time, #sunset-time {
      font-size: 1.2rem;
      color: #666;
   }
   
   /* Weekly Weather Section */
   .weekly-weather {
      display: flex;
      justify-content: left; 
      gap: 1.5vw;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 4vh 0;
   }
   
   .day-box {
      height: 140vw;
      width: 45vw;
      text-align: center;
      border: 0.1vw solid #ddd;
      border-radius: 1vw;
      background: linear-gradient(to bottom, #f9f9f9, #e3f2fd);
      margin-top: 2vw;
      font-size: 1vw;
      font-weight: bold;
      box-shadow: 0 0.3vw 0.75vw rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      font-size: 6vw;
   }
   
   .day-box:hover {
      transform: translateY(-0.5vh);
      box-shadow: 0 0.6vw 1.5vw rgba(0, 0, 0, 0.15);
   }
   
   /* Weather Icon */
   .weather-icon {
      display: flex;
      font-size: 7vw;
      margin-bottom: 1vh;
      color: #42a5f5;
   }
   
   /* Thermometer */
   .thermometer-icon {
      height: 48vw;
      width: 18vw;
   }
   
   .thermometer-container {
      display: flex;
      align-items: flex-start;
      justify-content: center;
   }
   
   .temperatures {
      display: flex;
      flex-direction: column;
      margin-right: 1vw;
      font-size: 7vw;
   }
   
   .low-temp {
      margin-top: 15vw;
   }

   .high-temp {
      margin-top: 4vw;
      font-size: 7vw;
   }
   
   /* Select Location Button */
   #SelectLocationBtn {
      display: inline-block;
      font-size: 1rem;
      padding: 1vh 2vw;
      font-family: 'Lato', Arial, sans-serif;
      color: #ffffff;
      background: linear-gradient(135deg, #42a5f5, #1e88e5);
      border: none;
      border-radius: 0.5vw;
      box-shadow: 0 0.5vw 1.25vw rgba(0, 0, 0, 0.15);
      transition: transform 0.3s ease, background 0.3s ease;
      cursor: pointer;
      margin-top: 1vh;
      white-space: nowrap; 
   }
   
   #SelectLocationBtn:hover {
      background: linear-gradient(135deg, #1e88e5, #1565c0);
      transform: translateY(-0.3vh);
      box-shadow: 0 0.6vw 1.5vw rgba(0, 0, 0, 0.2);
   }
   
   #SelectLocationBtn:active {
      transform: translateY(0);
      box-shadow: 0 0.3vw 0.75vw rgba(0, 0, 0, 0.1);
   }
   
   /* Lightbox Styling */
   #locationLightbox {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(0.5vw);
      z-index: 1000; /* Ensures lightbox is on top of all other elements */
   }
   
   .lightbox-content {
      display: flex;
      justify-content: center;
      width: 95%;
      height: 60%;
      border: 1vw;
      border-radius: 2vw;
      margin-top: 20vh;
      margin-bottom: 4vh;
      text-align: center;
   }
   
   /* Moon Phase Link */
   .moon-phase-link {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 16vw;
      height: 16vw;
      border: 0.2vw solid #ddd;
      border-radius: 50%;
      background-color: #f9f9f9;
      text-decoration: none;
      font-size: 8vw;
      color: #333;
      transition: all 0.3s ease-in-out;
   }
   
   .moon-phase-link:hover {
      background-color: #ffefd5;
      color: #fff;
      border-color: #ffefd5;
   }
   
   #loading-screen {
      position: fixed; 
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.8); 
      display: flex; 
      justify-content: center;
      align-items: center;
      z-index: 9999;
   }
   
   #loading-screen img {
      width: 20vw; 
      height: auto;
   }
   
   #loading-screen {
      display: none; 
   }
   
   .current-weather-image {
      display: flex;
      border-radius: 50%; /* Makes the image circular */
      width: 100%; /* Fills the parent container */
      height: 100%; /* Fills the parent container */
      object-fit: cover; /* Ensures the image scales proportionally */
      border: 0.2vw solid #ddd; /* Optional border for styling */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex: 0 0 auto; /* Prevent these from stretching or shrinking */
      text-align: center; /* Ensure internal text is centered */
   }
   
   .title-section {
      display: flex; /* Align logo and text horizontally */
      flex-direction: column; /* Stack logo above the text */
      align-items: center; /* Center horizontally */
      justify-content: center; /* Center vertically */
      padding: 2vh; /* Add padding around the title */
      text-align: center; /* Center the text */
      background-color: #e3f2fd; /* Optional background to match the theme */
      border-bottom: 0.2vw solid #bbdefb; /* Optional subtle border for separation */
      position: relative; /* Ensures it doesn’t scroll with the page */
      width: 100%; /* Full width to span the page */
      box-sizing: border-box; /* Ensure padding is included in width */
      z-index: 1; /* Ensure it's below the content for simplicity */
   }
   
   .title-logo {
      height: 16vw; /* Adjust logo size */
      width: auto; /* Maintain aspect ratio */
      margin-bottom: 1vh; /* Space between logo and text */
   }
   
   .title-text {
      font-size: 2rem; /* Adjust title size */
      color: #333; /* Neutral text color */
      font-family: 'Lato', Arial, sans-serif; /* Match the font of the site */
      margin: 0; /* Remove extra margins */
   }
   
   .advice-title {
      font-size: 1.5rem; /* Adjust size as needed */
      font-weight: bold;
      color: #444; /* Matches your text color scheme */
      margin-bottom: 1vh; /* Adds space between the title and the content */
      text-align: center; /* Centers the title */
   }
 }