/* 
font-family: 'Cormorant Upright', serif;
font-family: 'Inconsolata', monospace;
font-family: 'Roboto', sans-serif;

font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;

color: #86A8C5; / #001935
*/

html {box-sizing: border-box;}
*, *::before, *::after {box-sizing: inherit;}
* {margin: 0; padding: 0; text-decoration: none; list-style: none;}

body { 
    font-family: "Raleway", sans-serif;
    font-style: normal;
    font-weight: 400;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
    line-height: 30px;
    font-size: 1.2rem;
    letter-spacing: .6px;
}
.responsive {
    max-width: 100%;
    height: auto;
  }


/* -------------------- formating */
.p-h1 {color: #476885; font-size: 0.9rem;}

h2 {
    font-weight: 700;
    color: #001935;
}
h1 {
    font-weight: 700;
    letter-spacing: .05em;
    font-size: 63px;
    line-height: .95em;
    text-align: center;
    margin: 2rem 0;
    text-transform: uppercase;
}
    h1 span {
        display: block;
        font-size: 1rem;
        letter-spacing: .1rem;
        color: #555;
        line-height: 1.54em;
        margin-bottom: 1rem;
    }

h2 {
    font-weight: 300;
    margin-bottom: .5rem;

}

.mg {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.mg-t {margin-top: 2rem;}
.mg-b {margin-bottom: 2rem;}
.vph50 {min-height: 50vh;}

.border-b {padding-bottom: 1rem; border-bottom: 1px solid #333;}
.sf-form {
    background: #80a8c2;
    padding: 2rem;
}
/*about section ---------------------- */

section#about {
    background-color: #eceae6;
    padding: 2rem 0;
}


/* tours -----------------------*/
section#tours {padding: 2rem 0;}
section#tours .tour {padding: 1rem;}
section#tours p {margin-bottom: 1rem;}
    .duration {color:#001935}
section#tours h2 {font-weight: 700;}
    section#tours h2::after {
            content: '';
            display: block;
            width: 60px;
            height: 3px;
            background-color: #001935;
            margin-top: 15px;
        }
section#tours h3 {
    color: #001935;
    text-align: center;
}



@media (max-width: 768px) {
    .exp-row {
        flex-direction: column;
        height: 100vh;
    }
}


/* Styles for the Back to Top button */
#backToTopBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s;
    background: none;
    opacity: .5;
    z-index: 2;
}
    #backToTopBtn:hover {opacity: 1;}

/* lightbox ------------------ */
.thumbnail {cursor: pointer;}
    .thumbnail:hover {
        opacity: .8;
        transition: .5s;
    }

.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    text-align: center;
    z-index: 3;
}

#close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
}

#lightbox-image {
    max-width: 80%;
    max-height: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* disabled link */
#disabled-link, #disabled-link:hover {
    color: #888; /* Set the color for disabled links */
    text-decoration: none; /* Remove the underline */
    cursor: default; /* Change the cursor to indicate it's disabled */
}

/* crop images on mobile */
@media (max-width: 768px) {
    /* Set a fixed size for the square container (adjust dimensions as needed) */
    .square-container {
        width: 200px;
        height: 200px;
        overflow: hidden; /* Hide the overflow content */
        position: relative; /* Required for absolute positioning of the image */
    }

    /* Style the image within the square container */
    .square-container img {
        max-width: 100%; /* Ensure the image doesn't exceed the container width */
        height: auto; /* Automatically adjust the image's height */
        object-fit: cover; /* Crop and center the image within the square */
        position: absolute; /* Allows absolute positioning within the container */
        top: 0;
        left: 0;
        width: 100%; /* Cover the entire square container */
        height: 100%; /* Cover the entire square container */
    }
}

footer {
    line-height: 2.5rem;
    background-color: #001935;
    color: #fff;
    padding: 20px 0;
}
    footer a {color: #fff;}
        footer a:hover {
            color: #86A8C5;
        }
            footer ul li a img:hover {
                opacity: .5;
            }

    footer h3 {
        text-transform: capitalize;
        font-family: 'Roboto', sans-serif;
        font-weight: 600;
        letter-spacing: .1rem;
        padding-bottom: 2px;
        margin-bottom: 30px;
        margin-top:2rem
    }
        footer h3::after {
            content: '';
            display: block;
            width: 60px;
            height: 1px;
            background-color: #aaa;
            margin-top: 15px;
        }
footer .footer-logo img {
    max-width: 70%;
}
    footer .footer-logo img:first-child {
        margin-top: 3rem;
    }

footer .socials ul li {
    display: inline-block;
    margin-right: 15px;
}
footer .socials ul li img {
    max-height: 25px;
}
footer .copy {
    text-align: center;
    border-top: 1px solid #333;
    margin-top: 4rem;
    padding-top: 4rem;
}

    @media (max-width: 768px) {
        footer {text-align: center;}
        footer .footer-logo img {max-width: 50%; margin-top: 0;}
        footer h3::after {
            margin-left: auto;
            margin-right: auto;
        }

    }