/* ========================================= 
   WPS PREMIUM STATS SECTION 
========================================= */ 
 
.wps-stats-section { 
    position: relative; 
    padding: 30px 0 70px; 
    background: #f7f9fc; 
} 
 
/* Grid */ 
 
.wps-stats-grid { 
    display: grid; 
    grid-template-columns: repeat(5, 1fr); 
    gap: 18px; 
} 
 
/* Card */ 
 
.wps-stat-card { 
    position: relative; 
    min-height: 235px; 
    padding: 32px 22px 28px; 
    background: #ffffff; 
    border-radius: 18px; 
    text-align: center; 
    overflow: hidden; 
 
    border: 1px solid rgba(21, 80, 135, 0.08); 
 
    box-shadow: 
        0 8px 30px rgba(21, 80, 135, 0.07); 
 
    transition: 
        transform 0.4s ease, 
        box-shadow 0.4s ease, 
        border-color 0.4s ease; 
} 
 
/* Top red accent */ 
 
.wps-stat-card::before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 4px; 
 
    background: linear-gradient( 
        90deg, 
        #155087, 
        #cc1f26 
    ); 
} 
 
/* Decorative circle */ 
 
.wps-stat-card::after { 
    content: ""; 
    position: absolute; 
    width: 100px; 
    height: 100px; 
 
    right: -45px; 
    bottom: -45px; 
 
    border-radius: 50%; 
 
    background: rgba(21, 80, 135, 0.045); 
 
    transition: 0.4s ease; 
} 
 
/* Hover */ 
 
.wps-stat-card:hover { 
    transform: translateY(-10px); 
 
    border-color: rgba(21, 80, 135, 0.18); 
 
    box-shadow: 
        0 20px 45px rgba(21, 80, 135, 0.14); 
} 
 
.wps-stat-card:hover::after { 
    width: 145px; 
    height: 145px; 
 
    background: rgba(204, 31, 38, 0.08); 
} 
 
/* Icon */ 
 
.wps-stat-icon { 
    width: 78px; 
    height: 78px; 
 
    margin: 0 auto 18px; 
 
    display: flex; 
    align-items: center; 
    justify-content: center; 
 
    border-radius: 50%; 
 
    background: #155087; 
 
    transition: 
        transform 0.4s ease, 
        background 0.4s ease; 
} 
 
.wps-stat-icon img { 
    width: 52px; 
    height: 52px; 
 
    object-fit: contain; 
    color:#155087; 
 
    transition: 
        transform 0.4s ease, 
        filter 0.4s ease; 
} 
 
/* Icon hover */ 
 
.wps-stat-card:hover .wps-stat-icon { 
    transform: translateY(-5px) scale(1.05); 
 
    background: #155087; 
} 
 
.wps-stat-card:hover .wps-stat-icon img { 
    transform: scale(1.08); 
} 
 
/* Number */ 
 
.wps-stat-content h2 { 
    margin: 0; 
 
    font-size: 38px; 
    line-height: 1; 
 
    font-weight: 800; 
 
    color: #155087; 
 
    letter-spacing: -1px; 
} 
 
.wps-stat-content h2 span { 
    color: #cc1f26; 
} 
 
/* Acres text */ 
 
.wps-stat-content h2 .small-text { 
    font-size: 20px; 
    font-weight: 700; 
 
    color: #155087; 
 
    letter-spacing: 0; 
} 
 
/* Label */ 
 
.wps-stat-content p { 
    margin: 12px 0 0; 
 
    font-size: 12px; 
    font-weight: 700; 
 
    color: #555; 
 
    letter-spacing: 1.3px; 
} 
 
/* Bottom line */ 
 
.wps-stat-line { 
    width: 35px; 
    height: 3px; 
 
    margin: 17px auto 0; 
 
    border-radius: 10px; 
 
    background: #cc1f26; 
 
    transition: width 0.4s ease; 
} 
 
.wps-stat-card:hover .wps-stat-line { 
    width: 65px; 
} 
 
/* ========================================= 
   TABLET 
========================================= */ 
 
@media (max-width: 1199px) { 
 
    .wps-stats-grid { 
        grid-template-columns: repeat(3, 1fr); 
    } 
 
} 
 
/* ========================================= 
   MOBILE 
========================================= */ 
 
@media (max-width: 767px) { 
 
    .wps-stats-section { 
        padding: 25px 0 50px; 
    } 
 
    .wps-stats-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 12px; 
    } 
 
    .wps-stat-card { 
        min-height: 205px; 
        padding: 25px 12px; 
        border-radius: 15px; 
    } 
 
    .wps-stat-icon { 
        width: 65px; 
        height: 65px; 
        margin-bottom: 15px; 
    } 
 
    .wps-stat-icon img { 
        width: 43px; 
        height: 43px; 
    } 
 
    .wps-stat-content h2 { 
        font-size: 30px; 
    } 
 
    .wps-stat-content p { 
        font-size: 10px; 
        letter-spacing: 0.8px; 
    } 
 
} 
 
/* ========================================= 
   SMALL MOBILE 
========================================= */ 
 
@media (max-width: 480px) { 
 
    .wps-stats-grid { 
        grid-template-columns: 1fr 1fr; 
    } 
 
    .wps-stat-card { 
        min-height: 190px; 
        padding: 22px 8px; 
    } 
 
    .wps-stat-content h2 { 
        font-size: 27px; 
    } 
 
}

.wps-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    max-width: 1100px;
    margin: 0 auto;
    justify-content: center;
}

.wps-stat-card {
    text-align: center;
}



/* ========================================== 
   MIT-WPS ABOUT SECTION 
========================================== */ 
 
.wps-about-section { 
    padding: 90px 0; 
    background: #fff; 
    overflow: hidden; 
} 
 
/* ========================================== 
   MAIN BLOCK 
========================================== */ 
 
.wps-about-main { 
    display: grid; 
    grid-template-columns: 45% 55%; 
    align-items: center; 
    gap: 60px; 
} 
 
/* ========================================== 
   IMAGE 
========================================== */ 
 
.wps-about-image-wrap { 
    position: relative; 
    padding: 0 20px 25px 0; 
} 
 
.wps-about-image { 
    position: relative; 
    z-index: 2; 
    overflow: hidden; 
    border-radius: 0 45px 0 45px; 
 
    box-shadow: 
        0 20px 50px rgba(21, 80, 135, 0.16); 
} 
 
.wps-about-image img { 
    width: 100%; 
    height: 500px; 
    object-fit: cover; 
 
    display: block; 
 
    transition: transform 0.7s ease; 
} 
 
.wps-about-image-wrap:hover .wps-about-image img { 
    transform: scale(1.05); 
} 
 
/* Blue background shape */ 
 
.wps-image-accent { 
    position: absolute; 
 
    width: 85%; 
    height: 85%; 
 
    left: -20px; 
    bottom: 0; 
 
    background: #155087; 
 
    border-radius: 0 45px 0 45px; 
 
    z-index: 1; 
} 
 
/* Red decorative corner */ 
 
.wps-about-image-wrap::after { 
    content: ""; 
 
    position: absolute; 
 
    width: 85px; 
    height: 85px; 
 
    right: 0; 
    top: -25px; 
 
    background: #cc1f26; 
 
    border-radius: 50%; 
 
    z-index: 3; 
} 
 
/* Image label */ 
 
.wps-image-label { 
    position: absolute; 
 
    right: 0; 
    bottom: 0; 
 
    z-index: 4; 
 
    padding: 18px 25px; 
 
    background: #fff; 
 
    border-left: 4px solid #cc1f26; 
 
    box-shadow: 
        0 12px 30px rgba(0, 0, 0, 0.12); 
} 
 
.wps-image-label span { 
    display: block; 
 
    font-size: 10px; 
    font-weight: 700; 
 
    letter-spacing: 1.5px; 
 
    color: #777; 
 
    margin-bottom: 4px; 
} 
 
.wps-image-label strong { 
    display: block; 
 
    font-size: 14px; 
 
    color: #155087; 
 
    letter-spacing: .5px; 
} 
 
/* ========================================== 
   CONTENT 
========================================== */ 
 
.wps-about-content { 
    padding-right: 25px; 
} 
 
.wps-about-eyebrow { 
    display: inline-block; 
 
    margin-bottom: 12px; 
 
    font-size: 12px; 
    font-weight: 700; 
 
    color: #cc1f26; 
 
    letter-spacing: 2px; 
} 
 
.wps-about-content h2 { 
    margin: 0; 
 
    color: #155087; 
 
    font-size: 40px; 
 
    line-height: 1.15; 
 
    font-weight: 800; 
 
    letter-spacing: -.8px; 
} 
 
.wps-about-content h2 span { 
    display: block; 
 
    color: #cc1f26; 
} 
 
/* ========================================== 
   TITLE LINE 
========================================== */ 
 
.wps-title-line { 
    position: relative; 
 
    display: flex; 
    align-items: center; 
 
    margin: 18px 0 25px; 
} 
 
.wps-title-line span { 
    width: 45px; 
    height: 4px; 
 
    background: #155087; 
 
    border-radius: 10px; 
 
    margin-right: 8px; 
} 
 
.wps-title-line img { 
    width: 145px; 
    height: auto; 
} 
 
/* ========================================== 
   PARAGRAPH 
========================================== */ 
 
.wps-about-content p { 
    margin: 0; 
 
    color: #555; 
 
    font-size: 15px; 
 
    line-height: 1.9; 
 
    text-align: justify; 
} 
 
/* ========================================== 
   SECOND CONTENT 
========================================== */ 
 
.wps-about-second { 
    position: relative; 
 
    margin-top: 75px; 
 
    margin-left: 20%; 
 
    padding: 38px 45px 38px 55px; 
 
    background: #f6f9fc; 
 
    border-radius: 0 35px 35px 0; 
 
    border-left: 5px solid #155087; 
} 
 
.wps-second-content { 
    position: relative; 
    z-index: 2; 
} 
 
.wps-second-number { 
    display: block; 
 
    margin-bottom: 12px; 
 
    color: #155087; 
 
    font-size: 12px; 
 
    font-weight: 800; 
 
    letter-spacing: 3px; 
} 
 
.wps-second-content p { 
    margin: 0; 
 
    color: #555; 
 
    font-size: 15px; 
 
    line-height: 1.9; 
 
    text-align: justify; 
} 
 
/* Red decoration */ 
 
.wps-second-decoration { 
    position: absolute; 
 
    right: 25px; 
    top: -22px; 
 
    width: 65px; 
    height: 65px; 
 
    border-radius: 50%; 
 
    border: 8px solid #fff; 
 
    background: #cc1f26; 
 
    box-shadow: 
        0 10px 25px rgba(204, 31, 38, .18); 
} 
 
/* ========================================== 
   HOVER EFFECT 
========================================== */ 
 
.wps-about-second { 
    transition: 
        transform .4s ease, 
        box-shadow .4s ease; 
} 
 
.wps-about-second:hover { 
    transform: translateX(8px); 
 
    box-shadow: 
        0 18px 45px rgba(21, 80, 135, .08); 
} 
 
/* ========================================== 
   TABLET 
========================================== */ 
 
@media (max-width: 991px) { 
 
    .wps-about-section { 
        padding: 70px 0; 
    } 
 
    .wps-about-main { 
        grid-template-columns: 1fr; 
 
        gap: 45px; 
    } 
 
    .wps-about-image-wrap { 
        max-width: 650px; 
        margin: auto; 
    } 
 
    .wps-about-content { 
        padding-right: 0; 
    } 
 
    .wps-about-content h2 { 
        font-size: 35px; 
    } 
 
    .wps-about-second { 
        margin-left: 0; 
        margin-top: 55px; 
    } 
 
} 
 
/* ========================================== 
   MOBILE 
========================================== */ 
 
@media (max-width: 767px) { 
 
    .wps-about-section { 
        padding: 55px 0; 
    } 
 
    .wps-about-image { 
        border-radius: 0 30px 0 30px; 
    } 
 
    .wps-about-image img { 
        height: 380px; 
    } 
 
    .wps-image-accent { 
        border-radius: 0 30px 0 30px; 
    } 
 
    .wps-about-content h2 { 
        font-size: 30px; 
    } 
 
    .wps-about-content p, 
    .wps-second-content p { 
        font-size: 14px; 
        line-height: 1.8; 
    } 
 
    .wps-about-second { 
        padding: 30px 25px; 
        border-radius: 0 25px 25px 0; 
    } 
 
    .wps-image-label { 
        padding: 14px 18px; 
    } 
 
    .wps-image-label strong { 
        font-size: 12px; 
    } 
 
} 
 
/* ========================================== 
   SMALL MOBILE 
========================================== */ 
 
@media (max-width: 480px) { 
 
    .wps-about-image img { 
        height: 300px; 
    } 
 
    .wps-about-content h2 { 
        font-size: 27px; 
    } 
 
    .wps-about-image-wrap::after { 
        width: 60px; 
        height: 60px; 
    } 
 
    .wps-about-second { 
        padding: 25px 20px; 
    } 
 
} 



/* ===================================================== 
   CURRICULUM HEADING 
===================================================== */ 
 
.wps-curriculum-heading { 
    position: relative; 
    padding: 55px 0 65px; 
    background: #155087; 
    overflow: hidden; 
} 
 
/* Decorative red circle */ 
 
.wps-curriculum-heading::before { 
    content: ""; 
    position: absolute; 
 
    width: 180px; 
    height: 180px; 
 
    left: -70px; 
    top: -90px; 
 
    border-radius: 50%; 
 
    background: #cc1f26; 
 
    opacity: .9; 
} 
 
/* Decorative circle */ 
 
.wps-curriculum-heading::after { 
    content: ""; 
 
    position: absolute; 
 
    width: 260px; 
    height: 260px; 
 
    right: -100px; 
    bottom: -170px; 
 
    border-radius: 50%; 
 
    border: 35px solid rgba(255,255,255,.08); 
} 
 
.wps-curriculum-heading-inner { 
    position: relative; 
    z-index: 2; 
 
    text-align: center; 
} 
 
.wps-curriculum-heading-inner span { 
    display: block; 
 
    margin-bottom: 10px; 
 
    color: #cc1f26; 
 
    font-size: 12px; 
    font-weight: 700; 
 
    letter-spacing: 3px; 
} 
 
.wps-curriculum-heading-inner h2 { 
    margin: 0; 
 
    color: #fff; 
 
    font-size: 32px; 
 
    font-weight: 800; 
 
    letter-spacing: .2px; 
} 
 
/* ===================================================== 
   MAIN SECTION 
===================================================== */ 
 
.wps-stages-section { 
    padding: 80px 0 100px; 
 
    background: 
        linear-gradient( 
            180deg, 
            #f7f9fc 0%, 
            #ffffff 100% 
        ); 
} 
 
/* Intro */ 
 
.wps-stages-intro { 
    max-width: 720px; 
 
    margin: 0 auto 55px; 
 
    text-align: center; 
} 
 
.wps-stages-intro p { 
    margin: 0; 
 
    color: #666; 
 
    font-size: 15px; 
 
    line-height: 1.8; 
} 
 
/* ===================================================== 
   STAGE GRID 
===================================================== */ 
 
.wps-stages-wrapper { 
    position: relative; 
 
    display: grid; 
 
    grid-template-columns: repeat(3, 1fr); 
 
    gap: 28px; 
} 
 
/* Connecting line */ 
 
.wps-stages-wrapper::before { 
    content: ""; 
 
    position: absolute; 
 
    top: 47px; 
    left: 13%; 
    right: 13%; 
 
    height: 2px; 
 
    background: 
        linear-gradient( 
            90deg, 
            #155087, 
            #cc1f26, 
            #155087 
        ); 
 
    opacity: .25; 
 
    z-index: 0; 
} 
 
/* ===================================================== 
   CARD 
===================================================== */ 
 
.wps-stage-card { 
    position: relative; 
 
    z-index: 1; 
 
    background: #fff; 
 
    border-radius: 24px; 
 
    overflow: hidden; 
 
    border: 1px solid rgba(21,80,135,.08); 
 
    box-shadow: 
        0 12px 40px rgba(21,80,135,.08); 
 
    transition: 
        transform .45s ease, 
        box-shadow .45s ease; 
} 
 
.wps-stage-card:hover { 
 
    transform: translateY(-12px); 
 
    box-shadow: 
        0 25px 55px rgba(21,80,135,.15); 
} 
 
/* ===================================================== 
   IMAGE 
===================================================== */ 
 
.wps-stage-image { 
    position: relative; 
 
    height: 260px; 
 
    overflow: hidden; 
} 
 
.wps-stage-image img { 
    width: 100%; 
    height: 100%; 
 
    object-fit: cover; 
 
    display: block; 
 
    transition: 
        transform .7s ease; 
} 
 
.wps-stage-card:hover 
.wps-stage-image img { 
 
    transform: scale(1.08); 
} 
 
/* Image overlay */ 
 
.wps-stage-overlay { 
    position: absolute; 
 
    inset: 0; 
 
    background: 
        linear-gradient( 
            180deg, 
            rgba(21,80,135,0) 35%, 
            rgba(21,80,135,.85) 100% 
        ); 
} 
 
/* Label */ 
 
.wps-stage-label { 
    position: absolute; 
 
    left: 22px; 
    bottom: 20px; 
 
    padding: 8px 14px; 
 
    background: #cc1f26; 
 
    color: #fff; 
 
    font-size: 10px; 
 
    font-weight: 800; 
 
    letter-spacing: 1.5px; 
 
    border-radius: 30px; 
} 
 
/* ===================================================== 
   CONTENT 
===================================================== */ 
 
.wps-stage-content { 
    position: relative; 
 
    padding: 30px 30px 35px; 
} 
 
/* Number */ 
 
.wps-stage-number { 
    position: absolute; 
 
    top: -25px; 
    right: 25px; 
 
    width: 50px; 
    height: 50px; 
 
    display: flex; 
 
    align-items: center; 
    justify-content: center; 
 
    border-radius: 50%; 
 
    background: #fff; 
 
    color: #155087; 
 
    font-size: 13px; 
 
    font-weight: 800; 
 
    box-shadow: 
        0 8px 25px rgba(0,0,0,.12); 
} 
 
/* Heading */ 
 
.wps-stage-content h3 { 
    margin: 0; 
 
    color: #155087; 
 
    font-size: 22px; 
 
    line-height: 1.3; 
 
    font-weight: 800; 
} 
 
/* Line */ 
 
.wps-stage-line { 
    width: 45px; 
    height: 4px; 
 
    margin: 17px 0 18px; 
 
    border-radius: 20px; 
 
    background: #cc1f26; 
 
    transition: width .4s ease; 
} 
 
.wps-stage-card:hover 
.wps-stage-line { 
 
    width: 75px; 
} 
 
/* Description */ 
 
.wps-stage-content p { 
    margin: 0; 
 
    color: #666; 
 
    font-size: 14px; 
 
    line-height: 1.85; 
 
    text-align: justify; 
} 
 
/* ===================================================== 
   DIFFERENT ACCENT FOR MIDDLE CARD 
===================================================== */ 
 
.wps-stage-card:nth-child(2) 
.wps-stage-label { 
 
    background: #155087; 
} 
 
.wps-stage-card:nth-child(2) 
.wps-stage-line { 
 
    background: #155087; 
} 
 
.wps-stage-card:nth-child(2) 
.wps-stage-number { 
 
    color: #cc1f26; 
} 
 
/* ===================================================== 
   TABLET 
===================================================== */ 
 
@media (max-width: 991px) { 
 
    .wps-stages-wrapper { 
 
        grid-template-columns: 1fr 1fr; 
 
    } 
 
    .wps-stages-wrapper::before { 
        display: none; 
    } 
 
    .wps-stage-card:last-child { 
 
        grid-column: 1 / -1; 
 
        max-width: 48%; 
 
        margin: 0 auto; 
    } 
 
} 
 
/* ===================================================== 
   MOBILE 
===================================================== */ 
 
@media (max-width: 767px) { 
 
    .wps-curriculum-heading { 
 
        padding: 45px 0 50px; 
 
    } 
 
    .wps-curriculum-heading-inner h2 { 
 
        font-size: 25px; 
 
        line-height: 1.35; 
 
    } 
 
    .wps-stages-section { 
 
        padding: 55px 0 70px; 
 
    } 
 
    .wps-stages-intro { 
 
        margin-bottom: 35px; 
 
    } 
 
    .wps-stages-wrapper { 
 
        grid-template-columns: 1fr; 
 
        gap: 25px; 
 
    } 
 
    .wps-stage-card:last-child { 
 
        grid-column: auto; 
 
        max-width: 100%; 
 
    } 
 
    .wps-stage-image { 
 
        height: 230px; 
 
    } 
 
    .wps-stage-content { 
 
        padding: 27px 23px 30px; 
 
    } 
 
    .wps-stage-content h3 { 
 
        font-size: 20px; 
 
    } 
 
} 
 
/* ===================================================== 
   SMALL MOBILE 
===================================================== */ 
 
@media (max-width: 480px) { 
 
    .wps-stage-image { 
 
        height: 210px; 
 
    } 
 
    .wps-stage-content p { 
 
        font-size: 13.5px; 
 
        line-height: 1.8; 
 
    } 
 
} 


/* ========================================= 
   MIT-WPS UNIQUE FEATURES SLIDER 
========================================= */ 
 
.wps-features-section { 
    width: 100%; 
    padding: 80px 0 !important; 
    background: #f7f9fc !important; 
    overflow: hidden; 
} 
 
.wps-features-section .wps-features-heading { 
    width: 100%; 
    max-width: 760px; 
    margin: 0 auto 40px !important; 
    text-align: center; 
} 
 
.wps-features-section .wps-features-heading span { 
    display: block !important; 
    margin-bottom: 8px !important; 
    color: #cc1f26 !important; 
    font-size: 13px !important; 
    font-weight: 700 !important; 
    letter-spacing: 2px !important; 
} 
 
.wps-features-section .wps-features-heading h2 { 
    margin: 0 !important; 
    color: #155087 !important; 
    font-size: 36px !important; 
    font-weight: 700 !important; 
    line-height: 1.25 !important; 
} 
 
.wps-features-section .wps-features-heading h2 strong { 
    color: #cc1f26 !important; 
} 
 
.wps-features-section .wps-features-heading p { 
    margin: 12px 0 0 !important; 
    color: #666 !important; 
    font-size: 15px !important; 
} 
 
/* ========================================= 
   SLIDER 
========================================= */ 
 
.wps-features-section .wps-features-slider { 
    width: 100%; 
    margin: 0 -10px !important; 
} 
 
.wps-features-section .wps-feature-item { 
    padding: 10px !important; 
    box-sizing: border-box !important; 
} 
 
.wps-features-section .wps-feature-card { 
    width: 100%; 
    height: 100%; 
    min-height: 430px; 
    overflow: hidden !important; 
    background: #fff !important; 
    border: 1px solid #e5e9ef !important; 
    border-radius: 14px !important; 
    box-shadow: 0 8px 25px rgba(0,0,0,0.06) !important; 
    transition: all 0.35s ease !important; 
} 
 
.wps-features-section .wps-feature-card:hover { 
    transform: translateY(-5px) !important; 
    box-shadow: 0 15px 35px rgba(21,80,135,0.14) !important; 
} 
 
/* ========================================= 
   IMAGE 
========================================= */ 
 
.wps-features-section .wps-feature-image { 
    width: 100%; 
    height: auto !important; 
    overflow: hidden; 
} 
 
.wps-features-section .wps-feature-image img { 
    width: 100% !important; 
    height: auto !important; 
    display: block !important; 
    object-fit: initial !important; 
} 
 
/* ========================================= 
   CONTENT 
========================================= */ 
 
.wps-features-section .wps-feature-content { 
    padding: 22px 24px 25px !important; 
    background: #fff !important; 
} 
 
.wps-features-section .wps-feature-content h3 { 
    position: relative !important; 
    margin: 0 0 14px !important; 
    padding: 0 0 12px !important; 
    color: #155087 !important; 
    font-size: 19px !important; 
    font-weight: 700 !important; 
    line-height: 1.3 !important; 
} 
 
.wps-features-section .wps-feature-content h3::after { 
    content: "" !important; 
    position: absolute !important; 
    left: 0 !important; 
    bottom: 0 !important; 
    width: 40px !important; 
    height: 3px !important; 
    background: #cc1f26 !important; 
    border-radius: 5px !important; 
} 
 
.wps-features-section .wps-feature-content p { 
    margin: 0 !important; 
    color: #666 !important; 
    font-size: 14px !important; 
    font-weight: 400 !important; 
    line-height: 1.7 !important; 
} 
 
/* ========================================= 
   SLICK ARROWS 
========================================= */ 
 
.wps-features-section .slick-prev, 
.wps-features-section .slick-next { 
    position: absolute !important; 
    top: 50% !important; 
    z-index: 20 !important; 
    width: 42px !important; 
    height: 42px !important; 
    margin-top: -25px !important; 
    border: none !important; 
    border-radius: 50% !important; 
    background: #155087 !important; 
    opacity: 1 !important; 
} 
 
.wps-features-section .slick-prev { 
    left: 0 !important; 
} 
 
.wps-features-section .slick-next { 
    right: 0 !important; 
} 
 
.wps-features-section .slick-prev:hover, 
.wps-features-section .slick-next:hover { 
    background: #cc1f26 !important; 
} 
 
.wps-features-section .slick-prev::before, 
.wps-features-section .slick-next::before { 
    color: #fff !important; 
    font-size: 16px !important; 
    opacity: 1 !important; 
} 
 
/* ========================================= 
   DOTS 
========================================= */ 
 
.wps-features-section .slick-dots { 
    position: relative !important; 
    bottom: auto !important; 
    margin: 25px 0 0 !important; 
    padding: 0 !important; 
    text-align: center !important; 
} 
 
.wps-features-section .slick-dots li { 
    margin: 0 3px !important; 
} 
 
.wps-features-section .slick-dots li button::before { 
    color: #155087 !important; 
    font-size: 8px !important; 
    opacity: 0.3 !important; 
} 
 
.wps-features-section .slick-dots li.slick-active button::before { 
    color: #cc1f26 !important; 
    opacity: 1 !important; 
} 
 
/* ========================================= 
   TABLET 
========================================= */ 
 
@media (max-width: 991px) { 
 
    .wps-features-section { 
        padding: 65px 0 !important; 
    } 
 
    .wps-features-section .wps-features-heading h2 { 
        font-size: 30px !important; 
    } 
 
    .wps-features-section .wps-feature-image { 
        height: 220px !important; 
    } 
 
    .wps-features-section .wps-feature-card { 
        min-height: 410px; 
    } 
 
} 
 
/* ========================================= 
   MOBILE 
========================================= */ 
 
@media (max-width: 575px) { 
 
    .wps-features-section { 
        padding: 50px 0 65px !important; 
    } 
 
    .wps-features-section .wps-features-heading { 
        padding: 0 15px !important; 
        margin-bottom: 25px !important; 
    } 
 
    .wps-features-section .wps-features-heading h2 { 
        font-size: 25px !important; 
    } 
 
    .wps-features-section .wps-features-heading p { 
        font-size: 14px !important; 
    } 
 
    .wps-features-section .wps-feature-item { 
        padding: 8px !important; 
    } 
 
    .wps-features-section .wps-feature-card { 
        min-height: auto !important; 
    } 
 
    .wps-features-section .wps-feature-image { 
        height: 210px !important; 
    } 
 
    .wps-features-section .wps-feature-content { 
        padding: 20px !important; 
    } 
 
    .wps-features-section .slick-prev { 
        left: 8px !important; 
    } 
 
    .wps-features-section .slick-next { 
        right: 8px !important; 
    } 
 
} 
 
.wps-learning-section { 
    padding: 85px 0 100px; 
    background: #fff; 
    overflow: hidden; 
} 
 
/* ============================== 
   HEADING 
============================== */ 
 
.wps-learning-heading { 
    max-width: 850px; 
    margin: 0 auto 45px; 
    text-align: center; 
} 
 
.wps-learning-heading h2 { 
    margin: 0 0 15px; 
    color: #155087; 
    font-size: 38px; 
    font-weight: 800; 
    letter-spacing: .3px; 
} 
 
.wps-learning-heading h2 span { 
    color: #cc1f26; 
} 
 
.wps-learning-heading p { 
    max-width: 760px; 
    margin: 0 auto; 
    color: #666; 
    font-size: 15px; 
    line-height: 1.8; 
} 
 
/* ============================== 
   GALLERY 
============================== */ 
 
.wps-learning-gallery { 
    display: grid; 
 
    grid-template-columns: 
        1.4fr 
        1fr 
        1fr; 
 
    grid-template-rows: 
        260px 
        260px; 
 
    gap: 15px; 
} 
 
/* Large Image */ 
 
.wps-learning-large { 
    grid-column: 1; 
    grid-row: 1 / 3; 
 
    overflow: hidden; 
    border-radius: 18px; 
} 
 
/* Right Images */ 
 
.wps-learning-box { 
    position: relative; 
    overflow: hidden; 
    border-radius: 18px; 
} 
 
/* Images */ 
 
.wps-learning-large img, 
.wps-learning-box img, 
.wps-learning-wide img { 
    width: 100%; 
    height: 100%; 
 
    display: block; 
 
    object-fit: cover; 
 
    transition: transform .6s ease; 
} 
 
/* Hover */ 
 
.wps-learning-large:hover img, 
.wps-learning-box:hover img, 
.wps-learning-wide:hover img { 
    transform: scale(1.05); 
} 
 
/* ============================== 
   BOTTOM IMAGE 
============================== */ 
 
.wps-learning-wide { 
    height: 280px; 
 
    margin-top: 15px; 
 
    overflow: hidden; 
    border-radius: 18px; 
} 
 
/* ============================== 
   IMAGE OVERLAY 
============================== */ 
 
.wps-learning-large, 
.wps-learning-box, 
.wps-learning-wide { 
    position: relative; 
} 
 
.wps-learning-large::after, 
.wps-learning-box::after, 
.wps-learning-wide::after { 
    content: ""; 
 
    position: absolute; 
 
    inset: 0; 
 
    background: linear-gradient( 
        to top, 
        rgba(0,0,0,.18), 
        transparent 45% 
    ); 
 
    pointer-events: none; 
} 
 
/* ============================== 
   TABLET 
============================== */ 
 
@media (max-width: 991px) { 
 
    .wps-learning-section { 
        padding: 65px 0 75px; 
    } 
 
    .wps-learning-heading h2 { 
        font-size: 32px; 
    } 
 
    .wps-learning-gallery { 
        grid-template-columns: 1fr 1fr; 
 
        grid-template-rows: 
            300px 
            220px 
            220px; 
    } 
 
    .wps-learning-large { 
        grid-column: 1 / 3; 
        grid-row: 1; 
    } 
 
    .wps-learning-box { 
        grid-row: auto; 
    } 
 
    .wps-learning-wide { 
        height: 230px; 
    } 
 
} 
 
/* ============================== 
   MOBILE 
============================== */ 
 
@media (max-width: 575px) { 
 
    .wps-learning-section { 
        padding: 50px 0 60px; 
    } 
 
    .wps-learning-heading { 
        margin-bottom: 25px; 
    } 
 
    .wps-learning-heading h2 { 
        font-size: 27px; 
    } 
 
    .wps-learning-heading p { 
        font-size: 14px; 
        line-height: 1.7; 
    } 
 
    .wps-learning-gallery { 
        display: grid; 
 
        grid-template-columns: 1fr 1fr; 
 
        grid-template-rows: 
            230px 
            160px 
            160px; 
 
        gap: 10px; 
    } 
 
    .wps-learning-large { 
        grid-column: 1 / 3; 
        grid-row: 1; 
    } 
 
    .wps-learning-box { 
        border-radius: 12px; 
    } 
 
    .wps-learning-wide { 
        height: 190px; 
        margin-top: 10px; 
        border-radius: 12px; 
    } 
 
} 


/*______Achivment Hover Card Harshada ___________*/ 
 
.glitter-img { 
    position: relative; 
    overflow: hidden; 
} 
 
.glitter-img img { 
    display: block; 
    width: 100%; 
    height: 14rem; 
    object-fit: cover; 
} 
 
/* Glitter */ 
 
.glitter-img::after { 
    content: ""; 
    position: absolute; 
    top: -100%; 
    left: -100%; 
    width: 45%; 
    height: 300%; 
 
    background: linear-gradient( 
        120deg, 
        transparent 0%, 
        transparent 40%, 
        rgba(255, 255, 255, 0.2) 45%, 
        rgba(255, 255, 255, 0.9) 50%, 
        rgba(255, 255, 255, 0.2) 55%, 
        transparent 60% 
    ); 
 
    transform: rotate(25deg); 
    pointer-events: none; 
    opacity: 0; 
} 
 
/* Start glitter when hovering */ 
 
.glitter-img:hover::after { 
    opacity: 1; 
    animation: glitterSweep 1s ease-in-out; 
} 
 
@keyframes glitterSweep { 
    0% { 
        left: -100%; 
    } 
 
    100% { 
        left: 160%; 
    } 
} 
 
.why-image-card { 
    position: relative; 
    width: 100%; 
    height: 400px; 
    overflow: hidden; 
    border-radius: 16px; 
} 
 
/* Slider images */ 
 
.why-image-card img { 
    position: absolute; 
    top: 0; 
    left: 0; 
 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
 
    border-radius: 16px; 
 
    animation: whySlide 9s infinite ease-in-out; 
} 
 
/* Image 1 */ 
 
.why-image-card img:nth-child(1) { 
    animation-delay: 0s; 
} 
 
/* Image 2 */ 
 
.why-image-card img:nth-child(2) { 
    animation-delay: 3s; 
} 
 
/* Image 3 */ 
 
.why-image-card img:nth-child(3) { 
    animation-delay: 6s; 
} 


/* =========================================================
   ABOUT MIT WPS
========================================================= */

.wps-adm-about {
    position: relative;
    padding: 105px 0;
    overflow: hidden;
}

.wps-adm-about-heading {
    max-width: 800px;
    margin: 0 auto 65px;
    text-align: center;
}

.wps-adm-about-heading h2 {
    margin: 0 0 18px;
    color: #155087;
    font-size: 40px;
    font-weight: 300;
}

.wps-adm-about-heading h2 strong {
    font-weight: 800;
}

.wps-adm-about-heading p {
    margin: 0;
    color: #687480;
    font-size: 15px;
    line-height: 1.8;
}

.wps-adm-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 75px;
    max-width: 1120px;
    margin: auto;
}

.wps-adm-about-image {
    position: relative;
}

.wps-adm-about-image img {
    width: 100%;
    display: block;
    border-radius: 0 70px 0 0;
}

.wps-adm-image-label {
    position: absolute;
    left: 25px;
    bottom: 25px;
    padding: 15px 20px;
    background: #fff;
    box-shadow: 0 15px 35px rgba(21,80,135,.15);
}

.wps-adm-image-label span {
    display: block;
    color: #cc1f26;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.wps-adm-image-label strong {
    display: block;
    margin-top: 3px;
    color: #155087;
    font-size: 18px;
}

.wps-adm-about-content {
    padding-right: 30px;
}

.wps-adm-about-number {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background: #155087;
    color: #fff;
    border-radius: 50%;
    font-size: 21px;
}

.wps-adm-about-content h3 {
    margin: 0 0 20px;
    color: #155087;
    font-size: 34px;
    font-weight: 300;
    line-height: 1.25;
}

.wps-adm-about-content h3 span {
    display: block;
    font-weight: 800;
}

.wps-adm-about-content p {
    color: #65717c;
    font-size: 15px;
    line-height: 1.9;
}

.wps-adm-primary-btn,
.wps-adm-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    margin-top: 12px;
    padding: 14px 23px;
    background: #cc1f26;
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .8px;
    text-decoration: none;
    transition: .3s ease;
}

.wps-adm-primary-btn:hover,
.wps-adm-apply-btn:hover {
    background: #155087;
    transform: translateY(-3px);
}

.wps-adm-about-design {
    position: absolute;
    right: -150px;
    bottom: -250px;
    width: 350px;
    opacity: .5;
}


/* =========================================================
   PROCESS
========================================================= */

.wps-adm-process {
    padding: 100px 0;
    background: #f5f7fa;
}

.wps-adm-section-heading {
    max-width: 780px;
    margin: 0 auto 55px;
    text-align: center;
}

.wps-adm-section-heading h2 {
    margin: 0 0 15px;
    color: #155087;
    font-size: 40px;
    font-weight: 300;
}

.wps-adm-section-heading h2 strong {
    font-weight: 800;
}

.wps-adm-section-heading p {
    margin: 0;
    color: #68737e;
    font-size: 14px;
    line-height: 1.8;
}

.wps-adm-process-content {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 55px;
    max-width: 1100px;
    margin: auto;
    padding: 45px;
    background: #fff;
    border-top: 5px solid #155087;
    box-shadow: 0 15px 45px rgba(21,80,135,.07);
}

.wps-adm-process-intro {
    border-right: 1px solid #e2e7eb;
}

.wps-adm-process-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background: #155087;
    color: #fff;
    border-radius: 50%;
    font-size: 22px;
}

.wps-adm-process-intro h3 {
    margin: 0;
    color: #155087;
    font-size: 25px;
    line-height: 1.3;
}

.wps-adm-process-text p {
    margin: 0 0 20px;
    color: #606c77;
    font-size: 14px;
    line-height: 1.9;
    text-align: justify;
}

.wps-adm-process-text p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   OFFLINE PROCESS
========================================================= */

.wps-adm-offline {
    padding: 100px 0;
    background: #155087;
}

.wps-adm-offline-header {
    max-width: 780px;
    margin: auto;
    text-align: center;
}

.wps-adm-offline-header > span {
    color: rgba(255,255,255,.65);
}

.wps-adm-offline-header h2 {
    margin: 0 0 18px;
    color: #fff;
    font-size: 39px;
    font-weight: 700;
}

.wps-adm-offline-header p {
    margin: 0;
    color: rgba(255,255,255,.72);
    font-size: 14px;
    line-height: 1.8;
}

.wps-adm-journey {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1050px;
    margin: 65px auto 50px;
}

.wps-adm-journey-item {
    text-align: center;
    min-width: 130px;
}

.wps-adm-journey-icon {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    border-radius: 50%;
    font-size: 20px;
    transition: .3s ease;
}

.wps-adm-journey-item.active .wps-adm-journey-icon {
    background: #cc1f26;
    border-color: #cc1f26;
}

.wps-adm-journey-item span {
    display: block;
    margin-top: 13px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.wps-adm-journey-line {
    width: 70px;
    height: 1px;
    background: rgba(255,255,255,.3);
}

.wps-adm-apply-btn {
    display: flex;
    width: fit-content;
    margin: auto;
    background: #fff;
    color: #155087 !important;
}

.wps-adm-apply-btn:hover {
    background: #cc1f26;
    color: #fff !important;
}


/* =========================================================
   DOCUMENTS
========================================================= */

.wps-adm-documents {
    padding: 100px 0;
    background: #f7f9fb;
}

.wps-adm-documents-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 70px;
    align-items: center;
    max-width: 1050px;
    margin: auto;
}

.wps-adm-documents-heading h2 {
    margin: 0 0 18px;
    color: #155087;
    font-size: 34px;
    font-weight: 300;
    line-height: 1.3;
}

.wps-adm-documents-heading h2 strong {
    display: block;
    font-weight: 800;
}

.wps-adm-documents-heading p {
    margin: 0;
    color: #6b7681;
    font-size: 14px;
    line-height: 1.8;
}

.wps-adm-documents-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.wps-adm-document {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 65px;
    padding: 15px;
    background: #fff;
    border: 1px solid #e7ebef;
    transition: .3s ease;
}

.wps-adm-document:hover {
    border-color: #155087;
    transform: translateY(-3px);
}

.wps-adm-document i {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #eaf1f7;
    color: #155087;
    border-radius: 50%;
    font-size: 12px;
}

.wps-adm-document span {
    color: #4f5d69;
    font-size: 12px;
    line-height: 1.5;
}

.wps-adm-document-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 55px;
}

.wps-adm-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 14px 22px;
    background: #155087;
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: .3s ease;
}

.wps-adm-action-btn:hover {
    background: #cc1f26;
    transform: translateY(-3px);
}



 /* ========================================= 
   PREMIUM FAQ 
========================================= */ 
 
.wps-faq-premium { 
    padding: 95px 0; 
    background: #f7f8fa; 
    overflow: hidden; 
} 
 
/* ========================================= 
   TITLE 
========================================= */ 
 
.wps-faq-title { 
    text-align: center; 
    margin-bottom: 55px; 
} 
 
.wps-faq-title h2 { 
    margin: 0; 
    font-size: 42px; 
    font-weight: 800; 
    color: #155087; 
    letter-spacing: -1px; 
} 
 
.wps-faq-title-line { 
    width: 55px; 
    height: 4px; 
    background: #cc1f26; 
    border-radius: 50px; 
    margin: 16px auto 0; 
} 
 
/* ========================================= 
   FAQ WRAPPER 
========================================= */ 
 
.wps-faq-wrapper { 
    max-width: 1100px; 
    margin: auto; 
    position: relative; 
    z-index: 2; 
} 
 
/* ========================================= 
   FAQ ROW 
========================================= */ 
 
.wps-faq-row { 
    position: relative; 
    background: #fff; 
    margin-bottom: 12px; 
    border-radius: 8px; 
    overflow: hidden; 
    border: 1px solid #e6eaee; 
    transition: all .4s ease; 
} 
 
.wps-faq-row:hover { 
    transform: translateX(5px); 
    border-color: #155087; 
} 
 
/* Active */ 
 
.wps-faq-row:has(.collapse.show) { 
    border-color: #155087; 
    box-shadow: 0 15px 35px rgba(21, 80, 135, .10); 
} 
 
/* ========================================= 
   QUESTION 
========================================= */ 
 
.wps-faq-question { 
    width: 100%; 
    min-height: 82px; 
    padding: 18px 22px; 
    border: 0; 
    background: #fff; 
 
    display: flex; 
    align-items: center; 
    gap: 20px; 
 
    text-align: left; 
    cursor: pointer; 
} 
 
/* Q1 */ 
 
.wps-faq-q { 
    width: 48px; 
    min-width: 48px; 
    height: 48px; 
 
    display: flex; 
    align-items: center; 
    justify-content: center; 
 
    border-radius: 50%; 
 
    background: #155087; 
    color: #fff; 
 
    font-size: 12px; 
    font-weight: 800; 
 
    transition: .4s ease; 
} 
 
.wps-faq-row:not(:has(.collapse.show)) .wps-faq-q { 
    background: #f1f4f7; 
    color: #155087; 
} 
 
.wps-faq-row:hover .wps-faq-q { 
    /*background: #cc1f26; */
    color: #fff; 
} 
 
/* Question */ 
 
.wps-faq-question-text { 
    flex: 1; 
 
    font-size: 17px; 
    line-height: 1.5; 
    font-weight: 700; 
 
    color: #263d50; 
 
    padding-right: 20px; 
} 
 
/* ========================================= 
   ARROW 
========================================= */ 
 
.wps-faq-arrow { 
    width: 42px; 
    height: 42px; 
    min-width: 42px; 
 
    display: flex; 
    align-items: center; 
    justify-content: center; 
 
    border-radius: 50%; 
 
    background: #f3f5f7; 
    color: #155087; 
 
    transition: all .4s ease; 
} 
 
.wps-faq-question:not(.collapsed) .wps-faq-arrow { 
    background: #cc1f26; 
    color: #fff; 
    transform: rotate(90deg); 
} 
 
/* ========================================= 
   ANSWER 
========================================= */ 
 
.wps-faq-answer { 
    margin: 0 82px 0 90px; 
 
    padding: 0 0 30px; 
 
    border-top: 1px solid #edf0f2; 
    padding-top: 22px; 
 
    color: #66727c; 
 
    font-size: 14px; 
    line-height: 1.9; 
    font-weight: 500; 
} 
 
.wps-faq-answer a { 
    color: #155087; 
    font-weight: 700; 
} 
 
.wps-faq-answer a:hover { 
    color: #cc1f26; 
} 
 
/* ========================================= 
   BACKGROUND DESIGN 
========================================= */ 
 
.wps-faq-bg-design { 
    position: absolute; 
 
    right: -100px; 
    bottom: -100px; 
 
    width: 350px; 
 
    opacity: .18; 
 
    pointer-events: none; 
} 
 
/* ========================================= 
   TABLET 
========================================= */ 
 
@media (max-width: 991px) { 
 
    .wps-faq-premium { 
        padding: 75px 0; 
    } 
 
    .wps-faq-title h2 { 
        font-size: 36px; 
    } 
 
    .wps-faq-wrapper { 
        max-width: 100%; 
    } 
 
    .wps-faq-question-text { 
        font-size: 16px; 
    } 
 
    .wps-faq-answer { 
        margin-left: 90px; 
        margin-right: 30px; 
    } 
} 
 
/* ========================================= 
   MOBILE 
========================================= */ 
 
@media (max-width: 767px) { 
 
    .wps-faq-premium { 
        padding: 60px 0; 
    } 
 
    .wps-faq-title { 
        margin-bottom: 35px; 
    } 
 
    .wps-faq-title h2 { 
        font-size: 30px; 
    } 
 
    .wps-faq-question { 
        min-height: 72px; 
        padding: 12px 13px; 
        gap: 10px; 
    } 
 
    .wps-faq-q { 
        width: 38px; 
        min-width: 38px; 
        height: 38px; 
        font-size: 10px; 
    } 
 
    .wps-faq-question-text { 
        font-size: 14px; 
        padding-right: 0; 
    } 
 
    .wps-faq-arrow { 
        width: 34px; 
        height: 34px; 
        min-width: 34px; 
        font-size: 11px; 
    } 
 
    .wps-faq-answer { 
        margin-left: 61px; 
        margin-right: 18px; 
        padding-top: 18px; 
        padding-bottom: 22px; 
        font-size: 13px; 
        line-height: 1.75; 
    } 
 
    .wps-faq-bg-design { 
        width: 220px; 
        right: -90px; 
        bottom: -60px; 
    } 
} 
 
/* ========================================= 
   ACHIEVEMENTS SECTION 
========================================= */ 
 
.wps-achievements-section { 
    padding: 90px 0; 
    overflow: hidden; 
} 
 
/* ========================================= 
   SECTION HEADING 
========================================= */ 
 
.wps-section-heading { 
    margin-bottom: 50px; 
} 
 
.wps-section-heading span { 
    display: block; 
    margin-bottom: 5px; 
 
    font-size: 13px; 
    font-weight: 800; 
    letter-spacing: 3px; 
 
    color: #cc1f26; 
} 
 
.wps-section-heading h2 { 
    margin: 0; 
 
    font-size: 42px; 
    line-height: 1.15; 
    font-weight: 800; 
 
    color: #155087; 
    letter-spacing: -1px; 
} 
 
.wps-heading-line { 
    width: 60px; 
    height: 4px; 
 
    margin: 17px auto 0; 
 
    background: #cc1f26; 
    border-radius: 50px; 
} 


/* =========================================================
   LATUR ADMISSION FLOW
========================================================= */

.latur-admission-flow {
    position: relative;
    padding: 90px 0;
    background: #f7f9fc;
    overflow: hidden;
}


/* =========================================================
   HEADING
========================================================= */

.admission-flow-heading {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 65px;
}

.admission-flow-heading > span {
    display: inline-block;
    margin-bottom: 12px;
    padding: 7px 18px;

    border-radius: 30px;

    background: rgba(239, 126, 34, 0.10);
    color: #ef7e22;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.admission-flow-heading h2 {
    margin: 0 0 15px;

    color: #155087;

    font-size: 40px;
    font-weight: 700;
}

.admission-flow-heading h2 strong {
    color: #ef7e22;
}

.admission-flow-heading p {
    margin: 0;

    color: #777;

    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   FLOW
========================================================= */

.admission-flow {
    display: flex;
    align-items: flex-start;
    justify-content: center;

    max-width: 1200px;
    margin: auto;
}


/* =========================================================
   STEP
========================================================= */

.flow-step {
    position: relative;

    width: 170px;

    text-align: center;

    flex-shrink: 0;
}


/* =========================================================
   NUMBER
========================================================= */

.flow-number {
    margin-bottom: 13px;

    color: #b7c0c9;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 1px;

    transition: 0.4s ease;
}


/* =========================================================
   CIRCLE
========================================================= */

.flow-circle {
    position: relative;

    width: 76px;
    height: 76px;

    margin: auto;

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

    border-radius: 50%;

    background: #fff;

    border: 2px solid #e2e8ed;

    color: #155087;

    font-size: 24px;

    box-shadow: 0 10px 30px rgba(21, 80, 135, 0.10);

    z-index: 2;

    transition:
        transform 0.4s ease,
        background 0.4s ease,
        color 0.4s ease,
        border-color 0.4s ease;
}


/* Outer ring */

.flow-circle::before {
    content: "";

    position: absolute;

    inset: -8px;

    border-radius: 50%;

    border: 1px dashed #d8e0e7;

    animation: circleRotate 8s linear infinite;
}


@keyframes circleRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   STEP TEXT
========================================================= */

.flow-step h3 {
    margin: 22px 0 7px;

    color: #155087;

    font-size: 16px;
    font-weight: 700;
}

.flow-step p {
    margin: 0;

    color: #777;

    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   CONNECTOR
========================================================= */

.flow-connector {
    position: relative;

    width: 95px;

    height: 4px;

    margin-top: 108px;

    background: #dfe5ea;

    overflow: hidden;

    flex-shrink: 1;
}


/* Animated moving line */

.flow-connector span {
    position: absolute;

    top: 0;
    left: -100%;

    width: 55%;
    height: 100%;

    background: linear-gradient(
        90deg,
        #155087,
        #ef7e22
    );

    animation: flowMove 2s linear infinite;
}


@keyframes flowMove {

    0% {
        left: -60%;
    }

    100% {
        left: 110%;
    }

}


/* =========================================================
   ACTIVE STEP ANIMATION
========================================================= */

.flow-step.active .flow-circle {

    background: #155087;

    border-color: #155087;

    color: #fff;

    animation: stepPulse 2s ease-in-out infinite;
}


@keyframes stepPulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 10px 30px rgba(21, 80, 135, 0.15);
    }

    50% {
        transform: scale(1.08);
        box-shadow: 0 15px 40px rgba(21, 80, 135, 0.28);
    }

}


.flow-step.active .flow-number {
    color: #ef7e22;
}


/* =========================================================
   HOVER
========================================================= */

.flow-step:hover .flow-circle {

    background: #155087;

    border-color: #155087;

    color: #fff;

    transform: translateY(-7px);
}

.flow-step:hover .flow-number {
    color: #ef7e22;
}


/* =========================================================
   CTA
========================================================= */

.admission-flow-cta {

    max-width: 1050px;

    margin: 70px auto 0;

    padding: 28px 35px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    background: #155087;

    border-radius: 18px;

    box-shadow: 0 20px 45px rgba(21, 80, 135, 0.18);
}


.admission-flow-cta h3 {

    margin: 0 0 7px;

    color: #fff;

    font-size: 21px;
}


.admission-flow-cta p {

    margin: 0;

    color: rgba(255,255,255,0.75);

    font-size: 14px;
}


/* =========================================================
   APPLY BUTTON
========================================================= */

.flow-apply-btn {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    padding: 13px 22px 13px 27px;

    border-radius: 50px;

    background: #c93333;

    color: #fff !important;

    text-decoration: none !important;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1px;

    white-space: nowrap;

    transition: 0.35s ease;
}


.flow-apply-btn i {

    width: 32px;
    height: 32px;

    display: flex;

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

    background: #fff;

    color: #ef7e22;

    border-radius: 50%;

    transition: 0.35s ease;
}


.flow-apply-btn:hover {

    background: #fff;

    color: #155087 !important;

    transform: translateY(-3px);
}


.flow-apply-btn:hover i {

    transform: translateX(5px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .admission-flow {
        padding: 0 15px;
    }

    .flow-step {
        width: 145px;
    }

    .flow-connector {
        width: 55px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .latur-admission-flow {
        padding: 65px 15px;
    }

    .admission-flow-heading {
        margin-bottom: 45px;
    }

    .admission-flow-heading h2 {
        font-size: 29px;
    }


    .admission-flow {
        display: block;
        padding: 0;
    }


    .flow-step {

        width: 100%;

        display: grid;

        grid-template-columns: 45px 75px 1fr;

        align-items: center;

        text-align: left;

        margin-bottom: 25px;
    }


    .flow-number {

        margin: 0;

        text-align: center;
    }


    .flow-circle {

        width: 62px;
        height: 62px;

        margin: 0;

        font-size: 20px;
    }


    .flow-step h3 {

        margin: 0 0 5px;

        font-size: 16px;
    }


    .flow-step p {

        font-size: 12px;
    }


    .flow-connector {

        width: 3px;
        height: 35px;

        margin: -25px 0 -5px 76px;

        overflow: hidden;
    }


    .flow-connector span {

        width: 100%;
        height: 50%;

        top: -100%;
        left: 0;

        animation: flowMoveMobile 2s linear infinite;
    }


    @keyframes flowMoveMobile {

        0% {
            top: -60%;
        }

        100% {
            top: 110%;
        }

    }


    .admission-flow-cta {

        display: block;

        margin-top: 45px;

        padding: 25px 20px;

        text-align: center;
    }


    .admission-flow-cta h3 {
        font-size: 19px;
    }


    .admission-flow-cta p {
        line-height: 1.6;
        margin-bottom: 20px;
    }

}



/* =========================================================
   MIT-WPS - LOCATE US
========================================================= */

.wps-location-section {
    position: relative;
    padding: 100px 0;
    background: #f7f9fc;
    overflow: hidden;
}


/* ---------------------------------------------------------
   SECTION HEADING
--------------------------------------------------------- */

.wps-location-heading {
    max-width: 760px;
    margin: 0 auto 55px;
}

.wps-location-heading > span {
    display: block;
    margin-bottom: 12px;
    color: #cc1f26;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.wps-location-heading h2 {
    margin: 0;
    color: #155087;
    font-size: 48px;
    line-height: 1.15;
    font-weight: 300;
}

.wps-location-heading h2 strong {
    font-weight: 800;
}

.wps-location-line {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 18px 0 20px;
}

.wps-location-line i {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cc1f26;
}

.wps-location-line i:nth-child(2) {
    width: 45px;
    border-radius: 10px;
}

.wps-location-heading p {
    margin: 0;
    color: #666;
    font-size: 16px;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   MAIN WRAPPER
--------------------------------------------------------- */

.wps-location-wrapper {
    display: grid;
    grid-template-columns: 38% 62%;
    min-height: 500px;
    background: #fff;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(21, 80, 135, 0.10);
}


/* ---------------------------------------------------------
   LEFT CONTENT
--------------------------------------------------------- */

.wps-location-content {
    position: relative;
    padding: 50px 40px;
    background: #155087;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 35px;
    overflow: hidden;
}

.wps-location-content:before {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    right: -110px;
    top: -100px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
}

.wps-location-content:after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    left: -180px;
    bottom: -170px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 50%;
}


/* ---------------------------------------------------------
   INFO CARD
--------------------------------------------------------- */

.wps-location-card {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.wps-location-icon {
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.wps-location-icon img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.wps-location-info {
    flex: 1;
}

.wps-location-label {
    display: block;
    margin-bottom: 5px;
    color: rgba(255,255,255,0.65);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.wps-location-info h3 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 27px;
    font-weight: 700;
}

.wps-location-info p {
    margin: 0;
    color: rgba(255,255,255,0.88);
    font-size: 15px;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   PHONE
--------------------------------------------------------- */

.wps-location-timing {
    margin-bottom: 12px !important;
}

.wps-location-phone {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wps-location-phone a {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s ease;
}

.wps-location-phone a:hover {
    color: #ffccd0;
    padding-left: 5px;
}


/* ---------------------------------------------------------
   MAP
--------------------------------------------------------- */

.wps-location-map {
    position: relative;
    padding: 15px;
    background: #fff;
}

.wps-location-map-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 470px;
    overflow: hidden;
    border-radius: 18px;
}

.wps-location-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 470px;
}


/* ---------------------------------------------------------
   MAP BADGE
--------------------------------------------------------- */

.wps-map-badge {
    position: absolute;
    z-index: 5;
    top: 20px;
    left: 20px;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 11px 18px;

    background: #fff;
    border-radius: 50px;

    color: #155087;
    font-size: 13px;
    font-weight: 700;

    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.wps-map-badge i {
    color: #cc1f26;
    font-size: 16px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .wps-location-section {
        padding: 75px 0;
    }

    .wps-location-heading h2 {
        font-size: 40px;
    }

    .wps-location-wrapper {
        grid-template-columns: 1fr;
    }

    .wps-location-content {
        padding: 45px;
    }

    .wps-location-map {
        padding: 15px;
    }

    .wps-location-map-inner,
    .wps-location-map iframe {
        min-height: 400px;
    }

}


@media (max-width: 767px) {

    .wps-location-section {
        padding: 60px 0;
    }

    .wps-location-heading {
        margin-bottom: 35px;
    }

    .wps-location-heading h2 {
        font-size: 34px;
    }

    .wps-location-heading p {
        font-size: 14px;
    }

    .wps-location-content {
        padding: 35px 25px;
        gap: 30px;
    }

    .wps-location-card {
        gap: 15px;
    }

    .wps-location-icon {
        flex: 0 0 55px;
        width: 55px;
        height: 55px;
    }

    .wps-location-icon img {
        width: 32px;
        height: 32px;
    }

    .wps-location-info h3 {
        font-size: 23px;
    }

    .wps-location-map {
        padding: 10px;
    }

    .wps-location-map-inner,
    .wps-location-map iframe {
        min-height: 350px;
    }

}


@media (max-width: 480px) {

    .wps-location-heading h2 {
        font-size: 30px;
    }

    .wps-location-content {
        padding: 30px 20px;
    }

    .wps-location-card {
        align-items: flex-start;
    }

    .wps-location-info p {
        font-size: 14px;
    }

    .wps-location-phone a {
        font-size: 14px;
    }

    .wps-map-badge {
        top: 12px;
        left: 12px;
        padding: 9px 14px;
        font-size: 11px;
    }

    .wps-location-map-inner,
    .wps-location-map iframe {
        min-height: 300px;
    }

}



/* =========================================================
   MIT-WPS - ADMISSIONS CTA
========================================================= */

.wps-admission-cta-section {
    position: relative;
    padding: 90px 0;
    background: #f5f7fa;
    overflow: hidden;
}


/* ---------------------------------------------------------
   MAIN CTA
--------------------------------------------------------- */

.wps-admission-cta {
    position: relative;

    display: grid;
    grid-template-columns: 25% 50% 25%;
    align-items: center;

    min-height: 390px;

    background: #155087;

    border-radius: 28px;

    overflow: hidden;

    box-shadow: 0 25px 60px rgba(21,80,135,0.20);
}


/* ---------------------------------------------------------
   DECORATIVE CIRCLES
--------------------------------------------------------- */

.wps-admission-circle {
    position: absolute;

    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50%;

    pointer-events: none;
}

.wps-admission-circle-one {
    width: 420px;
    height: 420px;

    left: -210px;
    top: -180px;
}

.wps-admission-circle-two {
    width: 330px;
    height: 330px;

    right: -120px;
    bottom: -190px;
}


/* ---------------------------------------------------------
   ROBOT
--------------------------------------------------------- */

.wps-admission-robot {
    position: relative;
    z-index: 2;

    height: 100%;

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

    align-self: stretch;
}

.wps-admission-robot img {
    width: 245px;
    max-width: 100%;

    margin-bottom: -2px;

    transition: transform 0.5s ease;
}

.wps-admission-cta:hover .wps-admission-robot img {
    transform: translateY(-8px);
}


/* ---------------------------------------------------------
   CONTENT
--------------------------------------------------------- */

.wps-admission-content {
    position: relative;
    z-index: 3;

    padding: 45px 20px;

    text-align: center;
}

.wps-admission-eyebrow {
    display: block;

    margin-bottom: 12px;

    color: rgba(255,255,255,0.65);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2.5px;
}

.wps-admission-content h2 {
    margin: 0;

    color: #fff;

    font-size: 48px;
    line-height: 1.1;

    font-weight: 300;
}

.wps-admission-content h2 strong {
    font-weight: 800;
    color: #fff;
}


/* ---------------------------------------------------------
   TITLE LINE
--------------------------------------------------------- */

.wps-admission-line {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 6px;

    margin: 18px 0;
}

.wps-admission-line i {
    display: block;

    width: 7px;
    height: 7px;

    background: #cc1f26;

    border-radius: 50%;
}

.wps-admission-line i:nth-child(2) {
    width: 40px;

    border-radius: 10px;
}


/* ---------------------------------------------------------
   GRADE
--------------------------------------------------------- */

.wps-admission-grade {
    margin: 0 0 10px;

    color: #fff;

    font-size: 25px;
    font-weight: 700;
}

.wps-admission-grade span {
    padding: 0 5px;

    color: #cc1f26;

    font-size: 14px;
    font-weight: 500;

    text-transform: uppercase;
}


/* ---------------------------------------------------------
   DESCRIPTION
--------------------------------------------------------- */

.wps-admission-description {
    max-width: 470px;

    margin: 0 auto 25px;

    color: rgba(255,255,255,0.75);

    font-size: 14px;
    line-height: 1.7;
}


/* ---------------------------------------------------------
   BUTTON
--------------------------------------------------------- */

.wps-admission-button {
    display: inline-flex;

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

    gap: 12px;

    padding: 13px 15px 13px 23px;

    color: #155087;

    background: #fff;

    border-radius: 50px;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1px;

    text-decoration: none;

    transition: all 0.3s ease;
}

.wps-admission-button i {
    display: flex;

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

    width: 32px;
    height: 32px;

    color: #fff;

    background: #cc1f26;

    border-radius: 50%;

    font-size: 11px;

    transition: transform 0.3s ease;
}

.wps-admission-button:hover {
    color: #fff;

    background: #cc1f26;
}

.wps-admission-button:hover i {
    color: #cc1f26;

    background: #fff;

    transform: translateX(4px);
}


/* ---------------------------------------------------------
   GIRL
--------------------------------------------------------- */

.wps-admission-girl {
    position: relative;
    z-index: 2;

    height: 100%;

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

    align-self: stretch;
}

.wps-admission-girl img {
    width: 340px;
    max-width: 120%;

    margin-bottom: -2px;

    transition: transform 0.5s ease;
}

.wps-admission-cta:hover .wps-admission-girl img {
    transform: translateY(-8px);
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 991px) {

    .wps-admission-cta-section {
        padding: 70px 0;
    }

    .wps-admission-cta {
        grid-template-columns: 22% 56% 22%;
        min-height: 360px;
    }

    .wps-admission-content {
        padding: 40px 10px;
    }

    .wps-admission-content h2 {
        font-size: 40px;
    }

    .wps-admission-grade {
        font-size: 21px;
    }

    .wps-admission-description {
        font-size: 13px;
    }

    .wps-admission-robot img {
        width: 190px;
    }

    .wps-admission-girl img {
        width: 270px;
    }

}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 767px) {

    .wps-admission-cta-section {
        padding: 55px 0;
    }

    .wps-admission-cta {
        display: flex;
        flex-direction: column;

        min-height: auto;

        padding-top: 25px;

        border-radius: 22px;
    }

    .wps-admission-content {
        order: 1;

        padding: 25px 20px 35px;
    }

    .wps-admission-content h2 {
        font-size: 38px;
    }

    .wps-admission-grade {
        font-size: 21px;
    }

    .wps-admission-description {
        max-width: 400px;
    }

    .wps-admission-robot {
        order: 2;

        height: 150px;

        align-items: flex-end;
    }

    .wps-admission-robot img {
        width: 170px;
    }

    .wps-admission-girl {
        order: 3;

        height: 190px;

        align-items: flex-end;
    }

    .wps-admission-girl img {
        width: 230px;
    }

}


/* =========================================================
   RESPONSIVE - SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .wps-admission-content h2 {
        font-size: 32px;
    }

    .wps-admission-eyebrow {
        font-size: 9px;
        letter-spacing: 1.8px;
    }

    .wps-admission-grade {
        font-size: 19px;
    }

    .wps-admission-description {
        font-size: 13px;
    }

    .wps-admission-robot {
        height: 125px;
    }

    .wps-admission-robot img {
        width: 145px;
    }

    .wps-admission-girl {
        height: 160px;
    }

    .wps-admission-girl img {
        width: 200px;
    }

}


/* =========================================================
   OVERVIEW PAGE
========================================================= */

.wps-overview-intro {
    position: relative;
    padding: 95px 0 100px;
    background: #fff;
    overflow: hidden;
}


/* =========================================================
   INTRO HEADING
========================================================= */

.wps-overview-heading {
    text-align: center;
    margin-bottom: 60px;
}

.wps-overview-heading span {
    display: block;
    margin-bottom: 10px;

    color: #cc1f26;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.wps-overview-heading h1 {
    margin: 0;

    color: #155087;

    font-size: 52px;
    font-weight: 800;
    line-height: 1.1;
}

.wps-overview-line {
    position: relative;

    width: 55px;
    height: 3px;

    margin: 18px auto 0;

    background: #cc1f26;
}

.wps-overview-line::after {
    content: "";

    position: absolute;

    left: 22px;
    top: 0;

    width: 55px;
    height: 3px;

    background: #155087;
}


/* =========================================================
   INTRO CONTENT
========================================================= */

.wps-overview-intro-grid {
    display: grid;

    grid-template-columns: 220px 1fr;

    gap: 60px;

    max-width: 1120px;

    margin: auto;

    padding: 45px 0;

    border-top: 1px solid #e8edf2;
    border-bottom: 1px solid #e8edf2;
}

.wps-overview-intro-label {
    position: relative;

    padding-left: 20px;
}

.wps-overview-intro-label::before {
    content: "";

    position: absolute;

    left: 0;
    top: 3px;

    width: 4px;
    height: 55px;

    background: #cc1f26;
}

.wps-overview-intro-label span {
    color: #155087;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 1.5px;
}

.wps-overview-intro-content p {
    max-width: 900px;

    margin: 0;

    color: #626b73;

    font-size: 15px;
    line-height: 1.95;
}


/* =========================================================
   VALUES SECTION
========================================================= */

.wps-overview-values {
    position: relative;

    padding: 100px 0 115px;

    background: #f6f8fb;

    overflow: hidden;
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.wps-overview-values::before {
    content: "";

    position: absolute;

    top: -180px;
    right: -180px;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    border: 80px solid rgba(21,80,135,.035);
}

.wps-overview-values::after {
    content: "";

    position: absolute;

    bottom: -200px;
    left: -200px;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    background: rgba(204,31,38,.025);
}


/* =========================================================
   VALUES HEADING
========================================================= */

.wps-values-heading {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;

    margin-bottom: 55px;
}

.wps-values-heading > div {
    max-width: 600px;
}

.wps-values-heading span {
    display: block;

    margin-bottom: 10px;

    color: #cc1f26;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 3px;
}

.wps-values-heading h2 {
    margin: 0;

    color: #155087;

    font-size: 45px;
    font-weight: 300;

    line-height: 1.15;
}

.wps-values-heading h2 strong {
    font-weight: 800;
}

.wps-values-heading > p {
    max-width: 390px;

    margin: 0;

    color: #747d85;

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   VALUES GRID
========================================================= */

.wps-values-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 22px;
}


/* =========================================================
   VALUE CARD
========================================================= */

.wps-value-card {
    position: relative;

    min-height: 320px;

    padding: 35px 32px 32px;

    background: #fff;

    border: 1px solid #e6ebf0;

    border-radius: 18px;

    overflow: hidden;

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;
}

.wps-value-card::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    height: 4px;

    background: #155087;

    transform: scaleX(0);

    transform-origin: left;

    transition: transform .4s ease;
}

.wps-value-card:hover {
    transform: translateY(-8px);

    border-color: rgba(21,80,135,.12);

    box-shadow:
        0 22px 45px rgba(21,80,135,.11);
}

.wps-value-card:hover::before {
    transform: scaleX(1);
}


/* =========================================================
   ICON
========================================================= */

.wps-value-icon {
    display: flex;

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

    width: 68px;
    height: 68px;

    margin-bottom: 25px;

    border-radius: 16px;

    background: #edf4f9;

    transition:
        background .35s ease,
        transform .35s ease;
}

.wps-value-icon img {
    width: 38px;
    height: 38px;

    object-fit: contain;

    transition: transform .35s ease;
}

.wps-value-card:hover .wps-value-icon {
    background: #155087;

    transform: translateY(-3px);
}

.wps-value-card:hover .wps-value-icon img {
    transform: scale(1.1);
}


/* =========================================================
   LABEL
========================================================= */

.wps-value-label {
    display: block;

    margin-bottom: 8px;

    color: #cc1f26;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2px;
}


/* =========================================================
   CARD HEADING
========================================================= */

.wps-value-card h3 {
    max-width: 280px;

    margin: 0 0 14px;

    color: #155087;

    font-size: 21px;
    font-weight: 750;

    line-height: 1.3;
}


/* =========================================================
   CARD TEXT
========================================================= */

.wps-value-card p {
    margin: 0;

    color: #727b83;

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   CARD ARROW
========================================================= */

.wps-value-arrow {
    position: absolute;

    right: 27px;
    bottom: 25px;

    display: flex;

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

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: #f1f5f8;

    color: #155087;

    font-size: 12px;

    opacity: 0;

    transform: translateX(-8px);

    transition:
        opacity .35s ease,
        transform .35s ease,
        background .35s ease,
        color .35s ease;
}

.wps-value-card:hover .wps-value-arrow {
    opacity: 1;

    transform: translateX(0);

    background: #cc1f26;

    color: #fff;
}


/* =========================================================
   STUDENT IMAGE
========================================================= */

.wps-value-image {
    position: relative;

    min-height: 320px;

    border-radius: 18px;

    overflow: hidden;

    background: #155087;
}

.wps-value-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(10,43,72,.88) 0%,
            rgba(10,43,72,.18) 55%,
            transparent 100%
        );
}

.wps-value-image img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .7s ease;
}

.wps-value-image:hover img {
    transform: scale(1.06);
}


/* =========================================================
   IMAGE CAPTION
========================================================= */

.wps-image-caption {
    position: absolute;

    z-index: 2;

    left: 30px;
    right: 30px;
    bottom: 28px;
}

.wps-image-caption span {
    display: block;

    margin-bottom: 8px;

    color: #fff;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2px;
}

.wps-image-caption strong {
    display: block;

    color: #fff;

    font-size: 25px;
    font-weight: 700;

    line-height: 1.25;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .wps-overview-intro {
        padding: 80px 0;
    }

    .wps-overview-heading h1 {
        font-size: 44px;
    }

    .wps-overview-intro-grid {
        grid-template-columns: 170px 1fr;

        gap: 40px;
    }

    .wps-values-heading {
        align-items: flex-start;

        flex-direction: column;
    }

    .wps-values-heading h2 {
        font-size: 40px;
    }

    .wps-values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .wps-overview-intro {
        padding: 65px 0 70px;
    }

    .wps-overview-heading {
        margin-bottom: 40px;
    }

    .wps-overview-heading h1 {
        font-size: 36px;
    }

    .wps-overview-intro-grid {
        display: block;

        padding: 30px 0;
    }

    .wps-overview-intro-label {
        margin-bottom: 25px;
    }

    .wps-overview-intro-content p {
        font-size: 14px;

        line-height: 1.8;
    }


    .wps-overview-values {
        padding: 70px 0 75px;
    }

    .wps-values-heading {
        margin-bottom: 35px;
    }

    .wps-values-heading h2 {
        font-size: 34px;
    }

    .wps-values-heading > p {
        font-size: 13px;
    }

    .wps-values-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .wps-value-card,
    .wps-value-image {
        min-height: 300px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .wps-overview-heading h1 {
        font-size: 32px;
    }

    .wps-values-heading h2 {
        font-size: 30px;
    }

    .wps-value-card {
        padding: 28px 25px;
    }

    .wps-value-card h3 {
        font-size: 19px;
    }

    .wps-value-image {
        min-height: 330px;
    }

    .wps-image-caption {
        left: 24px;
        right: 24px;
        bottom: 24px;
    }

    .wps-image-caption strong {
        font-size: 22px;
    }

}


/* =========================================================
   OUR CORE VALUES
========================================================= */

.wps-core-values {
    position: relative;

    padding: 110px 0 120px;

    background: #fff;

    overflow: hidden;
}


/* =========================================================
   BACKGROUND DETAIL
========================================================= */

.wps-core-values::before {
    content: "";

    position: absolute;

    top: -180px;
    right: -180px;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    border: 80px solid rgba(21, 80, 135, .035);

    pointer-events: none;
}


/* =========================================================
   HEADING
========================================================= */

.wps-core-values-heading {
    position: relative;
    z-index: 2;

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 50px;

    margin-bottom: 65px;
}

.wps-core-title-wrap {
    position: relative;
}

.wps-core-title-wrap > span {
    display: block;

    margin-bottom: 5px;

    color: #cc1f26;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 3px;
}

.wps-core-title-wrap h2 {
    margin: 0;

    color: #155087;

    font-size: 58px;
    font-weight: 300;

    line-height: .95;
}

.wps-core-title-wrap h2 strong {
    font-weight: 800;
}

.wps-core-title-line {
    position: relative;

    width: 55px;
    height: 3px;

    margin-top: 18px;

    background: #cc1f26;
}

.wps-core-title-line::after {
    content: "";

    position: absolute;

    left: 22px;
    top: 0;

    width: 55px;
    height: 3px;

    background: #155087;
}


/* =========================================================
   HEADING DESCRIPTION
========================================================= */

.wps-core-intro {
    max-width: 390px;

    padding-bottom: 4px;
}

.wps-core-intro p {
    position: relative;

    margin: 0;
    padding-left: 22px;

    color: #737c84;

    font-size: 14px;
    line-height: 1.8;
}

.wps-core-intro p::before {
    content: "";

    position: absolute;

    left: 0;
    top: 4px;

    width: 3px;
    height: 50px;

    background: #cc1f26;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.wps-core-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns: 42% 58%;

    align-items: stretch;

    min-height: 680px;
}


/* =========================================================
   LEFT IMAGE
========================================================= */

.wps-core-visual {
    position: relative;

    min-height: 680px;

    overflow: hidden;

    border-radius: 24px 0 0 24px;

    background: #155087;
}

.wps-core-visual::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(9, 42, 70, .92) 0%,
            rgba(9, 42, 70, .28) 48%,
            transparent 75%
        );
}

.wps-core-visual img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .8s ease;
}

.wps-core-visual:hover img {
    transform: scale(1.06);
}


/* =========================================================
   IMAGE CONTENT
========================================================= */

.wps-core-visual-content {
    position: absolute;

    z-index: 2;

    left: 42px;
    right: 30px;
    bottom: 42px;
}

.wps-core-visual-content span {
    display: block;

    margin-bottom: 10px;

    color: #fff;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2.5px;
}

.wps-core-visual-content h3 {
    margin: 0;

    color: #fff;

    font-size: 31px;
    font-weight: 700;

    line-height: 1.2;
}


/* =========================================================
   VALUES LIST
========================================================= */

.wps-core-list {
    display: flex;

    flex-direction: column;

    padding: 12px 0 12px 12px;

    background: #f5f7fa;

    border-radius: 0 24px 24px 0;
}


/* =========================================================
   VALUE ITEM
========================================================= */

.wps-core-item {
    position: relative;

    display: grid;

    grid-template-columns: 72px 1fr 40px;

    align-items: center;

    flex: 1;

    gap: 24px;

    padding: 25px 30px;

    background: #fff;

    border-bottom: 1px solid #e8edf2;

    transition:
        background .35s ease,
        transform .35s ease;
}

.wps-core-item:first-child {
    border-radius: 0 14px 0 0;
}

.wps-core-item:last-child {
    border-bottom: 0;

    border-radius: 0 0 14px 0;
}

.wps-core-item:hover {
    background: #155087;

    transform: translateX(-8px);
}

.wps-core-item:hover .wps-core-item-content span,
.wps-core-item:hover .wps-core-item-content h3,
.wps-core-item:hover .wps-core-item-content p {
    color: #fff;
}


/* =========================================================
   ICON
========================================================= */

.wps-core-icon {
    display: flex;

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

    width: 68px;
    height: 68px;

    border-radius: 15px;

    background: #edf4f9;

    transition:
        background .35s ease,
        transform .35s ease;
}

.wps-core-icon img {
    width: 38px;
    height: 38px;

    object-fit: contain;

    transition:
        filter .35s ease,
        transform .35s ease;
}

.wps-core-item:hover .wps-core-icon {
    background: rgba(255,255,255,.14);

    transform: scale(1.05);
}

.wps-core-item:hover .wps-core-icon img {
    filter: brightness(0) invert(1);

    transform: scale(1.08);
}


/* =========================================================
   VALUE CONTENT
========================================================= */

.wps-core-item-content span {
    display: block;

    margin-bottom: 5px;

    color: #cc1f26;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2px;

    transition: color .3s ease;
}

.wps-core-item-content h3 {
    margin: 0 0 7px;

    color: #155087;

    font-size: 19px;
    font-weight: 750;

    line-height: 1.25;

    transition: color .3s ease;
}

.wps-core-item-content p {
    max-width: 570px;

    margin: 0;

    color: #747d85;

    font-size: 12px;

    line-height: 1.6;

    transition: color .3s ease;
}


/* =========================================================
   ARROW
========================================================= */

.wps-core-arrow {
    display: flex;

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

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: #f0f4f7;

    color: #155087;

    font-size: 11px;

    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease;
}

.wps-core-item:hover .wps-core-arrow {
    background: #cc1f26;

    color: #fff;

    transform: translateX(3px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .wps-core-layout {
        grid-template-columns: 38% 62%;
    }

    .wps-core-item {
        grid-template-columns: 62px 1fr 35px;

        gap: 18px;

        padding: 22px;
    }

    .wps-core-icon {
        width: 58px;
        height: 58px;
    }

    .wps-core-icon img {
        width: 32px;
        height: 32px;
    }

    .wps-core-item-content h3 {
        font-size: 17px;
    }

}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 991px) {

    .wps-core-values {
        padding: 85px 0 90px;
    }

    .wps-core-values-heading {
        align-items: flex-start;

        flex-direction: column;

        margin-bottom: 45px;
    }

    .wps-core-title-wrap h2 {
        font-size: 48px;
    }

    .wps-core-layout {
        grid-template-columns: 1fr;
    }

    .wps-core-visual {
        min-height: 500px;

        border-radius: 24px 24px 0 0;
    }

    .wps-core-list {
        padding: 12px;

        border-radius: 0 0 24px 24px;
    }

    .wps-core-item {
        min-height: 145px;
    }

    .wps-core-item:first-child {
        border-radius: 14px 14px 0 0;
    }

    .wps-core-item:last-child {
        border-radius: 0 0 14px 14px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .wps-core-values {
        padding: 70px 0 75px;
    }

    .wps-core-title-wrap h2 {
        font-size: 40px;
    }

    .wps-core-intro {
        max-width: 100%;
    }

    .wps-core-visual {
        min-height: 430px;
    }

    .wps-core-visual-content {
        left: 28px;
        bottom: 30px;
    }

    .wps-core-visual-content h3 {
        font-size: 26px;
    }

    .wps-core-item {
        grid-template-columns: 55px 1fr;

        gap: 17px;

        padding: 24px 20px;
    }

    .wps-core-icon {
        width: 55px;
        height: 55px;
    }

    .wps-core-icon img {
        width: 30px;
        height: 30px;
    }

    .wps-core-item-content h3 {
        font-size: 17px;
    }

    .wps-core-item-content p {
        font-size: 12px;
    }

    .wps-core-arrow {
        display: none;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .wps-core-title-wrap h2 {
        font-size: 35px;
    }

    .wps-core-visual {
        min-height: 380px;
    }

    .wps-core-visual-content {
        left: 22px;
        right: 20px;
        bottom: 25px;
    }

    .wps-core-visual-content h3 {
        font-size: 23px;
    }

    .wps-core-item {
        grid-template-columns: 48px 1fr;

        gap: 14px;

        padding: 22px 17px;
    }

    .wps-core-icon {
        width: 48px;
        height: 48px;
    }

    .wps-core-icon img {
        width: 27px;
        height: 27px;
    }

}


/* =========================================================
   WPS CORE VALUES - PREMIUM MAIN DOMAIN STYLE
========================================================= */

.wps-core-values {
    position: relative;
    padding: 90px 0;
    background: #f7f8fa;
    overflow: hidden;
}

.wps-core-values .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.wps-values-heading {
    max-width: 780px;
    margin: 0 auto 50px;
    text-align: center;
}

.wps-values-heading > span {
    display: block;
    margin-bottom: 8px;
    color: #cc1f26;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.wps-values-heading h2 {
    margin: 0;
    color: #155087;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
}

.wps-values-heading h2 b {
    color: #cc1f26;
}

.wps-values-line {
    width: 65px;
    height: 4px;
    margin: 16px auto;
    background: #cc1f26;
    border-radius: 50px;
}

.wps-values-heading p {
    max-width: 650px;
    margin: 0 auto;
    color: #666;
    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   MAIN CAROUSEL
========================================================= */

.wps-values-carousel {
    position: relative;

    display: flex;

    width: 100%;
    max-width: 1150px;
    min-height: 520px;

    margin: 0 auto;

    background: #fff;

    border-radius: 28px;

    overflow: hidden;

    box-shadow: 0 25px 70px rgba(21, 80, 135, 0.12);
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.wps-values-left {
    position: relative;

    width: 58%;

    padding: 60px 65px 35px;
}


/* =========================================================
   SLIDES
========================================================= */

.wps-values-slides {
    position: relative;

    width: 100%;

    min-height: 360px;
}

.wps-value-slide {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    opacity: 0;
    visibility: hidden;

    transform: translateX(35px);

    transition:
        opacity .5s ease,
        transform .5s ease,
        visibility .5s ease;
}

.wps-value-slide.wps-active {
    position: relative;

    opacity: 1;
    visibility: visible;

    transform: translateX(0);
}


/* =========================================================
   ICON
========================================================= */

.wps-value-top {
    display: flex;
    align-items: center;

    margin-bottom: 25px;
}

.wps-value-icon {
    width: 88px;
    height: 88px;

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

    background: #eef4f8;

    border: 1px solid rgba(21, 80, 135, .08);

    border-radius: 50%;

    box-shadow: 0 12px 30px rgba(21, 80, 135, .10);

    transition: all .4s ease;
}

.wps-value-slide.wps-active .wps-value-icon {
    background: #155087;

    box-shadow:
        0 15px 35px rgba(21, 80, 135, .25);

    transform: scale(1.05);
}

.wps-value-icon img {
    width: 52px;
    height: 52px;

    object-fit: contain;

    transition: all .4s ease;
}

.wps-value-slide.wps-active .wps-value-icon img {
    filter: brightness(0) invert(1);
}


/* =========================================================
   LABEL
========================================================= */

.wps-value-label {
    display: inline-block;

    margin-bottom: 10px;

    color: #cc1f26;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* =========================================================
   TITLE
========================================================= */

.wps-value-slide h3 {
    max-width: 600px;

    margin: 0 0 18px;

    color: #155087;

    font-size: 34px;
    font-weight: 800;

    line-height: 1.2;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.wps-value-slide p {
    max-width: 570px;

    margin: 0;

    color: #555;

    font-size: 16px;

    line-height: 1.85;
}


/* =========================================================
   CONTROLS
========================================================= */

.wps-values-controls {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    margin-top: 15px;

    padding-top: 22px;

    border-top: 1px solid #e8e8e8;
}


/* =========================================================
   ARROWS
========================================================= */

.wps-arrow-buttons {
    display: flex;

    gap: 10px;
}

.wps-arrow-buttons button {
    position: relative;

    width: 48px;
    height: 48px;

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

    padding: 0;

    background: #fff;

    border: 1px solid #dfe4e8;

    border-radius: 50%;

    color: #155087;

    font-size: 16px;

    cursor: pointer;

    transition: all .35s ease;
}

.wps-arrow-buttons button:hover {
    background: #155087;

    border-color: #155087;

    color: #fff;

    transform: translateY(-4px);

    box-shadow: 0 10px 25px rgba(21, 80, 135, .22);
}


/* =========================================================
   RIGHT IMAGE
========================================================= */

.wps-values-right {
    position: relative;

    width: 42%;
    min-height: 520px;

    display: flex;

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

    background: #155087;

    overflow: hidden;
}


/* =========================================================
   RED CURVE
========================================================= */

.wps-values-right::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    top: -310px;
    left: -120px;

    background: #cc1f26;

    border-radius: 50%;
}


/* =========================================================
   LARGE DECORATIVE CIRCLE
========================================================= */

.wps-image-circle {
    position: absolute;

    width: 350px;
    height: 350px;

    top: 75px;

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

    border-radius: 50%;
}


/* =========================================================
   STUDENT IMAGE
========================================================= */

.wps-student-image {
    position: relative;

    z-index: 5;

    display: block;

    width: auto;
    max-width: 100%;

    height: 94%;

    object-fit: contain;

    transition: transform .6s ease;
}

.wps-values-carousel:hover .wps-student-image {
    transform: scale(1.025);
}


/* =========================================================
   BOTTOM DECORATION
========================================================= */

.wps-values-right::after {
    content: "";

    position: absolute;

    right: -90px;
    bottom: -90px;

    width: 210px;
    height: 210px;

    border: 35px solid rgba(255,255,255,.07);

    border-radius: 50%;
}


/* =========================================================
   REMOVE OLD NUMBER
========================================================= */

.wps-value-number,
.wps-values-counter {
    display: none !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .wps-values-carousel {
        display: block;

        min-height: 0;
    }

    .wps-values-left {
        width: 100%;

        padding: 50px;
    }

    .wps-values-right {
        width: 100%;

        min-height: 450px;
        height: 450px;
    }

    .wps-values-slides {
        min-height: 330px;
    }

    .wps-value-slide {
        position: absolute;
    }

    .wps-value-slide.wps-active {
        position: relative;
    }

    .wps-student-image {
        height: 100%;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .wps-core-values {
        padding: 65px 0;
    }

    .wps-values-heading {
        margin-bottom: 35px;
    }

    .wps-values-heading h2 {
        font-size: 34px;
    }

    .wps-values-heading p {
        padding: 0 15px;

        font-size: 14px;
    }

    .wps-values-carousel {
        border-radius: 20px;
    }

    .wps-values-left {
        padding: 35px 25px 25px;
    }

    .wps-values-slides {
        min-height: 360px;
    }

    .wps-value-icon {
        width: 75px;
        height: 75px;
    }

    .wps-value-icon img {
        width: 44px;
        height: 44px;
    }

    .wps-value-slide h3 {
        font-size: 26px;
    }

    .wps-value-slide p {
        font-size: 14px;

        line-height: 1.75;
    }

    .wps-values-right {
        min-height: 380px;
        height: 380px;
    }

    .wps-image-circle {
        width: 270px;
        height: 270px;

        top: 55px;
    }

    .wps-values-right::before {
        width: 420px;
        height: 420px;

        top: -250px;
        left: -110px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .wps-values-heading h2 {
        font-size: 29px;
    }

    .wps-values-heading > span {
        font-size: 10px;
    }

    .wps-values-left {
        padding: 30px 20px 20px;
    }

    .wps-values-slides {
        min-height: 390px;
    }

    .wps-value-icon {
        width: 68px;
        height: 68px;
    }

    .wps-value-icon img {
        width: 40px;
        height: 40px;
    }

    .wps-value-slide h3 {
        font-size: 23px;
    }

    .wps-value-slide p {
        font-size: 13px;
    }

    .wps-arrow-buttons button {
        width: 43px;
        height: 43px;
    }

    .wps-values-right {
        min-height: 330px;
        height: 330px;
    }

    .wps-image-circle {
        width: 230px;
        height: 230px;

        top: 50px;
    }
}



/* =========================================
   OVERVIEW TOP BANNER
========================================= */

.wps-overview-banner {
    position: relative;
    width: 100%;
    min-height: 430px;

    background-image: url("../images/indore/overview-01.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

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

    overflow: hidden;
}

/* Dark overlay */
.wps-overview-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(21, 80, 135, 0.88),
        rgba(21, 80, 135, 0.55),
        rgba(0, 0, 0, 0.30)
    );
}

/* Content */
.wps-overview-banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 80px 15px;
    color: #fff;
}

.wps-overview-banner-content span {
    display: block;
    margin-bottom: 12px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;

    color: #fff;
}

.wps-overview-banner-content h1 {
    margin: 0;

    font-size: 54px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: 1px;

    color: #fff;
}

.wps-overview-banner-line {
    width: 65px;
    height: 4px;
    margin: 18px auto;

    background: #cc1f26;
    border-radius: 50px;
}

.wps-overview-banner-content p {
    margin: 0;

    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    line-height: 1.6;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .wps-overview-banner {
        min-height: 360px;
    }

    .wps-overview-banner-content {
        padding: 70px 15px;
    }

    .wps-overview-banner-content h1 {
        font-size: 44px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .wps-overview-banner {
        min-height: 300px;
        background-position: center;
    }

    .wps-overview-banner-content {
        padding: 60px 15px;
    }

    .wps-overview-banner-content span {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .wps-overview-banner-content h1 {
        font-size: 34px;
    }

    .wps-overview-banner-content p {
        font-size: 13px;
    }

    .wps-overview-banner-line {
        width: 50px;
        height: 3px;
        margin: 14px auto;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .wps-overview-banner {
        min-height: 260px;
    }

    .wps-overview-banner-content h1 {
        font-size: 30px;
    }

    .wps-overview-banner-content span {
        font-size: 9px;
    }

    .wps-overview-banner-content p {
        font-size: 12px;
    }
}


/* =========================================
   CORE VALUES - NEW HEADING LAYOUT
========================================= */

.wps-values-heading-new {
    display: grid;
    grid-template-columns: 48% 52%;
    align-items: end;
    gap: 50px;

    max-width: 1150px;
    margin: 0 auto 55px;
    padding-bottom: 35px;

    border-bottom: 1px solid #e5e9ed;
}


/* LEFT SIDE */

.wps-values-heading-left {
    position: relative;
    padding-left: 25px;
}

.wps-values-heading-left::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;

    width: 4px;
    height: 90px;

    background: #cc1f26;
    border-radius: 10px;
}

.wps-values-heading-left span {
    display: block;

    margin-bottom: 12px;

    color: #cc1f26;
    font-size: 12px;
    font-weight: 800;

    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.wps-values-heading-left h2 {
    margin: 0;

    color: #155087;

    font-size: 48px;
    line-height: 1.05;
    font-weight: 300;

    letter-spacing: -1px;
}

.wps-values-heading-left h2 b {
    font-weight: 800;
    color: #cc1f26;
}


/* RIGHT SIDE */

.wps-values-heading-right {
    max-width: 520px;
    justify-self: end;
}

.wps-values-line-new {
    position: relative;

    width: 75px;
    height: 4px;

    margin-bottom: 22px;

    background: #155087;
    border-radius: 50px;
}

.wps-values-line-new::after {
    content: "";

    position: absolute;

    left: 25px;
    top: 0;

    width: 55px;
    height: 4px;

    background: #cc1f26;
    border-radius: 50px;
}

.wps-values-heading-right p {
    margin: 0;

    color: #626b73;

    font-size: 15px;
    line-height: 1.9;
    font-weight: 400;
}


/* =========================================
   HOVER / ANIMATION
========================================= */

.wps-values-heading-left h2 b {
    transition: all .35s ease;
}

.wps-values-heading-new:hover
.wps-values-heading-left h2 b {
    letter-spacing: 1px;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .wps-values-heading-new {
        grid-template-columns: 1fr 1fr;
        gap: 35px;
        margin-bottom: 45px;
    }

    .wps-values-heading-left h2 {
        font-size: 40px;
    }

    .wps-values-heading-left::before {
        height: 75px;
    }

    .wps-values-heading-right p {
        font-size: 14px;
        line-height: 1.8;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .wps-values-heading-new {
        display: block;

        margin-bottom: 35px;
        padding-bottom: 25px;
    }

    .wps-values-heading-left {
        margin-bottom: 25px;
        padding-left: 20px;
    }

    .wps-values-heading-left::before {
        width: 3px;
        height: 70px;
    }

    .wps-values-heading-left span {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .wps-values-heading-left h2 {
        font-size: 34px;
        line-height: 1.1;
    }

    .wps-values-heading-right {
        max-width: 100%;
        padding-left: 20px;
    }

    .wps-values-line-new {
        width: 60px;
        height: 3px;
        margin-bottom: 16px;
    }

    .wps-values-line-new::after {
        left: 20px;
        width: 45px;
        height: 3px;
    }

    .wps-values-heading-right p {
        font-size: 13px;
        line-height: 1.8;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .wps-values-heading-left h2 {
        font-size: 30px;
    }

    .wps-values-heading-left {
        padding-left: 16px;
    }

    .wps-values-heading-right {
        padding-left: 16px;
    }
}


/* =========================================================
   CO-SCHOLASTIC ACTIVITIES
   PREMIUM WPS INNER PAGE DESIGN
========================================================= */

.csa-page {
    position: relative;
    overflow: hidden;
    background: #fff;
}


/* =========================================================
   BANNER
========================================================= */

.csa-banner {
    position: relative;

    min-height: 390px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(8, 42, 72, .88),
            rgba(21, 80, 135, .55)
        ),
        url("../images/alandi/Co-Scholastic-01.jpg");

    background-size: cover;
    background-position: center 25%;

    overflow: hidden;
}

.csa-banner::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -180px;
    top: -230px;

    border: 80px solid rgba(204, 31, 38, .7);

    border-radius: 50%;
}

.csa-banner::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    left: -100px;
    bottom: -120px;

    background: rgba(255,255,255,.08);

    border-radius: 50%;
}

.csa-banner-overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(8, 42, 72, .25),
        transparent
    );
}

.csa-banner .container {
    position: relative;
    z-index: 3;
}

.csa-banner-content {
    width: 85%;
    margin: auto;

    text-align: left;
}

.csa-eyebrow {
    display: block;

    margin-bottom: 14px;

    color: #fff;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 3px;
}

.csa-banner .inner-title {
    max-width: 850px;

    color: #fff !important;

    font-size: clamp(42px, 5vw, 68px);

    font-weight: 800;

    line-height: 1.08;

    text-transform: uppercase;
}

.csa-banner-line {
    width: 80px;
    height: 5px;

    margin-top: 22px;

    background: #cc1f26;

    border-radius: 20px;
}


/* =========================================================
   COMMON
========================================================= */

.csa-section-label {
    display: inline-block;

    margin-bottom: 13px;

    color: #cc1f26;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}

.csa-feature-blue .csa-section-label,
.csa-feature-red .csa-section-label {
    color: #fff;
}

.csa-heading-line {
    width: 65px;
    height: 4px;

    margin: 18px 0 22px;

    background: #cc1f26;

    border-radius: 30px;
}

.csa-feature-blue .csa-heading-line {
    background: #fff;
}


/* =========================================================
   INTRO
========================================================= */

.csa-intro {
    position: relative;

    padding: 100px 0;

    background: #fff;
}

.csa-intro-grid {
    width: 90%;
    max-width: 1180px;

    margin: auto;

    display: grid;

    grid-template-columns: 1.05fr .95fr;

    gap: 80px;

    align-items: center;
}


/* IMAGE */

.csa-intro-image {
    position: relative;

    padding: 0 25px 25px 0;
}

.csa-image-frame {
    position: relative;

    overflow: hidden;

    border-radius: 0 35px 0 35px;

    box-shadow: 0 25px 55px rgba(21,80,135,.18);
}

.csa-image-frame::after {
    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
        135deg,
        transparent 55%,
        rgba(21,80,135,.18)
    );

    pointer-events: none;
}

.csa-image-frame img {
    display: block;

    width: 100%;

    aspect-ratio: 1.25 / 1;

    object-fit: cover;

    transition: transform .7s ease;
}

.csa-image-frame:hover img {
    transform: scale(1.05);
}


/* IMAGE TAG */

.csa-image-tag {
    position: absolute;

    right: 0;
    bottom: 0;

    z-index: 3;

    min-width: 170px;

    padding: 20px 25px;

    background: #cc1f26;

    color: #fff;

    box-shadow: 0 15px 35px rgba(204,31,38,.25);
}

.csa-image-tag span {
    display: block;

    font-size: 12px;

    letter-spacing: 2px;
}

.csa-image-tag strong {
    display: block;

    font-size: 21px;

    font-weight: 800;
}


/* INTRO CONTENT */

.csa-intro-content h2,
.csa-feature-content h2 {
    margin: 0;

    color: #155087;

    font-size: clamp(34px, 4vw, 52px);

    font-weight: 800;

    line-height: 1.12;
}

.csa-intro-content h2 span,
.csa-feature-content h2 span {
    display: block;

    color: #cc1f26;
}

.csa-intro-content p {
    margin: 0;

    color: #555;

    font-size: 16px;

    line-height: 1.9;
}


/* =========================================================
   DECORATIVE BACKGROUND
========================================================= */

.csa-bg-shape {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.csa-shape-left {
    width: 300px;
    height: 300px;

    left: -220px;
    top: 80px;

    border: 55px solid rgba(21,80,135,.04);
}

.csa-shape-right {
    width: 180px;
    height: 180px;

    right: -80px;
    bottom: 40px;

    background: rgba(204,31,38,.035);
}


/* =========================================================
   FEATURE COMMON
========================================================= */

.csa-feature {
    position: relative;

    overflow: hidden;
}

.csa-feature-grid {
    width: 90%;
    max-width: 1180px;

    margin: auto;

    display: grid;

    grid-template-columns: .95fr 1.05fr;

    gap: 80px;

    align-items: center;
}

.csa-feature-content {
    position: relative;
    z-index: 2;
}

.csa-feature-content p {
    margin: 0;

    font-size: 16px;

    line-height: 1.9;
}


/* =========================================================
   FEATURE IMAGE
========================================================= */

.csa-feature-image {
    position: relative;

    padding: 0 20px 20px 0;
}

.csa-image-wrap {
    position: relative;

    z-index: 2;

    overflow: hidden;

    border-radius: 28px;

    box-shadow: 0 25px 60px rgba(0,0,0,.18);
}

.csa-image-wrap img {
    display: block;

    width: 100%;

    aspect-ratio: 1.15 / 1;

    object-fit: cover;

    transition: transform .7s ease;
}

.csa-image-wrap:hover img {
    transform: scale(1.05);
}


/* IMAGE ACCENT */

.csa-image-accent {
    position: absolute;

    z-index: 1;

    width: 170px;
    height: 170px;

    left: -35px;
    bottom: -35px;

    background: #cc1f26;

    border-radius: 50%;
}

.csa-image-accent.red {
    background: #cc1f26;
}

.csa-image-accent.blue {
    background: #155087;
}


/* =========================================================
   BLUE SECTION
========================================================= */

.csa-feature-blue {
    background: #155087;

    background-image:
        radial-gradient(
            circle at 90% 20%,
            rgba(255,255,255,.08) 0,
            rgba(255,255,255,.08) 1px,
            transparent 1px
        );

    background-size: 25px 25px;
}

.csa-feature-blue::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -250px;
    top: -200px;

    border: 70px solid rgba(255,255,255,.05);

    border-radius: 50%;
}

.csa-feature-blue .csa-feature-content h2 {
    color: #fff;
}

.csa-feature-blue .csa-feature-content h2 span {
    color: #fff;
}

.csa-feature-blue .csa-feature-content p {
    color: rgba(255,255,255,.9);
}


/* =========================================================
   WHITE SECTION
========================================================= */

.csa-feature-white {
    background: #fff;
}

.csa-feature-white::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -190px;
    top: 50px;

    border: 55px solid rgba(204,31,38,.04);

    border-radius: 50%;
}

.csa-feature-white .csa-feature-content p {
    color: #555;
}


/* =========================================================
   RED SECTION
========================================================= */

.csa-feature-red {
    background: #155087;
}

.csa-feature-red::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -320px;
    bottom: -280px;

    border: 80px solid rgba(255,255,255,.06);

    border-radius: 50%;
}

.csa-feature-red::after {
    content: "";

    position: absolute;

    width: 200px;
    height: 200px;

    right: -100px;
    top: -80px;

    border: 35px solid rgba(255,255,255,.07);

    border-radius: 50%;
}

.csa-feature-red .csa-feature-content h2 {
    color: #fff;
}

.csa-feature-red .csa-feature-content h2 span {
    color: #fff;
}

.csa-feature-red .csa-feature-content p {
    color: rgba(255,255,255,.94);
}


/* =========================================================
   BOTTOM
========================================================= */

.csa-bottom-space {
    height: 40px;

    background: #f7f8fa;
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes csaFadeUp {

    from {
        opacity: 0;

        transform: translateY(35px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}

.csa-intro-content,
.csa-feature-content {
    animation: csaFadeUp .8s ease both;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .csa-banner {
        min-height: 320px;
    }

    .csa-banner-content {
        width: 100%;
    }

    .csa-intro-grid,
    .csa-feature-grid {
        width: 100%;

        grid-template-columns: 1fr;

        gap: 50px;
    }

    .csa-intro {
        padding: 75px 0;
    }

    .csa-feature {
        padding: 75px 0;
    }

    .csa-reverse-desktop .csa-feature-content {
        order: 1;
    }

    .csa-reverse-desktop .csa-feature-image {
        order: 2;
    }

    .csa-intro-image,
    .csa-feature-image {
        max-width: 750px;

        margin: auto;

        width: 100%;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .csa-banner {
        min-height: 280px;

        background-position: center;
    }

    .csa-banner .inner-title {
        font-size: 38px;
    }

    .csa-eyebrow {
        font-size: 10px;

        letter-spacing: 2px;
    }

    .csa-banner-line {
        width: 60px;
        height: 4px;
    }

    .csa-intro {
        padding: 60px 0;
    }

    .csa-feature {
        padding: 60px 0;
    }

    .csa-intro-grid,
    .csa-feature-grid {
        gap: 40px;
    }

    .csa-intro-content h2,
    .csa-feature-content h2 {
        font-size: 34px;
    }

    .csa-intro-content p,
    .csa-feature-content p {
        font-size: 14px;

        line-height: 1.8;
    }

    .csa-image-tag {
        min-width: 140px;

        padding: 15px 18px;
    }

    .csa-image-tag strong {
        font-size: 17px;
    }

    .csa-image-accent {
        width: 110px;
        height: 110px;

        left: -25px;
        bottom: -25px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .csa-banner {
        min-height: 240px;
    }

    .csa-banner .inner-title {
        font-size: 30px;
    }

    .csa-intro {
        padding: 50px 0;
    }

    .csa-feature {
        padding: 50px 0;
    }

    .csa-intro-image {
        padding-right: 12px;
        padding-bottom: 15px;
    }

    .csa-image-frame {
        border-radius: 0 20px 0 20px;
    }

    .csa-image-tag {
        right: -5px;
        bottom: -5px;

        padding: 12px 15px;
    }

    .csa-image-tag span {
        font-size: 9px;
    }

    .csa-image-tag strong {
        font-size: 15px;
    }

    .csa-intro-content h2,
    .csa-feature-content h2 {
        font-size: 29px;
    }

}

.csa-banner::before,
.csa-banner::after {
    display: none;
}



/* =========================================================
   FUTURE SKILLS & SUSTAINABILITY
   PREMIUM WPS INNER PAGE DESIGN
========================================================= */

.future-page {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #ffffff;
}


/* =========================================================
   BANNER
========================================================= */

.future-banner {
    position: relative;

    min-height: 390px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background-image:
        linear-gradient(
            90deg,
            rgba(8, 42, 72, 0.90),
            rgba(21, 80, 135, 0.48)
        ),
        url("../images/alandi/Future-Skills-01.jpg");

    background-repeat: no-repeat;

    background-size: cover;

    /*
       Change 35% to 25% if the head is still cropped.
       20% will move the image further upward.
    */
    background-position: center 30%;
}


/* Banner overlay */

.future-banner-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(21, 80, 135, 0.35),
            rgba(21, 80, 135, 0.05)
        );
}


/* Small decorative circle */

.future-banner::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -90px;
    bottom: -90px;

    border: 35px solid rgba(255, 255, 255, 0.07);

    border-radius: 50%;

    animation: futureBannerFloat 8s ease-in-out infinite;
}


/* Banner container */

.future-banner .container {
    position: relative;

    z-index: 3;
}


/* Banner content */

.future-banner-content {
    width: 85%;

    margin: auto;

    animation: futureBannerContent 1s ease-out both;
}


/* Eyebrow */

.future-eyebrow {
    display: block;

    margin-bottom: 14px;

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 3px;

    opacity: 0;

    animation:
        futureFadeUp 0.7s ease 0.15s forwards;
}


/* Banner title */

.future-banner .inner-title {
    max-width: 900px;

    margin: 0;

    color: #ffffff !important;

    font-size: clamp(42px, 5vw, 66px);

    font-weight: 800;

    line-height: 1.08;

    opacity: 0;

    animation:
        futureTitleReveal 0.9s ease 0.30s forwards;
}


/* Banner line */

.future-banner-line {
    width: 80px;
    height: 5px;

    margin-top: 22px;

    background: #cc1f26;

    border-radius: 30px;

    transform: scaleX(0);

    transform-origin: left;

    animation:
        futureLineReveal 0.7s ease 0.75s forwards;
}


/* =========================================================
   COMMON SECTION STYLING
========================================================= */

.future-section-label {
    display: inline-block;

    margin-bottom: 13px;

    color: #cc1f26;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 2.5px;

    line-height: 1.4;

    text-transform: uppercase;
}


/* Blue section label */

.future-blue .future-section-label {
    color: #ffffff;
}


/* Heading line */

.future-line {
    position: relative;

    width: 65px;
    height: 4px;

    margin: 18px 0 22px;

    overflow: hidden;

    background: #cc1f26;

    border-radius: 30px;
}


/* White heading line */

.future-line.white {
    background: #ffffff;
}


/* Shine animation */

.future-line::after {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 100%;
    height: 100%;

    background: rgba(255, 255, 255, 0.55);

    animation:
        futureLineShine 3.5s ease-in-out infinite;
}


/* =========================================================
   INTRODUCTION SECTION
========================================================= */

.future-intro {
    position: relative;

    padding: 100px 0;

    background: #ffffff;

    overflow: hidden;
}


.future-intro-grid {
    position: relative;

    z-index: 2;

    width: 90%;
    max-width: 1180px;

    margin: auto;

    display: grid;

    grid-template-columns: 1.05fr 0.95fr;

    gap: 80px;

    align-items: center;
}


/* =========================================================
   INTRO IMAGE
========================================================= */

.future-intro-image {
    position: relative;

    padding: 0 25px 25px 0;

    animation:
        futureImageReveal 1s ease 0.2s both;
}


.future-image-frame {
    position: relative;

    overflow: hidden;

    border-radius: 0 35px 0 35px;

    box-shadow:
        0 25px 60px rgba(21, 80, 135, 0.18);

    transition:
        transform 0.5s ease,
        box-shadow 0.5s ease;
}


.future-image-frame::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            transparent 55%,
            rgba(21, 80, 135, 0.18)
        );

    pointer-events: none;
}


.future-image-frame img {
    display: block;

    width: 100%;

    aspect-ratio: 1.25 / 1;

    object-fit: cover;

    transition:
        transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}


.future-image-frame:hover {
    transform: translateY(-7px);

    box-shadow:
        0 35px 75px rgba(21, 80, 135, 0.22);
}


.future-image-frame:hover img {
    transform: scale(1.06);
}


/* =========================================================
   IMAGE LABEL
========================================================= */

.future-image-label {
    position: absolute;

    right: 0;
    bottom: 0;

    z-index: 5;

    min-width: 185px;

    padding: 20px 25px;

    background: #155087;

    color: #ffffff;

    box-shadow:
        0 15px 35px rgba(21, 80, 135, 0.25);

    animation:
        futureLabelFloat 6s ease-in-out infinite;
}


.future-image-label span {
    display: block;

    font-size: 12px;

    letter-spacing: 2px;
}


.future-image-label strong {
    display: block;

    font-size: 20px;

    font-weight: 800;

    line-height: 1.3;
}


/* =========================================================
   INTRO CONTENT
========================================================= */

.future-intro-content {
    animation:
        futureContentReveal 0.9s ease 0.25s both;
}


.future-intro-content h2,
.future-feature-content h2,
.future-closing-content h2 {
    margin: 0;

    color: #155087;

    font-size: clamp(34px, 4vw, 52px);

    font-weight: 800;

    line-height: 1.12;
}


.future-intro-content h2 span,
.future-feature-content h2 span,
.future-closing-content h2 span {
    display: block;

    color: #cc1f26;
}


.future-intro-content p {
    margin: 0;

    color: #555555;

    font-size: 16px;

    line-height: 1.9;
}


/* =========================================================
   INTRO BACKGROUND DECORATIONS
========================================================= */

.future-bg-circle {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.future-circle-left {
    width: 300px;
    height: 300px;

    left: -220px;
    top: 100px;

    border: 55px solid rgba(21, 80, 135, 0.04);

    animation:
        futureFloat 8s ease-in-out infinite;
}


.future-circle-right {
    width: 180px;
    height: 180px;

    right: -80px;
    bottom: 50px;

    background: rgba(204, 31, 38, 0.035);

    animation:
        futureFloatReverse 9s ease-in-out infinite;
}


/* =========================================================
   COMMON FEATURE SECTIONS
========================================================= */

.future-feature {
    position: relative;

    overflow: hidden;
}


.future-feature-grid {
    position: relative;

    z-index: 2;

    width: 90%;
    max-width: 1180px;

    margin: auto;

    display: grid;

    grid-template-columns: 0.95fr 1.05fr;

    gap: 80px;

    align-items: center;
}


/* =========================================================
   FEATURE IMAGE
========================================================= */

.future-feature-image {
    position: relative;

    padding: 0 20px 20px 0;

    animation:
        futureImageReveal 1s ease both;
}


.future-image-wrap {
    position: relative;

    z-index: 2;

    overflow: hidden;

    border-radius: 28px;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.16);

    transition:
        transform 0.5s ease,
        box-shadow 0.5s ease;
}


.future-image-wrap img {
    display: block;

    width: 100%;

    aspect-ratio: 1.15 / 1;

    object-fit: cover;

    transition:
        transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}


.future-image-wrap:hover {
    transform: translateY(-7px);

    box-shadow:
        0 35px 75px rgba(21, 80, 135, 0.20);
}


.future-image-wrap:hover img {
    transform: scale(1.06);
}


/* =========================================================
   IMAGE DECORATIVE CORNERS
========================================================= */

.future-image-corner {
    position: absolute;

    z-index: 1;

    width: 170px;
    height: 170px;

    left: -35px;
    bottom: -35px;

    background: #cc1f26;

    border-radius: 50%;

    animation:
        futureCornerFloat 6s ease-in-out infinite;
}


.future-image-corner.red {
    background: #cc1f26;
}


.future-image-corner.blue {
    background: #155087;
}


/* =========================================================
   FEATURE CONTENT
========================================================= */

.future-feature-content {
    animation:
        futureContentReveal 0.9s ease both;
}


.future-feature-content p {
    margin: 0;

    font-size: 16px;

    line-height: 1.9;
}


/* =========================================================
   BLUE STEAM / ROBOTICS SECTION
========================================================= */

.future-blue {
    position: relative;

    background: #155087;
}


.future-blue::before {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    right: -280px;
    top: -250px;

    border: 70px solid rgba(255, 255, 255, 0.05);

    border-radius: 50%;

    animation:
        futureFloat 10s ease-in-out infinite;
}


.future-blue::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    left: -130px;
    bottom: -130px;

    background: rgba(255, 255, 255, 0.035);

    border-radius: 50%;
}


.future-blue .future-feature-content {
    animation-delay: 0.15s;
}


.future-blue .future-feature-content h2 {
    color: #ffffff;
}


.future-blue .future-feature-content h2 span {
    color: #ffffff;
}


.future-blue .future-feature-content p {
    color: rgba(255, 255, 255, 0.92);
}


/* =========================================================
   TECHNOLOGY GRID PATTERN
========================================================= */

.future-tech-pattern {
    position: absolute;

    right: 35px;
    bottom: 30px;

    width: 170px;
    height: 170px;

    opacity: 0.07;

    background-image:
        linear-gradient(
            #ffffff 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            #ffffff 1px,
            transparent 1px
        );

    background-size: 20px 20px;

    animation:
        futurePatternMove 8s linear infinite;
}


@keyframes futurePatternMove {

    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-12px, -12px);
    }

    100% {
        transform: translate(0, 0);
    }

}


/* =========================================================
   WHITE DIGITAL LEARNING SECTION
========================================================= */

.future-white {
    position: relative;

    background: #ffffff;
}


.future-white::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -190px;
    top: 50px;

    border: 55px solid rgba(204, 31, 38, 0.04);

    border-radius: 50%;

    animation:
        futureFloatReverse 8s ease-in-out infinite;
}


/* =========================================================
   REVERSE LAYOUT
========================================================= */

.future-reverse {
    grid-template-columns: 1.05fr 0.95fr;
}


.future-reverse .future-feature-content {
    order: 1;
}


.future-reverse .future-feature-image {
    order: 2;
}


/* =========================================================
   FINANCIAL SECTION
========================================================= */

.future-finance {
    position: relative;

    background: #f7f8fa;
}


.future-finance::before {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    left: -280px;
    bottom: -220px;

    border: 65px solid rgba(21, 80, 135, 0.045);

    border-radius: 50%;

    animation:
        futureFloat 10s ease-in-out infinite;
}


.future-finance::after {
    content: "";

    position: absolute;

    width: 160px;
    height: 160px;

    right: -80px;
    top: -70px;

    border: 30px solid rgba(204, 31, 38, 0.04);

    border-radius: 50%;

    animation:
        futureFloatReverse 7s ease-in-out infinite;
}


.future-finance .future-feature-content p {
    color: #555555;
}


/* =========================================================
   CLOSING SECTION
========================================================= */

.future-closing {
    position: relative;

    padding: 100px 0;

    background: #ffffff;

    overflow: hidden;
}


.future-closing-box {
    position: relative;

    z-index: 2;

    max-width: 1000px;

    margin: auto;

    padding: 70px 80px;

    background: #f7f8fa;

    border-left: 6px solid #155087;

    border-radius: 0 30px 30px 0;

    box-shadow:
        0 20px 55px rgba(21, 80, 135, 0.08);

    animation:
        futureContentReveal 1s ease both;
}


.future-closing-content {
    max-width: 850px;
}


.future-closing-content p {
    margin-bottom: 20px;

    color: #555555;

    font-size: 16px;

    line-height: 1.9;
}


.future-closing-content p:last-child {
    margin-bottom: 0;
}


/* Closing decorative shape */

.future-closing-shape {
    position: absolute;

    width: 500px;
    height: 500px;

    right: -330px;
    top: -150px;

    border: 80px solid rgba(204, 31, 38, 0.035);

    border-radius: 50%;

    animation:
        futureFloat 10s ease-in-out infinite;
}


/* =========================================================
   GENERAL SCROLL-LIKE REVEAL
========================================================= */

.future-intro-content,
.future-feature-content,
.future-closing-content,
.future-intro-image,
.future-feature-image {
    will-change: transform, opacity;
}


/* =========================================================
   BANNER ANIMATIONS
========================================================= */

@keyframes futureBannerContent {

    from {
        opacity: 0;

        transform: translateY(30px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


@keyframes futureFadeUp {

    from {
        opacity: 0;

        transform: translateY(15px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


@keyframes futureTitleReveal {

    from {
        opacity: 0;

        transform: translateY(30px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


@keyframes futureLineReveal {

    from {
        opacity: 0;

        transform: scaleX(0);
    }

    to {
        opacity: 1;

        transform: scaleX(1);
    }

}


/* =========================================================
   CONTENT ANIMATIONS
========================================================= */

@keyframes futureContentReveal {

    from {
        opacity: 0;

        transform: translateY(35px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


@keyframes futureImageReveal {

    from {
        opacity: 0;

        transform: translateY(35px) scale(0.97);
    }

    to {
        opacity: 1;

        transform: translateY(0) scale(1);
    }

}


/* =========================================================
   FLOATING ANIMATIONS
========================================================= */

@keyframes futureFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-18px);
    }

}


@keyframes futureFloatReverse {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(15px);
    }

}


@keyframes futureCornerFloat {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(7px, -8px);
    }

}


@keyframes futureLabelFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }

}


@keyframes futureBannerFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(5deg);
    }

}


@keyframes futureLineShine {

    0% {
        left: -100%;
    }

    45%,
    100% {
        left: 100%;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .future-banner {
        min-height: 330px;

        background-position: center 25%;
    }


    .future-banner-content {
        width: 100%;
    }


    .future-intro-grid,
    .future-feature-grid,
    .future-reverse {
        width: 100%;

        grid-template-columns: 1fr;

        gap: 55px;
    }


    .future-intro {
        padding: 75px 0;
    }


    .future-feature {
        padding: 75px 0;
    }


    .future-intro-image,
    .future-feature-image {
        width: 100%;

        max-width: 750px;

        margin: auto;
    }


    .future-reverse .future-feature-content {
        order: 1;
    }


    .future-reverse .future-feature-image {
        order: 2;
    }


    .future-closing {
        padding: 75px 0;
    }


    .future-closing-box {
        padding: 55px 50px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .future-banner {
        min-height: 280px;

        background-position: center 25%;
    }


    .future-banner .inner-title {
        font-size: 38px;

        line-height: 1.12;
    }


    .future-eyebrow {
        font-size: 10px;

        letter-spacing: 2px;
    }


    .future-banner-line {
        width: 60px;

        height: 4px;
    }


    .future-intro {
        padding: 60px 0;
    }


    .future-feature {
        padding: 60px 0;
    }


    .future-closing {
        padding: 60px 0;
    }


    .future-intro-grid,
    .future-feature-grid {
        gap: 40px;
    }


    .future-intro-content h2,
    .future-feature-content h2,
    .future-closing-content h2 {
        font-size: 34px;
    }


    .future-intro-content p,
    .future-feature-content p,
    .future-closing-content p {
        font-size: 14px;

        line-height: 1.8;
    }


    .future-image-label {
        min-width: 145px;

        padding: 15px 18px;
    }


    .future-image-label strong {
        font-size: 17px;
    }


    .future-image-corner {
        width: 110px;
        height: 110px;

        left: -25px;
        bottom: -25px;
    }


    .future-closing-box {
        padding: 40px 25px;

        border-left-width: 4px;

        border-radius: 0 20px 20px 0;
    }


    .future-tech-pattern {
        right: 10px;
        bottom: 10px;

        width: 120px;
        height: 120px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .future-banner {
        min-height: 240px;

        /*
           More upward positioning on small screens
           to protect the subject's head.
        */
        background-position: center 20%;
    }


    .future-banner .inner-title {
        font-size: 30px;
    }


    .future-intro {
        padding: 50px 0;
    }


    .future-feature {
        padding: 50px 0;
    }


    .future-closing {
        padding: 50px 0;
    }


    .future-intro-image {
        padding-right: 12px;
        padding-bottom: 15px;
    }


    .future-image-frame {
        border-radius: 0 20px 0 20px;
    }


    .future-image-label {
        right: -5px;
        bottom: -5px;

        padding: 12px 15px;
    }


    .future-image-label span {
        font-size: 9px;
    }


    .future-image-label strong {
        font-size: 15px;
    }


    .future-intro-content h2,
    .future-feature-content h2,
    .future-closing-content h2 {
        font-size: 29px;
    }


    .future-section-label {
        font-size: 10px;

        letter-spacing: 2px;
    }


    .future-line {
        width: 55px;

        height: 3px;
    }


    .future-image-corner {
        width: 90px;
        height: 90px;

        left: -20px;
        bottom: -20px;
    }


    .future-closing-box {
        padding: 30px 20px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .future-page *,
    .future-page *::before,
    .future-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }


.future-banner {
    position: relative;
    min-height: 390px;
    overflow: hidden;
}

.future-banner img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center 25%;
}
}


/* =========================================================
   FUTURE SKILLS
   PREMIUM SPLIT HERO BANNER
========================================================= */

.future-hero {
    position: relative;

    width: 100%;

    min-height: 560px;

    display: grid;

    grid-template-columns: 44% 56%;

    overflow: hidden;

    background: #ffffff;
}


/* =========================================================
   IMAGE SIDE
========================================================= */

.future-hero-image {
    position: relative;

    order: 2;

    min-height: 560px;

    overflow: hidden;

    background: #e9edf2;
}


.future-hero-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(21,80,135,0.12),
            transparent 45%
        );

    pointer-events: none;
}


.future-hero-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    /*
       Keeps more of the upper part of the image visible.
    */
    object-position: center 25%;

    transform: scale(1.02);

    animation: futureHeroImageIn 1.2s ease-out both;

    transition:
        transform 1.2s ease;
}


.future-hero:hover .future-hero-image img {
    transform: scale(1.05);
}


/* =========================================================
   BLUE CONTENT SIDE
========================================================= */

.future-hero-content {
    position: relative;

    order: 1;

    z-index: 3;

    display: flex;

    align-items: center;

    background: #155087;

    overflow: hidden;
}


/* Large angled cut */

.future-hero-content::after {
    content: "";

    position: absolute;

    top: 0;
    right: -1px;

    width: 110px;
    height: 100%;

    background: #155087;

    clip-path: polygon(100% 0, 100% 100%, 0 100%);

    transform: translateX(99%);

    pointer-events: none;
}


/* Decorative white circle */

.future-hero-content::before {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    left: -220px;
    bottom: -220px;

    border: 65px solid rgba(255,255,255,0.06);

    border-radius: 50%;

    animation: futureHeroFloat 9s ease-in-out infinite;
}


/* =========================================================
   CONTENT
========================================================= */

.future-hero-inner {
    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 570px;

    padding: 75px 55px 75px 11%;

    animation: futureHeroContentIn 1s ease-out both;
}


/* =========================================================
   KICKER
========================================================= */

.future-hero-kicker {
    display: block;

    margin-bottom: 14px;

    color: rgba(255,255,255,0.85);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.future-hero-small-line {
    display: block;

    width: 55px;
    height: 4px;

    margin-bottom: 22px;

    background: #cc1f26;

    border-radius: 20px;

    transform-origin: left;

    animation:
        futureHeroLineIn 0.8s ease 0.4s both;
}


/* =========================================================
   MAIN TITLE
========================================================= */

.future-hero h1 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(42px, 4.4vw, 64px);

    font-weight: 400;

    line-height: 1.05;

    letter-spacing: -1.5px;
}


.future-hero h1 span {
    display: block;

    margin-top: 7px;

    color: #ffffff;

    font-weight: 800;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.future-hero p {
    max-width: 460px;

    margin: 28px 0 0;

    color: rgba(255,255,255,0.82);

    font-size: 15px;

    line-height: 1.85;
}


/* =========================================================
   BOTTOM KEYWORDS
========================================================= */

.future-hero-bottom {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 35px;
}


.future-hero-bottom span {
    padding: 8px 14px;

    border: 1px solid rgba(255,255,255,0.22);

    border-radius: 30px;

    color: rgba(255,255,255,0.88);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.5px;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


.future-hero-bottom span:hover {
    background: #cc1f26;

    border-color: #cc1f26;

    transform: translateY(-3px);
}


/* =========================================================
   VERTICAL FUTURE LABEL
========================================================= */

.future-hero-number {
    position: absolute;

    z-index: 8;

    right: 20px;
    bottom: 30px;

    writing-mode: vertical-rl;

    transform: rotate(180deg);

    color: rgba(255,255,255,0.65);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 4px;

    pointer-events: none;
}


/* =========================================================
   IMAGE ACCENT
========================================================= */

.future-hero-image::before {
    content: "";

    position: absolute;

    z-index: 3;

    left: 35px;
    bottom: 35px;

    width: 75px;
    height: 75px;

    border-left: 4px solid #cc1f26;

    border-bottom: 4px solid #cc1f26;

    opacity: 0;

    animation:
        futureHeroAccent 1s ease 0.8s forwards;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes futureHeroImageIn {

    from {
        opacity: 0;

        transform: scale(1.10);
    }

    to {
        opacity: 1;

        transform: scale(1.02);
    }

}


@keyframes futureHeroContentIn {

    from {
        opacity: 0;

        transform: translateX(-35px);
    }

    to {
        opacity: 1;

        transform: translateX(0);
    }

}


@keyframes futureHeroLineIn {

    from {
        opacity: 0;

        transform: scaleX(0);
    }

    to {
        opacity: 1;

        transform: scaleX(1);
    }

}


@keyframes futureHeroAccent {

    from {
        opacity: 0;

        transform: translateY(15px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


@keyframes futureHeroFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-18px);
    }

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .future-hero {
        min-height: 600px;

        grid-template-columns: 43% 57%;
    }


    .future-hero-image {
        min-height: 600px;
    }


    .future-hero-inner {
        padding-left: 14%;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .future-hero {
        min-height: auto;

        grid-template-columns: 1fr;
    }


    .future-hero-content {
        order: 1;

        min-height: 420px;
    }


    .future-hero-image {
        order: 2;

        min-height: 430px;

        height: 430px;
    }


    .future-hero-inner {
        max-width: 700px;

        margin: auto;

        padding: 70px 50px;
    }


    .future-hero h1 {
        font-size: 52px;
    }


    .future-hero-content::after {
        display: none;
    }


    .future-hero-number {
        display: none;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .future-hero-content {
        min-height: 390px;
    }


    .future-hero-inner {
        padding: 55px 25px;
    }


    .future-hero h1 {
        font-size: 40px;

        letter-spacing: -0.8px;
    }


    .future-hero p {
        margin-top: 22px;

        font-size: 14px;

        line-height: 1.75;
    }


    .future-hero-bottom {
        margin-top: 27px;
    }


    .future-hero-bottom span {
        padding: 7px 11px;

        font-size: 10px;
    }


    .future-hero-image {
        min-height: 350px;

        height: 350px;
    }


    .future-hero-image img {
        object-position: center 20%;
    }


    .future-hero-image::before {
        left: 20px;
        bottom: 20px;

        width: 55px;
        height: 55px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .future-hero-content {
        min-height: 350px;
    }


    .future-hero-inner {
        padding: 48px 20px;
    }


    .future-hero-kicker {
        font-size: 9px;

        letter-spacing: 2px;
    }


    .future-hero h1 {
        font-size: 33px;
    }


    .future-hero p {
        font-size: 13px;
    }


    .future-hero-image {
        min-height: 300px;

        height: 300px;
    }


    .future-hero-image img {
        object-position: center 15%;
    }


    .future-hero-content::before {
        width: 250px;
        height: 250px;

        left: -170px;
        bottom: -170px;

        border-width: 45px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .future-hero *,
    .future-hero *::before,
    .future-hero *::after {
        animation: none !important;

        transition: none !important;
    }

}

/* =========================================================
   CAREER GUIDANCE
   PREMIUM WPS INNER PAGE
========================================================= */

.career-page {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #ffffff;
}


/* =========================================================
   BANNER
========================================================= */

.career-banner {
    position: relative;

    min-height: 420px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(8, 42, 72, 0.90),
            rgba(21, 80, 135, 0.52)
        ),
        url("../images/alandi/Carrier-Guidence-01.jpg");

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center 30%;
}


.career-banner-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(21, 80, 135, 0.28),
            rgba(21, 80, 135, 0.04)
        );
}


.career-banner .container {
    position: relative;
    z-index: 3;
}


.career-banner-content {
    width: 85%;

    margin: auto;

    animation:
        careerBannerReveal 1s ease-out both;
}


.career-eyebrow {
    display: block;

    margin-bottom: 14px;

    color: #ffffff;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;

    opacity: 0;

    animation:
        careerFadeUp .7s ease .15s forwards;
}


.career-banner .inner-title {
    max-width: 850px;

    color: #ffffff !important;

    font-size: clamp(45px, 5vw, 68px);

    font-weight: 800;

    line-height: 1.08;

    opacity: 0;

    animation:
        careerTitleReveal .9s ease .3s forwards;
}


.career-banner-line {
    width: 80px;
    height: 5px;

    margin-top: 22px;

    background: #cc1f26;

    border-radius: 30px;

    transform: scaleX(0);

    transform-origin: left;

    animation:
        careerLineReveal .7s ease .75s forwards;
}


/* =========================================================
   INTRO SECTION
========================================================= */

.career-intro {
    position: relative;

    padding: 105px 0;

    background: #ffffff;

    overflow: hidden;
}


.career-intro-grid {
    position: relative;

    z-index: 2;

    width: 90%;
    max-width: 1180px;

    margin: auto;

    display: grid;

    grid-template-columns: 1.05fr .95fr;

    gap: 85px;

    align-items: center;
}


/* =========================================================
   INTRO IMAGE
========================================================= */

.career-intro-image {
    position: relative;

    padding: 0 28px 28px 0;

    animation:
        careerImageReveal 1s ease .2s both;
}


.career-image-frame {
    position: relative;

    overflow: hidden;

    border-radius: 0 40px 0 40px;

    box-shadow:
        0 25px 60px rgba(21,80,135,.17);

    transition:
        transform .5s ease,
        box-shadow .5s ease;
}


.career-image-frame img {
    display: block;

    width: 100%;

    aspect-ratio: 1.25 / 1;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.2,.7,.2,1);
}


.career-image-frame:hover {
    transform: translateY(-8px);

    box-shadow:
        0 35px 75px rgba(21,80,135,.22);
}


.career-image-frame:hover img {
    transform: scale(1.06);
}


/* Image accent */

.career-image-accent {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 145px;
    height: 145px;

    background: #cc1f26;

    border-radius: 50%;

    z-index: -1;

    animation:
        careerAccentFloat 6s ease-in-out infinite;
}


/* =========================================================
   INTRO CONTENT
========================================================= */

.career-intro-content {
    animation:
        careerContentReveal .9s ease .25s both;
}


.career-section-label {
    display: inline-block;

    margin-bottom: 14px;

    color: #cc1f26;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}


.career-intro-content h2,
.career-discovery-content h2 {
    margin: 0;

    color: #155087;

    font-size: clamp(35px, 4vw, 52px);

    font-weight: 800;

    line-height: 1.12;
}


.career-intro-content h2 span,
.career-discovery-content h2 span {
    display: block;

    color: #cc1f26;
}


.career-heading-line {
    position: relative;

    width: 65px;
    height: 4px;

    margin: 20px 0 24px;

    overflow: hidden;

    background: #cc1f26;

    border-radius: 20px;
}


.career-heading-line::after {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 100%;
    height: 100%;

    background: rgba(255,255,255,.55);

    animation:
        careerLineShine 3.5s ease-in-out infinite;
}


.career-intro-content p {
    margin: 0;

    color: #555555;

    font-size: 16px;

    line-height: 1.9;
}


/* =========================================================
   BACKGROUND SHAPES
========================================================= */

.career-intro-shape {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.career-shape-left {
    width: 310px;
    height: 310px;

    left: -230px;
    top: 100px;

    border: 55px solid rgba(21,80,135,.04);

    animation:
        careerFloat 9s ease-in-out infinite;
}


.career-shape-right {
    width: 190px;
    height: 190px;

    right: -90px;
    bottom: 50px;

    background: rgba(204,31,38,.035);

    animation:
        careerFloatReverse 8s ease-in-out infinite;
}


/* =========================================================
   DISCOVERY SECTION
========================================================= */

.career-discovery {
    position: relative;

    background: #155087;

    overflow: hidden;
}


.career-discovery-grid {
    position: relative;

    z-index: 3;

    width: 90%;
    max-width: 1180px;

    margin: auto;

    display: grid;

    grid-template-columns: .95fr 1.05fr;

    gap: 85px;

    align-items: center;
}


/* =========================================================
   DISCOVERY IMAGE
========================================================= */

.career-discovery-image {
    position: relative;

    padding: 0 22px 22px 0;

    animation:
        careerImageReveal 1s ease both;
}


.career-image-wrap {
    position: relative;

    z-index: 3;

    overflow: hidden;

    border-radius: 30px;

    box-shadow:
        0 25px 60px rgba(0,0,0,.18);

    transition:
        transform .5s ease,
        box-shadow .5s ease;
}


.career-image-wrap img {
    display: block;

    width: 100%;

    aspect-ratio: 1.15 / 1;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.2,.7,.2,1);
}


.career-image-wrap:hover {
    transform: translateY(-8px);

    box-shadow:
        0 35px 75px rgba(0,0,0,.24);
}


.career-image-wrap:hover img {
    transform: scale(1.06);
}


/* Circle behind image */

.career-image-circle {
    position: absolute;

    left: -45px;
    bottom: -45px;

    width: 170px;
    height: 170px;

    background: #cc1f26;

    border-radius: 50%;

    animation:
        careerAccentFloat 6s ease-in-out infinite;
}


/* =========================================================
   DISCOVERY CONTENT
========================================================= */

.career-discovery-content {
    animation:
        careerContentReveal .9s ease .2s both;
}


.career-discovery-content .career-section-label {
    color: #ffffff;
}


.career-discovery-content h2 {
    color: #ffffff;
}


.career-discovery-content h2 span {
    color: #ffffff;
}


.career-heading-line.white {
    background: #cc1f26;
}


.career-discovery-content p {
    margin: 0;

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

    font-size: 16px;

    line-height: 1.9;
}


/* =========================================================
   FEATURE TAGS
========================================================= */

.career-feature-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 30px;
}


.career-feature-tags span {
    padding: 9px 15px;

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

    border-radius: 30px;

    color: #ffffff;

    font-size: 11px;

    font-weight: 600;

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;
}


.career-feature-tags span:hover {
    background: #cc1f26;

    border-color: #cc1f26;

    transform: translateY(-4px);
}


/* =========================================================
   BLUE SECTION DECORATION
========================================================= */

.career-discovery::before {
    content: "";

    position: absolute;

    width: 480px;
    height: 480px;

    right: -300px;
    top: -250px;

    border: 70px solid rgba(255,255,255,.045);

    border-radius: 50%;

    animation:
        careerFloat 10s ease-in-out infinite;
}


.career-discovery::after {
    content: "";

    position: absolute;

    width: 210px;
    height: 210px;

    left: -120px;
    bottom: -120px;

    background: rgba(255,255,255,.035);

    border-radius: 50%;
}


.career-discovery-pattern {
    position: absolute;

    right: 40px;
    bottom: 30px;

    width: 160px;
    height: 160px;

    opacity: .06;

    background-image:
        linear-gradient(#fff 1px, transparent 1px),
        linear-gradient(90deg,#fff 1px,transparent 1px);

    background-size: 20px 20px;
}


/* =========================================================
   CLOSING SECTION
========================================================= */

.career-closing {
    padding: 55px 0;

    background: #f7f8fa;
}


.career-closing-inner {
    width: 90%;
    max-width: 1180px;

    margin: auto;

    display: flex;

    align-items: center;

    gap: 25px;
}


.career-closing-line {
    width: 5px;
    min-width: 5px;

    height: 70px;

    background: #cc1f26;

    border-radius: 10px;
}


.career-closing-inner span {
    display: block;

    margin-bottom: 5px;

    color: #cc1f26;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2.5px;
}


.career-closing-inner h3 {
    margin: 0;

    color: #155087;

    font-size: clamp(22px,3vw,34px);

    font-weight: 400;

    line-height: 1.3;
}


.career-closing-inner h3 strong {
    font-weight: 800;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes careerBannerReveal {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes careerFadeUp {

    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes careerTitleReveal {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes careerLineReveal {

    from {
        opacity: 0;
        transform: scaleX(0);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }

}


@keyframes careerContentReveal {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes careerImageReveal {

    from {
        opacity: 0;
        transform: translateY(35px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}


@keyframes careerFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-18px);
    }

}


@keyframes careerFloatReverse {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(15px);
    }

}


@keyframes careerAccentFloat {

    0%,
    100% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(7px,-9px);
    }

}


@keyframes careerLineShine {

    0% {
        left: -100%;
    }

    45%,
    100% {
        left: 100%;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .career-banner {
        min-height: 370px;

        background-position: center 25%;
    }


    .career-banner-content {
        width: 100%;
    }


    .career-intro {
        padding: 75px 0;
    }


    .career-intro-grid,
    .career-discovery-grid {
        width: 100%;

        grid-template-columns: 1fr;

        gap: 55px;
    }


    .career-intro-image,
    .career-discovery-image {
        width: 100%;

        max-width: 750px;

        margin: auto;
    }


    .career-intro-content,
    .career-discovery-content {
        max-width: 750px;

        margin: auto;
    }


    .career-discovery {
        padding: 75px 0;
    }


    .career-closing-inner {
        width: 100%;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .career-banner {
        min-height: 320px;

        background-position: center 20%;
    }


    .career-banner .inner-title {
        font-size: 38px;
    }


    .career-eyebrow {
        font-size: 10px;

        letter-spacing: 2px;
    }


    .career-intro {
        padding: 60px 0;
    }


    .career-discovery {
        padding: 60px 0;
    }


    .career-intro-grid,
    .career-discovery-grid {
        gap: 40px;
    }


    .career-intro-content h2,
    .career-discovery-content h2 {
        font-size: 34px;
    }


    .career-intro-content p,
    .career-discovery-content p {
        font-size: 14px;

        line-height: 1.8;
    }


    .career-image-accent,
    .career-image-circle {
        width: 110px;
        height: 110px;
    }


    .career-feature-tags {
        margin-top: 25px;
    }


    .career-closing {
        padding: 40px 0;
    }


    .career-closing-inner h3 {
        font-size: 23px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .career-banner {
        min-height: 280px;

        background-position: center 15%;
    }


    .career-banner .inner-title {
        font-size: 30px;
    }


    .career-intro {
        padding: 50px 0;
    }


    .career-discovery {
        padding: 50px 0;
    }


    .career-intro-image,
    .career-discovery-image {
        padding-right: 12px;

        padding-bottom: 15px;
    }


    .career-image-frame {
        border-radius: 0 22px 0 22px;
    }


    .career-intro-content h2,
    .career-discovery-content h2 {
        font-size: 29px;
    }


    .career-section-label {
        font-size: 9px;

        letter-spacing: 2px;
    }


    .career-heading-line {
        width: 55px;

        height: 3px;
    }


    .career-image-accent,
    .career-image-circle {
        width: 85px;
        height: 85px;
    }


    .career-feature-tags span {
        padding: 7px 10px;

        font-size: 9px;
    }


    .career-closing-inner {
        gap: 15px;
    }


    .career-closing-line {
        height: 55px;

        width: 4px;

        min-width: 4px;
    }


    .career-closing-inner h3 {
        font-size: 19px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .career-page *,
    .career-page *::before,
    .career-page *::after {
        animation: none !important;

        transition: none !important;
    }

}


/* =========================================================
   WELLNESS CENTRE PAGE
========================================================= */

.wellness-page {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #ffffff;
}


/* =========================================================
   BANNER
========================================================= */

.wellness-banner {
    position: relative;
    min-height: 440px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(7, 38, 66, .92),
            rgba(21, 80, 135, .58)
        ),
        url("../images/alandi/Wellness-01.jpeg");

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 38%;
}

.wellness-banner-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(21, 80, 135, .22),
            rgba(21, 80, 135, .02)
        );

    z-index: 1;
}

.wellness-banner .container {
    position: relative;
    z-index: 2;
}

.wellness-banner-content {
    width: 85%;
    margin: auto;
}

.wellness-eyebrow {
    display: block;

    margin-bottom: 15px;

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 3px;
    text-transform: uppercase;

    opacity: 0;

    animation: wellnessFadeUp .8s ease .15s forwards;
}

.wellness-banner .inner-title {
    color: #ffffff !important;

    font-size: clamp(45px, 5vw, 68px);
    font-weight: 800;

    line-height: 1.08;

    opacity: 0;

    animation: wellnessTitleReveal .9s ease .3s forwards;
}

.wellness-banner-line {
    width: 80px;
    height: 5px;

    margin-top: 22px;

    background: #cc1f26;

    border-radius: 20px;

    transform: scaleX(0);
    transform-origin: left;

    animation: wellnessLineReveal .7s ease .75s forwards;
}


/* =========================================================
   INTRO
========================================================= */

.wellness-intro {
    position: relative;

    padding: 105px 0;

    background: #ffffff;

    overflow: hidden;
}

.wellness-intro-bg {
    position: absolute;

    width: 450px;
    height: 450px;

    right: -260px;
    top: -180px;

    border: 70px solid rgba(21,80,135,.035);

    border-radius: 50%;

    animation: wellnessFloat 10s ease-in-out infinite;
}

.wellness-intro-grid {
    position: relative;
    z-index: 2;

    width: 90%;
    max-width: 1180px;

    margin: auto;

    display: grid;

    grid-template-columns: 1.05fr .95fr;

    gap: 85px;

    align-items: center;
}


/* IMAGE */

.wellness-intro-image {
    position: relative;

    padding: 0 28px 28px 0;

    animation: wellnessImageReveal 1s ease .2s both;
}

.wellness-image-main {
    position: relative;

    z-index: 2;

    overflow: hidden;

    border-radius: 0 42px 0 42px;

    box-shadow:
        0 25px 65px rgba(21,80,135,.16);

    transition:
        transform .5s ease,
        box-shadow .5s ease;
}

.wellness-image-main img {
    display: block;

    width: 100%;

    aspect-ratio: 1.25 / 1;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.2,.7,.2,1);
}

.wellness-image-main:hover {
    transform: translateY(-8px);

    box-shadow:
        0 35px 80px rgba(21,80,135,.23);
}

.wellness-image-main:hover img {
    transform: scale(1.06);
}

.wellness-image-border {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 155px;
    height: 155px;

    border: 30px solid rgba(204,31,38,.12);

    border-radius: 50%;
}

.wellness-image-tag {
    position: absolute;

    left: -20px;
    bottom: 5px;

    z-index: 4;

    padding: 16px 24px;

    background: #155087;

    box-shadow:
        0 15px 35px rgba(21,80,135,.22);
}

.wellness-image-tag span {
    display: block;

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

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;
}

.wellness-image-tag strong {
    display: block;

    margin-top: 3px;

    color: #ffffff;

    font-size: 16px;
    font-weight: 700;
}


/* CONTENT */

.wellness-intro-content {
    animation: wellnessContentReveal .9s ease .25s both;
}

.wellness-label {
    display: inline-block;

    margin-bottom: 15px;

    color: #cc1f26;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}

.wellness-intro-content h2,
.wellness-support-content h2,
.wellness-holistic-content h2 {
    margin: 0;

    color: #155087;

    font-size: clamp(34px, 4vw, 52px);

    font-weight: 800;

    line-height: 1.12;
}

.wellness-intro-content h2 span,
.wellness-holistic-content h2 span {
    display: block;

    color: #cc1f26;
}

.wellness-heading-line {
    position: relative;

    width: 65px;
    height: 4px;

    margin: 21px 0 25px;

    background: #cc1f26;

    border-radius: 20px;

    overflow: hidden;
}

.wellness-heading-line::after {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 100%;
    height: 100%;

    background: rgba(255,255,255,.6);

    animation: wellnessLineShine 3.5s ease-in-out infinite;
}

.wellness-intro-content p {
    margin: 0;

    color: #555555;

    font-size: 16px;

    line-height: 1.9;
}


/* LEFT DESIGN */

.wellness-left-design {
    position: absolute;

    left: 0;
    top: 0;

    width: 260px;

    opacity: .25;

    pointer-events: none;
}


/* =========================================================
   SUPPORT BLUE SECTION
========================================================= */

.wellness-support {
    position: relative;

    background: #155087;

    overflow: hidden;
}

.wellness-support-grid {
    position: relative;

    z-index: 3;

    width: 90%;
    max-width: 1180px;

    margin: auto;

    display: grid;

    grid-template-columns: .95fr 1.05fr;

    gap: 85px;

    align-items: center;
}


/* IMAGE */

.wellness-support-image {
    position: relative;

    padding: 0 20px 20px 0;

    animation: wellnessImageReveal 1s ease both;
}

.wellness-image-card {
    position: relative;

    z-index: 3;

    overflow: hidden;

    border-radius: 32px;

    box-shadow:
        0 25px 60px rgba(0,0,0,.2);

    transition:
        transform .5s ease,
        box-shadow .5s ease;
}

.wellness-image-card img {
    display: block;

    width: 100%;

    aspect-ratio: 1.15 / 1;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.2,.7,.2,1);
}

.wellness-image-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 35px 75px rgba(0,0,0,.27);
}

.wellness-image-card:hover img {
    transform: scale(1.06);
}

.wellness-image-dot {
    position: absolute;

    left: -55px;
    bottom: -55px;

    width: 180px;
    height: 180px;

    background: #cc1f26;

    border-radius: 50%;

    opacity: .95;
}


/* CONTENT */

.wellness-support-content {
    animation: wellnessContentReveal .9s ease .2s both;
}

.wellness-label.white {
    color: rgba(255,255,255,.72);
}

.wellness-support-content h2 {
    color: #ffffff;
}

.wellness-support-content h2 span {
    display: block;

    color: #ffffff;
}

.wellness-heading-line.white {
    background: #cc1f26;
}

.wellness-support-content p {
    margin: 0;

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

    font-size: 16px;

    line-height: 1.9;
}


/* SUPPORT POINTS */

.wellness-support-points {
    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 32px;
}

.wellness-point {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 15px;

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

    border-radius: 40px;

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease;
}

.wellness-point:hover {
    background: #cc1f26;

    border-color: #cc1f26;

    transform: translateY(-4px);
}

.wellness-point-icon {
    width: 28px;
    height: 28px;

    display: flex;

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

    color: #ffffff;

    font-size: 12px;
}

.wellness-point span {
    color: #ffffff;

    font-size: 11px;

    font-weight: 600;
}


/* BACKGROUND SHAPE */

.wellness-support::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -300px;
    top: -250px;

    border: 75px solid rgba(255,255,255,.045);

    border-radius: 50%;

    animation: wellnessFloat 10s ease-in-out infinite;
}

.wellness-support::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: 8%;
    bottom: -120px;

    background: rgba(255,255,255,.035);

    border-radius: 50%;
}


/* =========================================================
   HOLISTIC SECTION
========================================================= */

.wellness-holistic {
    position: relative;

    background: #ffffff;
}

.wellness-holistic-grid {
    width: 90%;
    max-width: 1180px;

    margin: auto;

    display: grid;

    grid-template-columns: 1.05fr .95fr;

    gap: 85px;

    align-items: center;
}

.wellness-holistic-content {
    animation: wellnessContentReveal .9s ease both;
}

.wellness-holistic-content p {
    margin: 0 0 20px;

    color: #555555;

    font-size: 16px;

    line-height: 1.9;
}

.wellness-holistic-content p:last-child {
    margin-bottom: 0;
}


/* IMAGE */

.wellness-holistic-image {
    position: relative;

    padding: 0 0 25px 25px;

    animation: wellnessImageReveal 1s ease .2s both;
}

.wellness-large-image {
    position: relative;

    z-index: 2;

    overflow: hidden;

    border-radius: 42px 0 42px 0;

    box-shadow:
        0 25px 65px rgba(21,80,135,.16);
}

.wellness-large-image img {
    display: block;

    width: 100%;

    aspect-ratio: 1.15 / 1;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.2,.7,.2,1);
}

.wellness-large-image:hover img {
    transform: scale(1.06);
}

.wellness-image-accent {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 130px;
    height: 130px;

    background: #cc1f26;

    border-radius: 50%;

    opacity: .95;
}


/* =========================================================
   CLOSING
========================================================= */

.wellness-closing {
    padding: 55px 0;

    background: #f6f8fa;
}

.wellness-closing-inner {
    width: 90%;
    max-width: 1180px;

    margin: auto;

    display: flex;

    align-items: center;

    gap: 22px;
}

.wellness-closing-icon {
    width: 62px;
    height: 62px;

    min-width: 62px;

    display: flex;

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

    background: #155087;

    color: #ffffff;

    border-radius: 50%;

    font-size: 22px;

    box-shadow:
        0 12px 30px rgba(21,80,135,.18);
}

.wellness-closing-content span {
    display: block;

    margin-bottom: 5px;

    color: #cc1f26;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2.5px;
}

.wellness-closing-content h3 {
    margin: 0;

    color: #155087;

    font-size: clamp(22px, 3vw, 34px);

    font-weight: 400;

    line-height: 1.3;
}

.wellness-closing-content h3 strong {
    font-weight: 800;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes wellnessFadeUp {

    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes wellnessTitleReveal {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes wellnessLineReveal {

    from {
        opacity: 0;
        transform: scaleX(0);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }

}

@keyframes wellnessContentReveal {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes wellnessImageReveal {

    from {
        opacity: 0;
        transform: translateY(35px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}

@keyframes wellnessFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-18px);
    }

}

@keyframes wellnessLineShine {

    0% {
        left: -100%;
    }

    45%,
    100% {
        left: 100%;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .wellness-banner {
        min-height: 380px;

        background-position: center 35%;
    }

    .wellness-banner-content {
        width: 100%;
    }

    .wellness-intro {
        padding: 75px 0;
    }

    .wellness-intro-grid,
    .wellness-support-grid,
    .wellness-holistic-grid {

        width: 100%;

        grid-template-columns: 1fr;

        gap: 55px;
    }

    .wellness-intro-image,
    .wellness-support-image,
    .wellness-holistic-image {

        width: 100%;

        max-width: 750px;

        margin: auto;
    }

    .wellness-intro-content,
    .wellness-support-content,
    .wellness-holistic-content {

        width: 100%;

        max-width: 750px;

        margin: auto;
    }

    .wellness-support {
        padding: 75px 0;
    }

    .wellness-holistic {
        padding: 75px 0;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .wellness-banner {
        min-height: 320px;

        background-position: center 30%;
    }

    .wellness-banner .inner-title {
        font-size: 38px;
    }

    .wellness-eyebrow {
        font-size: 10px;

        letter-spacing: 2px;
    }

    .wellness-intro,
    .wellness-support,
    .wellness-holistic {
        padding: 60px 0;
    }

    .wellness-intro-grid,
    .wellness-support-grid,
    .wellness-holistic-grid {
        gap: 40px;
    }

    .wellness-intro-content h2,
    .wellness-support-content h2,
    .wellness-holistic-content h2 {
        font-size: 34px;
    }

    .wellness-intro-content p,
    .wellness-support-content p,
    .wellness-holistic-content p {
        font-size: 14px;

        line-height: 1.8;
    }

    .wellness-image-tag {
        left: -5px;
        bottom: 0;

        padding: 12px 17px;
    }

    .wellness-image-tag strong {
        font-size: 13px;
    }

    .wellness-image-border {
        width: 105px;
        height: 105px;

        border-width: 20px;
    }

    .wellness-image-dot {
        width: 110px;
        height: 110px;

        left: -25px;
        bottom: -30px;
    }

    .wellness-image-accent {
        width: 90px;
        height: 90px;
    }

    .wellness-support-points {
        gap: 8px;
    }

    .wellness-point {
        padding: 8px 12px;
    }

    .wellness-point span {
        font-size: 10px;
    }

    .wellness-closing {
        padding: 40px 0;
    }

    .wellness-closing-inner {
        width: 100%;

        gap: 15px;
    }

    .wellness-closing-icon {
        width: 50px;
        height: 50px;

        min-width: 50px;

        font-size: 18px;
    }

    .wellness-closing-content h3 {
        font-size: 22px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .wellness-banner {
        min-height: 280px;

        background-position: center 25%;
    }

    .wellness-banner .inner-title {
        font-size: 30px;
    }

    .wellness-intro,
    .wellness-support,
    .wellness-holistic {
        padding: 50px 0;
    }

    .wellness-intro-image,
    .wellness-support-image,
    .wellness-holistic-image {
        padding-right: 12px;
        padding-bottom: 15px;
    }

    .wellness-image-main {
        border-radius: 0 25px 0 25px;
    }

    .wellness-image-card {
        border-radius: 22px;
    }

    .wellness-large-image {
        border-radius: 25px 0 25px 0;
    }

    .wellness-intro-content h2,
    .wellness-support-content h2,
    .wellness-holistic-content h2 {
        font-size: 29px;
    }

    .wellness-label {
        font-size: 9px;

        letter-spacing: 2px;
    }

    .wellness-heading-line {
        width: 55px;
        height: 3px;
    }

    .wellness-support-points {
        display: block;
    }

    .wellness-point {
        width: fit-content;

        margin-bottom: 8px;
    }

    .wellness-closing-content span {
        font-size: 8px;

        letter-spacing: 1.5px;
    }

    .wellness-closing-content h3 {
        font-size: 19px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .wellness-page *,
    .wellness-page *::before,
    .wellness-page *::after {

        animation: none !important;

        transition: none !important;
    }

}




/* =========================================================
   WORKSHOPS & FIELD TRIPS
========================================================= */

.workshop-page {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #ffffff;
}


/* =========================================================
   BANNER
========================================================= */

.workshop-banner {
    position: relative;

    min-height: 450px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(7, 38, 66, .93),
            rgba(21, 80, 135, .58)
        ),
        url("../images/alandi/Workkshop-Training-01.jpg");

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 35%;
}

.workshop-banner-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(21,80,135,.20),
            rgba(21,80,135,.02)
        );

    z-index: 1;
}

.workshop-banner .container {
    position: relative;
    z-index: 3;
}

.workshop-banner-content {
    width: 85%;
    margin: auto;

    animation: workshopBannerReveal 1s ease both;
}

.workshop-eyebrow {
    display: block;

    margin-bottom: 15px;

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;

    opacity: 0;

    animation: workshopFadeUp .8s ease .15s forwards;
}

.workshop-banner .inner-title {
    max-width: 950px;

    color: #ffffff !important;

    font-size: clamp(42px, 5vw, 68px);

    font-weight: 800;

    line-height: 1.08;

    opacity: 0;

    animation: workshopTitleReveal .9s ease .3s forwards;
}

.workshop-banner-line {
    width: 85px;
    height: 5px;

    margin-top: 22px;

    background: #cc1f26;

    border-radius: 20px;

    transform: scaleX(0);
    transform-origin: left;

    animation: workshopLineReveal .7s ease .75s forwards;
}


/* =========================================================
   INTRO
========================================================= */

.workshop-intro {
    position: relative;

    padding: 110px 0;

    background: #ffffff;

    overflow: hidden;
}

.workshop-intro-grid {
    position: relative;
    z-index: 2;

    width: 90%;
    max-width: 1180px;

    margin: auto;

    display: grid;

    grid-template-columns: 1.08fr .92fr;

    gap: 85px;

    align-items: center;
}


/* IMAGE */

.workshop-intro-image {
    position: relative;

    padding: 0 28px 28px 0;

    animation: workshopImageReveal 1s ease .2s both;
}

.workshop-image-frame {
    position: relative;
    z-index: 2;

    overflow: hidden;

    border-radius: 0 45px 0 45px;

    box-shadow:
        0 25px 65px rgba(21,80,135,.16);

    transition:
        transform .5s ease,
        box-shadow .5s ease;
}

.workshop-image-frame img {
    display: block;

    width: 100%;

    aspect-ratio: 1.3 / 1;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.2,.7,.2,1);
}

.workshop-image-frame:hover {
    transform: translateY(-8px);

    box-shadow:
        0 35px 80px rgba(21,80,135,.22);
}

.workshop-image-frame:hover img {
    transform: scale(1.06);
}

.workshop-image-accent {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 145px;
    height: 145px;

    border: 30px solid rgba(204,31,38,.12);

    border-radius: 50%;
}


/* CONTENT */

.workshop-intro-content {
    animation: workshopContentReveal .9s ease .25s both;
}

.workshop-label {
    display: inline-block;

    margin-bottom: 15px;

    color: #cc1f26;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}

.workshop-label.white {
    color: rgba(255,255,255,.75);
}

.workshop-intro-content h2,
.workshop-blue-content h2,
.workshop-career-content h2,
.workshop-responsibility-content h2 {

    margin: 0;

    color: #155087;

    font-size: clamp(35px, 4vw, 52px);

    font-weight: 800;

    line-height: 1.12;
}

.workshop-intro-content h2 span,
.workshop-career-content h2 span,
.workshop-responsibility-content h2 span {

    display: block;

    color: #cc1f26;
}

.workshop-heading-line {
    position: relative;

    width: 65px;
    height: 4px;

    margin: 21px 0 25px;

    background: #cc1f26;

    border-radius: 20px;

    overflow: hidden;
}

.workshop-heading-line::after {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 100%;
    height: 100%;

    background: rgba(255,255,255,.6);

    animation: workshopLineShine 3.5s ease-in-out infinite;
}

.workshop-intro-content p,
.workshop-career-content p,
.workshop-responsibility-content p {

    margin: 0;

    color: #555555;

    font-size: 16px;

    line-height: 1.9;
}


/* LEFT DESIGN */

.workshop-left-design {
    position: absolute;

    left: 0;
    top: 0;

    width: 270px;

    opacity: .20;

    pointer-events: none;
}


/* BACKGROUND CIRCLE */

.workshop-intro-shape {
    position: absolute;

    right: -200px;
    bottom: -220px;

    width: 500px;
    height: 500px;

    border: 80px solid rgba(21,80,135,.035);

    border-radius: 50%;

    animation: workshopFloat 10s ease-in-out infinite;
}


/* =========================================================
   BLUE SECTION
========================================================= */

.workshop-blue {
    position: relative;

    padding: 105px 0;

    background: #155087;

    overflow: hidden;
}

.workshop-blue-grid {
    position: relative;
    z-index: 3;

    width: 90%;
    max-width: 1180px;

    margin: auto;

    display: grid;

    grid-template-columns: .95fr 1.05fr;

    gap: 85px;

    align-items: center;
}

.workshop-blue-content {
    animation: workshopContentReveal .9s ease both;
}

.workshop-blue-content h2 {
    color: #ffffff;
}

.workshop-blue-content h2 span {
    display: block;

    color: #ffffff;
}

.workshop-heading-line.white {
    background: #cc1f26;
}

.workshop-blue-content p {
    margin: 0;

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

    font-size: 16px;

    line-height: 1.9;
}


/* BLUE IMAGE */

.workshop-blue-image {
    position: relative;

    padding: 0 0 25px 25px;

    animation: workshopImageReveal 1s ease .2s both;
}

.workshop-blue-image-frame {
    position: relative;

    z-index: 2;

    overflow: hidden;

    border-radius: 40px 0 40px 0;

    box-shadow:
        0 30px 65px rgba(0,0,0,.22);

    transition: transform .5s ease;
}

.workshop-blue-image-frame img {
    display: block;

    width: 100%;

    aspect-ratio: 1.25 / 1;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.2,.7,.2,1);
}

.workshop-blue-image-frame:hover {
    transform: translateY(-8px);
}

.workshop-blue-image-frame:hover img {
    transform: scale(1.06);
}

.workshop-blue-corner {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 135px;
    height: 135px;

    border: 25px solid rgba(204,31,38,.85);

    border-radius: 50%;
}

.workshop-blue-pattern {
    position: absolute;

    right: 35px;
    top: 35px;

    width: 150px;
    height: 150px;

    opacity: .05;

    background-image:
        linear-gradient(#ffffff 1px, transparent 1px),
        linear-gradient(90deg,#ffffff 1px,transparent 1px);

    background-size: 20px 20px;
}


/* =========================================================
   CAREER SECTION
========================================================= */

.workshop-career {
    position: relative;

    padding: 110px 0;

    background: #f7f8fa;
}

.workshop-career-grid {
    width: 90%;
    max-width: 1180px;

    margin: auto;

    display: grid;

    grid-template-columns: .95fr 1.05fr;

    gap: 85px;

    align-items: center;
}

.workshop-career-image {
    position: relative;

    padding: 0 25px 25px 0;

    animation: workshopImageReveal 1s ease both;
}

.workshop-career-frame {
    position: relative;

    z-index: 2;

    overflow: hidden;

    border-radius: 35px;

    box-shadow:
        0 25px 60px rgba(21,80,135,.14);
}

.workshop-career-frame img {
    display: block;

    width: 100%;

    aspect-ratio: 1.15 / 1;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.2,.7,.2,1);
}

.workshop-career-frame:hover img {
    transform: scale(1.06);
}

.workshop-career-accent {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 125px;
    height: 125px;

    background: #155087;

    border-radius: 50%;
}

.workshop-career-content {
    animation: workshopContentReveal .9s ease .2s both;
}


/* =========================================================
   RESPONSIBILITY SECTION
========================================================= */

.workshop-responsibility {
    position: relative;

    padding: 110px 0;

    background: #ffffff;

    overflow: hidden;
}

.workshop-responsibility-grid {
    position: relative;
    z-index: 2;

    width: 90%;
    max-width: 1180px;

    margin: auto;

    display: grid;

    grid-template-columns: 1.05fr .95fr;

    gap: 85px;

    align-items: center;
}

.workshop-responsibility-image {
    position: relative;

    padding: 0 0 25px 25px;

    animation: workshopImageReveal 1s ease both;
}

.workshop-responsibility-frame {
    position: relative;

    z-index: 2;

    overflow: hidden;

    border-radius: 0 42px 0 42px;

    box-shadow:
        0 25px 65px rgba(21,80,135,.15);
}

.workshop-responsibility-frame img {
    display: block;

    width: 100%;

    aspect-ratio: 1.15 / 1;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.2,.7,.2,1);
}

.workshop-responsibility-frame:hover img {
    transform: scale(1.06);
}

.workshop-red-accent {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 125px;
    height: 125px;

    background: #cc1f26;

    border-radius: 50%;
}

.workshop-responsibility-content {
    animation: workshopContentReveal .9s ease .2s both;
}

.workshop-responsibility-content p + p {
    margin-top: 20px;
}

.workshop-responsibility-bg {
    position: absolute;

    right: -220px;
    top: 50%;

    width: 480px;
    height: 480px;

    border: 75px solid rgba(204,31,38,.035);

    border-radius: 50%;

    transform: translateY(-50%);
}


/* =========================================================
   CLOSING
========================================================= */

.workshop-closing {
    position: relative;

    padding: 75px 0;

    background: #f4f7fa;
}

.workshop-closing-box {
    position: relative;

    width: 90%;
    max-width: 1180px;

    margin: auto;

    padding: 55px 60px;

    background: #ffffff;

    border-left: 5px solid #cc1f26;

    box-shadow:
        0 20px 55px rgba(21,80,135,.08);
}

.workshop-closing-mark {
    position: absolute;

    right: 45px;
    top: 40px;

    display: flex;

    gap: 7px;
}

.workshop-closing-mark span {
    display: block;

    width: 8px;
    height: 8px;

    background: #155087;

    border-radius: 50%;
}

.workshop-closing-mark span:nth-child(2) {
    background: #cc1f26;
}

.workshop-closing-content {
    max-width: 1000px;
}

.workshop-closing-content p {
    margin: 0;

    color: #555555;

    font-size: 16px;

    line-height: 1.9;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes workshopBannerReveal {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes workshopFadeUp {

    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes workshopTitleReveal {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes workshopLineReveal {

    from {
        opacity: 0;
        transform: scaleX(0);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }

}

@keyframes workshopContentReveal {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes workshopImageReveal {

    from {
        opacity: 0;
        transform: translateY(35px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}

@keyframes workshopFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-18px);
    }

}

@keyframes workshopLineShine {

    0% {
        left: -100%;
    }

    45%,
    100% {
        left: 100%;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .workshop-banner {
        min-height: 380px;

        background-position: center 35%;
    }

    .workshop-banner-content {
        width: 100%;
    }

    .workshop-intro,
    .workshop-blue,
    .workshop-career,
    .workshop-responsibility {
        padding: 75px 0;
    }

    .workshop-intro-grid,
    .workshop-blue-grid,
    .workshop-career-grid,
    .workshop-responsibility-grid {

        width: 100%;

        grid-template-columns: 1fr;

        gap: 55px;
    }

    .workshop-intro-image,
    .workshop-blue-image,
    .workshop-career-image,
    .workshop-responsibility-image {

        width: 100%;

        max-width: 750px;

        margin: auto;
    }

    .workshop-intro-content,
    .workshop-blue-content,
    .workshop-career-content,
    .workshop-responsibility-content {

        width: 100%;

        max-width: 750px;

        margin: auto;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .workshop-banner {
        min-height: 320px;

        background-position: center 30%;
    }

    .workshop-banner .inner-title {
        font-size: 38px;
    }

    .workshop-eyebrow {
        font-size: 10px;

        letter-spacing: 2px;
    }

    .workshop-intro,
    .workshop-blue,
    .workshop-career,
    .workshop-responsibility {
        padding: 60px 0;
    }

    .workshop-intro-grid,
    .workshop-blue-grid,
    .workshop-career-grid,
    .workshop-responsibility-grid {
        gap: 40px;
    }

    .workshop-intro-content h2,
    .workshop-blue-content h2,
    .workshop-career-content h2,
    .workshop-responsibility-content h2 {

        font-size: 34px;
    }

    .workshop-intro-content p,
    .workshop-blue-content p,
    .workshop-career-content p,
    .workshop-responsibility-content p,
    .workshop-closing-content p {

        font-size: 14px;

        line-height: 1.8;
    }

    .workshop-image-accent,
    .workshop-blue-corner {
        width: 95px;
        height: 95px;
    }

    .workshop-career-accent,
    .workshop-red-accent {
        width: 90px;
        height: 90px;
    }

    .workshop-closing {
        padding: 45px 0;
    }

    .workshop-closing-box {
        width: 100%;

        padding: 35px 25px;
    }

    .workshop-closing-mark {
        right: 20px;
        top: 22px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .workshop-banner {
        min-height: 280px;

        background-position: center 25%;
    }

    .workshop-banner .inner-title {
        font-size: 30px;
    }

    .workshop-intro,
    .workshop-blue,
    .workshop-career,
    .workshop-responsibility {
        padding: 50px 0;
    }

    .workshop-intro-image,
    .workshop-blue-image,
    .workshop-career-image,
    .workshop-responsibility-image {

        padding-right: 12px;
        padding-bottom: 15px;
    }

    .workshop-image-frame {
        border-radius: 0 25px 0 25px;
    }

    .workshop-blue-image-frame {
        border-radius: 25px 0 25px 0;
    }

    .workshop-career-frame {
        border-radius: 25px;
    }

    .workshop-responsibility-frame {
        border-radius: 0 25px 0 25px;
    }

    .workshop-intro-content h2,
    .workshop-blue-content h2,
    .workshop-career-content h2,
    .workshop-responsibility-content h2 {

        font-size: 29px;
    }

    .workshop-label {
        font-size: 9px;

        letter-spacing: 2px;
    }

    .workshop-heading-line {
        width: 55px;
        height: 3px;
    }

    .workshop-image-accent,
    .workshop-blue-corner {
        width: 75px;
        height: 75px;

        border-width: 15px;
    }

    .workshop-career-accent,
    .workshop-red-accent {
        width: 70px;
        height: 70px;
    }

    .workshop-closing-content p {
        font-size: 13px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .workshop-page *,
    .workshop-page *::before,
    .workshop-page *::after {

        animation: none !important;

        transition: none !important;
    }

}



/* =========================================================
    PRE-PRIMARY PAGE
 ========================================================= */

.preprimary-page {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #ffffff;
}


/* =========================================================
   BANNER
========================================================= */

.preprimary-banner {
    position: relative;

    min-height: 440px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(7,38,66,.92),
            rgba(21,80,135,.55)
        ),
        url("../images/Little-Learners.JPG");

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 40%;
}

.preprimary-banner-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(21,80,135,.22),
            rgba(21,80,135,.02)
        );

    z-index: 1;
}

.preprimary-banner .container {
    position: relative;
    z-index: 3;
}

.preprimary-banner-content {
    width: 85%;
    margin: auto;

    animation: preprimaryBannerReveal 1s ease both;
}

.preprimary-eyebrow {
    display: block;

    margin-bottom: 15px;

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;

    opacity: 0;

    animation: preprimaryFadeUp .8s ease .15s forwards;
}

.preprimary-banner .inner-title {
    color: #ffffff !important;

    font-size: clamp(45px,5vw,68px);

    font-weight: 800;

    line-height: 1.08;

    opacity: 0;

    animation: preprimaryTitleReveal .9s ease .3s forwards;
}

.preprimary-banner-line {
    width: 80px;
    height: 5px;

    margin-top: 22px;

    background: #cc1f26;

    border-radius: 20px;

    transform: scaleX(0);
    transform-origin: left;

    animation: preprimaryLineReveal .7s ease .75s forwards;
}


/* =========================================================
   INTRO
========================================================= */

.preprimary-intro {
    position: relative;

    padding: 110px 0;

    background: #ffffff;

    overflow: hidden;
}

.preprimary-intro-grid {
    position: relative;
    z-index: 2;

    width: 90%;
    max-width: 1180px;

    margin: auto;

    display: grid;

    grid-template-columns: 1.05fr .95fr;

    gap: 85px;

    align-items: center;
}


/* IMAGE */

.preprimary-intro-image {
    position: relative;

    padding: 0 30px 30px 0;

    animation: preprimaryImageReveal 1s ease .2s both;
}

.preprimary-main-image {
    position: relative;

    z-index: 2;

    overflow: hidden;

    border-radius: 40px 0 40px 0;

    box-shadow:
        0 25px 65px rgba(21,80,135,.16);

    transition:
        transform .5s ease,
        box-shadow .5s ease;
}

.preprimary-main-image img {
    display: block;

    width: 100%;

    aspect-ratio: 1.3 / 1;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.2,.7,.2,1);
}

.preprimary-main-image:hover {
    transform: translateY(-8px);

    box-shadow:
        0 35px 80px rgba(21,80,135,.22);
}

.preprimary-main-image:hover img {
    transform: scale(1.06);
}

.preprimary-image-accent {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 145px;
    height: 145px;

    background: #cc1f26;

    border-radius: 50%;

    opacity: .95;
}

.preprimary-image-label {
    position: absolute;

    left: -20px;
    bottom: 5px;

    z-index: 4;

    padding: 15px 23px;

    background: #155087;

    box-shadow:
        0 15px 35px rgba(21,80,135,.2);
}

.preprimary-image-label span {
    display: block;

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

    font-size: 10px;

    letter-spacing: 2px;

    text-transform: uppercase;
}

.preprimary-image-label strong {
    display: block;

    color: #ffffff;

    font-size: 17px;

    font-weight: 700;
}


/* CONTENT */

.preprimary-intro-content {
    animation: preprimaryContentReveal .9s ease .25s both;
}

.preprimary-label {
    display: inline-block;

    margin-bottom: 15px;

    color: #cc1f26;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}

.preprimary-label.light {
    color: rgba(255,255,255,.75);
}

.preprimary-intro-content h2,
.preprimary-learning-content h2,
.preprimary-development-content h2 {

    margin: 0;

    color: #155087;

    font-size: clamp(35px,4vw,52px);

    font-weight: 800;

    line-height: 1.12;
}

.preprimary-intro-content h2 span,
.preprimary-development-content h2 span {

    display: block;

    color: #cc1f26;
}

.preprimary-line {
    position: relative;

    width: 65px;
    height: 4px;

    margin: 21px 0 25px;

    background: #cc1f26;

    border-radius: 20px;

    overflow: hidden;
}

.preprimary-line::after {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 100%;
    height: 100%;

    background: rgba(255,255,255,.6);

    animation: preprimaryLineShine 3.5s ease-in-out infinite;
}

.preprimary-intro-content p,
.preprimary-development-content p {

    margin: 0;

    color: #555555;

    font-size: 16px;

    line-height: 1.9;
}


/* DECORATION */

.preprimary-circle {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.circle-one {
    width: 300px;
    height: 300px;

    right: -190px;
    top: 80px;

    border: 50px solid rgba(21,80,135,.035);

    animation: preprimaryFloat 9s ease-in-out infinite;
}

.circle-two {
    width: 100px;
    height: 100px;

    left: 8%;
    bottom: 35px;

    border: 18px solid rgba(204,31,38,.08);
}


/* LEFT DESIGN */

.preprimary-left-design {
    position: absolute;

    left: 0;
    top: 0;

    width: 260px;

    opacity: .18;

    pointer-events: none;
}


/* =========================================================
   BLUE LEARNING SECTION
========================================================= */

.preprimary-learning {
    position: relative;

    padding: 110px 0;

    background: #155087;

    overflow: hidden;
}

.preprimary-learning-grid {
    position: relative;
    z-index: 3;

    width: 90%;
    max-width: 1180px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 85px;

    align-items: center;
}

.preprimary-learning-content {
    animation: preprimaryContentReveal .9s ease both;
}

.preprimary-learning-content h2 {
    color: #ffffff;
}

.preprimary-learning-content h2 span {
    display: block;

    color: #ffffff;
}

.preprimary-line.light {
    background: #cc1f26;
}

.preprimary-learning-content p {
    margin: 0;

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

    font-size: 16px;

    line-height: 1.9;
}


/* IMAGE */

.preprimary-learning-image {
    position: relative;

    padding: 0 0 25px 25px;

    animation: preprimaryImageReveal 1s ease .2s both;
}

.preprimary-learning-frame {
    position: relative;

    z-index: 3;

    overflow: hidden;

    border-radius: 0 40px 0 40px;

    box-shadow:
        0 30px 65px rgba(0,0,0,.2);

    transition: transform .5s ease;
}

.preprimary-learning-frame img {
    display: block;

    width: 100%;

    aspect-ratio: 1.2 / 1;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.2,.7,.2,1);
}

.preprimary-learning-frame:hover {
    transform: translateY(-8px);
}

.preprimary-learning-frame:hover img {
    transform: scale(1.06);
}

.preprimary-learning-accent {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 125px;
    height: 125px;

    border: 24px solid rgba(204,31,38,.9);

    border-radius: 50%;
}

.preprimary-learning-pattern {
    position: absolute;

    right: 40px;
    top: 35px;

    width: 150px;
    height: 150px;

    opacity: .05;

    background-image:
        radial-gradient(
            #ffffff 1.5px,
            transparent 1.5px
        );

    background-size: 18px 18px;
}


/* =========================================================
   DEVELOPMENT SECTION
========================================================= */

.preprimary-development {
    position: relative;

    padding: 110px 0;

    background: #f6f8fa;

    overflow: hidden;
}

.preprimary-development-grid {
    width: 90%;
    max-width: 1180px;

    margin: auto;

    display: grid;

    grid-template-columns: .95fr 1.05fr;

    gap: 85px;

    align-items: center;
}


/* IMAGE */

.preprimary-development-image {
    position: relative;

    padding: 0 25px 25px 0;

    animation: preprimaryImageReveal 1s ease both;
}

.preprimary-development-frame {
    position: relative;

    z-index: 2;

    overflow: hidden;

    border-radius: 40px;

    box-shadow:
        0 25px 60px rgba(21,80,135,.14);
}

.preprimary-development-frame img {
    display: block;

    width: 100%;

    aspect-ratio: 1.15 / 1;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.2,.7,.2,1);
}

.preprimary-development-frame:hover img {
    transform: scale(1.06);
}

.preprimary-development-shape {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 125px;
    height: 125px;

    background: #155087;

    border-radius: 50%;
}


/* CONTENT */

.preprimary-development-content {
    animation: preprimaryContentReveal .9s ease .2s both;
}

.preprimary-development-content p {
    margin: 0;
}


/* =========================================================
   CLOSING
========================================================= */

.preprimary-closing {
    padding: 60px 0;

    background: #ffffff;
}

.preprimary-closing-inner {
    position: relative;

    width: 90%;
    max-width: 1180px;

    margin: auto;

    padding: 45px 55px;

    background: #f6f8fa;

    border-left: 5px solid #cc1f26;

    box-shadow:
        0 15px 45px rgba(21,80,135,.06);
}

.preprimary-closing-shapes {
    position: absolute;

    right: 45px;
    top: 40px;

    display: flex;

    gap: 7px;
}

.preprimary-closing-shapes span {
    width: 8px;
    height: 8px;

    background: #155087;

    border-radius: 50%;
}

.preprimary-closing-shapes span:nth-child(2) {
    background: #cc1f26;
}

.preprimary-closing-content span {
    display: block;

    margin-bottom: 6px;

    color: #cc1f26;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2.5px;
}

.preprimary-closing-content h3 {
    margin: 0;

    color: #155087;

    font-size: clamp(22px,3vw,34px);

    font-weight: 400;

    line-height: 1.3;
}

.preprimary-closing-content h3 strong {
    font-weight: 800;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes preprimaryBannerReveal {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes preprimaryFadeUp {

    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes preprimaryTitleReveal {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes preprimaryLineReveal {

    from {
        opacity: 0;
        transform: scaleX(0);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }

}

@keyframes preprimaryContentReveal {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes preprimaryImageReveal {

    from {
        opacity: 0;
        transform: translateY(35px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}

@keyframes preprimaryFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-18px);
    }

}

@keyframes preprimaryLineShine {

    0% {
        left: -100%;
    }

    45%,
    100% {
        left: 100%;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .preprimary-banner {
        min-height: 380px;

        background-position: center 35%;
    }

    .preprimary-banner-content {
        width: 100%;
    }

    .preprimary-intro,
    .preprimary-learning,
    .preprimary-development {
        padding: 75px 0;
    }

    .preprimary-intro-grid,
    .preprimary-learning-grid,
    .preprimary-development-grid {

        width: 100%;

        grid-template-columns: 1fr;

        gap: 55px;
    }

    .preprimary-intro-image,
    .preprimary-learning-image,
    .preprimary-development-image {

        width: 100%;

        max-width: 750px;

        margin: auto;
    }

    .preprimary-intro-content,
    .preprimary-learning-content,
    .preprimary-development-content {

        width: 100%;

        max-width: 750px;

        margin: auto;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .preprimary-banner {
        min-height: 320px;

        background-position: center 30%;
    }

    .preprimary-banner .inner-title {
        font-size: 38px;
    }

    .preprimary-eyebrow {
        font-size: 10px;

        letter-spacing: 2px;
    }

    .preprimary-intro,
    .preprimary-learning,
    .preprimary-development {
        padding: 60px 0;
    }

    .preprimary-intro-grid,
    .preprimary-learning-grid,
    .preprimary-development-grid {
        gap: 40px;
    }

    .preprimary-intro-content h2,
    .preprimary-learning-content h2,
    .preprimary-development-content h2 {

        font-size: 34px;
    }

    .preprimary-intro-content p,
    .preprimary-learning-content p,
    .preprimary-development-content p {

        font-size: 14px;

        line-height: 1.8;
    }

    .preprimary-image-accent {
        width: 95px;
        height: 95px;
    }

    .preprimary-image-label {
        left: -5px;

        padding: 12px 17px;
    }

    .preprimary-image-label strong {
        font-size: 14px;
    }

    .preprimary-learning-accent {
        width: 85px;
        height: 85px;

        border-width: 16px;
    }

    .preprimary-development-shape {
        width: 85px;
        height: 85px;
    }

    .preprimary-closing {
        padding: 45px 0;
    }

    .preprimary-closing-inner {
        width: 100%;

        padding: 35px 25px;
    }

    .preprimary-closing-content h3 {
        font-size: 23px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .preprimary-banner {
        min-height: 280px;

        background-position: center 25%;
    }

    .preprimary-banner .inner-title {
        font-size: 30px;
    }

    .preprimary-intro,
    .preprimary-learning,
    .preprimary-development {
        padding: 50px 0;
    }

    .preprimary-intro-image,
    .preprimary-learning-image,
    .preprimary-development-image {

        padding-right: 12px;
        padding-bottom: 15px;
    }

    .preprimary-main-image {
        border-radius: 25px 0 25px 0;
    }

    .preprimary-learning-frame {
        border-radius: 25px 0 25px 0;
    }

    .preprimary-development-frame {
        border-radius: 25px;
    }

    .preprimary-intro-content h2,
    .preprimary-learning-content h2,
    .preprimary-development-content h2 {

        font-size: 29px;
    }

    .preprimary-label {
        font-size: 9px;

        letter-spacing: 2px;
    }

    .preprimary-line {
        width: 55px;
        height: 3px;
    }

    .preprimary-image-accent {
        width: 70px;
        height: 70px;
    }

    .preprimary-learning-accent {
        width: 65px;
        height: 65px;

        border-width: 12px;
    }

    .preprimary-development-shape {
        width: 65px;
        height: 65px;
    }

    .preprimary-closing-shapes {
        right: 20px;
        top: 22px;
    }

    .preprimary-closing-content span {
        font-size: 8px;
    }

    .preprimary-closing-content h3 {
        font-size: 19px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .preprimary-page *,
    .preprimary-page *::before,
    .preprimary-page *::after {

        animation: none !important;

        transition: none !important;
    }

}





/* =========================================================
   FOUNDATIONAL YEARS - PREMIUM PAGE
========================================================= */

.foundational-page {
    position: relative;
    overflow: hidden;
    background: #fff;
    color: #222;
}


/* =========================================================
   BANNER
========================================================= */

.foundational-banner {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    background-image: url("../images/students-group.JPG");
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.foundational-banner-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(10, 45, 78, 0.92) 0%,
            rgba(21, 80, 135, 0.78) 48%,
            rgba(21, 80, 135, 0.35) 100%
        );
}

.foundational-banner .container {
    position: relative;
    z-index: 2;
}

.foundational-banner-content {
    max-width: 850px;
    padding: 70px 0;
    animation: foundationalBannerIn 1s ease forwards;
}

.foundational-eyebrow {
    display: block;
    margin-bottom: 18px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.foundational-banner h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(42px, 5vw, 72px);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -1.5px;
}

.foundational-banner-line {
    display: block;
    width: 75px;
    height: 4px;
    margin-top: 25px;
    background: #cc1f26;
}


/* =========================================================
   INTRO
========================================================= */

.foundational-intro {
    position: relative;
    padding: 110px 0;
    background: #fff;
}

.foundational-intro-wrap {
    width: 88%;
    max-width: 1180px;
    margin: auto;

    display: grid;
    grid-template-columns: 52% 48%;
    align-items: center;
}

.foundational-main-image {
    position: relative;
    z-index: 2;
    overflow: hidden;
    border-radius: 0 35px 35px 0;
    box-shadow: 0 25px 60px rgba(21, 80, 135, 0.16);
}

.foundational-main-image::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    background: #cc1f26;
}

.foundational-main-image img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: block;
    transition: transform .7s ease;
}

.foundational-main-image:hover img {
    transform: scale(1.04);
}

.foundational-intro-content {
    position: relative;
    z-index: 3;
    margin-left: -55px;
    padding: 55px 55px 55px 75px;
    background: #fff;
    box-shadow: 0 25px 60px rgba(20, 45, 70, 0.10);
}

.foundational-label {
    display: inline-block;
    margin-bottom: 16px;
    color: #155087;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.foundational-intro-content h2,
.foundational-development-content h2 {
    margin: 0;
    color: #155087;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 700;
}

.foundational-intro-content h2 span,
.foundational-development-content h2 span {
    display: block;
    color: #cc1f26;
}

.foundational-red-line {
    width: 55px;
    height: 3px;
    margin: 22px 0 25px;
    background: #cc1f26;
}

.foundational-intro-content p,
.foundational-development-content p {
    margin: 0;
    color: #555;
    font-size: 16px;
    line-height: 1.9;
}

.foundational-side-design {
    position: absolute;
    left: 0;
    top: 70px;
    width: 220px;
    opacity: .08;
    pointer-events: none;
}


/* =========================================================
   BLUE LEARNING SECTION
========================================================= */

.foundational-learning {
    position: relative;
    padding: 105px 0;
    background: #155087;
    overflow: hidden;
}

.foundational-learning::before {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    right: -230px;
    top: -230px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
}

.foundational-learning::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    right: -150px;
    top: -150px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 50%;
}

.foundational-learning-grid {
    width: 88%;
    max-width: 1180px;
    margin: auto;

    display: grid;
    grid-template-columns: 48% 52%;
    align-items: center;
}

.foundational-learning-content {
    position: relative;
    z-index: 2;
    padding-right: 65px;
    
}

.foundational-label.light {
    color: rgba(255,255,255,.8);
}

.foundational-number-line {
    width: 70px;
    margin: 4px 0 28px;
}

.foundational-number-line span {
    display: block;
    width: 55px;
    height: 3px;
    background: #cc1f26;
    
}

.foundational-learning-content p {
    margin: 0;
    font-size: 16px;
    line-height: 1.9;
    color:#fff;
}

.foundational-learning-image {
    position: relative;
    z-index: 2;
}

.image-frame {
    position: relative;
    padding: 12px;
    background: rgba(255,255,255,.12);
    border-radius: 28px;
}

.image-frame img {
    width: 100%;
    height: 410px;
    display: block;
    object-fit: cover;
    border-radius: 20px;
    transition: transform .6s ease;
}

.image-frame:hover img {
    transform: scale(1.03);
}


/* =========================================================
   DEVELOPMENT SECTION
========================================================= */

.foundational-development {
    position: relative;
    padding: 115px 0;
    background: #f7f8fa;
    overflow: hidden;
}

.foundational-development-grid {
    width: 88%;
    max-width: 1180px;
    margin: auto;

    display: grid;
    grid-template-columns: 50% 50%;
    align-items: center;
}

.foundational-development-image {
    padding-right: 60px;
}

.development-image-frame {
    position: relative;
    padding-bottom: 18px;
    padding-right: 18px;
}

.development-image-frame::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 75%;
    height: 75%;
    background: #155087;
    border-radius: 0 0 25px 0;
}

.development-image-frame img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 430px;
    object-fit: cover;
    border-radius: 25px;
    display: block;
    box-shadow: 0 25px 55px rgba(21, 80, 135, .16);
    transition: transform .6s ease;
}

.development-image-frame:hover img {
    transform: translate(-5px, -5px);
}

.image-accent {
    position: absolute;
    z-index: 3;
    left: -12px;
    top: 40px;
    width: 5px;
    height: 75px;
    background: #cc1f26;
}

.foundational-development-content {
    padding-left: 35px;
}

.foundational-development-content p {
    max-width: 570px;
}


/* =========================================================
   FINAL VALUES SECTION
========================================================= */

.foundational-values {
    padding: 105px 0;
    background: #fff;
}

.foundational-values-wrap {
    width: 88%;
    max-width: 1180px;
    margin: auto;

    display: grid;
    grid-template-columns: 43% 57%;
    align-items: stretch;
}

.foundational-values-image {
    overflow: hidden;
    border-radius: 25px 0 0 25px;
}

.foundational-values-image img {
    width: 100%;
    height: 370px;
    display: block;
    object-fit: cover;
    transition: transform .7s ease;
}

.foundational-values-image:hover img {
    transform: scale(1.04);
}

.foundational-values-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 55px 65px;

    background: #155087;
    border-radius: 0 25px 25px 0;
}

.foundational-values-content p {
    margin: 0;
    max-width: 650px;
    font-size: 17px;
    line-height: 1.9;
}

.values-accent {
    display: flex;
    gap: 7px;
    margin-top: 30px;
}

.values-accent span {
    width: 25px;
    height: 4px;
    background: #cc1f26;
}

.values-accent span:nth-child(2) {
    width: 45px;
}

.values-accent span:nth-child(3) {
    width: 15px;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes foundationalBannerIn {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   SCROLL REVEAL SUPPORT
========================================================= */

.foundational-intro-wrap,
.foundational-learning-grid,
.foundational-development-grid,
.foundational-values-wrap {
    animation: foundationalReveal .9s ease both;
}

@keyframes foundationalReveal {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .foundational-banner {
        min-height: 400px;
    }

    .foundational-intro {
        padding: 80px 0;
    }

    .foundational-intro-wrap {
        width: 92%;
        grid-template-columns: 1fr;
    }

    .foundational-main-image img {
        height: 400px;
    }

    .foundational-intro-content {
        margin: -45px 30px 0;
        padding: 40px;
    }

    .foundational-learning,
    .foundational-development,
    .foundational-values {
        padding: 80px 0;
    }

    .foundational-learning-grid,
    .foundational-development-grid,
    .foundational-values-wrap {
        width: 92%;
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .foundational-learning-content {
        padding-right: 0;
    }

    .foundational-development-image {
        padding-right: 30px;
    }

    .foundational-development-content {
        padding-left: 0;
    }

    .foundational-values-image {
        border-radius: 25px 25px 0 0;
    }

    .foundational-values-content {
        border-radius: 0 0 25px 25px;
    }

    .foundational-side-design {
        display: none;
    }

}


@media (max-width: 767px) {

    .foundational-banner {
        min-height: 330px;
    }

    .foundational-banner-content {
        padding: 50px 20px;
    }

    .foundational-eyebrow {
        font-size: 10px;
        letter-spacing: 2.5px;
    }

    .foundational-banner h1 {
        font-size: 40px;
    }

    .foundational-intro {
        padding: 60px 0;
    }

    .foundational-intro-wrap,
    .foundational-learning-grid,
    .foundational-development-grid,
    .foundational-values-wrap {
        width: 92%;
    }

    .foundational-main-image img {
        height: 280px;
    }

    .foundational-intro-content {
        margin: -30px 12px 0;
        padding: 30px 25px;
    }

    .foundational-intro-content h2,
    .foundational-development-content h2 {
        font-size: 29px;
    }

    .foundational-intro-content p,
    .foundational-development-content p,
    .foundational-learning-content p,
    .foundational-values-content p {
        font-size: 15px;
        line-height: 1.75;
    }

    .foundational-learning,
    .foundational-development,
    .foundational-values {
        padding: 60px 0;
    }

    .image-frame {
        padding: 8px;
    }

    .image-frame img {
        height: 280px;
    }

    .development-image-frame img {
        height: 280px;
    }

    .foundational-development-image {
        padding-right: 15px;
    }

    .foundational-values-image img {
        height: 280px;
    }

    .foundational-values-content {
        padding: 35px 28px;
    }

}


/* =========================================================
   FINAL FOUNDATIONAL YEARS FIXES
========================================================= */

.foundational-page {
    width: 100%;
}

.foundational-page img {
    max-width: 100%;
}


/* Hide old CodeIgniter banner if still present */
.foundational-page > .inner_banner {
    display: none !important;
}


/* Make all images behave correctly */
.foundational-main-image img,
.image-frame img,
.development-image-frame img,
.foundational-values-image img {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}


/* Blue section text */
.foundational-learning-content h2 {
    color: #fff;
}

.foundational-learning-content h2 span {
    display: block;
    color: #fff;
}


/* Final section heading */
.foundational-values-content h2 {
    color: #fff !important;
}

.foundational-values-content h2 span {
    color: #fff !important;
}


/* Paragraph spacing */
.foundational-learning-content p + p {
    margin-top: 20px;
}


/* Decorative elements should not block clicks */
.foundational-side-design,
.foundational-banner-overlay,
.foundational-learning::before,
.foundational-learning::after,
.image-accent {
    pointer-events: none;
}


/* =========================================================
   TABLET FIX
========================================================= */

@media (max-width: 991px) {

    .foundational-intro-wrap,
    .foundational-learning-grid,
    .foundational-development-grid,
    .foundational-values-wrap {
        width: 92%;
    }

    .foundational-intro-content {
        margin: -45px 30px 0;
    }

    .foundational-learning-grid,
    .foundational-development-grid,
    .foundational-values-wrap {
        grid-template-columns: 1fr;
    }

    .foundational-learning-content {
        padding-right: 0;
    }

    .foundational-development-content {
        padding-left: 0;
    }

    .foundational-development-image {
        padding-right: 30px;
    }

    .foundational-values-image {
        border-radius: 25px 25px 0 0;
    }

    .foundational-values-content {
        border-radius: 0 0 25px 25px;
    }
}


/* =========================================================
   MOBILE FIX
========================================================= */

@media (max-width: 767px) {

    .foundational-banner {
        min-height: 330px !important;
        background-position: center center !important;
    }

    .foundational-banner-content {
        padding: 50px 20px;
    }

    .foundational-eyebrow {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .foundational-banner h1 {
        font-size: 40px !important;
    }

    .foundational-intro {
        padding: 60px 0;
    }

    .foundational-intro-wrap,
    .foundational-learning-grid,
    .foundational-development-grid,
    .foundational-values-wrap {
        width: 92%;
    }

    .foundational-main-image img {
        height: 280px !important;
    }

    .foundational-intro-content {
        margin: -30px 12px 0;
        padding: 30px 25px;
    }

    .foundational-intro-content h2,
    .foundational-development-content h2,
    .foundational-learning-content h2 {
        font-size: 29px;
    }

    .foundational-intro-content p,
    .foundational-development-content p,
    .foundational-learning-content p,
    .foundational-values-content p {
        font-size: 15px;
        line-height: 1.75;
    }

    .foundational-learning,
    .foundational-development,
    .foundational-values {
        padding: 60px 0;
    }

    .image-frame {
        padding: 8px;
    }

    .image-frame img {
        height: 280px !important;
    }

    .development-image-frame img {
        height: 280px !important;
    }

    .foundational-development-image {
        padding-right: 15px;
    }

    .foundational-values-image img {
        height: 280px !important;
    }

    .foundational-values-content {
        padding: 35px 28px;
    }

    .foundational-values-content h2 {
        font-size: 28px !important;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .foundational-banner {
        min-height: 280px !important;
    }

    .foundational-banner h1 {
        font-size: 30px !important;
        line-height: 1.15 !important;
    }

    .foundational-eyebrow {
        font-size: 9px !important;
        letter-spacing: 1.5px !important;
    }

    .foundational-intro-content {
        margin-left: 8px;
        margin-right: 8px;
        padding: 25px 20px;
    }

    .foundational-intro-content h2,
    .foundational-development-content h2,
    .foundational-learning-content h2 {
        font-size: 26px;
    }

    .foundational-values-content {
        padding: 28px 22px;
    }

    .foundational-values-content h2 {
        font-size: 24px !important;
    }

}






/* =========================================================
   PREPARATORY YEARS
   PREMIUM WPS DESIGN
========================================================= */

.preparatory-page {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    color: #222;
}


/* =========================================================
   BANNER
========================================================= */

.preparatory-banner {
    position: relative;
    min-height: 480px;

    display: flex;
    align-items: center;

    background-image: url("../images/alandi/students-activity-1.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;
}

.preparatory-banner-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(8, 42, 73, .94) 0%,
            rgba(21, 80, 135, .82) 48%,
            rgba(21, 80, 135, .35) 100%
        );
}

.preparatory-banner .container {
    position: relative;
    z-index: 2;
}

.preparatory-banner-content {
    max-width: 850px;
    padding: 75px 0;

    animation: preparatoryBannerIn 1s ease both;
}

.preparatory-eyebrow {
    display: block;

    margin-bottom: 18px;

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 4px;
    text-transform: uppercase;
}

.preparatory-banner h1 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(44px, 5.2vw, 74px);
    line-height: 1.05;

    font-weight: 700;
    letter-spacing: -1.5px;
}

.preparatory-banner-line {
    width: 75px;
    height: 4px;

    margin-top: 25px;

    background: #cc1f26;
}


/* =========================================================
   INTRO
========================================================= */

.preparatory-intro {
    position: relative;

    padding: 110px 0;

    background: #ffffff;
}

.preparatory-intro-wrap {
    width: 88%;
    max-width: 1180px;

    margin: auto;

    display: grid;
    grid-template-columns: 53% 47%;

    align-items: center;
}


/* IMAGE */

.preparatory-intro-image {
    position: relative;
    z-index: 1;
}

.preparatory-image-holder {
    position: relative;

    overflow: hidden;

    border-radius: 0 32px 32px 0;

    box-shadow:
        0 25px 60px rgba(21, 80, 135, .17);
}

.preparatory-image-holder::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 5px;

    background: #cc1f26;
}

.preparatory-image-holder img {
    width: 100%;
    height: 470px;

    display: block;

    object-fit: cover;

    transition: transform .7s ease;
}

.preparatory-image-holder:hover img {
    transform: scale(1.045);
}


/* CONTENT */

.preparatory-intro-content {
    position: relative;
    z-index: 2;

    margin-left: -55px;

    padding: 55px 55px 55px 75px;

    background: #ffffff;

    box-shadow:
        0 25px 60px rgba(25, 45, 65, .10);
}

.preparatory-label {
    display: inline-block;

    margin-bottom: 16px;

    color: #155087;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.preparatory-intro-content h2,
.preparatory-development-content h2 {
    margin: 0;

    color: #155087;

    font-size: 38px;
    line-height: 1.2;

    font-weight: 700;
}

.preparatory-intro-content h2 span,
.preparatory-development-content h2 span {
    display: block;

    color: #cc1f26;
}

.preparatory-red-line {
    width: 55px;
    height: 3px;

    margin: 22px 0 25px;

    background: #cc1f26;
}

.preparatory-intro-content p,
.preparatory-development-content p {
    margin: 0;

    color: #555;

    font-size: 16px;
    line-height: 1.9;
}


/* DECORATIVE DESIGN */

.preparatory-side-design {
    position: absolute;

    left: 0;
    top: 65px;

    width: 220px;

    opacity: .07;

    pointer-events: none;
}


/* =========================================================
   DARK BLUE LEARNING SECTION
========================================================= */

.preparatory-learning {
    position: relative;

    padding: 105px 0;

    background: #155087;

    overflow: hidden;
}

.preparatory-learning-shape {
    position: absolute;

    width: 500px;
    height: 500px;

    right: -280px;
    top: -250px;

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

    border-radius: 50%;
}

.preparatory-learning-shape::after {
    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    left: 84px;
    top: 84px;

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

    border-radius: 50%;
}

.preparatory-learning-wrap {
    position: relative;
    z-index: 2;

    width: 88%;
    max-width: 1180px;

    margin: auto;

    display: grid;
    grid-template-columns: 48% 52%;

    align-items: center;
}


/* CONTENT */

.preparatory-learning-content {
    padding-right: 65px;
    color:#fff;
}

.preparatory-light-label {
    display: inline-block;
    color:#fff;

    margin-bottom: 15px;

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

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 2.5px;
}

.preparatory-white-line {
    width: 55px;
    height: 3px;

    margin-bottom: 27px;

    background: #cc1f26;
}

.preparatory-learning-content p {
    margin: 0;

    font-size: 16px;
    line-height: 1.9;
}


/* IMAGE */

.preparatory-learning-image {
    padding-left: 10px;
}

.preparatory-blue-image {
    position: relative;

    padding: 12px;

    background: rgba(255,255,255,.13);

    border-radius: 28px;
}

.preparatory-blue-image::before {
    content: "";

    position: absolute;

    left: -12px;
    bottom: -12px;

    width: 80px;
    height: 80px;

    border-left: 4px solid #cc1f26;
    border-bottom: 4px solid #cc1f26;

    border-radius: 0 0 0 15px;
}

.preparatory-blue-image img {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 410px;

    display: block;

    object-fit: cover;

    border-radius: 20px;

    transition: transform .7s ease;
}

.preparatory-blue-image:hover img {
    transform: scale(1.035);
}


/* =========================================================
   DEVELOPMENT
========================================================= */

.preparatory-development {
    position: relative;

    padding: 115px 0;

    background: #f7f8fa;

    overflow: hidden;
}

.preparatory-development-wrap {
    width: 88%;
    max-width: 1180px;

    margin: auto;

    display: grid;
    grid-template-columns: 50% 50%;

    align-items: center;
}


/* IMAGE */

.preparatory-development-image {
    padding-right: 55px;
}

.preparatory-development-frame {
    position: relative;

    padding-right: 18px;
    padding-bottom: 18px;
}

.preparatory-development-frame::before {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;

    width: 72%;
    height: 72%;

    background: #155087;

    border-radius: 0 0 25px 0;
}

.preparatory-development-frame img {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 430px;

    display: block;

    object-fit: cover;

    border-radius: 25px;

    box-shadow:
        0 25px 55px rgba(21, 80, 135, .15);

    transition: transform .6s ease;
}

.preparatory-development-frame:hover img {
    transform: translate(-5px, -5px);
}

.preparatory-image-accent {
    position: absolute;
    z-index: 3;

    left: -12px;
    top: 40px;

    width: 5px;
    height: 75px;

    background: #cc1f26;
}


/* CONTENT */

.preparatory-development-content {
    padding-left: 35px;
}

.preparatory-development-content p {
    max-width: 570px;
}


/* =========================================================
   CLOSING FEATURE
========================================================= */

.preparatory-closing {
    padding: 75px 0;

    background: #ffffff;
}

.preparatory-closing-box {
    width: 88%;
    max-width: 1180px;

    margin: auto;

    padding: 42px 50px;

    display: flex;
    align-items: center;

    gap: 30px;

    background: #155087;

    border-radius: 20px;

    box-shadow:
        0 20px 45px rgba(21, 80, 135, .15);
}

.preparatory-closing-accent {
    flex: 0 0 auto;

    width: 5px;
    height: 80px;

    background: #cc1f26;
}

.preparatory-closing-label {
    display: block;

    margin-bottom: 8px;

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

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2.5px;
}

.preparatory-closing h3 {
    margin: 0;

    color: #ffffff;

    font-size: 29px;
    line-height: 1.3;

    font-weight: 600;
}

.preparatory-closing h3 span {
    color: #ffffff;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes preparatoryBannerIn {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 991px) {

    .preparatory-banner {
        min-height: 410px;
    }

    .preparatory-intro {
        padding: 80px 0;
    }

    .preparatory-intro-wrap {
        width: 92%;

        grid-template-columns: 1fr;
    }

    .preparatory-image-holder img {
        height: 410px;
    }

    .preparatory-intro-content {
        margin: -45px 30px 0;

        padding: 40px;
    }

    .preparatory-learning,
    .preparatory-development {
        padding: 80px 0;
    }

    .preparatory-learning-wrap,
    .preparatory-development-wrap {
        width: 92%;

        grid-template-columns: 1fr;

        gap: 50px;
    }

    .preparatory-learning-content {
        padding-right: 0;
    }

    .preparatory-learning-image {
        padding-left: 0;
    }

    .preparatory-development-image {
        padding-right: 30px;
    }

    .preparatory-development-content {
        padding-left: 0;
    }

    .preparatory-side-design {
        display: none;
    }

    .preparatory-closing-box {
        width: 92%;
    }

}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 767px) {

    .preparatory-banner {
        min-height: 340px;
    }

    .preparatory-banner-content {
        padding: 55px 20px;
    }

    .preparatory-eyebrow {
        font-size: 10px;
        letter-spacing: 2.5px;
    }

    .preparatory-banner h1 {
        font-size: 40px;
    }

    .preparatory-intro {
        padding: 60px 0;
    }

    .preparatory-intro-wrap,
    .preparatory-learning-wrap,
    .preparatory-development-wrap {
        width: 92%;
    }

    .preparatory-image-holder img {
        height: 280px;
    }

    .preparatory-intro-content {
        margin: -30px 12px 0;

        padding: 30px 25px;
    }

    .preparatory-intro-content h2,
    .preparatory-development-content h2 {
        font-size: 29px;
    }

    .preparatory-intro-content p,
    .preparatory-development-content p,
    .preparatory-learning-content p {
        font-size: 15px;
        line-height: 1.75;
    }

    .preparatory-learning,
    .preparatory-development {
        padding: 60px 0;
    }

    .preparatory-blue-image {
        padding: 8px;
    }

    .preparatory-blue-image img {
        height: 280px;
    }

    .preparatory-development-image {
        padding-right: 15px;
    }

    .preparatory-development-frame img {
        height: 280px;
    }

    .preparatory-closing {
        padding: 55px 0;
    }

    .preparatory-closing-box {
        width: 92%;

        padding: 30px 25px;

        gap: 20px;
    }

    .preparatory-closing-accent {
        height: 65px;
    }

    .preparatory-closing h3 {
        font-size: 22px;
    }

}


/* =========================================================
   PREPARATORY CURRICULUM
   PREMIUM REDESIGN
========================================================= */

.preparatory-components {
    position: relative;
    padding: 110px 0 120px;
    background: #f5f7fa;
    overflow: hidden;
}

/* Decorative background */
.preparatory-components::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -220px;
    top: -180px;
    border: 1px solid rgba(21, 80, 135, .10);
    border-radius: 50%;
}

.preparatory-components::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    left: -180px;
    bottom: -160px;
    border: 1px solid rgba(204, 31, 38, .10);
    border-radius: 50%;
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.preparatory-components-inner {
    position: relative;
    z-index: 2;

    width: 88%;
    max-width: 1180px;

    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.preparatory-components-heading {
    position: relative;

    max-width: 900px;
    margin: 0 auto 65px;

    text-align: center;
}

.preparatory-components-heading > span {
    display: inline-block;

    margin-bottom: 14px;

    color: #cc1f26;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 3px;
    text-transform: uppercase;
}

.preparatory-components-heading h2 {
    margin: 0;

    color: #155087;

    font-size: 42px;
    line-height: 1.18;

    font-weight: 800;
    letter-spacing: -.8px;
}

.preparatory-components-heading h2 strong {
    color: #cc1f26;
}

.preparatory-components-line {
    position: relative;

    width: 70px;
    height: 4px;

    margin: 22px auto 0;

    background: #cc1f26;
    border-radius: 50px;
}

.preparatory-components-line::before,
.preparatory-components-line::after {
    content: "";

    position: absolute;
    top: 0;

    width: 7px;
    height: 4px;

    background: #155087;
}

.preparatory-components-line::before {
    left: -13px;
}

.preparatory-components-line::after {
    right: -13px;
}


/* =========================================================
   COMPONENT LIST
========================================================= */

.preparatory-components-list {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 22px;

    margin-bottom: 65px;
}


/* =========================================================
   COMPONENT CARD
========================================================= */

.preparatory-component-item {
    position: relative;

    display: grid;

    grid-template-columns: 62px 1fr;

    gap: 22px;

    min-height: 245px;

    padding: 35px 32px;

    background: #ffffff;

    border: 1px solid #e7ebef;

    border-radius: 18px;

    box-shadow: 0 12px 35px rgba(21, 80, 135, .07);

    overflow: hidden;

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;
}


/* Red side accent */

.preparatory-component-item::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 4px;

    background: #cc1f26;

    transform: scaleY(0);

    transform-origin: bottom;

    transition: transform .4s ease;
}


/* Hover */

.preparatory-component-item:hover {
    transform: translateY(-8px);

    border-color: rgba(21, 80, 135, .25);

    box-shadow: 0 22px 50px rgba(21, 80, 135, .14);
}

.preparatory-component-item:hover::before {
    transform: scaleY(1);
}


/* =========================================================
   NUMBER
========================================================= */

.preparatory-component-number {
    position: relative;

    width: 58px;
    height: 58px;

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

    flex-shrink: 0;

    background: #155087;

    border-radius: 50%;

    color: #ffffff;

    font-size: 14px;
    font-weight: 800;

    letter-spacing: 1px;

    transition: all .4s ease;
}

.preparatory-component-number::after {
    content: "";

    position: absolute;

    inset: -6px;

    border: 1px solid rgba(21, 80, 135, .20);

    border-radius: 50%;

    transition: all .4s ease;
}

.preparatory-component-item:hover .preparatory-component-number {
    background: #cc1f26;

    transform: rotate(8deg);
}

.preparatory-component-item:hover .preparatory-component-number::after {
    border-color: rgba(204, 31, 38, .35);

    transform: scale(1.1);
}


/* =========================================================
   CARD CONTENT
========================================================= */

.preparatory-component-item h4 {
    margin: 2px 0 13px;

    color: #155087;

    font-size: 21px;
    line-height: 1.35;

    font-weight: 750;

    transition: color .3s ease;
}

.preparatory-component-item:hover h4 {
    color: #cc1f26;
}

.preparatory-component-item p {
    margin: 0;

    color: #68747f;

    font-size: 14px;

    line-height: 1.85;

    font-weight: 400;
}


/* =========================================================
   LARGE IMAGE
========================================================= */

.preparatory-components-image {
    position: relative;

    width: 100%;

    padding: 12px;

    background: #ffffff;

    border-radius: 24px;

    box-shadow: 0 20px 55px rgba(21, 80, 135, .13);

    overflow: visible;
}


/* Image red/blue frame */

.preparatory-components-image::before {
    content: "";

    position: absolute;

    left: -12px;
    bottom: -12px;

    width: 110px;
    height: 110px;

    border-left: 5px solid #cc1f26;
    border-bottom: 5px solid #cc1f26;

    border-radius: 0 0 0 20px;

    z-index: 0;
}

.preparatory-components-image::after {
    content: "";

    position: absolute;

    right: -12px;
    top: -12px;

    width: 110px;
    height: 110px;

    border-right: 5px solid #155087;
    border-top: 5px solid #155087;

    border-radius: 0 20px 0 0;

    z-index: 0;
}

.preparatory-components-image img {
    position: relative;
    z-index: 2;

    width: 100% !important;
    height: 430px;

    display: block !important;

    margin: 0 !important;

    object-fit: cover;

    border-radius: 17px;

    transition: transform .7s ease;
}

.preparatory-components-image:hover img {
    transform: scale(1.025);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.preparatory-components-image {
    overflow: hidden;
}

.preparatory-components-image img {
    position: relative;
}

.preparatory-components-image:hover::after {
    opacity: .85;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .preparatory-components {
        padding: 85px 0 100px;
    }

    .preparatory-components-inner {
        width: 92%;
    }

    .preparatory-components-heading {
        margin-bottom: 50px;
    }

    .preparatory-components-heading h2 {
        font-size: 36px;
    }

    .preparatory-components-list {
        gap: 18px;
    }

    .preparatory-component-item {
        grid-template-columns: 52px 1fr;

        gap: 18px;

        padding: 28px 24px;
    }

    .preparatory-component-number {
        width: 50px;
        height: 50px;
    }

    .preparatory-component-item h4 {
        font-size: 19px;
    }

    .preparatory-component-item p {
        font-size: 14px;
        line-height: 1.75;
    }

    .preparatory-components-image img {
        height: 360px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .preparatory-components {
        padding: 65px 0 75px;
    }

    .preparatory-components-inner {
        width: 92%;
    }

    .preparatory-components-heading {
        margin-bottom: 38px;
    }

    .preparatory-components-heading > span {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .preparatory-components-heading h2 {
        font-size: 29px;
        line-height: 1.25;
    }

    .preparatory-components-line {
        margin-top: 17px;
    }

    /* One column */

    .preparatory-components-list {
        grid-template-columns: 1fr;

        gap: 15px;

        margin-bottom: 45px;
    }

    .preparatory-component-item {
        grid-template-columns: 48px 1fr;

        gap: 16px;

        min-height: auto;

        padding: 25px 20px;

        border-radius: 15px;
    }

    .preparatory-component-number {
        width: 44px;
        height: 44px;

        font-size: 12px;
    }

    .preparatory-component-number::after {
        inset: -4px;
    }

    .preparatory-component-item h4 {
        margin-top: 0;

        font-size: 18px;
    }

    .preparatory-component-item p {
        font-size: 13.5px;

        line-height: 1.75;
    }

    .preparatory-components-image {
        padding: 8px;

        border-radius: 16px;
    }

    .preparatory-components-image img {
        height: 270px !important;

        border-radius: 11px;
    }

    .preparatory-components-image::before,
    .preparatory-components-image::after {
        width: 65px;
        height: 65px;

        border-width: 3px;
    }

    .preparatory-components-image::before {
        left: -7px;
        bottom: -7px;
    }

    .preparatory-components-image::after {
        right: -7px;
        top: -7px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .preparatory-components {
        padding: 55px 0 65px;
    }

    .preparatory-components-inner {
        width: 92%;
    }

    .preparatory-components-heading h2 {
        font-size: 25px;
    }

    .preparatory-components-heading > span {
        font-size: 8px;
        letter-spacing: 1.5px;
    }

    .preparatory-component-item {
        grid-template-columns: 42px 1fr;

        gap: 13px;

        padding: 22px 17px;
    }

    .preparatory-component-number {
        width: 39px;
        height: 39px;

        font-size: 11px;
    }

    .preparatory-component-item h4 {
        font-size: 17px;
    }

    .preparatory-component-item p {
        font-size: 13px;
        line-height: 1.7;
    }

    .preparatory-components-image img {
        height: 220px !important;
    }
}



/* =========================================================
   MIDDLE YEARS
   PREMIUM WPS DESIGN
========================================================= */

.middle-years-page {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    color: #222;
}


/* =========================================================
   BANNER
========================================================= */

.middle-years-banner {
    position: relative;
    min-height: 480px;

    display: flex;
    align-items: center;

    background-image: url("../images/middle-years.JPG");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;
}

.middle-years-banner-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7, 40, 70, .94) 0%,
            rgba(21, 80, 135, .82) 50%,
            rgba(21, 80, 135, .35) 100%
        );
}

.middle-years-banner .container {
    position: relative;
    z-index: 2;
}

.middle-years-banner-content {
    max-width: 850px;
    padding: 75px 0;

    animation: middleYearsBannerIn 1s ease both;
}

.middle-years-eyebrow {
    display: block;

    margin-bottom: 18px;

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 4px;
    text-transform: uppercase;
}

.middle-years-banner h1 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(46px, 5.2vw, 74px);
    line-height: 1.05;

    font-weight: 700;
    letter-spacing: -1.5px;
}

.middle-years-banner-line {
    display: block;

    width: 75px;
    height: 4px;

    margin-top: 25px;

    background: #cc1f26;
}


/* =========================================================
   INTRO SECTION
========================================================= */

.middle-years-intro {
    position: relative;

    padding: 110px 0;

    background: #ffffff;
}

.middle-years-intro-grid {
    width: 88%;
    max-width: 1180px;

    margin: auto;

    display: grid;
    grid-template-columns: 53% 47%;

    align-items: center;
}


/* IMAGE */

.middle-years-intro-image {
    position: relative;
    z-index: 1;
}

.middle-years-image-wrap {
    position: relative;

    overflow: hidden;

    border-radius: 0 35px 35px 0;

    box-shadow:
        0 25px 60px rgba(21, 80, 135, .17);
}

.middle-years-image-wrap::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 5px;

    background: #cc1f26;
}

.middle-years-image-wrap img {
    width: 100%;
    height: 475px;

    display: block;

    object-fit: cover;

    transition: transform .7s ease;
}

.middle-years-image-wrap:hover img {
    transform: scale(1.04);
}


/* CONTENT */

.middle-years-intro-content {
    position: relative;
    z-index: 2;

    margin-left: -55px;

    padding: 55px 55px 55px 75px;

    background: #ffffff;

    box-shadow:
        0 25px 60px rgba(25, 45, 65, .10);
}

.middle-years-label {
    display: inline-block;

    margin-bottom: 16px;

    color: #155087;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.middle-years-intro-content h2,
.middle-years-development-content h2 {
    margin: 0;

    color: #155087;

    font-size: 38px;
    line-height: 1.2;

    font-weight: 700;
}

.middle-years-intro-content h2 span,
.middle-years-development-content h2 span {
    display: block;

    color: #cc1f26;
}

.middle-years-red-line {
    width: 55px;
    height: 3px;

    margin: 22px 0 25px;

    background: #cc1f26;
}

.middle-years-intro-content p,
.middle-years-development-content p {
    margin: 0;

    color: #555;

    font-size: 16px;
    line-height: 1.9;
}


/* SIDE DESIGN */

.middle-years-side-design {
    position: absolute;

    left: 0;
    top: 70px;

    width: 220px;

    opacity: .07;

    pointer-events: none;
}


/* =========================================================
   GLOBAL / FUTURE SECTION
========================================================= */

.middle-years-global {
    position: relative;

    padding: 105px 0;

    background: #155087;

    overflow: hidden;
}

.middle-years-global-shape {
    position: absolute;

    width: 520px;
    height: 520px;

    right: -290px;
    top: -270px;

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

    border-radius: 50%;
}

.middle-years-global-shape::after {
    content: "";

    position: absolute;

    width: 340px;
    height: 340px;

    left: 89px;
    top: 89px;

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

    border-radius: 50%;
}

.middle-years-global-grid {
    position: relative;
    z-index: 2;

    width: 88%;
    max-width: 1180px;

    margin: auto;

    display: grid;
    grid-template-columns: 48% 52%;

    align-items: center;
}


/* CONTENT */

.middle-years-global-content {
    padding-right: 65px;
}

.middle-years-light-label {
    display: inline-block;

    margin-bottom: 15px;

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

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.middle-years-white-line {
    width: 55px;
    height: 3px;

    margin-bottom: 27px;

    background: #cc1f26;
}

.middle-years-global-content p {
    margin: 0;

    font-size: 16px;
    line-height: 1.9;
}


/* IMAGE */

.middle-years-global-image {
    padding-left: 10px;
}

.middle-years-blue-frame {
    position: relative;

    padding: 12px;

    background: rgba(255,255,255,.13);

    border-radius: 28px;
}

.middle-years-blue-frame::after {
    content: "";

    position: absolute;

    right: -10px;
    bottom: -10px;

    width: 70px;
    height: 70px;

    border-right: 4px solid #cc1f26;
    border-bottom: 4px solid #cc1f26;

    border-radius: 0 0 15px 0;
}

.middle-years-blue-frame img {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 410px;

    display: block;

    object-fit: cover;

    border-radius: 20px;

    transition: transform .7s ease;
}

.middle-years-blue-frame:hover img {
    transform: scale(1.035);
}


/* =========================================================
   DEVELOPMENT SECTION
========================================================= */

.middle-years-development {
    position: relative;

    padding: 115px 0;

    background: #f7f8fa;

    overflow: hidden;
}

.middle-years-development-grid {
    width: 88%;
    max-width: 1180px;

    margin: auto;

    display: grid;
    grid-template-columns: 50% 50%;

    align-items: center;
}


/* IMAGE */

.middle-years-development-image {
    padding-right: 55px;
}

.middle-years-development-frame {
    position: relative;

    padding-right: 18px;
    padding-bottom: 18px;
}

.middle-years-development-frame::before {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;

    width: 72%;
    height: 72%;

    background: #155087;

    border-radius: 0 0 25px 0;
}

.middle-years-development-frame img {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 430px;

    display: block;

    object-fit: cover;

    border-radius: 25px;

    box-shadow:
        0 25px 55px rgba(21, 80, 135, .15);

    transition: transform .6s ease;
}

.middle-years-development-frame:hover img {
    transform: translate(-5px, -5px);
}

.middle-years-image-accent {
    position: absolute;

    z-index: 3;

    left: -12px;
    top: 40px;

    width: 5px;
    height: 75px;

    background: #cc1f26;
}


/* CONTENT */

.middle-years-development-content {
    padding-left: 35px;
}

.middle-years-development-content p {
    max-width: 570px;
}


/* =========================================================
   CLOSING STRIP
========================================================= */

.middle-years-closing {
    padding: 75px 0;

    background: #ffffff;
}

.middle-years-closing-inner {
    width: 88%;
    max-width: 1180px;

    margin: auto;

    padding: 42px 50px;

    display: flex;
    align-items: center;

    gap: 30px;

    background: #155087;

    border-radius: 20px;

    box-shadow:
        0 20px 45px rgba(21, 80, 135, .15);
}

.middle-years-closing-line {
    flex: 0 0 auto;

    width: 5px;
    height: 75px;

    background: #cc1f26;
}

.middle-years-closing-label {
    display: block;

    margin-bottom: 8px;

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

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2.5px;
}

.middle-years-closing h3 {
    margin: 0;

    color: #ffffff;

    font-size: 29px;
    line-height: 1.3;

    font-weight: 600;
}

.middle-years-closing h3 span {
    color: #ffffff;
}


/* =========================================================
   BANNER ANIMATION
========================================================= */

@keyframes middleYearsBannerIn {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .middle-years-banner {
        min-height: 410px;
    }

    .middle-years-intro {
        padding: 80px 0;
    }

    .middle-years-intro-grid {
        width: 92%;

        grid-template-columns: 1fr;
    }

    .middle-years-image-wrap img {
        height: 410px;
    }

    .middle-years-intro-content {
        margin: -45px 30px 0;

        padding: 40px;
    }

    .middle-years-global,
    .middle-years-development {
        padding: 80px 0;
    }

    .middle-years-global-grid,
    .middle-years-development-grid {
        width: 92%;

        grid-template-columns: 1fr;

        gap: 50px;
    }

    .middle-years-global-content {
        padding-right: 0;
    }

    .middle-years-global-image {
        padding-left: 0;
    }

    .middle-years-development-image {
        padding-right: 30px;
    }

    .middle-years-development-content {
        padding-left: 0;
    }

    .middle-years-side-design {
        display: none;
    }

    .middle-years-closing-inner {
        width: 92%;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .middle-years-banner {
        min-height: 340px;
    }

    .middle-years-banner-content {
        padding: 55px 20px;
    }

    .middle-years-eyebrow {
        font-size: 10px;
        letter-spacing: 2.5px;
    }

    .middle-years-banner h1 {
        font-size: 40px;
    }

    .middle-years-intro {
        padding: 60px 0;
    }

    .middle-years-intro-grid,
    .middle-years-global-grid,
    .middle-years-development-grid {
        width: 92%;
    }

    .middle-years-image-wrap img {
        height: 280px;
    }

    .middle-years-intro-content {
        margin: -30px 12px 0;

        padding: 30px 25px;
    }

    .middle-years-intro-content h2,
    .middle-years-development-content h2 {
        font-size: 29px;
    }

    .middle-years-intro-content p,
    .middle-years-development-content p,
    .middle-years-global-content p {
        font-size: 15px;
        line-height: 1.75;
    }

    .middle-years-global,
    .middle-years-development {
        padding: 60px 0;
    }

    .middle-years-blue-frame {
        padding: 8px;
    }

    .middle-years-blue-frame img {
        height: 280px;
    }

    .middle-years-development-image {
        padding-right: 15px;
    }

    .middle-years-development-frame img {
        height: 280px;
    }

    .middle-years-closing {
        padding: 55px 0;
    }

    .middle-years-closing-inner {
        width: 92%;

        padding: 30px 25px;

        gap: 20px;
    }

    .middle-years-closing-line {
        height: 65px;
    }

    .middle-years-closing h3 {
        font-size: 22px;
    }

}




/* =========================================================
   SECONDARY & SENIOR SECONDARY
   PREMIUM WPS DESIGN
========================================================= */

.secondary-page {
    position: relative;
    overflow: hidden;

    background: #ffffff;
    color: #222;
}


/* =========================================================
   BANNER
========================================================= */

.secondary-banner {
    position: relative;

    min-height: 500px;

    display: flex;
    align-items: center;

    background-image: url("../images/Secondary.JPG");
    background-size: cover;
    background-position: center 20%;
    background-repeat: no-repeat;

    overflow: hidden;
}

.secondary-banner-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(6, 38, 68, .95) 0%,
            rgba(21, 80, 135, .84) 50%,
            rgba(21, 80, 135, .32) 100%
        );
}

.secondary-banner .container {
    position: relative;
    z-index: 2;
}

.secondary-banner-content {
    max-width: 900px;

    padding: 75px 0;

    animation: secondaryBannerIn 1s ease both;
}

.secondary-eyebrow {
    display: block;

    margin-bottom: 18px;

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

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 4px;
    text-transform: uppercase;
}

.secondary-banner h1 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(43px, 5.2vw, 72px);
    line-height: 1.06;

    font-weight: 700;

    letter-spacing: -1.5px;
}

.secondary-banner h1 span {
    display: block;
}

.secondary-banner-line {
    width: 80px;
    height: 4px;

    margin-top: 27px;

    background: #cc1f26;
}


/* =========================================================
   INTRODUCTION
========================================================= */

.secondary-intro {
    position: relative;

    padding: 115px 0;

    background: #ffffff;
}

.secondary-intro-layout {
    width: 88%;
    max-width: 1180px;

    margin: auto;

    display: grid;

    grid-template-columns: 54% 46%;

    align-items: center;
}


/* IMAGE */

.secondary-intro-image {
    position: relative;
    z-index: 1;
}

.secondary-image-frame {
    position: relative;

    overflow: hidden;

    border-radius: 0 35px 35px 0;

    box-shadow:
        0 25px 65px rgba(21,80,135,.18);
}

.secondary-image-frame::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 5px;

    background: #cc1f26;
}

.secondary-image-frame img {
    width: 100%;
    height: 490px;

    display: block;

    object-fit: cover;

    transition: transform .7s ease;
}

.secondary-image-frame:hover img {
    transform: scale(1.045);
}


/* CONTENT */

.secondary-intro-content {
    position: relative;
    z-index: 2;

    margin-left: -60px;

    padding: 60px 55px 60px 75px;

    background: #ffffff;

    box-shadow:
        0 25px 65px rgba(20,45,70,.11);
}

.secondary-label {
    display: inline-block;

    margin-bottom: 16px;

    color: #155087;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}

.secondary-intro-content h2,
.secondary-development-content h2 {
    margin: 0;

    color: #155087;

    font-size: 39px;
    line-height: 1.2;

    font-weight: 700;
}

.secondary-intro-content h2 span,
.secondary-development-content h2 span {
    display: block;

    color: #cc1f26;
}

.secondary-red-line {
    width: 58px;
    height: 3px;

    margin: 23px 0 26px;

    background: #cc1f26;
}

.secondary-intro-content p,
.secondary-development-content p {
    margin: 0;

    color: #555;

    font-size: 16px;
    line-height: 1.9;
}


/* DECORATION */

.secondary-side-design {
    position: absolute;

    left: 0;
    top: 65px;

    width: 220px;

    opacity: .065;

    pointer-events: none;
}


/* =========================================================
   ACADEMIC SECTION
========================================================= */

.secondary-academic {
    position: relative;

    padding: 110px 0;

    background: #155087;

    overflow: hidden;
}

.secondary-academic-decoration {
    position: absolute;

    width: 520px;
    height: 520px;

    right: -300px;
    top: -275px;

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

    border-radius: 50%;
}

.secondary-academic-decoration::before {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    left: 84px;
    top: 84px;

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

    border-radius: 50%;
}

.secondary-academic-layout {
    position: relative;
    z-index: 2;

    width: 88%;
    max-width: 1180px;

    margin: auto;

    display: grid;

    grid-template-columns: 48% 52%;

    align-items: center;
}


/* CONTENT */

.secondary-academic-content {
    padding-right: 65px;
}

.secondary-light-label {
    display: inline-block;

    margin-bottom: 16px;

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

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}

.secondary-white-line {
    width: 58px;
    height: 3px;

    margin-bottom: 28px;

    background: #cc1f26;
}

.secondary-academic-content p {
    margin: 0;

    font-size: 16px;
    line-height: 1.9;
}


/* IMAGE */

.secondary-academic-image {
    padding-left: 10px;
}

.secondary-academic-image-wrap {
    position: relative;

    padding: 12px;

    background: rgba(255,255,255,.13);

    border-radius: 28px;
}

.secondary-academic-image-wrap::after {
    content: "";

    position: absolute;

    right: -10px;
    bottom: -10px;

    width: 75px;
    height: 75px;

    border-right: 4px solid #cc1f26;
    border-bottom: 4px solid #cc1f26;

    border-radius: 0 0 15px 0;
}

.secondary-academic-image-wrap img {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 420px;

    display: block;

    object-fit: cover;

    border-radius: 20px;

    transition: transform .7s ease;
}

.secondary-academic-image-wrap:hover img {
    transform: scale(1.035);
}


/* =========================================================
   DEVELOPMENT
========================================================= */

.secondary-development {
    position: relative;

    padding: 120px 0;

    background: #f6f8fa;

    overflow: hidden;
}

.secondary-development-layout {
    width: 88%;
    max-width: 1180px;

    margin: auto;

    display: grid;

    grid-template-columns: 50% 50%;

    align-items: center;
}


/* IMAGE */

.secondary-development-image {
    padding-right: 60px;
}

.secondary-development-frame {
    position: relative;

    padding-right: 18px;
    padding-bottom: 18px;
}

.secondary-development-frame::before {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;

    width: 72%;
    height: 72%;

    background: #155087;

    border-radius: 0 0 25px 0;
}

.secondary-development-frame img {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 440px;

    display: block;

    object-fit: cover;

    border-radius: 25px;

    box-shadow:
        0 25px 55px rgba(21,80,135,.15);

    transition:
        transform .6s ease,
        box-shadow .6s ease;
}

.secondary-development-frame:hover img {
    transform: translate(-5px,-5px);

    box-shadow:
        0 30px 65px rgba(21,80,135,.20);
}

.secondary-image-accent {
    position: absolute;
    z-index: 3;

    left: -12px;
    top: 45px;

    width: 5px;
    height: 80px;

    background: #cc1f26;
}


/* CONTENT */

.secondary-development-content {
    padding-left: 35px;
}

.secondary-development-content p {
    max-width: 590px;
}


/* =========================================================
   CLOSING FEATURE
========================================================= */

.secondary-closing {
    padding: 80px 0;

    background: #ffffff;
}

.secondary-closing-box {
    width: 88%;
    max-width: 1180px;

    margin: auto;

    padding: 45px 55px;

    display: flex;

    align-items: center;

    gap: 30px;

    background: #155087;

    border-radius: 20px;

    box-shadow:
        0 20px 50px rgba(21,80,135,.15);
}

.secondary-closing-line {
    width: 5px;
    height: 75px;

    flex: 0 0 auto;

    background: #cc1f26;
}

.secondary-closing-content span {
    display: block;

    margin-bottom: 8px;

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

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2.5px;
}

.secondary-closing-content h3 {
    margin: 0;

    color: #ffffff;

    font-size: 30px;
    line-height: 1.3;

    font-weight: 500;
}

.secondary-closing-content strong {
    font-weight: 700;
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes secondaryBannerIn {

    from {
        opacity: 0;

        transform: translateY(35px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .secondary-banner {
        min-height: 420px;
    }

    .secondary-intro {
        padding: 85px 0;
    }

    .secondary-intro-layout {
        width: 92%;

        grid-template-columns: 1fr;
    }

    .secondary-image-frame img {
        height: 420px;
    }

    .secondary-intro-content {
        margin: -45px 30px 0;

        padding: 42px;
    }

    .secondary-academic,
    .secondary-development {
        padding: 85px 0;
    }

    .secondary-academic-layout,
    .secondary-development-layout {
        width: 92%;

        grid-template-columns: 1fr;

        gap: 50px;
    }

    .secondary-academic-content {
        padding-right: 0;
    }

    .secondary-academic-image {
        padding-left: 0;
    }

    .secondary-development-image {
        padding-right: 30px;
    }

    .secondary-development-content {
        padding-left: 0;
    }

    .secondary-side-design {
        display: none;
    }

    .secondary-closing-box {
        width: 92%;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .secondary-banner {
        min-height: 350px;
    }

    .secondary-banner-content {
        padding: 55px 20px;
    }

    .secondary-eyebrow {
        font-size: 10px;

        letter-spacing: 2.5px;
    }

    .secondary-banner h1 {
        font-size: 39px;
    }

    .secondary-intro {
        padding: 60px 0;
    }

    .secondary-intro-layout,
    .secondary-academic-layout,
    .secondary-development-layout {
        width: 92%;
    }

    .secondary-image-frame img {
        height: 280px;
    }

    .secondary-intro-content {
        margin: -30px 12px 0;

        padding: 30px 25px;
    }

    .secondary-intro-content h2,
    .secondary-development-content h2 {
        font-size: 29px;
    }

    .secondary-intro-content p,
    .secondary-development-content p,
    .secondary-academic-content p {
        font-size: 15px;

        line-height: 1.75;
    }

    .secondary-academic,
    .secondary-development {
        padding: 60px 0;
    }

    .secondary-academic-image-wrap {
        padding: 8px;
    }

    .secondary-academic-image-wrap img {
        height: 280px;
    }

    .secondary-development-image {
        padding-right: 15px;
    }

    .secondary-development-frame img {
        height: 280px;
    }

    .secondary-closing {
        padding: 55px 0;
    }

    .secondary-closing-box {
        width: 92%;

        padding: 30px 25px;

        gap: 20px;
    }

    .secondary-closing-line {
        height: 60px;
    }

    .secondary-closing-content h3 {
        font-size: 22px;
    }

}



/* =========================================================
   HEALTH & HYGIENE
   PREMIUM PAGE DESIGN
========================================================= */


/* =========================================================
   COMMON
========================================================= */

.hh-premium-banner,
.hh-premium-intro,
.hh-premium-feature {
    position: relative;
    overflow: hidden;
}

.hh-premium-intro *,
.hh-premium-feature * {
    box-sizing: border-box;
}


/* =========================================================
   INNER BANNER
========================================================= */

.hh-premium-banner {
    position: relative;

    background:
        linear-gradient(
            110deg,
            #155087 0%,
            #155087 65%,
            #0e426e 100%
        );

    overflow: hidden;
}


/* decorative shape */

.hh-premium-banner::before {
    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    right: -170px;
    top: -220px;

    border-radius: 50%;

    border: 70px solid rgba(255,255,255,.05);
}

.hh-premium-banner::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    left: -140px;
    bottom: -160px;

    border-radius: 50%;

    background: rgba(204,31,38,.18);
}


/* banner text */

.hh-banner-subtitle {
    position: relative;
    z-index: 2;

    display: block;

    margin-bottom: 10px;

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

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 3px;
}

.hh-premium-banner .inner-title {
    position: relative;
    z-index: 2;

    color: #ffffff !important;
}

.hh-banner-line {
    width: 48px;
    height: 3px;

    margin: 18px auto 0;

    background: #cc1f26;
}


/* =========================================================
   COMMON
========================================================= */

.hh-health-intro,
.hh-screening-section {
    position: relative;
    overflow: hidden;
}

.hh-health-row,
.hh-screening-row,
.hh-medical-row,
.hh-hygiene-row {
    display: flex;
    align-items: center;
}

.hh-health-content,
.hh-screening-content,
.hh-medical-content,
.hh-hygiene-content {
    position: relative;
}


/* =========================================================
   HEALTH & WELL-BEING INTRO
========================================================= */

.hh-health-intro {
    padding-top: 95px;
    padding-bottom: 95px;
    background: #fff;
}

.hh-health-row {
    gap: 75px;
}

.hh-health-image {
    width: 48%;
}

.hh-health-image-wrap {
    position: relative;
    max-width: 570px;
    margin: 0 auto;
}

.hh-health-image-wrap::before {
    content: "";
    position: absolute;
    width: 85px;
    height: 85px;
    left: -25px;
    top: -25px;
    border: 14px solid rgba(204, 31, 38, 0.15);
    border-radius: 50%;
}

.hh-health-image-wrap::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    right: -35px;
    bottom: -35px;
    background: rgba(21, 80, 135, 0.08);
    border-radius: 50%;
}

.hh-health-image-wrap img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 500px;
    display: block;
    object-fit: cover;
    border-radius: 25px;
    box-shadow: 0 25px 60px rgba(21, 80, 135, 0.15);
}

.hh-health-image-label {
    position: absolute;
    z-index: 5;
    left: -25px;
    bottom: 30px;
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 235px;
    padding: 16px 20px;
    background: #fff;
    border-left: 4px solid #cc1f26;
    box-shadow: 0 15px 40px rgba(21, 80, 135, 0.15);
}

.hh-health-label-icon {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #155087;
    color: #fff;
    font-size: 18px;
}

.hh-health-image-label small {
    display: block;
    margin-bottom: 3px;
    color: #89929a;
    font-size: 10px;
    font-weight: 600;
}

.hh-health-image-label strong {
    display: block;
    color: #155087;
    font-size: 14px;
    font-weight: 800;
}

.hh-health-content {
    width: 52%;
    padding-left: 15px;
}

.hh-health-tag,
.hh-medical-tag,
.hh-screening-tag,
.hh-hygiene-tag {
    display: inline-block;
    margin-bottom: 15px;
    color: #cc1f26;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.hh-health-content h2,
.hh-screening-content h2,
.hh-medical-content h2,
.hh-hygiene-content h2 {
    margin: 0;
    color: #155087;
    font-size: 43px;
    line-height: 1.15;
    font-weight: 800;
}

.hh-health-content h2 span,
.hh-screening-content h2 span,
.hh-medical-content h2 span,
.hh-hygiene-content h2 span {
    display: block;
    color: #cc1f26;
}

.hh-health-line,
.hh-medical-line,
.hh-screening-line,
.hh-hygiene-line {
    width: 65px;
    height: 3px;
    margin: 22px 0 25px;
    background: #cc1f26;
    border-radius: 50px;
}

.hh-health-content > p {
    max-width: 650px;
    margin-bottom: 30px;
    color: #626c75;
    font-size: 15px;
    line-height: 1.9;
}


/* =========================================================
   HEALTH HIGHLIGHTS
========================================================= */

.hh-health-highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.hh-health-highlight {
    min-height: 125px;
    padding: 17px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #f5f7f9;
    border: 1px solid #e9edf0;
    border-radius: 12px;
    transition: all 0.35s ease;
}

.hh-health-highlight:hover {
    background: #155087;
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(21, 80, 135, 0.15);
}

.hh-health-highlight-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(21, 80, 135, 0.09);
    color: #155087;
    font-size: 16px;
    transition: all 0.35s ease;
}

.hh-health-highlight span {
    color: #155087;
    font-size: 11px;
    font-weight: 700;
    transition: color 0.35s ease;
}

.hh-health-highlight:hover .hh-health-highlight-icon {
    background: #cc1f26;
    color: #fff;
}

.hh-health-highlight:hover span {
    color: #fff;
}


/* =========================================================
   CAMPUS INFIRMARY
========================================================= */

.hh-medical-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    background: #155087;
}

.hh-medical-section::before {
    content: "";
    position: absolute;
    width: 550px;
    height: 550px;
    right: -260px;
    top: -300px;
    border: 80px solid rgba(255, 255, 255, 0.045);
    border-radius: 50%;
}

.hh-medical-section::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    left: -120px;
    bottom: -130px;
    border: 35px solid rgba(204, 31, 38, 0.35);
    border-radius: 50%;
}

.hh-medical-row {
    position: relative;
    z-index: 2;
    gap: 75px;
}

.hh-medical-content {
    width: 55%;
}

.hh-medical-tag {
    color: #fff;
}

.hh-medical-content h2 {
    color: #fff;
}

.hh-medical-content h2 span {
    color: #fff;
}

.hh-medical-line {
    background: #cc1f26;
}

.hh-medical-content > p {
    max-width: 690px;
    margin-bottom: 35px;
    color: rgba(255,255,255,0.85);
    font-size: 15px;
    line-height: 1.9;
}


/* =========================================================
   MEDICAL EQUIPMENT
========================================================= */

.hh-medical-equipment {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.hh-medical-card {
    min-height: 120px;
    padding: 18px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.07);
    border-radius: 12px;
    transition: all 0.35s ease;
}

.hh-medical-card:hover {
    background: #fff;
    transform: translateY(-5px);
}

.hh-medical-icon {
    width: 43px;
    height: 43px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #cc1f26;
    color: #fff;
    font-size: 16px;
    transition: all 0.35s ease;
}

.hh-medical-card span {
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    transition: color 0.35s ease;
}

.hh-medical-card:hover .hh-medical-icon {
    background: #155087;
}

.hh-medical-card:hover span {
    color: #155087;
}


/* =========================================================
   MEDICAL IMAGE
========================================================= */

.hh-medical-image {
    width: 45%;
}

.hh-medical-image-wrap {
    position: relative;
    max-width: 530px;
    margin-left: auto;
}

.hh-medical-image-wrap::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 18px;
    left: -18px;
    border: 2px solid rgba(255,255,255,0.25);
    border-radius: 25px;
}

.hh-medical-image-wrap img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 510px;
    display: block;
    object-fit: cover;
    border-radius: 25px;
}

.hh-medical-floating-icon {
    position: absolute;
    z-index: 4;
    left: -25px;
    bottom: 30px;
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #cc1f26;
    border: 6px solid #155087;
    border-radius: 50%;
    color: #fff;
    font-size: 23px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
}


/* =========================================================
   PREVENTIVE HEALTHCARE
========================================================= */

.hh-screening-section {
    padding-top: 100px;
    padding-bottom: 100px;
    background: #fff;
}

.hh-screening-row {
    gap: 75px;
}

.hh-screening-image {
    width: 48%;
}

.hh-screening-image-wrap {
    position: relative;
    max-width: 570px;
    margin: auto;
}

.hh-screening-image-wrap img {
    width: 100%;
    height: 500px;
    display: block;
    object-fit: cover;
    border-radius: 25px;
    box-shadow: 0 25px 60px rgba(21, 80, 135, 0.14);
}

.hh-screening-image-wrap::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: 90px;
    height: 90px;
    left: -25px;
    bottom: -25px;
    border: 14px solid rgba(204, 31, 38, 0.13);
    border-radius: 50%;
}

.hh-screening-image-label {
    position: absolute;
    z-index: 4;
    right: -25px;
    bottom: 30px;
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 20px;
    background: #fff;
    border-right: 4px solid #155087;
    box-shadow: 0 15px 40px rgba(21, 80, 135, 0.14);
}

.hh-screening-label-icon {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #155087;
    color: #fff;
    font-size: 17px;
}

.hh-screening-image-label small {
    display: block;
    color: #89929a;
    font-size: 10px;
}

.hh-screening-image-label strong {
    display: block;
    margin-top: 3px;
    color: #155087;
    font-size: 13px;
}

.hh-screening-content {
    width: 52%;
}

.hh-screening-content > p {
    max-width: 650px;
    margin-bottom: 30px;
    color: #626c75;
    font-size: 15px;
    line-height: 1.9;
}


/* =========================================================
   SCREENING CARDS
========================================================= */

.hh-screening-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hh-screening-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px 18px;
    background: #f6f8fa;
    border: 1px solid #e7ebee;
    border-radius: 12px;
    transition: all 0.35s ease;
}

.hh-screening-card:hover {
    transform: translateX(7px);
    background: #155087;
    border-color: #155087;
}

.hh-screening-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    color: #cc1f26;
    font-size: 18px;
    box-shadow: 0 5px 15px rgba(21, 80, 135, 0.08);
}

.hh-screening-card strong {
    display: block;
    margin-bottom: 3px;
    color: #155087;
    font-size: 14px;
    font-weight: 800;
    transition: color 0.35s ease;
}

.hh-screening-card span {
    display: block;
    color: #7a838b;
    font-size: 11px;
    transition: color 0.35s ease;
}

.hh-screening-card:hover strong,
.hh-screening-card:hover span {
    color: #fff;
}


/* =========================================================
   HYGIENE AWARENESS
========================================================= */

.hh-hygiene-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    background: #155087;
}

.hh-hygiene-section::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    right: -250px;
    bottom: -270px;
    border: 70px solid rgba(255,255,255,0.045);
    border-radius: 50%;
}

.hh-hygiene-row {
    position: relative;
    z-index: 2;
    gap: 75px;
}

.hh-hygiene-image {
    width: 48%;
}

.hh-hygiene-image-wrap {
    position: relative;
    max-width: 570px;
}

.hh-hygiene-image-wrap img {
    width: 100%;
    height: 480px;
    display: block;
    object-fit: cover;
    border-radius: 25px;
    border: 1px solid rgba(255,255,255,0.2);
}

.hh-hygiene-floating-icon {
    position: absolute;
    z-index: 4;
    right: -25px;
    bottom: 30px;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #cc1f26;
    border: 6px solid #155087;
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
}

.hh-hygiene-content {
    width: 52%;
}

.hh-hygiene-tag {
    color: #fff;
}

.hh-hygiene-content h2 {
    color: #fff;
}

.hh-hygiene-content h2 span {
    color: #fff;
}

.hh-hygiene-line {
    background: #cc1f26;
}

.hh-hygiene-content > p {
    max-width: 650px;
    margin-bottom: 30px;
    color: rgba(255,255,255,0.86);
    font-size: 15px;
    line-height: 1.9;
}


/* =========================================================
   HYGIENE POINTS
========================================================= */

.hh-hygiene-points {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hh-hygiene-point {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 15px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50px;
    background: rgba(255,255,255,0.06);
    transition: all 0.35s ease;
}

.hh-hygiene-point:hover {
    background: #fff;
    transform: translateY(-4px);
}

.hh-hygiene-point-icon {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #cc1f26;
    color: #fff;
    font-size: 10px;
}

.hh-hygiene-point span {
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    transition: color 0.35s ease;
}

.hh-hygiene-point:hover span {
    color: #155087;
}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1199px) {

    .hh-health-row,
    .hh-medical-row,
    .hh-screening-row,
    .hh-hygiene-row {
        gap: 45px;
    }

    .hh-health-content h2,
    .hh-screening-content h2,
    .hh-medical-content h2,
    .hh-hygiene-content h2 {
        font-size: 38px;
    }

    .hh-health-image-wrap img,
    .hh-screening-image-wrap img {
        height: 450px;
    }

    .hh-medical-image-wrap img {
        height: 450px;
    }

    .hh-hygiene-image-wrap img {
        height: 430px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .hh-health-intro,
    .hh-screening-section {
        padding-top: 75px;
        padding-bottom: 75px;
    }

    .hh-health-row,
    .hh-medical-row,
    .hh-screening-row,
    .hh-hygiene-row {
        display: block;
    }

    .hh-health-image,
    .hh-health-content,
    .hh-medical-content,
    .hh-medical-image,
    .hh-screening-image,
    .hh-screening-content,
    .hh-hygiene-image,
    .hh-hygiene-content {
        width: 100%;
    }

    .hh-health-image,
    .hh-screening-image,
    .hh-hygiene-image {
        margin-bottom: 55px;
    }

    .hh-health-image-wrap,
    .hh-screening-image-wrap,
    .hh-hygiene-image-wrap {
        max-width: 650px;
        margin-left: auto;
        margin-right: auto;
    }

    .hh-medical-section,
    .hh-hygiene-section {
        padding: 80px 0;
    }

    .hh-medical-content,
    .hh-hygiene-content {
        margin-bottom: 55px;
    }

    .hh-medical-image-wrap {
        max-width: 650px;
        margin: auto;
    }

    .hh-medical-image-wrap img {
        height: 480px;
    }

    .hh-medical-floating-icon {
        left: 10px;
    }

    .hh-hygiene-floating-icon {
        right: 10px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .hh-premium-banner .inner-title {
        font-size: 32px;
    }

    .hh-banner-subtitle {
        font-size: 11px;
        letter-spacing: 2px;
    }

    .hh-banner-line {
        margin-top: 14px;
    }

    .hh-health-intro,
    .hh-screening-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .hh-health-image,
    .hh-screening-image,
    .hh-hygiene-image {
        margin-bottom: 45px;
    }

    .hh-health-image-wrap img,
    .hh-screening-image-wrap img,
    .hh-medical-image-wrap img,
    .hh-hygiene-image-wrap img {
        height: 360px;
        border-radius: 18px;
    }

    .hh-health-image-label {
        left: 10px;
        bottom: 20px;
        min-width: 205px;
        padding: 12px 14px;
    }

    .hh-health-label-icon,
    .hh-screening-label-icon {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }

    .hh-screening-image-label {
        right: 10px;
        bottom: 20px;
        min-width: 195px;
        padding: 12px 14px;
    }

    .hh-health-content h2,
    .hh-screening-content h2,
    .hh-medical-content h2,
    .hh-hygiene-content h2 {
        font-size: 32px;
    }

    .hh-health-content > p,
    .hh-screening-content > p,
    .hh-medical-content > p,
    .hh-hygiene-content > p {
        font-size: 14px;
        line-height: 1.8;
    }

    .hh-health-highlights {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .hh-health-highlight {
        min-height: 75px;
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        gap: 13px;
        padding: 12px 15px;
    }

    .hh-health-highlight-icon {
        margin-bottom: 0;
    }

    .hh-medical-section,
    .hh-hygiene-section {
        padding: 65px 15px;
    }

    .hh-medical-equipment {
        grid-template-columns: repeat(2, 1fr);
    }

    .hh-medical-card {
        min-height: 105px;
    }

    .hh-medical-image-wrap::before {
        top: 10px;
        left: -10px;
    }

    .hh-medical-floating-icon,
    .hh-hygiene-floating-icon {
        width: 55px;
        height: 55px;
        font-size: 18px;
        border-width: 4px;
    }

    .hh-screening-cards {
        gap: 10px;
    }

    .hh-screening-card {
        padding: 12px;
    }

    .hh-hygiene-points {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hh-hygiene-point {
        justify-content: flex-start;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .hh-premium-banner .inner-title {
        font-size: 27px;
    }

    .hh-banner-subtitle {
        font-size: 10px;
        letter-spacing: 1.5px;
    }

    .hh-health-content h2,
    .hh-screening-content h2,
    .hh-medical-content h2,
    .hh-hygiene-content h2 {
        font-size: 28px;
    }

    .hh-health-tag,
    .hh-medical-tag,
    .hh-screening-tag,
    .hh-hygiene-tag {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .hh-health-image-wrap img,
    .hh-screening-image-wrap img,
    .hh-medical-image-wrap img,
    .hh-hygiene-image-wrap img {
        height: 310px;
    }

    .hh-health-image-label,
    .hh-screening-image-label {
        min-width: 185px;
    }

    .hh-health-image-label strong,
    .hh-screening-image-label strong {
        font-size: 12px;
    }

    .hh-medical-equipment {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .hh-medical-card {
        min-height: 95px;
        padding: 12px 7px;
    }

    .hh-medical-icon {
        width: 37px;
        height: 37px;
        font-size: 14px;
    }

    .hh-medical-card span {
        font-size: 10px;
    }

    .hh-screening-card strong {
        font-size: 12px;
    }

    .hh-screening-card span {
        font-size: 10px;
    }

}

/* =========================================================
   HEALTH & HYGIENE BANNER - PADDING
========================================================= */

.hh-premium-banner {
    padding: 70px 0 65px !important;
    min-height: 250px;
    display: flex;
    align-items: center;
}

.hh-premium-banner .container {
    width: 100%;
}

.hh-premium-banner .inner-box {
    padding: 0 !important;
}

.hh-banner-subtitle {
    margin-bottom: 14px !important;
}

.hh-premium-banner .inner-title {
    margin: 0 !important;
    line-height: 1.15 !important;
}

.hh-banner-line {
    margin: 18px auto 0 !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .hh-premium-banner {
        padding: 60px 0 55px !important;
        min-height: 220px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .hh-premium-banner {
        padding: 50px 0 45px !important;
        min-height: 190px;
    }

    .hh-premium-banner .inner-title {
        font-size: 36px !important;
    }

}





/* =========================================================
   CAFETERIA PAGE
   HEALTH & HYGIENE STYLE
========================================================= */


/* =========================================================
   COMMON
========================================================= */

.cafeteria-intro-premium,
.cafeteria-learning-premium {
    position: relative;
    overflow: hidden;
}


/* =========================================================
   MAIN ROW
========================================================= */

.cafeteria-health-row {
    width: 85%;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 75px;
}

.cafeteria-health-row.reverse {
    grid-template-columns: 1fr 1fr;
}


/* =========================================================
   MAIN IMAGE
========================================================= */

.cafeteria-health-image {
    position: relative;
}

.cafeteria-main-image {
    position: relative;

    padding: 15px;

    z-index: 1;
}

.cafeteria-main-image::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -20px;
    left: -20px;

    border-radius: 50%;

    background: rgba(21, 80, 135, .08);

    z-index: -1;
}

.cafeteria-main-image::after {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    right: -15px;
    bottom: -15px;

    border-radius: 50%;

    border: 25px solid rgba(204, 31, 38, .10);

    z-index: -1;
}

.cafeteria-main-image img {
    width: 100%;
    height: 450px;

    object-fit: cover;

    border-radius: 30px;

    display: block;

    box-shadow:
        0 20px 50px rgba(21, 80, 135, .15);

    transition: all .5s ease;
}

.cafeteria-main-image:hover img {
    transform: scale(1.02);

    box-shadow:
        0 25px 60px rgba(21, 80, 135, .22);
}


/* =========================================================
   IMAGE FLOATING LABEL
========================================================= */

.cafeteria-image-label {
    position: absolute;

    left: 0;
    bottom: 40px;

    display: flex;
    align-items: center;

    gap: 13px;

    background: #fff;

    padding: 13px 20px;

    border-radius: 12px;

    box-shadow:
        0 12px 35px rgba(0,0,0,.14);

    z-index: 5;
}

.cafeteria-image-label > i {
    width: 42px;
    height: 42px;

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

    border-radius: 50%;

    background: #155087;

    color: #fff;

    font-size: 18px;
}

.cafeteria-image-label.red > i {
    background: #cc1f26;
}

.cafeteria-image-label div {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.cafeteria-image-label small {
    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1px;

    color: #777;
}

.cafeteria-image-label strong {
    font-size: 14px;

    color: #155087;
}


/* =========================================================
   CONTENT
========================================================= */

.cafeteria-health-content {
    position: relative;
}

.cafeteria-section-tag {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #cc1f26;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 15px;
}

.cafeteria-section-tag::before {
    content: "";

    width: 28px;
    height: 2px;

    background: #cc1f26;
}


.cafeteria-health-content h2 {
    color: #155087;

    font-size: 42px;

    line-height: 1.15;

    font-weight: 700;

    margin: 0 0 18px;
}

.cafeteria-health-content h2 span {
    display: block;

    color: #cc1f26;
}


.cafeteria-section-line {
    width: 65px;
    height: 4px;

    background: #cc1f26;

    border-radius: 10px;

    margin-bottom: 25px;
}


.cafeteria-health-content p {
    color: #555;

    font-size: 15px;

    line-height: 1.85;

    margin-bottom: 30px;
}


/* =========================================================
   MINI POINTS
========================================================= */

.cafeteria-mini-points {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}

.cafeteria-mini-point {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 14px;

    background: #fff;

    border: 1px solid rgba(21,80,135,.10);

    border-radius: 12px;

    box-shadow:
        0 7px 22px rgba(21,80,135,.06);

    transition: all .35s ease;
}

.cafeteria-mini-point:hover {
    transform: translateY(-5px);

    border-color: rgba(204,31,38,.25);

    box-shadow:
        0 14px 30px rgba(21,80,135,.12);
}

.cafeteria-mini-icon {
    width: 38px;
    height: 38px;

    display: flex;

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

    border-radius: 50%;

    background: rgba(21,80,135,.08);

    color: #155087;

    transition: .35s ease;
}

.cafeteria-mini-point:hover .cafeteria-mini-icon {
    background: #cc1f26;

    color: #fff;
}

.cafeteria-mini-point span {
    font-size: 13px;

    font-weight: 600;

    color: #155087;
}


/* =========================================================
   BLUE FEATURE SECTION
========================================================= */

.cafeteria-feature-section {
    position: relative;

    overflow: hidden;

    background: #155087;

    padding: 90px 0;
}

.cafeteria-feature-section::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    right: -220px;
    top: -220px;

    border-radius: 50%;

    border: 70px solid rgba(255,255,255,.05);
}

.cafeteria-feature-section::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    left: -160px;
    bottom: -160px;

    border-radius: 50%;

    border: 50px solid rgba(204,31,38,.10);
}


/* =========================================================
   FEATURE ROW
========================================================= */

.cafeteria-feature-row {
    width: 85%;
    margin: 0 auto;

    display: grid;

    grid-template-columns: 1.05fr .95fr;

    align-items: center;

    gap: 75px;

    position: relative;

    z-index: 2;
}


/* =========================================================
   FEATURE CONTENT
========================================================= */

.cafeteria-feature-content {
    color: #fff;
}

.cafeteria-feature-tag {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #fff;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 15px;
}

.cafeteria-feature-tag::before {
    content: "";

    width: 28px;
    height: 2px;

    background: #cc1f26;
}


.cafeteria-feature-content h2 {
    font-size: 42px;

    line-height: 1.15;

    font-weight: 700;

    color: #fff;

    margin: 0 0 18px;
}

.cafeteria-feature-content h2 span {
    display: block;

    color: #fff;
}


.cafeteria-feature-line {
    width: 65px;
    height: 4px;

    background: #cc1f26;

    border-radius: 10px;

    margin-bottom: 25px;
}


.cafeteria-feature-content p {
    color: rgba(255,255,255,.86);

    font-size: 15px;

    line-height: 1.85;

    margin-bottom: 30px;
}


/* =========================================================
   FEATURE POINTS
========================================================= */

.cafeteria-feature-points {
    display: flex;

    flex-wrap: wrap;

    gap: 15px;
}

.cafeteria-feature-point {
    display: flex;

    align-items: center;

    gap: 10px;

    color: #fff;

    font-size: 14px;

    font-weight: 600;
}

.cafeteria-feature-point i {
    width: 30px;
    height: 30px;

    display: flex;

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

    border-radius: 50%;

    background: rgba(255,255,255,.12);

    color: #fff;

    transition: .3s ease;
}

.cafeteria-feature-point:hover i {
    background: #cc1f26;
}


/* =========================================================
   FEATURE IMAGE
========================================================= */

.cafeteria-feature-image {
    position: relative;
}

.cafeteria-feature-image-wrap {
    position: relative;

    padding: 15px;
}

.cafeteria-feature-image-wrap img {
    width: 100%;

    height: 430px;

    object-fit: cover;

    border-radius: 30px;

    display: block;

    box-shadow:
        0 25px 60px rgba(0,0,0,.22);

    transition: .5s ease;
}

.cafeteria-feature-image-wrap:hover img {
    transform: scale(1.02);
}


.cafeteria-feature-image-wrap::before {
    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    top: -5px;
    right: -5px;

    border-radius: 50%;

    background: rgba(204,31,38,.35);

    z-index: -1;
}


/* =========================================================
   FEATURE FLOATING ICON
========================================================= */

.cafeteria-feature-icon {
    position: absolute;

    width: 70px;
    height: 70px;

    right: -5px;
    bottom: 35px;

    display: flex;

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

    border-radius: 50%;

    background: #fff;

    color: #155087;

    font-size: 25px;

    box-shadow:
        0 12px 35px rgba(0,0,0,.25);

    transition: .4s ease;
}

.cafeteria-feature-image-wrap:hover
.cafeteria-feature-icon {
    transform: rotate(8deg) scale(1.08);

    color: #cc1f26;
}


/* =========================================================
   LEARNING BENEFITS
========================================================= */

.cafeteria-learning-points {
    display: flex;

    flex-direction: column;

    gap: 14px;
}

.cafeteria-learning-point {
    display: flex;

    align-items: center;

    gap: 15px;

    padding: 14px 16px;

    background: #fff;

    border-radius: 14px;

    border: 1px solid rgba(21,80,135,.08);

    box-shadow:
        0 8px 25px rgba(21,80,135,.06);

    transition: .35s ease;
}

.cafeteria-learning-point:hover {
    transform: translateX(8px);

    box-shadow:
        0 15px 35px rgba(21,80,135,.12);
}


.cafeteria-learning-icon {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 13px;

    background: #155087;

    color: #fff;

    font-size: 20px;

    transition: .35s ease;
}

.cafeteria-learning-point:hover
.cafeteria-learning-icon {
    background: #cc1f26;

    transform: rotate(5deg);
}


.cafeteria-learning-point div:last-child {
    display: flex;

    flex-direction: column;

    gap: 3px;
}

.cafeteria-learning-point strong {
    color: #155087;

    font-size: 15px;
}

.cafeteria-learning-point span {
    color: #777;

    font-size: 13px;
}


/* =========================================================
   LEARNING IMAGE
========================================================= */

.cafeteria-learning-image img {
    height: 430px;
}

.cafeteria-learning-image::before {
    background: rgba(204,31,38,.07);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .cafeteria-health-row,
    .cafeteria-health-row.reverse,
    .cafeteria-feature-row {

        width: 90%;

        grid-template-columns: 1fr;

        gap: 45px;
    }

    .cafeteria-health-content h2,
    .cafeteria-feature-content h2 {
        font-size: 36px;
    }

    .cafeteria-health-image,
    .cafeteria-feature-image {
        max-width: 700px;

        width: 100%;

        margin: 0 auto;
    }

}


@media (max-width: 767px) {

    .cafeteria-health-row,
    .cafeteria-health-row.reverse,
    .cafeteria-feature-row {

        width: 100%;
    }

    .cafeteria-health-content h2,
    .cafeteria-feature-content h2 {
        font-size: 30px;
    }

    .cafeteria-feature-section {
        padding: 65px 0;
    }

    .cafeteria-main-image,
    .cafeteria-feature-image-wrap {
        padding: 8px;
    }

    .cafeteria-main-image img,
    .cafeteria-feature-image-wrap img {
        height: 300px;

        border-radius: 22px;
    }

    .cafeteria-image-label {
        left: 0;

        bottom: 25px;

        padding: 10px 14px;
    }

    .cafeteria-image-label > i {
        width: 36px;
        height: 36px;

        font-size: 15px;
    }

    .cafeteria-image-label strong {
        font-size: 12px;
    }

    .cafeteria-mini-points {
        display: grid;

        grid-template-columns: 1fr;
    }

    .cafeteria-feature-points {
        flex-direction: column;

        align-items: flex-start;
    }

    .cafeteria-feature-icon {
        width: 55px;
        height: 55px;

        font-size: 20px;

        bottom: 20px;
    }

}


@media (max-width: 480px) {

    .cafeteria-health-content h2,
    .cafeteria-feature-content h2 {
        font-size: 27px;
    }

    .cafeteria-health-content p,
    .cafeteria-feature-content p {
        font-size: 14px;

        line-height: 1.75;
    }

    .cafeteria-main-image img,
    .cafeteria-feature-image-wrap img {
        height: 260px;
    }

}




/* =========================================================
   SAFETY & SECURITY PREMIUM DESIGN
========================================================= */

.safety-intro-premium {
    position: relative;
    overflow: hidden;
}

.safety-health-row,
.safety-feature-row {
    width: 85%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.safety-health-row.reverse {
    grid-template-columns: 1fr 1fr;
}


/* =========================================================
   IMAGE
========================================================= */

.safety-health-image,
.safety-health-content,
.safety-feature-content,
.safety-feature-image {
    opacity: 1;
    transform: none;
}

.safety-main-image {
    position: relative;
    overflow: visible;
}

.safety-main-image img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    display: block;
    border-radius: 30px;

    box-shadow: 0 25px 60px rgba(21, 80, 135, 0.15);

    transition: transform .6s ease,
                box-shadow .6s ease;
}

.safety-main-image:hover img {
    transform: translateY(-5px);
    box-shadow: 0 35px 70px rgba(21, 80, 135, 0.20);
}


/* Decorative circles */

.safety-main-image::before {
    content: "";
    position: absolute;

    width: 100px;
    height: 100px;

    top: -25px;
    left: -25px;

    border-radius: 50%;

    background: rgba(204, 31, 38, .08);

    z-index: -1;
}

.safety-main-image::after {
    content: "";
    position: absolute;

    width: 85px;
    height: 85px;

    right: -25px;
    bottom: -25px;

    border-radius: 50%;

    border: 2px solid rgba(21, 80, 135, .15);

    z-index: -1;
}


/* =========================================================
   IMAGE LABEL
========================================================= */

.safety-image-label {
    position: absolute;

    left: 25px;
    bottom: 25px;

    display: flex;
    align-items: center;
    gap: 12px;

    background: #fff;

    padding: 13px 20px 13px 13px;

    border-radius: 16px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .14);

    z-index: 5;

    transition: transform .4s ease,
                box-shadow .4s ease;
}

.safety-image-label:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .18);
}

.safety-label-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    border-radius: 13px;

    background: #155087;

    color: #fff;

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

    font-size: 20px;
}

.safety-image-label.red .safety-label-icon {
    background: #cc1f26;
}

.safety-image-label small {
    display: block;

    font-size: 11px;

    color: #777;

    margin-bottom: 3px;
}

.safety-image-label strong {
    display: block;

    font-size: 15px;

    color: #155087;
}


/* =========================================================
   CONTENT
========================================================= */

.safety-health-content {
    position: relative;
    z-index: 2;
}

.safety-section-tag,
.safety-feature-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.8px;

    color: #cc1f26;

    margin-bottom: 15px;
}

.safety-section-tag::before,
.safety-feature-tag::before {
    content: "";

    width: 28px;
    height: 2px;

    background: #cc1f26;
}

.safety-health-content h2,
.safety-feature-content h2 {
    margin: 0;

    font-size: 42px;

    line-height: 1.15;

    font-weight: 700;

    color: #155087;
}

.safety-health-content h2 span,
.safety-feature-content h2 span {
    display: block;
    color: #cc1f26;
}

.safety-section-line,
.safety-feature-line {
    width: 70px;
    height: 4px;

    margin: 22px 0;

    border-radius: 10px;

    background: #155087;
}

.safety-health-content p,
.safety-feature-content p {
    font-size: 16px;

    line-height: 1.9;

    margin-bottom: 25px;
}

.safety-health-content p {
    color: #555;
}


/* =========================================================
   MINI POINTS
========================================================= */

.safety-mini-points {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.safety-mini-point {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 10px 15px;

    background: #fff;

    border: 1px solid #e8edf2;

    border-radius: 12px;

    transition: transform .35s ease,
                box-shadow .35s ease,
                border-color .35s ease;
}

.safety-mini-point:hover {
    transform: translateY(-5px);

    border-color: rgba(21, 80, 135, .25);

    box-shadow: 0 12px 30px rgba(21, 80, 135, .10);
}

.safety-mini-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border-radius: 10px;

    background: rgba(21, 80, 135, .08);

    color: #155087;

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

    transition: .35s ease;
}

.safety-mini-point:hover .safety-mini-icon {
    background: #155087;
    color: #fff;

    transform: rotate(-8deg) scale(1.08);
}

.safety-mini-point span {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}


/* =========================================================
   BLUE SECURITY SECTION
========================================================= */

.safety-feature-section {
    position: relative;

    padding: 90px 0;

    background: #155087;

    overflow: hidden;
}

.safety-feature-row {
    position: relative;
    z-index: 2;
}

.safety-feature-content {
    padding-right: 15px;
}

.safety-feature-tag {
    color: #fff;
}

.safety-feature-tag::before {
    background: #cc1f26;
}

.safety-feature-content h2 {
    color: #fff;
}

.safety-feature-content h2 span {
    color: #fff;
}

.safety-feature-line {
    background: #cc1f26;
}

.safety-feature-content p {
    color: rgba(255,255,255,.88);
}


/* =========================================================
   FEATURE POINTS
========================================================= */

.safety-feature-points {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.safety-feature-point {
    display: flex;
    align-items: center;
    gap: 13px;

    color: #fff;

    font-size: 15px;
    font-weight: 500;

    transition: transform .3s ease;
}

.safety-feature-point:hover {
    transform: translateX(7px);
}

.safety-check {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border-radius: 50%;

    background: rgba(255,255,255,.10);

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

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

    color: #fff;

    transition: .3s ease;
}

.safety-feature-point:hover .safety-check {
    background: #cc1f26;
    transform: scale(1.08);
}


/* =========================================================
   FEATURE IMAGE
========================================================= */

.safety-feature-image-wrap {
    position: relative;
}

.safety-feature-image-wrap img {
    width: 100%;
    height: 430px;

    object-fit: cover;

    display: block;

    border-radius: 30px;

    box-shadow: 0 25px 60px rgba(0,0,0,.20);

    transition: transform .6s ease,
                box-shadow .6s ease;
}

.safety-feature-image-wrap:hover img {
    transform: translateY(-6px);

    box-shadow: 0 35px 70px rgba(0,0,0,.28);
}


/* Floating video icon */

.safety-feature-icon {
    position: absolute;

    left: -28px;
    bottom: 35px;

    width: 72px;
    height: 72px;

    border-radius: 20px;

    background: #cc1f26;

    color: #fff;

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

    font-size: 27px;

    box-shadow: 0 15px 35px rgba(0,0,0,.22);

    animation: safetyFloat 3.5s ease-in-out infinite;
}

@keyframes safetyFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}


/* =========================================================
   COMPLIANCE POINTS
========================================================= */

.safety-learning-points {
    display: flex;
    flex-direction: column;

    gap: 15px;

    margin-top: 28px;
}

.safety-learning-point {
    display: flex;
    align-items: center;

    gap: 15px;

    padding: 14px 16px;

    background: #fff;

    border: 1px solid #edf0f3;

    border-radius: 15px;

    box-shadow: 0 8px 25px rgba(21,80,135,.05);

    transition: transform .35s ease,
                box-shadow .35s ease;
}

.safety-learning-point:hover {
    transform: translateX(7px);

    box-shadow: 0 15px 35px rgba(21,80,135,.10);
}

.safety-learning-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    border-radius: 13px;

    background: rgba(21,80,135,.08);

    color: #155087;

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

    transition: .35s ease;
}

.safety-learning-point:hover .safety-learning-icon {
    background: #155087;
    color: #fff;

    transform: rotate(5deg) scale(1.08);
}

.safety-learning-point strong {
    display: block;

    font-size: 15px;

    color: #155087;

    margin-bottom: 3px;
}

.safety-learning-point span {
    display: block;

    font-size: 13px;

    color: #777;
}


/* =========================================================
   OPTIONAL SCROLL ANIMATION
   CONTENT REMAINS VISIBLE EVEN IF JS FAILS
========================================================= */

.safety-health-image,
.safety-health-content,
.safety-feature-content,
.safety-feature-image {
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22,.61,.36,1);
}

.safety-health-image.animate-in,
.safety-health-content.animate-in,
.safety-feature-content.animate-in,
.safety-feature-image.animate-in {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .safety-health-row,
    .safety-feature-row,
    .safety-health-row.reverse {
        width: 90%;

        grid-template-columns: 1fr;

        gap: 45px;
    }

    .safety-health-row.reverse .safety-health-content {
        order: 1;
    }

    .safety-health-row.reverse .safety-health-image {
        order: 2;
    }

    .safety-health-content h2,
    .safety-feature-content h2 {
        font-size: 36px;
    }

    .safety-main-image img,
    .safety-feature-image-wrap img {
        height: 400px;
    }

}


@media (max-width: 767px) {

    .safety-health-row,
    .safety-feature-row {
        width: 100%;
    }

    .safety-feature-section {
        padding: 65px 0;
    }

    .safety-health-content h2,
    .safety-feature-content h2 {
        font-size: 31px;
    }

    .safety-main-image img,
    .safety-feature-image-wrap img {
        height: 350px;
    }

    .safety-feature-icon {
        left: 15px;
        bottom: 20px;

        width: 60px;
        height: 60px;

        font-size: 22px;
    }

}


@media (max-width: 480px) {

    .safety-health-content h2,
    .safety-feature-content h2 {
        font-size: 27px;
    }

    .safety-health-content p,
    .safety-feature-content p {
        font-size: 14px;
        line-height: 1.8;
    }

    .safety-main-image img,
    .safety-feature-image-wrap img {
        height: 280px;
        border-radius: 22px;
    }

    .safety-mini-points {
        flex-direction: column;
    }

    .safety-mini-point {
        width: 100%;
    }

    .safety-image-label {
        left: 12px;
        bottom: 12px;
    }

}


/* =========================================================
   SAFETY & SECURITY PREMIUM BANNER
========================================================= */

.safety-premium-banner {
    position: relative;
    width: 100%;
    min-height: 430px;

    display: flex;
    align-items: center;

    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;

    overflow: hidden;
}


/* Overlay */

.safety-premium-banner-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(6, 38, 68, .94) 0%,
            rgba(21, 80, 135, .78) 50%,
            rgba(21, 80, 135, .30) 100%
        );

    z-index: 1;
}


/* Decorative circle */

.safety-premium-banner::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -220px;
    top: -180px;

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;

    z-index: 2;
}

.safety-premium-banner::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -140px;
    top: -110px;

    border: 1px solid rgba(204,31,38,.35);
    border-radius: 50%;

    z-index: 2;
}


/* Content */

.safety-premium-banner .container {
    position: relative;
    z-index: 5;
}

.safety-premium-banner-content {
    width: 85%;
    max-width: 900px;
    margin: 0 auto;

    padding: 70px 0;

    animation: safetyBannerIn .9s ease both;
}


/* Eyebrow */

.safety-premium-eyebrow {
    display: block;

    margin-bottom: 16px;

    color: #fff;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 3px;
    text-transform: uppercase;
}


/* Heading */

.safety-premium-banner h1 {
    margin: 0 !important;
    padding: 0 !important;

    color: #fff !important;

    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.08;

    font-weight: 700;
    letter-spacing: -1px;
}


/* Red line */

.safety-premium-banner-line {
    width: 75px;
    height: 4px;

    margin-top: 22px;

    background: #cc1f26;
    border-radius: 50px;
}


/* Subtitle */

.safety-premium-banner p {
    margin: 18px 0 0;

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

    font-size: 16px;
    line-height: 1.6;
}


/* Animation */

@keyframes safetyBannerIn {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .safety-premium-banner {
        min-height: 380px;
    }

    .safety-premium-banner-content {
        width: 90%;
    }

    .safety-premium-banner h1 {
        font-size: 48px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .safety-premium-banner {
        min-height: 320px;

        background-position: center center !important;
    }

    .safety-premium-banner-content {
        width: 100%;
        padding: 55px 15px;
    }

    .safety-premium-eyebrow {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .safety-premium-banner h1 {
        font-size: 38px;
        line-height: 1.15;
    }

    .safety-premium-banner p {
        font-size: 14px;
    }

    .safety-premium-banner::before {
        width: 280px;
        height: 280px;

        right: -170px;
        top: -100px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .safety-premium-banner {
        min-height: 280px;
    }

    .safety-premium-banner-content {
        padding: 45px 15px;
    }

    .safety-premium-eyebrow {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .safety-premium-banner h1 {
        font-size: 30px;
    }

    .safety-premium-banner-line {
        width: 55px;
        height: 3px;
        margin-top: 17px;
    }

    .safety-premium-banner p {
        font-size: 13px;
    }

}



/* =========================================================
   TRANSPORT FACILITIES PREMIUM DESIGN
========================================================= */


/* =========================================================
   COMMON CONTAINER
========================================================= */

.transport-health-row,
.transport-feature-row {
    width: 85%;
    max-width: 1250px;
    margin: 0 auto;
}


/* =========================================================
   PREMIUM BANNER
========================================================= */

.hh-premium-banner {
    position: relative;
    overflow: hidden;
}

.hh-premium-banner .inner-box {
    position: relative;
    z-index: 2;
}

.hh-banner-subtitle {
    display: inline-block;
    margin-bottom: 12px;
    color: #cc1f26;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1.4;
    text-transform: uppercase;
}

.hh-premium-banner .inner-title {
    margin-bottom: 0;
    color: #155087;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.15;
}

.hh-banner-line {
    width: 65px;
    height: 3px;
    margin: 18px auto 0;
    background: #cc1f26;
    border-radius: 50px;
}


/* =========================================================
   INTRODUCTION
========================================================= */

.transport-intro-premium {
    position: relative;
    background: #fff;
}

.transport-health-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 75px;
}


/* =========================================================
   INTRO IMAGE
========================================================= */

.transport-health-image {
    position: relative;
}

.transport-main-image {
    position: relative;
}

.transport-main-image::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 18px;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(204, 31, 38, 0.18);
    border-radius: 30px;
    z-index: 0;
}

.transport-main-image img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 30px;
    box-shadow: 0 25px 60px rgba(21, 80, 135, 0.16);
}


/* =========================================================
   IMAGE LABEL
========================================================= */

.transport-image-label {
    position: absolute;
    z-index: 3;
    left: 25px;
    bottom: -25px;
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 235px;
    padding: 14px 20px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.14);
}

.transport-label-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #155087;
    color: #fff;
    border-radius: 12px;
    font-size: 20px;
}

.transport-image-label small {
    display: block;
    margin-bottom: 3px;
    color: #777;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.transport-image-label strong {
    display: block;
    color: #155087;
    font-size: 15px;
    font-weight: 700;
}


/* =========================================================
   RED IMAGE LABEL
========================================================= */

.transport-image-label.red .transport-label-icon {
    background: #cc1f26;
}


/* =========================================================
   INTRO CONTENT
========================================================= */

.transport-health-content {
    padding-left: 10px;
}

.transport-section-tag {
    display: inline-block;
    margin-bottom: 15px;
    color: #cc1f26;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
}

.transport-health-content h2 {
    margin: 0;
    color: #155087;
    font-size: 42px;
    line-height: 1.15;
    font-weight: 400;
}

.transport-health-content h2 span {
    display: block;
    color: #cc1f26;
    font-weight: 800;
}

.transport-section-line {
    width: 65px;
    height: 3px;
    margin: 20px 0 24px;
    background: #cc1f26;
    border-radius: 10px;
}

.transport-health-content p {
    margin-bottom: 28px;
    color: #5f6872;
    font-size: 16px;
    line-height: 1.85;
}


/* =========================================================
   INTRO MINI POINTS
========================================================= */

.transport-mini-points {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.transport-mini-point {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: #f7f9fb;
    border: 1px solid #e7edf2;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.transport-mini-point:hover {
    transform: translateY(-4px);
    border-color: rgba(21, 80, 135, 0.25);
    box-shadow: 0 10px 25px rgba(21, 80, 135, 0.10);
}

.transport-mini-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #155087;
    color: #fff;
    border-radius: 50%;
    font-size: 14px;
}

.transport-mini-point span {
    color: #155087;
    font-size: 13px;
    font-weight: 700;
}


/* =========================================================
   DRIVER & BUS SAFETY
========================================================= */

.transport-feature-section {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
    background: #155087;
}

.transport-feature-section::before {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    right: -200px;
    top: -200px;
    border: 70px solid rgba(255, 255, 255, 0.04);
    border-radius: 50%;
}

.transport-feature-section::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    left: -140px;
    bottom: -140px;
    border: 50px solid rgba(204, 31, 38, 0.08);
    border-radius: 50%;
}

.transport-feature-row {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 70px;
}


/* =========================================================
   FEATURE CONTENT
========================================================= */

.transport-feature-content {
    padding-right: 10px;
}

.transport-feature-tag {
    display: inline-block;
    margin-bottom: 15px;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
}

.transport-feature-content h2 {
    margin: 0;
    color: #fff;
    font-size: 42px;
    line-height: 1.15;
    font-weight: 400;
}

.transport-feature-content h2 span {
    display: block;
    color: #fff;
    font-weight: 800;
}

.transport-feature-line {
    width: 65px;
    height: 3px;
    margin: 20px 0 24px;
    background: #cc1f26;
    border-radius: 10px;
}

.transport-feature-content p {
    margin-bottom: 30px;
    color: #fff;
    font-size: 16px;
    line-height: 1.85;
}


/* =========================================================
   FEATURE POINTS
========================================================= */

.transport-feature-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.transport-feature-point {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    transition: all 0.3s ease;
}

.transport-feature-point:hover {
    transform: translateY(-5px);
    background: #fff;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.14);
}

.transport-check {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #cc1f26;
    color: #fff;
    border-radius: 11px;
    font-size: 16px;
}

.transport-feature-point span {
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
}

.transport-feature-point:hover span {
    color: #155087;
}

.transport-feature-point:hover .transport-check {
    background: #155087;
}


/* =========================================================
   FEATURE IMAGE
========================================================= */

.transport-feature-image-wrap {
    position: relative;
}

.transport-feature-image img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 430px;
    object-fit: cover;
    border-radius: 30px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.22);
}

.transport-feature-icon {
    position: absolute;
    z-index: 3;
    left: -25px;
    bottom: 30px;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #cc1f26;
    color: #fff;
    border-radius: 20px;
    font-size: 28px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.22);
}


/* =========================================================
   ROUTE MANAGEMENT
========================================================= */

.transport-comfort-section {
    background: #fff;
}

.transport-health-row.reverse {
    grid-template-columns: 1.05fr 0.95fr;
}


/* =========================================================
   ROUTE MANAGEMENT POINTS
========================================================= */

.transport-learning-points {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.transport-learning-point {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 16px;
    background: #f7f9fb;
    border: 1px solid #e8edf1;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.transport-learning-point:hover {
    transform: translateX(8px);
    background: #fff;
    border-color: rgba(21, 80, 135, 0.20);
    box-shadow: 0 12px 30px rgba(21, 80, 135, 0.10);
}

.transport-learning-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #155087;
    color: #fff;
    border-radius: 13px;
    font-size: 18px;
}

.transport-learning-point strong {
    display: block;
    margin-bottom: 3px;
    color: #155087;
    font-size: 15px;
}

.transport-learning-point span {
    display: block;
    color: #777;
    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   BUS IMAGE
========================================================= */

.transport-bus-image {
    position: relative;
}

.transport-bus-image img {
    object-position: center;
}


/* =========================================================
   HOVER IMAGE EFFECT
========================================================= */

.transport-main-image img,
.transport-feature-image img {
    transition: transform 0.5s ease;
}

.transport-main-image:hover img,
.transport-feature-image:hover img {
    transform: scale(1.025);
}


/* =========================================================
   RESPONSIVE - 1199px
========================================================= */

@media (max-width: 1199px) {

    .transport-health-row,
    .transport-feature-row {
        width: 90%;
        gap: 50px;
    }

    .transport-health-content h2,
    .transport-feature-content h2 {
        font-size: 36px;
    }

}


/* =========================================================
   RESPONSIVE - 991px
========================================================= */

@media (max-width: 991px) {

    .transport-health-row,
    .transport-feature-row,
    .transport-health-row.reverse {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .transport-health-content,
    .transport-feature-content {
        padding-left: 0;
        padding-right: 0;
    }

    .transport-health-row.reverse .transport-health-content {
        order: 1;
    }

    .transport-health-row.reverse .transport-health-image {
        order: 2;
    }

    .transport-main-image img,
    .transport-feature-image img {
        height: 400px;
    }

    .transport-feature-icon {
        left: 20px;
    }

}


/* =========================================================
   RESPONSIVE - 767px
========================================================= */

@media (max-width: 767px) {

    .transport-health-row,
    .transport-feature-row {
        width: 92%;
    }

    .transport-feature-section {
        padding: 65px 0;
    }

    .transport-health-content h2,
    .transport-feature-content h2 {
        font-size: 31px;
    }

    .transport-main-image img,
    .transport-feature-image img {
        height: 340px;
    }

    .transport-feature-points {
        grid-template-columns: 1fr;
    }

    .transport-mini-points {
        flex-direction: column;
        align-items: flex-start;
    }

}


/* =========================================================
   RESPONSIVE - 480px
========================================================= */

@media (max-width: 480px) {

    .transport-health-row,
    .transport-feature-row {
        width: 94%;
    }

    .transport-health-content h2,
    .transport-feature-content h2 {
        font-size: 27px;
    }

    .transport-main-image img,
    .transport-feature-image img {
        height: 280px;
        border-radius: 22px;
    }

    .transport-main-image::before {
        top: 10px;
        left: 10px;
        border-radius: 22px;
    }

    .transport-image-label {
        left: 12px;
        bottom: -20px;
        min-width: auto;
        padding: 10px 13px;
    }

    .transport-label-icon {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        font-size: 17px;
    }

    .transport-image-label small {
        font-size: 9px;
    }

    .transport-image-label strong {
        font-size: 12px;
    }

    .transport-feature-icon {
        width: 58px;
        height: 58px;
        left: 15px;
        bottom: 20px;
        border-radius: 15px;
        font-size: 21px;
    }

    .transport-learning-point {
        padding: 12px;
    }

    .transport-learning-icon {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        font-size: 16px;
    }

}




/* =========================================================
   WPS ADMISSIONS PAGE
========================================================= */

.wps-admission-page {
    position: relative;
    overflow: hidden;
    background: #fff;
}


/* =========================================================
   INTRO
========================================================= */

.wps-adm-intro {
    position: relative;
    padding: 90px 0 85px;
    background: #f7f9fb;
    overflow: hidden;
}

.wps-adm-intro-inner {
    position: relative;
    z-index: 2;
    max-width: 980px;
    margin: auto;
    text-align: center;
}

.wps-adm-intro-label,
.wps-adm-section-heading > span,
.wps-adm-about-heading > span,
.wps-adm-documents-heading > span,
.wps-adm-offline-header > span {
    display: block;
    margin-bottom: 12px;
    color: #cc1f26;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.wps-adm-intro h1 {
    margin: 0;
    color: #155087;
    font-size: 48px;
    font-weight: 800;
}

.wps-adm-red-line {
    width: 65px;
    height: 3px;
    margin: 18px auto 30px;
    background: #cc1f26;
    border-radius: 30px;
}

.wps-adm-intro-content {
    max-width: 900px;
    margin: auto;
}

.wps-adm-intro-content p {
    margin: 0 0 18px;
    color: #5d6874;
    font-size: 15px;
    line-height: 1.9;
}

.wps-admission-left-design {
    position: absolute;
    left: -80px;
    top: 0;
    width: 260px;
    opacity: .7;
}


/* =========================================================
   HERO
========================================================= */

.wps-adm-hero {
    position: relative;
    min-height: 650px;
    overflow: hidden;
}

.wps-adm-hero-image,
.wps-adm-hero-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.wps-adm-hero-image img {
    object-fit: cover;
    object-position: center;
}

.wps-adm-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            90deg,
            rgba(7,42,73,.94) 0%,
            rgba(21,80,135,.72) 43%,
            rgba(21,80,135,.10) 100%
        );
}

.wps-adm-hero-container {
    position: relative;
    z-index: 3;
    min-height: 650px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.wps-adm-hero-copy {
    max-width: 550px;
    padding: 50px 0;
}

.wps-adm-hero-copy > span {
    display: inline-block;
    margin-bottom: 20px;
    padding: 8px 15px;
    background: #cc1f26;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.wps-adm-hero-copy h2 {
    margin: 0;
    color: #fff;
    font-size: 53px;
    font-weight: 300;
    line-height: 1.13;
}

.wps-adm-hero-copy h2 strong {
    display: block;
    font-weight: 800;
}

.wps-adm-hero-line {
    width: 70px;
    height: 4px;
    margin-top: 25px;
    background: #cc1f26;
    border-radius: 50px;
}


/* =========================================================
   FORM
========================================================= */

.wps-adm-form {
    width: 100%;
    max-width: 430px;
    background: #fff;
    box-shadow: 0 25px 70px rgba(0,0,0,.22);
}

.wps-adm-form-header {
    padding: 23px 25px 20px;
    background: #155087;
}

.wps-adm-form-header span {
    color: rgba(255,255,255,.7);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.wps-adm-form-header h3 {
    margin: 5px 0 3px;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
}

.wps-adm-form-header p {
    margin: 0;
    color: rgba(255,255,255,.7);
    font-size: 12px;
}


/* =========================================================
   MOBILE FORM
========================================================= */

.wps-adm-mobile-form {
    display: none;
    padding: 35px 0;
    background: #f5f7fa;
}

.wps-adm-mobile-form .wps-adm-form {
    max-width: 600px;
    margin: auto;
}


/* =========================================================
   ABOUT MIT WPS
========================================================= */

.wps-adm-about {
    position: relative;
    padding: 105px 0;
    overflow: hidden;
}

.wps-adm-about-heading {
    max-width: 800px;
    margin: 0 auto 65px;
    text-align: center;
}

.wps-adm-about-heading h2 {
    margin: 0 0 18px;
    color: #155087;
    font-size: 40px;
    font-weight: 300;
}

.wps-adm-about-heading h2 strong {
    font-weight: 800;
}

.wps-adm-about-heading p {
    margin: 0;
    color: #687480;
    font-size: 15px;
    line-height: 1.8;
}

.wps-adm-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 75px;
    max-width: 1120px;
    margin: auto;
}

.wps-adm-about-image {
    position: relative;
}

.wps-adm-about-image img {
    width: 100%;
    display: block;
    border-radius: 0 70px 0 0;
}

.wps-adm-image-label {
    position: absolute;
    left: 25px;
    bottom: 25px;
    padding: 15px 20px;
    background: #fff;
    box-shadow: 0 15px 35px rgba(21,80,135,.15);
}

.wps-adm-image-label span {
    display: block;
    color: #cc1f26;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.wps-adm-image-label strong {
    display: block;
    margin-top: 3px;
    color: #155087;
    font-size: 18px;
}

.wps-adm-about-content {
    padding-right: 30px;
}

.wps-adm-about-number {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background: #155087;
    color: #fff;
    border-radius: 50%;
    font-size: 21px;
}

.wps-adm-about-content h3 {
    margin: 0 0 20px;
    color: #155087;
    font-size: 34px;
    font-weight: 300;
    line-height: 1.25;
}

.wps-adm-about-content h3 span {
    display: block;
    font-weight: 800;
}

.wps-adm-about-content p {
    color: #65717c;
    font-size: 15px;
    line-height: 1.9;
}

.wps-adm-primary-btn,
.wps-adm-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    margin-top: 12px;
    padding: 14px 23px;
    background: #cc1f26;
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .8px;
    text-decoration: none;
    transition: .3s ease;
}

.wps-adm-primary-btn:hover,
.wps-adm-apply-btn:hover {
    background: #155087;
    transform: translateY(-3px);
}

.wps-adm-about-design {
    position: absolute;
    right: -150px;
    bottom: -250px;
    width: 350px;
    opacity: .5;
}


/* =========================================================
   PROCESS
========================================================= */

.wps-adm-process {
    padding: 100px 0;
    background: #f5f7fa;
}

.wps-adm-section-heading {
    max-width: 780px;
    margin: 0 auto 55px;
    text-align: center;
}

.wps-adm-section-heading h2 {
    margin: 0 0 15px;
    color: #155087;
    font-size: 40px;
    font-weight: 300;
}

.wps-adm-section-heading h2 strong {
    font-weight: 800;
}

.wps-adm-section-heading p {
    margin: 0;
    color: #68737e;
    font-size: 14px;
    line-height: 1.8;
}

.wps-adm-process-content {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 55px;
    max-width: 1100px;
    margin: auto;
    padding: 45px;
    background: #fff;
    border-top: 5px solid #155087;
    box-shadow: 0 15px 45px rgba(21,80,135,.07);
}

.wps-adm-process-intro {
    border-right: 1px solid #e2e7eb;
}

.wps-adm-process-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background: #155087;
    color: #fff;
    border-radius: 50%;
    font-size: 22px;
}

.wps-adm-process-intro h3 {
    margin: 0;
    color: #155087;
    font-size: 25px;
    line-height: 1.3;
}

.wps-adm-process-text p {
    margin: 0 0 20px;
    color: #606c77;
    font-size: 14px;
    line-height: 1.9;
    text-align: justify;
}

.wps-adm-process-text p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   OFFLINE PROCESS
========================================================= */

.wps-adm-offline {
    padding: 100px 0;
    background: #155087;
}

.wps-adm-offline-header {
    max-width: 780px;
    margin: auto;
    text-align: center;
}

.wps-adm-offline-header > span {
    color: rgba(255,255,255,.65);
}

.wps-adm-offline-header h2 {
    margin: 0 0 18px;
    color: #fff;
    font-size: 39px;
    font-weight: 700;
}

.wps-adm-offline-header p {
    margin: 0;
    color: rgba(255,255,255,.72);
    font-size: 14px;
    line-height: 1.8;
}

.wps-adm-journey {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1050px;
    margin: 65px auto 50px;
}

.wps-adm-journey-item {
    text-align: center;
    min-width: 130px;
}

.wps-adm-journey-icon {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    border-radius: 50%;
    font-size: 20px;
    transition: .3s ease;
}

.wps-adm-journey-item.active .wps-adm-journey-icon {
    background: #cc1f26;
    border-color: #cc1f26;
}

.wps-adm-journey-item span {
    display: block;
    margin-top: 13px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.wps-adm-journey-line {
    width: 70px;
    height: 1px;
    background: rgba(255,255,255,.3);
}

.wps-adm-apply-btn {
    display: flex;
    width: fit-content;
    margin: auto;
    background: #fff;
    color: #155087 !important;
}

.wps-adm-apply-btn:hover {
    background: #cc1f26;
    color: #fff !important;
}


/* =========================================================
   DOCUMENTS
========================================================= */

.wps-adm-documents {
    padding: 100px 0;
    background: #f7f9fb;
}

.wps-adm-documents-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 70px;
    align-items: center;
    max-width: 1050px;
    margin: auto;
}

.wps-adm-documents-heading h2 {
    margin: 0 0 18px;
    color: #155087;
    font-size: 34px;
    font-weight: 300;
    line-height: 1.3;
}

.wps-adm-documents-heading h2 strong {
    display: block;
    font-weight: 800;
}

.wps-adm-documents-heading p {
    margin: 0;
    color: #6b7681;
    font-size: 14px;
    line-height: 1.8;
}

.wps-adm-documents-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.wps-adm-document {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 65px;
    padding: 15px;
    background: #fff;
    border: 1px solid #e7ebef;
    transition: .3s ease;
}

.wps-adm-document:hover {
    border-color: #155087;
    transform: translateY(-3px);
}

.wps-adm-document i {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #eaf1f7;
    color: #155087;
    border-radius: 50%;
    font-size: 12px;
}

.wps-adm-document span {
    color: #4f5d69;
    font-size: 12px;
    line-height: 1.5;
}

.wps-adm-document-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 55px;
}

.wps-adm-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 14px 22px;
    background: #155087;
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: .3s ease;
}

.wps-adm-action-btn:hover {
    background: #cc1f26;
    transform: translateY(-3px);
}


/* =========================================================
   FAQ
========================================================= */

.wps-adm-faq {
    position: relative;
    padding: 100px 0 120px;
    background: #fff;
    overflow: hidden;
}

.wps-adm-faq-wrap {
    max-width: 950px;
    margin: auto;
}

.wps-adm-faq .accordion-item {
    margin-bottom: 12px;
    border: 1px solid #e5e9ed !important;
    border-radius: 0 !important;
    overflow: hidden;
}

.wps-adm-faq .accordion-button {
    padding: 21px 25px;
    color: #155087;
    background: #fff;
    box-shadow: none !important;
    font-size: 14px;
    font-weight: 700;
}

.wps-adm-faq .accordion-button:not(.collapsed) {
    color: #fff;
    background: #155087;
}

.wps-adm-faq .accordion-button::after {
    background-size: 14px;
}

.wps-adm-faq-q {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 28px;
    margin-right: 15px;
    background: #f1f4f7;
    color: #155087;
    font-size: 10px;
    font-weight: 800;
}

.wps-adm-faq .accordion-button:not(.collapsed) .wps-adm-faq-q {
    background: #cc1f26;
    color: #fff;
}

.wps-adm-faq .accordion-body {
    padding: 25px;
    color: #626e79;
    background: #f8fafb;
    font-size: 14px;
    line-height: 1.9;
}

.wps-adm-faq-design {
    position: absolute;
    right: -170px;
    bottom: -150px;
    width: 400px;
    opacity: .45;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .wps-adm-hero-container {
        flex-direction: column;
        justify-content: center;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .wps-adm-hero {
        min-height: auto;
    }

    .wps-adm-hero-copy {
        max-width: 700px;
        width: 100%;
    }

    .wps-adm-form {
        max-width: 600px;
    }

    .wps-adm-about-grid {
        gap: 40px;
    }

    .wps-adm-process-content {
        grid-template-columns: 1fr;
    }

    .wps-adm-process-intro {
        border-right: 0;
        border-bottom: 1px solid #e2e7eb;
        padding-bottom: 25px;
    }

    .wps-adm-journey-line {
        width: 30px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .wps-adm-intro {
        padding: 60px 0;
    }

    .wps-adm-intro h1 {
        font-size: 35px;
    }

    .wps-adm-intro-content p {
        font-size: 14px;
        text-align: left;
    }

    .wps-adm-hero-container {
        min-height: auto;
    }

    .wps-adm-hero-copy {
        padding: 30px 0 0;
    }

    .wps-adm-hero-copy h2 {
        font-size: 36px;
    }

    .wps-adm-hero-overlay {
        background: rgba(7,42,73,.82);
    }

    .wps-adm-hero .wps-adm-form {
        display: none;
    }

    .wps-adm-mobile-form {
        display: block;
    }

    .wps-adm-about {
        padding: 70px 0;
    }

    .wps-adm-about-heading h2 {
        font-size: 30px;
    }

    .wps-adm-about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .wps-adm-about-content {
        padding-right: 0;
    }

    .wps-adm-about-content h3 {
        font-size: 29px;
    }

    .wps-adm-process {
        padding: 70px 0;
    }

    .wps-adm-section-heading h2 {
        font-size: 31px;
    }

    .wps-adm-process-content {
        padding: 25px;
    }

    .wps-adm-process-text p {
        text-align: left;
    }

    .wps-adm-offline {
        padding: 70px 0;
    }

    .wps-adm-offline-header h2 {
        font-size: 30px;
    }

    .wps-adm-journey {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 45px;
    }

    .wps-adm-journey-line {
        width: 1px;
        height: 30px;
        margin: 0 auto;
    }

    .wps-adm-journey-item {
        min-width: 0;
    }

    .wps-adm-documents {
        padding: 70px 0;
    }

    .wps-adm-documents-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .wps-adm-documents-heading h2 {
        font-size: 30px;
    }

    .wps-adm-documents-list {
        grid-template-columns: 1fr;
    }

    .wps-adm-document-actions {
        flex-direction: column;
    }

    .wps-adm-action-btn {
        justify-content: center;
    }

    .wps-adm-faq {
        padding: 70px 0;
    }

    .wps-adm-faq .accordion-button {
        padding: 17px 15px;
        font-size: 13px;
    }

    .wps-adm-faq-q {
        min-width: 28px;
        height: 25px;
        margin-right: 9px;
    }

}

/* =========================================================
   MIT WORLD PEACE SCHOOL
   SCHOOL TOUR PAGE - COMPLETE CSS
========================================================= */


/* =========================================================
   COMMON
========================================================= */

.wps-admission-page {
    width: 100%;
    overflow: hidden;
    background: #ffffff;
}

.wps-admission-page *,
.wps-admission-page *::before,
.wps-admission-page *::after {
    box-sizing: border-box;
}

.wps-admission-page a {
    text-decoration: none;
}

.wps-admission-page img {
    max-width: 100%;
}


/* =========================================================
   INTRO SECTION
========================================================= */

.wps-tour-intro {
    position: relative;
    width: 100%;
    padding: 90px 0 85px;
    background: #f7f9fb;
    overflow: hidden;
}

.wps-tour-intro::before {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    right: -240px;
    top: -230px;
    border-radius: 50%;
    background: rgba(21, 80, 135, .035);
}

.wps-tour-intro::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    left: -180px;
    bottom: -180px;
    border: 40px solid rgba(204, 31, 38, .035);
    border-radius: 50%;
}

.wps-tour-decoration {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 180px;
    max-width: 15%;
    opacity: .45;
    pointer-events: none;
}

.wps-tour-intro .container {
    position: relative;
    z-index: 2;
}

.wps-tour-intro-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}


/* KICKER */

.wps-tour-kicker {
    display: block;
    margin-bottom: 14px;

    color: #cc1f26;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    line-height: 1.3;
}


/* HEADING */

.wps-tour-intro-content h1 {
    margin: 0;

    color: #155087;

    font-size: clamp(42px, 5vw, 68px);
    font-weight: 300;
    line-height: .98;
    letter-spacing: -2.5px;
}

.wps-tour-intro-content h1 span {
    font-weight: 800;
    color: #155087;
}


/* ACCENT */

.wps-tour-accent {
    width: 55px;
    height: 4px;

    margin: 22px auto 25px;

    background: #cc1f26;
}


/* DESCRIPTION */

.wps-tour-intro-content p {
    max-width: 800px;

    margin: 0 auto;

    color: #687b8b;

    font-size: 14px;
    line-height: 1.85;
}


/* =========================================================
   SCHOOL TOUR MAIN
========================================================= */

.wps-tour-main {
    position: relative;
    width: 100%;
    padding: 75px 0 100px;
    background: #ffffff;
}

.wps-tour-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 35px;
}


/* =========================================================
   TOUR IMAGE
========================================================= */

.wps-tour-visual {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    background: #155087;
}

.wps-tour-visual img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition: transform 1s ease;
}

.wps-tour-visual:hover img {
    transform: scale(1.025);
}


/* IMAGE OVERLAY */

.wps-tour-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7, 38, 65, .70) 0%,
            rgba(7, 38, 65, .28) 65%,
            rgba(7, 38, 65, .05) 100%
        ),
        linear-gradient(
            0deg,
            rgba(5, 27, 46, .68) 0%,
            transparent 65%
        );
}


/* IMAGE CONTENT */

.wps-tour-visual-content {
    position: absolute;

    left: 45px;
    right: 45px;
    bottom: 45px;

    z-index: 3;
}

.wps-tour-visual-content span {
    display: block;

    margin-bottom: 12px;

    color: #ffffff;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.wps-tour-visual-content h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(36px, 4vw, 58px);
    font-weight: 300;
    line-height: .98;
    letter-spacing: -2px;
}

.wps-tour-visual-content h2 strong {
    display: block;
    font-weight: 800;
}


/* =========================================================
   FORM
========================================================= */

.wps-tour-form {
    position: relative;

    align-self: center;

    padding: 38px 40px 42px;

    background: #ffffff;

    border-top: 4px solid #cc1f26;

    box-shadow:
        0 20px 55px rgba(12, 52, 84, .12);
}


/* FORM HEADER */

.wps-form-header {
    margin-bottom: 25px;
}

.wps-form-header > span {
    display: block;

    margin-bottom: 7px;

    color: #cc1f26;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}

.wps-form-header h3 {
    margin: 0;

    color: #155087;

    font-size: 32px;
    font-weight: 300;
    line-height: 1.05;
}

.wps-form-header h3 strong {
    font-weight: 800;
}

.wps-form-header p {
    margin: 9px 0 0;

    color: #71808d;

    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   FORM ERRORS
========================================================= */

.wps-form-errors {
    margin-bottom: 18px;

    padding: 11px 14px;

    border-left: 3px solid #cc1f26;

    background: #fff5f5;

    color: #cc1f26;

    font-size: 11px;
    line-height: 1.6;
}


/* =========================================================
   BOOTSTRAP ALERT
========================================================= */

.wps-tour-form .alert {
    margin-bottom: 18px;

    border-radius: 0;

    font-size: 11px;
}

.wps-tour-form .alert p {
    margin: 0;
}


/* =========================================================
   FORM ROW
========================================================= */

.wps-field-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;
}


/* =========================================================
   FORM FIELD
========================================================= */

.wps-field {
    margin-bottom: 15px;
}

.wps-field label {
    display: block;

    margin-bottom: 5px;

    color: #334a5e;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .5px;
}

.wps-field input,
.wps-field select {
    width: 100%;
    height: 43px;

    padding: 0 12px;

    border: 1px solid #dbe2e8;
    border-radius: 0;

    outline: none;

    background: #ffffff;

    color: #33495c;

    font-family: inherit;
    font-size: 11px;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}

.wps-field input::placeholder {
    color: #a4adb5;
}

.wps-field input:hover,
.wps-field select:hover {
    border-color: #b8c5cf;
}

.wps-field input:focus,
.wps-field select:focus {
    border-color: #155087;

    box-shadow:
        0 0 0 3px rgba(21, 80, 135, .06);
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.wps-tour-submit {
    width: 100%;
    height: 48px;

    margin-top: 3px;

    padding: 0 15px;

    border: 0;

    background: #155087;
    color: #ffffff;

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

    cursor: pointer;

    font-family: inherit;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.8px;

    transition:
        background .3s ease,
        transform .3s ease;
}

.wps-tour-submit i {
    width: 28px;
    height: 28px;

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

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

    font-size: 10px;

    transition: transform .3s ease;
}

.wps-tour-submit:hover {
    background: #cc1f26;

    transform: translateY(-2px);
}

.wps-tour-submit:hover i {
    transform: translateX(5px);
}


/* =========================================================
   ADMISSION INFORMATION
========================================================= */

.wps-admission-info {
    position: relative;

    padding: 80px 0;

    background: #155087;

    overflow: hidden;
}

.wps-admission-info::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -250px;
    top: -250px;

    border-radius: 50%;

    border: 90px solid rgba(255,255,255,.035);
}

.wps-admission-info::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    left: -170px;
    bottom: -190px;

    border-radius: 50%;

    background: rgba(255,255,255,.025);
}

.wps-admission-info .container {
    position: relative;
    z-index: 2;
}

.wps-admission-content {
    max-width: 850px;

    margin: 0 auto;

    text-align: center;
}


/* KICKER */

.wps-admission-kicker {
    display: block;

    margin-bottom: 12px;

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

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2.5px;
}


/* HEADING */

.wps-admission-content h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(34px, 4vw, 52px);

    font-weight: 300;

    line-height: 1;

    letter-spacing: -1.5px;
}

.wps-admission-content h2 span {
    font-weight: 800;
}


/* LINE */

.wps-admission-line {
    width: 50px;
    height: 3px;

    margin: 20px auto 22px;

    background: #cc1f26;
}


/* TEXT */

.wps-admission-content p {
    max-width: 720px;

    margin: 0 auto;

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

    font-size: 14px;

    line-height: 1.8;
}



/* =========================================================
   NETWORK SECTION
========================================================= */

.wps-network-premium {
    position: relative;

    width: 100%;

    padding: 90px 0 100px;

    background: #f7f9fb;

    overflow: hidden;
}


/* BACKGROUND CIRCLES */

.wps-network-premium::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -240px;
    top: -230px;

    border-radius: 50%;

    background: rgba(21,80,135,.035);

    pointer-events: none;
}

.wps-network-premium::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    left: -180px;
    bottom: -180px;

    border: 40px solid rgba(204,31,38,.035);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   NETWORK HEADER
========================================================= */

.wps-network-premium-header {
    position: relative;

    z-index: 2;

    text-align: center;

    margin-bottom: 48px;
}


/* KICKER */

.wps-network-premium-kicker {
    display: flex;

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

    gap: 14px;

    margin-bottom: 15px;

    color: #cc1f26;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2.5px;
}

.wps-network-premium-kicker span {
    width: 45px;
    height: 2px;

    display: block;

    background: #cc1f26;
}


/* HEADING */

.wps-network-premium-header h2 {
    margin: 0;

    color: #155087;

    font-size: clamp(38px, 4vw, 58px);

    font-weight: 300;

    line-height: .95;

    letter-spacing: -2px;
}

.wps-network-premium-header h2 strong {
    display: block;

    color: #155087;

    font-weight: 800;
}


/* =========================================================
   NETWORK GRID
========================================================= */

.wps-network-premium-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;
}


/* =========================================================
   CAMPUS CARD
========================================================= */

.wps-campus-card {
    position: relative;

    display: block;

    overflow: hidden;

    background: #ffffff;

    border-radius: 14px;

    box-shadow:
        0 12px 35px rgba(18,53,82,.08);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.wps-campus-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 25px 55px rgba(18,53,82,.15);
}


/* TOP ACCENT */

.wps-campus-card::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 55px;
    height: 4px;

    background: #cc1f26;

    z-index: 5;
}

.wps-campus-card:nth-child(2)::after {
    background: #155087;
}


/* =========================================================
   CAMPUS IMAGE
========================================================= */

.wps-campus-image {
    position: relative;

    width: 100%;
    height: 245px;

    overflow: hidden;
}

.wps-campus-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition: transform .7s ease;
}

.wps-campus-card:hover
.wps-campus-image img {
    transform: scale(1.07);
}


/* IMAGE OVERLAY */

.wps-campus-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(7,35,60,0) 45%,
            rgba(7,35,60,.35) 100%
        );

    pointer-events: none;
}


/* =========================================================
   LOCATION BADGE
========================================================= */

.wps-campus-location {
    position: absolute;

    left: 0;
    bottom: 0;

    min-width: 120px;

    padding: 10px 20px;

    color: #ffffff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

    clip-path: polygon(
        0 0,
        92% 0,
        100% 100%,
        0 100%
    );

    z-index: 3;
}


/* RED */

.wps-location-red {
    background: #cc1f26;
}


/* BLUE */

.wps-location-blue {
    background: #155087;
}


/* =========================================================
   CAMPUS CONTENT
========================================================= */

.wps-campus-content {
    min-height: 145px;

    padding: 24px 26px 21px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;
}


/* TITLE */

.wps-campus-content h3 {
    margin: 0;

    color: #155087;

    font-size: 22px;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: -.4px;

    transition: color .3s ease;
}

.wps-campus-card:hover
.wps-campus-content h3 {
    color: #cc1f26;
}


/* =========================================================
   READ MORE
========================================================= */

.wps-campus-bottom {
    display: flex;

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

    margin-top: 20px;

    color: #155087;

    font-size: 12px;

    font-weight: 700;
}

.wps-campus-arrow {
    width: 36px;
    height: 36px;

    display: flex;

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

    border: 1px solid #dce4ea;

    color: #155087;

    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease,
        transform .3s ease;
}

.wps-campus-arrow i {
    font-size: 11px;

    transition: transform .3s ease;
}

.wps-campus-card:hover
.wps-campus-arrow {
    background: #155087;

    border-color: #155087;

    color: #ffffff;

    transform: translateX(2px);
}

.wps-campus-card:hover
.wps-campus-arrow i {
    transform: translateX(4px);
}


/* =========================================================
   RESPONSIVE - 1200px
========================================================= */

@media (max-width: 1200px) {

    .wps-tour-layout {
        gap: 25px;
    }

    .wps-tour-form {
        padding: 32px;
    }

    .wps-tour-visual-content {
        left: 35px;
        right: 35px;
    }

    .wps-campus-image {
        height: 220px;
    }

    .wps-campus-content {
        padding: 22px;
    }

}


/* =========================================================
   RESPONSIVE - 991px
========================================================= */

@media (max-width: 991px) {

    /* INTRO */

    .wps-tour-intro {
        padding: 70px 0;
    }

    .wps-tour-decoration {
        width: 130px;
    }


    /* TOUR */

    .wps-tour-main {
        padding: 55px 0 75px;
    }

    .wps-tour-layout {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .wps-tour-visual {
        min-height: 400px;
    }

    .wps-tour-form {
        width: 88%;

        margin: -55px auto 0;

        z-index: 5;

        padding: 30px;
    }


    /* ADMISSION */

    .wps-admission-info {
        padding: 65px 0;
    }


    /* NETWORK */

    .wps-network-premium {
        padding: 70px 0 80px;
    }

    .wps-network-premium-grid {
        grid-template-columns: 1fr 1fr;

        gap: 20px;
    }

    .wps-campus-card:last-child {
        grid-column: 1 / -1;

        width: calc(50% - 10px);

        margin: 0 auto;
    }

}


/* =========================================================
   RESPONSIVE - 767px
========================================================= */

@media (max-width: 767px) {

    /* INTRO */

    .wps-tour-intro {
        padding: 55px 0 60px;
    }

    .wps-tour-kicker {
        font-size: 9px;

        letter-spacing: 2px;
    }

    .wps-tour-intro-content h1 {
        font-size: 39px;

        letter-spacing: -1px;
    }

    .wps-tour-intro-content p {
        font-size: 12px;

        line-height: 1.7;
    }


    /* TOUR */

    .wps-tour-main {
        padding: 45px 0 60px;
    }

    .wps-tour-visual {
        min-height: 300px;
    }

    .wps-tour-visual-content {
        left: 22px;
        right: 22px;
        bottom: 30px;
    }

    .wps-tour-visual-content span {
        font-size: 8px;

        letter-spacing: 1.8px;
    }

    .wps-tour-visual-content h2 {
        font-size: 31px;

        letter-spacing: -.8px;
    }

    .wps-tour-form {
        width: 92%;

        margin-top: -40px;

        padding: 23px 18px 25px;

        border-top-width: 3px;
    }

    .wps-form-header {
        margin-bottom: 16px;
    }

    .wps-form-header h3 {
        font-size: 25px;
    }

    .wps-form-header p {
        font-size: 10px;
    }

    .wps-field-row {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .wps-field {
        margin-bottom: 11px;
    }

    .wps-field input,
    .wps-field select {
        height: 39px;

        font-size: 10px;
    }

    .wps-tour-submit {
        height: 43px;

        font-size: 8px;
    }


    /* ADMISSION */

    .wps-admission-info {
        padding: 55px 20px;
    }

    .wps-admission-kicker {
        font-size: 8px;

        letter-spacing: 2px;
    }

    .wps-admission-content h2 {
        font-size: 32px;
    }

    .wps-admission-content p {
        font-size: 12px;

        line-height: 1.7;
    }


    /* NETWORK */

    .wps-network-premium {
        padding: 55px 0 65px;
    }

    .wps-network-premium-header {
        margin-bottom: 30px;
    }

    .wps-network-premium-kicker {
        gap: 9px;

        font-size: 8px;

        letter-spacing: 1.8px;
    }

    .wps-network-premium-kicker span {
        width: 28px;
    }

    .wps-network-premium-header h2 {
        font-size: 34px;

        letter-spacing: -1px;
    }

    .wps-network-premium-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .wps-campus-card:last-child {
        grid-column: auto;

        width: 100%;

        margin: 0;
    }

    .wps-campus-image {
        height: 215px;
    }

    .wps-campus-content {
        min-height: 130px;

        padding: 20px;
    }

    .wps-campus-content h3 {
        font-size: 19px;
    }

}


/* =========================================================
   RESPONSIVE - 480px
========================================================= */

@media (max-width: 480px) {

    /* INTRO */

    .wps-tour-intro-content h1 {
        font-size: 34px;
    }

    .wps-tour-intro-content p {
        font-size: 11px;
    }


    /* TOUR */

    .wps-tour-visual {
        min-height: 260px;
    }

    .wps-tour-visual-content h2 {
        font-size: 27px;
    }

    .wps-tour-form {
        width: 94%;

        margin-top: -35px;

        padding: 20px 15px 22px;
    }

    .wps-form-header h3 {
        font-size: 22px;
    }


    /* ADMISSION */

    .wps-admission-content h2 {
        font-size: 28px;
    }


    /* NETWORK */

    .wps-network-premium-header h2 {
        font-size: 29px;
    }

    .wps-campus-image {
        height: 195px;
    }

    .wps-campus-location {
        min-width: 105px;

        padding: 8px 15px;

        font-size: 9px;
    }

    .wps-campus-content {
        min-height: 120px;

        padding: 18px;
    }

    .wps-campus-content h3 {
        font-size: 18px;
    }

    .wps-campus-bottom {
        margin-top: 14px;

        font-size: 11px;
    }

    .wps-campus-arrow {
        width: 32px;
        height: 32px;
    }

}



/* =========================================================
   WPS PREMIUM NEWSLETTER PAGE
========================================================= */

.wps-newsletter-page {
    position: relative;
    padding: 90px 0 110px;
    background: #f7f9fc;
    overflow: hidden;
}


/* Decorative background */

.wps-newsletter-page::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(21, 80, 135, 0.045);
    top: -180px;
    right: -130px;
    pointer-events: none;
}

.wps-newsletter-page::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(204, 31, 38, 0.035);
    bottom: -160px;
    left: -120px;
    pointer-events: none;
}


/* =========================================================
   HEADING
========================================================= */

.wps-newsletter-heading {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto 55px;
}

.wps-newsletter-eyebrow {
    display: inline-block;
    margin-bottom: 12px;

    color: #cc1f26;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.wps-newsletter-title {
    margin: 0;

    color: #155087;

    font-size: 46px;
    font-weight: 700;
    line-height: 1.15;
}

.wps-newsletter-line {
    width: 65px;
    height: 3px;

    margin: 18px auto 20px;

    background: #cc1f26;
    border-radius: 50px;
}

.wps-newsletter-intro {
    max-width: 650px;
    margin: 0 auto;

    color: #697586;

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   GRID
========================================================= */

.wps-newsletter-grid {
    position: relative;
    z-index: 2;
}


/* =========================================================
   CARD
========================================================= */

.wps-newsletter-card {
    position: relative;

    height: 100%;

    background: #ffffff;

    border-radius: 22px;

    overflow: hidden;

    border: 1px solid rgba(21, 80, 135, 0.08);

    box-shadow:
        0 10px 35px rgba(21, 80, 135, 0.08);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}

.wps-newsletter-card:hover {
    transform: translateY(-10px);

    border-color: rgba(21, 80, 135, 0.18);

    box-shadow:
        0 25px 55px rgba(21, 80, 135, 0.15);
}


.wps-newsletter-image {
    position: relative;
    height: auto;
    min-height: 0;
    overflow: hidden;
    background: #f1f4f8;
    padding: 15px;
}

.wps-newsletter-image img {
    width: 100%;
    height: auto;
    display: block;

    object-fit: contain;
    object-position: center;

    transition: transform 0.6s ease;
}

.wps-newsletter-card:hover .wps-newsletter-image img {
    transform: scale(1.03);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.wps-newsletter-overlay {
    position: absolute;

    inset: 0;

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

    background: rgba(21, 80, 135, 0.72);

    opacity: 0;

    transition:
        opacity 0.35s ease;
}

.wps-newsletter-card:hover .wps-newsletter-overlay {
    opacity: 1;
}


/* View button */

.wps-newsletter-view {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 13px 22px;

    color: #155087;
    background: #ffffff;

    border-radius: 50px;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

    transform: translateY(15px);

    transition:
        transform 0.35s ease,
        background 0.3s ease,
        color 0.3s ease;
}

.wps-newsletter-card:hover .wps-newsletter-view {
    transform: translateY(0);
}

.wps-newsletter-view:hover {
    color: #ffffff;
    background: #cc1f26;
}

.wps-newsletter-view i {
    font-size: 17px;
}


/* =========================================================
   CONTENT AREA
========================================================= */

.wps-newsletter-content {
    min-height: 105px;

    display: flex;
    align-items: center;

    padding: 22px 20px;

    gap: 15px;
}


/* =========================================================
   ICON
========================================================= */

.wps-newsletter-icon {
    width: 48px;
    height: 48px;

    min-width: 48px;

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

    color: #155087;

    background: rgba(21, 80, 135, 0.08);

    border-radius: 14px;

    transition:
        background 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease;
}

.wps-newsletter-card:hover .wps-newsletter-icon {
    color: #ffffff;
    background: #cc1f26;

    transform: rotate(-5deg) scale(1.05);
}

.wps-newsletter-icon i {
    font-size: 19px;
}


/* =========================================================
   TEXT
========================================================= */

.wps-newsletter-text {
    min-width: 0;
    flex: 1;
}

.wps-newsletter-label {
    display: block;

    margin-bottom: 5px;

    color: #cc1f26;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.wps-newsletter-text h3 {
    margin: 0;

    color: #155087;

    font-size: 17px;
    font-weight: 700;

    line-height: 1.35;
}


/* =========================================================
   ARROW
========================================================= */

.wps-newsletter-arrow {
    width: 42px;
    height: 42px;

    min-width: 42px;

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

    color: #155087;

    background: #f1f5f9;

    border-radius: 50%;

    text-decoration: none;

    transition:
        background 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease;
}

.wps-newsletter-card:hover .wps-newsletter-arrow {
    color: #ffffff;
    background: #155087;

    transform: translateX(4px);
}

.wps-newsletter-arrow i {
    font-size: 14px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .wps-newsletter-page {
        padding: 75px 0 90px;
    }

    .wps-newsletter-heading {
        margin-bottom: 45px;
    }

    .wps-newsletter-title {
        font-size: 40px;
    }

    .wps-newsletter-image {
        height: 330px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .wps-newsletter-page {
        padding: 60px 0 70px;
    }

    .wps-newsletter-heading {
        margin-bottom: 35px;
        padding: 0 10px;
    }

    .wps-newsletter-eyebrow {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .wps-newsletter-title {
        font-size: 34px;
    }

    .wps-newsletter-intro {
        font-size: 14px;
        line-height: 1.7;
    }

    .wps-newsletter-image {
        height: 360px;
    }

    .wps-newsletter-content {
        padding: 18px 16px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .wps-newsletter-title {
        font-size: 30px;
    }

    .wps-newsletter-image {
        height: 330px;
    }

    .wps-newsletter-icon {
        width: 43px;
        height: 43px;
        min-width: 43px;
    }

    .wps-newsletter-text h3 {
        font-size: 15px;
    }

    .wps-newsletter-arrow {
        width: 38px;
        height: 38px;
        min-width: 38px;
    }

}



/* =========================================================
   TRANSFER CERTIFICATE PREMIUM DESIGN
========================================================= */

.tc-premium-banner {
    position: relative;
    overflow: hidden;
    background: #f7f9fc;
    padding: 65px 0 55px;
}

.tc-premium-banner .inner-box {
    position: relative;
    z-index: 2;
}

.tc-banner-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: #cc1f26;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.tc-premium-banner .inner-title {
    color: #155087;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.15;
}

.tc-banner-line {
    width: 60px;
    height: 3px;
    margin: 18px auto 0;
    background: #cc1f26;
    border-radius: 50px;
}


/* =========================================================
   MAIN SECTION
========================================================= */

.tc-premium-section {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
    background: #ffffff;
}

.tc-premium-wrapper {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 80px;
    align-items: center;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.tc-premium-content {
    position: relative;
    z-index: 2;
}

.tc-section-tag {
    display: inline-block;
    margin-bottom: 12px;
    color: #cc1f26;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.tc-premium-content h2 {
    margin: 0;
    color: #155087;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.18;
}

.tc-premium-content h2 span {
    color: #cc1f26;
}

.tc-red-line {
    width: 55px;
    height: 3px;
    margin: 18px 0 23px;
    background: #cc1f26;
    border-radius: 50px;
}

.tc-premium-content > p {
    max-width: 520px;
    margin-bottom: 30px;
    color: #666;
    font-size: 15px;
    line-height: 1.85;
}


/* =========================================================
   INFO POINTS
========================================================= */

.tc-info-points {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tc-info-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    max-width: 500px;
    background: #f7f9fc;
    border: 1px solid #edf1f5;
    border-radius: 15px;
    transition: all 0.3s ease;
}

.tc-info-item:hover {
    transform: translateX(6px);
    border-color: rgba(21,80,135,0.15);
    box-shadow: 0 12px 28px rgba(21,80,135,0.08);
}

.tc-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    color: #155087;
    background: #ffffff;
    border-radius: 12px;
    font-size: 16px;
}

.tc-info-item strong {
    display: block;
    margin-bottom: 3px;
    color: #155087;
    font-size: 13px;
}

.tc-info-item span {
    display: block;
    color: #777;
    font-size: 10px;
    line-height: 1.5;
}


/* =========================================================
   FORM CARD
========================================================= */

.tc-premium-card {
    position: relative;
    padding: 42px;
    background: #ffffff;
    border: 1px solid #e4eaf0;
    border-radius: 28px;
    box-shadow: 0 25px 60px rgba(21,80,135,0.12);
}

.tc-premium-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 130px;
    height: 130px;
    background: rgba(204,31,38,0.06);
    border-radius: 0 0 0 100%;
    pointer-events: none;
}

.tc-card-icon {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 22px;
    color: #ffffff;
    background: #155087;
    border-radius: 16px;
    font-size: 21px;
    box-shadow: 0 12px 25px rgba(21,80,135,0.20);
}

.tc-card-label {
    position: relative;
    z-index: 2;
    display: block;
    margin-bottom: 8px;
    color: #cc1f26;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.tc-premium-card h3 {
    position: relative;
    z-index: 2;
    margin: 0;
    color: #155087;
    font-size: 27px;
    font-weight: 700;
}

.tc-premium-card > p {
    position: relative;
    z-index: 2;
    margin: 10px 0 25px;
    color: #777;
    font-size: 13px;
    line-height: 1.7;
}


/* =========================================================
   INPUT
========================================================= */

.tc-form-group {
    position: relative;
    z-index: 2;
    margin-bottom: 20px;
}

.tc-form-group label {
    display: block;
    margin-bottom: 8px;
    color: #155087;
    font-size: 12px;
    font-weight: 700;
}

.tc-input-wrap {
    position: relative;
}

.tc-input-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: #155087;
    transform: translateY(-50%);
    pointer-events: none;
}

.tc-input-wrap input {
    width: 100%;
    height: 55px;
    padding: 0 18px 0 48px;
    color: #333;
    background: #f8fafc;
    border: 1px solid #dfe6ed;
    border-radius: 13px;
    outline: none;
    font-size: 13px;
    transition: all 0.3s ease;
}

.tc-input-wrap input::placeholder {
    color: #9aa3ad;
}

.tc-input-wrap input:focus {
    background: #ffffff;
    border-color: #155087;
    box-shadow: 0 0 0 4px rgba(21,80,135,0.08);
}


/* =========================================================
   VERIFY BUTTON
========================================================= */

.tc-verify-btn {
    position: relative;
    z-index: 2;

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

    width: 100%;

    padding: 5px 6px 5px 22px;

    color: #ffffff;
    background: #155087;

    border-radius: 50px;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    transition: all 0.3s ease;
}

.tc-verify-btn span {
    padding-left: 3px;
}

.tc-verify-btn i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    color: #ffffff;
    background: #cc1f26;

    border-radius: 50%;
}

.tc-verify-btn:hover {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(21,80,135,0.20);
}

.tc-verify-btn:hover i {
    transform: translateX(3px);
}


/* =========================================================
   SECURE NOTE
========================================================= */

.tc-secure-note {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 16px;

    color: #888;

    font-size: 10px;
}

.tc-secure-note i {
    color: #155087;
}


/* =========================================================
   BROWSER NOTE
========================================================= */

.tc-browser-note {
    display: flex;
    align-items: flex-start;
    gap: 18px;

    margin-top: 35px;
    padding: 22px 25px;

    background: #f7f9fc;

    border-left: 4px solid #cc1f26;
    border-radius: 15px;
}

.tc-browser-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 45px;

    width: 45px;
    height: 45px;

    color: #ffffff;
    background: #155087;

    border-radius: 12px;
}

.tc-browser-note strong {
    display: block;

    margin-bottom: 5px;

    color: #155087;

    font-size: 13px;
}

.tc-browser-note p {
    margin: 0;

    color: #777;

    font-size: 12px;
    line-height: 1.7;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .tc-premium-banner {
        padding: 55px 0 45px;
    }

    .tc-premium-banner .inner-title {
        font-size: 40px;
    }

    .tc-premium-section {
        padding: 70px 0;
    }

    .tc-premium-wrapper {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .tc-premium-content {
        max-width: 700px;
        margin: 0 auto;
    }

    .tc-premium-card {
        max-width: 700px;
        width: 100%;
        margin: 0 auto;
    }

}


@media (max-width: 767px) {

    .tc-premium-banner {
        padding: 45px 0 35px;
    }

    .tc-banner-eyebrow {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .tc-premium-banner .inner-title {
        font-size: 32px;
    }

    .tc-premium-section {
        padding: 55px 0;
    }

    .tc-premium-content h2 {
        font-size: 31px;
    }

    .tc-premium-content > p {
        font-size: 14px;
    }

    .tc-premium-card {
        padding: 30px 25px;
        border-radius: 22px;
    }

    .tc-premium-card h3 {
        font-size: 24px;
    }

    .tc-browser-note {
        padding: 18px;
    }

}


@media (max-width: 480px) {

    .tc-premium-banner .inner-title {
        font-size: 28px;
    }

    .tc-section-tag {
        font-size: 10px;
    }

    .tc-premium-content h2 {
        font-size: 27px;
    }

    .tc-premium-card {
        padding: 25px 18px;
    }

    .tc-info-item {
        padding: 12px;
    }

    .tc-info-icon {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
    }

    .tc-browser-note {
        flex-direction: column;
        gap: 12px;
    }

}



/* =========================================================
   GALLERY PREMIUM REDESIGN
========================================================= */

.wps-gallery-banner {
    position: relative;
    overflow: hidden;
    background: #f7f9fc;
    padding: 65px 0 45px;
}

.wps-gallery-banner .inner-box {
    position: relative;
    z-index: 2;
}

.wps-gallery-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: #cc1f26;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1.4;
    text-transform: uppercase;
}

.wps-gallery-banner .inner-title {
    margin: 0;
    color: #155087;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.15;
}

.wps-gallery-line {
    width: 65px;
    height: 3px;
    margin: 18px auto 0;
    background: #cc1f26;
    border-radius: 50px;
}


/* =========================================================
   GALLERY SWITCH
========================================================= */

.wps-gallery-switch {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 35px auto 0;
    padding: 6px;
    width: fit-content;
    background: #ffffff;
    border: 1px solid #e8edf3;
    border-radius: 60px;
    box-shadow: 0 12px 35px rgba(21, 80, 135, 0.08);
}

.wps-gallery-switch-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 22px;
    color: #155087;
    background: transparent;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.wps-gallery-switch-btn:hover {
    color: #155087;
    transform: translateY(-2px);
}

.wps-gallery-switch-btn.active {
    color: #ffffff;
    background: #155087;
    box-shadow: 0 8px 20px rgba(21, 80, 135, 0.20);
}

.wps-gallery-switch-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 13px;
}

.wps-gallery-switch-btn.active .wps-gallery-switch-icon {
    background: rgba(255,255,255,0.15);
}


/* =========================================================
   INTRO
========================================================= */

.wps-gallery-intro {
    padding: 90px 0;
    background: #ffffff;
}

.wps-gallery-intro-wrap {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 70px;
    align-items: center;
}

.wps-gallery-intro-image {
    position: relative;
    padding: 0 18px 18px 0;
}

.wps-gallery-intro-image::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 78%;
    height: 82%;
    background: #155087;
    border-radius: 28px;
    z-index: 0;
}

.wps-gallery-intro-image img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 430px;
    object-fit: cover;
    border-radius: 28px;
    display: block;
}

.wps-gallery-image-caption {
    position: absolute;
    left: 35px;
    bottom: 35px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 20px 13px 13px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.wps-gallery-image-caption > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    color: #ffffff;
    background: #cc1f26;
    border-radius: 11px;
}

.wps-gallery-image-caption small {
    display: block;
    margin-bottom: 2px;
    color: #777;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.wps-gallery-image-caption strong {
    display: block;
    color: #155087;
    font-size: 15px;
}


.wps-gallery-section-tag {
    display: inline-block;
    margin-bottom: 12px;
    color: #cc1f26;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.wps-gallery-intro-content h2 {
    margin: 0;
    color: #155087;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
}

.wps-gallery-intro-content h2 span,
.wps-gallery-heading h2 span {
    color: #cc1f26;
}

.wps-gallery-red-line {
    width: 55px;
    height: 3px;
    margin: 18px 0 22px;
    background: #cc1f26;
    border-radius: 50px;
}

.wps-gallery-intro-content p {
    margin-bottom: 28px;
    color: #666;
    font-size: 16px;
    line-height: 1.8;
}


.wps-gallery-intro-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.wps-gallery-intro-point {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: #f7f9fc;
    border: 1px solid #edf1f5;
    border-radius: 14px;
    transition: all 0.3s ease;
}

.wps-gallery-intro-point:hover {
    transform: translateY(-5px);
    border-color: rgba(21,80,135,0.15);
    box-shadow: 0 12px 25px rgba(21,80,135,0.08);
}

.wps-gallery-intro-point > span {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    color: #155087;
    background: #ffffff;
    border-radius: 11px;
}

.wps-gallery-intro-point strong {
    display: block;
    margin-bottom: 3px;
    color: #155087;
    font-size: 13px;
}

.wps-gallery-intro-point small {
    display: block;
    color: #777;
    font-size: 10px;
    line-height: 1.4;
}


/* =========================================================
   PHOTO GALLERY
========================================================= */

.wps-photo-gallery {
    padding: 90px 0;
    background: #f7f9fc;
}

.wps-gallery-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 40px;
}

.wps-gallery-heading h2 {
    margin: 0;
    color: #155087;
    font-size: 38px;
    font-weight: 700;
}

.wps-gallery-heading-line {
    width: 160px;
    height: 1px;
    margin-bottom: 10px;
    background: #dfe5eb;
}


/* =========================================================
   GALLERY GRID
========================================================= */

.wps-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.wps-gallery-item {
    min-width: 0;
}

.wps-gallery-large {
    grid-row: span 2;
}

.wps-gallery-card {
    position: relative;
    height: 310px;
    overflow: hidden;
    background: #155087;
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(21,80,135,0.08);
}

.wps-gallery-large .wps-gallery-card {
    height: 642px;
}

.wps-gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(.2,.7,.2,1);
}

.wps-gallery-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(8,31,52,0.90) 0%,
        rgba(8,31,52,0.25) 48%,
        rgba(8,31,52,0) 75%
    );
    z-index: 1;
}

.wps-gallery-card:hover img {
    transform: scale(1.08);
}

.wps-gallery-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.wps-gallery-overlay-icon {
    align-self: flex-end;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    color: #155087;
    background: #ffffff;
    border-radius: 50%;
    opacity: 0;
    transform: translateY(-8px);
    transition: all 0.35s ease;
}

.wps-gallery-card:hover .wps-gallery-overlay-icon {
    opacity: 1;
    transform: translateY(0);
}

.wps-gallery-overlay-content {
    transform: translateY(8px);
    transition: transform 0.35s ease;
}

.wps-gallery-card:hover .wps-gallery-overlay-content {
    transform: translateY(0);
}

.wps-gallery-overlay-content span {
    display: block;
    margin-bottom: 6px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0.8;
}

.wps-gallery-overlay-content h3 {
    max-width: 90%;
    margin: 0;
    color: #ffffff;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.wps-gallery-bottom {
    padding: 55px 0;
    background: #155087;
}

.wps-gallery-bottom-inner {
    display: flex;
    align-items: center;
    gap: 22px;
}

.wps-gallery-bottom-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    color: #ffffff;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 17px;
    font-size: 23px;
}

.wps-gallery-bottom-inner > div:nth-child(2) {
    flex: 1;
}

.wps-gallery-bottom-inner span {
    display: block;
    margin-bottom: 5px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    opacity: 0.7;
}

.wps-gallery-bottom-inner h2 {
    margin: 0;
    color: #ffffff;
    font-size: 25px;
    font-weight: 600;
}

.wps-gallery-bottom-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 22px;
    color: #155087;
    background: #ffffff;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.wps-gallery-bottom-btn:hover {
    color: #155087;
    transform: translateX(5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1199px) {

    .wps-gallery-intro-wrap {
        gap: 45px;
    }

    .wps-gallery-intro-content h2 {
        font-size: 35px;
    }

    .wps-gallery-card {
        height: 280px;
    }

    .wps-gallery-large .wps-gallery-card {
        height: 582px;
    }

}


@media (max-width: 991px) {

    .wps-gallery-banner {
        padding: 55px 0 40px;
    }

    .wps-gallery-banner .inner-title {
        font-size: 40px;
    }

    .wps-gallery-intro {
        padding: 70px 0;
    }

    .wps-gallery-intro-wrap {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .wps-gallery-intro-image {
        max-width: 700px;
        margin: 0 auto;
        width: 100%;
    }

    .wps-gallery-intro-content {
        max-width: 700px;
        margin: auto;
    }

    .wps-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .wps-gallery-large {
        grid-row: auto;
        grid-column: span 2;
    }

    .wps-gallery-large .wps-gallery-card {
        height: 430px;
    }

    .wps-gallery-bottom-inner h2 {
        font-size: 21px;
    }

}


@media (max-width: 767px) {

    .wps-gallery-banner {
        padding: 45px 0 30px;
    }

    .wps-gallery-eyebrow {
        font-size: 11px;
        letter-spacing: 2px;
    }

    .wps-gallery-banner .inner-title {
        font-size: 32px;
    }

    .wps-gallery-switch {
        width: auto;
        max-width: 330px;
    }

    .wps-gallery-switch-btn {
        flex: 1;
        justify-content: center;
        padding: 10px 13px;
        font-size: 12px;
    }

    .wps-gallery-intro {
        padding: 55px 0;
    }

    .wps-gallery-intro-image img {
        height: 330px;
    }

    .wps-gallery-intro-content h2 {
        font-size: 30px;
    }

    .wps-gallery-intro-points {
        grid-template-columns: 1fr;
    }

    .wps-photo-gallery {
        padding: 60px 0;
    }

    .wps-gallery-heading {
        margin-bottom: 30px;
    }

    .wps-gallery-heading h2 {
        font-size: 30px;
    }

    .wps-gallery-heading-line {
        display: none;
    }

    .wps-gallery-grid {
        grid-template-columns: 1fr;
    }

    .wps-gallery-large {
        grid-column: auto;
    }

    .wps-gallery-large .wps-gallery-card,
    .wps-gallery-card {
        height: 330px;
    }

    .wps-gallery-bottom {
        padding: 40px 0;
    }

    .wps-gallery-bottom-inner {
        flex-wrap: wrap;
    }

    .wps-gallery-bottom-inner > div:nth-child(2) {
        flex: 1 1 calc(100% - 85px);
    }

    .wps-gallery-bottom-btn {
        margin-left: 82px;
    }

}


@media (max-width: 480px) {

    .wps-gallery-banner .inner-title {
        font-size: 28px;
    }

    .wps-gallery-switch {
        width: 100%;
    }

    .wps-gallery-switch-btn {
        padding: 9px 8px;
        gap: 5px;
        font-size: 11px;
    }

    .wps-gallery-switch-icon {
        width: 25px;
        height: 25px;
    }

    .wps-gallery-intro-image {
        padding-right: 10px;
        padding-bottom: 10px;
    }

    .wps-gallery-intro-image img {
        height: 260px;
        border-radius: 20px;
    }

    .wps-gallery-image-caption {
        left: 18px;
        bottom: 22px;
        padding: 9px 14px 9px 9px;
    }

    .wps-gallery-image-caption > span {
        width: 35px;
        height: 35px;
    }

    .wps-gallery-image-caption strong {
        font-size: 12px;
    }

    .wps-gallery-intro-content h2 {
        font-size: 27px;
    }

    .wps-gallery-card,
    .wps-gallery-large .wps-gallery-card {
        height: 270px;
    }

    .wps-gallery-bottom-inner {
        align-items: flex-start;
    }

    .wps-gallery-bottom-btn {
        margin-left: 0;
        margin-top: 8px;
    }

}



/* =========================================================
   MIT-WPS NETWORK OF SCHOOLS
   PREMIUM DESIGN
========================================================= */

.wps-network-premium {
    position: relative;
    width: 100%;
    padding: 110px 0 120px;
    background: #f7f9fc;
    overflow: hidden;
}


/* =========================================================
   BACKGROUND DETAILS
========================================================= */

.wps-network-premium::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(21, 80, 135, 0.07);
    border-radius: 50%;
    top: -180px;
    right: -120px;
}

.wps-network-premium::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(204, 31, 38, 0.07);
    border-radius: 50%;
    bottom: -130px;
    left: -100px;
}


/* =========================================================
   CONTAINER
========================================================= */

.wps-network-wrap {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}


/* =========================================================
   HEADER
========================================================= */

.wps-network-header {
    display: grid;
    grid-template-columns: 1fr 0.7fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 55px;
}


.wps-network-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: #cc1f26;
    text-transform: uppercase;

    margin-bottom: 18px;
}


.wps-network-eyebrow::before {
    content: "";
    width: 38px;
    height: 2px;
    background: #cc1f26;
    display: inline-block;
}


.wps-network-heading-left h2 {
    margin: 0;
    color: #155087;

    font-size: clamp(38px, 4.5vw, 66px);
    line-height: 0.98;
    font-weight: 300;
    letter-spacing: -2px;
}


.wps-network-heading-left h2 strong {
    display: block;
    font-weight: 800;
    color: #155087;
}


.wps-network-heading-right {
    padding-bottom: 5px;
}


.wps-network-heading-right p {
    max-width: 460px;
    margin: 0 0 25px auto;

    color: #5c6875;
    font-size: 16px;
    line-height: 1.8;
}


.wps-network-heading-line {
    width: 100%;
    height: 1px;
    background: #dce3ea;
    position: relative;
}


.wps-network-heading-line span {
    display: block;
    width: 90px;
    height: 3px;
    background: #cc1f26;
    position: absolute;
    right: 0;
    top: -1px;
}


/* =========================================================
   GRID
========================================================= */

.wps-network-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}


/* =========================================================
   CARD
========================================================= */

.wps-network-card {
    position: relative;
    background: #ffffff;
    border-radius: 0;
    overflow: hidden;

    box-shadow: 0 15px 45px rgba(15, 49, 82, 0.08);

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease;

    opacity: 0;
    animation: wpsNetworkReveal 0.8s ease forwards;
}


.wps-network-card:nth-child(1) {
    animation-delay: 0.1s;
}


.wps-network-card:nth-child(2) {
    animation-delay: 0.22s;
}


.wps-network-card:nth-child(3) {
    animation-delay: 0.34s;
}


.wps-network-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 28px 65px rgba(15, 49, 82, 0.15);
}


/* =========================================================
   IMAGE
========================================================= */

.wps-network-image {
    position: relative;
    height: 390px;
    overflow: hidden;
    background: #155087;
}


.wps-network-image img {
    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;
    object-position: center;

    transition:
        transform 0.8s cubic-bezier(.2,.7,.2,1);
}


.wps-network-card:hover .wps-network-image img {
    transform: scale(1.08);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.wps-network-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(9, 38, 67, 0.72) 0%,
            rgba(9, 38, 67, 0.10) 45%,
            rgba(9, 38, 67, 0) 70%
        );

    transition: opacity 0.4s ease;
}


.wps-network-card:hover .wps-network-image-overlay {
    background:
        linear-gradient(
            to top,
            rgba(9, 38, 67, 0.82) 0%,
            rgba(9, 38, 67, 0.12) 55%,
            rgba(9, 38, 67, 0) 75%
        );
}


/* =========================================================
   LOCATION BADGE
========================================================= */

.wps-network-location {
    position: absolute;
    top: 22px;
    left: 22px;

    padding: 9px 14px;

    background: rgba(255, 255, 255, 0.95);
    color: #155087;

    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 1.5px;

    backdrop-filter: blur(8px);
}


/* =========================================================
   IMAGE CORNER ICON
========================================================= */

.wps-network-arrow {
    position: absolute;

    right: 22px;
    top: 22px;

    width: 44px;
    height: 44px;

    border: 1px solid rgba(255, 255, 255, 0.5);

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

    color: #ffffff;

    opacity: 0;
    transform: translateY(-10px);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        background 0.35s ease;
}


.wps-network-card:hover .wps-network-arrow {
    opacity: 1;
    transform: translateY(0);
}


.wps-network-arrow:hover {
    background: #cc1f26;
    border-color: #cc1f26;
}


/* =========================================================
   CONTENT
========================================================= */

.wps-network-content {
    min-height: 205px;
    padding: 30px 32px 27px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.wps-network-campus {
    display: block;

    margin-bottom: 7px;

    color: #cc1f26;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}


.wps-network-content h3 {
    margin: 0;

    color: #155087;

    font-size: 34px;
    line-height: 1.1;
    font-weight: 300;
}


.wps-network-content h3::after {
    content: "";
    display: block;

    width: 35px;
    height: 3px;

    background: #cc1f26;

    margin-top: 14px;

    transition: width 0.4s ease;
}


.wps-network-card:hover .wps-network-content h3::after {
    width: 65px;
}


.wps-network-content p {
    margin: 14px 0 0;

    color: #6c7783;

    font-size: 14px;
    line-height: 1.6;
}


/* =========================================================
   EXPLORE LINK
========================================================= */

.wps-network-link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding-top: 20px;
    margin-top: 20px;

    border-top: 1px solid #e7ebef;

    color: #155087;
    text-decoration: none;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;

    transition: color 0.3s ease;
}


.wps-network-link i {
    width: 35px;
    height: 35px;

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

    border: 1px solid #d9e1e8;

    font-size: 12px;

    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease;
}


.wps-network-link:hover {
    color: #cc1f26;
}


.wps-network-link:hover i {
    background: #155087;
    border-color: #155087;
    color: #ffffff;

    transform: translateX(5px);
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

@keyframes wpsNetworkReveal {

    0% {
        opacity: 0;
        transform: translateY(35px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .wps-network-premium {
        padding: 85px 0 90px;
    }


    .wps-network-header {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: 40px;
    }


    .wps-network-heading-right p {
        margin-left: 0;
        margin-right: 0;
    }


    .wps-network-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .wps-network-card:last-child {
        grid-column: span 2;
        max-width: calc(50% - 14px);
        width: 100%;
        margin: 0 auto;
    }


    .wps-network-image {
        height: 340px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .wps-network-premium {
        padding: 70px 0 75px;
    }


    .wps-network-wrap {
        width: 92%;
    }


    .wps-network-header {
        margin-bottom: 35px;
    }


    .wps-network-eyebrow {
        font-size: 10px;
        letter-spacing: 1.8px;
    }


    .wps-network-heading-left h2 {
        font-size: 42px;
        letter-spacing: -1.5px;
    }


    .wps-network-heading-right p {
        font-size: 14px;
        line-height: 1.7;
    }


    .wps-network-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }


    .wps-network-card:last-child {
        grid-column: auto;
        max-width: none;
    }


    .wps-network-image {
        height: 330px;
    }


    .wps-network-content {
        min-height: 195px;
        padding: 26px 25px 24px;
    }


    .wps-network-content h3 {
        font-size: 30px;
    }


    .wps-network-arrow {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .wps-network-heading-left h2 {
        font-size: 36px;
    }


    .wps-network-image {
        height: 280px;
    }


    .wps-network-content {
        padding: 24px 22px;
    }


    .wps-network-content h3 {
        font-size: 28px;
    }


    .wps-network-location {
        top: 17px;
        left: 17px;
        padding: 8px 11px;
        font-size: 9px;
    }


    .wps-network-arrow {
        right: 17px;
        top: 17px;
        width: 40px;
        height: 40px;
    }

}




/* =========================================================
   WPS MANDATORY PUBLIC DISCLOSURE
   PREMIUM REDESIGN
========================================================= */

.wps-mpd-page {
    --wps-blue: #155087;
    --wps-blue-dark: #0d3d68;
    --wps-red: #cc1f26;
    --wps-text: #27384a;
    --wps-muted: #718096;
    --wps-border: #e6ebf0;
    --wps-light: #f5f8fb;
    --wps-white: #ffffff;

    background: #f7f9fb;
    color: var(--wps-text);
    overflow: hidden;
}


/* =========================================================
   HEADER
========================================================= */

.wps-mpd-header {
    position: relative;
    padding: 75px 0 80px;
    background:
        linear-gradient(135deg, #eef5fa 0%, #ffffff 55%, #f8f4f4 100%);
    overflow: hidden;
}

.wps-mpd-header::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border: 70px solid rgba(21, 80, 135, 0.045);
    border-radius: 50%;
    right: -170px;
    top: -260px;
}

.wps-mpd-header::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    border: 35px solid rgba(204, 31, 38, 0.07);
    border-radius: 50%;
    left: -130px;
    bottom: -150px;
}

.wps-mpd-header-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.wps-mpd-header-content {
    max-width: 850px;
}

.wps-mpd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: var(--wps-red);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.wps-mpd-eyebrow::before {
    content: "";
    width: 32px;
    height: 2px;
    background: var(--wps-red);
}

.wps-mpd-header h1 {
    margin: 0;
    color: var(--wps-blue);
    font-size: clamp(38px, 5vw, 62px);
    line-height: 1.08;
    font-weight: 750;
    letter-spacing: -1.5px;
}

.wps-mpd-header h1 span {
    color: var(--wps-red);
}

.wps-mpd-header p {
    max-width: 650px;
    margin: 20px 0 0;
    color: var(--wps-muted);
    font-size: 16px;
    line-height: 1.8;
}

.wps-mpd-header-mark {
    position: relative;
    width: 145px;
    height: 145px;
    flex: 0 0 145px;
}

.wps-mpd-header-mark::before {
    content: "";
    position: absolute;
    inset: 20px;
    border: 2px solid rgba(21, 80, 135, 0.16);
    border-radius: 50%;
}

.wps-mpd-header-mark span {
    position: absolute;
    display: block;
    border-radius: 50%;
}

.wps-mpd-header-mark span:nth-child(1) {
    width: 20px;
    height: 20px;
    background: var(--wps-red);
    top: 5px;
    right: 15px;
}

.wps-mpd-header-mark span:nth-child(2) {
    width: 12px;
    height: 12px;
    background: var(--wps-blue);
    bottom: 20px;
    left: 15px;
}

.wps-mpd-header-mark span:nth-child(3) {
    width: 55px;
    height: 55px;
    border: 8px solid rgba(21, 80, 135, 0.12);
    top: 45px;
    left: 45px;
}


/* =========================================================
   SECTIONS
========================================================= */

.wps-mpd-section {
    padding: 75px 0;
}

.wps-mpd-general {
    background: #ffffff;
}

.wps-mpd-disclosures {
    padding-top: 20px;
    padding-bottom: 100px;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.wps-mpd-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
}

.wps-mpd-section-heading > div:first-child {
    display: flex;
    align-items: center;
    gap: 18px;
}

.wps-mpd-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--wps-blue);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.wps-mpd-section-heading small {
    display: block;
    margin-bottom: 5px;
    color: var(--wps-red);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.wps-mpd-section-heading h2 {
    margin: 0;
    color: var(--wps-blue);
    font-size: 32px;
    font-weight: 750;
}

.wps-mpd-heading-line {
    width: 120px;
    height: 3px;
    margin-bottom: 8px;
    background: linear-gradient(
        90deg,
        var(--wps-red),
        var(--wps-blue)
    );
    border-radius: 50px;
}


/* =========================================================
   MAIN CARD
========================================================= */

.wps-mpd-card {
    position: relative;
    background: var(--wps-white);
    border: 1px solid var(--wps-border);
    border-radius: 22px;
    box-shadow:
        0 12px 35px rgba(21, 80, 135, 0.07);
    overflow: hidden;
}

.wps-mpd-general .wps-mpd-card {
    border-top: 4px solid var(--wps-blue);
}


/* =========================================================
   CARD TOP
========================================================= */

.wps-mpd-card-top {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 28px 30px;
    background:
        linear-gradient(
            135deg,
            rgba(21, 80, 135, 0.055),
            rgba(204, 31, 38, 0.025)
        );
    border-bottom: 1px solid var(--wps-border);
}

.wps-mpd-card-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--wps-blue);
    color: #fff;
    font-size: 20px;
    box-shadow: 0 10px 25px rgba(21, 80, 135, 0.18);
}

.wps-mpd-card-top span {
    display: block;
    margin-bottom: 4px;
    color: var(--wps-red);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.wps-mpd-card-top h3 {
    margin: 0;
    color: var(--wps-blue);
    font-size: 21px;
    font-weight: 700;
}


/* =========================================================
   DOCUMENT CARDS
========================================================= */

.wps-mpd-document-card {
    margin-bottom: 28px;
}

.wps-mpd-document-card:last-child {
    margin-bottom: 0;
}

.wps-mpd-card-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 25px 30px;
    background: #fff;
    border-bottom: 1px solid var(--wps-border);
}

.wps-mpd-card-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.wps-mpd-small-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(21, 80, 135, 0.08);
    color: var(--wps-blue);
    font-size: 18px;
}

.wps-mpd-card-title span {
    display: block;
    margin-bottom: 3px;
    color: var(--wps-red);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.wps-mpd-card-title h2 {
    margin: 0;
    color: var(--wps-blue);
    font-size: 23px;
    font-weight: 700;
}

.wps-mpd-card-accent {
    width: 55px;
    height: 3px;
    background: var(--wps-red);
    border-radius: 50px;
}


/* =========================================================
   TABLE
========================================================= */

.wps-mpd-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.wps-mpd-table {
    width: 100%;
    min-width: 700px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
}

.wps-mpd-table thead th {
    padding: 17px 22px;
    background: var(--wps-blue);
    color: #fff;
    border: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: left;
    white-space: nowrap;
}

.wps-mpd-table thead th:first-child {
    width: 90px;
    text-align: center;
}

.wps-mpd-table thead th:last-child {
    width: 220px;
}

.wps-mpd-table tbody td {
    padding: 18px 22px;
    border-bottom: 1px solid #edf0f3;
    color: #46566a;
    font-size: 14px;
    line-height: 1.6;
    vertical-align: middle;
}

.wps-mpd-table tbody tr:last-child td {
    border-bottom: 0;
}

.wps-mpd-table tbody tr {
    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.wps-mpd-table tbody tr:hover {
    background: #f8fbfd;
}

.wps-mpd-table tbody td:first-child {
    color: var(--wps-blue);
    font-weight: 700;
    text-align: center;
}

.wps-mpd-table tbody td:nth-child(2) {
    color: #27384a;
    font-weight: 600;
}


/* =========================================================
   DOCUMENT LINK
========================================================= */

.wps-mpd-document-link a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--wps-red);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
}

.wps-mpd-document-link a i {
    font-size: 11px;
    transition: transform 0.25s ease;
}

.wps-mpd-document-link a:hover {
    color: var(--wps-blue);
}

.wps-mpd-document-link a:hover i {
    transform: translate(3px, -3px);
}

.wps-mpd-na {
    color: #a0a9b3;
}


/* =========================================================
   STAFF / INFRASTRUCTURE SPECIAL ROWS
========================================================= */

.wps-mpd-document-card
.wps-mpd-table tbody td:last-child {
    font-weight: 600;
}

.wps-mpd-document-card
.wps-mpd-table tbody td:last-child:not(.wps-mpd-document-link) {
    color: var(--wps-blue);
}


/* =========================================================
   MOBILE TABLE ENHANCEMENT
========================================================= */

@media (max-width: 767px) {

    .wps-mpd-table {
        min-width: 650px;
    }

    .wps-mpd-table thead th,
    .wps-mpd-table tbody td {
        padding: 14px 16px;
        font-size: 13px;
    }

    .wps-mpd-table-wrap {
        scrollbar-width: thin;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .wps-mpd-header {
        padding: 60px 0 65px;
    }

    .wps-mpd-header-mark {
        width: 110px;
        height: 110px;
        flex-basis: 110px;
    }

    .wps-mpd-section {
        padding: 60px 0;
    }

    .wps-mpd-disclosures {
        padding-top: 10px;
        padding-bottom: 70px;
    }

    .wps-mpd-section-heading h2 {
        font-size: 28px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .wps-mpd-header {
        padding: 48px 0 55px;
    }

    .wps-mpd-header-inner {
        display: block;
    }

    .wps-mpd-header h1 {
        font-size: 38px;
        letter-spacing: -0.8px;
    }

    .wps-mpd-header p {
        font-size: 14px;
        line-height: 1.7;
    }

    .wps-mpd-header-mark {
        display: none;
    }

    .wps-mpd-section {
        padding: 45px 0;
    }

    .wps-mpd-disclosures {
        padding-top: 0;
        padding-bottom: 55px;
    }

    .wps-mpd-section-heading {
        display: block;
        margin-bottom: 22px;
    }

    .wps-mpd-section-heading > div:first-child {
        gap: 12px;
    }

    .wps-mpd-label {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        font-size: 11px;
    }

    .wps-mpd-section-heading h2 {
        font-size: 25px;
    }

    .wps-mpd-heading-line {
        margin: 18px 0 0 52px;
    }

    .wps-mpd-card {
        border-radius: 16px;
    }

    .wps-mpd-card-top,
    .wps-mpd-card-header {
        padding: 20px;
    }

    .wps-mpd-card-top {
        gap: 13px;
    }

    .wps-mpd-card-icon {
        width: 45px;
        height: 45px;
        flex-basis: 45px;
        border-radius: 12px;
        font-size: 17px;
    }

    .wps-mpd-card-top h3 {
        font-size: 17px;
    }

    .wps-mpd-card-title {
        gap: 12px;
    }

    .wps-mpd-small-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 11px;
    }

    .wps-mpd-card-title h2 {
        font-size: 19px;
    }

    .wps-mpd-card-accent {
        display: none;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .wps-mpd-header h1 {
        font-size: 32px;
    }

    .wps-mpd-eyebrow {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .wps-mpd-card-top,
    .wps-mpd-card-header {
        padding: 17px;
    }

    .wps-mpd-card-top span,
    .wps-mpd-card-title span {
        font-size: 9px;
    }

    .wps-mpd-card-top h3 {
        font-size: 16px;
    }

    .wps-mpd-card-title h2 {
        font-size: 17px;
    }

}




/* =========================================================
   WPS LEADERSHIP PAGE
========================================================= */

.wps-leadership-page {
    background: #fff;
    overflow: hidden;
}


/* =========================================================
   INTRO
========================================================= */

.wps-leadership-intro {
    position: relative;
    padding: 90px 0 80px;
    background: #f7f9fc;
    overflow: hidden;
}

.wps-leadership-intro::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(21, 80, 135, 0.045);
    top: -220px;
    right: -100px;
}

.wps-leadership-intro::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(204, 31, 38, 0.04);
    bottom: -120px;
    left: -60px;
}

.wps-leadership-intro-inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.wps-leadership-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    color: #cc1f26;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.wps-leadership-intro h1 {
    margin: 0;
    color: #155087;
    font-size: 54px;
    font-weight: 700;
    line-height: 1.12;
}

.wps-leadership-intro h1 span {
    color: #cc1f26;
}

.wps-leadership-red-line {
    width: 70px;
    height: 3px;
    margin: 20px auto;
    border-radius: 50px;
    background: #cc1f26;
}

.wps-leadership-intro p {
    max-width: 680px;
    margin: 0 auto;
    color: #687789;
    font-size: 17px;
    line-height: 1.8;
}


/* =========================================================
   COMMON SECTION HEADING
========================================================= */

.wps-section-heading {
    margin-bottom: 45px;
}

.wps-section-heading.center {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.wps-section-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: #cc1f26;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.wps-section-heading h2 {
    margin: 0;
    color: #155087;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
}

.wps-section-heading h2 span {
    color: #cc1f26;
}

.wps-heading-line {
    width: 55px;
    height: 3px;
    margin-top: 17px;
    border-radius: 30px;
    background: #cc1f26;
}

.wps-section-heading.center .wps-heading-line {
    margin-left: auto;
    margin-right: auto;
}

.wps-section-heading p {
    margin: 18px auto 0;
    max-width: 680px;
    color: #718096;
    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   HEAD OF SCHOOL
========================================================= */

.wps-head-school-section {
    position: relative;
    padding: 95px 0;
    background: #fff;
}

.wps-head-school-card {
    position: relative;
    display: grid;
    grid-template-columns: 48% 52%;
    min-height: 560px;
    overflow: hidden;
    border-radius: 30px;
    background: #155087;
    box-shadow: 0 25px 70px rgba(21, 80, 135, 0.16);
}


/* IMAGE */

.wps-head-school-image {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    background: #e9eef3;
}

.wps-head-school-image-bg {
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: rgba(204, 31, 38, 0.12);
    left: -120px;
    bottom: -120px;
}

.wps-head-school-image img {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 0;
    width: 88%;
    max-width: 520px;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    transform: translateX(-50%);
    transition: transform 0.6s ease;
}

.wps-head-school-card:hover .wps-head-school-image img {
    transform: translateX(-50%) scale(1.03);
}


/* IMAGE BADGE */

.wps-head-school-badge {
    position: absolute;
    z-index: 4;
    left: 30px;
    bottom: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border-radius: 14px;
    background: rgba(255,255,255,0.96);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.wps-head-school-badge i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    color: #fff;
    background: #cc1f26;
    font-size: 16px;
}

.wps-head-school-badge small {
    display: block;
    margin-bottom: 2px;
    color: #7b8794;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.wps-head-school-badge strong {
    display: block;
    color: #155087;
    font-size: 14px;
}


/* CONTENT */

.wps-head-school-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 70px 75px;
    background: #155087;
}

.wps-head-school-content::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 50%;
    top: -100px;
    right: -80px;
}

.wps-head-school-content::after {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 50%;
    bottom: -70px;
    right: 80px;
}

.wps-profile-label {
    position: relative;
    z-index: 2;
    display: inline-block;
    margin-bottom: 16px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
}

.wps-head-school-content h3 {
    position: relative;
    z-index: 2;
    margin: 0;
    color: #fff;
    font-size: 44px;
    font-weight: 400;
    line-height: 1.15;
}

.wps-head-school-content h3 strong {
    font-weight: 700;
}

.wps-profile-line {
    position: relative;
    z-index: 2;
    width: 60px;
    height: 3px;
    margin: 20px 0 24px;
    border-radius: 50px;
    background: #cc1f26;
}

.wps-head-school-content p {
    position: relative;
    z-index: 2;
    max-width: 500px;
    margin: 0 0 32px;
    color: rgba(255,255,255,0.82);
    font-size: 16px;
    line-height: 1.85;
}


/* BUTTON */

.wps-profile-button {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    width: 190px;
    padding: 14px 18px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50px;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.35s ease;
}

.wps-profile-button i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #155087;
    background: #fff;
    transition: all 0.35s ease;
}

.wps-profile-button:hover {
    color: #fff;
    border-color: #cc1f26;
    background: #cc1f26;
}

.wps-profile-button:hover i {
    transform: translateX(3px);
}

/* =========================================================
   SCHOOL LEADERSHIP - PREMIUM 3 GRID
========================================================= */

.wps-school-leadership-grid {
    position: relative;
    padding: 100px 0 110px;
    background: #f5f7f9;
    overflow: hidden;
}

.wps-school-leadership-grid::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    top: -230px;
    right: -180px;
    border: 65px solid rgba(21, 80, 135, 0.045);
    border-radius: 50%;
}

.wps-school-leadership-grid::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    bottom: -120px;
    left: -100px;
    border: 35px solid rgba(204, 31, 38, 0.04);
    border-radius: 50%;
}

.wps-school-leadership-grid .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   HEADING
========================================================= */

.wps-slg-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 55px;
}

.wps-slg-title-wrap {
    position: relative;
}

.wps-slg-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    color: #cc1f26;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
}

.wps-slg-eyebrow::before {
    content: "";
    width: 35px;
    height: 2px;
    background: #cc1f26;
}

.wps-slg-heading h2 {
    margin: 0;
    color: #155087;
    font-size: 48px;
    line-height: 1.1;
    font-weight: 800;
}

.wps-slg-heading h2 span {
    color: #cc1f26;
}

.wps-slg-heading-line {
    width: 110px;
    height: 1px;
    margin-bottom: 8px;
    background: #d6dce1;
}


/* =========================================================
   3 GRID
========================================================= */

.wps-slg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}


/* =========================================================
   CARD
========================================================= */

.wps-slg-card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: 0 0 22px 22px;
    box-shadow: 0 15px 40px rgba(21, 80, 135, 0.09);
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.wps-slg-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 55px rgba(21, 80, 135, 0.16);
}


/* =========================================================
   IMAGE
========================================================= */

.wps-slg-image {
    position: relative;
    height: 410px;
    overflow: hidden;
    background: #e9eef2;
}

.wps-slg-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.7s ease;
}

.wps-slg-card:hover .wps-slg-image img {
    transform: scale(1.055);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.wps-slg-image-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42%;
    background: linear-gradient(
        to top,
        rgba(21, 80, 135, 0.65),
        rgba(21, 80, 135, 0)
    );
}


/* =========================================================
   ROLE BADGE
========================================================= */

.wps-slg-role {
    position: absolute;
    left: 22px;
    bottom: 20px;
    z-index: 2;
    padding: 9px 14px;
    background: #cc1f26;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}


/* =========================================================
   CONTENT
========================================================= */

.wps-slg-content {
    position: relative;
    min-height: 205px;
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.wps-slg-content::before {
    content: "";
    position: absolute;
    left: 28px;
    top: 0;
    width: 45px;
    height: 4px;
    background: #155087;
}

.wps-slg-content-top > span {
    display: block;
    margin-bottom: 8px;
    color: #8a949d;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.wps-slg-content h3 {
    margin: 0 0 8px;
    color: #155087;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 800;
}

.wps-slg-content p {
    margin: 0;
    color: #69737c;
    font-size: 13px;
    line-height: 1.65;
}


/* =========================================================
   READ MORE
========================================================= */

.wps-slg-readmore {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #e5e9ec;
    color: #155087 !important;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-decoration: none !important;
    text-transform: uppercase;
}

.wps-slg-readmore i {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #155087;
    color: #fff;
    font-size: 10px;
    transition: all 0.35s ease;
}

.wps-slg-readmore:hover {
    color: #cc1f26 !important;
}

.wps-slg-readmore:hover i {
    background: #cc1f26;
    transform: translateX(5px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .wps-school-leadership-grid {
        padding: 80px 0 90px;
    }

    .wps-slg-heading h2 {
        font-size: 40px;
    }

    .wps-slg-grid {
        gap: 20px;
    }

    .wps-slg-image {
        height: 350px;
    }

    .wps-slg-content {
        padding: 25px 22px 22px;
    }

    .wps-slg-content h3 {
        font-size: 20px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .wps-school-leadership-grid {
        padding: 65px 15px 75px;
    }

    .wps-slg-heading {
        display: block;
        margin-bottom: 35px;
    }

    .wps-slg-heading-line {
        display: none;
    }

    .wps-slg-heading h2 {
        font-size: 34px;
    }

    .wps-slg-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .wps-slg-image {
        height: 430px;
    }

    .wps-slg-content {
        min-height: 190px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .wps-slg-heading h2 {
        font-size: 30px;
    }

    .wps-slg-image {
        height: 390px;
    }

    .wps-slg-content h3 {
        font-size: 22px;
    }

}


/* =========================================================
   ASSOCIATE DIRECTOR - EDITORIAL LAYOUT
========================================================= */

.wps-ad-editorial {
    position: relative;
    padding: 90px 0 110px;
    background: #fff;
    overflow: hidden;
}


/* =========================================================
   HERO
========================================================= */

.wps-ad-hero {
    display: grid;
    grid-template-columns: 48% 52%;
    min-height: 590px;
    margin-bottom: 100px;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.wps-ad-hero-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 70px 75px;

    background: #155087;
    overflow: hidden;
}

.wps-ad-hero-content::before {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    right: -90px;
    top: -90px;

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

    border-radius: 50%;
}

.wps-ad-hero-content::after {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    left: -190px;
    bottom: -190px;

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

    border-radius: 50%;
}


.wps-ad-eyebrow {
    position: relative;
    z-index: 2;

    margin-bottom: 20px;

    color: #fff;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 3px;
}

.wps-ad-hero-content h1 {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #fff;

    font-size: 54px;
    font-weight: 300;

    line-height: 1.15;
}

.wps-ad-hero-content h1 span {
    font-weight: 800;
}

.wps-ad-line {
    width: 70px;
    height: 4px;

    margin: 28px 0;

    background: #cc1f26;

    border-radius: 20px;
}

.wps-ad-role {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #fff;

    font-size: 25px;
    font-weight: 700;
}

.wps-ad-designation {
    position: relative;
    z-index: 2;

    margin: 6px 0 0;

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

    font-size: 13px;
    letter-spacing: 1px;
}


/* =========================================================
   HERO IMAGE
========================================================= */

.wps-ad-hero-image {
    position: relative;

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

    padding: 45px 70px;

    background: #f3f6f9;

    overflow: hidden;
}

.wps-ad-image-accent {
    position: absolute;

    width: 260px;
    height: 260px;

    right: -70px;
    bottom: -70px;

    border: 35px solid #cc1f26;

    border-radius: 50%;
    opacity: .9;
}

.wps-ad-hero-image img {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 440px;

    height: auto;

    display: block;

    object-fit: contain;

    box-shadow:
        25px 25px 0 #155087;
}


/* =========================================================
   IMAGE CAPTION
========================================================= */

.wps-ad-image-caption {
    position: absolute;
    z-index: 3;

    left: 40px;
    bottom: 35px;

    display: flex;
    flex-direction: column;

    padding: 15px 22px;

    background: #fff;

    box-shadow: 0 12px 30px rgba(21,80,135,.15);
}

.wps-ad-image-caption span {
    color: #7c8792;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}

.wps-ad-image-caption strong {
    margin-top: 3px;

    color: #155087;

    font-size: 17px;
}


/* =========================================================
   MESSAGE HEADING
========================================================= */

.wps-ad-message-heading {
    max-width: 920px;

    margin: 0 auto 55px;

    text-align: center;
}

.wps-ad-small-label {
    margin-bottom: 12px;

    color: #cc1f26;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2.5px;
}

.wps-ad-message-heading h2 {
    margin: 0;

    color: #155087;

    font-size: 39px;
    font-weight: 400;

    line-height: 1.3;
}

.wps-ad-message-heading h2 span {
    font-weight: 800;
}


/* =========================================================
   MESSAGE GRID
========================================================= */

.wps-ad-message-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    max-width: 1100px;

    margin: 0 auto;
}

.wps-ad-message-grid p {
    margin: 0 0 25px;

    color: #5d6874;

    font-size: 15px;

    line-height: 1.9;

    text-align: justify;
}


/* =========================================================
   HIGHLIGHT
========================================================= */

.wps-ad-highlight {
    position: relative;

    margin-top: 35px;
    padding: 25px 0 25px 25px;

    border-left: 4px solid #cc1f26;
}

.wps-ad-highlight p {
    margin: 0;

    color: #155087;

    font-size: 17px;
    font-weight: 600;

    line-height: 1.75;

    text-align: left;
}

.wps-ad-highlight-line {
    position: absolute;

    width: 20px;
    height: 4px;

    left: -12px;
    top: 28px;

    background: #cc1f26;
}


/* =========================================================
   SIGNATURE
========================================================= */

.wps-ad-signature {
    margin-top: 45px;
    padding-top: 25px;

    border-top: 1px solid #e3e8ed;
}

.wps-ad-signature-line {
    width: 50px;
    height: 3px;

    margin-bottom: 12px;

    background: #cc1f26;
}

.wps-ad-signature strong {
    display: block;

    color: #155087;

    font-size: 17px;
}

.wps-ad-signature span {
    display: block;

    margin-top: 4px;

    color: #7b8691;

    font-size: 12px;
}


/* =========================================================
   BOTTOM ACADEMIC VISION
========================================================= */

.wps-ad-bottom {
    display: flex;
    align-items: center;

    gap: 25px;

    max-width: 1100px;

    margin: 80px auto 0;

    padding: 28px 35px;

    background: #155087;
}

.wps-ad-bottom-icon {
    width: 55px;
    height: 55px;

    flex-shrink: 0;

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

    background: #cc1f26;

    color: #fff;

    font-size: 22px;

    border-radius: 50%;
}

.wps-ad-bottom span {
    display: block;

    margin-bottom: 5px;

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

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;
}

.wps-ad-bottom p {
    margin: 0;

    color: #fff;

    font-size: 15px;

    line-height: 1.6;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .wps-ad-editorial {
        padding: 70px 0 90px;
    }

    .wps-ad-hero {
        grid-template-columns: 1fr;
        margin-bottom: 75px;
    }

    .wps-ad-hero-content {
        min-height: 420px;
        padding: 60px;
    }

    .wps-ad-hero-content h1 {
        font-size: 46px;
    }

    .wps-ad-hero-image {
        min-height: 550px;
    }

    .wps-ad-message-grid {
        gap: 45px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .wps-ad-editorial {
        padding: 50px 0 70px;
    }

    .wps-ad-hero-content {
        min-height: 350px;
        padding: 45px 30px;
    }

    .wps-ad-hero-content h1 {
        font-size: 36px;
    }

    .wps-ad-role {
        font-size: 21px;
    }

    .wps-ad-hero-image {
        min-height: 430px;
        padding: 35px 30px;
    }

    .wps-ad-hero-image img {
        box-shadow:
            14px 14px 0 #155087;
    }

    .wps-ad-image-caption {
        left: 20px;
        bottom: 20px;
    }

    .wps-ad-message-heading {
        margin-bottom: 40px;
    }

    .wps-ad-message-heading h2 {
        font-size: 29px;
    }

    .wps-ad-message-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .wps-ad-message-grid p {
        font-size: 14px;
        text-align: left;
        line-height: 1.8;
    }

    .wps-ad-highlight {
        margin-top: 25px;
    }

    .wps-ad-bottom {
        margin-top: 55px;
        padding: 22px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .wps-ad-hero-content h1 {
        font-size: 31px;
    }

    .wps-ad-eyebrow {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .wps-ad-hero-image {
        min-height: 370px;
    }

    .wps-ad-message-heading h2 {
        font-size: 25px;
    }

    .wps-ad-bottom {
        align-items: flex-start;
    }

    .wps-ad-bottom-icon {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }

}




/* =========================================================
   DIRECTOR MESSAGE - PREMIUM V2
========================================================= */

.director-message-premium-v2 {
    position: relative;
    padding: 90px 0 110px;
    background: #ffffff;
    overflow: hidden;
}


/* =========================================================
   HERO
========================================================= */

.director-v2-hero {
    position: relative;

    display: grid;
    grid-template-columns: 55% 45%;

    min-height: 520px;

    background: #155087;

    overflow: hidden;
}


/* Decorative large shape */

.director-v2-hero::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -250px;
    bottom: -300px;

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

    border-radius: 50%;
}

.director-v2-hero::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -180px;
    top: -180px;

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

    border-radius: 50%;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.director-v2-hero-content {
    position: relative;
    z-index: 3;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 70px 65px;
}

.director-v2-eyebrow {
    margin-bottom: 18px;

    color: #ffffff;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 3px;
}

.director-v2-hero-content h1 {
    max-width: 600px;

    margin: 0;

    color: #ffffff;

    font-size: 52px;
    font-weight: 300;

    line-height: 1.15;
}

.director-v2-hero-content h1 strong {
    display: block;

    font-weight: 800;
}

.director-v2-line {
    width: 65px;
    height: 4px;

    margin: 25px 0;

    background: #cc1f26;

    border-radius: 50px;
}

.director-v2-hero-content p {
    max-width: 470px;

    margin: 0;

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

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   HERO PHOTO
========================================================= */

.director-v2-hero-photo {
    position: relative;

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

    padding: 40px 50px 0;

    background: #f1f4f7;

    overflow: hidden;
}


/* Red circle */

.director-v2-circle-one {
    position: absolute;

    width: 310px;
    height: 310px;

    right: -100px;
    top: -70px;

    border: 35px solid #cc1f26;

    border-radius: 50%;
}


/* Blue circle */

.director-v2-circle-two {
    position: absolute;

    width: 180px;
    height: 180px;

    left: -80px;
    bottom: -70px;

    border: 20px solid #155087;

    border-radius: 50%;
}


/* Image */

.director-v2-photo {
    position: relative;
    z-index: 3;

    max-width: 390px;

    max-height: 480px;

    overflow: hidden;

    background: #ffffff;

    border-radius: 180px 180px 0 0;

    box-shadow:
        15px 0 0 rgba(204,31,38,.15);
}

.director-v2-photo img {
    width: 100%;
    height: auto;

    display: block;
}


/* =========================================================
   IDENTITY STRIP
========================================================= */

.director-v2-identity {
    position: relative;
    z-index: 5;

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

    margin: -1px 45px 80px;

    padding: 25px 35px;

    background: #ffffff;

    border-bottom: 4px solid #cc1f26;

    box-shadow: 0 15px 40px rgba(21,80,135,.10);
}

.director-v2-identity-main span {
    display: block;

    margin-bottom: 5px;

    color: #cc1f26;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.8px;
}

.director-v2-identity-main h2 {
    margin: 0;

    color: #155087;

    font-size: 27px;
    font-weight: 800;
}

.director-v2-identity-school {
    color: #707b86;

    font-size: 13px;
}


/* =========================================================
   MESSAGE HEADING
========================================================= */

.director-v2-message-heading {
    max-width: 900px;

    margin: 0 auto 55px;

    text-align: center;
}

.director-v2-message-heading > span {
    display: block;

    margin-bottom: 12px;

    color: #cc1f26;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2.5px;
}

.director-v2-message-heading h2 {
    margin: 0;

    color: #155087;

    font-size: 38px;
    font-weight: 300;

    line-height: 1.35;
}

.director-v2-message-heading h2 strong {
    font-weight: 800;
}


/* =========================================================
   MESSAGE GRID
========================================================= */

.director-v2-message-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    max-width: 1080px;

    margin: 0 auto;
}

.director-v2-column p {
    margin: 0 0 25px;

    color: #5d6874;

    font-size: 15px;

    line-height: 1.9;

    text-align: justify;
}


/* =========================================================
   HIGHLIGHT BOX
========================================================= */

.director-v2-highlight {
    position: relative;

    margin-bottom: 28px;

    padding: 30px;

    background: #f4f7fa;

    border-left: 5px solid #155087;
}

.director-v2-highlight-icon {
    width: 45px;
    height: 45px;

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

    margin-bottom: 17px;

    background: #155087;

    color: #ffffff;

    border-radius: 50%;

    font-size: 18px;
}

.director-v2-highlight p {
    margin: 0 !important;

    color: #155087 !important;

    font-size: 16px !important;

    font-weight: 600;

    line-height: 1.75 !important;

    text-align: left !important;
}


/* =========================================================
   CLOSING STATEMENT
========================================================= */

.director-v2-closing {
    display: flex;
    align-items: center;

    gap: 25px;

    max-width: 1080px;

    margin: 75px auto 0;

    padding: 35px 40px;

    background: #155087;
}

.director-v2-closing-mark {
    width: 55px;
    height: 55px;

    flex-shrink: 0;

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

    background: #cc1f26;

    color: #ffffff;

    border-radius: 50%;

    font-size: 20px;
}

.director-v2-closing-content span {
    display: block;

    margin-bottom: 7px;

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

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;
}

.director-v2-closing-content p {
    margin: 0;

    color: #ffffff;

    font-size: 16px;

    line-height: 1.7;
}


/* =========================================================
   SIGNATURE
========================================================= */

.director-v2-signature {
    max-width: 1080px;

    margin: 35px auto 0;

    padding-top: 25px;

    border-top: 1px solid #e2e7ec;
}

.director-v2-signature-line {
    width: 50px;
    height: 3px;

    margin-bottom: 10px;

    background: #cc1f26;

    border-radius: 50px;
}

.director-v2-signature strong {
    display: block;

    color: #155087;

    font-size: 17px;
    font-weight: 800;
}

.director-v2-signature span {
    display: block;

    margin-top: 3px;

    color: #7a8590;

    font-size: 12px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .director-message-premium-v2 {
        padding: 70px 0 90px;
    }

    .director-v2-hero {
        grid-template-columns: 1fr;
    }

    .director-v2-hero-content {
        min-height: 390px;
        padding: 55px;
    }

    .director-v2-hero-content h1 {
        font-size: 45px;
    }

    .director-v2-hero-photo {
        min-height: 500px;
    }

    .director-v2-identity {
        margin-left: 25px;
        margin-right: 25px;
    }

    .director-v2-message-grid {
        gap: 45px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .director-message-premium-v2 {
        padding: 50px 0 70px;
    }

    .director-v2-hero-content {
        min-height: 340px;
        padding: 40px 28px;
    }

    .director-v2-hero-content h1 {
        font-size: 35px;
    }

    .director-v2-eyebrow {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .director-v2-hero-photo {
        min-height: 420px;

        padding: 30px 25px 0;
    }

    .director-v2-photo {
        max-width: 320px;
    }

    .director-v2-circle-one {
        width: 230px;
        height: 230px;

        right: -90px;
        top: -60px;

        border-width: 25px;
    }

    .director-v2-identity {
        display: block;

        margin: 0 15px 55px;

        padding: 22px 25px;
    }

    .director-v2-identity-school {
        margin-top: 8px;
    }

    .director-v2-message-heading {
        margin-bottom: 40px;
    }

    .director-v2-message-heading h2 {
        font-size: 28px;
    }

    .director-v2-message-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .director-v2-column p {
        font-size: 14px;

        line-height: 1.8;

        text-align: left;
    }

    .director-v2-highlight {
        padding: 24px;
    }

    .director-v2-closing {
        margin-top: 55px;

        padding: 25px 22px;

        align-items: flex-start;
    }

    .director-v2-closing-content p {
        font-size: 14px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .director-v2-hero-content h1 {
        font-size: 30px;
    }

    .director-v2-hero-content p {
        font-size: 13px;
    }

    .director-v2-hero-photo {
        min-height: 370px;
    }

    .director-v2-message-heading h2 {
        font-size: 24px;
    }

}

.director-v2-photo {
    width: 100%;
    max-width: 560px;
    height: 610px;
}



/* =========================================================
   WPS VICE PRINCIPAL
   PREMIUM LEADERSHIP DESIGN
========================================================= */

.wps-vp-page {
    --vp-blue: #155087;
    --vp-blue-dark: #0d3d68;
    --vp-red: #cc1f26;
    --vp-text: #27384a;
    --vp-muted: #718096;
    --vp-light: #f5f8fb;
    --vp-border: #e5ebf0;

    overflow: hidden;
    background: #fff;
    color: var(--vp-text);
}


/* =========================================================
   HERO
========================================================= */

.wps-vp-hero {
    position: relative;
    padding: 85px 0;
    background:
        linear-gradient(
            120deg,
            #f1f6fa 0%,
            #ffffff 55%,
            #faf5f5 100%
        );
}

.wps-vp-hero::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    border: 90px solid rgba(21, 80, 135, 0.035);
    border-radius: 50%;
    right: -280px;
    top: -280px;
}

.wps-vp-hero::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border: 40px solid rgba(204, 31, 38, 0.045);
    border-radius: 50%;
    left: -180px;
    bottom: -190px;
}

.wps-vp-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 47% 53%;
    align-items: center;
    min-height: 620px;
}


/* =========================================================
   PHOTO
========================================================= */

.wps-vp-photo-wrap {
    position: relative;
    min-height: 610px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.wps-vp-photo-bg {
    position: absolute;
    width: 470px;
    height: 470px;
    background: var(--vp-blue);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -48%);
    opacity: 0.07;
}

.wps-vp-photo {
    position: relative;
    z-index: 2;
    width: 430px;
    height: 575px;
    overflow: hidden;
    background: #e9eef2;
    border-radius: 215px 215px 12px 12px;
    box-shadow:
        18px 18px 0 rgba(204, 31, 38, 0.13),
        0 25px 60px rgba(21, 80, 135, 0.14);
}

.wps-vp-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.6s ease;
}

.wps-vp-photo:hover img {
    transform: scale(1.035);
}


/* =========================================================
   PHOTO LABEL
========================================================= */

.wps-vp-photo-label {
    position: absolute;
    z-index: 4;
    left: 35px;
    bottom: 35px;
    padding: 15px 20px;
    background: rgba(255,255,255,0.96);
    border-left: 4px solid var(--vp-red);
    box-shadow: 0 15px 35px rgba(0,0,0,0.10);
}

.wps-vp-photo-label span {
    display: block;
    margin-bottom: 3px;
    color: var(--vp-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.wps-vp-photo-label strong {
    color: var(--vp-blue);
    font-size: 15px;
    letter-spacing: 1px;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.wps-vp-hero-content {
    padding: 30px 20px 30px 70px;
}

.wps-vp-eyebrow {
    display: inline-block;
    color: var(--vp-red);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
}

.wps-vp-line {
    width: 55px;
    height: 3px;
    margin: 14px 0 22px;
    background: var(--vp-red);
    border-radius: 50px;
}

.wps-vp-hero-content h1 {
    max-width: 580px;
    margin: 0;
    color: var(--vp-blue);
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.04;
    font-weight: 750;
    letter-spacing: -2px;
}

.wps-vp-hero-content h1 span {
    display: block;
    color: var(--vp-red);
}

.wps-vp-tagline {
    max-width: 550px;
    margin: 25px 0 32px;
    color: var(--vp-muted);
    font-size: 17px;
    line-height: 1.7;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.wps-vp-name {
    padding-left: 20px;
    border-left: 3px solid var(--vp-blue);
}

.wps-vp-name small {
    display: block;
    margin-bottom: 5px;
    color: var(--vp-red);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.wps-vp-name h2 {
    margin: 0;
    color: var(--vp-blue);
    font-size: 29px;
    font-weight: 750;
}

.wps-vp-name p {
    margin: 7px 0 0;
    color: var(--vp-muted);
    font-size: 14px;
    line-height: 1.7;
}

.wps-vp-experience {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin-top: 32px;
    padding: 13px 20px;
    background: #fff;
    border: 1px solid var(--vp-border);
    border-radius: 50px;
    box-shadow: 0 10px 25px rgba(21,80,135,0.06);
}

.wps-vp-experience-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--vp-blue);
    color: #fff;
}

.wps-vp-experience strong {
    display: block;
    color: var(--vp-blue);
    font-size: 16px;
}

.wps-vp-experience span {
    display: block;
    color: var(--vp-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* =========================================================
   INTRO
========================================================= */

.wps-vp-intro {
    padding: 100px 0;
    background: #fff;
}

.wps-vp-intro-grid {
    display: grid;
    grid-template-columns: 38% 62%;
    gap: 70px;
}

.wps-vp-intro-heading span,
.wps-vp-section-heading > span,
.wps-vp-vision-label > span {
    display: block;
    margin-bottom: 15px;
    color: var(--vp-red);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.wps-vp-intro-heading h2 {
    margin: 0;
    color: var(--vp-blue);
    font-size: 39px;
    line-height: 1.18;
    font-weight: 500;
}

.wps-vp-intro-heading h2 strong {
    display: block;
    color: var(--vp-red);
    font-weight: 750;
}

.wps-vp-red-line {
    width: 60px;
    height: 3px;
    margin-top: 24px;
    background: var(--vp-red);
}

.wps-vp-intro-content p {
    margin: 0 0 22px;
    color: #596979;
    font-size: 16px;
    line-height: 1.9;
}

.wps-vp-intro-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   PHILOSOPHY
========================================================= */

.wps-vp-philosophy {
    position: relative;
    padding: 100px 0;
    background: var(--vp-light);
}

.wps-vp-section-heading {
    max-width: 800px;
    margin: 0 auto 55px;
    text-align: center;
}

.wps-vp-section-heading h2 {
    margin: 0;
    color: var(--vp-blue);
    font-size: 43px;
    line-height: 1.2;
    font-weight: 500;
}

.wps-vp-section-heading h2 strong {
    color: var(--vp-red);
    font-weight: 750;
}

.wps-vp-section-heading p {
    max-width: 700px;
    margin: 20px auto 0;
    color: var(--vp-muted);
    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   PILLARS
========================================================= */

.wps-vp-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.wps-vp-pillar {
    position: relative;
    padding: 32px;
    background: #fff;
    border: 1px solid var(--vp-border);
    border-radius: 20px;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.wps-vp-pillar:hover {
    transform: translateY(-8px);
    border-color: rgba(21,80,135,0.15);
    box-shadow: 0 22px 45px rgba(21,80,135,0.10);
}

.wps-vp-pillar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.wps-vp-pillar-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(21,80,135,0.08);
    color: var(--vp-blue);
    font-size: 22px;
}

.wps-vp-pillar-top > span {
    color: #d8dfe5;
    font-size: 30px;
    font-weight: 800;
}

.wps-vp-pillar h3 {
    min-height: 60px;
    margin: 0 0 17px;
    color: var(--vp-blue);
    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;
}

.wps-vp-pillar p {
    margin: 0;
    color: var(--vp-muted);
    font-size: 14px;
    line-height: 1.8;
}


/* =========================================================
   VISION
========================================================= */

.wps-vp-vision {
    padding: 100px 0;
    background: var(--vp-blue);
    color: #fff;
}

.wps-vp-vision-grid {
    display: grid;
    grid-template-columns: 38% 62%;
    gap: 70px;
    align-items: start;
}

.wps-vp-vision-label h2 {
    margin: 0;
    color: #fff;
    font-size: 43px;
    line-height: 1.15;
    font-weight: 500;
}

.wps-vp-vision-label h2 strong {
    display: block;
    color: #fff;
    font-weight: 750;
}

.wps-vp-vision-content {
    padding-left: 40px;
    border-left: 1px solid rgba(255,255,255,0.22);
}

.wps-vp-vision-content p {
    margin: 0 0 24px;
    color: rgba(255,255,255,0.82);
    font-size: 16px;
    line-height: 1.9;
}

.wps-vp-vision-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   QUOTE
========================================================= */

.wps-vp-quote {
    padding: 90px 0;
    background: #fff;
}

.wps-vp-quote-box {
    position: relative;
    max-width: 950px;
    margin: auto;
    padding: 55px 65px;
    background:
        linear-gradient(
            135deg,
            #f5f8fb,
            #fff
        );
    border: 1px solid var(--vp-border);
    border-radius: 25px;
    text-align: center;
}

.wps-vp-quote-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--vp-red);
    color: #fff;
    font-size: 20px;
}

.wps-vp-quote-box p {
    margin: 0;
    color: var(--vp-blue);
    font-size: 22px;
    line-height: 1.8;
    font-weight: 500;
    font-style: italic;
}

.wps-vp-quote-box span {
    display: block;
    margin-top: 22px;
    color: var(--vp-red);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}


/* =========================================================
   ADMISSION
========================================================= */

.wps-vp-admission {
    padding: 35px 0;
    background: var(--vp-red);
}

.wps-vp-admission-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.wps-vp-admission-inner span {
    display: block;
    margin-bottom: 5px;
    color: rgba(255,255,255,0.72);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.wps-vp-admission-inner h2 {
    margin: 0;
    color: #fff;
    font-size: 29px;
    font-weight: 500;
}

.wps-vp-admission-inner h2 strong {
    font-weight: 800;
}

.wps-vp-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 25px;
    background: #fff;
    color: var(--vp-red);
    border-radius: 50px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.wps-vp-apply-btn:hover {
    background: var(--vp-blue);
    color: #fff;
    transform: translateY(-3px);
}

.wps-vp-apply-btn i {
    transition: transform 0.25s ease;
}

.wps-vp-apply-btn:hover i {
    transform: translateX(4px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .wps-vp-hero {
        padding: 65px 0;
    }

    .wps-vp-hero-grid {
        grid-template-columns: 45% 55%;
    }

    .wps-vp-photo-wrap {
        min-height: 520px;
    }

    .wps-vp-photo {
        width: 330px;
        height: 490px;
    }

    .wps-vp-photo-bg {
        width: 380px;
        height: 380px;
    }

    .wps-vp-hero-content {
        padding-left: 40px;
    }

    .wps-vp-hero-content h1 {
        font-size: 48px;
    }

    .wps-vp-intro-grid,
    .wps-vp-vision-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .wps-vp-pillars {
        grid-template-columns: 1fr;
    }

    .wps-vp-pillar h3 {
        min-height: auto;
    }

    .wps-vp-vision-content {
        padding-left: 0;
        padding-top: 30px;
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,0.22);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .wps-vp-hero {
        padding: 45px 0 60px;
    }

    .wps-vp-hero-grid {
        display: flex;
        flex-direction: column;
    }

    .wps-vp-photo-wrap {
        width: 100%;
        min-height: 450px;
    }

    .wps-vp-photo {
        width: 300px;
        height: 425px;
    }

    .wps-vp-photo-bg {
        width: 350px;
        height: 350px;
    }

    .wps-vp-photo-label {
        left: calc(50% - 150px);
        bottom: 20px;
    }

    .wps-vp-hero-content {
        width: 100%;
        padding: 45px 0 0;
        text-align: center;
    }

    .wps-vp-line {
        margin: 14px auto 22px;
    }

    .wps-vp-hero-content h1 {
        font-size: 42px;
        letter-spacing: -1px;
    }

    .wps-vp-tagline {
        font-size: 13px;
    }

    .wps-vp-name {
        text-align: left;
    }

    .wps-vp-experience {
        margin-top: 25px;
    }

    .wps-vp-intro,
    .wps-vp-philosophy,
    .wps-vp-vision {
        padding: 65px 0;
    }

    .wps-vp-intro-heading h2,
    .wps-vp-section-heading h2,
    .wps-vp-vision-label h2 {
        font-size: 34px;
    }

    .wps-vp-intro-content p,
    .wps-vp-vision-content p {
        font-size: 14px;
        line-height: 1.8;
    }

    .wps-vp-pillars {
        gap: 18px;
    }

    .wps-vp-pillar {
        padding: 25px;
    }

    .wps-vp-quote {
        padding: 60px 0;
    }

    .wps-vp-quote-box {
        padding: 40px 25px;
    }

    .wps-vp-quote-box p {
        font-size: 17px;
        line-height: 1.7;
    }

    .wps-vp-admission {
        padding: 30px 0;
    }

    .wps-vp-admission-inner {
        flex-direction: column;
        text-align: center;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .wps-vp-photo-wrap {
        min-height: 400px;
    }

    .wps-vp-photo {
        width: 275px;
        height: 390px;
    }

    .wps-vp-photo-bg {
        width: 315px;
        height: 315px;
    }

    .wps-vp-photo-label {
        left: calc(50% - 137px);
        bottom: 15px;
    }

    .wps-vp-hero-content h1 {
        font-size: 36px;
    }

    .wps-vp-hero-content h1 span {
        display: inline;
    }

    .wps-vp-name h2 {
        font-size: 24px;
    }

    .wps-vp-intro-heading h2,
    .wps-vp-section-heading h2,
    .wps-vp-vision-label h2 {
        font-size: 30px;
    }

}


/* Keep all Life at WPS tabs in one row */
.image-tabs .nav-tabs {
    display: flex;
    flex-wrap: nowrap !important;
    justify-content: center;
    gap: 5px;
}

/* Each tab stays in one line */
.image-tabs .nav-item {
    flex: 0 0 auto;
}

/* Tab text */
.image-tabs .nav-link {
    white-space: nowrap;
}


.image-tabs .nav-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center;
    width: 100%;
    overflow-x: auto;
}

.image-tabs .nav-item {
    flex-shrink: 0 !important;
}

.image-tabs .nav-link {
    white-space: nowrap !important;
}



.life-grid .life-img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.6s ease !important;
    cursor: pointer;
    padding:30px;
}

.life-grid .life-img:hover {
    transform: scale(1.12) !important;
    z-index: 99;
}


.achieve-card {
      background: #fff; border: 1px solid rgba(39,38,96,0.14);
      overflow: hidden; transition: box-shadow .2s;

    }
.achieve-card:hover { box-shadow: 0 8px 28px rgba(39,38,96,.1); }