/*Google Fonts Delius Swash Caps*/
@import url('https://fonts.googleapis.com/css2?family=Delius+Swash+Caps&display=swap');

/*CSS Variable*/
:root {
    --primary-font: "Delius Swash Caps", serif;
    --secondary-font: "Delius Swash Caps";
    --primary-color: #43540d;
    /* green */
    --secondary-color: #43372e;
    /* brown */
    --highlight-color: #866FAC;
    /* purple */
    --highlight-color-light: #D4D3D3;
    /* light grey */
}

/*Global styles*/
body {
    background-color: var(--highlight-color-light);
    font-family: "Delius Swash Caps", sans-serif, Arial, sans-serif;
    color: var(--secondary-color);
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

main {
    display: flex;
    width: 100%;
    min-height: 70vh;
    /* Fixing position of footer on Success Page*/
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

h2 {
    color: var(--primary-color);
    font-family: var(--primary-font);
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

h3 {
    color: #2b3606;
    font-family: var(--primary-font);
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

h1 {
    color: var(--primary-color);
    font-size: 35px;
    font-weight: bolder;
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

p {
    color: var(--secondary-color);
    font-family: var(--secondary-font);
    text-align: center;
    max-width: 1000px;
}


footer {
    background-color: #64625e;
    bottom: 0;
    width: 100%;
}




/*Fixing bootstrap row design, so everything will be in center*/
.row {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
}

/*Navigation styles*/
#navbar {
    background-color: #64625e;
}

.logo {
    max-height: 45px;
}

/*Button on Navigation panel*/
.navbar-custom-button-field {
    border: 2px solid var(--highlight-color-light);
    background-color: var(--highlight-color-light);
    color: var(--secondary-color);
}

.navbar-custom-button-field:hover {
    border: 2px solid #E2D0FF;
    background-color: #E2D0FF;
    color: var(--secondary-color);
}

.nav-link {
    color: var(--highlight-color-light);
}

.nav-link:hover {
    color: #E2D0FF;
}

.active {
    color: #E2D0FF !important;
}

/*Home Page*/
/*Main body*/
/*Hero section*/
#hero .custom-h1 {
    font-size: 30px;
    font-weight: normal;
    color: #E2D0FF;
}

.custom-h2 {
    font-size: 2em;
    font-weight: bold;
}

#hero {
    height: 650px;
    width: 100%;
    background: url("../images/bouquet-168831_1280.jpg") no-repeat center center/cover;
    /*Position relative, so I can place text on top*/
    position: relative;
    margin-top: 50px;
}

.italic {
    font-style: italic;
    color: var(--highlight-color-light);
}

#cover-text {
    background-color: rgba(48, 46, 47, 0.509);
    /*Position Absolute so I can add it on top of the background*/
    position: absolute;
    padding: 0;
    bottom: 0px;
}

#cover-text>h2 {
    color: #E2D0FF;
    padding: 0;
    bottom: 0px;
    padding-top: 1rem;
    padding-left: 0.5rem;
}

/*Intro section*/
#intro {
    padding: 1rem 0.5rem;
    margin: 1rem 1.5rem;
}

#intro>p {
    text-align: center;
}

/*Courses section*/
#courses {
    margin-bottom: 2rem;
}

#courses h2 {
    padding-bottom: 2rem;
    padding-top: 5rem;
    margin-top: 0rem;
}

.card {
    margin-bottom: 1rem;
    padding: 0.5rem 0.5rem;
    text-align: center;
    background-color: rgba(97, 79, 105, 0.35);
    height: 550px;
}

.row-full {
    gap: 20px;
}

.card-body {
    min-height: 317px;
    padding: 0.5rem 0.5rem;

}

/*Buttons design for Home/Gallery/Sign Up Pages*/
.custom-button-field {
    display: block;
    margin: 0 auto;
    margin-top: 4rem;
    margin-bottom: 4rem;
    width: auto;
    max-width: fit-content;
    border: 2px solid rgba(97, 79, 105, 0.35);
    color: var(--secondary-color);
}

