/*google font import*/
@import url('https://fonts.googleapis.com/css2?family=Inclusive+Sans:ital@0;1&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/*Styles for body and nav bar*/
body {
    font-family: Roboto, Inclusive-Sans;
    margin: 0;
    padding: 0;
    justify-content: center;
    align-items: center;
}


nav {
    display: flex;
    justify-content: center;
    /*moves navbar content to the center*/
    text-align: right;
    padding-left: 0;
    padding-right: 20px;

}

.nav-links {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    /* Use flexbox for horizontal layout */
}

.nav-links li {
    margin: 0 15px;
    /* Space between items */
}

.nav-links a {
    color: black;
    text-decoration: none;
    padding: 14px 20px;
    /* Adds padding around links */
    display: block;
    /* Makes the link block-level for easier clicking */
    font-size: x-large;
}

.nav-links a:hover {
    background-color: #575757;
    /* Change background on hover */
}

/*styling for page logo*/
#logo {
    font-family: Roboto;
    /*Changes font to Roboto for better accessability*/
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 6vh;
    color: black;
    text-align: center;
    /*This aligns the text to the centre to make it more visually appealing*/
    padding-top: 5rem;
}

.logo-style {
    text-decoration: none;
}
/*New styling for header container to prevent content stretching across large screens*/
.header-containter {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/*body image styling*/
#chess-image {
    height: 700px;
    width: 100%;
    background: url("../images/pexels-alex-green-5692995.jpg") no-repeat center center/cover;
    position: relative;
}

#chess-image2 {
    height: 700px;
    width: 100%;
    background: url("../images/pexels-pixabay-260024.jpg") no-repeat center center/cover;
    position: relative;
}

#chess-image3 {
    height: 700px;
    width: 100%;
    background: url("../images/pexels-anastasia-shuraeva-8466163.jpg") no-repeat center center/cover;
    position: relative;
}

.container {
    display: flex;
    gap: 20px;
    /* Space between the divs */
}

.box {
    padding: 20px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    flex: 1;
    /* Makes all boxes equal width */
    text-align: center;
    /* Center content horizontally */
}

#about-us,
#about-us2,
#about-us3 {
    position: absolute;
    bottom: 50%;
    width: 75%;
    text-align: center;
    color: white;
    /* Change as needed */
    background-color: rgba(0, 0, 0, 0.5);
    /* Optional for better readability */
    padding: 10px;
    font-size: 20px;
    /* Adjust as needed */
}

/*activities section styling*/
#activities-section {
    text-align: center;
}

#activities-image1 {
    height: 700px;
    width: 100%;
    background: url("../images/pexels-emrekeshavarz-7021075.jpg") no-repeat center center/cover;
    position: relative;
}

#activities-image2 {
    height: 700px;
    width: 100%;
    background: url("../images/pexels-rdne-7978834.jpg") no-repeat center center/cover;
    position: relative;
}

#activities-image3 {
    height: 700px;
    width: 100%;
    background: url("../images/pexels-karolina-grabowska-6955013.jpg") no-repeat center center/cover;
    position: relative;
}

#activities-cover-text1,
#activities-cover-text2,
#activities-cover-text3 {
    position: absolute;
    bottom: 50%;
    width: 75%;
    text-align: center;
    color: white;
    /* Change as needed */
    background-color: rgba(0, 0, 0, 0.5);
    /* Optional for better readability */
    padding: 10px;
    font-size: 20px;
    /* Adjust as needed */
}


/*sign up form styles*/
.form-title {
    text-align: center;
    padding-bottom: 1.5rem;
    padding-top: 1rem;
}


.signup-form {
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    /*styles form to center of screen*/
    display: flex;
    position: absolute; 
    justify-content: center;
    align-items: center;
    width: 100%;
}

.signup-form h2 {
    margin-bottom: 20px;
    font-size: 24px;
    text-align: center; /*aligns text to center*/
}

.signup-form label {
    margin-bottom: 10px;
    display: block;
    font-weight: bold;
}

.signup-form input[type="text"],
.signup-form input[type="email"],
.signup-form input[type="tel"],
.signup-form select,
.signup-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

.signup-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;

}

.signup-form button {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
}

.signup-form button:hover {
    background-color: #45a049;
}



/*contact us styles*/
#contact-us-image {
    height: 700px;
    width: 100%;
    background: url("../images/pexels-lucianphotography-3566191.jpg") no-repeat center center/cover;
    position: relative;
}

#contacts {
    position: absolute;
    width: 75%;
    text-align: center;
    color: white;
    /* Change as needed */
    background-color: rgba(0, 0, 0, 0.5);
    /* Optional for better readability */
    padding: 10px;
    font-size: 20px;
}

/*footer styles*/
#social-networks {
    text-align: center;
    padding: 20px;
    display: flex;
    justify-content: space-evenly;
    list-style-type: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    /* Ensures footer is above other content */
}


#social-networks i {
    font-size: 160%;
    padding: 5%;
    color: white;
}

/*improved contrast for footer icons on signup and thankyou pages*/
.improved-contrast #social-networks i {
    color: #3a3a3a;
}    

/*media query for nav bar*/
@media only screen and (max-width: 768px) {
    nav {
        justify-content: center;
        /* Center nav items */
        padding-right: 10px;
        /* Adjust padding */
    }

    .nav-links {
        flex-direction: column;
        /* Stack items vertically */
        align-items: center;
        /* Center align vertically stacked items */
    }

    .nav-links li {
        margin: 10px 0;
        /* Adjust spacing between items */
    }

    .nav-links a {
        font-size: large;
        /* Adjust font size */
        padding: 10px 15px;
        /* Adjust padding */
    }
    /*ensures about us text remains inside images*/
    #about-us,
    #about-us2,
    #about-us3 {
        width: 90%;
        font-size: 18px;
        /* Adjust font size */
        padding: 8px;
        /* Adjust padding */
    }
    /*ensures activities cover text remains inside images*/
    #activities-cover-text1,
    #activities-cover-text2,
    #activities-cover-text3 {
        width: 90%;
        font-size: 18px;
        /* Adjust font size */
        padding: 8px;
        /* Adjust padding */
    }
    .signup-form {
        padding: 15px;
    }

    .signup-form h2 {
        font-size: 22px;
    }

    .signup-form input[type="text"],
    .signup-form input[type="email"],
    .signup-form input[type="tel"],
    .signup-form select,
    .signup-form textarea,
    .signup-form button {
        padding: 8px;
        font-size: 14px;
    }
}

@media only screen and (max-width: 480px) {
    nav {
        padding-right: 5px;
        /* Further adjust padding */
    }

    .nav-links a {
        font-size: medium;
        /* Further reduce font size */
        padding: 8px 10px;
        /* Further reduce padding */
    }

    .nav-links li {
        margin: 5px 0;
        /* Reduce margin between items */
    }
    #about-us,
    #about-us2,
    #about-us3 {
        width: 95%;
        font-size: 16px;
        /* Adjust font size */
        padding: 8px;
        /* Adjust padding */
    }

    #activities-cover-text1,
    #activities-cover-text2,
    #activities-cover-text3 {
        width: 95%;
        font-size: 16px;
        /* Further adjust font size */
        padding: 6px;
        /* Further adjust padding */
    }
    body {
        padding: 10px;
    }

    .signup-form {
        padding: 10px;
    }

    .signup-form h2 {
        font-size: 20px;
    }

    .signup-form input[type="text"],
    .signup-form input[type="email"],
    .signup-form input[type="tel"],
    .signup-form select,
    .signup-form textarea,
    .signup-form button {
        padding: 6px;
        font-size: 12px;
    }
}