/** ADD YOUR AWESOME CODES HERE **/


/* Style for the navigation bar container */
.navfoot {
   
    position: relative;
    border: 2px solid white; /* Outer border */
    padding: 20px;
    width: 100%; 
    margin-bottom:20px;
    min-height:150px;
}

/* Style for logo */
    .navfoot .logo img {
        height: 95px;
        position: absolute;
        top: -47.5px;
        left: calc(50% - 67px);
        z-index: 5;
    }

    .navfoot::before {
        content: ""; /* Empty content for the gap */
        position: absolute;
        top: -2px; /* Align with the top border */
        left: 50%; /* Start at the center */
        transform: translateX(-50%); /* Center the gap */
        width: 150px; /* Width of the gap */
        height: 2px; /* Match the border thickness */
        background-color: #231d16; /* Match background color to 'cut' the border */
        z-index: 1;
    }

/* Navigation links container */
.foot-links {
   
    padding:30px 5px;
}

    .foot-links a {
        text-decoration: none;
        color: white;
        font-weight: bold;
        cursor: pointer;
        margin-left:15px;
    }

/* Buttons container */
.buttons {
    position: absolute;
    bottom: 20px; /* Adjust positioning */
    right: 20px;
}

 

/* Define animation */
@keyframes move-border {
    0% {
        border-color: transparent;
    }

    50% {
        border-color: white; /* Visible border */
    }

    100% {
        border-color: transparent;
    }
}


@media (min-width: 320px) and (max-width: 640px) {

    .mobile-only {
        display: block;
    }

    .navbar-expand-lg .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    .desktop-only{
        display:none;
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")
    }
    .navbar-collapse{
        height: 70vh;
        background: #000000f8;
        margin:0;
    }

    .top-navbar .navbar-nav .nav-item.active .nav-link {
        border: none;
        background-color:#1b1b1bff
    }
    .cover-slides h1 {
        font-family: "Bellefair", serif;
        font-weight: 500;
        font-size: 43px;
        color: #fff;
    }

    .cover-slides p {
        font-size: 16px;
        color: #fff;
    }
    .qt-box .btn-outline-new-white {
        margin-top: 20px;
    }

    .maps{
        margin-bottom:20px;
        border-radius:10px;
    }
    footer{
        padding-bottom:100px;
    }
    .foot-menu{
        position:fixed;
        z-index:9998;
        bottom:0;
        width:65%;
        display:flex;
        align-items:center;
        justify-content:center;
        height:60px;
        background-color: #000000f4;
        border-radius: 0 30px 0 0;
    }
    
        .foot-menu button {
            background-color: #2e3032;
            color: white;
            padding: 3px 20px;
            border: none;
            border-radius: 5px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s ease-in-out;
            margin: 3px 5px;
        }
    
    .foot-menu button:hover{
        background-color: #5a6268;
    }
    .foot-menu button:active{
        background-color:#4e555b;
    }

    .rotate {
        width: 50px; /* Adjust the size as needed */
        height: 50px; /* Adjust the size as needed */
        animation: spin 4s linear infinite;
    }

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }


}