* {
    font-family: "Calibri", "Verdana", "Candara", "Segoe", "Segoe UI", "Optima", "Arial", "sans-serif" !important;
}

body {
    background-color: #FFFFFF;
    margin: 0;
    padding: 0;
}

    .ui-dialog-titlebar {
        background-color: rgba(238, 46, 36, 0.90);
        color: white;
    }

    .ui-dialog-titlebar button {
        color: white;
    }

.content-body {
    padding-left: 30px;
    padding-right: 30px;
}
@media (max-width: 791px) {
    .content-body{
        padding-left: 0px;
        padding-right: 0px;
    }
}
.Info-Text {
    padding-left: 100px;
    padding-right: 100px;
    /* padding-top: 20px; */
    text-align: center;
    font-size: 26px !important;
    color: #002C57 !important;
}
.Info-Text-Sub {
    padding-left: 100px;
    padding-right: 100px;
    text-align: center;
    font-size: 22px !important;
    color: #002C57 !important;
}
.TCC-Text {
    padding-left: 100px;
    padding-right: 100px;
    /* padding-top: 20px; */
    text-align: left;
    font-size: 26px !important;
    color: #002C57 !important;
}

.Banner-Container {
    position: relative;
    /* top: 30px; */
    padding: 20px;
    /* margin-right: 15px; */
}
.Banner-Header {
    padding-top: 0px;
}
.Banner-Footer {
    padding-bottom: 0px;
}
.Banner-Image{
    width: 100%;
    /* max-width: 1800px; */
    height: auto;
    border-radius: 30px;
    padding-left: 10px;
    padding-right: 10px;
}
.Inlay-Image {
    position: absolute;
    align-items: left;
    top: 20%;
    /* left: 100px; */
    max-width: 1000px;
    width: 45%;
    height: auto;
}
.Inlay-Image-Right {
    position: absolute;
    align-items: right;
    top: 35%;
    /* left: 45%; */
    max-width: 600px;
    width: 50%;
    height: auto;
}
@media (max-width: 791px) {
    .Inlay-Image-Right {
        left: 38% !important;
    }
    .Inlay-Image{
        left: 50px;
    }
}
@media (max-width: 550px) {
    .Inlay-Image{
        left: 10px;
    }
}
.TCs {
    width: 80%;
    max-width: 1000px;
    padding: 20px;
    margin-left: 5%;
}

.section-image-container{
    display: flex;
    align-items: flex-start;
    padding-bottom: 2em;
    padding-top: 1em;
}
.section-image-div{
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 20px;
}
.section-image{
    max-width: 100%;
    height: auto;
}

.Requirements-Container{
    margin: 0;
    padding: 0;
}

.card-Container{
    display: flex;
    align-items: flex-start;
    padding-bottom: 2em;
    padding-top: 1em;
}
.leftSide{
    flex: 1;
    display: flex;
    justify-content: right;
    align-items: right;
    padding: 20px;
}
.rightSide{
    flex: 1.5;
    display: flex;
    flex-direction: column;
}
.Card-Image{
    max-width: 100%;
    height: auto;
}
.cardBlock-rightSide{
    flex: 1.5;
    display: flex;
    flex-direction: column;
}
.block {
    background-color: #F0F1F0;
    margin-bottom: 10px;
    margin-top: 10px;
    text-align: left;
    border-radius: 10px;
    margin-right: 10%;
    color: #002C57 !important;
    font-size: 26px !important; 
    max-width: 700px;
}
.block:last-child {
    margin-bottom: 0;
}
.Block-Text{
    font-size: 24px !important;
    margin-left: 5% !important;
    margin-block: 10px !important;
}
@media (max-width: 768px) {
        .card-Container {
            flex-direction: column;
            align-items: center;
        }
        .cardBlock-rightSide .block{
            margin-right: 0% !important;
        }
    }

.Apply-ButtonContainer{
    display: flex;
    justify-content: center;
    padding: 1em 0em 1em 0em;
}
.Apply-Button{
    width: 100% !important;
    max-width: 140px !important;
}

