/* add font Samiyatta */
@font-face {
    font-family: "Samiyatta Sans Serif"; /* Name your font family */
    src: url("../fonts/samiyatta-sans-serif.ttf") format("truetype"); /* Specify the path to your font file and its format */
}

/* add font Biocats */
@font-face {
    font-family: "Biocats"; /* Name your font family */
    src: url("../fonts/Biocats.ttf") format("truetype"); /* Specify the path to your font file and its format */
    src: url("../fonts/Biocats.otf") format("opentype"); /* Specify the path to your font file and its format */
}

/* add font ProtestStrike-Regular */
@font-face {
    font-family: "ProtestStrike-Regular"; /* Name your font family */
    src: url("../fonts/ProtestStrike-Regular.ttf") format("truetype"); /* Specify the path to your font file and its format */
    src: url("../fonts/ProtestStrike-Regular.otf") format("opentype"); /* Specify the path to your font file and its format */
    src: url("../fonts/ProtestStrike-Regular.woff2") format("woff2"); /* Specify the path to your font file and its format */
}

/* add font LTSpaz-regular - otf */
@font-face {
    font-family: "LTSpaz-regular"; /* Name your font family */
    src: url("../fonts/LTSpaz-regular.otf") format("opentype"); /* Specify the path to your font file and its format */
}

/* add font Sohungry - otf, ttf */
@font-face {
    font-family: "Sohungry"; /* Name your font family */
    src: url("../fonts/Sohungry.otf") format("opentype"); /* Specify the path to your font file and its format */
    src: url("../fonts/Sohungry.ttf") format("truetype"); /* Specify the path to your font file and its format */
}

/* add font Namecat - otf, ttf */
@font-face {
    font-family: "Namecat"; /* Name your font family */
    src: url("../fonts/Namecat.otf") format("opentype"); /* Specify the path to your font file and its format */
    src: url("../fonts/Namecat.ttf") format("truetype"); /* Specify the path to your font file and its format */
}

/* add font Showthat - otf, ttf */
@font-face {
    font-family: "Showthat"; /* Name your font family */
    src: url("../fonts/Showthat.otf") format("opentype"); /* Specify the path to your font file and its format */
    src: url("../fonts/Showthat.ttf") format("truetype"); /* Specify the path to your font file and its format */
}

/* open-sans-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/open-sans-v40-latin-regular.woff2") format("woff2"),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url("../fonts/open-sans-v40-latin-regular.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 500;
    src: url("../fonts/open-sans-v40-latin-500.woff2") format("woff2"),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url("../fonts/open-sans-v40-latin-500.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    src: url("../fonts/open-sans-v40-latin-600.woff2") format("woff2"),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url("../fonts/open-sans-v40-latin-600.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/open-sans-v40-latin-700.woff2") format("woff2"),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url("../fonts/open-sans-v40-latin-700.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background-color: #fff;
    background-image: url("../img/kachel.png");
}

/* Style for the Header Section */
.header {
    position: relative;
    width: 100%;
    padding: 0.6rem 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    color: #f2f3f4;
    /* font-family: 'Samiyatta Sans Serif', sans-serif; */
    font-family: "ProtestStrike-Regular", sans-serif;
    /* font-family: 'Biocats', sans-serif; */
    /* font-family: 'LTSpaz-regular', sans-serif; */
    /* font-family: 'Sohungry'; */
    /* font-family: 'Namecat'; */
    /* font-family: 'Showthat'; */
}

.header__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0.5rem;
}

.header__logo img {
    width: 35px;
    height: auto;
}

.header__text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header__text h2 {
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase;
    color: #9fbeeb;
}

.header__text h2 span {
    color: #377be1;
}

