/* GLOBAL STYLES
-------------------------------------------------- */
html {
  background: #000000;
}
/* shared site colors */
:root {
  --sea-top: #002f47;
  --sea-deep: #00101a;
}
a {
  color: #44B8FF;
}

/* Sea-like background for the whole site */
body {
  background: linear-gradient(180deg, var(--sea-top) 0%, var(--sea-deep) 60%);
  color: #e6f7ff; /* light sea-foam text for contrast */
}

a.nostyle {
 text-decoration: none;
 color: inherit;
 cursor: auto;
 }

/* Section divider for feature sections */
.section-divider {
  width: 70px;
}

/* Skip to content link for keyboard accessibility */
.visually-hidden-focusable {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.visually-hidden-focusable:focus {
  position: fixed;
  top: 10px;
  left: 10px;
  width: auto;
  height: auto;
  padding: 10px 20px;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background-color: #00101a;
  color: #44B8FF;
  border: 2px solid #44B8FF;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  z-index: 9999;
}

/* masthead styles are centralized in css/header.css to avoid duplication and conflicts */

.masthead-border {
  border-bottom: 1px solid #989da4;
  width: 100%;
}

.logo img {
max-width: 100%;
line-height: 99px;
}

.powered img {
max-width: 100%;
line-height: 99px;
position: absolute;
right: 107px;
}

.powered p {
float: right;
color: #989da4;
margin: 0;
}

.powered a {
color: #989da4
}

.powered a:hover {
text-decoration: underline;
}

.powered a:visited {
color: #989da4;
}

.callout {
  position: relative;
  text-align: center;
  padding: 150px 0 75px 0;
  color: #fff;
  width: 100%;
  overflow: hidden;
}

/* The video element will pull its source from an HTML file.
   In your HTML, link to your video file like this:

   <video autoplay muted loop>
     <source src="videos/your-video-file.mp4" type="video/mp4">
   </video>
*/

.callout video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -60%);
  z-index: -1;
}

.callout .col-12,
.callout .col-xs-12 {
  padding: 0 16%;
}

.callout h1 {
font-weight: 200;
}

.callout p {
font-weight: 200;
font-size: 14px;
}

.callout a {
color: #fff;
font-weight: bold;
}

.callout a:hover {
text-decoration: underline;
}

.callout a:visited {
color: #fff;
font-weight: bold;
}

.marketing {
background: url('images/content-bg.jpg') top center repeat-x;
background-color: #000;
padding: 40px 30px 75px 20px;
color: #fff;
margin-top: -50px;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
}

.featurette h2 {
font-weight:200;
font-size: 28px;
margin: 0 0 5px 0;
}

.featurette h3 {
font-weight:200;
color: #ea2a2e;
font-size: 22px;
margin: 0 0 10px 0;
}

.featurette p {
font-weight: 200;
font-size: 14px;
}

.featurette img {
max-width: 100%;
}

.powered-container {
background-color: #fff;
padding: 60px 60px 30px 60px;
margin-top: -50px;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
}

.powered-container .powered-container-two {
margin-bottom: 30px;
}

.sidebar {
text-align: right;
}

.sidebar a {
color: #ccc;
}

.sidebar a:hover {
text-decoration: underline;
}

.sidebar a:visited {
color: #ccc;
}

.sidebar ul {
list-style: none;
padding: 0;
font-size: 12px;
font-weight: 200;
}

.sidebar ul li {
margin: 3px 0;
}

.sidebar-sub {
margin-bottom: 0;
margin-top: 30px;
}

/* Footer styles are consolidated into css/footer.css to avoid duplication and conflicts. */

.home-copyright img {
float: right;
}

.powered-by-copyright img {
float: right;
}

.home-copyright {
font-size: 10px;
text-align:right;
}

.powered-by-copyright {
font-size: 10px;
text-align:right;
padding-top: 40px;
}

/* Responsive container for embedded Google Form */
.form-embed {
  width: 100%;
  /* Use viewport-based height so the form fills the screen on phones */
  height: 80vh;
  min-height: 480px;
  max-height: 1200px;
  overflow: hidden;
}

/* On small screens use nearly full viewport height so the form is usable without excessive scrolling */
@media (max-width: 600px) {
  .form-embed {
    height: calc(100vh - 120px); /* leave room for header/footer */
    min-height: 420px;
  }
}

.form-embed iframe { 
  border: 0; width: 100%; height: 100%; 
}
/* Instagram Gallery hover effect */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 24px rgba(68, 184, 255, 0.3) !important;
}

.hover-lift .card-img-top {
  transition: opacity 0.3s ease;
}

.hover-lift:hover .card-img-top {
  opacity: 0.9;
}