@font-face {
    font-family: 'Pathway Gothic One';
    src: url('fonts/PathwayGothicOne-Regular.ttf') format('truetype');
    font-display: block;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Regular.ttf') format('truetype');
    font-display: block;
}

body, html {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-color: rgb(100, 48, 30);
    color: white;
}




.head {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-bottom: 30vh;
    margin-top: 15vh;

}


/* Rest of the CSS */

#scrollText {
    display: none; /* Add this line */
    font-family: 'Pathway Gothic One';
    font-size: 20em;
    color: white;
    opacity: 1;
    transition: opacity 1s;
    top: 20%;
    position: absolute;
    bottom: 10%; /* Adjust this value to move the text up or down */

}


body.no-scroll {
    overflow: hidden;
}

.head #scrollImage {
    display: flex;
    opacity: 0;
    transition: opacity 1s;
    justify-content: center;
    margin: 0 auto;
}
#scrollImage img {
    max-width: 100%;
    height: auto;
}

.section {
    flex-direction: column;
    width: 70%;
    margin-left: 15%;
    height: 130vh;
    position: relative;
    overflow: hidden;
    display: flex; /* Add this line to create a flex container */
    justify-content: center; /* Add this line to center content horizontally */
    align-items: center; /* Add this line to center content vertically */
}


.content {
    position: relative;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -30%);
    opacity: 0;
    transition: opacity 1s;
    font-size: 19pt;
}

.content.active {
    opacity: 1;
}
.content img {
    max-width: 100%; /* Add this line to limit the image width */
}


.image-row {
    display: flex;
    justify-content: space-between; /* to spread the images across the row, use "center" to align them to the center, "flex-start" to align left, "flex-end" to align right */
}
.image-row img {
    width: 48%; /* this makes sure that the images don't exceed half the container width, adjust according to your needs */
}



.image-row2 {
    display: flex;
    justify-content: space-between; /* to spread the images across the row, use "center" to align them to the center, "flex-start" to align left, "flex-end" to align right */
}


.team-member {
    width: 22%; /* this ensures the team members take up approximately 1/4 of the container width each */
    text-align: center; /* to center the caption */
    margin-bottom: 2em; /* space between rows in case of wrapping */
}

.team-member img {
    width: 100%; /* to make sure the image takes the full width of its parent container */
    height: auto; /* to maintain aspect ratio */
    margin-bottom: -10px; /* Adjust this value as needed */
}


.section5 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 60vh;  /* modify this according to your needs */
    width: 80%;
    padding: 10px;
    margin-bottom:5px;
    margin-left: 10%;
    font-size:25px;

}

.centered-text {
    margin-bottom:3vh;
}

.image-caption {
    font-size:25px;
}




.twitter-button {
    display: inline-block;
    background-color: #1da1f2;
    color: white;
    padding: 10px 10px;
    border-radius: 50%;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.twitter-button:hover {
    background-color: #0c85d0;
}

.twitter-button i {
    font-size: 30px;
}

.line-before-twitter {
    border-top: 1px solid white; /* color of line */
    margin: 30px 0; /* add some vertical space before and after the line */
}

.twitter-button-wrapper {
    display: flex;
    justify-content: center; /* this will center the child elements horizontally */
    margin-bottom: 5vh;
}



.content img {
    max-width: 100%; 
}







/* Rest of the CSS */



/* Medium devices (landscape tablets, 900px and up) */
@media only screen and (min-width: 768px) and (max-width:1280px){
    .section {
        width: 70%;
        margin-left: 15%;
        height:120vw;
    }
    .content {
        font-size: 19pt;
    }
    .image-row img, .team-member {
        width: 48%;
    }
    .section5 {
        width: 80%;
        margin-left: 10%;
        height:60vw;
    }
    .team-member {
        width: 22%;
    }

}


/* Small devices (portrait tablets and large phones, 600px to 900px) */
@media only screen and (min-width: 576px) and (max-width: 768px) {


    #scrollText {
        font-size: 16em;
    }
    

    .head{
        width:80%;
    }
    .section {
        width: 80%;
        margin-left: 10%;
            height:120vw;
    }
    .content {
        font-size: 14pt;
    }
    .image-row img {
        width: 48%;
    }
    .team-member {
        width: 22%;
    }
    
    .section5 {
        width: 80%;
        margin-left: 10%;
        font-size:14px;
    }
    .section5 p{
        font-size:14px;
    }

}



/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 576px) {
    .head{
        width:80%;
    }

    #scrollText {
        font-size: 12em;
    }
    .section {
        width: 80%;
        margin-left: 10%;
        height:80vh;
    }
    .content {
        font-size: 12pt;
    }
    .image-row img {
        width: 48%;
    }
    .team-member {
        width: 22%;
    }
    
    .section5 {
        width: 80%;
        margin-left: 10%;
        font-size:14px;
        height:35vh;
    }
    .section5 p{
        font-size:14px;
    }
}