@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


  /*---------- Global Base Colors. Refer to them in your styles using var(--Teal), etc. Modify these values to match the needs of your theme. ----------------*/
:root {
    --Blue: 210, 39%, 27%;  /* hsl */
    --LightBlue: 210, 39%, 60%;
    --DarkBlue: 210, 39%, 20%; 
    --Orange: 20, 100%, 45%;
    --DarkOrange: 20, 100%, 28%; 
    --Gold: 37, 83%, 65%; 
    --Teal: 175, 100%, 39%;
    --Brown: 37, 83%, 18%; 
    --Gray: 0, 0%, 50%;
    --White: 0, 100%, 100%; 
}  
/* Global Page Blocking
----------------------------------------------- */	
body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    }
p {
    margin: 0;
    margin-block-end: 0.75em;
}
a {
    color: hsl(var(--Gold), 1);
    text-decoration: none;
    transition: color 0.3s;
}
a: hover {
    color: hsl(var(--White), 0.75);
}
a: visited {
    color: hsl(var(--Gold), 1);
}

.goldButton {
    border: 1px solid white;
    padding: 10px;
    margin-top: 10px;
    margin-left: 10px;
    background-color: hsla(var(--Gold), 0.75);
    color: hsl(var(--Blue), 1);
    transition: color 0.3s;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s; 
}
.goldButton:hover {
    color: white;
    background-color: hsla(var(--Gold), 1);
}

h1, h2, h3 {
    color: hsla(var(--Gold), 1);
}
:root {
    --headingBaseSize: 4em; 
}
h1 {
    font-weight: 500;
    font-size: calc(var(--headingBaseSize) * 1);
}
h2 {
    font-weight: 500;
    font-size: calc(var(--headingBaseSize) * .7);
    margin-block-end: 0.25em;
}
h3 {
    font-weight: 400;
    font-size: calc(var(--headingBaseSize) * .5);
    margin-block-end: 0.25em;
}
@media (max-width: 768px) {
    :root {
        --headingBaseSize: 2em; /* Adjust the base font size for mobile */
    }
}

h1 {
    font-weight: 500;
    font-size: calc(var(--headingBaseSize) * 1);
}

h2 {
    font-weight: 500;
    font-size: calc(var(--headingBaseSize) * .7);
    margin-block-end: 0.25em;
}

h3 {
    font-weight: 400;
    font-size: calc(var(--headingBaseSize) * .5);
    margin-block-end: 0.25em;
}
.flex-container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            background: hsl(var(--Blue));
            
        }
section {
    margin: 0 auto;
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
}
section p {
    color: white;
}
   .page-content {
            flex: 1;
            margin-top: 0px;
            min-height: 50vh;
        }
        .content-pad {
          width:100vw;
          padding: 0px;
          margin: 0 auto;
        }
/* Class to be added to divs that should fade in - corresponds to JS in most_head_tags_simplelav.php */
.content-fade {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

/* Class to be added when div is in view */
.fade-in {
  opacity: 1;
}        
/*-----------Footer-----------*/

        .sticky-footer {
            background-color: rgba(var(--DarkBlue),1);
            color: rgb(255,255,255);
            padding: 20px;
            text-align: left;
            z-index: 1000;
            position: relative;
            border-top: 1px solid hsl(var(--Gold));
        }
        .sticky-footer a {
          color: hsl(var(--Gold));
          text-decoration: none;
        }
        .sticky-footer a:hover {
            color: hsl(var(--White));
        }
        .sticky-footer h2 {
            margin: 2px;
            font-size: 30px;
        }
        .footer-row {
            display: flex;
            justify-content: space-between; /* evenly spaced columns */
            align-items: center; /* vertically center the content */
            padding: 10px 0; /* some padding for visual spacing */
        }

        .footer-column {
            flex: 0 0 33%; /* each column takes up an equal amount of space */
            padding: 10px; /* some padding for visual spacing */
            text-align: left;
        }

        .footer-column.logo-column img {
            max-width: 100%; /* ensures the image doesn't overflow its container */
            height: auto;
            margin-bottom: 20px; /* some spacing between the logo and the text */
        }
        .footer-column.form-column{
            flex: 0 0 50%;
    
        }

      .footer-row:last-child {
          justify-content: center; /* center the content */
          padding: 10px 0; /* some padding for visual spacing */
          border-top: 1px solid #ccc; /* optional border between the columns and the copyright text */
      }
      @media (max-width: 768px) {
          .footer-row {
      flex-direction: column;
      }
      
        .sticky-footer, .footer-column, .footer-row {
        text-align: center;
      }

    .footer-column {
        margin-bottom: 20px; /* Add some spacing between stacked columns */
    }
    .footer-column.logo-column img {
        min-width: 250px; /* or any other minimum size that you find suitable */
    }
}
.floating-button {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 260px;
    height: 58px;
    background-color: hsla(var(--Orange),0.8);
    padding: 20px;
    color: white;
    border: none;
    text-decoration: none;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;  /* Center text vertically */
    justify-content: center;  /* Center text horizontally */
    z-index: 1200;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    transition: background-color 0.3s ease;
    font-size: 16px;
}

.floating-button:hover {
    background-color: hsla(var(--Gold),1);
}

@media (max-width: 768px) {
    .floating-button {
        top: auto;  /* Reset the 'top' property */
        right: auto;  /* Reset the 'right' property */
        bottom: 20px;  /* Position at the bottom */
        left: 50%;  /* Center it on the X-axis */
        transform: translateX(-50%);  /* Adjust for its own width to truly center it */
        width: 300px;  /* Set width */
        height: 75px;
    }
}

/*---------- Global Base Fonts and block sizing. Set Specific sub-styles in their relative applications. ----------------*/


.page-content {
    font-family: 'Roboto Condensed', sans-serif;
}

nav {
 font-family: 'Roboto Condensed', sans-serif;
}

footer {
     font-family: 'Roboto Condensed', sans-serif;
}