/* Color declaration */
:root {
    --primary: #524A54;
    --secondary: #DFDFDF;
    --accent: #376F3D;
    --black: #2F302F;
    --white: #fff;
    --grey: #545048;
}

/* Font Declaration */
h1 {
    font-family: 'Raleway', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 3.0519rem;
}

h2{
    font-family: 'Raleway', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 2.4413rem;
}

h3{
    font-family: 'Raleway', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 1.9531rem;
}

h4{
    font-family: 'Raleway', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 1.5625rem;
}

h5{
    font-family: 'Lusitana', serif;
    font-style: normal;
    font-weight: bold;
    font-size: 1.25rem;
}

p {
    font-family: 'Lusitana', serif;
    font-style: normal;
    font-weight: normal;
    font-size: 1rem;
    line-height: 165%;
}

small {
    font-family: 'Lusitana', serif;
    font-style: normal;
    font-weight: bold;
    font-size: 0.8rem;
}


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

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

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

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

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


/* Button Declaration */
.button-layout {
    background-color: var(--accent);
    border-radius: 5px;
    color: var(--secondary);
    padding: 8px 24px;
    text-align: center;
    font-family: 'Lusitana', serif;
    font-style: normal;
    font-weight: bold;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .5s ease !important;
}

.button-layout:hover {
    color: var(--white);
}
/* Utils */
.border-accent-icon {
    width: 25px;
    height: 25px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.border-accent {
    width: 400px;
    height: 17px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 12px;
}

/* Navbar */
.navbar-logo {
    width: auto;
    height: auto;
}
/* Navbar */


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

/* Content 1 */
#content1 {
    background: url(../assets/img/c1-bg.jpg) no-repeat bottom;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    object-fit: fill;
    height: auto;
}

.c1-image-wrapper {
    background-color: var(--secondary);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

.c1-image {
    width: 80px;
    height: 80px;
}


/* Content 2 */
.c2-accent-top {
    position: absolute;
    right: 0;
    top: -5%;
}

.c2-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

/* Content 3 */
.c3-accent-top {
    position: absolute;
    left: 0;
    top: 0;
}

.c3-accent-bottom {
    position: absolute;
    right: 0;
    bottom: -20%;
    z-index: -1;
}

/* Content 4 */
#content4 {
    background: url(../assets/img/c4-bg.jpg) no-repeat bottom;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    object-fit: fill;
}

.c4-card {
    background-color: var(--secondary);
}

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

.footer-hr {
    border-top: 1px solid vaR(--black);
}

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

    h1 {
        font-size: 2.027rem;
    }

    h2 {
        font-size: 1.802rem;
    }

    h3 {
        font-size: 1.602rem;
    }

    h4 {
        font-size: 1.424rem;
    }

    h5 {
        font-size: 1.266rem;
    }

}

@media only screen and (max-width: 998px) {
    #layoutDefault,
    #layoutDefault_footer {
        overflow-x: hidden;
    }

    .background-header {
        height: 100%;
    }

    .page-header {
        padding-top: 1rem;
    }

    #content1 {
        height: 100%;
    }

    .border-accent {
        width: 100%;
    }

    .c2-accent-top {
        z-index: -1;
    }

    .c3-image {
        width: 100%;
        height: 30vh;
        object-fit: cover;
        margin-bottom: 2rem;
    }

    .c2-container img {
        width: 100%;
        height: 35vh;
        object-fit: cover;
    }
}

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

    /* Content 2 */
    .c2-container {
        opacity: .25;
        transition: all 400ms linear;
    }

    .c2-container:hover {
        opacity: 1;
        transition: all 400ms linear;
    }

    .c2-button {
        opacity:0;
        visibility: visible;
        transition: all 500ms linear;
    }

    .c2-container:hover .c2-button {
        visibility: visible;
        opacity: 1;
        transition: all 500ms linear;
    }

    /* Content 3 */
    .c3-image {
        filter: grayscale(100%);
        transition: all linear 400ms;
        margin-bottom: 1.875rem;
    }

    .c3-image:hover {
        filter: grayscale(0);
        transition: all linear 400ms;
    }

}