:root {
    --base-clr: #324B50;
    --line-clr: #42434a;
    --hover-clr: rgba(149, 176, 182, 0.3);
    --text-clr: #e6e6ef;
    --accent-clr: #81cad9;
    --secondary-text-clr: #b0b3c1;
    --Tertiary-Color: #95b0b6; /* Light Greyish/Blue */
}
body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Figtree', sans-serif;
    background-color: #ffffff;
    background-image: url(../assets/images/WebBackground2.png);
    background-size: 100% auto;
    background-position: top center;
    background-repeat: repeat-y;
    background-attachment: scroll;
    min-height: 100vh;
}
main {
    margin: 0 auto;
    margin-top: 7rem;
    max-width: 100%;
}  
/*Styling for the Founders Statement*/
.TopLine {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    text-align: center;
    font-weight: 200;
    font-size: 2.5rem;
}
.subheading {
    text-align: center;
    font-size: 2rem;
    font-weight: 100;
    color: var(--base-clr);
    width: 60%;
    margin: 0 auto 3rem auto;;
}
.foundingStatement {
    text-align: center;
    font-size: 2.0em;
    font-weight: 600;
    margin-bottom: 1rem;
}
.StatementContainer {
    border-radius: 30px;
    box-shadow: 0 2px 8px var(--base-clr);
    padding: 3rem;
    width: 75%; /* Restrict the maximum width */
    margin: 0 auto; /* Center the container horizontally */
    text-align: left;
    justify-content: center;
    background-color: #ffffff;
}
.Statement {
    font-size: 1.5em;
    font-weight: 200;
    line-height: 1.75;
    font-style: italic;
    text-indent: 3rem;
}
.FounderName {
    margin-top: 2rem;
    font-size: 2.0rem;
    font-weight: 600;
    text-align: center;
}
.darkblue-font {
    color: var(--base-clr);
}

.blue-font {
    color: var(--Tertiary-Color);
}

.darkblue-font, .blue-font {
    font-weight: 800;
}
/*Styling for the Meet Our Team Area*/
.TopLine2 {
    margin-top: 4rem;
    font-weight: 700;
    font-size: 3.0rem;
    text-align: center;
    color: var(--base-clr)
}
.team-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    margin: 0 auto;
    border-radius: 10px;
    margin-top: 1.25rem;
}
.team-member-image {
    border-radius: 50%;
    width: 6.5rem;
    height: 6.5rem;
    box-shadow: 0 3px 10px var(--base-clr);
    object-fit: cover;
    margin: 0.75rem auto; /* Centers the image horizontally */
    display: block; /* Ensures the image behaves like a block element */
}
.team-member-name {
    font-size: 1.5rem;
    font-weight: 600;   
    color: var(--base-clr);
    text-align: center;
    margin-bottom: 1rem;
}
.team-member-title {
    font-size: 1.5em;
    font-weight: 200;
    font-style: italic;
    color: var(--base-clr);
    text-align: center;
}
.team-member {
    background-color: #ffffff; /* White background for the container */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 2px 8px var(--base-clr); /* Subtle shadow for the container */
    padding: 1rem; /* Add padding inside the container */
    text-align: center; /* Center-align the content inside */
    width: 12.5rem; /* Set a fixed width for each profile */
    height: 18rem; /* Set a fixed height for each profile */
    margin: 0.75rem; /* Add spacing between team member containers */
}
/*Styling for the Vision section*/
.vision-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    margin: 0 auto;
    border-radius: 10px;
    margin-top: 4rem;
    margin-bottom: 8rem;
}
.vision-icon {
    border-radius: 50%;
    background-color: white;
    width: 5.5rem;
    height: 5.5rem;
    box-shadow: 0 3px 10px var(--base-clr);
    object-fit: contain;
    margin: 1rem auto; /* Centers the image horizontally */
    display: block; /* Ensures the image behaves like a block element */;
    padding: 0.25rem;
    box-sizing: border-box;
    margin-top: -3.5rem;
}
.vision-title {
    font-size: 2.0em;
    font-weight: 700;
    color: var(--base-clr);
    text-align: center;
    margin-bottom: 5px;
}
.vision-description {
    font-size: 1.5em;
    font-weight: 200;
    color: var(--base-clr);
    text-align: center;
}
.vision-box {
    background-color: #ffffff; /* White background for the container */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 2px 8px var(--base-clr); /* Subtle shadow for the container */
    padding: 20px; /* Add padding inside the container */
    text-align: center; /* Center-align the content inside */
    width: 320px; /* Set a fixed width for each profile */
    margin: 5px; /* Add spacing between team member containers */
}
/*Scrolling animations*/
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1000ms ease-out, transform 500ms ease-out;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}
/* Mobile Styling */
@media (max-width: 768px) {
    body {
        background-size: 200% auto, 200% auto;
        background-position: top center, top 200vh center;
        overflow-x: hidden;
    }
    .TopLine {
        background-color: white;
    }
    .subheading {
        width: 85%;
        background-color: white;
    }
    .StatementContainer {
        width: 90%;
        padding: 2rem;
        font-size: 0.75rem;
    }
    .FounderName {
        font-size: 1.5rem;
    }
    .team-section {
        margin-top: 8.5rem;
    }
    .TopLine2 {
        margin-top: 0;
    }
    /* Max 430px */
@media (max-width: 430px) {
    .StatementContainer {
        font-size: 0.7rem;
        padding: 1.75rem;
    }
    .FounderName {
        font-size: 1.4rem;
    }
}

/* Max 412px */
@media (max-width: 412px) {
    .StatementContainer {
        font-size: 0.68rem;
    }
}

/* Max 390px */
@media (max-width: 390px) {
    .StatementContainer {
        font-size: 0.65rem;
        padding: 1.5rem;
    }
    .FounderName {
        font-size: 1.35rem;
    }
}

/* Max 375px */
@media (max-width: 375px) {
    .StatementContainer {
        font-size: 0.62rem;
    }
    .FounderName {
        font-size: 1.3rem;
    }
}

/* Max 360px */
@media (max-width: 360px) {
    .StatementContainer {
        font-size: 0.6rem;
        padding: 1.25rem;
    }
    .FounderName {
        font-size: 1.25rem;
    }
}

/* Max 320px */
@media (max-width: 320px) {
    .subheading {
        width: 90%;
    }
    .StatementContainer {
        font-size: 0.55rem;
        padding: 1rem;
    }
    .FounderName {
        font-size: 1.15rem;
    }
}
}