/* CSS Style sheet for Web Management And Development - M30875 - WEB PROJECT 1 - up2307500  */

/*
CSS reset 
Source https://www.joshwcomeau.com/css/custom-css-reset/ 
*/

/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
    box-sizing: border-box;
}
/* 2. Remove default margin */
* {
    margin: 0;
}
body {
/* 3. Add accessible line-height */
    line-height: 1.5;
/* 4. Improve text rendering */
    -webkit-font-smoothing: antialiased;
}
/* 5. Improve media defaults */
img, picture, video, canvas, svg {
display: block;
    max-width: 100%;
}
/* 6. Inherit fonts for form controls */
input, button, textarea, select {
font: inherit;
}
/* 7. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
/* 8. Improve line wrapping */
p {
text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
}
/*
9. Create a root stacking context
*/
#root, #__next {
isolation: isolate;
}


body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui;
} 
/* setting website colors */
:root{
    /* Colors */
    --light-color: #F8F7F7;
    --light-green-color: #9FDF02;
    --medium-green-color: #86BC01;
    --dark-green-color:  #3C5801;
    --dark-color: #393939;
    --dark-grey: #172122;

    /* spacing */
    --gutter: 80px; /*global spacing between things */ 

/* Border radius */ 
    --border-radius-s: 8px;
    --border-radius-m: 30px;
    --border-radius-circle: 50%;
}
html {
    scroll-behavior: smooth;
}

h1 {
    Font-size: 50px;
    line-height: 54px; 
}
h2 {
    font-size:46px;
    line-height: 54px;
}
h4 {
    font-size: 20px;
    line-height:54px;
}
h6 {
    font-weight: 700;
    font-size: 12px;
}
p {
    font-size: 16px;
    margin: 15px 0 20px 0;
}

body{ 
    width: 100%;
}

a {
        text-decoration: none;
}

/* declaring rules the primary button used throughout site */

.primary-button {
        cursor: pointer;
        border: none;
        background: none; 
}

.primary-button:hover {
    color: var(--dark-green-color);
    background-color: var(--light-color);
    transition: 0.5s ease;
}

/* wrapper */

.wrapper {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* two column */

.two-column {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--gutter);
    padding: var(--gutter) 0;
}

.two-column > * {
    width: 50%;
}

@media screen and (max-width: 1200px) {
   .two-column {
        flex-direction: column;
    }
    .two-column div {
        width: 100%;
    }
}

/* rounded */

.rounded {
    border-radius: var(--border-radius-m);
} 
    
/* line Gradient colours and style */

.line1 {
    width: 350px;
    height: 2px;
    background: linear-gradient(to right, #9FDF02, #3C3C3C);
    margin: 10px 0;
    padding: 0 var(--gutter);
}

.line2 {
    width: 350px;
    height: 2px;
    background: linear-gradient(to right, #9FDF02, #F8F7F7);
    margin: 10px 0;
    padding: 0 var(--gutter);
}

/* Header styling */

.header {
    display: flex;
    align-items: center; 
    justify-content: space-between;
    padding: 20px var(--gutter);
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
}

.header .logo {
    width: 250px;
    height: auto;
}


/* Home Page styling */
/* Hero section styling */
.hero-section {
    height: 100vh; /* Full screen */
    background-image: url(../img/Hero_BG_4.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.hero-section .hero-container {
    max-width: 960px;
    padding: 300px var(--gutter);
}

.hero-section .hero-container h2 {
    margin-top: 10px;
    margin-bottom: 2px;
    color: var(--light-color);
}

.hero-section .hero-container h1 {
    margin-top: 0.0015px;
    color: var(--light-green-color);
}

.hero-section .hero-container .line {
    width: 350px;
    height: 2px;
    background: linear-gradient(to right, #9FDF02, #3C3C3C);
    margin: 10px 0;
    padding: 0 var(--gutter);
}

.hero-section .hero-container p {
    color: var(--light-color);
}

.hero-section .hero-container button {
    font-size: 1.2rem;
    display: inline-block;
    border-radius: 4px;
    padding: .5em 1em;
    margin-top: 2rem;
    font-weight: 700;
}

/* Homepage-  hero responsive styling  */
@media screen and (max-width: 1200px) {
    .hero-section {
         flex-direction: column;
         min-height: 50vh;
     }
     .hero-section div {
         width: 100%;
     }
 }

/* Navbar */
/* speading the navbar out linear and centering it in the line.*/
.navbar { 
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Homepage - Removing bullets and adding padding inbetween each item.*/
.navbar li {
list-style: none;
padding: 0 40px;
position: relative;
}

.navbar li a{
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    color: var(--light-color);
    transition: 0.3s ease;
}  

.navbar li a:hover,
.navbar li a.active {
    color: var(--medium-green-color);
}

/* Homepage - Pseudo classes for underlines on hover of page links */
.navbar li a.active::after,
.navbar li a:hover::after {
    content: "";
    width: 25%;
    height: 1.5px;
    background-color: var(--medium-green-color);
    position: absolute; 
    bottom: -4px; 
    left: 41px;
}

/* Homepage - ABOUT US section sttyling */
.about-us {
    background-color: var(--light-color);
}

.about-us img{
    border: 2px solid #666;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

.about-us h2 {
    color: var(--dark-grey);
}

/* Homepage - Memberships section styling */
.memberships {
    position: relative;
    min-height: 700px;
    background-image: url(../img/memberships.jpg);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}

.memberships::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    background-color: rgba(0,0,0,0.5);
    z-index: 1;
}

.memberships-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 500px;
    z-index: 999;
    color: var(--light-color);
}

.memberships-content p {
    width: 800px;
    align-items: center;
    text-align: center;
}

.primary-button {
    font-size: 1.2rem;
    display: inline-block;
    background-color: var(--light-green-color);
    border-radius: 4px;
    color: var(--light-color);
    padding: .5em 1em;
    margin-top: 2rem;
    cursor: pointer;
    font-weight: 700;
    transition: 0.3s ease;
}

@media screen and (max-width: 1200px) {
    .memberships {
         flex-direction: column;
     }
     .memberships div {
         width: 100%;
     }
 }

@media screen and (max-width: 900px) {
    .memberships {
         flex-direction: column;
     }
     .memberships-content {
         width: 100%;
     }
 }

/* Global Footer styling */

.footer {
background-color: var(--dark-grey-color);
}

footer .wrapper{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    padding: 32px var(--gutter);
    align-items: center; 
    gap: 20px;
}

footer .logo {
    max-height: 50px;
}

/* Memberships page */
/* Memberships header styling */
.memberships-page {
    position: relative;
    min-height: 800px;
    background-image: url(../img/membership.jpg);
    background-size: cover;
    background-position: bottom;
    display: flex;
    align-items: center;
    z-index: -2
}

.memberships-page::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    z-index: -1;
    background-color: rgba(0,0,0,0.7);
    }

.memberships-page-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 500px;
    z-index: 999;
    color: var(--light-color);
}

.memberships-page-content p {
    width: 800px;
    align-items: center;
    text-align: center;
}

.memberships-page-content .line {
    width: 350px;
    height: 2px;
    background: #9FDF02;
    margin: 10px 0;
    padding: 0 var(--gutter);
}

/* Gym Page */
/* Gym header section styling */
.gym-page {
    position: relative;
    min-height: 800px;
    background-image: url(../img/Gym.jpg);
    background-size: cover;
    background-position: bottom;
    display: flex;
    align-items: center;
    z-index: -2
}

.gym-page::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    z-index: -1;
    background-color: rgba(0,0,0,0.7);
    }

.gym-page-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 500px;
    z-index: 999;
    color: var(--light-color);
}

.gym-page-content p {
    width: 800px;
    align-items: center;
    text-align: center;
}

.gym-page-content .line {
    width: 350px;
    height: 2px;
    background: #9FDF02;
    margin: 10px 0;
    padding: 0 var(--gutter);
}

/* Whats on Page */
/* Whats on header section styling */
.what-page {
    position: relative;
    min-height: 800px;
    background-image: url(../img/schedule.jpg);
    background-size: cover;
    background-position: bottom;
    display: flex;
    align-items: center;
    z-index: -2
}
.what-page::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    z-index: -1;
    background-color: rgba(0,0,0,0.7);
}

