/* Default Light Mode Styles */
   body {
       background-color: #e8e8df;
       /* Off-white background */
       color: #121212;
       /* Dark grey text */
   }

   nav {
       background-color: #121212;
       color: #FFFFFF;
   }

   header,
   footer {
       background-color: #121212;
       /* Dark grey background */
       color: #121212;
       /* Off-white text */
   }

   h1,
   h2,
   footer a,
   .call-to-action,
   #darkModeToggle,
   #contact h2 {
       color: #ed8b68;
       /* Custom orange */
   }

   #contact button[type="submit"] {
       background-color: #ed8b68;
       /* Custom orange for submit button */
       color: #121212;
       /* Dark grey text for button */
   }

   footer a.back-to-top,
   footer a.back-to-top:hover,
   footer a.back-to-top:visited {
       color: #ed8b68;
       /* Custom orange */
   }

   /* Dark Mode Styles */
   .dark-mode {
       background-color: #121212;
       /* Dark grey background */
       color: #121212;
       /* Off-white text */
   }

   .dark-mode header,
   .dark-mode footer {
       background-color: #FFFFFF;
       /* Off-white background */
       color: #121212;
       /* Dark grey text */
   }

   .dark-mode h1,
   .dark-mode h2,
   .dark-mode footer a,
   .dark-mode .call-to-action,
   .dark-mode #darkModeToggle,
   .dark-mode #contact h2 {
       color: #ed8b68;
       /* Custom orange */
   }

   .dark-mode #contact button[type="submit"] {
       background-color: #ed8b68;
       /* Custom orange for submit button in dark mode */
       color: #121212;
       /* Dark grey text for button in dark mode */
   }

   .dark-mode footer a.back-to-top,
   .dark-mode footer a.back-to-top:hover,
   .dark-mode footer a.back-to-top:visited {
       color: #ed8b68;
       /* Custom orange */
   }

   .logo {
       max-width: 50%;
       /* Adjust based on your preference for the logo's size on mobile */
       height: auto;
       /* Maintains aspect ratio */
       max-height: 100px;
       /* You can adjust this or make it responsive based on the viewport height */
   }

   /* Make the text and buttons responsive */
   .text-sm {
       font-size: calc(12px + 0.5vw);
       /* Example of making text size responsive */
   }

   #contact button[type="submit"],
   #darkModeToggle {
       padding: 1em;
       /* Responsive padding */
       font-size: calc(14px + 0.5vw);
       /* Responsive font size */
   }

   .thank-you-container {
       text-align: center;
       /* Center the text inside the container */
       padding: 50px 20px;
       /* Provide some padding */
       background-color: #fff;
       /* White background for contrast */
       border-radius: 8px;
       /* Rounded corners */
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       /* Subtle shadow */
       margin: 20px auto;
       /* Center the container with automatic horizontal margins */
       max-width: 600px;
       /* Maximum width of the container */
   }

   .thank-you-container h1 {
       color: #ed8b68;
       /* Custom orange color for the heading */
       margin-bottom: 20px;
       /* Space below the heading */
   }

   .thank-you-container p {
       margin-bottom: 20px;
       /* Space below the paragraph */
       color: #121212;
       /* Dark grey text */
   }

   .thank-you-container a.button {
       background-color: #ed8b68;
       /* Custom orange background */
       color: white;
       /* White text */
       padding: 10px 20px;
       /* Padding inside the button */
       border-radius: 4px;
       /* Rounded corners for the button */
       text-decoration: none;
       /* Remove underline from the link */
       display: inline-block;
       /* Make the link behave like a button */
       transition: background-color 0.3s;
       /* Smooth background color transition */
   }

   .thank-you-container a.button:hover {
       background-color: #ca7a5b;
       /* Darken the button on hover */
   }