.content-container {
margin-top: 75px;
padding-left: 10%;
padding-right: 10%;
padding-top: 5%;
width: 80%;
flex: 1;
}
.global-message {
width: 50%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.global-message-header {
text-align: center;
margin-top: 0px;
font-style: normal;
font-weight: 400;
line-height: 1.55;
font-family: system-ui;
}
.global-message-p {
text-align: center;
margin-top: 0px;
font-style: normal;
font-weight: 400;
line-height: 1.55;
font-size: 1.05rem;
font-family: system-ui;
}
.center-space {
text-align: center;
width: 100%; /* Adjust as needed */
margin: 20px 0; /* Provides some spacing */
}
.spacer {
height: 30px;
margin-top: 10px;
}
.home-img {
display: block; /* Makes sure it's a block-level element */
margin: 0 auto; /* Centers the figure element */
width: 100%; /* Relative width to its container */
max-width: 100%; /* Ensures it doesn't exceed the width of its container */
}
.home-img img {
width: 100%; /* Makes the image responsive */
height: auto; /* Maintains the aspect ratio */
border-radius: 40px; /* Preserves any border radius if desired */
}
.content-container2 {
margin-top: 75px;
padding-left: 10%;
padding-right: 10%;
padding-top: 5%;
width: 80%;
flex: 1;
background-color: white;
padding-bottom: 75px;
}
.three-columns {
display: flex;
justify-content: space-evenly;
align-items: flex-start;
margin-top: 20px;
}
.column {
flex: 1;
padding: 10px;
text-align: center;
width: 30%;
}
.column p {
}
.global-message-header2 {
text-align: center;
margin-top: 0px;
font-style: normal;
font-weight: 400;
line-height: 1.55;
font-family: system-ui;
}
.content-container3 {
padding-left: 10%;
padding-right: 10%;
padding-top: 5%;
width: 80%;
flex: 1;
background-color: none;
padding-bottom: 10px;
}
.content-container4 {
padding-left: 10%;
padding-right: 10%;
padding-top: 5%;
width: 80%;
flex: 1;
background-color: white;
padding-bottom: 8%;
}
.two-column-flex {
display: flex;
justify-content: space-between; /* Adjust as needed */
align-items: flex-start;
}
.join-us-column, .subscribe-column {
display: flex;
flex-direction: column;
align-items: center; /* Center items vertically */
}
.button-container {
display: flex;
justify-content: center;
gap: 20px; /* Space between buttons */
margin-top: 0px; /* Space above the button container */
}
.nav-row {
display: flex;
flex-wrap: wrap;
gap: 1vw;
width: 100%;
background-color: rgb(5, 7, 36);
position: fixed;
top: 0;
left: 0;
z-index: 1000;
height: 75px;
align-items: center;
justify-content: flex-start;
}
/*---------------------------------------------------------------------------*/
@media only screen and (max-width: 1225px) {
.content-container {
margin-top: 45px;
padding-left: 0%;
padding-right: 0%;
padding-top: 5%;
width: 95%;
flex: 1;
}
.global-message {
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.global-message-header {
text-align: center;
margin-top: 0px;
font-style: normal;
font-weight: bold;
line-height: 1.55;
}
.global-message-p {
text-align: center;
margin-top: 0px;
font-style: normal;
font-weight: 400;
line-height: 1.55;
font-size: 1.05rem;
font-family: system-ui;
width: 90%;
margin-left: auto;
margin-right: auto;
}
.center-space {
text-align: center;
width: 100%; /* Adjust as needed */
margin: 20px 0; /* Provides some spacing */
}
.spacer {
height: 30px;
margin-top: 10px;
}
.home-img {
display: block; /* Makes sure it's a block-level element */
margin: 0 auto; /* Centers the figure element */
width: 100%; /* Relative width to its container */
max-width: 100%; /* Ensures it doesn't exceed the width of its container */
}
.home-img img {
width: 100%; /* Makes the image responsive */
height: auto; /* Maintains the aspect ratio */
border-radius: 20px; /* Preserves any border radius if desired */
}
.content-container2 {
margin-top: 75px;
padding-left: 10%;
padding-right: 10%;
padding-top: 5%;
width: 80%;
flex: 1;
background-color: white;
padding-bottom: 75px;
}
.three-columns {
display: table-row;
justify-content: space-evenly;
align-items: flex-start;
margin-top: 20px;
}
.column {
flex: 1;
padding: 10px;
text-align: center;
width: 80%;
margin-left: auto;
margin-right: auto;
}
.column p {
}
.global-message-header2 {
text-align: center;
margin-top: 0px;
font-style: normal;
font-weight: 400;
line-height: 1.55;
margin-left: auto;
margin-right: auto;
}
.content-container3 {
padding-left: 10%;
padding-right: 10%;
padding-top: 5%;
width: 80%;
flex: 1;
background-color: none;
padding-bottom: 10px;
}
.content-container4 {
padding-left: 10%;
padding-right: 10%;
padding-top: 5%;
width: 80%;
flex: 1;
background-color: white;
padding-bottom: 8%;
}
.two-column-flex {
display: table-row;
justify-content: space-between; /* Adjust as needed */
align-items: flex-start;
}
.join-us-column, .subscribe-column {
display: flex;
flex-direction: column;
align-items: center; /* Center items vertically */
}
.subscribe-column {
margin-top: 20px;
}
.button-container {
display: flex;
justify-content: center;
gap: 20px; /* Space between buttons */
margin-top: 0px; /* Space above the button container */
}
}