/***                                                  Project specific fonts */

/**     Jura */
@import url("https://fonts.googleapis.com/css2?family=Jura:wght@300..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

/**     Josefin Slab */
@import url("https://fonts.googleapis.com/css2?family=Josefin+Slab:ital,wght@0,100..700;1,100..700&family=Jura:wght@300..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
/*****************************************************************************/

/***                                                           Common styles */
body {
    background-color: rgba(180, 155, 44, 0.25);
    overflow-x: hidden;
}
header {
    font-family: "Jura", sans-serif;
    font-optical-sizing: auto;
    font-size: 25px;
    font-weight: bold;
}
footer {
    font-family: "Jura", sans-serif;
    font-optical-sizing: auto;
    font-weight: bold;
    padding: 46px;
}
footer #social {
    margin-top: 28px;
    margin-bottom: 35px;
    opacity: 0.4;
}
footer #footer-header {
    font-size: 30px;
}
footer #footer-copyright {
    font-size: 15px;
}
/*****************************************************************************/

/***                                                     Hero section styles */
.hero {
    background-image: url("../images/Hero.png");
    background-size: cover;
    background-position: center;
    height: 816px;
    z-index: -1;
}
.hero-heading {
    position: relative;
    left: 50%;
    top: 50%;
    top: calc((816px / 2) - 35px);
    transform: translate(-50%, -50%);

    @media (max-width: 991px) {
        position: absolute;
        top: calc((816px / 2) + 35px);
    }
}
.hero-heading > h1 {
    font-family: "Josefin Slab", serif;
    font-optical-sizing: auto;
    font-size: 85px;
}
/*****************************************************************************/

/***                                                     Jobs section styles */
#jobs {
    font-family: "Jura", sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    padding: 46px 112px;

    @media (max-width: 991px) {
        padding: 20px;
    }
}
.job-quote {
    font-size: 43px;
    font-optical-sizing: auto;
    font-weight: normal;
    padding: 46px 65px;
    border-right: 1px solid black;

    @media (max-width: 991px) {
        border-right: none;
        border-bottom: 1px solid black;
        padding-left: 20px;
        padding-right: 20px;
    }
}
.quote-emphasis {
    color: #686931;
    font-weight: bold;
}
.job-details {
    padding: 46px 65px;

    @media (max-width: 991px) {
        padding-left: 20px;
        padding-right: 20px;
    }
}
.job-details > h2 {
    font-weight: bold;
    font-size: 30px;
}
#job-list {
    padding: 40px 0px;
    font-weight: bold;
}
.fancy-corners {
    --b: 10px; /* thickness of the border */
    --c: black; /* color of the border */
    --w: 50px; /* width of border */

    border: var(--b) solid #0000; /* space for the border */
    --_g: #0000 90deg, var(--c) 0;
    --_p: var(--w) var(--w) border-box no-repeat;

    background: conic-gradient(
                from 90deg at top var(--b) left var(--b),
                var(--_g)
            )
            0 0 / var(--_p),
        conic-gradient(from -90deg at bottom var(--b) right var(--b), var(--_g))
            100% 100% / var(--_p);
}
#job-list > ul {
    list-style: none;
    padding-left: 0px;
    margin: 0;
    font-size: 20px;
    font-weight: bold;
}
/*****************************************************************************/

/***                                                  Offices section styles */
#accomodations {
    font-family: "Jura", sans-serif;
    font-optical-sizing: auto;
}
.accomodations-bg {
    position: relative;
    width: 44%;

    @media (max-width: 991px) {
        display: none;
    }
}
.accomodations-bg img {
    display: block;
    width: 100%;
}
.accomodations-cta {
    margin: auto;
    max-width: 48em;
    width: 56%;

    @media (max-width: 991px) {
        width: 100%;
        margin-left: auto;
        padding: 186px 64px 140px 64px;
    }
}
.accomodations-text {
    font-size: 30px;
    max-width: 450px;
}
.btn-accomodations,
.btn-accomodations:hover,
.btn-accomodations:visited,
.btn-accomodations:focus-visible {
    border: 3px solid white;
    border-radius: 35px;
    padding: 18px 85px;
    font-size: 25px;
}
/*****************************************************************************/

/***                                             Destinations section styles */
#destinations {
    font-family: "Jura", sans-serif;
    font-optical-sizing: auto;
}
.destinations-bg {
    position: relative;
    width: 50%;

    @media (max-width: 991px) {
        display: none;
    }
}
.destinations-bg img {
    display: block;
    width: 100%;
}
.destinations-cta {
    margin: auto;
    max-width: 48em;
    width: 50%;

    @media (max-width: 991px) {
        width: 100%;
        margin-left: auto;
        padding: 186px 64px 140px 64px;
    }
}
.destinations-text {
    font-size: 30px;
    max-width: 400px;
}
.btn-destinations,
.btn-destinations:hover,
.btn-destinations:visited,
.btn-destinations:focus-visible {
    border: 3px solid black;
    border-radius: 35px;
    padding: 18px 85px;
    font-size: 25px;
}
/*****************************************************************************/

/***                                                     Blog section styles */
#blog {
    font-family: "Jura", sans-serif;
    font-optical-sizing: auto;
    background-image: url("../images/blog_bg.png");
    background-size: cover;
}
.btn-blog,
.btn-blog:hover,
.btn-blog:visited,
.btn-blog:focus-visible {
    border: 3px solid black;
    border-radius: 35px;
    padding: 18px 85px;
    font-size: 25px;
    margin: 300px auto;
}
/*****************************************************************************/