/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/*------------------------------------------------ Text Elements */

h3 {
    font-family: "Lexend", serif, sans-serif, monospace;
    font-weight: 400;
    font-size: 40px;
    text-align: center;
    margin: 0 auto;
    padding: 40px;
    color: rgb(231, 223, 223);
}

h4 {
    font-family: "Lexend", serif, sans-serif, monospace;
    font-weight: 400;
    font-size: 30px;
    text-align: center;
    margin: 0 auto;
    padding: 40px;
    color: rgb(231, 223, 223);
}

p {
    font-family: "Roboto", serif, sans-serif, monospace;
    font-size: 18px;
    color: rgb(231, 223, 223);
}

em {
    font-family: "Roboto", serif, sans-serif, monospace;
    font-size: 17px;
    color: rgb(231, 223, 223);
}

li {
    font-family: "Roboto", serif, sans-serif, monospace;
    font-size: 17px;
    color: rgb(231, 223, 223);
}

/*------------------------------------------------ header */

#header {
    margin: auto 0;
    height: 75%;
}

.header-logo {
    width: 100%;
    height: auto;
}

.title-nav-container {
    margin: 0;
    padding: 0;
    background-color: #326771;
}

.coach-title-container {
    width: 100%;
    margin: 0;
}

.coach-sub-title-container {
    width: 100%;
    margin: 0;
}

.coach-title {
    margin: auto 0;
    font-family: "Lexend", serif, sans-serif, monospace;
    padding: 10px;
    font-size: 6vw;
    font-weight: 200;
    color: rgb(231, 223, 223);
}

.sub-title {
    margin: auto 0;
    font-family: "Roboto", serif, sans-serif, monospace;
    padding: 10px;
    font-size: 4vw;
    font-weight: 200;
    color: rgb(231, 223, 223);
}

.list-inline-item:not(:last-child) {
    margin: 0;
}

.navbar {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: hsl(187, 55%, 39%, 0.5);
}

.navbar ul {
    width: 100%;
}

.navbar li {
    font-size: 18px;
}

.hvr-shutter-out-horizontal {
    background-color: hsl(187, 55%, 39%, 0.5);
}

.hvr-shutter-out-horizontal:before {
    background-color: rgba(0, 0, 0, 0.3);
}

.nav-item a {
    margin:auto;
    padding: 15px;
    width: 100%;
    text-decoration: none;
    text-transform: uppercase;
    font-family: "Roboto", serif, sans-serif, monospace;
    color: rgb(231, 223, 223) !important;
}

.nav-item a i {
    font-size: 18px;
}

.active {
    background-color: hsl(180, 3%, 45%, 0.5);
}

/*------------------------------------------------ Body Image*/

body {
    background-image: url(../images/pebbles.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #326771;
    height: auto;
    width: 100%;
}


/*------------------------------------------------ Coaching Page*/

/*------------------------------------------------ Coach Section*/

#coach-section {
    margin: auto;
    padding: 40px;
    width: 75%;
    background-color: hsl(189, 30%, 23%, 0.9);
}

.coach-info {
    margin: auto;
    padding: 20px;
}

.coach-image {
    margin: auto;
}

.coach-image img {
    height: auto;
    width: 300px;
    border: solid #798383 5px;
    border-radius: 10%;
}

/*------------------------------------------------ Background Section*/

#background-section {
    position: relative;
    margin: auto;
    padding: 40px;
    height: auto;
    width: 75%;
    background-color: hsl(189, 30%, 23%, 0.9);
}

.background-info {
    margin: auto;
    padding: 20px;
}

.background-image {
    margin: auto;
}

.background-image img{
    height: auto;
    width: 300px;
    border: solid #798383 5px;
    border-radius: 10%;
}

/*------------------------------------------------ Tried And Tested Section*/

#tried-and-tested-section {
    margin: auto;
    padding: 40px;
    width: 75%;
    background-color: hsl(189, 30%, 23%, 0.9);
}

.tried-and-tested-info {
    margin: auto;
    padding: 20px;
}

.tried-and-tested-image {
    margin: auto;
}

.tried-and-tested-image img {
    height: auto;
    width: 300px;
    border: solid #798383 5px;
    border-radius: 10%;
}

/*------------------------------------------------ Coaching Page */

/*------------------------------------------------ Why Life Coaching Section*/

#why-life-coaching-section {
    margin: auto;
    padding: 40px;
    width: 75%;
    background-color: hsl(189, 30%, 23%, 0.9);
}

.why-life-coaching {
    margin: auto;
    padding: 20px;
}

.why-life-coaching-image {
    margin: auto;
}

.why-life-coaching-image img{
    height: auto;
    width: 300px;
    border: solid #798383 5px;
    border-radius: 10%; 
}

/*------------------------------------------------ What To Expect Section*/

#what-to-expect-section {
    margin: auto;
    padding: 40px;
    width: 75%;
    background-color: hsl(189, 30%, 23%, 0.9);
}

.what-to-expect {
    margin: auto;
    padding: 20px;
}

.what-to-expect li {
    margin: 0;
    padding-left: 40px;
    font-size: 18px;
}