.Account-Benefits-Row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    margin: 30px;
}
.Card {
    background-color: #F0F1F0;
    border-radius: 15px;
    position: relative;
    padding: 60px 20px 20px 20px; /* Adjusted padding to make space for the title */
    flex: 1 1 calc(33.333% - 40px); /* Ensures each card takes up 1/3 of the row */
    max-width: calc(33.333% - 40px); /* Ensures cards don't exceed 1/3 width */
    box-sizing: border-box; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: visible; /* Ensure content is not clipped */
    margin-top: 1em;
}
.Card-Light {
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
    background-color: #FFFFFF;
}
.Card .Card-Title {
    position: absolute;
    top: 0; /* Changed top value to 0 to prevent clipping */
    transform: translateY(-50%); /* Move the title up by 50% of its height */
    background-color: #FFFFFF;
    border-radius: 10px;
    padding: 10px 20px;
    max-width: 80%;
    display: flex;
    align-items: center;
    box-sizing: border-box; 
    z-index: 2; /* Ensures the title is above the content */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1)); /* Adds the shadow */
}
.Card .Card-Title .Card-Icon {
    width: auto;
    height: 30px;
    margin-right: 10px;
}
.Card .Card-Title .Card-Title-Text {
    color: #002C57;
    font-weight: bold !important;
    font-size: 20px;
}
.Card-Light .Card-Content .Card-Title-Text {
    color: #002C57;
    font-weight: bold !important;
    font-size: 18px !important;
}
.Card .Card-Content {
    text-align: center;
    flex: 1;
}
.Card-Text{
    font-size: 18px !important;
    font-weight: 400 !important;
    color: #002C57;
    font-family: "Calibri", "Verdana", "Candara", "Segoe", "Segoe UI", "Optima", "Arial", "sans-serif" !important;
}

.Red-Style {
    color: #E42313;
    /* font-family: 'Calibri'; */
}

.Specify-Bold {
    font-style: bold;
}

/*Only applies to the card items. Makes them change to 2 or 1 per row depending on size of window*/
@media (max-width: 1250px) {
    .Card {
        flex: 1 1 calc(50% - 30px); /* 2 items per row */
        max-width: calc(50% - 30px); /* Ensures cards don't exceed 1/2 width */
    }

    /*New text adjustment*/
    .Block-Text, 
    .ReqBlockText, 
    .Block-Text[style], 
    .ReqBlockText[style], 
    .Block-Text *, 
    .ReqBlockText * {
        font-size: 18px !important;
    }
}

@media (max-width: 820px) {
    .Card {
        flex: 1 1 calc(100% - 40px); /* 1 item per row */
        max-width: calc(100% - 40px); /* Ensures cards don't exceed full width */
    }
}

/*Creating new Requirements Title*/
.RequirementsTitle {
    margin-top: 20px;
    padding: 15px 30px 0px 30px;
}
.ReqTitleBlock {
    background-color: #F0F1F0;
    text-align: Center;
    border-radius: 5px;
    color: #002C57 !important;
    font-size: 26px !important; 
    font-weight: 400;
}
.ReqTitleBlock p {
    padding: 20px 150px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.1);
    display: inline-block;
    margin: -5px -10px;
    font-weight: bolder;
}
.ReqTitleBlockText {
    font-size: 22px !important;
    font-weight: 400 !important;
    color: #002C57 !important;
}



.Requirements {
    padding: 15px 30px 0px 30px;
}
.ReqBlock {
    background-color: #F0F1F0;
    text-align: left;
    border-radius: 5px;
    color: #002C57 !important;
    font-size: 26px !important; 
    font-weight: 400;
}
.ReqBlock p {
    padding: 8px;
    margin-left: 1%;
}
.ReqBlockText{
    font-size: 22px !important;
    font-weight: 400 !important;
    color: #002C57 !important;
}

    /* Features Table */
.table-block {
    display: flex;
    background-color: #F0F1F0;
    border-radius: 15px;
    padding: 15px;
    /* text-align: left; */
    margin: 20px 0;
}

.table-block .col-md-4 {
    flex: 1;
    text-align: center;
    color: #002C57;
    font-size: 18px;
    font-weight: bold;
}

.table-block .col-md-4 span {
    font-size: 14px;
    display: block;
    color: #002C57;
}

