/*HERO*/

.fees-hero{
    min-height: 760px;

    padding-top: 100px;
    background:
        
        linear-gradient(
            90deg,
            rgba(11,55,103,1) 0%,
            rgba(11,55,103,1) 30%,
            rgba(11,55,103,.96) 40%,
            rgba(11,55,103,.82) 50%,
            rgba(11,55,103,.45) 60%,
            rgba(11,55,103,0) 72%
        ),


        linear-gradient(
            rgba(0,0,0,.18),
            rgba(0,0,0,.18)
        ),
        
        url("../images/fees-hero.jpg");
        background-repeat:no-repeat;
        background-size:cover;
        background-position: top center;
        background-attachment: fixed;

        display:flex;
        align-items:center;
}

.fees-hero .container{
    max-width: 1400px; 
    margin: 0 auto;
    padding: 1rem;

    display: flex;
    align-items: center;

    min-height: 720px;
}

.fees-hero-content{
    width: 52%;
    max-width: 700px;

    margin-left: 0;

    margin-top: -1rem;
    padding-left: 0;
}

.fees-hero-content .section-subtitle {

    display: block;

    margin-bottom: 1rem;

    color: var(--gold);

    font-size: .95rem;
    font-weight: 700;

    letter-spacing: .12em;
    text-transform: uppercase;

}

.fees-hero-content h1 {

    max-width: 600px;

    color: var(--white);

    font-size: clamp(3rem, 6vw, 5rem);

    line-height: 1.05;

    margin-bottom: 1.5rem;

}

.fees-hero-content .section-divider {

    margin-bottom: 1.75rem;

}


.fees-hero-content > p {

    max-width: 520px;

    color: rgba(255,255,255,.88);

    font-size: 1.05rem;

    line-height: 1.8;

}

/*COMMITMENT*/

.fees-commitment {

    padding: var(--section-padding) 0;

    background: var(--white);

}


.fees-commitment .container {

    max-width: 900px;

    margin: 0 auto;

    padding: 0 1.5rem;

}

.fees-commitment-content {

    text-align: center;

}


.fees-commitment-icon {

    width: 64px;
    height: 64px;

    margin: 0 auto 1.25rem;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--gold);

    border: 2px solid var(--gold);

    border-radius: 50%;

    font-size: 1.6rem;

}

.fees-commitment-content .section-subtitle {

    display: block;

    margin-bottom: .65rem;

}


.fees-commitment-content .section-title {

    margin-bottom: 1rem;

}


.fees-commitment-content .section-divider {

    margin: 0 auto 2rem;

}

.fees-commitment-content > p {

    max-width: 780px;

    margin: 0 auto 1.5rem;

    color: var(--gray-dark);

    line-height: 1.8;

}

/*QUOTE*/

.fees-commitment-content blockquote {

    position: relative;

    max-width: 780px;

    margin: 2rem auto;

    padding: 2rem 2.5rem;

    background: #fffaf2;

    border: 1px solid rgba(253,188,89,.55);

    border-radius: var(--radius-md);

}

.fees-commitment-content blockquote::before {

    content: "“";

    position: absolute;

    top: -.85rem;
    left: 50%;

    transform: translateX(-50%);

    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--white);

    color: var(--gold);

    font-family: var(--font-heading);

    font-size: 2.2rem;

}

.fees-commitment-content blockquote p {

    margin-bottom: .75rem;

    color: var(--navy);

    font-family: var(--font-heading);

    font-size: 1.25rem;

    font-weight: 600;

    line-height: 1.5;

}

.fees-commitment-content blockquote cite {

    display: block;

    color: var(--accent-dark);

    font-family: var(--font-heading);

    font-size: 1.15rem;

    font-weight: 600;

    line-height: 1.5;

}


/*INFO BOX*/

.fees-information {

    max-width: 700px;

    margin: 2.5rem auto 0;

    padding: 1.25rem 1.5rem;

    display: flex;

    align-items: center;

    gap: 1rem;

    border: 1px solid var(--navy);

    border-radius: var(--radius-md);

}

.fees-information-icon {

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--navy);

    color: var(--gold);

    border-radius: 50%;

    font-size: 1.15rem;

}

.fees-information p {

    margin: 0;

    color: var(--navy);

    font-size: .9rem;

    font-weight: 600;

    line-height: 1.5;

}

/*TUITION FEES*/

.tuition-fees {

    padding: var(--section-padding) 0;

    background: var(--surface);

}


.tuition-fees .container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 1.5rem;

}

.tuition-fees .section-header {

    max-width: 850px;

    margin: 0 auto 3rem;

    text-align: center;

}


.tuition-fees .section-subtitle {

    display: block;

    margin-bottom: .65rem;

}

