/* Google font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* header */
:root {
    /** Fonts */
    --title: 'EB Garamond', serif;
    --main-font: 'Roboto', serif;

    /* Colours */
    --background: #3f006a0f;
    --blue: #0d6efd;
    --black: #000;
    --off-white: #f6f6f6;
    --white: #fff;
    --orange: #ffbf50;

    /* Utils */
    --smal-box-shadow: 1px -1px 7px 0 #00000061;
    --border: 1px solid #00000030;
}

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    font-family: var(--main-font);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--title);
}

main {
    flex: 1 0 auto;
    background-color: var(--orange);
}

.card-image {
    
    width: 30%;
    height: 20%;
    max-width: 50%;
    max-height: 40%;
    padding: 0 0 1px 0;
}

.card-body {
    text-align: center;
    background-color: rgb(248, 243, 238);

}


/* Footer */
footer {
    flex-shrink: 0;
    background-color: var(--off-white);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-top: var(--border);
}

.social-icon {
    height: 2rem;
    margin: 1rem;
}



/* Header */
.navbar {
    background-color: var(--off-white);
    box-shadow: var(--smal-box-shadow);
}

a.nav-link {
    color: var(--black);
}

img.logo {
    width: 18.75rem;
    
}

.active {
    border-bottom: 2px solid var(--blue);
    font-weight: 500;
}

/* Form */

.form {
    width: 100%;
    margin: 3% auto;
    box-shadow: var(--smal-box-shadow);
    border-radius: 5px;
}

/* hompage */

.container-fluid {
    position: relative;
    text-align: center;
    z-index: 1;
    background-color: var(--orange);
    margin-bottom: 20px;
}

.image-container img {
    position: relative;
    height: 30%;
    width: 100%;
    max-height: 25rem;
    object-fit: cover;
    left: 0;
    margin: 0;
    padding: 0;
}

.washer img{
    position: relative;
    height: 40%;
    width: 30%;
    max-height: 30rem;
    align-self: center;
}

.washer p{
    margin-top: 5px;
    font-style: italic;
}