/* https://fonts.google.com/specimen/Lato */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Oswald&display=swap');

/* https://fonts.google.com/specimen/Nunito?category=Sans+Serif&preview.text=Mobile%20Physio&preview.size=21&preview.text_type=custom#styles */
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');

/* Reset default styling */
* {
    margin: 0;
    padding: 0;
    border: none;

    /* Sets custom font for all text */
    font-family: 'Nunito', sans-serif;
}

/* Reset default anchor tag styling */
a {
    color: black;
    text-decoration: none;
}

/* Class to center text elements */
.center {
    text-align: center;
}

/* Standard positional styling for flex containers */
.flex-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Standard styling for flex items */
.flex-item {
    padding: 10px;
    background-color: lightgray;
    /* Adds a black box-shadow */
    box-shadow: 5px 5px 5px black;
    /* Rounds corners of the flex-items */
    border-radius: 20px;
}

/* Sets the image width to the flex-item width */
.flex-item img {
    max-width: 100%;
}

/* Centers page title and headings and uses a custom font */
h1, h2 {
    text-align: center;
    font-family: 'Lato', sans-serif;
}

/* Centers Font Awesome social media links in the footer */
footer {
    text-align: center;
}

/* Adds padding to page title and hides header on mobile devices*/
h1 {
    padding: 1rem;
    display: none;
}

/* Highlight header text on hover */
header a:hover {
    text-decoration: underline;
}

/* Sets hero image for mobile devices and sets the size */
#hero-image {
    background: url(../images/hero-image-mobile.jpg) no-repeat center center;
    height: 600px;
    width: 100%;
}

/* Header styling */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.navbar {
    display: flex;
    justify-content: space-between;
}

.navbar li {
    text-decoration: none;
    list-style: none;
    padding: 1rem;
}

/* Footer styling */
footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: xx-large;
}

footer a {
    transition: 0.5s transform;
    margin-bottom: 15px;
}

/* Style social media icons on hover */
footer a:hover {
    /* Enlarge icons */
    transform: scale(1.5);
}

/* About Us */
.about-us {
    padding-top: 5%;
    padding-bottom: 5%;
}

#about-container {
    justify-content: space-around;
    align-items: stretch;
}

.about-item {
    /* Sets the amount of space used by each about item */
    flex-basis: 30%;
    /* Set transition duration for transform */
    transition: 0.5s transform;
}

/* Enlarge item on hover*/
.about-item:hover {
    transform: scale(1.05);
}

/* Contact Section - Home Page */
#about-contact-container {
    justify-content: center;
    align-items: center;
}

/* Testimonial Page */
#testimonial-container {
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 25px;
}

.testimonial-item {
    /* Sets the width of each testimonial */
    flex-basis: 80%;
    /* Set transition duration for transform */
    transition: 0.5s transform;
}
/* Enlarge testimonial item on hover */
.testimonial-item:hover {
    transform: scale(1.05);
}
/* Style Font Awesome review stars */
.testimonial-item i {
    color: gold;

    /* Adds a shadow to icons and increases icon size */
    text-shadow: 2px 2px black;
    font-size: xx-large;

    /* Set transition duration for transform */
    transition: 0.5s transform;
}

/* Move individual stars up on hover */
.testimonial-item i:hover {
    transform: translateY(-5px);
}

/* --- Contact Page --- */
/* Centers content in contact containers */
#contact-container {
    align-content: center;
    justify-content: space-around;
}
.contact-item {
    flex-basis: 40%;
}
/* Wraps form elements to new lines and creates space around */
#form-container {
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-around;
}
/* Add margin to create space between radio input and label */ 
input[type="radio"]{
    margin-right: 5px;
}
/* Only allow vertical resizing of form textarea, to stop overflow off contact-item */
textarea {
    resize: vertical;
}

/* Style for Buttons */
button, .form-button {
    /* Box model styling for buttons */
    padding: 1rem;
    margin: 1rem;
    border: none;

    /* Center button text and set background colour */
    text-align: center;
    background-color: #F0F0F0;

    /* Add a box shadow and round button corners */
    box-shadow: 5px 5px 2px black;
    border-radius: 20px;
    
    /* Set transition duration and values for on hover effect */
    transition: 0.5s transform, color, background-color, box-shadow;
}

/* Style buttons on hover */
button:hover, .form-button:hover {
    /* Enlarge buttons */
    transform: scale(1.1);

    /* Change background & text colour */
    color: white;
    background-color: #4EB7DA;

    /* Enlarge box shadow */
    box-shadow: 5px 5px 5px black;
}

/* Media Query for larger screen sizes */
@media screen and (min-width: 480px) {
    /* Show wider hero-image for non-mobile devices */
    #hero-image {
        background: url(../images/hero-image.jpg) no-repeat center center;
    }

    /* Set flex containers to row on larger devices */
    #about-container {
        flex-direction: row;
    }
    #contact-container {
        flex-direction: row;
    }

    /* Show page title on larger screen sizes */
    h1 {
        display: inline;
    }
}