/* styles.css */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;800&display=swap');

@font-face {
    font-family: 'Poppins';
    src: url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;800&display=swap');
    font-display: swap; /* Use swap to prevent font loading issues */
}

:root {
    --debug-border: 0px solid rgb(255, 0, 0);
    --banner-background-color: black;
    --background-color: rgb(222, 228, 233);
    --highlight-background-color: rgb(224, 224, 224);
    --title-text-color: #333;
    --title-text-bold-color: rgb(81, 81, 81);
    --highlight-block-text-color: rgb(50, 50, 50);
    --line-separator: 1px solid grey;
    --link-text-color: rgb(0, 179, 255);
}

body, html {
    font-family: 'Poppins', sans-serif;
    background-color: var(--background-color);
    height: 100%;
    padding: 0px;
    margin: auto;
    overflow-x: hidden;
}

h1 {
    color: var(--title-text-color);
}

h4 {
    color: var(--title-text-color); 
}

p {
    color: var(--highlight-block-text-color);
}

.navigation {
    background-color: rgb(40, 176, 255);
}

.navigation nav {
    display: flex;
    justify-content: space-between;
    max-width: 1280px;
    margin: auto;
    flex-wrap: wrap;
    gap: 25px;
}

.navigation ul {
    border: var(--debug-border);
    list-style-type: none; /* Remove bullets */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    overflow: hidden; /* Contain the floating elements */
    max-width: 1280px;
    display: flex;
    flex-wrap: wrap;
}

.navigation li {
    min-height: 60px;
    /*background-color: #00aaff;*/
}

.navigation li a {
    border: var(--debug-border);
    /*background-color: red;*/
    display: block;
    height: 100%;
    color: rgb(255, 255, 255);
    text-decoration: none; /* Remove underline */
    font-weight: bold; 
    padding: 0px 25px;
    align-content: center;
}

.navigation li a:hover {
    border: var(--debug-border);
    background-color: #8b8b8b; /* Change background on hover */
}

.navigation li a.active {
    background-color: #272b2a; /* Change background to indicate active state */
    color: #fff; /* Change text color */
}

.menu {
    border: var(--debug-border);
    list-style-type: none; /* Remove bullets */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    overflow: hidden; /* Contain the floating elements */
    margin: auto;
    max-width: 1280px;
}

.menu li {
    float: left; /* Align menu items horizontally */
    background-color: var(--highlight-background-color);
}

.menu li a {
    display: block;
    color: rgb(0, 0, 0);
    text-align: center;
    padding: 14px 20px; /* Add padding to each link */
    text-decoration: none; /* Remove underline */
    font-weight: bold;
}

.menu li a:hover {
    background-color: #8b8b8b; /* Change background on hover */
}

.menu li a.active {
    background-color: #69a1a8; /* Change background to indicate active state */
    color: #fff; /* Change text color */
}

.hero {
    height: 40vh; /* Full viewport height */
    display: flex;
    justify-content: center;
    margin: auto;
    border: var(--debug-border);
    background-color: var(--banner-background-color);
}

.hero-landing {
    height: 20vh; /* Full viewport height */
    display: flex;
    justify-content: center;
    margin: auto;
    border: var(--debug-border);
    background-color: var(--banner-background-color);
}

.horizontal-gallery {
    padding: 10px;
    height: auto; /* Full viewport height */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    background-color: black;
}

footer a img {
    height: 500px; /* Full viewport height */
}

.hero-image {
    height: 100%; /* Image will scale to match the height of the .hero container */
    z-index: 1; /* Push the image behind the text */
}

.hero-text {
    margin: auto;
    border: var(--debug-border);
    padding: 5px 25px;
    text-align: center;
    background-color: var(--highlight-background-color);
    max-width: 1000px;
    font-size: 1.2em;
}

.hero-text .subscribe-form {
    margin: auto;
    padding-top: 3px;
}

.hero h1 {
    font-size: 4em;
    margin: 0;
}

.hero p {
    font-size: 1.5em;
}

.article-block {
    max-width: 800px;
    margin: auto;
    padding: 25px;
}

.article-link {
    border-bottom: var(--line-separator);
    display: flex;
    flex-direction: row;
    text-decoration: none;
    max-height: 50vh;
    padding: 10px 10px
}

.cut-text { 
    text-overflow: ellipsis;
    overflow: hidden;
}

.article-text-container {
    border: var(--debug-border);
    display: flex;
    flex-direction: column;
    text-align: left;
    width: 70%;
    padding: 10px 10px;
    max-height: auto;
}

.article-title {
    padding-bottom: 10px;
    font-size: larger;
    font-weight: bold;
    color: black;
}

.article-description {
    color: var(--highlight-block-text-color);
    font-size: medium;
}

.article-preview {
    color: var(--highlight-block-text-color);
    font-size: small;
    text-overflow: ellipsis;
    overflow: hidden;
}

.article-image-container {
    border: var(--debug-border);
    text-align: right;
    padding: 10px 10px;
    width: 30%;
}

.article-image {
    display: block;
    margin: auto;
    max-width: 100%;
    max-height: 50vh;
}

/*.article-block a:nth-child(3n) {

}*/

.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-evenly;
    background-color: black;
    padding: 10px;
}

.gallery-item {
    display: flex;
    flex-direction: column;
    height: 300px; /* Total height of image and button */
}

.gallery-item img {
    height: 90%; /* Image takes 90% of the height */
    max-height: 540px; /* Ensure the image doesn't exceed 540px */
    object-fit: cover;
}

