/*
    Theme Name: Hsv Theme
    Author: Stanb
    Version: 1.0
*/

* {
    margin: 0;
    padding: 0;
    font-family: "lato", sans-serif;
    color: #4a5157;
}

.TitleText {
    color: white;
    text-align: center;
}

.TitleTextMain {
    color: white;
    text-align: center;
    position: relative;
    top: 60px;
}

.PageText {
    color: #4a5157;
    text-align: justify;
}

.HeadBox {
    height: 200px;
    width: 100%;
    background-color: #CC1014;
    box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
}

.HeadBoxMain {
    height: 150px;
    width: 100%;
    background-color: #CC1014;
    box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
}

.DescriptionTitleBox {
    display: flex;
}

.DescriptionTitleText {
    margin: auto;
    display: inline-block;
    text-align: center;
    margin-top: 75px;
    margin-bottom: 50px;
}

.PageBox {
    background-color: white;
    width: 100%;
}

.PageBoxTextLocation {
    padding-bottom: 50px;
    width: 960px;
    margin: 0 auto;
}

.DescriptionText {
    padding-left: 75px;
    padding-right: 75px;
    text-align: justify;
}

.sectionBackground {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Keeps the image fixed */
    z-index: -999;
}

.ButtonStyle {
    font-size: 20px;
    color: white;
    width: 224px;
    min-width: 224px;
    min-height: 89px;
    height: 89px;
    background-color: #CC1014;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    cursor: pointer;
    text-decoration: none;
}



.TextSize30 {
    font-size: 30px;
}

.TextSize25 {
    font-size: 25px;
}

.TextSize20 {
    font-size: 20px;
}

.TextSize16 {
    font-size: 16px;
    line-height: 27px;
}

.TextSize14 {
    font-size: 14px;
}

.PageWidth {
    width: 960px;
}

.TextBold {
    font-weight: 1000;
    color: black;
}



/*
    Navbar
*/

#navbar {
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);
    position: fixed;
    width: 100%;
    display: flex;
    align-items: center;
    height: 54px;
    z-index: 100000;
    background-color: white;
}

#hamburgerMenu {
    font-size: 24px;
    color: black;
    cursor: pointer;
    display: none;
    transition: transform 0.3s ease;
}

#navContent {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}

.navItem {
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 16px;
    line-height: 18px;
}

.navItem:hover {
    color: #CC1014;
}

#navContent .navItem.active {
    color: #FF6347;
    font-weight: bold;
}



/*
    Icon Flags
*/

#languageFlag {
    position: absolute;
    right: 50px;
}

.iconFlag {
    float: left;
    display: block;
    height: 30px;
    width: 40px;
    background-position: center;    
    background-size: cover;
    background-repeat: no-repeat;
    margin: 12px 5px;
}

#dutchFlag {
    background-image: url("https://www.hsv68.nl/wp-content/uploads/2024/12/netherlands-flag-png-xl.jpg");
}

#germanFlag {
    background-image: url("https://www.hsv68.nl/wp-content/uploads/2024/12/germany-flag-png-xl.jpg");
}

#englishFlag {
    background-image: url("https://www.hsv68.nl/wp-content/uploads/2024/12/Flag_of_the_United_Kingdom.png");
}

/*
    ShowUp page
*/

#ShowUpPage {
    width: 100%;
    height: 100%;
    max-height: 913px;
}

#ShowUpBackground {
    background-image: url("https://www.hsv68.nl/wp-content/uploads/2024/12/prologic-com-small-2000.jpg");
}

#ShowUpCenterDiv {
    position: relative;
    margin: 0px auto;
    top: -35px;
}

#Logo {
    width: 345px;
    height: 398px;
    background-image: url("https://www.hsv68.nl/wp-content/uploads/2024/12/logo-hsv-vaals-68-small-314.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#ArrowDown {
    margin: 0px auto;
    cursor: pointer;
    width: 200px;
    height: 200px;
    background-image: url("https://www.hsv68.nl/wp-content/uploads/2024/12/arrow-down.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#ArrowDownClick {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

/*
    AboutUs page
*/

#AboutUsPage {
    position: relative;
    top: -185px;
}

#AboutUsTextBox {
    position: relative;
    top: 35px;
}

#AboutUsHeadTitle {
    height: 50px;
}

