html, body {
    height: 100%; /* Ensure the body takes full height of the viewport */
    display: flex;
    flex-direction: column; /* Stack elements vertically */
  }
  
  
  
  
  
  
  .header {
    display:flex;
    justify-content: space-between;
    align-items: center;
    
  }
  
  
 .header .logo {
    flex: 1;
    display: flex;
    justify-content: center; /* Center by default */
  }
  
  
  .header .logo {
    justify-content: center; /* Keeps the logo centered */
    flex: 2; /* Gives the logo more space to ensure it stays centered, adjust as needed */
  }
  
  
  
  
  
.header p {
    flex: 1;
    text-align: center;
}
  
.header p.logo {
    flex: 2; /* Gives the logo more space and ensures it stays centered */
    text-align: center;
}
  
  
  
  
  
.footer p {
  
    font-size: 11px;
    /*font-weight: 100 !important;*/
    font-family: var(--text-font);
    font-weight: 400;
    font-style: normal;
    text-align: center;
}
  
  
  
  
  
  
  

  
.header .logo  {
    font-family: var(--text-font);
    font-weight: 400 !important;
    font-style: normal;
    font-size:16px;
}
  
  
p {
    font-family: var(--text-font);
  font-weight: 400;
  font-style: normal;
  font-size:13px;  
  }
  
h6 {
  
    font-family: var(--header-font);
    font-weight: 100;
    font-style: normal;
    font-size: 56px ;
    text-align: center;
  }
  
  
  h5 {
    font-family: var(--text-font);
  font-weight: 400;
  text-transform: uppercase;
  font-style: normal;
  font-size:12px;
  padding-top: 15px;
  letter-spacing: px;
  }
  
  h4 {
    font-family: var(--text-font);
  font-weight: 700;
  font-style: normal;
  font-size:12px;
  padding-top: 20px;
  letter-spacing: px;
  }
  
  h3 {
    font-family: var(--header-font);
  font-weight: 700;
  font-style: normal;
  font-size:20px;
  padding-top: 15px;
  letter-spacing: px;
  }
  
  
  h2 {
    font-family: var(--header-font);
  font-weight: 400;
  font-style: normal;
  font-size:20px;
  margin-top: 55px;
  border-bottom: .5px solid #f4f0ec; 
  padding-bottom:10px;
  letter-spacing: px;
  text-align: center;
  
  }

  
  h1 {
    font-family: var(--header-font);
    font-weight: 700;
    font-style: normal;
    font-size: 56px ;
    text-align: center;
  
    }
    
  
  
      
      
    
    
    
  
  
  
  /* Responsive adjustments */
  @media (max-width: 600px) {
    h1 {
      font-size: 32px; /* Adjusted for small screens */
    }
    h2 {
      font-size: 24px; /* Adjusted for small screens */
    }
    h3 {
      font-size: 20px; /* Adjusted for small screens */
    }
    h4 {
      font-size: 14px; /* Kept at 16px or slightly adjust if needed */
    }
    p {
      font-size: 14px; /* Optionally adjust for small screens */
    }
  }
  
        
      
    
  p, h1, h2, h3, a {
     /*color: #D15600; */
     color:white;
        text-decoration:none;
        }
    
      
        
      
  body {
        background-color: #444;
        margin:0;
        padding:0;
        box-sizing: border-box;
    }
  
  
  
  
        
    
  :root {     
          --system-ui:  system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }
  
  
  :root {
          --header-font: "neue-haas-grotesk-display", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }
  
  
  :root {
          --text-font: "neue-haas-grotesk-text", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }
  
  
  
  
 
  
  
  
  
  .footer {
    /* Ensures the footer stays at the bottom and is not obscured by iOS UI elements */
    padding: 0rem 0;
      padding-bottom: env(safe-area-inset-bottom); /* Adjust for iOS safe area */
  
  }
  
  
  .indexContainer {
    flex: 1; /* Allows the container to expand and fill available space */
    display: flex;
    flex-direction: column; /* Keeps content organized in a column */
    justify-content: space-between; /* Spaces content between header and footer */
    /* Remove min-height: 100vh; */
    padding-bottom: env(safe-area-inset-bottom); /* Adjust for iOS safe area */
  }
  
  
  


  
  
  
  ::-moz-selection {
        color: hsla(30,26.7%,94.1%, 0%);
        background: hsla(30,26.7%,94.1%, 0%);
  }
      
  ::selection {
        color: hsla(30,26.7%,94.1%, 0%);
        background: hsla(30,26.7%,94.1%, 0%);
  }
  
 


  .rotate {
    position: fixed;
    z-index: -9999;
    animation: rotateAnimation 96s linear infinite;
}

@keyframes rotateAnimation {
  0% {
      transform: translate(-50%, -50%) rotate(0deg);
  }
  4.16% {
      transform: translate(-50%, -50%) rotate(45deg);
  }
  8.33% {
      transform: translate(-50%, -50%) rotate(45deg);
  }
  12.5% {
      transform: translate(-50%, -50%) rotate(90deg);
  }
  16.66% {
      transform: translate(-50%, -50%) rotate(90deg);
  }
  20.83% {
      transform: translate(-50%, -50%) rotate(135deg);
  }
  25% {
      transform: translate(-50%, -50%) rotate(135deg);
  }
  29.16% {
      transform: translate(-50%, -50%) rotate(180deg);
  }
  33.33% {
      transform: translate(-50%, -50%) rotate(180deg);
  }
  37.5% {
      transform: translate(-50%, -50%) rotate(225deg);
  }
  41.66% {
      transform: translate(-50%, -50%) rotate(225deg);
  }
  45.83% {
      transform: translate(-50%, -50%) rotate(270deg);
  }
  50% {
      transform: translate(-50%, -50%) rotate(270deg);
  }
  54.16% {
      transform: translate(-50%, -50%) rotate(315deg);
  }
  58.33% {
      transform: translate(-50%, -50%) rotate(315deg);
  }
  62.5% {
      transform: translate(-50%, -50%) rotate(360deg);
  }
  66.66% {
      transform: translate(-50%, -50%) rotate(360deg);
  }
  70.83% {
      transform: translate(-50%, -50%) rotate(405deg);
  }
  75% {
      transform: translate(-50%, -50%) rotate(405deg);
  }
  79.16% {
      transform: translate(-50%, -50%) rotate(450deg);
  }
  83.33% {
      transform: translate(-50%, -50%) rotate(450deg);
  }
  87.5% {
      transform: translate(-50%, -50%) rotate(495deg);
  }
  91.66% {
      transform: translate(-50%, -50%) rotate(495deg);
  }
  95.83% {
      transform: translate(-50%, -50%) rotate(540deg);
  }
  100% {
      transform: translate(-50%, -50%) rotate(540deg);
  }
}

/*
.header{
  background: rgba(0, 183, 255, 0.112);
}*/

.logo {
  color: black;
}

.logo:hover {
color:#f4f0ec;
}