@font-face {
    font-family: 'GideonRoman';
    src: url('../fonts/GideonRoman-Regular.ttf') format('truetype');
}

body {
    font-family: 'GideonRoman', sans-serif;
}

.full-screen-image {
    width: 100%;
    height: 90vh;
    /* 100% of the viewport height */
    object-fit: contain;
    /* Ensures the entire image fits within the screen */
    background-color: #fff;
    /* Optional: Sets a background color for empty space */
}

.full-screen-image-1 {
    width: 100%;
    height: 90vh;
    /* 100% of the viewport height */
    object-fit: contain;
    /* Ensures the entire image fits within the screen */
}

.image-container {
    position: relative;
    /* Make this the reference point for the button */
    width: 100%;
    height: 90vh;
    /* Matches the image height */
}

.overlay-button {
    font-family: 'GideonRoman', sans-serif;
    /* Use your custom font, fallback to sans-serif */
    /* background-color: #647c64; */
    background-color: #2f6e53;
    color: #fff;
    /* Ensure text color contrasts with the button */
    margin-top: -65vh;
    margin-left: 28vh;
    padding: 10px 20px;
    /* Add some padding for better appearance */
    transform: translateY(-50%);
    z-index: 1;
    border: none;
    /* Remove default borders */
    border-radius: 5px;
    /* Slightly rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    /* Shadow effect */
    cursor: pointer;
    /* Pointer cursor on hover */
    transition: box-shadow 0.3s ease;
    /* Smooth shadow transition */
}


/* Media query for small screens */

@media (max-width: 768px) {
    .overlay-button {
        margin-top: -70vh;
        transform: translateY(-50%) scale(0.8);
        /* Scale down the button */
        margin-left: 20vh;
        /* Adjust margin for small screens */
        padding: 8px 16px;
        /* Adjust padding */
    }
}

.overlay-button:hover {
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.5);
    /* Stronger shadow on hover */
    background-color: #556c55;
    /* background-color: #9abf69; */
    color: #fff;
    /* Slightly darker background on hover */
}

.text-welcome {
    font-family: 'GideonRoman', sans-serif;
    color: #647c64;
}

.welcome-bg {
    background-image: url('../img/backgroundMap.jpg');
    /* Path to your image */
    background-size: cover;
    /* Ensures the image covers the entire container */
    background-position: center;
    /* Centers the image */
    background-repeat: no-repeat;
    /* Prevents tiling */
    position: fixed;
    /* Keeps the background fixed while scrolling */
    top: 0;
    /* Positions it at the top of the page */
    left: 0;
    /* Positions it at the left edge */
    width: 100%;
    /* Ensures it spans the full width */
    height: 100%;
    /* Ensures it spans the full height */
    padding-top: 100px;
    z-index: -1;
    /* Ensures it sits behind all other content */
}

.scrollable-content {
    position: relative;
    /* Positioned relative to the fixed background */
    max-height: 80vh;
    /* Maximum height of the viewport */
    overflow-y: auto;
    /* Enables vertical scrolling */
    padding: 5px;
    border-radius: 10px;
    /* Optional rounded corners */
    overflow-x: hidden;
    /* Prevent horizontal scrolling */
}


/* Hides the scrollbar for most modern browsers */

.scrollable-content::-webkit-scrollbar {
    display: none;
    /* Hides the scrollbar in WebKit browsers (Chrome, Safari) */
}

.scrollable-content {
    scrollbar-width: none;
    /* Hides the scrollbar in Firefox */
}


/* Tooltip Styling */

.image-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.responsive-image {
    width: 100%;
    /* Ensures it scales horizontally */
    height: 100%;
    /* Fills the container's height */
    object-fit: cover;
    /* Keeps the image zoomed in and centered */
    object-position: top;
    /* Aligns the top part of the image */
    border-radius: 10px;
    /* Maintains the rounded corners */
}

.mapbtn {
    background-color: #3d523d;
    border-radius: 10px;
    position: relative;
    display: inline-block;
}

.mapbtn:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.tooltip-text {
    visibility: hidden;
    width: 120px;
    background-color: #3d523d;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 8px;
    position: absolute;
    bottom: 110%;
    /* Position above the button */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 1;
}

.circular-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* background-color: #4c614c; */
    background-color: #9abf69;
}

.circular-btn:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.circular-btn-container {
    display: flex;
    /* Arrange buttons horizontally */
    gap: 20px;
    /* Add spacing between buttons */
    justify-content: center;
    /* Center the buttons horizontally */
    align-items: center;
    /* Align the buttons vertically */
}

.circular-btn-play {
    width: 80px;
    /* Adjust the size of the circle */
    height: 80px;
    /* Same as width to maintain circular shape */
    border-radius: 50%;
    /* Makes the button a circle */
    background-color: #3d523d;
    /* Button background color */
    display: flex;
    /* Centers content inside the button */
    justify-content: center;
    /* Centers content horizontally */
    align-items: center;
    /* Centers content vertically */
    border: none;
    /* Removes default border */
    transition: background-color 0.3s ease;
    /* Smooth transition for hover/active states */
    padding: 0;
    /* Removes padding to fit the image perfectly */
    overflow: hidden;
    /* Ensures the image doesn’t overflow the button */
}

.circular-btn img {
    width: 100%;
    /* Makes the image size match the button */
    height: 100%;
    /* Ensures the image is not distorted */
    object-fit: cover;
    /* Ensures the image covers the button without stretching */
    border-radius: 50%;
    /* Ensures the image also has a circular shape */
}

.circular-btn-play img {
    width: 100%;
    /* Makes the image size match the button */
    height: 100%;
    /* Ensures the image is not distorted */
    object-fit: cover;
    /* Ensures the image covers the button without stretching */
    border-radius: 50%;
    /* Ensures the image also has a circular shape */
}

.circular-btn {
    position: relative;
    width: 80px;
    /* Adjust the size of the circle */
    height: 80px;
    /* Same as width to maintain circular shape */
    border-radius: 50%;
    /* Makes the button a circle */
    /* background-color: #c4c4c4; */
    background-color: #3d523d;
    /* Button background color */
    display: flex;
    /* Centers content inside the button */
    justify-content: center;
    /* Centers content horizontally */
    align-items: center;
    /* Centers content vertically */
    border: none;
    /* Removes default border */
    transition: background-color 0.3s ease;
    /* Smooth transition for hover/active states */
    padding: 0;
    /* Removes padding to fit the image perfectly */
    /* overflow: hidden; */
    /* Ensures the image doesn’t overflow the button */
}

.circular-btn:hover .tooltip-text {
    visibility: visible;
    /* Show the tooltip */
    opacity: 1;
    /* Make it fully opaque */
}

.active {
    background-color: #3d523d;
    /* Darker shade for active state */
}

.back-to-menu {
    background-color: #3d523d;
    position: fixed;
    right: -5px;
    bottom: 90px;
    transition: 0.5s;
    z-index: 99;
}