html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Slideshow Header */
.homeheader {
    height: 70vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 1s ease-in-out;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    position: relative;
}

/* Navbar */
.navbar-trans {
    font-family: 'Titillium Web', sans-serif;
    background: transparent;
}

/* Logo */
.logo {
    font-family: 'Khand', sans-serif;
}

/* General Container */
.container {
    font-family: 'Titillium Web', sans-serif;
}

/* Map Background */
.map {
    background-image: url(/Template/img/map-bg.png);
    background-size: cover;
    min-height: 350px;
}

/* Card Links */
.card a {
    text-decoration: none;
    color: #475563;
}

/* Contact */
.contact {
    white-space: nowrap;
    overflow: hidden;
}

/* Separators */
.titleseparator {
    border: 1px solid #f2a602;
    width: 5vw;
    margin: 0 auto;
}

.subtitleseparator {
    border: 1px solid #f2a602;
    width: 5vw;
}

/* Icons */
.icons {
    width: 64px;
    height: 64px;
    color: white;
    background-color: #33353a;
    transition: background 0.3s ease-in-out;
}

.icons:hover {
    background-color: #f2a602;
}

/* Footer */
.footer {
    background-color: #303235;
    min-height: 300px;
}

/* Contact Header */
.contactheader {
    background-color: #303235;
    min-height: 25px;
}

/* Small Header */
.smallheader {
    background-image: url(/Template/img/headerbgsm.png);
    background-size: cover;
    height: 130px;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
}

/* Dots for Slide Navigation */
.dots-container {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot.active {
    background-color: rgba(255, 255, 255, 1);
}

.dot:hover {
    background-color: rgba(255, 255, 255, 0.8);
}