.custom-button-field:hover {
    border: 2px solid rgba(97, 79, 105, 0.35);
    background-color: rgba(173, 147, 179, 0.39);

}

/*Footer*/
/*Contact Section*/
#contacts h2,
h4 {
    color: #E2D0FF;
}

#contacts h2 {
    margin-top: 1rem;
}

#contacts .contact-info,
#contacts p {
    color: var(--highlight-color-light);
    text-align: center;
}

.contact-us h2,
.contact-us h3 {
    text-align: center;
    color: #E2D0FF;
    margin-top: 2rem;
}

.contact-us {
    order: 2;
    text-align: center;
    margin-top: 1rem;
}

#contacts .custom-link {
    color: #E2D0FF;
    ;
}

#contacts .custom-link:hover {
    color: var(--highlight-color-light);
}

.custom-icon {
    color: #E2D0FF;
    width: 30px;
    height: 30px;
    padding-right: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.custom-icon:hover {
    color: var(--highlight-color-light);
}

.opening-hours h2 {
    text-align: center;
    margin-top: 2rem;
}

.opening-hours {
    text-align: center;
    /*Opening hours will show next after contact information*/
    order: 2;
}

.opening-hours table {
    margin-top: 2rem;
}

table tr td,
table tr th {
    background-color: transparent !important;
    color: var(--highlight-color-light) !important;
}

/*Gallery Page*/
/*Gallery Discription*/
.g-discription {
    margin-top: 85px;
    margin-right: 1.5rem;
    margin-left: 1.5rem;
}

.g-discription>p {
    text-align: center;
    padding-top: 2rem;
    padding-bottom: 1rem;
}

.custom-image {
    width: 100%;
    height: 300px;
    /* one picture has different size */
    object-fit: cover;
}

#pictures {
    margin-bottom: 1rem;
}

#pictures .row {
    margin-top: 3rem;
}

/*This is added to remove all paddings and margins*/

.gallery-row .col-sm-12,
.gallery-row .col-md-6,
.gallery-row .col-lg-4 {
    padding: 0;
    margin: 0;
}

/*Sign Up Page*/
#signUp img {
    max-width: 300px;
    margin-top: 1.5rem;
}

#signUp h1 {
    margin-top: 1rem;
}

#signUp form {
    margin-top: 1rem;
    padding: 1rem;
    text-align: center;
    border: 1px solid #866FAC;
}

#signUp legend {
    padding-top: 1rem;
}

.form-label {
    padding-top: 1rem;
}

#signUp {
    margin-bottom: 1rem;
}

.radio {
    display: flex;
}

/*Success page*/
.success {
    margin-top: 95px;
    padding: 1rem 1.5rem;
}

.success p {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.success .custom-link {
    color: var(--highlight-color);
    ;
}

.success .custom-link:hover {
    color: var(--secondary-color);
}

.success-icon {
    color: var(--highlight-color);
}

footer .success-f {
    min-height: 200px;
}


@media screen and (min-width: 768px) {

    /*Courses Section -to change margin on tablets*/
    .card {
        margin-bottom: 1.5rem;
        width: 21rem !important;
    }

    /*Make  it Invisible on Tablets*/
    .last-image {
        display: none;
    }

    #signUp form,
    #signUp p {
        text-align: left
    }

}

@media screen and (min-width:992px) {

    /*Contact Section- to change the width of cols*/
    .opening-hours {
        width: 35rem !important;
        margin-left: 0rem;
    }


    .contact-us {
        order: 1;
        margin-right: 0rem;
        width: 35rem !important;
    }

    /*Make it visible*/
    .last-image {
        display: block;
    }

    #signUp img {
        max-width: 400px;
    }

}

@media screen and (min-width:1200px) {

    /*Hero Section - to change location or cover-tect on picture*/
    #cover-text {
        padding: 1rem 1rem;
        bottom: 55px;
    }

    /*Courses Section -to change margin on tablets*/
    .card {
        width: 21rem !important;
    }

    .container {
        max-width: 100%;
    }

    #signUp img {
        max-width: 550px;
    }
}