.container-fluid {
    width: 100%;
    /* padding: 0; */
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.clear {
    clear: both;
}

.container1 {
    max-width: 1200px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 3rem 0;
    margin-left: auto;
    margin-right: auto;
}

.container1 .left_side {
    order: 1;
}

.container1 .left_side img {
    width: 100%;
    height: auto;
}

.container1 .right_side {
    order: 2;
    background: rgba(251, 246, 244, 0.85);
    border: 3px solid #fff;
    border-radius: 2rem;
    padding: 2.5rem;
}

.container1 .right_side .right_info h2 {
    font-family: "ProtestStrike-Regular", sans-serif;
    /* font-family: 'Biocats', sans-serif; */
    /* font-family: 'LTSpaz-regular', sans-serif; */
    /* font-family: 'Sohungry'; */
    /* font-family: 'Namecat'; */
    /* font-family: 'Showthat'; */
    color: #d90b15;
    font-weight: 500;
    text-align: center;
    margin: 0;
    padding-bottom: 1.5rem;
}

.container1 .right_side .right_info p {
    font-family: "Open Sans", sans-serif;
    line-height: 160%;
    font-weight: 600;
    padding-bottom: 1.6rem;
    border-bottom: 2px solid #d4d4d4;
    color: #4c4d4e;
}

.container2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1200px;
    gap: 1rem;
}

.container2 .profile {
    width: calc((100% - 5rem) / 6 - 1rem); /* Calculate the width for 6 images per row */
    margin: 0.5rem; /* Margin to create spacing between pictures and rows */
    box-sizing: border-box; /* Ensure border is included in the total width */
    display: flex;
    align-items: center;
    justify-content: center;
}

.container2 .profile img {
    width: 100%;
    height: auto;
    border: 3px solid #ffffff;
    box-sizing: border-box;
    border-radius: 0.5rem;
}

.container3 {
    max-width: 1200px;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 2rem;
    padding: 2rem;
    margin-left: auto;
    margin-right: auto;
    background: rgba(251, 246, 244, 0.85);
    border: 3px solid #fff;
    border-radius: 2rem;
}

.container3 h2 {
    font-family: "ProtestStrike-Regular", sans-serif;
    color: #d90b15;
    font-weight: 500;
    margin: 0;
    padding-bottom: 1.5rem;
}

.container3 p {
    font-family: "Open Sans", sans-serif;
    font-size: 1rem;
    line-height: 160%;
    font-weight: 600;
    color: #4c4d4e;
    margin-bottom: 0;
}

.container3 .button_container{
    display: flex;
    position: relative;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 2rem auto 0;
    text-align: center;
    width: 300px;
}

.container3 .button_container .footer_button {
    border: 2px solid #3374d3 !important;
    padding: 0.625rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 18px;
    background-color: #3374d3;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    border-radius: 2rem;
    color: #fff;
    text-decoration: none;
    width: 80%;
    vertical-align: text-bottom !important;
    transition: 0.3s;
    appearance: button;
    -webkit-appearance: button;
    cursor: pointer;
}   

.container3 .button_container img {
    position: absolute;
    right: -65px;
    bottom: 5px;
    width: 70px;
}

.footer {
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: #a4a2a2;
    margin-top: 2rem;
}

.footer-content {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    align-items: baseline;
    justify-content: flex-end;
    padding-right: 2rem;
    gap: 0.5rem;
}

.footer-content a {
    color: #a4a2a2;
    text-decoration: none;
}

.footer-content a:hover {
    color: #fff;
}

/* Media query for mobile */
@media (max-width: 767px) {
    .container-fluid {
        padding: 0;
    }

    .container1 {
        flex-direction: column;
        align-items: center;
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .container1 .right_side .right_info h2 {
        font-size: 1.6rem;
    }

    .container1 .right_side {
        margin-top: 2rem;
        padding: 2rem;
    }

    .container2 .profile {
        width: calc((100% - 4rem) / 3 - 1rem);
    }

    .container3 {
        margin: 2rem;
        padding: 2rem;
    }

    .container3 h2 {
        font-size: 1.6rem;
        text-align: center;
    }

    .container3 .button_container{
        width: 100%;
        max-width: 300px;
    }
    
    .container3 .button_container img {
        position: absolute;
        right: -32px;
        bottom: 12px;
        width: 55px;
    }

    .header {
        padding: 0.5rem;
    }

    .header__container {
        gap: 0.5rem;
    }
    .header__text {
        margin-left: 0;
    }

    .header__text h2 {
        font-size: 1.6rem;
    }

    .header__logo img {
        width: 30px;
    }
}