.AboutUsHeadSubTitle {
    color: white !important;
    text-align: center;
    height: 44px;
    margin-top: 10px;
}

#AboutUsTitleBox {
    height: 150px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
}

#AboutUsTitle {
    margin: auto;
    display: inline-block;
    text-align: center;
}

#AboutUsImageBackground {
    display: block;
    height: 616px;
    width: 100%;
    background-image: url('https://www.hsv68.nl/wp-content/uploads/2024/12/visvijver_ochtend_large-2000-scaled.jpg');
}

#AboutUsImageBox {
    position: relative;
    top: 92px;
    margin: 0px auto;
}

.AboutUsImageText {
    padding-top: 165px;
    color: white;
    font-weight: 500;
}

#AboutUsBox {
    background-color: white;
    width: 100%;
}

#AboutUsImage {
    position: relative;
    margin: 0 auto;
    background-image: url("https://www.hsv68.nl/wp-content/uploads/2024/12/visvijver-1920.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 333px;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.4);
    bottom: 235px;
}

#AboutUsTextLocationBox {
    padding-bottom: 50px;
    margin: 0 auto;
    display: flex;
    margin-top: -100px;
}

#AboutUsLeft {
    width: 450px;
    height: 100%;
    padding-left: 75px;
} 

#AboutUsRight {
    width: 291px;
    height: 100%;
    margin-left: 80px;
    margin-right: 64px;
}

#AboutUsBottom {
    width: 291px;
    margin-top: 85px;
    height: 211px;
    max-height: 211px;
}

#AboutUsTop {
    width: 100%;
}

#AboutUsTextTop {
    font-weight: 400;
}

#RowLeft {
    width: 145.5px;
    float: left;
}

#RowRight {
    width: 145.5px;
    float: left;
}

#OpeningTextAlign {
    float: right;
}

#LocationButton {
    margin-top: 10px;
}


/*
    Member Page
*/

#DownloadButton {
    margin-top: 100px;
    margin-bottom: 100px;
}


/*
    Contact Page
*/

#ContactPage {
    width: 100%;
    height: 739px;
}

#ContactPageBackground {
    padding-bottom: 50px;
    margin: 0 auto;
}

#TitleBox {
    padding-top: 68px;
    padding-bottom: 68px;
    display: block;
    width: 100%;
}

.ContactText {
    margin: 0 auto;
    display: block;
    text-align: center;
    color: black;
}

#ContactMainTitle {
    margin-bottom: 10px;
}   

#ContactIconsBox {
    min-width: 741px;
    min-height: 100px;
    position: relative;
    margin-top: 40px;
}

.ContactIcons {
    height: 100px;
    width: 100px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto;
    position: relative;
}

#EmailIcon {
    background-image: url("https://www.hsv68.nl/wp-content/uploads/2024/12/email.png");
}

#PhoneIcon {
    background-image: url("https://www.hsv68.nl/wp-content/uploads/2024/12/telephone.png");
}

#AdresIcon {
    background-image: url("https://www.hsv68.nl/wp-content/uploads/2024/12/estate.png");
}

.ContactTextIcon {
    color: black;
    padding-bottom: 10px;
}

.ContactBox {
    display: block;
    text-align: center;
    float: left;
    margin-left: 14%;
}

#ContactPageBackgroundImage {
    background-image: url('https://www.hsv68.nl/wp-content/uploads/2024/12/compiuter-2000.jpg');
    width: 100%;
    height: 739px;
}

/*
    Footer
*/

#FooterPlace {
    background-color: #4a5157;
    width: 100%;
    height: 180px;
}

#FooterBox {
    height: 160px;
    padding-top: 20px;
    margin: 0 auto;
    text-align: center;
}

.FooterText {
    color: white;
    padding-bottom: 10px;
}

#CardContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    max-width: 810px;
    padding: 0 75px;
    margin: 50px 0;
}

.CardItem {
    background-color: #4a5157;
    color: #ffffff;
    padding: 20px;
    border-radius: 20px;
    width: 220px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 184px;
    box-sizing: border-box;
    min-width: 160px;
}

.CardItemTitle {
    margin-bottom: 10px;
    color: #ffffff;
}

.CardItemText {
    margin: 5px 0;
    color: #ffffff;
}

