body {
    font-family: "Theinhardt"; 
}

h1 {
    font-size: 30px;
}

h2 {
    font-size: 24px;
}

h3 {
    font-size: 20px;
}

h4 {
    font-size: 18px;
}

h5 {
    font-size: 16px;
}

h6 {
    font-size: 14px;
}

/* ---- NAVBAR ----*/
.navContainer {
    top: 0px;
    left: 0px;
    width: 100%;
}
nav {
    width: 100%;
    margin: auto;
}
.navbar .nav-link {
    color: #ffffff;
    font-size: 20px;
}
.navbar-light .navbar-nav .nav-link {
    color: #fff;
}
.navbar-light .navbar-nav .nav-link:hover {
    color: #979a96;
}

.navbar.fixed-top {
    transition: background-color 0.3s ease;
}

/* Add styles for the scrolled class */
.navbar.scrolled {
    background-color: #fff;
}

.navbar.scrolled .nav-link {
    color: #000;
}


.button-interest {
    color: #ffffff !important;
    border-width: 0px !important;
    border-radius: 5px;
    font-size: 18px;
    font-weight: 600 !important;
    background-color: #16b595;
    padding: 10px 20px; /* Adjust padding as needed */
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

/* Hover effect */
.button-interest:hover {
    background-color: #2d4e80;
}

.research {
    position: relative;
}

.research-title,
.research-text,
.btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 100%;
}

.research-title {
    top: 40%;
    font-weight: 500;
    font-size: 24px;
    color: #fff;
}

.research-text {
    top: 60%;
    font-weight: 300;
    font-size: 20px;
    color: #fff;
}

.blurb-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background-color: #fff; /* Set your desired background color */
    box-shadow: 0px 4px 15px -10px rgba(0, 0, 0, 0.3);
    transition: transform 300ms ease 0ms;
}

.blurb-container:hover,
.research:hover {
    transform: scale(1.05); /* Adjust the scale factor as needed */
    cursor: pointer;
}

.blurb-image {
    margin-bottom: 15px;
    border-radius: 50%; /* Add border-radius for a circular image */
    overflow: hidden;
    flex-shrink: 0; /* Prevent the image from shrinking */
}

.blurb-image img {
    max-width: 100%;
    height: auto;
    display: block; /* Remove extra space below the image */
}

.blurb-titles {
    text-align: center;
}

.blurb-title {
    text-transform: uppercase;
    font-size: 1.5rem;
    margin-bottom: 0;
}

.col-md-3:nth-of-type(odd) .blurb-container {
    background-color: rgba(22, 181, 149, 0.13);
    border: 1px solid #16b595;
    border-bottom: 10px solid #16b595;
}

.col-md-3:nth-of-type(even) .blurb-container {
    background-color: #fff;
    border: 1px solid #000;
    border-bottom: 10px solid #000;
}

.reservation-title {
    font-size: 1.2rem;
    color: #333; /* Set your desired color */
    margin-top: 0;
}

.logoImage {
    width: 204px;
    height: 79px;
    -webkit-transform: unset;
}

.dropdown-menu.show {
    background-color: #dedede;
    margin-top: 30px;
    border-top: 2px solid #041e3b;
    border-radius: 0;
}

.dropdown-toggle:active {
    color: #dedede;
}

.dropdown-item {
    text-align: center;
    cursor: pointer;
}

.navbar-toggler-icon {
    filter: invert(1);
}

.homepage::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
            138deg,
            rgba(0, 0, 0, 0.21) 1%,
            rgba(22, 181, 149, 0.64) 99%
        ),
        url("/assets/pictures/feel_pocitelj-768x512.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1; /* Ensure the pseudo-element is behind the content */
}

.lrp-background {
    background-color: #2d4e80; /* Set the desired background color */
    height: 15vh; /* Adjust as needed */
    display: flex;
    align-items: center;
    justify-content: center;
}

.homepage h1 {
    font-weight: 700;
    font-size: 70px;
    color: #ffffff;
    line-height: 1.3em;
}

