@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

@charset "UTF-8";

/* CSS Document */



/* Footer styles */
footer { /*footer "selector" */
  background-color: #000;
  color: #fff;
  text-align: left;
  padding: 20px 36px; /* Add left and right padding */
  padding-bottom: 36px;
  overflow: hidden; /* Hide any overflowing content */
}

.footer-container {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: flex-start; /* Align items along the top edge */
  position: relative; /* Add relative positioning to the container */
}

.iframe-container {
  position: absolute;
  top: -3in; /* Position the logo 3 inches above the top edge */
  width: 236px;
  height: 574px;
}

footer iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.footer-content {
  flex: 1;
  padding-left: 272px; /* Add padding to the left of the text to make space for the logo */
  padding-top: 1.365in; /* Adjust padding to the top of the text */
  position: relative; /* Add relative positioning to the footer content */
}

footer p {
  margin: 16px 0;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 18px;
  letter-spacing: .5px;
  font-weight: 300;
}

footer a {
  color: #fff;
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding-bottom: 3px; /* Add padding at the bottom to create space for the underline */
}

footer a::after {
  content: '';
  display: block;
  height: 1.1px;
  background-color: transparent; /* Set initial background color to transparent */
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: background-color 0.3s ease; /* Add transition for smooth hover effect */
}

footer a:hover::after {
  background-color: #00b4ff; /* Change background color on hover */
}

.footer-gap {
  height: 36px;
}

.footer-fill {
  height: 4in;
}

.footer-container .footer-note p {
  font-weight: 300;
  font-size: 13px; /* Adjust the font size for the footer note */
  color: #bbbbbb;
  position: absolute; /* Position the footer note absolutely */
  bottom: 0; /* Align the footer note to the bottom */
  left: 0; /* Align the footer note to the left */
  padding-left: 0; /* Remove the left padding */
}


/* Updated Scroll to top button styles */
.scroll-to-top {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
 /* z-index: 1000; */
}

.scroll-to-top .arrow-icon {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

.scroll-to-top:hover .arrow-icon {
  transform: translateY(-3px);
}


/* Media query for mobile devices */
@media screen and (max-width: 767px) {
  footer {
    padding: 20px 36px; /* Add padding to the footer section on mobile */
  }

	footer p {
  margin: 16px 0;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 20px;
  letter-spacing: .5px;
  font-weight: 300;
}
  .footer-container {
    flex-direction: column;
    padding: 0; /* Remove the padding from the container */
    overflow: visible; /* Allow overflowing content on mobile */
  }

  .iframe-container {
    position: absolute;
    top: -3in; /* Position the logo 3 inches above the top edge */
    margin-bottom: 20px;
    overflow: hidden; /* Hide any overflowing content */
  }

  .footer-content {
    padding-left: 0;
    padding-top: 0; /* Remove the padding above the text */
    text-align: left; /* Align the text to the left */
    margin-top: 300px; /* Add margin to position the text below the logo */
  }

  .footer-fill {
    height: 1.5in; /* Adjust the height of the gap below the text */
  }

  .footer-container .footer-note p {
    font-size: 14px; /* Set the font size for the footer note on mobile */
	   color: #bbbbbb;
    position: static; /* Remove absolute positioning for mobile */
    padding-left: 0; /* Remove left padding for mobile */
    padding-top: 16px; /* Add top padding for spacing */
  }
	

  .scroll-to-top {
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
  }
}
	
}