.CardItemRight {
    margin-left: 142px;
}

.CardItemBottom {
    margin-top: 84px;
}


@media only screen and (max-width: 1000px) {
    
    #Logo {
        width: 276px;
        height: 318px;
    }

    #ArrowDown {
        width: 160px;
        height: 160px;
    }

    .HeadBox {
        height: 150px;
    }

    .TextSize30 {
        font-size: 25px;
    }

    .TextSize25 {
        font-size: 20px;
    }

    .TextSize20 {
        font-size: 16px;
    }

    .TextSize16 {
        line-height: 23px;
        font-size: 14px;
    }

    .TextSize14 {
        font-size: 11px;
    }

    .AboutUsHeadSubTitle {
        margin-top: 5px;
    }

    .AboutUsImageText {
        padding-top: 132px;
    }

    #AboutUsImage {
        width: 768px;
        height: 266px;
    }

    #AboutUsTitleBox {
        height: 125px;
    }

    #AboutUsImageBackground {
        height: 493px;
    }

    .ButtonStyle {
        font-size: 16px;
        width: 179px;
        min-width: 179px;
        min-height: 71px;
        height: 71px;
    }

    #LocationButton {
        margin-top: 25px;
    }

    .TitleTextMain {
        top: 30px;
    }

    .HeadBoxMain {
        height: 100px;
    }

    #MemberTextBox {
        top: 15px;
        position: relative;
    }

    .CardItem {
        height: 147px;
        width: 176px;
        flex-basis: calc(50% - 20px);
    }

    .CardItemRight {
        margin-left: 0px;
    }
    
    .CardItemBottom {
        margin-top: 0px;
    }

    .PageBoxTextLocation {
        width: 768px;
    }

    .PageWidth {
        width: 768px;
    }

    .navItem {
        color: white;
    }

    #hamburgerMenu {
        display: block;
        margin-left: 25px;
    }

    #navContent {
        flex-direction: column;
        background-color: #CC1014;
        position: absolute;
        top: 54px;
        width: 100%;
        z-index: 1000;
        max-height: 0; 
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.3s ease;
        overflow: hidden;
    }

    #navbar.menu-open #navContent {
        max-height: 500px;
        opacity: 1;
    }

    #hamburgerMenu.menu-open {
        transform: rotate(90deg);
    }

    .navItem:hover {
        color: white;
    }
}

@media only screen and (max-width: 768px) {

    .PageWidth {
        width: 614px;
    }

    .PageBoxTextLocation {
        width: 614px;
    }

    #AboutUsImage {
        width: 614px;
    }

    #AboutUsTextLocationBox {
        display: block;
    }

    #AboutUsRight {
        margin: 0 auto;
        margin-top: 50px;
    }

    #AboutUsLeft {
        padding-left: 0px;
        width: auto;
    }

    #ContactIconsBox {
        min-width: 0px;
    }

    .MemberDescriptionText {
        text-align: left;
    }

    .ContactBox {
        margin-left: 22%;
    }

    .DescriptionText {
        padding-left: 30px;
        padding-right: 30px;
    }

    .PageText {
        padding-left: 30px;
        padding-right: 30px;
    } 

    #AdresBox {
        margin-left: 20%;
    }

}

@media only screen and (max-width: 614px) {

    .PageWidth {
        width: 491px;
    }

    #AboutUsImage {
        width: 491px;
    }

    .PageBoxTextLocation {
        width: 491px;
    }

    .ContactBox {
        margin-left: 20%;
    }

    .TextSize30 {
        font-size: 22px;
    }

    .TextSize20 {
        font-size: 15px;
    }

    #AdresBox {
        margin-left: 37%;
    }

}

@media only screen and (max-width: 491px) {

    .PageWidth {
        width: 320px;
    }

    .PageBoxTextLocation {
        width: 320px;
    }

    #AboutUsImage {
        width: 320px;
    }

    #AboutUsLeft {
        width: auto;
    }

    .DescriptionText {
        padding-left: 0;
        padding-right: 0;
    } 

    .PageText {
        padding-left: 10px;
        padding-right: 10px;
    }

    #ContactIconsBox {
        flex-direction: column; /* Stacks items vertically */
        align-items: center; /* Centers items horizontally */
    }

    .ContactBox {
        margin-left: 40%;
    } 

}