.what-to-expect-gallery {
    margin: auto;
    height: auto;
    width: 300px;
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;
    gap: 0;
}

.what-to-expect-gallery img {
    height: auto;
    width: 100%;
    border: 2px solid transparent;
}

/*------------------------------------------------ Carousel/Testimonials Section */

#testimonials-section {
    margin: auto;
    padding: 40px;
    width: 75%;
    background-color: hsl(189, 30%, 23%, 0.9);
}

.carousel-item {
    text-align: center;
    background-color: rgb(38, 162, 181, 0.3);
    padding: 19%;
    border-radius: 3%;
}

.carousel-item em{
    font-size: 25px;
}

/*------------------------------------------------ Contact Page */

/*------------------------------------------------ Form Section*/

#get-in-touch-section {
    margin: auto;
    padding: 40px;
    width: 75%;
    background-color: hsl(189, 30%, 23%, 0.9);
}

.form-container {
    margin: 10px auto;
    width: 75%;
    background-color: rgb(38, 162, 181, 0.2);
    color: rgb(231, 223, 223);
    border: 5px solid #798383;
    border-radius: 5%;
}

.contact-item {
    display: block;
    width: 40%;
    padding: 0;
    margin: 0 auto;
}

.button-container {
    margin: 0 auto;
    text-align: center;
    padding: 30px;
}

.mapouter {
    margin: 10px auto;
    width: 75%;
    text-align: center;
    background-color: rgb(38, 162, 181, 0.2);
    color: rgb(231, 223, 223);
    border: 5px solid #798383;
    border-radius: 5%;
}

#gmap-canvas {
    margin: 20px;
    overflow: hidden;
    background: none !important;
}

#gmap-canvas iframe {
    border-radius: 5%;
    height: 300px;
    width: 90%;
}

/*------------------------------------------------ FAQs Section */

#faqs-section {
    margin: auto;
    padding: 60px;
    width: 75%;
    background-color:hsl(189, 30%, 23%, 0.9);
}

.faqs-container p {
    padding-left: 60px;
    padding-right: 60px;
    text-align: center;
}

/*------------------------------------------------ Back to top Button */

.back-to-top-btn {
    color: rgb(231, 223, 223);
    padding: 20px;
    background-color: rgb(38, 162, 181, 0.6);
    height: auto;
    width: 12.5%;
    position: fixed;
    bottom: 0;
    right: 0;
}

.back-to-top-btn:hover {
    color: rgb(165, 165, 165);
}

/*------------------------------------------------ Footer */

#footer {
    margin: 0;
    bottom: 0;
    text-align: center;
    background-color: #326771;
}

#footer a {
    color: rgb(231, 223, 223);
    font-family: "Roboto", serif, sans-serif, monospace;
    font-size: large;
    text-decoration: none;
}

#footer ul {
    list-style-type: none;
}

#footer li {
    margin: 0;
    padding-bottom: 25px;
}

.footer-logo {
    width: 175px;
    height: auto;
    padding: 10px;
    margin: 10px;
}

.footer-menu {
    padding-top: 40px;
}

.copyright-text {
    color: rgb(231, 223, 223);
    font-family: "Roboto", serif, sans-serif, monospace;
    font-weight: 200;
    padding-bottom: 20px;
}

#footer a:hover {
    color: rgb(165, 165, 165);
}

/*------------------------------------------------ Learn more page */

/*------------------------------------------------ Learn more section */

#learn-more-section {
    margin: auto;
    padding: 40px;
    width: 75%;
    background-color:hsl(189, 30%, 23%, 0.9);
}

#learn-more-section li{
    text-align: center;
    list-style: none;
    line-height: 40px;
}

#learn-more-section a {
    text-decoration: none;
    color: rgb(231, 223, 223);
}

#learn-more-section h2 {
    color: rgb(231, 223, 223);
}

/*------------------------------------------------ Media Queries */

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {
    #coach-section, 
    #background-section,
    #tried-and-tested-section,
    #why-life-coaching-section,
    #what-to-expect-section,
    #testimonials-section,
    #get-in-touch-section,
    #faqs-section,
    #learn-more-section {
        width:100%;
    }

    .carousel-item em {
        font-size: 15px;
    }

    #faqs-section p {
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* Medium devices (Tablets, 768px and down) */

@media only screen and (max-width: 768px) {
    .back-to-top-btn {
        width: 100%;
    }

    #footer {
        margin-bottom: 63px;
    }

    .form-container {
        width: 90%;
    }

    .mapouter {
        width: 90%;
    }

    .contact-item {
        width: 55%;
    }

    .carousel-item em {
        font-size: 20px;
    }

    .header-logo {
        display: none;
    }

    .title-nav-container {
        width: 100%;
    }
}

/* Large devices (992px and up) */

@media only screen and (min-width: 992px) {
    .carousel-item em{
        font-size: 30px;
    }

    p {
        font-size: large;
    }

    em {
        font-size: medium;
    }

    .nav-item span {
        font-size: large;
    }

    .learn-more-section li {
        font-size: large;
    }

    .what-to-expect li {
        font-size: large;
    }

    #footer li {
        font-size: large;
    }

}