.gallery-item iframe {
    height: 90%; /* Image takes 90% of the height */
    max-height: 270px; /* Ensure the image doesn't exceed 540px */
    object-fit: cover;
}

.gallery-item-signup-btn {
    height: 10%; /* Button takes 10% of the height */
    max-height: 60px; /* Ensure the button doesn't exceed 60px */
    background-color: #00aaff;
    text-align: center;
    color: rgb(255, 255, 255);
    font-size: small;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.signup-btn:hover {
    background-color: #008ecc;
    color: white;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #00aaff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 5px;
    font-size: 24px;
    border-style: none;
}

.input-field {
    display: inline-block;
    padding: 10px 20px;
    background-color: #ffffff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 5px;
    font-size: 24px;
    border-style: none;
}

.btn:hover {
    background-color: #42d6ff;
}

.content {
    margin: auto;
    border: var(--debug-border);
    padding: 25px;
    background-color: #ffffff;
    max-width: 800px;
}

.content h2 {
    font-size: 2.25rem;
    color: var(--title-text-color);
    text-align: left;
    margin: 1px;
    font-weight: bolder;
}
.content h3 {
    font-size: 1.5rem;
    font-weight: 200;
    color: var(--title-text-color);
    text-align: left;
    margin: 1px;
}

h3 b {
    color: var(--title-text-bold-color);
}

.content p {
    font-size: 1rem;
    color: #666;
    line-height: 1.8;
    margin-bottom: 0px;
}

.content-landing {
    margin: auto;
    border: var(--debug-border);
    padding: 25px;
    background-color: #ffffff;
    max-width: 600px;
}

.content-landing h2 {
    font-size: 2.5em;
    color: var(--title-text-color);
    text-align: center;
    margin: 1px;
}

.content-landing h3 {
    font-size: 1.75em;
    font-weight: 200;
    color: var(--title-text-color);
    text-align: center;
    margin: 1px;
}

.content-landing p {
    font-size: 1.2em;
    color: #666;
    line-height: 1.8;
    margin: 1px;
    padding: 5px;
}

.table-landing {
    border-collapse: collapse;
    font-size: 1.2em;
    color: #666;
}

.table-landing tr th {
    width: 20%;
    padding: 0.5em;
    border-color: var(--highlight-background-color);
    border-width: 2px;
    border-style: solid;
}

.table-landing tr td {
    padding: 0.5em;
    border-color: var(--highlight-background-color);
    border-width: 2px;
    border-style: solid;
}

/*.article-block {
    border: var(--debug-border);
    max-width: 800px;
    height: 200px;
    margin: auto;
    padding: 25px;
}
.article-block a {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}*/

.article-block h3 {
    font-size: 1.5em;
    color: #3e3e3e;
    line-height: 1.8;
    margin-bottom: 0px;
}

.article-block p {
    font-size: 1.2em;
    color: #3e3e3e;
    line-height: 1.8;
    margin-bottom: 0px;
}

.article-block li {
    font-size: 1.2em;
    color: #3e3e3e;
    line-height: 1.8;
    margin-bottom: 0px;
}

.article-block b {
    font-size: 1em;
    color: #3e3e3e;
    line-height: 1.8;
    font-weight: bold;
}

.spacer-small {
    height: 10px;
    width: 10px
}

.spacer-medium {
    height: 25px;
    width: 25px
}

.spacer-large {
    height: 50px;
    width: 50px
}

.line-small {
    margin: auto;
    height: 3px;
    max-width: 600px;
    background-color: var(--highlight-background-color);
    align-content: center;
}

.centered {
    margin: auto;
    border: var(--debug-border);
    padding: 5px 25px;
    text-align: center;
    max-width: 1000px;
    font-size: 1.2em;
}

.calendar {
    width: 800px;
    height: 600px;
}

.responsiveCal {
    position: relative; padding-bottom: 75%; height: 0; overflow: hidden;
}
     
.responsiveCal iframe {
position: absolute; top:0; left: 0; width: 100%; height: 100%;
}

@media all and (min-width: 768px) {
    .deskContent {display:block;}
    .phoneContent {display:none;}
}

@media all and (max-width: 767px) {
    .deskContent {display:none;}
    .phoneContent {display:block;}
}

.fa {
  padding: 20px;
  font-size: 20px;
  width: 20px;
  height: 20px;
  text-align: center;
  text-decoration: none;
  margin: 4px 4px;
  border-radius: 50%;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-google {
  background: #dd4b39;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

.fa-pinterest {
  background: #cb2027;
  color: white;
}

.fa-snapchat-ghost {
  background: #fffc00;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.fa-skype {
  background: #00aff0;
  color: white;
}

.fa-android {
  background: #a4c639;
  color: white;
}

.fa-dribbble {
  background: #ea4c89;
  color: white;
}

.fa-vimeo {
  background: #45bbff;
  color: white;
}

.fa-tumblr {
  background: #2c4762;
  color: white;
}

.fa-vine {
  background: #00b489;
  color: white;
}

.fa-foursquare {
  background: #45bbff;
  color: white;
}

.fa-stumbleupon {
  background: #eb4924;
  color: white;
}

.fa-flickr {
  background: #f40083;
  color: white;
}

.fa-yahoo {
  background: #430297;
  color: white;
}

.fa-soundcloud {
  background: #ff5500;
  color: white;
}

.fa-reddit {
  background: #ff5700;
  color: white;
}

.fa-rss {
  background: #ff6600;
  color: white;
}

.code-block {
    color: white;
    font-size: 1.5em;
    background-color: black;
    display: block;
    white-space: pre-wrap;
}