/* Color declaration */
:root {
    --primary: #C4A235;
    --secondary: #FED348;
    --black: #3A3A3A;
    --white: #fff;
}

html {
    background-color: #161616;
}

/* Font Declaration */
.font-48px {
    font-family: 'Playfair Display', serif;
    font-style: normal;
    font-weight: 700;
    font-size: 3.0519rem;
}

.font-39px{
    font-family: 'Playfair Display', serif;
    font-style: normal;
    font-weight: 700;
    font-size: 2.4413rem;
}

.font-31px{
    font-family: 'Source Sans Pro', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 1.9531rem;
}

.font-25px{
    font-family: 'Source Sans Pro', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 1.5625rem;
}

.font-20px{
    font-family: 'Source Sans Pro', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 1.25rem;
}

.font-16px {
    font-family: 'Source Sans Pro', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 165%;
}

.font-13px {
    font-family: 'Source Sans Pro', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 0.8rem;
}


/* text color declaration */
.color-primary {
    color: var(--primary);
}

.color-secondary {
    color: var(--secondary);
}

.color-white {
    color: var(--white);
}

.color-black {
    color: var(--black);
}

/* Button Declaration */
.button-layout {
    background-color: var(--secondary);
    border-radius: 5px;
    color: var(--black);
    padding: 0.5rem 1.5rem;
    text-align: center;
    font-family: 'Source Sans Pro', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 1.25rem;
    transition: .2s ease-in-out;
}

/* Utils */
html {
    scroll-behavior: smooth;
}

/* Navbar */
.nav-logo-container {
    padding: 10px;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    background-color: var(--white);
    border: 2px solid var(--secondary);
}

.navbar-scrolled {
    background-color: #161616 !important;
}

.nav-item .nav-link {
    color: var(--white);
    font-family: 'Source Sans Pro', sans-serif;
    font-style: normal;
    font-weight: 400 !important;
    font-size: 1rem;
    line-height: 165%;
}

.nav-item .nav-link:hover {
    color: var(--secondary);
    transition: .3s ease;
}

/* Header */
.header-bg {
    background: url(../img/home/bg-header.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    object-fit: fill;
    height: 100vh;
}

.header-hr {
    border-top: 1px solid var(--secondary);
    width: 10%;
}

.header-card {
    border: 2px solid var(--secondary);
    border-radius: 5px;
}

/* Content 1 */
.c1-image {
    border: 3px solid var(--secondary);
    border-radius: 5px;
}

.c1-accent {
    position: absolute;
    top: 25%;
}


/* Content 2 */
.c2-card {
    border: 3px solid var(--secondary);
    border-radius: 5px;
}

.c2-aside-link {
    border-radius: 0 !important;
    color: var(--black);
    font-family: 'Source Sans Pro', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 1.25rem;
    padding-top: 16px;
    padding-bottom: 16px;
}

.c2-aside-link:hover {
    color: var(--primary);
}

.c2-aside-link.active {
    background-color: var(--primary) !important;
    color: var(--white) !important;
}

/* Content 3 */
#content3 {
    background: url(../img/home/c3-bg.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    object-fit: fill;
}

.c3-logo-container {
    width: 167px;
    height: 167px;
    padding: 15px;
    border-radius: 50%;
    background-color: var(--white);
    border: 2px solid var(--secondary);
}

/* Content 4 */
.c4-hr {
    border-top: 1px solid var(--secondary);
    width: 50%;
}

.c4-arrow-container {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background-color: var(--secondary);
    transition: .3s ease-in-out;
    cursor: pointer;
}

.c4-accent {
    position: absolute;
    right: 0;
}

/* Content 5 */
.c5-hr {
    border-top: 1px solid var(--secondary);
    width: 50%;
}

.c5-accent {
    position: absolute;
    left: 29%;
    bottom: -9%;
    z-index: -1;
}

.c5-maps {
    height: 50vh;
    width: 100%;
}

/* Footer */
footer {
    background-color: var(--secondary);
}

.footer-logo-container {
    padding: 5px;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    background-color: var(--white);
    border: 2px solid var(--primary);
}

@media only screen and (max-width: 767px) {

    .font-48px {
        font-size: 2.027rem;
    }

    .font-39px {
        font-size: 1.802rem;
    }

    .font-31px {
        font-size: 1.602rem;
    }

    .font-25px {
        font-size: 1.424rem;
    }

    .font-20px {
        font-size: 1.266rem;
    }

    .nav-logo-container {
        width: 90px;
        height: 90px;
    }

    .c3-title {
        font-size: 1.6rem;
    }

    .c5-maps {
        height: 40vh;
        width: 100%;
        object-fit: cover;
    }

}

@media only screen and (max-width: 967.98px) {

    #layoutDefault, #layoutDefault_footer {
        overflow-x: hidden;
    }

    /* Navbar */
    .bg-transparent {
        background-color: #161616 !important;
    }

    .navbar {
        padding-top: .5rem;
        padding-bottom: .5rem;
    }

    .slick-dots li.slick-active button::before {
        color: var(--secondary) !important;
        opacity: 1 !important;
    }

    .slick-dots li button::before {
        color:var(--white) !important;
    }

    /* Content 1 */
    .c1-image {
        width: 100%;
        height: 40vh;
        object-fit: cover;
        object-position: top;
    }

    /* Content 2 */
    .c2-content-image {
        width: 100%;
        height: 30vh;
        object-fit: cover;
    }

    .c2-mobile-accordion {
        border: 5px solid var(--secondary);
        border-radius: 12px;
    }

    .c2-mobile-card {
        box-shadow: unset;
        border-bottom: 3px solid var(--secondary) !important;
    }

    .c2-mobile-card:last-of-type {
        border-bottom: 0 !important;
    }

    .c2-mobile-card-title {
        font-size: 1.125rem;
        font-weight: 600;
    }

    .c2-card-header {
        background-color: #fffaea !important;
    }


}

@media (hover: hover) and (pointer:fine) {

    /* Navbar */
    .nav-phone {
        transition: .2s ease-in-out;
    }

    .nav-phone:hover {
        color: var(--primary);
        transition: .2s ease-in-out;
    }

    .button-layout:hover {
        color: var(--black);
        background-color: var(--primary);
        transition: .2s ease-in-out;
    }

    .c4-arrow-container:hover {
        background-color: var(--primary);
        transition: .3s ease-in-out;
    }

}