* {
    /* font-family: "Times New Roman", Times, serif; */
    /* font-family: Tahoma, Verdana, sans-serif; */
    font-family: "Spectral", serif;
    font-weight: 400;
    font-style: normal;
}

.desiredBody {
    background-color: #001f3d; 
}

main {
    background-color: #045174;  
}

footer {
    background-color: seashell;
}

.tab { display: none; }
.tab.active { display: block; }

img.samples {
    height: 200px;
    width: 250px;
    border-radius: 8px;
    margin: 20px 10px 50px;
    object-fit: cover;
}

.bigTitle {
    text-align: center;
    font-size: 60px;
    font-weight: bold;
    color: seashell;
    margin: 0px 0px 0px 0px;  
    padding: 40px 26px;
}

.subTitle {
    text-align: center;
    font-size: 24px;
    color: seashell;
}

h3.about {
    font-size: 30px;
    color: seashell;
    background-color:#001f3d;
    max-width: 900px;
    margin: auto;
    padding: 5px 10px;
    font-weight: bold;
}

h4 {
    margin: 0px 0px 0px 0px; 
}

p, ul {
    color: seashell;
    font-size: 23px;
    max-width: 75%;
    margin: auto;
    line-height: 1.5;
}

.num {
    color: #045174;
    font-size: 20px;
    font-weight: bold;
    /* text-shadow: 0px 0px 30px #045174; */
}

.description {
    color: #001f3d;
    font-size: 23px;
    padding: 20px 0px 0px;
    font-weight: bold;
    max-width: 100%;
}

.descriptionSeashell {
    color: seashell;
    font-size: 23px;
    padding: 20px 0px 0px;
    font-weight: bold;
    max-width: 100%;
}

.descriptionTeal {
    color: #045174;
    font-size: 23px;
    padding: 20px 0px 0px;
    font-weight: bold;
    max-width: 100%;
}



.subDescription {
    color: #001f3d;
    font-size: 17px;
    max-width: 100%;
}

.subDescriptionSeashell {
    color: seashell;
    font-size: 17px;
    max-width: 100%;
}

.subDescriptionTeal {
    color: #045174;
    font-size: 17px;
    max-width: 100%;
}

.logo {
    height: 150px;
    width: auto;
}

.logoThanks {
    display: block;
    height: 250px;
    width: auto;
    margin: 30px auto 0px;
}

.tabBar {
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    background-color: #e87a00;
}

.tabBar a {
    display: inline-block;
    color: seashell;
    background-color: #e87a00;
    font-weight: bold;  
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 18px;
    transition: transform 0.2s ease;
}

.tabBar a:hover {
    transform: scale(1.1)
}

.tabBar a.currentTab {
    background-color: #045174;
}

.btn:hover {
    transition: transform 0.2s ease;
    transform: scale(1.02)
}

.containerNumbers {
    display: flex;            /* puts items in a row */
    flex-wrap: wrap;
    justify-content: center;
    max-width: 80%; /*changed from 75%*/
    margin: auto;
    gap: 20px;                /* spacing between boxes */
    padding: 0px 20px;
}

.boxNumbers {
    /* flex: 1;                  each takes equal width */
    flex: 1 1 220px; 
    /* flexible but with a min width */
    /* max-width: 220px; */
    padding: 20px 20px 0px;
    border-radius: 8px;
    background-color: seashell;
    text-align: center;
}

::placeholder {
    color: #001f3d !important; /* important to override bootstrap*/
    opacity: 0.7 !important;
}

input.invalid, select.invalid {
    /* lighter orange */
    background-color: #eab899; 
}





@media (max-width: 768px) {
  .tabBar a {
    font-size: 14px;
    padding: 10px 12px;
  }
}
@media (max-width: 480px) {
  .tabBar a {
    font-size: 12px;
    padding: 8px 5px;
  }
}