html {
    font-size: 62.5%; /*this make the default font size 10px*/
}
body {
    background-color: #e4beb8; 
    color: white;
    font-family: "Neucha", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    }

/*Top bar*/
.top-bar {
    background-color: #445974;
    width: 100%;
    height: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
}
h1 {color: white;
    font-size: 6rem;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    padding: 0 10px 0 10px;
    }
/*Introduction section*/
.introduction-container {
    width: 75%;
    display: flex;
    margin: 10px auto;
    border: 5px white;
}
.HSB-logo {
    height: 20vw;
}
.introduction-logo-container {
    border: green 5px;
    width: 50%;
    margin: auto;
    display: flex;
    justify-content: space-evenly;
}
.introduction-text-container {border: grey 5px;
        width: 100%;
        align-content: center;
        text-align: center;
    }
.introduction-title {
    font-size: 4rem;
    font-weight: bold;
    margin: 30px 0 30px 0;
    padding: 0 5px 0 5px;
}
.introduction-paragraph {
    font-size: 2.5rem;
    margin: 10px 20px  20px;
    flex-wrap: wrap;
}
/*gallery*/
.gallery-background {
    background-color: #b8cee6;
    width: 100%;
    }
.gallery-container {border: white 5px;
    width: 75%;
    margin: auto;
    align-content: center;
}
.gallery-text {
    margin: auto;
    padding: 20px 0 20px 0;
    text-align: center;
    font-size: 3rem;
    font-weight: bold;
}
/*Swiper CSS*/
.swiper {
    width: 50vw;
    height: 60vh;
}
.swiper-main-container {
    display: flex;
    align-items: center;
    align-content: center;
}
.swiper-slide img {
    height: 50vh;
    margin: auto;
    display: flex;
    align-items: center;
    align-content: center;
}
.swiper .swiper-button-prev, .swiper .swiper-button-next {
    color: #ffffff
}
.swiper .swiper-pagination-bullet-active {
    background: #ffffff;
}
/*profile sections*/
.profile-background {
    width: 100%;
    padding: 15px 0 15px 0;
}
.profile-container {border: #ffffff 5px;
    width: 75%;
    margin: auto;
}
.profile-pic-container {
    width: 100%;
    margin: auto;
}
.profile-container img {
    max-height: 50vh;
    margin: auto;
    padding: 0 0 10px 0;
}
.profile-text-box {
    width: 50%;
    margin: auto;
    text-align: center;
    font-size: 2.5rem;
}
.profile-title {border: blue 5px;
    font-size: 4rem;
    font-weight: bold;
    margin: 30px 0 30px 0;
    padding: 0 5px 0 5px;
}
/*contact us*/
.contact-us-background {
    background-color: #b8cee6;
    width: 100%;
}
.contact-us-container {border: white 5px;
    width: 75%;
    margin: auto;
    padding: 10px;
}
.contact-us-text {
    margin: auto;
    margin-top: 30px;
    margin-bottom: 20px;
    width: 100%;
    font-size: 2.5rem;
    text-align: center;
    align-content: center;
    border: green 5px;}
/*Email Button*/
.button-container {
        margin: auto;
        display: flex;
        justify-content: center;
    }
    .email-btn {
        border: solid #445974 5px;
        background-color: #445974;
        border-radius: 10px;
        width: 15vw;
        height: 10vh;
        color: white;
        font-size: 3rem;
        text-align: center;
        cursor: pointer;
        margin-bottom: 30px;
    }
/*footer*/
footer {background-color: #cec1b8;
    color: black;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;}
.instagram-logo {margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 30px;
    cursor: pointer;}
.footer-text {
    margin-right: 15px;
    font-size: 2rem;
}

/*Mobile website CSS*/

@media (max-width: 600px) {
/*header title*/ 
    h1 {
        font-size: 4rem;
    }
/*introduction section*/    
    .introduction-container {
        width: 90%;
        margin: auto;
        display: block;
    }
    .introduction-logo-container {
        width: 80%;
    }
    .HSB-logo {
        height: 20rem;
        padding-top: 15px;
    }
    .introduction-title {
        font-size: 2.25rem;
    }
    .introduction-paragraph {
        font-size: 1.75rem;
    }
/*Gallery*/
    .gallery-container {
        width: 90%;
    }
    .gallery-text {
        font-size: 2.25rem;
    }
    .swiper {
        width: 90%;
    }
    .swiper-slide img {
        height: 40vh;
    }
/*Profile section*/
.profile-container {
    width: 90%;
    display: block;
}
.profile-title {
    font-size: 2.25rem;
}
.profile-text {
    font-size: 1.75rem;
}
/*contact us*/
    .contact-us-container {
        width: 90%;
    }
    .contact-us-text {
        font-size: 1.75rem;
    }
    .email-btn {
        width: 20rem;
    }
/*footer*/
    .footer {
        display: flex;
    }
    .footer-text {
        font-size: 1.5rem;
    }
}