.features-table {
    width: 100%;
    /* Use separate to allow border-radius to work */
    border-collapse: separate;
    /* Remove spacing between table cells */
    border-spacing: 0; 
    margin: 0 0 20px 0;
    font-size: 18px;
}

.features-table tbody {
    
    background-color: #FFFFFF;
    /* border-radius: 0 0 15px 15px; */
    overflow: hidden;
}

.features-table th, .features-table td {
    padding: 8px;
    border: none; /* Remove table borders */
    /* color: #002C57; */
}

.features-table tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}

.features-table tbody tr:hover {
    background-color: #ddd;
}

.check {
    color: rgb(255, 0, 0) !important; /* RGB value for red */
    text-align: center;
    font-weight: bolder;
}

.cross {
    color: #002C57;
    text-align: center;
}

.td-list-description {
    color: #002C57;
    text-align: center;
  }

.td-description {
    color: #002C57;
}

.Card-Title-Text-Manager{
    font-size: 55px;
}

.Card-Title-Mod {
    transform: translateY(-30%) !important;
    padding: 30px 20px !important;
    max-width: unset !important;
}

.button-link {
    display: inline-block;
    padding: 5px 15px;
    font-size: 24px;
    color: rgb(234, 234, 234) !important;
    background-color: #001B30 !important;
    border: none;
    border-radius: 25px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    margin-right: 0.5em;
    margin-left: 0.5em;
}

.button-link p {
    margin: 0 0 0px !important;
}

.button-link:hover {
  color: white !important;
}
.feature-box{
    width: 30%;
    text-align: center;
    padding: 3em !important;
    border-top: none;
}
.feature-title {
    color: #002C57;
    font-size: 32px !important;
}
@media (max-width: 1223px) {
    .Card-Title-Text-Manager{
        font-size: 30px !important;
    }
    .Card-Title-Mod {
        transform: translateY(-22%) !important;
        padding: 40px 20px !important;
    }
}

@media (max-width: 744px) {
    .Card-Title-Text-Manager{
        font-size: 20px !important;
    }
    .Table-Header {
        margin-right: unset !important;
        margin-left: unset !important;
    }
    .Card-Title-Mod {
        padding: 50px 20px !important;
    }
    .Info-Text {
        padding: 15px 15px 15px 15px !important;
    }
    .Info-Text-Sub {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    .TCC-Text {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}

@media (max-width: 567px) {
    .Info-Text p{
        margin: 0px !important;
    }
    .Info-Text strong, .Info-Text span {
        font-size: 22px !important;
    }
    .Card-Title-Text-Manager{
        font-size: 18px !important;
    }
    .Card-Title-Text {
        font-size: 15px !important;
    }
    .Card-Title-Mod{
        padding: 50px 8px !important;
        margin: -6px !important;
    }
    .block {
        margin-right: 3% !important;
        margin-left: 3% !important;
    }
    .Banner-Container {
        padding: 15px 0px 15px 0px !important
    }
    .Banner-Image {
        border-radius: 0px !important;
        padding-left: 0px !important;
        padding-right: 10px !important;
    }
    .Account-Benefits-Row {
        justify-content: center;
        margin: 15px 0px 0px 0px !important;
        padding: 15px 0px 15px 0px !important;
    }
    .Apply-ButtonContainer {
        flex-direction: column;
        align-items: center;
    }
    .Apply-ButtonContainer .button-link {
        margin: 0.2em;
    }
    .ReqTitleBlock p {
        padding: 10px 50px;
        background-color: white;
        border-radius: 5px;
    }
    .feature-title {
        font-size: 24px !important;
    }
}
@media (max-width: 480px){
    .Card-Title-Text-Manager{
        font-size: 14px !important;
    }
    .Card-Title-Text {
        font-size: 15px !important;
    }
    .feature-box{
        padding: 2em 1em !important;
    }
    .Info-Text strong, .Info-Text span {
        font-size: 18px !important;
    }
}

.Hidden-Display {
    display: none;
}
.Info-Text h2 {
  margin: 0px;
}
.table-list-data{
    padding-top: 15px;
    padding-bottom: 15px;
}