.homepage h2 {
    font-weight: 300;
    text-transform: uppercase;
    font-size: 31px;
    color: #ffffff;
    line-height: 1.4em;
}

.homepage p {
    font-weight: 200;
    font-size: 22px;
    color: #ffffff;
    line-height: 1.4em;
}

.starting_text {
    padding: 170px 0;
}

.starting_image {
    padding: 40px 0;
}

.why_we {
    background: linear-gradient(90deg, #f1f3f8 44%, #2d4e80 44%);
}

.why_we h2 {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 30px;
    color: #000;
    line-height: 1.4em;
}

.why_we h4 {
    font-weight: 300;
    text-transform: uppercase;
    font-size: 20px;
    color: #16b595;
    line-height: 1.3em;
}

.why_we img {
    width: 95px;
    height: 95px;
}

.why_we span {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 18px;
    color: #fff;
    padding: 20px;
}

.why_we h2,
.explore h2,
.about-herzegovina h2 {
    font-weight: 800;
    font-size: 40px;
    color: #000;
    line-height: 1.3em;
}

.why_we h3,
.explore h3,
.about-herzegovina h3 {
    font-weight: 500;
    font-size: 32px;
    color: #16b595;
    line-height: 1.3em;
}

.why_we p,
.explore p,
.about-herzegovina p {
    font-size: 18px;
    color: #000;
    line-height: 1.4em;
}

.about-herzegovina {
    display: flex;
}

.left-column {
    flex: 1; /* Takes up 1/2 of the available space */
}

.right-column {
    flex: 1; /* Takes up 1/2 of the available space */
    padding: 0 40px; /* Adjust padding as needed for more spacing */
    margin-top: 50px; /* Add margin between the columns */
}

footer {
    background-color: #2d4e80;
    color: #fff;
    padding: 20px 0;
}

footer a {
    text-decoration: none;
    color: #fff;
    line-height: 0.9em;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 18px;
    line-height: 0.9em;
}

.footer-heading {
    font-weight: bold;
    font-size: 18px;
}

.footer-menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.footer-menu li {
    margin-bottom: 8px;
}

/* Style for the first section in the footer */
footer .col-md-3 div {
    /* Your styles here */
}

@media (max-width: 1199.98px) {
    .why_we span {
        padding: 25px;
    }
}

@media (max-width: 991.98px) {
    .why_we span {
        padding: 25px;
    }
}

@media (max-width: 767.98px) {
    .starting_text {
        padding: 100px 0; /* Adjust padding for xs */
    }

    .starting_image {
        padding: 20px 0; /* Adjust padding for xs */
    }
}

@media (max-width: 575.98px) {
    /* Styles for extra-small devices (xs) */
    .homepage h1 {
        font-size: 40px; /* Adjust font size for xs */
    }

    .footer h1 {
        font-size: 40px; /* Adjust font size for xs */
    }

    .homepage h2 {
        font-size: 20px; /* Adjust font size for xs */
    }

    .homepage p {
        font-size: 16px; /* Adjust font size for xs */
    }

    .starting_text {
        padding: 100px 0; /* Adjust padding for xs */
    }

    .starting_image {
        padding: 20px 0; /* Adjust padding for xs */
    }

    .button-interest {
        /* Add any additional styling for your button */
        display: block; /* Makes the button a block-level element */
        text-align: center;
    }

    .why_we {
        background: linear-gradient(
            180deg,
            #f1f3f8 44%,
            #2d4e80 44%
        ) !important;
        text-align: center;
    }

    .why_we img {
        width: 46px;
        height: 46px;
    }

    .why_we h2 {
        font-size: 28px; /* Adjust font size for xs */
    }

    .why_we h4 {
        font-size: 20px; /* Adjust font size for xs */
    }

    .why_we span {
        font-size: 14px; /* Adjust font size for xs */
    }

    .explore h2 {
        font-size: 28px; /* Adjust font size for xs */
    }

    .about-herzegovina {
        flex-direction: column; /* Stack columns on small devices */
    }

    .right-column {
        padding: 0; /* Remove padding on small devices */
        margin-top: 20px; /* Adjust margin for spacing on small devices */
    }
}