.what-page-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 500px;
    z-index: 999;
    color: var(--light-color);
}

.what-page-content p {
    width: 800px;
    align-items: center;
    text-align: center;
}

.what-page-content .line {
    width: 350px;
    height: 2px;
    background: #9FDF02;
    margin: 10px 0;
    padding: 0 var(--gutter);
}


/* About page */
/* About header section styling */
.about-us-page {
    position: relative;
    min-height: 800px;
    background-image: url(../img/about-us-gym.jpg);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    z-index: -2
}

.about-us-page::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    z-index: -1;
    background-color: rgba(0,0,0,0.7);
    }

.about-us-page-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 500px;
    z-index: 999;
    color: var(--light-color);
}
.about-us-page-content p {
    width: 800px;
    align-items: center;
    text-align: center;
}
.about-us-page-content .line {
    width: 350px;
    height: 2px;
    background: #9FDF02;
    margin: 10px 0;
    padding: 0 var(--gutter);
}

/* About - history section styling */

.history {
    background-color: var(--light-color);
    color: var(--dark-grey);
}
.history img{
    border: 2px solid #666;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

/* About - meet the team section styling */

.meet-the-team {
    background-color: var(--dark-color);
    color: var(--light-color);
}
.meet-the-team img{
    border: 2px solid #666;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

/* About - location section styling */

.location {
    background-color: var(--light-color);
    color: var(--dark-grey);
}

.location img{
    border: 2px solid #666;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}


/* Whats on Page */



/* Contact Page */
/* Contact - header section styling */

.contact-page-header {
    position: relative;
    min-height: 400px;
    background-image: url(../img/Contact_us.jpg);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    z-index: -2
}

.contact-page-header::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    z-index: -1;
    background-color: rgba(0,0,0,0.7);
}

.contact-page-header-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 500px;
    z-index: 999;
    color: var(--light-color);
}

.contact--page-header-content p {
    width: 800px;
    align-items: center;
    text-align: center;
}

.contact-page-header-content .line {
    width: 350px;
    height: 2px;
    background: #9FDF02;
    margin: 10px 0;
    padding: 0 var(--gutter);
}

.contact-us {
    background-color: var(--light-color);
    color: var(--dark-color)
}

.contact-us .two-column {
    align-items: start;
}

.details-content {
    display:flex;
    flex-direction: column;
    width: 100%;
    color: var(--dark-grey);
}

.details-content .detail {
    display:flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    width: 100%;
    color: var(--dark-grey);
}

/* Contact - form section styling */

form {
    flex-basis: 50%;
}

.inputWrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 60px; 
    margin-left: 60px; 
}

.inputWrapper input {
    padding: 12px 16px; 
    width: 100%;
    border: 1px solid var(--dark-grey);
    outline: none;
}

.address {
    flex-basis: 50%;
}

.address h1 {
    color: var(--light-colorcolor)
}

/* Contact - details section styling */

.detailsWrapper {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 60px;
}

.detail { 
    display: flex;
    gap: 10px;
    font-size: 20px;
}

.detail img {
    width: 40px;
    height: 40px;
}

.detail h6 {
    color: var(--light-color)
}