.tuition-fees .section-title {

    margin-bottom: 1rem;

}


.tuition-fees .section-divider {

    margin: 0 auto 1.5rem;

}


.tuition-fees .section-description {

    max-width: 800px;

    margin: 0 auto;

    color: var(--gray-dark);

    line-height: 1.75;

}

/*FEE TABLE*/

.fees-table-wrapper {

    width: 100%;

    overflow-x: auto;

    background: var(--white);

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);

}


.fees-table {

    width: 100%;

    border-collapse: collapse;

    min-width: 700px;

}

.fees-table thead {

    background: var(--navy);

}


.fees-table th {

    padding: 1.25rem 1.5rem;

    color: var(--white);

    font-size: .85rem;

    font-weight: 700;

    letter-spacing: .04em;

    text-transform: uppercase;

    text-align: left;

}

.fees-table th:not(:first-child) {

    text-align: center;

}


.fees-table td {

    padding: 1.25rem 1.5rem;

    border-bottom: 1px solid var(--border);

    vertical-align: middle;

}


.fees-table tbody tr:last-child td {

    border-bottom: none;

}

.fees-table tbody tr {

    transition: var(--transition-fast);

}


.fees-table tbody tr:hover {

    background: #fffdf9;

}

.fee-rate {

    display: flex;

    align-items: center;

    gap: 1rem;

}

.fee-icon {

    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--navy);

    color: var(--gold);

    border-radius: 50%;

    font-size: 1.15rem;

}

.fee-rate strong {

    display: block;

    margin-bottom: .2rem;

    color: var(--navy);

    font-size: 1rem;

    font-weight: 700;

}

.fee-rate span {

    display: block;

    color: var(--gray);

    font-size: .88rem;

}

.fees-table td[data-label="Monthly Cost"],
.fees-table td[data-label="Annual Cost"] {

    text-align: center;

}

.fee-price {

    color: var(--navy);

    font-family: var(--font-heading);

    font-size: 1.65rem;

    font-weight: 700;

}

.fee-period {

    color: var(--gray);

    font-size: .9rem;

}

.fees-document {

    margin-top: 2.5rem;

    padding: 1.5rem 1.75rem;

    display: flex;

    align-items: center;

    gap: 1.25rem;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);

}

.fees-document-icon {

    width: 52px;
    height: 52px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(83,1,0,.08);

    color: var(--burgundy);

    border-radius: 50%;

    font-size: 1.4rem;

}

.fees-document-content {

    flex: 1;

}


.fees-document-content h3 {

    margin-bottom: .25rem;

    color: var(--navy);

    font-size: 1.35rem;

}

.fees-document-content p {

    margin: 0;

    color: var(--gray);

    font-size: .9rem;

    line-height: 1.5;

}

.fees-document .btn-secondary {

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: .65rem;

    padding: .9rem 1.4rem;

    border: 1px solid var(--navy);

    border-radius: 4px;

    color: var(--navy);

    background: transparent;

    font-size: .85rem;

    font-weight: 700;

    text-transform: uppercase;

    transition: var(--transition);

}

.fees-document .btn-secondary:hover {

    background: var(--navy);

    color: var(--white);

}


.fees-document .btn-secondary i {

    transition: transform var(--transition);

}


.fees-document .btn-secondary:hover i {

    transform: translateY(3px);

}

/*CTA*/

.fees-cta {

    padding: 5rem 0;

    background: var(--burgundy);

}


.fees-cta .container {

    max-width: 1000px;

    margin: 0 auto;

    padding: 0 1.5rem;

}

.fees-cta-content {

    text-align: center;

}


.fees-cta-content .section-subtitle {

    display: block;

    margin-bottom: .75rem;

    color: var(--gold);

}

.fees-cta-content h2 {

    max-width: 750px;

    margin: 0 auto 1.25rem;

    color: var(--white);

    font-size: clamp(2.2rem, 4vw, 3.2rem);

}


.fees-cta-content p {

    max-width: 650px;

    margin: 0 auto 2rem;

    color: rgba(255,255,255,.8);

    line-height: 1.75;

}

.fees-cta-buttons {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 1rem;

}

.fees-cta .btn-secondary {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: .75rem;

    padding: .95rem 1.6rem;

    border: 1px solid rgba(255,255,255,.55);

    border-radius: 4px;

    color: var(--white);

    font-size: .85rem;

    font-weight: 700;

    text-transform: uppercase;

    transition: var(--transition);

}

.fees-cta .btn-secondary:hover {

    background: var(--white);

    color: var(--burgundy);

    border-color: var(--white);

}


.fees-cta .btn-secondary i {

    transition: transform var(--transition);

}


.fees-cta .btn-secondary:hover i {

    transform: translateX(4px);

}