/* =========================================================
   AVMHS - CONTACT US
   Color Scheme:
   Blue  : #012b8f
   Pink  : #ed0b70
========================================================= */

.avmhs-contact-section {
    padding: 60px 0;
    background: #f7f9ff;
    position: relative;
    overflow: hidden;
}


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

.avmhs-contact-heading {
    max-width: 720px;
    margin: 0 auto 50px;
}

.avmhs-contact-heading span {
    display: inline-block;
    margin-bottom: 10px;
    color: #ed0b70;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.avmhs-contact-heading h2 {
    margin: 0 0 15px;
    color: #012b8f;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
}

.avmhs-contact-heading p {
    max-width: 650px;
    margin: 0 auto;
    color: #667085;
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   CONTACT CARD
========================================================= */

.avmhs-contact-card {
    height: 100%;
    padding: 38px 25px;
    background: #ffffff;
    border: 1px solid #e3e8f5;
    border-radius: 14px;
    text-align: center;
    position: relative;
    overflow: hidden;

    box-shadow: 0 8px 30px rgba(1, 43, 143, 0.08);

    transition: all 0.35s ease;
}


/* Top Border */

.avmhs-contact-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;

    width: 0;
    height: 4px;

    background: #ed0b70;

    transform: translateX(-50%);
    transition: all 0.35s ease;
}

.avmhs-contact-card:hover::before {
    width: 100%;
}


/* Card Hover */

.avmhs-contact-card:hover {
    transform: translateY(-8px);
    border-color: #d5dcf2;

    box-shadow: 0 18px 40px rgba(1, 43, 143, 0.15);
}


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

.avmhs-contact-icon {
    width: 68px;
    height: 68px;

    margin: 0 auto 22px;

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

    background: #eef2ff;
    border-radius: 50%;

    color: #012b8f;

    font-family: 'themify';
    font-size: 24px;

    transition: all 0.35s ease;
}


/* Icon Hover */

.avmhs-contact-card:hover .avmhs-contact-icon {
    background: #ed0b70;
    color: #ffffff;

    transform: scale(1.08);
}


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

.avmhs-contact-card h4 {
    margin: 0 0 14px;

    color: #012b8f;

    font-size: 20px;
    line-height: 1.4;
    font-weight: 700;
}


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

.avmhs-contact-card p {
    margin: 0;

    color: #667085;

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


/* =========================================================
   LINKS
========================================================= */

.avmhs-contact-card a {
    color: #667085;
    text-decoration: none;

    transition: all 0.3s ease;
}

.avmhs-contact-card a:hover {
    color: #ed0b70;
}


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

@media (max-width: 991px) {

    .avmhs-contact-section {
        padding: 70px 0;
    }

    .avmhs-contact-heading {
        margin-bottom: 40px;
    }

    .avmhs-contact-heading h2 {
        font-size: 35px;
    }

    .avmhs-contact-card {
        margin-bottom: 25px;
    }
}


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

@media (max-width: 767px) {

    .avmhs-contact-section {
        padding: 60px 15px;
    }

    .avmhs-contact-heading {
        margin-bottom: 35px;
    }

    .avmhs-contact-heading span {
        font-size: 12px;
        letter-spacing: 1.5px;
    }

    .avmhs-contact-heading h2 {
        font-size: 30px;
    }

    .avmhs-contact-heading p {
        font-size: 14px;
        line-height: 1.7;
    }

    .avmhs-contact-card {
        padding: 32px 20px;
        margin-bottom: 20px;
    }

    .avmhs-contact-icon {
        width: 60px;
        height: 60px;
        font-size: 21px;
    }

    .avmhs-contact-card h4 {
        font-size: 18px;
    }

    .avmhs-contact-card p {
        font-size: 14px;
    }
}


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

@media (max-width: 480px) {

    .avmhs-contact-section {
        padding: 50px 12px;
    }

    .avmhs-contact-heading h2 {
        font-size: 27px;
    }

    .avmhs-contact-card {
        padding: 28px 15px;
    }
}

/* =========================================================
   ANNAI VEILANKANNI'S
   SCHOOL PROFILE
========================================================= */

.avm-school-profile {
    position: relative;
    overflow: hidden;
    padding: 60px 0;
    background: #f6f9ff;
    color: #17213c;
    z-index: 1;
}


/* =========================================================
   ROTATING BACKGROUND PATTERN
========================================================= */

.avm-profile-pattern {
    position: absolute;
    width: 520px;
    height: 520px;
    top: -220px;
    right: -180px;
    border: 1px solid rgba(18, 43, 143, 0.08);
    border-radius: 50%;
    animation: avmProfileRotate 28s linear infinite;
}

.avm-profile-pattern::before,
.avm-profile-pattern::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(237, 11, 112, 0.08);
}

.avm-profile-pattern::before {
    inset: 65px;
}

.avm-profile-pattern::after {
    inset: 130px;
}

@keyframes avmProfileRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   FLOATING CIRCLES
========================================================= */

.avm-profile-circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.avm-profile-circle-one {
    width: 170px;
    height: 170px;
    left: -85px;
    bottom: 100px;
    border: 1px solid rgba(18, 43, 143, 0.08);
    animation: avmProfileFloat 6s ease-in-out infinite;
}

.avm-profile-circle-two {
    width: 80px;
    height: 80px;
    right: 12%;
    bottom: 10%;
    background: rgba(237, 11, 112, 0.05);
    animation: avmProfileFloat 5s ease-in-out infinite reverse;
}

@keyframes avmProfileFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }

}


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

.avm-profile-heading {
    position: relative;
    margin-bottom: 60px;
    text-align: center;
    z-index: 2;
}

.avm-profile-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: #ed0b70;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.avm-profile-heading h2 {
    margin: 0;
    color: #17213c;
    font-size: 46px;
    line-height: 1.2;
    font-weight: 700;
}

.avm-profile-heading h2 strong {
    color: #012b8f;
}

.avm-profile-line {
    position: relative;
    display: block;
    width: 70px;
    height: 3px;
    margin: 20px auto 0;
    background: #ed0b70;
}

.avm-profile-line::after {
    content: "";
    position: absolute;
    width: 11px;
    height: 11px;
    top: -4px;
    left: 50%;
    border-radius: 50%;
    background: #012b8f;
    transform: translateX(-50%);
}


/* =========================================================
   PROFILE LAYOUT
========================================================= */

.avm-profile-layout {
    position: relative;
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 75px;
    align-items: center;
    z-index: 2;
}


/* =========================================================
   PROFILE IMAGE
========================================================= */

.avm-profile-image-area {
    position: relative;
    padding: 15px;
}

.avm-profile-image {
    position: relative;
    height: 700px;
    overflow: hidden;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 25px 60px rgba(1, 43, 143, 0.18);
}

.avm-profile-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition:
        transform 0.8s ease,
        filter 0.8s ease;
}

.avm-profile-image-area:hover .avm-profile-image img {
    transform: scale(1.08) rotate(1deg);
    filter: saturate(1.1);
}


/* =========================================================
   IMAGE SHINE / LIGHT
========================================================= */

.avm-profile-shine {
    position: absolute;
    top: -120%;
    left: -80%;
    width: 45%;
    height: 320%;
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(25deg);
    pointer-events: none;
    z-index: 3;
}

.avm-profile-image-area:hover .avm-profile-shine {
    animation: avmProfileShine 1s ease forwards;
}

@keyframes avmProfileShine {

    0% {
        left: -80%;
    }

    100% {
        left: 150%;
    }

}


/* =========================================================
   IMAGE CORNERS
========================================================= */

.avm-profile-corner {
    position: absolute;
    width: 65px;
    height: 65px;
    border-color: #ed0b70;
    z-index: 4;
}

.avm-profile-corner-top {
    top: -5px;
    left: -5px;
    border-top: 4px solid;
    border-left: 4px solid;
    border-radius: 18px 0 0 0;
}

.avm-profile-corner-bottom {
    right: -5px;
    bottom: -5px;
    border-right: 4px solid;
    border-bottom: 4px solid;
    border-radius: 0 0 18px 0;
}


/* =========================================================
   FLOATING BADGE
========================================================= */

.avm-profile-badge {
    position: absolute;
    right: -5px;
    bottom: 45px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 20px;
    border-radius: 13px;
    background: #012b8f;
    color: #ffffff;
    box-shadow: 0 18px 40px rgba(1, 43, 143, 0.25);
    z-index: 5;
    animation: avmBadgeMove 4s ease-in-out infinite;
}

.avm-profile-badge-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ed0b70;
    font-family: 'themify';
    font-size: 19px;
}

.avm-profile-badge strong {
    display: block;
    font-size: 14px;
}

.avm-profile-badge small {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
}

@keyframes avmBadgeMove {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}


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

.avm-profile-content {
    position: relative;
}

.avm-profile-label {
    display: inline-block;
    margin-bottom: 13px;
    color: #ed0b70;
    font-size: 14px;
    font-weight: 700;
}

.avm-profile-content h3 {
    margin: 0 0 23px;
    color: #012b8f;
    font-size: 38px;
    line-height: 1.2;
}

.avm-profile-content h3 span {
    display: block;
    color: #ed0b70;
}

.avm-profile-content p {
    margin: 0 0 17px;
    color: #5c6880;
    font-size: 16px;
    line-height: 1.9;
}

.avm-profile-content p strong {
    color: #17213c;
}


/* =========================================================
   HIGHLIGHTS
========================================================= */

.avm-profile-highlights {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 28px;
}

.avm-profile-highlight {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px;
    border: 1px solid #e5eaf3;
    border-radius: 12px;
    background: #ffffff;
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}

.avm-profile-highlight:hover {
    transform: translateY(-6px);
    border-color: rgba(1, 43, 143, 0.15);
    box-shadow: 0 15px 30px rgba(1, 43, 143, 0.10);
}

.avm-highlight-icon {
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(1, 43, 143, 0.08);
    color: #012b8f;
    font-family: 'themify';
    font-size: 17px;
    transition:
        transform 0.4s ease,
        background 0.4s ease;
}

.avm-profile-highlight:hover .avm-highlight-icon {
    transform: rotateY(180deg);
    background: #ed0b70;
    color: #ffffff;
}

.avm-profile-highlight strong {
    display: block;
    color: #17213c;
    font-size: 15px;
}

.avm-profile-highlight small {
    display: block;
    margin-top: 3px;
    color: #7a8497;
    font-size: 12px;
}


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

@media (max-width: 1199px) {

    .avm-profile-layout {
        gap: 45px;
    }

}


@media (max-width: 991px) {

    .avm-school-profile {
        padding: 80px 0;
    }

    .avm-profile-heading h2 {
        font-size: 38px;
    }

    .avm-profile-layout {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .avm-profile-image {
        height: 480px;
    }

    .avm-profile-content h3 {
        font-size: 33px;
    }

}


@media (max-width: 767px) {

    .avm-school-profile {
        padding: 65px 0;
    }

    .avm-profile-heading {
        margin-bottom: 40px;
    }

    .avm-profile-heading h2 {
        font-size: 32px;
    }

    .avm-profile-image {
        height: 390px;
        border-radius: 18px;
    }

    .avm-profile-content h3 {
        font-size: 28px;
    }

    .avm-profile-content p {
        font-size: 15px;
        line-height: 1.8;
    }

    .avm-profile-highlights {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 480px) {

    .avm-profile-image-area {
        padding: 8px;
    }

    .avm-profile-image {
        height: 320px;
    }

    .avm-profile-content h3 {
        font-size: 25px;
    }

    .avm-profile-badge {
        right: 5px;
        bottom: 25px;
        padding: 12px 15px;
    }

}

/* =========================================================
   ANNAI VEILANKANNI'S
   OUR HISTORY - PREMIUM DESIGN
========================================================= */

.avhs-history-light-section,
.avhs-history-dark-section,
.avhs-history-today-section {
    position: relative;
    overflow: hidden;
}


/* =========================================================
   LIGHT HISTORY SECTION
========================================================= */

.avhs-history-light-section {
    padding: 60px 0;
    background: #f6f9ff;
    color: #17213c;
}


/* Rotating Pattern */

.avhs-history-rotate-pattern {
    position: absolute;
    width: 560px;
    height: 560px;
    right: -240px;
    top: -220px;
    border: 1px solid rgba(1, 43, 143, 0.08);
    border-radius: 50%;
    animation: avhsHistoryPatternRotate 28s linear infinite;
}

.avhs-history-rotate-pattern::before,
.avhs-history-rotate-pattern::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.avhs-history-rotate-pattern::before {
    inset: 65px;
    border: 1px dashed rgba(237, 11, 112, 0.09);
}

.avhs-history-rotate-pattern::after {
    inset: 135px;
    border: 1px solid rgba(1, 43, 143, 0.06);
}

@keyframes avhsHistoryPatternRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* Floating Circles */

.avhs-history-floating-circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.avhs-history-circle-left {
    width: 170px;
    height: 170px;
    left: -85px;
    bottom: 80px;
    border: 1px solid rgba(1, 43, 143, 0.08);
    animation: avhsHistoryFloat 6s ease-in-out infinite;
}

.avhs-history-circle-right {
    width: 75px;
    height: 75px;
    right: 10%;
    bottom: 12%;
    background: rgba(237, 11, 112, 0.05);
    animation: avhsHistoryFloat 5s ease-in-out infinite reverse;
}

@keyframes avhsHistoryFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }

}


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

.avhs-history-section-heading {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto 65px;
    text-align: center;
}

.avhs-history-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: #ed0b70;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.avhs-history-section-heading h2 {
    margin: 0;
    color: #17213c;
    font-size: 46px;
    line-height: 1.2;
    font-weight: 700;
}

.avhs-history-section-heading h2 strong {
    color: #012b8f;
}

.avhs-history-heading-line {
    position: relative;
    display: block;
    width: 70px;
    height: 3px;
    margin: 20px auto;
    background: #ed0b70;
}

.avhs-history-heading-line::after {
    content: "";
    position: absolute;
    width: 11px;
    height: 11px;
    top: -4px;
    left: 50%;
    border-radius: 50%;
    background: #012b8f;
    transform: translateX(-50%);
}

.avhs-history-section-heading p {
    margin: 0;
    color: #68748b;
    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   HISTORY INTRO GRID
========================================================= */

.avhs-history-intro-grid {
    position: relative;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 75px;
    align-items: center;
    z-index: 2;
}


/* =========================================================
   HISTORY IMAGE
========================================================= */

.avhs-history-visual {
    position: relative;
    padding: 15px;
}

.avhs-history-image-box {
    position: relative;
    height: 510px;
    overflow: hidden;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 25px 60px rgba(1, 43, 143, 0.18);
}

.avhs-history-image-box img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition:
        transform 0.8s ease,
        filter 0.8s ease;
}

.avhs-history-visual:hover .avhs-history-image-box img {
    transform: scale(1.09) rotate(1deg);
    filter: saturate(1.12) contrast(1.03);
}


/* Image Overlay */

.avhs-history-image-overlay {
    position: absolute;
    inset: 0;
    background: rgba(1, 43, 143, 0.06);
    transition: background 0.5s ease;
}

.avhs-history-visual:hover .avhs-history-image-overlay {
    background: rgba(1, 43, 143, 0);
}


/* =========================================================
   LIGHTING EFFECT
========================================================= */

.avhs-history-image-light {
    position: absolute;
    top: -120%;
    left: -80%;
    width: 42%;
    height: 320%;
    background: rgba(255, 255, 255, 0.30);
    transform: rotate(25deg);
    z-index: 3;
    pointer-events: none;
}

.avhs-history-visual:hover .avhs-history-image-light {
    animation: avhsHistoryImageLight 1s ease forwards;
}

@keyframes avhsHistoryImageLight {

    0% {
        left: -80%;
    }

    100% {
        left: 150%;
    }

}


/* =========================================================
   DECORATIVE IMAGE CORNERS
========================================================= */

.avhs-history-corner {
    position: absolute;
    width: 65px;
    height: 65px;
    border-color: #ed0b70;
    z-index: 5;
}

.avhs-history-corner-top {
    top: -5px;
    left: -5px;
    border-top: 4px solid;
    border-left: 4px solid;
    border-radius: 18px 0 0 0;
}

.avhs-history-corner-bottom {
    right: -5px;
    bottom: -5px;
    border-right: 4px solid;
    border-bottom: 4px solid;
    border-radius: 0 0 18px 0;
}


/* =========================================================
   YEAR BADGE
========================================================= */

.avhs-history-year-badge {
    position: absolute;
    right: -5px;
    bottom: 45px;
    min-width: 125px;
    padding: 18px 22px;
    border-radius: 15px;
    background: #012b8f;
    color: #ffffff;
    text-align: center;
    box-shadow: 0 18px 40px rgba(1, 43, 143, 0.25);
    z-index: 6;
    animation: avhsHistoryBadgeFloat 4s ease-in-out infinite;
}

.avhs-history-year-badge span,
.avhs-history-year-badge small {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.avhs-history-year-badge strong {
    display: block;
    margin: 4px 0;
    font-size: 34px;
    line-height: 1;
}

.avhs-history-year-badge small {
    color: rgba(255, 255, 255, 0.65);
}

@keyframes avhsHistoryBadgeFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }

}


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

.avhs-history-intro-content {
    position: relative;
}

.avhs-history-content-label {
    display: inline-block;
    margin-bottom: 13px;
    color: #ed0b70;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.avhs-history-intro-content h3 {
    margin: 0 0 23px;
    color: #012b8f;
    font-size: 39px;
    line-height: 1.2;
}

.avhs-history-intro-content h3 span {
    display: block;
    color: #ed0b70;
}

.avhs-history-intro-content>p {
    margin: 0 0 17px;
    color: #5d6980;
    font-size: 16px;
    line-height: 1.9;
}

.avhs-history-intro-content>p strong {
    color: #17213c;
}


/* Highlight Box */

.avhs-history-highlight-box {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 28px;
    padding: 20px;
    border: 1px solid #e4e9f2;
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(1, 43, 143, 0.06);
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.avhs-history-highlight-box:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 40px rgba(1, 43, 143, 0.12);
}

.avhs-history-highlight-icon {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #012b8f;
    color: #ffffff;
    font-family: 'themify';
    font-size: 18px;
    transition: transform 0.4s ease;
}

.avhs-history-highlight-box:hover .avhs-history-highlight-icon {
    transform: rotate(360deg);
}

.avhs-history-highlight-box strong {
    display: block;
    margin-bottom: 5px;
    color: #17213c;
    font-size: 15px;
}

.avhs-history-highlight-box p {
    margin: 0;
    color: #707b90;
    font-size: 13px;
    line-height: 1.7;
}


/* =========================================================
   DARK HISTORY SECTION
========================================================= */

.avhs-history-dark-section {
    padding: 60px 0;
    background: #012b8f;
    color: #ffffff;
}


/* Rotating Dark Pattern */

.avhs-history-dark-pattern {
    position: absolute;
    width: 650px;
    height: 650px;
    left: -270px;
    top: -250px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 50%;
    animation: avhsDarkPatternRotate 32s linear infinite;
}

.avhs-history-dark-pattern::before,
.avhs-history-dark-pattern::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.avhs-history-dark-pattern::before {
    inset: 80px;
    border: 1px dashed rgba(255, 255, 255, 0.08);
}

.avhs-history-dark-pattern::after {
    inset: 160px;
    border: 1px solid rgba(237, 11, 112, 0.12);
}

@keyframes avhsDarkPatternRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }

}


/* Dark Orbits */

.avhs-history-dark-orbit {
    position: absolute;
    border-radius: 50%;
}

.avhs-history-dark-orbit-one {
    width: 170px;
    height: 170px;
    right: -80px;
    bottom: 60px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    animation: avhsDarkFloat 7s ease-in-out infinite;
}

.avhs-history-dark-orbit-two {
    width: 70px;
    height: 70px;
    right: 15%;
    top: 15%;
    background: rgba(237, 11, 112, 0.10);
    animation: avhsDarkFloat 5s ease-in-out infinite reverse;
}

@keyframes avhsDarkFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-18px);
    }

}


/* Dark Heading */

.avhs-history-dark-heading {
    position: relative;
    max-width: 750px;
    margin: 0 auto 65px;
    text-align: center;
    z-index: 2;
}

.avhs-history-dark-heading>span {
    display: inline-block;
    margin-bottom: 12px;
    color: #ed0b70;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.avhs-history-dark-heading h2 {
    margin: 0;
    color: #ffffff;
    font-size: 44px;
}

.avhs-history-dark-heading h2 strong {
    color: #ffffff;
}

.avhs-history-dark-heading p {
    margin: 17px auto 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   TIMELINE
========================================================= */

.avhs-history-timeline {
    position: relative;
    max-width: 950px;
    margin: auto;
    z-index: 2;
}

.avhs-history-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 37px;
    width: 1px;
    background: rgba(255, 255, 255, 0.16);
}

.avhs-history-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 75px 1fr;
    gap: 30px;
    margin-bottom: 45px;
    transition: transform 0.4s ease;
}

.avhs-history-timeline-item:last-child {
    margin-bottom: 0;
}

.avhs-history-timeline-item:hover {
    transform: translateX(8px);
}


/* Marker */

.avhs-history-timeline-marker {
    position: relative;
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: #012b8f;
    box-shadow: 0 0 0 8px #012b8f;
    z-index: 3;
    transition:
        transform 0.4s ease,
        background 0.4s ease;
}

.avhs-history-timeline-item:hover .avhs-history-timeline-marker {
    transform: scale(1.12) rotate(8deg);
    background: #ed0b70;
}

.avhs-history-timeline-marker span {
    font-size: 13px;
    font-weight: 800;
}


/* Timeline Content */

.avhs-history-timeline-content {
    padding: 4px 0;
}

.avhs-history-timeline-label {
    display: inline-block;
    margin-bottom: 8px;
    color: #ed0b70;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.avhs-history-timeline-content h3 {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 24px;
}

.avhs-history-timeline-content p {
    margin: 0;
    color: rgba(255, 255, 255, 0.70);
    font-size: 15px;
    line-height: 1.9;
}


/* =========================================================
   TODAY SECTION
========================================================= */

.avhs-history-today-section {
    padding: 60px 0;
    background: #ffffff;
    color: #17213c;
}


/* Rotating Pattern */

.avhs-history-today-pattern {
    position: absolute;
    width: 500px;
    height: 500px;
    right: -230px;
    bottom: -220px;
    border: 1px solid rgba(237, 11, 112, 0.09);
    border-radius: 50%;
    animation: avhsTodayRotate 25s linear infinite;
}

.avhs-history-today-pattern::before {
    content: "";
    position: absolute;
    inset: 65px;
    border: 1px dashed rgba(1, 43, 143, 0.09);
    border-radius: 50%;
}

@keyframes avhsTodayRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* Today Grid */

.avhs-history-today-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 75px;
    align-items: center;
    z-index: 2;
}


/* Today Content */

.avhs-history-today-content {
    position: relative;
}

.avhs-history-today-label {
    display: inline-block;
    margin-bottom: 12px;
    color: #ed0b70;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.avhs-history-today-content h2 {
    margin: 0 0 20px;
    color: #012b8f;
    font-size: 42px;
    line-height: 1.2;
}

.avhs-history-today-content h2 span {
    color: #ed0b70;
}

.avhs-history-today-content>p {
    margin: 0;
    color: #5f6b82;
    font-size: 16px;
    line-height: 1.9;
}


/* =========================================================
   TODAY POINTS
========================================================= */

.avhs-history-today-points {
    margin-top: 30px;
}

.avhs-history-today-point {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 0;
    border-bottom: 1px solid #edf0f5;
    transition: transform 0.4s ease;
}

.avhs-history-today-point:hover {
    transform: translateX(8px);
}

.avhs-history-today-point>span {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(1, 43, 143, 0.08);
    color: #012b8f;
    font-family: 'themify';
    transition:
        transform 0.4s ease,
        background 0.4s ease;
}

.avhs-history-today-point:hover>span {
    transform: rotateY(180deg);
    background: #ed0b70;
    color: #ffffff;
}

.avhs-history-today-point strong {
    display: block;
    color: #17213c;
    font-size: 15px;
}

.avhs-history-today-point small {
    display: block;
    margin-top: 3px;
    color: #7a8498;
    font-size: 12px;
}


/* =========================================================
   TODAY IMAGE
========================================================= */

.avhs-history-today-image-area {
    position: relative;
    padding: 15px;
}

.avhs-history-today-image {
    position: relative;
    height: 480px;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 25px 60px rgba(1, 43, 143, 0.16);
}

.avhs-history-today-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition:
        transform 0.8s ease,
        filter 0.8s ease;
}

.avhs-history-today-image-area:hover img {
    transform: scale(1.08) rotate(-1deg);
    filter: saturate(1.1);
}


/* Today Image Light */

.avhs-history-today-light {
    position: absolute;
    top: -120%;
    left: -80%;
    width: 42%;
    height: 320%;
    background: rgba(255, 255, 255, 0.30);
    transform: rotate(25deg);
    pointer-events: none;
}

.avhs-history-today-image-area:hover .avhs-history-today-light {
    animation: avhsTodayLight 1s ease forwards;
}

@keyframes avhsTodayLight {

    0% {
        left: -80%;
    }

    100% {
        left: 150%;
    }

}


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

@media (max-width: 1199px) {

    .avhs-history-intro-grid,
    .avhs-history-today-grid {
        gap: 45px;
    }

}


@media (max-width: 991px) {

    .avhs-history-light-section,
    .avhs-history-dark-section,
    .avhs-history-today-section {
        padding: 80px 0;
    }

    .avhs-history-section-heading h2 {
        font-size: 38px;
    }

    .avhs-history-intro-grid,
    .avhs-history-today-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .avhs-history-image-box {
        height: 500px;
    }

    .avhs-history-intro-content h3 {
        font-size: 34px;
    }

    .avhs-history-dark-heading h2 {
        font-size: 38px;
    }

    .avhs-history-today-content h2 {
        font-size: 36px;
    }

    .avhs-history-today-image {
        height: 480px;
    }

}


@media (max-width: 767px) {

    .avhs-history-light-section,
    .avhs-history-dark-section,
    .avhs-history-today-section {
        padding: 65px 0;
    }

    .avhs-history-section-heading {
        margin-bottom: 42px;
    }

    .avhs-history-section-heading h2 {
        font-size: 32px;
    }

    .avhs-history-image-box {
        height: 390px;
        border-radius: 18px;
    }

    .avhs-history-intro-content h3 {
        font-size: 28px;
    }

    .avhs-history-intro-content>p {
        font-size: 15px;
    }

    .avhs-history-dark-heading {
        margin-bottom: 45px;
    }

    .avhs-history-dark-heading h2 {
        font-size: 31px;
    }

    .avhs-history-timeline::before {
        left: 27px;
    }

    .avhs-history-timeline-item {
        grid-template-columns: 55px 1fr;
        gap: 18px;
    }

    .avhs-history-timeline-marker {
        width: 55px;
        height: 55px;
        box-shadow: 0 0 0 6px #012b8f;
    }

    .avhs-history-timeline-content h3 {
        font-size: 21px;
    }

    .avhs-history-timeline-content p {
        font-size: 14px;
        line-height: 1.8;
    }

    .avhs-history-today-content h2 {
        font-size: 30px;
    }

    .avhs-history-today-image {
        height: 390px;
        border-radius: 18px;
    }

}


@media (max-width: 480px) {

    .avhs-history-visual,
    .avhs-history-today-image-area {
        padding: 8px;
    }

    .avhs-history-image-box {
        height: 320px;
    }

    .avhs-history-year-badge {
        right: 3px;
        bottom: 25px;
        min-width: 105px;
        padding: 14px 16px;
    }

    .avhs-history-year-badge strong {
        font-size: 28px;
    }

    .avhs-history-highlight-box {
        flex-direction: column;
    }

    .avhs-history-timeline::before {
        left: 21px;
    }

    .avhs-history-timeline-item {
        grid-template-columns: 42px 1fr;
        gap: 15px;
    }

    .avhs-history-timeline-marker {
        width: 42px;
        height: 42px;
        box-shadow: 0 0 0 5px #012b8f;
    }

    .avhs-history-timeline-marker span {
        font-size: 10px;
    }

    .avhs-history-today-image {
        height: 320px;
    }

}

/* =========================================================
   ANNAI VEILANKANNI'S
   MOTTO / VISION / MISSION
========================================================= */

.avmvm-motto-section,
.avmvm-vision-section,
.avmvm-mission-section {
    position: relative;
    overflow: hidden;
}


/* =========================================================
   MOTTO - LIGHT SECTION
========================================================= */

.avmvm-motto-section {
    padding: 60px 0;
    background: #f6f9ff;
    color: #17213c;
}


/* Rotating Pattern */

.avmvm-motto-pattern {
    position: absolute;
    width: 560px;
    height: 560px;
    right: -230px;
    top: -230px;
    border: 1px solid rgba(1, 43, 143, 0.08);
    border-radius: 50%;
    animation: avmvmMottoRotate 28s linear infinite;
}

.avmvm-motto-pattern::before,
.avmvm-motto-pattern::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.avmvm-motto-pattern::before {
    inset: 65px;
    border: 1px dashed rgba(237, 11, 112, 0.10);
}

.avmvm-motto-pattern::after {
    inset: 130px;
    border: 1px solid rgba(1, 43, 143, 0.06);
}

@keyframes avmvmMottoRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* Floating Orbits */

.avmvm-motto-orbit {
    position: absolute;
    border-radius: 50%;
}

.avmvm-motto-orbit-one {
    width: 150px;
    height: 150px;
    left: -75px;
    bottom: 80px;
    border: 1px solid rgba(1, 43, 143, 0.08);
    animation: avmvmMottoFloat 6s ease-in-out infinite;
}

.avmvm-motto-orbit-two {
    width: 70px;
    height: 70px;
    right: 12%;
    bottom: 15%;
    background: rgba(237, 11, 112, 0.05);
    animation: avmvmMottoFloat 5s ease-in-out infinite reverse;
}

@keyframes avmvmMottoFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-18px);
    }

}


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

.avmvm-motto-heading {
    position: relative;
    margin-bottom: 65px;
    text-align: center;
    z-index: 2;
}

.avmvm-motto-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: #ed0b70;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.avmvm-motto-heading h2 {
    margin: 0;
    color: #17213c;
    font-size: 46px;
    line-height: 1.2;
}

.avmvm-motto-heading h2 strong {
    color: #012b8f;
}

.avmvm-motto-line {
    position: relative;
    display: block;
    width: 70px;
    height: 3px;
    margin: 20px auto 0;
    background: #ed0b70;
}

.avmvm-motto-line::after {
    content: "";
    position: absolute;
    width: 11px;
    height: 11px;
    top: -4px;
    left: 50%;
    border-radius: 50%;
    background: #012b8f;
    transform: translateX(-50%);
}


/* =========================================================
   MOTTO LAYOUT
========================================================= */

.avmvm-motto-layout {
    position: relative;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 75px;
    align-items: center;
    z-index: 2;
}


/* =========================================================
   MOTTO IMAGE
========================================================= */

.avmvm-motto-image-area {
    position: relative;
    padding: 15px;
}

.avmvm-motto-image-box {
    position: relative;
    height: 500px;
    overflow: hidden;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 25px 60px rgba(1, 43, 143, 0.18);
}

.avmvm-motto-image-box img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition:
        transform 0.8s ease,
        filter 0.8s ease;
}

.avmvm-motto-image-area:hover img {
    transform: scale(1.08) rotate(1deg);
    filter: saturate(1.1) contrast(1.03);
}


/* Image Overlay */

.avmvm-motto-image-overlay {
    position: absolute;
    inset: 0;
    background: rgba(1, 43, 143, 0.07);
    transition: background 0.5s ease;
}

.avmvm-motto-image-area:hover .avmvm-motto-image-overlay {
    background: rgba(1, 43, 143, 0);
}


/* =========================================================
   IMAGE LIGHTING
========================================================= */

.avmvm-motto-image-light {
    position: absolute;
    top: -120%;
    left: -80%;
    width: 43%;
    height: 320%;
    background: rgba(255, 255, 255, 0.30);
    transform: rotate(25deg);
    z-index: 3;
    pointer-events: none;
}

.avmvm-motto-image-area:hover .avmvm-motto-image-light {
    animation: avmvmMottoLight 1s ease forwards;
}

@keyframes avmvmMottoLight {

    0% {
        left: -80%;
    }

    100% {
        left: 150%;
    }

}


/* =========================================================
   MOTTO CORNERS
========================================================= */

.avmvm-motto-corner {
    position: absolute;
    width: 65px;
    height: 65px;
    border-color: #ed0b70;
    z-index: 4;
}

.avmvm-motto-corner-top {
    top: -5px;
    left: -5px;
    border-top: 4px solid;
    border-left: 4px solid;
    border-radius: 18px 0 0 0;
}

.avmvm-motto-corner-bottom {
    right: -5px;
    bottom: -5px;
    border-right: 4px solid;
    border-bottom: 4px solid;
    border-radius: 0 0 18px 0;
}


/* =========================================================
   MOTTO BADGE
========================================================= */

.avmvm-motto-badge {
    position: absolute;
    right: -5px;
    bottom: 45px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 21px;
    border-radius: 14px;
    background: #012b8f;
    color: #ffffff;
    box-shadow: 0 18px 40px rgba(1, 43, 143, 0.25);
    z-index: 5;
    animation: avmvmMottoBadge 4s ease-in-out infinite;
}

.avmvm-motto-badge i {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ed0b70;
    font-family: 'themify';
    font-style: normal;
}

.avmvm-motto-badge span {
    font-size: 12px;
    line-height: 1.4;
}

.avmvm-motto-badge strong {
    font-size: 15px;
}

@keyframes avmvmMottoBadge {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}


/* =========================================================
   MOTTO CONTENT
========================================================= */

.avmvm-motto-content {
    position: relative;
}

.avmvm-motto-label {
    display: inline-block;
    margin-bottom: 13px;
    color: #ed0b70;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.avmvm-motto-content h3 {
    margin: 0 0 22px;
    color: #012b8f;
    font-size: 38px;
    line-height: 1.25;
}

.avmvm-motto-content h3 span {
    display: block;
    color: #ed0b70;
}

.avmvm-motto-content>p {
    margin: 0;
    color: #5d6980;
    font-size: 16px;
    line-height: 1.9;
}


/* =========================================================
   MOTTO HIGHLIGHTS
========================================================= */

.avmvm-motto-highlights {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 30px;
}

.avmvm-motto-highlight {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px;
    border: 1px solid #e5eaf2;
    border-radius: 12px;
    background: #ffffff;
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.avmvm-motto-highlight:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(1, 43, 143, 0.10);
}

.avmvm-motto-highlight>span {
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(1, 43, 143, 0.08);
    color: #012b8f;
    font-family: 'themify';
    transition:
        transform 0.4s ease,
        background 0.4s ease;
}

.avmvm-motto-highlight:hover>span {
    transform: rotateY(180deg);
    background: #ed0b70;
    color: #ffffff;
}

.avmvm-motto-highlight strong {
    display: block;
    color: #17213c;
    font-size: 14px;
}

.avmvm-motto-highlight small {
    display: block;
    margin-top: 3px;
    color: #788397;
    font-size: 11px;
}


/* =========================================================
   VISION - DARK BLUE SECTION
========================================================= */

.avmvm-vision-section {
    padding: 60px 0;
    background: #081a45;
    color: #ffffff;
}


/* Vision Pattern */

.avmvm-vision-pattern {
    position: absolute;
    width: 600px;
    height: 600px;
    left: -250px;
    top: -250px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    animation: avmvmVisionRotate 30s linear infinite;
}

.avmvm-vision-pattern::before,
.avmvm-vision-pattern::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.avmvm-vision-pattern::before {
    inset: 70px;
    border: 1px dashed rgba(255, 255, 255, 0.08);
}

.avmvm-vision-pattern::after {
    inset: 140px;
    border: 1px solid rgba(237, 11, 112, 0.12);
}

@keyframes avmvmVisionRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }

}


/* Vision Circles */

.avmvm-vision-circle {
    position: absolute;
    border-radius: 50%;
}

.avmvm-vision-circle-one {
    width: 150px;
    height: 150px;
    right: -70px;
    bottom: 70px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    animation: avmvmVisionFloat 6s ease-in-out infinite;
}

.avmvm-vision-circle-two {
    width: 70px;
    height: 70px;
    right: 13%;
    top: 15%;
    background: rgba(237, 11, 112, 0.10);
    animation: avmvmVisionFloat 5s ease-in-out infinite reverse;
}

@keyframes avmvmVisionFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-18px);
    }

}


/* Vision Layout */

.avmvm-vision-layout {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 75px;
    align-items: center;
    z-index: 2;
}


/* Vision Content */

.avmvm-vision-content {
    position: relative;
}

.avmvm-vision-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: #ed0b70;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.avmvm-vision-content h2 {
    margin: 0;
    color: #ffffff;
    font-size: 42px;
    line-height: 1.2;
}

.avmvm-vision-content h2 strong {
    display: block;
    color: #ffffff;
}

.avmvm-vision-line {
    display: block;
    width: 65px;
    height: 3px;
    margin: 22px 0;
    background: #ed0b70;
}

.avmvm-vision-content>p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 16px;
    line-height: 1.9;
}


/* Vision Quote */

.avmvm-vision-quote {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
    padding: 18px 20px;
    border-left: 3px solid #ed0b70;
    background: rgba(255, 255, 255, 0.06);
}

.avmvm-vision-quote i {
    color: #ed0b70;
    font-family: 'themify';
    font-size: 22px;
}

.avmvm-vision-quote span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    line-height: 1.7;
}


/* Vision Image */

.avmvm-vision-image-area {
    position: relative;
    padding: 15px;
}

.avmvm-vision-image-box {
    position: relative;
    height: 450px;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
}

.avmvm-vision-image-box img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition:
        transform 0.8s ease,
        filter 0.8s ease;
}

.avmvm-vision-image-area:hover img {
    transform: scale(1.08) rotate(-1deg);
    filter: saturate(1.1);
}


/* Vision Light */

.avmvm-vision-light {
    position: absolute;
    top: -120%;
    left: -80%;
    width: 42%;
    height: 320%;
    background: rgba(255, 255, 255, 0.30);
    transform: rotate(25deg);
    pointer-events: none;
}

.avmvm-vision-image-area:hover .avmvm-vision-light {
    animation: avmvmVisionLight 1s ease forwards;
}

@keyframes avmvmVisionLight {

    0% {
        left: -80%;
    }

    100% {
        left: 150%;
    }

}


/* =========================================================
   MISSION - DARKER SECTION
========================================================= */

.avmvm-mission-section {
    padding: 60px 0;
    background: #ffffff;
    color: #ffffff;
}


/* Mission Pattern */

.avmvm-mission-pattern {
    position: absolute;
    width: 620px;
    height: 620px;
    right: -250px;
    top: -230px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 50%;
    animation: avmvmMissionRotate 32s linear infinite;
}

.avmvm-mission-pattern::before,
.avmvm-mission-pattern::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.avmvm-mission-pattern::before {
    inset: 75px;
    border: 1px dashed rgba(255, 255, 255, 0.07);
}

.avmvm-mission-pattern::after {
    inset: 150px;
    border: 1px solid rgba(237, 11, 112, 0.12);
}

@keyframes avmvmMissionRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* Mission Orbits */

.avmvm-mission-orbit {
    position: absolute;
    border-radius: 50%;
}

.avmvm-mission-orbit-one {
    width: 180px;
    height: 180px;
    left: -90px;
    bottom: 70px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    animation: avmvmMissionFloat 7s ease-in-out infinite;
}

.avmvm-mission-orbit-two {
    width: 65px;
    height: 65px;
    left: 12%;
    top: 15%;
    background: rgba(237, 11, 112, 0.09);
    animation: avmvmMissionFloat 5s ease-in-out infinite reverse;
}

@keyframes avmvmMissionFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }

}


/* Mission Heading */

.avmvm-mission-heading {
    position: relative;
    max-width: 780px;
    margin: 0 auto 60px;
    text-align: center;
    z-index: 2;
}

.avmvm-mission-heading>span {
    display: inline-block;
    margin-bottom: 12px;
    color: #ed0b70;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.avmvm-mission-heading h2 {
    margin: 0;
    color: #081a45;
    font-size: 44px;
    line-height: 1.2;
}

.avmvm-mission-heading h2 strong {
    color: #081a45;
}

.avmvm-mission-heading p {
    margin: 17px auto 0;
    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   MISSION CARDS
========================================================= */

.avmvm-mission-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    z-index: 2;
}

.avmvm-mission-card {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 20px;
    background: #081a45;
    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease,
        border-color 0.45s ease;
}

.avmvm-mission-card:hover {
    transform: translateY(-12px);
    border-color: rgba(237, 11, 112, 0.45);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}


/* Mission Image */

.avmvm-mission-image {
    position: relative;
    height: 245px;
    overflow: hidden;
}

.avmvm-mission-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition:
        transform 0.8s ease,
        filter 0.8s ease;
}

.avmvm-mission-card:hover .avmvm-mission-image img {
    transform: scale(1.10);
    filter: saturate(1.1);
}


/* Mission Image Light */

.avmvm-mission-image-light {
    position: absolute;
    top: -120%;
    left: -80%;
    width: 42%;
    height: 320%;
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(25deg);
    pointer-events: none;
}

.avmvm-mission-card:hover .avmvm-mission-image-light {
    animation: avmvmMissionLight 1s ease forwards;
}

@keyframes avmvmMissionLight {

    0% {
        left: -80%;
    }

    100% {
        left: 150%;
    }

}


/* Mission Number */

.avmvm-mission-number {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    background: rgba(1, 43, 143, 0.85);
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
}


/* Mission Card Content */

.avmvm-mission-card-content {
    position: relative;
    padding: 30px;
}

.avmvm-mission-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 13px;
    background: #ed0b70;
    color: #ffffff;
    font-family: 'themify';
    font-size: 20px;
    transition:
        transform 0.5s ease,
        border-radius 0.5s ease;
}

.avmvm-mission-card:hover .avmvm-mission-icon {
    transform: rotate(8deg) scale(1.08);
    border-radius: 50%;
}

.avmvm-mission-label {
    display: block;
    margin-bottom: 5px;
    color: #ed0b70;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.avmvm-mission-card-content h3 {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 23px;
}

.avmvm-mission-card-content p {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 14px;
    line-height: 1.85;
}


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

@media (max-width: 1199px) {

    .avmvm-motto-layout,
    .avmvm-vision-layout {
        gap: 45px;
    }

}


@media (max-width: 991px) {

    .avmvm-motto-section,
    .avmvm-vision-section,
    .avmvm-mission-section {
        padding: 80px 0;
    }

    .avmvm-motto-heading h2 {
        font-size: 38px;
    }

    .avmvm-motto-layout,
    .avmvm-vision-layout {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .avmvm-motto-image-box {
        height: 480px;
    }

    .avmvm-motto-content h3 {
        font-size: 33px;
    }

    .avmvm-vision-content h2 {
        font-size: 36px;
    }

    .avmvm-vision-image-box {
        height: 450px;
    }

    .avmvm-mission-heading h2 {
        font-size: 38px;
    }

    .avmvm-mission-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 767px) {

    .avmvm-motto-section,
    .avmvm-vision-section,
    .avmvm-mission-section {
        padding: 65px 0;
    }

    .avmvm-motto-heading {
        margin-bottom: 42px;
    }

    .avmvm-motto-heading h2 {
        font-size: 32px;
    }

    .avmvm-motto-image-box {
        height: 390px;
        border-radius: 18px;
    }

    .avmvm-motto-content h3 {
        font-size: 28px;
    }

    .avmvm-motto-content>p {
        font-size: 15px;
    }

    .avmvm-motto-highlights {
        grid-template-columns: 1fr;
    }

    .avmvm-vision-content h2 {
        font-size: 31px;
    }

    .avmvm-vision-image-box {
        height: 390px;
        border-radius: 18px;
    }

    .avmvm-mission-heading {
        margin-bottom: 45px;
    }

    .avmvm-mission-heading h2 {
        font-size: 31px;
    }

    .avmvm-mission-image {
        height: 230px;
    }

}


@media (max-width: 480px) {

    .avmvm-motto-image-area,
    .avmvm-vision-image-area {
        padding: 8px;
    }

    .avmvm-motto-image-box {
        height: 320px;
    }

    .avmvm-motto-badge {
        right: 3px;
        bottom: 25px;
        padding: 12px 16px;
    }

    .avmvm-motto-content h3 {
        font-size: 25px;
    }

    .avmvm-vision-image-box {
        height: 320px;
    }

    .avmvm-mission-image {
        height: 210px;
    }

    .avmvm-mission-card-content {
        padding: 24px;
    }

}

/* =========================================================
   ANNAI VEILANKANNI'S
   AIMS & OBJECTIVES
========================================================= */

.avhs-aims-section,
.avhs-aims-closing-section {
    position: relative;
    overflow: hidden;
}


/* =========================================================
   MAIN LIGHT SECTION
========================================================= */

.avhs-aims-section {
    padding: 60px 0;
    background: #f6f9ff;
    color: #17213c;
}


/* =========================================================
   ROTATING BACKGROUND
========================================================= */

.avhs-aims-pattern {
    position: absolute;
    width: 600px;
    height: 600px;
    top: -240px;
    right: -250px;
    border: 1px solid rgba(1, 43, 143, 0.08);
    border-radius: 50%;
    animation: avhsAimsRotate 30s linear infinite;
}

.avhs-aims-pattern::before,
.avhs-aims-pattern::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.avhs-aims-pattern::before {
    inset: 75px;
    border: 1px dashed rgba(237, 11, 112, 0.10);
}

.avhs-aims-pattern::after {
    inset: 150px;
    border: 1px solid rgba(1, 43, 143, 0.06);
}

@keyframes avhsAimsRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   FLOATING DECORATIONS
========================================================= */

.avhs-aims-orbit {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.avhs-aims-orbit-one {
    width: 180px;
    height: 180px;
    left: -90px;
    bottom: 130px;
    border: 1px solid rgba(1, 43, 143, 0.08);
    animation: avhsAimsFloat 6s ease-in-out infinite;
}

.avhs-aims-orbit-two {
    width: 75px;
    height: 75px;
    right: 10%;
    bottom: 12%;
    background: rgba(237, 11, 112, 0.05);
    animation: avhsAimsFloat 5s ease-in-out infinite reverse;
}

@keyframes avhsAimsFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }

}


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

.avhs-aims-heading {
    position: relative;
    max-width: 800px;
    margin: 0 auto 65px;
    text-align: center;
    z-index: 2;
}

.avhs-aims-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: #ed0b70;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.avhs-aims-heading h2 {
    margin: 0;
    color: #17213c;
    font-size: 46px;
    line-height: 1.2;
}

.avhs-aims-heading h2 strong {
    color: #012b8f;
}

.avhs-aims-heading-line {
    position: relative;
    display: block;
    width: 70px;
    height: 3px;
    margin: 20px auto;
    background: #ed0b70;
}

.avhs-aims-heading-line::after {
    content: "";
    position: absolute;
    width: 11px;
    height: 11px;
    top: -4px;
    left: 50%;
    border-radius: 50%;
    background: #012b8f;
    transform: translateX(-50%);
}

.avhs-aims-heading p {
    margin: 0;
    color: #68748a;
    font-size: 15px;
    line-height: 1.8;
}


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

.avhs-aims-layout {
    position: relative;
    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    gap: 65px;
    align-items: start;
    z-index: 2;
}


/* =========================================================
   IMAGE AREA
========================================================= */

.avhs-aims-image-area {
    position: sticky;
    top: 100px;
    padding: 15px;
}

.avhs-aims-image-box {
    position: relative;
    height: 690px;
    overflow: hidden;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 25px 60px rgba(1, 43, 143, 0.18);
}

.avhs-aims-image-box img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition:
        transform 0.8s ease,
        filter 0.8s ease;
}

.avhs-aims-image-area:hover .avhs-aims-image-box img {
    transform: scale(1.08) rotate(1deg);
    filter: saturate(1.1) contrast(1.03);
}


/* Image Overlay */

.avhs-aims-image-overlay {
    position: absolute;
    inset: 0;
    background: rgba(1, 43, 143, 0.06);
    transition: background 0.5s ease;
}

.avhs-aims-image-area:hover .avhs-aims-image-overlay {
    background: rgba(1, 43, 143, 0);
}


/* =========================================================
   IMAGE LIGHTING
========================================================= */

.avhs-aims-image-light {
    position: absolute;
    top: -120%;
    left: -80%;
    width: 42%;
    height: 320%;
    background: rgba(255, 255, 255, 0.30);
    transform: rotate(25deg);
    z-index: 3;
    pointer-events: none;
}

.avhs-aims-image-area:hover .avhs-aims-image-light {
    animation: avhsAimsImageLight 1s ease forwards;
}

@keyframes avhsAimsImageLight {

    0% {
        left: -80%;
    }

    100% {
        left: 150%;
    }

}


/* =========================================================
   IMAGE CORNERS
========================================================= */

.avhs-aims-corner {
    position: absolute;
    width: 65px;
    height: 65px;
    border-color: #ed0b70;
    z-index: 4;
}

.avhs-aims-corner-top {
    top: -5px;
    left: -5px;
    border-top: 4px solid;
    border-left: 4px solid;
    border-radius: 18px 0 0 0;
}

.avhs-aims-corner-bottom {
    right: -5px;
    bottom: -5px;
    border-right: 4px solid;
    border-bottom: 4px solid;
    border-radius: 0 0 18px 0;
}


/* =========================================================
   BADGE
========================================================= */

.avhs-aims-badge {
    position: absolute;
    right: -5px;
    bottom: 45px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 20px;
    border-radius: 14px;
    background: #012b8f;
    color: #ffffff;
    box-shadow: 0 18px 40px rgba(1, 43, 143, 0.25);
    z-index: 5;
    animation: avhsAimsBadge 4s ease-in-out infinite;
}

.avhs-aims-badge-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ed0b70;
    font-family: 'themify';
    font-size: 18px;
}

.avhs-aims-badge strong {
    display: block;
    font-size: 14px;
}

.avhs-aims-badge small {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 11px;
}

@keyframes avhsAimsBadge {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}


/* =========================================================
   OBJECTIVES LIST
========================================================= */

.avhs-aims-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}


/* =========================================================
   OBJECTIVE ITEM
========================================================= */

.avhs-aim-item {
    position: relative;
    display: grid;
    grid-template-columns: 48px 55px 1fr;
    gap: 16px;
    align-items: center;
    padding: 20px 22px;
    border: 1px solid #e3e8f1;
    border-radius: 15px;
    background: #ffffff;
    overflow: hidden;
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}

.avhs-aim-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #012b8f;
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 0.4s ease;
}

.avhs-aim-item:hover {
    transform: translateX(8px);
    border-color: rgba(1, 43, 143, 0.16);
    box-shadow: 0 18px 35px rgba(1, 43, 143, 0.10);
}

.avhs-aim-item:hover::before {
    transform: scaleY(1);
}


/* Number */

.avhs-aim-number {
    color: #012b8f;
    font-size: 20px;
    font-weight: 800;
}


/* Icon */

.avhs-aim-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(1, 43, 143, 0.07);
    color: #012b8f;
    font-family: 'themify';
    font-size: 18px;
    transition:
        transform 0.45s ease,
        background 0.4s ease,
        color 0.4s ease;
}

.avhs-aim-item:hover .avhs-aim-icon {
    transform: rotateY(180deg) scale(1.08);
    background: #ed0b70;
    color: #ffffff;
}


/* Content */

.avhs-aim-content h3 {
    margin: 0 0 5px;
    color: #17213c;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 600;
}

.avhs-aim-content p {
    margin: 0;
    color: #6a7589;
    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   DARK CLOSING SECTION
========================================================= */

.avhs-aims-closing-section {
    padding: 85px 0;
    background: #012b8f;
    color: #ffffff;
}


/* Rotating Pattern */

.avhs-aims-closing-pattern {
    position: absolute;
    width: 500px;
    height: 500px;
    right: -200px;
    top: -200px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    animation: avhsAimsClosingRotate 25s linear infinite;
}

.avhs-aims-closing-pattern::before {
    content: "";
    position: absolute;
    inset: 65px;
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

@keyframes avhsAimsClosingRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }

}


/* Closing Content */

.avhs-aims-closing-content {
    position: relative;
    max-width: 800px;
    margin: auto;
    text-align: center;
    z-index: 2;
}

.avhs-aims-closing-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: #ed0b70;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.avhs-aims-closing-content h2 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 38px;
    line-height: 1.25;
}

.avhs-aims-closing-content h2 strong {
    color: #ffffff;
}

.avhs-aims-closing-content p {
    max-width: 700px;
    margin: auto;
    color: rgba(255, 255, 255, 0.70);
    font-size: 15px;
    line-height: 1.9;
}


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

@media (max-width: 1199px) {

    .avhs-aims-layout {
        gap: 40px;
    }

    .avhs-aims-image-box {
        height: 680px;
    }

}


@media (max-width: 991px) {

    .avhs-aims-section,
    .avhs-aims-closing-section {
        padding: 80px 0;
    }

    .avhs-aims-heading h2 {
        font-size: 38px;
    }

    .avhs-aims-layout {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .avhs-aims-image-area {
        position: relative;
        top: auto;
    }

    .avhs-aims-image-box {
        height: 550px;
    }

    .avhs-aims-closing-content h2 {
        font-size: 34px;
    }

}


@media (max-width: 767px) {

    .avhs-aims-section,
    .avhs-aims-closing-section {
        padding: 65px 0;
    }

    .avhs-aims-heading {
        margin-bottom: 42px;
    }

    .avhs-aims-heading h2 {
        font-size: 32px;
    }

    .avhs-aims-image-box {
        height: 450px;
        border-radius: 18px;
    }

    .avhs-aims-item {
        grid-template-columns: 40px 50px 1fr;
    }

    .avhs-aim-item {
        grid-template-columns: 40px 50px 1fr;
        gap: 12px;
        padding: 17px 15px;
    }

    .avhs-aim-icon {
        width: 50px;
        height: 50px;
    }

    .avhs-aim-content h3 {
        font-size: 15px;
    }

    .avhs-aim-content p {
        font-size: 12px;
    }

    .avhs-aims-closing-content h2 {
        font-size: 29px;
    }

}


@media (max-width: 480px) {

    .avhs-aims-image-area {
        padding: 8px;
    }

    .avhs-aims-image-box {
        height: 380px;
    }

    .avhs-aims-badge {
        right: 3px;
        bottom: 25px;
        padding: 12px 15px;
    }

    .avhs-aims-badge-icon {
        width: 40px;
        height: 40px;
    }

    .avhs-aim-item {
        grid-template-columns: 32px 45px 1fr;
        gap: 9px;
    }

    .avhs-aim-number {
        font-size: 11px;
    }

    .avhs-aim-icon {
        width: 45px;
        height: 45px;
        font-size: 15px;
    }

}

/* =========================================================
   ANNAI VEILANKANNI'S
   DIRECTOR'S MESSAGE
========================================================= */

.avd-message-section,
.avd-message-closing-section {
    position: relative;
    overflow: hidden;
}


/* =========================================================
   LIGHT SECTION
========================================================= */

.avd-message-section {
    padding: 60px 0;
    background: #f6f9ff;
    color: #17213c;
}


/* =========================================================
   ROTATING BACKGROUND PATTERN
========================================================= */

.avd-message-pattern {
    position: absolute;
    width: 600px;
    height: 600px;
    right: -260px;
    top: -230px;
    border: 1px solid rgba(1, 43, 143, 0.08);
    border-radius: 50%;
    animation: avdPatternRotate 30s linear infinite;
}

.avd-message-pattern::before,
.avd-message-pattern::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.avd-message-pattern::before {
    inset: 75px;
    border: 1px dashed rgba(237, 11, 112, 0.10);
}

.avd-message-pattern::after {
    inset: 150px;
    border: 1px solid rgba(1, 43, 143, 0.06);
}

@keyframes avdPatternRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   FLOATING CIRCLES
========================================================= */

.avd-message-orbit {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.avd-message-orbit-one {
    width: 180px;
    height: 180px;
    left: -90px;
    bottom: 100px;
    border: 1px solid rgba(1, 43, 143, 0.08);
    animation: avdFloat 7s ease-in-out infinite;
}

.avd-message-orbit-two {
    width: 70px;
    height: 70px;
    right: 12%;
    bottom: 12%;
    background: rgba(237, 11, 112, 0.06);
    animation: avdFloat 5s ease-in-out infinite reverse;
}

@keyframes avdFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }

}


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

.avd-message-heading {
    position: relative;
    max-width: 800px;
    margin: 0 auto 65px;
    text-align: center;
    z-index: 2;
}

.avd-message-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: #ed0b70;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.avd-message-heading h2 {
    margin: 0;
    color: #17213c;
    font-size: 46px;
    line-height: 1.2;
}

.avd-message-heading h2 strong {
    color: #012b8f;
}

.avd-message-line {
    position: relative;
    display: block;
    width: 70px;
    height: 3px;
    margin: 20px auto;
    background: #ed0b70;
}

.avd-message-line::after {
    content: "";
    position: absolute;
    width: 11px;
    height: 11px;
    top: -4px;
    left: 50%;
    border-radius: 50%;
    background: #012b8f;
    transform: translateX(-50%);
}

.avd-message-heading p {
    margin: 0;
    color: #68748a;
    font-size: 15px;
    line-height: 1.8;
}


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

.avd-message-layout {
    position: relative;
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    gap: 75px;
    align-items: center;
    z-index: 2;
}


/* =========================================================
   DIRECTOR IMAGE
========================================================= */

.avd-message-image-area {
    position: relative;
    padding: 15px;
}

.avd-message-image-box {
    position: relative;
    height: 650px;
    overflow: hidden;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 25px 60px rgba(1, 43, 143, 0.18);
}

.avd-message-image-box img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
    transition:
        transform 0.8s ease,
        filter 0.8s ease;
}

.avd-message-image-area:hover .avd-message-image-box img {
    transform: scale(1.07);
    filter: saturate(1.12) contrast(1.03);
}


/* Image Color Overlay */

.avd-message-image-overlay {
    position: absolute;
    inset: 0;
    background: rgba(1, 43, 143, 0.06);
    transition: background 0.5s ease;
}

.avd-message-image-area:hover .avd-message-image-overlay {
    background: rgba(1, 43, 143, 0);
}


/* =========================================================
   MOVING LIGHT EFFECT
========================================================= */

.avd-message-image-light {
    position: absolute;
    top: -120%;
    left: -80%;
    width: 42%;
    height: 320%;
    background: rgba(255, 255, 255, 0.30);
    transform: rotate(25deg);
    z-index: 3;
    pointer-events: none;
}

.avd-message-image-area:hover .avd-message-image-light {
    animation: avdImageLight 1s ease forwards;
}

@keyframes avdImageLight {

    0% {
        left: -80%;
    }

    100% {
        left: 150%;
    }

}


/* =========================================================
   IMAGE CORNERS
========================================================= */

.avd-message-corner {
    position: absolute;
    width: 65px;
    height: 65px;
    border-color: #ed0b70;
    z-index: 4;
}

.avd-message-corner-top {
    top: -5px;
    left: -5px;
    border-top: 4px solid;
    border-left: 4px solid;
    border-radius: 18px 0 0 0;
}

.avd-message-corner-bottom {
    right: -5px;
    bottom: -5px;
    border-right: 4px solid;
    border-bottom: 4px solid;
    border-radius: 0 0 18px 0;
}


/* =========================================================
   NAME CARD
========================================================= */

.avd-message-name-card {
    position: absolute;
    right: -5px;
    bottom: 45px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 20px;
    border-radius: 14px;
    background: #012b8f;
    color: #ffffff;
    box-shadow: 0 18px 40px rgba(1, 43, 143, 0.28);
    z-index: 6;
    animation: avdNameFloat 4s ease-in-out infinite;
}

.avd-message-name-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ed0b70;
    font-family: 'themify';
    font-size: 17px;
}

.avd-message-name-card strong {
    display: block;
    font-size: 14px;
}

.avd-message-name-card small {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 11px;
}

@keyframes avdNameFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}


/* =========================================================
   MESSAGE CONTENT
========================================================= */

.avd-message-content {
    position: relative;
}

.avd-message-content-label {
    display: inline-block;
    margin-bottom: 12px;
    color: #ed0b70;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.avd-message-content h3 {
    margin: 0 0 25px;
    color: #012b8f;
    font-size: 39px;
    line-height: 1.22;
}

.avd-message-content h3 span {
    display: block;
    color: #ed0b70;
}


/* =========================================================
   QUOTE
========================================================= */

.avd-message-quote {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
    padding: 20px;
    border-left: 4px solid #ed0b70;
    border-radius: 0 13px 13px 0;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(1, 43, 143, 0.06);
}

.avd-message-quote i {
    flex: 0 0 auto;
    color: #ed0b70;
    font-family: 'themify';
    font-size: 23px;
}

.avd-message-quote p {
    margin: 0;
    color: #536079;
    font-size: 14px;
    font-style: italic;
    line-height: 1.8;
}


/* =========================================================
   MESSAGE PARAGRAPHS
========================================================= */

.avd-message-content>p {
    margin: 0 0 17px;
    color: #5d6980;
    font-size: 15px;
    line-height: 1.9;
}


/* =========================================================
   SIGNATURE
========================================================= */

.avd-message-signature {
    margin-top: 28px;
}

.avd-message-signature-line {
    width: 65px;
    height: 2px;
    margin-bottom: 10px;
    background: #ed0b70;
}

.avd-message-signature strong {
    display: block;
    color: #012b8f;
    font-size: 16px;
}

.avd-message-signature span {
    display: block;
    margin-top: 3px;
    color: #7b8497;
    font-size: 12px;
}


/* =========================================================
   DARK CLOSING SECTION
========================================================= */

.avd-message-closing-section {
    padding: 90px 0;
    background: #012b8f;
    color: #ffffff;
}


/* Rotating Pattern */

.avd-closing-pattern {
    position: absolute;
    width: 520px;
    height: 520px;
    left: -220px;
    top: -220px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    animation: avdClosingRotate 27s linear infinite;
}

.avd-closing-pattern::before,
.avd-closing-pattern::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.avd-closing-pattern::before {
    inset: 65px;
    border: 1px dashed rgba(255, 255, 255, 0.08);
}

.avd-closing-pattern::after {
    inset: 130px;
    border: 1px solid rgba(237, 11, 112, 0.12);
}

@keyframes avdClosingRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }

}


/* Closing Content */

.avd-closing-content {
    position: relative;
    max-width: 820px;
    margin: auto;
    text-align: center;
    z-index: 2;
}

.avd-closing-eyebrow {
    display: inline-block;
    margin-bottom: 13px;
    color: #ed0b70;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.avd-closing-content h2 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 39px;
    line-height: 1.25;
}

.avd-closing-content h2 strong {
    color: #ffffff;
}

.avd-closing-content>p {
    max-width: 730px;
    margin: auto;
    color: rgba(255, 255, 255, 0.70);
    font-size: 15px;
    line-height: 1.9;
}


/* =========================================================
   CLOSING POINTS
========================================================= */

.avd-closing-points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
}

.avd-closing-point {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.05);
    transition:
        transform 0.4s ease,
        background 0.4s ease,
        border-color 0.4s ease;
}

.avd-closing-point:hover {
    transform: translateY(-5px);
    background: rgba(237, 11, 112, 0.12);
    border-color: rgba(237, 11, 112, 0.45);
}

.avd-closing-point i {
    color: #ed0b70;
    font-family: 'themify';
    font-size: 14px;
}

.avd-closing-point span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
}


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

@media (max-width: 1199px) {

    .avd-message-layout {
        gap: 45px;
    }

}


@media (max-width: 991px) {

    .avd-message-section,
    .avd-message-closing-section {
        padding: 80px 0;
    }

    .avd-message-heading h2 {
        font-size: 38px;
    }

    .avd-message-layout {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .avd-message-image-box {
        height: 600px;
    }

    .avd-message-content h3 {
        font-size: 34px;
    }

    .avd-closing-content h2 {
        font-size: 34px;
    }

}


@media (max-width: 767px) {

    .avd-message-section,
    .avd-message-closing-section {
        padding: 65px 0;
    }

    .avd-message-heading {
        margin-bottom: 42px;
    }

    .avd-message-heading h2 {
        font-size: 32px;
    }

    .avd-message-image-box {
        height: 500px;
        border-radius: 18px;
    }

    .avd-message-content h3 {
        font-size: 28px;
    }

    .avd-message-content>p {
        font-size: 14px;
        line-height: 1.85;
    }

    .avd-closing-content h2 {
        font-size: 29px;
    }

}


@media (max-width: 480px) {

    .avd-message-image-area {
        padding: 8px;
    }

    .avd-message-image-box {
        height: 420px;
    }

    .avd-message-name-card {
        right: 3px;
        bottom: 25px;
        padding: 12px 15px;
    }

    .avd-message-name-icon {
        width: 40px;
        height: 40px;
    }

    .avd-message-content h3 {
        font-size: 25px;
    }

    .avd-message-quote {
        padding: 16px;
    }

    .avd-closing-points {
        flex-direction: column;
        align-items: stretch;
    }

    .avd-closing-point {
        justify-content: center;
    }

}

/* =========================================================
   ANNAI VEILANKANNI'S
   SECRETARY'S MESSAGE
========================================================= */

.avs-secretary-section,
.avs-secretary-closing-section {
    position: relative;
    overflow: hidden;
}


/* =========================================================
   LIGHT SECTION
========================================================= */

.avs-secretary-section {
    padding: 60px 0;
    background: #f6f9ff;
    color: #17213c;
}


/* =========================================================
   ROTATING BACKGROUND PATTERN
========================================================= */

.avs-secretary-pattern {
    position: absolute;
    width: 600px;
    height: 600px;
    left: -260px;
    top: -230px;
    border: 1px solid rgba(1, 43, 143, 0.08);
    border-radius: 50%;
    animation: avsSecretaryPatternRotate 30s linear infinite;
}

.avs-secretary-pattern::before,
.avs-secretary-pattern::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.avs-secretary-pattern::before {
    inset: 75px;
    border: 1px dashed rgba(237, 11, 112, 0.10);
}

.avs-secretary-pattern::after {
    inset: 150px;
    border: 1px solid rgba(1, 43, 143, 0.06);
}

@keyframes avsSecretaryPatternRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   FLOATING DECORATIONS
========================================================= */

.avs-secretary-orbit {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.avs-secretary-orbit-one {
    width: 180px;
    height: 180px;
    right: -90px;
    bottom: 100px;
    border: 1px solid rgba(1, 43, 143, 0.08);
    animation: avsSecretaryFloat 7s ease-in-out infinite;
}

.avs-secretary-orbit-two {
    width: 70px;
    height: 70px;
    left: 12%;
    bottom: 13%;
    background: rgba(237, 11, 112, 0.06);
    animation: avsSecretaryFloat 5s ease-in-out infinite reverse;
}

@keyframes avsSecretaryFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }

}


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

.avs-secretary-heading {
    position: relative;
    max-width: 800px;
    margin: 0 auto 65px;
    text-align: center;
    z-index: 2;
}

.avs-secretary-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: #ed0b70;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.avs-secretary-heading h2 {
    margin: 0;
    color: #17213c;
    font-size: 46px;
    line-height: 1.2;
}

.avs-secretary-heading h2 strong {
    color: #012b8f;
}

.avs-secretary-line {
    position: relative;
    display: block;
    width: 70px;
    height: 3px;
    margin: 20px auto;
    background: #ed0b70;
}

.avs-secretary-line::after {
    content: "";
    position: absolute;
    width: 11px;
    height: 11px;
    top: -4px;
    left: 50%;
    border-radius: 50%;
    background: #012b8f;
    transform: translateX(-50%);
}

.avs-secretary-heading p {
    margin: 0;
    color: #68748a;
    font-size: 15px;
    line-height: 1.8;
}


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

.avs-secretary-layout {
    position: relative;
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    gap: 75px;
    align-items: center;
    z-index: 2;
}


/* =========================================================
   SECRETARY IMAGE
========================================================= */

.avs-secretary-image-area {
    position: relative;
    padding: 15px;
}

.avs-secretary-image-box {
    position: relative;
    height: 650px;
    overflow: hidden;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 25px 60px rgba(1, 43, 143, 0.18);
}

.avs-secretary-image-box img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
    transition:
        transform 0.8s ease,
        filter 0.8s ease;
}

.avs-secretary-image-area:hover .avs-secretary-image-box img {
    transform: scale(1.07);
    filter: saturate(1.12) contrast(1.03);
}


/* =========================================================
   IMAGE COLOR OVERLAY
========================================================= */

.avs-secretary-image-overlay {
    position: absolute;
    inset: 0;
    background: rgba(1, 43, 143, 0.06);
    transition: background 0.5s ease;
}

.avs-secretary-image-area:hover .avs-secretary-image-overlay {
    background: rgba(1, 43, 143, 0);
}


/* =========================================================
   MOVING LIGHT EFFECT
========================================================= */

.avs-secretary-image-light {
    position: absolute;
    top: -120%;
    left: -80%;
    width: 42%;
    height: 320%;
    background: rgba(255, 255, 255, 0.30);
    transform: rotate(25deg);
    z-index: 3;
    pointer-events: none;
}

.avs-secretary-image-area:hover .avs-secretary-image-light {
    animation: avsSecretaryImageLight 1s ease forwards;
}

@keyframes avsSecretaryImageLight {

    0% {
        left: -80%;
    }

    100% {
        left: 150%;
    }

}


/* =========================================================
   IMAGE CORNERS
========================================================= */

.avs-secretary-corner {
    position: absolute;
    width: 65px;
    height: 65px;
    border-color: #ed0b70;
    z-index: 4;
}

.avs-secretary-corner-top {
    top: -5px;
    left: -5px;
    border-top: 4px solid;
    border-left: 4px solid;
    border-radius: 18px 0 0 0;
}

.avs-secretary-corner-bottom {
    right: -5px;
    bottom: -5px;
    border-right: 4px solid;
    border-bottom: 4px solid;
    border-radius: 0 0 18px 0;
}


/* =========================================================
   NAME CARD
========================================================= */

.avs-secretary-name-card {
    position: absolute;
    right: -5px;
    bottom: 45px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 20px;
    border-radius: 14px;
    background: #012b8f;
    color: #ffffff;
    box-shadow: 0 18px 40px rgba(1, 43, 143, 0.28);
    z-index: 6;
    animation: avsSecretaryNameFloat 4s ease-in-out infinite;
}

.avs-secretary-name-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ed0b70;
    font-family: 'themify';
    font-size: 17px;
}

.avs-secretary-name-card strong {
    display: block;
    font-size: 14px;
}

.avs-secretary-name-card small {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 11px;
}

@keyframes avsSecretaryNameFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}


/* =========================================================
   MESSAGE CONTENT
========================================================= */

.avs-secretary-content {
    position: relative;
}

.avs-secretary-content-label {
    display: inline-block;
    margin-bottom: 12px;
    color: #ed0b70;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.avs-secretary-content h3 {
    margin: 0 0 25px;
    color: #012b8f;
    font-size: 39px;
    line-height: 1.22;
}

.avs-secretary-content h3 span {
    display: block;
    color: #ed0b70;
}


/* =========================================================
   QUOTE
========================================================= */

.avs-secretary-quote {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
    padding: 20px;
    border-left: 4px solid #ed0b70;
    border-radius: 0 13px 13px 0;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(1, 43, 143, 0.06);
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.avs-secretary-quote:hover {
    transform: translateX(7px);
    box-shadow: 0 15px 35px rgba(1, 43, 143, 0.10);
}

.avs-secretary-quote i {
    flex: 0 0 auto;
    color: #ed0b70;
    font-family: 'themify';
    font-size: 23px;
}

.avs-secretary-quote p {
    margin: 0;
    color: #536079;
    font-size: 14px;
    font-style: italic;
    line-height: 1.8;
}


/* =========================================================
   MESSAGE PARAGRAPHS
========================================================= */

.avs-secretary-content>p {
    margin: 0 0 17px;
    color: #5d6980;
    font-size: 15px;
    line-height: 1.9;
}


/* =========================================================
   SIGNATURE
========================================================= */

.avs-secretary-signature {
    margin-top: 28px;
}

.avs-secretary-signature-line {
    width: 65px;
    height: 2px;
    margin-bottom: 10px;
    background: #ed0b70;
}

.avs-secretary-signature strong {
    display: block;
    color: #012b8f;
    font-size: 16px;
}

.avs-secretary-signature span {
    display: block;
    margin-top: 3px;
    color: #7b8497;
    font-size: 12px;
}


/* =========================================================
   DARK CLOSING SECTION
========================================================= */

.avs-secretary-closing-section {
    padding: 90px 0;
    background: #081a45;
    color: #ffffff;
}


/* =========================================================
   CLOSING ROTATING PATTERN
========================================================= */

.avs-secretary-closing-pattern {
    position: absolute;
    width: 540px;
    height: 540px;
    right: -230px;
    top: -220px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    animation: avsSecretaryClosingRotate 28s linear infinite;
}

.avs-secretary-closing-pattern::before,
.avs-secretary-closing-pattern::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.avs-secretary-closing-pattern::before {
    inset: 70px;
    border: 1px dashed rgba(255, 255, 255, 0.08);
}

.avs-secretary-closing-pattern::after {
    inset: 140px;
    border: 1px solid rgba(237, 11, 112, 0.12);
}

@keyframes avsSecretaryClosingRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }

}


/* =========================================================
   CLOSING CONTENT
========================================================= */

.avs-secretary-closing-content {
    position: relative;
    max-width: 850px;
    margin: auto;
    text-align: center;
    z-index: 2;
}

.avs-secretary-closing-eyebrow {
    display: inline-block;
    margin-bottom: 13px;
    color: #ed0b70;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.avs-secretary-closing-content h2 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 39px;
    line-height: 1.25;
}

.avs-secretary-closing-content h2 strong {
    display: block;
    color: #ffffff;
}

.avs-secretary-closing-content>p {
    max-width: 730px;
    margin: auto;
    color: rgba(255, 255, 255, 0.70);
    font-size: 15px;
    line-height: 1.9;
}


/* =========================================================
   CLOSING POINTS
========================================================= */

.avs-secretary-closing-points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
}

.avs-secretary-closing-point {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 17px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.05);
    transition:
        transform 0.4s ease,
        background 0.4s ease,
        border-color 0.4s ease;
}

.avs-secretary-closing-point:hover {
    transform: translateY(-5px);
    background: rgba(237, 11, 112, 0.12);
    border-color: rgba(237, 11, 112, 0.45);
}

.avs-secretary-closing-point i {
    color: #ed0b70;
    font-family: 'themify';
    font-size: 14px;
}

.avs-secretary-closing-point span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
}


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

@media (max-width: 1199px) {

    .avs-secretary-layout {
        gap: 45px;
    }

}


@media (max-width: 991px) {

    .avs-secretary-section,
    .avs-secretary-closing-section {
        padding: 80px 0;
    }

    .avs-secretary-heading h2 {
        font-size: 38px;
    }

    .avs-secretary-layout {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .avs-secretary-image-box {
        height: 600px;
    }

    .avs-secretary-content h3 {
        font-size: 34px;
    }

    .avs-secretary-closing-content h2 {
        font-size: 34px;
    }

}


@media (max-width: 767px) {

    .avs-secretary-section,
    .avs-secretary-closing-section {
        padding: 65px 0;
    }

    .avs-secretary-heading {
        margin-bottom: 42px;
    }

    .avs-secretary-heading h2 {
        font-size: 32px;
    }

    .avs-secretary-image-box {
        height: 500px;
        border-radius: 18px;
    }

    .avs-secretary-content h3 {
        font-size: 28px;
    }

    .avs-secretary-content>p {
        font-size: 14px;
        line-height: 1.85;
    }

    .avs-secretary-closing-content h2 {
        font-size: 29px;
    }

}


@media (max-width: 480px) {

    .avs-secretary-image-area {
        padding: 8px;
    }

    .avs-secretary-image-box {
        height: 420px;
    }

    .avs-secretary-name-card {
        right: 3px;
        bottom: 25px;
        padding: 12px 15px;
    }

    .avs-secretary-name-icon {
        width: 40px;
        height: 40px;
    }

    .avs-secretary-content h3 {
        font-size: 25px;
    }

    .avs-secretary-quote {
        padding: 16px;
    }

    .avs-secretary-closing-points {
        flex-direction: column;
        align-items: stretch;
    }

    .avs-secretary-closing-point {
        justify-content: center;
    }

}

/* =========================================================
   ANNAI VEILANKANNI'S
   PRINCIPAL'S MESSAGE
========================================================= */

.avp-message-section,
.avp-message-closing-section {
    position: relative;
    overflow: hidden;
}


/* =========================================================
   LIGHT SECTION
========================================================= */

.avp-message-section {
    padding: 60px 0;
    background: #f6f9ff;
    color: #17213c;
}


/* =========================================================
   ROTATING BACKGROUND PATTERN
========================================================= */

.avp-message-pattern {
    position: absolute;
    width: 600px;
    height: 600px;
    right: -260px;
    top: -230px;
    border: 1px solid rgba(1, 43, 143, 0.08);
    border-radius: 50%;
    animation: avpPatternRotate 30s linear infinite;
}

.avp-message-pattern::before,
.avp-message-pattern::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.avp-message-pattern::before {
    inset: 75px;
    border: 1px dashed rgba(237, 11, 112, 0.10);
}

.avp-message-pattern::after {
    inset: 150px;
    border: 1px solid rgba(1, 43, 143, 0.06);
}

@keyframes avpPatternRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   FLOATING DECORATIONS
========================================================= */

.avp-message-orbit {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.avp-message-orbit-one {
    width: 180px;
    height: 180px;
    left: -90px;
    bottom: 100px;
    border: 1px solid rgba(1, 43, 143, 0.08);
    animation: avpFloat 7s ease-in-out infinite;
}

.avp-message-orbit-two {
    width: 70px;
    height: 70px;
    right: 12%;
    bottom: 13%;
    background: rgba(237, 11, 112, 0.06);
    animation: avpFloat 5s ease-in-out infinite reverse;
}

@keyframes avpFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }

}


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

.avp-message-heading {
    position: relative;
    max-width: 800px;
    margin: 0 auto 65px;
    text-align: center;
    z-index: 2;
}

.avp-message-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: #ed0b70;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.avp-message-heading h2 {
    margin: 0;
    color: #17213c;
    font-size: 46px;
    line-height: 1.2;
}

.avp-message-heading h2 strong {
    color: #012b8f;
}

.avp-message-line {
    position: relative;
    display: block;
    width: 70px;
    height: 3px;
    margin: 20px auto;
    background: #ed0b70;
}

.avp-message-line::after {
    content: "";
    position: absolute;
    width: 11px;
    height: 11px;
    top: -4px;
    left: 50%;
    border-radius: 50%;
    background: #012b8f;
    transform: translateX(-50%);
}

.avp-message-heading p {
    margin: 0;
    color: #68748a;
    font-size: 15px;
    line-height: 1.8;
}


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

.avp-message-layout {
    position: relative;
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    gap: 75px;
    align-items: center;
    z-index: 2;
}


/* =========================================================
   PRINCIPAL IMAGE
========================================================= */

.avp-message-image-area {
    position: relative;
    padding: 15px;
}

.avp-message-image-box {
    position: relative;
    height: 650px;
    overflow: hidden;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 25px 60px rgba(1, 43, 143, 0.18);
}

.avp-message-image-box img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
    transition:
        transform 0.8s ease,
        filter 0.8s ease;
}

.avp-message-image-area:hover .avp-message-image-box img {
    transform: scale(1.07);
    filter: saturate(1.12) contrast(1.03);
}


/* =========================================================
   IMAGE COLOR OVERLAY
========================================================= */

.avp-message-image-overlay {
    position: absolute;
    inset: 0;
    background: rgba(1, 43, 143, 0.06);
    transition: background 0.5s ease;
}

.avp-message-image-area:hover .avp-message-image-overlay {
    background: rgba(1, 43, 143, 0);
}


/* =========================================================
   MOVING LIGHT EFFECT
========================================================= */

.avp-message-image-light {
    position: absolute;
    top: -120%;
    left: -80%;
    width: 42%;
    height: 320%;
    background: rgba(255, 255, 255, 0.30);
    transform: rotate(25deg);
    z-index: 3;
    pointer-events: none;
}

.avp-message-image-area:hover .avp-message-image-light {
    animation: avpImageLight 1s ease forwards;
}

@keyframes avpImageLight {

    0% {
        left: -80%;
    }

    100% {
        left: 150%;
    }

}


/* =========================================================
   IMAGE CORNERS
========================================================= */

.avp-message-corner {
    position: absolute;
    width: 65px;
    height: 65px;
    border-color: #ed0b70;
    z-index: 4;
}

.avp-message-corner-top {
    top: -5px;
    left: -5px;
    border-top: 4px solid;
    border-left: 4px solid;
    border-radius: 18px 0 0 0;
}

.avp-message-corner-bottom {
    right: -5px;
    bottom: -5px;
    border-right: 4px solid;
    border-bottom: 4px solid;
    border-radius: 0 0 18px 0;
}


/* =========================================================
   PRINCIPAL NAME CARD
========================================================= */

.avp-message-name-card {
    position: absolute;
    right: -5px;
    bottom: 45px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 20px;
    border-radius: 14px;
    background: #012b8f;
    color: #ffffff;
    box-shadow: 0 18px 40px rgba(1, 43, 143, 0.28);
    z-index: 6;
    animation: avpNameFloat 4s ease-in-out infinite;
}

.avp-message-name-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ed0b70;
    font-family: 'themify';
    font-size: 17px;
}

.avp-message-name-card strong {
    display: block;
    font-size: 14px;
}

.avp-message-name-card small {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 11px;
}

@keyframes avpNameFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}


/* =========================================================
   MESSAGE CONTENT
========================================================= */

.avp-message-content {
    position: relative;
}

.avp-message-content-label {
    display: inline-block;
    margin-bottom: 12px;
    color: #ed0b70;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.avp-message-content h3 {
    margin: 0 0 25px;
    color: #012b8f;
    font-size: 39px;
    line-height: 1.22;
}

.avp-message-content h3 span {
    display: block;
    color: #ed0b70;
}


/* =========================================================
   QUOTE
========================================================= */

.avp-message-quote {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
    padding: 20px;
    border-left: 4px solid #ed0b70;
    border-radius: 0 13px 13px 0;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(1, 43, 143, 0.06);
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.avp-message-quote:hover {
    transform: translateX(7px);
    box-shadow: 0 15px 35px rgba(1, 43, 143, 0.10);
}

.avp-message-quote i {
    flex: 0 0 auto;
    color: #ed0b70;
    font-family: 'themify';
    font-size: 23px;
}

.avp-message-quote p {
    margin: 0;
    color: #536079;
    font-size: 14px;
    font-style: italic;
    line-height: 1.8;
}


/* =========================================================
   MESSAGE PARAGRAPHS
========================================================= */

.avp-message-content>p {
    margin: 0 0 17px;
    color: #5d6980;
    font-size: 15px;
    line-height: 1.9;
}


/* =========================================================
   SIGNATURE
========================================================= */

.avp-message-signature {
    margin-top: 28px;
}

.avp-message-signature-line {
    width: 65px;
    height: 2px;
    margin-bottom: 10px;
    background: #ed0b70;
}

.avp-message-signature strong {
    display: block;
    color: #012b8f;
    font-size: 16px;
}

.avp-message-signature span {
    display: block;
    margin-top: 3px;
    color: #7b8497;
    font-size: 12px;
}


/* =========================================================
   DARK CLOSING SECTION
========================================================= */

.avp-message-closing-section {
    padding: 90px 0;
    background: #081a45;
    color: #ffffff;
}


/* =========================================================
   CLOSING ROTATING PATTERN
========================================================= */

.avp-closing-pattern {
    position: absolute;
    width: 540px;
    height: 540px;
    left: -230px;
    top: -220px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    animation: avpClosingRotate 28s linear infinite;
}

.avp-closing-pattern::before,
.avp-closing-pattern::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.avp-closing-pattern::before {
    inset: 70px;
    border: 1px dashed rgba(255, 255, 255, 0.08);
}

.avp-closing-pattern::after {
    inset: 140px;
    border: 1px solid rgba(237, 11, 112, 0.12);
}

@keyframes avpClosingRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }

}


/* =========================================================
   CLOSING FLOATING ORBIT
========================================================= */

.avp-closing-orbit {
    position: absolute;
    right: 8%;
    bottom: 20%;
    width: 80px;
    height: 80px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    animation: avpClosingFloat 5s ease-in-out infinite;
}

@keyframes avpClosingFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(20deg);
    }

}


/* =========================================================
   CLOSING CONTENT
========================================================= */

.avp-closing-content {
    position: relative;
    max-width: 850px;
    margin: auto;
    text-align: center;
    z-index: 2;
}

.avp-closing-eyebrow {
    display: inline-block;
    margin-bottom: 13px;
    color: #ed0b70;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.avp-closing-content h2 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 39px;
    line-height: 1.25;
}

.avp-closing-content h2 strong {
    display: block;
    color: #ffffff;
}

.avp-closing-content>p {
    max-width: 730px;
    margin: auto;
    color: rgba(255, 255, 255, 0.70);
    font-size: 15px;
    line-height: 1.9;
}


/* =========================================================
   CLOSING POINTS
========================================================= */

.avp-closing-points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
}

.avp-closing-point {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 17px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.05);
    transition:
        transform 0.4s ease,
        background 0.4s ease,
        border-color 0.4s ease;
}

.avp-closing-point:hover {
    transform: translateY(-5px);
    background: rgba(237, 11, 112, 0.12);
    border-color: rgba(237, 11, 112, 0.45);
}

.avp-closing-point i {
    color: #ed0b70;
    font-family: 'themify';
    font-size: 14px;
}

.avp-closing-point span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
}


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

@media (max-width: 1199px) {

    .avp-message-layout {
        gap: 45px;
    }

}


@media (max-width: 991px) {

    .avp-message-section,
    .avp-message-closing-section {
        padding: 80px 0;
    }

    .avp-message-heading h2 {
        font-size: 38px;
    }

    .avp-message-layout {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .avp-message-image-box {
        height: 600px;
    }

    .avp-message-content h3 {
        font-size: 34px;
    }

    .avp-closing-content h2 {
        font-size: 34px;
    }

}


@media (max-width: 767px) {

    .avp-message-section,
    .avp-message-closing-section {
        padding: 65px 0;
    }

    .avp-message-heading {
        margin-bottom: 42px;
    }

    .avp-message-heading h2 {
        font-size: 32px;
    }

    .avp-message-image-box {
        height: 500px;
        border-radius: 18px;
    }

    .avp-message-content h3 {
        font-size: 28px;
    }

    .avp-message-content>p {
        font-size: 14px;
        line-height: 1.85;
    }

    .avp-closing-content h2 {
        font-size: 29px;
    }

}


@media (max-width: 480px) {

    .avp-message-image-area {
        padding: 8px;
    }

    .avp-message-image-box {
        height: 420px;
    }

    .avp-message-name-card {
        right: 3px;
        bottom: 25px;
        padding: 12px 15px;
    }

    .avp-message-name-icon {
        width: 40px;
        height: 40px;
    }

    .avp-message-content h3 {
        font-size: 25px;
    }

    .avp-message-quote {
        padding: 16px;
    }

    .avp-closing-points {
        flex-direction: column;
        align-items: stretch;
    }

    .avp-closing-point {
        justify-content: center;
    }

}

/* =========================================================
   ANNAI VEILANKANNI'S
   CORRESPONDENT'S MESSAGE
========================================================= */

.avc-message-section,
.avc-message-closing-section {
    position: relative;
    overflow: hidden;
}


/* =========================================================
   LIGHT SECTION
========================================================= */

.avc-message-section {
    padding: 60px 0;
    background: #f6f9ff;
    color: #17213c;
}


/* =========================================================
   ROTATING BACKGROUND PATTERN
========================================================= */

.avc-message-pattern {
    position: absolute;
    width: 600px;
    height: 600px;
    right: -260px;
    top: -230px;
    border: 1px solid rgba(1, 43, 143, 0.08);
    border-radius: 50%;
    animation: avcPatternRotate 30s linear infinite;
}

.avc-message-pattern::before,
.avc-message-pattern::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.avc-message-pattern::before {
    inset: 75px;
    border: 1px dashed rgba(237, 11, 112, 0.10);
}

.avc-message-pattern::after {
    inset: 150px;
    border: 1px solid rgba(1, 43, 143, 0.06);
}

@keyframes avcPatternRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   FLOATING DECORATIONS
========================================================= */

.avc-message-orbit {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.avc-message-orbit-one {
    width: 180px;
    height: 180px;
    left: -90px;
    bottom: 100px;
    border: 1px solid rgba(1, 43, 143, 0.08);
    animation: avcFloat 7s ease-in-out infinite;
}

.avc-message-orbit-two {
    width: 70px;
    height: 70px;
    right: 12%;
    bottom: 13%;
    background: rgba(237, 11, 112, 0.06);
    animation: avcFloat 5s ease-in-out infinite reverse;
}

@keyframes avcFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }

}


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

.avc-message-heading {
    position: relative;
    max-width: 800px;
    margin: 0 auto 65px;
    text-align: center;
    z-index: 2;
}

.avc-message-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: #ed0b70;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.avc-message-heading h2 {
    margin: 0;
    color: #17213c;
    font-size: 46px;
    line-height: 1.2;
}

.avc-message-heading h2 strong {
    color: #012b8f;
}

.avc-message-line {
    position: relative;
    display: block;
    width: 70px;
    height: 3px;
    margin: 20px auto;
    background: #ed0b70;
}

.avc-message-line::after {
    content: "";
    position: absolute;
    width: 11px;
    height: 11px;
    top: -4px;
    left: 50%;
    border-radius: 50%;
    background: #012b8f;
    transform: translateX(-50%);
}

.avc-message-heading p {
    margin: 0;
    color: #68748a;
    font-size: 15px;
    line-height: 1.8;
}


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

.avc-message-layout {
    position: relative;
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    gap: 75px;
    align-items: center;
    z-index: 2;
}


/* =========================================================
   CORRESPONDENT IMAGE
========================================================= */

.avc-message-image-area {
    position: relative;
    padding: 15px;
}

.avc-message-image-box {
    position: relative;
    height: 650px;
    overflow: hidden;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 25px 60px rgba(1, 43, 143, 0.18);
}

.avc-message-image-box img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
    transition:
        transform 0.8s ease,
        filter 0.8s ease;
}

.avc-message-image-area:hover .avc-message-image-box img {
    transform: scale(1.07);
    filter: saturate(1.12) contrast(1.03);
}


/* =========================================================
   IMAGE COLOR EFFECT
========================================================= */

.avc-message-image-overlay {
    position: absolute;
    inset: 0;
    background: rgba(1, 43, 143, 0.06);
    transition: background 0.5s ease;
}

.avc-message-image-area:hover .avc-message-image-overlay {
    background: rgba(1, 43, 143, 0);
}


/* =========================================================
   MOVING LIGHT EFFECT
========================================================= */

.avc-message-image-light {
    position: absolute;
    top: -120%;
    left: -80%;
    width: 42%;
    height: 320%;
    background: rgba(255, 255, 255, 0.30);
    transform: rotate(25deg);
    z-index: 3;
    pointer-events: none;
}

.avc-message-image-area:hover .avc-message-image-light {
    animation: avcImageLight 1s ease forwards;
}

@keyframes avcImageLight {

    0% {
        left: -80%;
    }

    100% {
        left: 150%;
    }

}


/* =========================================================
   DECORATIVE IMAGE CORNERS
========================================================= */

.avc-message-corner {
    position: absolute;
    width: 65px;
    height: 65px;
    border-color: #ed0b70;
    z-index: 4;
}

.avc-message-corner-top {
    top: -5px;
    left: -5px;
    border-top: 4px solid;
    border-left: 4px solid;
    border-radius: 18px 0 0 0;
}

.avc-message-corner-bottom {
    right: -5px;
    bottom: -5px;
    border-right: 4px solid;
    border-bottom: 4px solid;
    border-radius: 0 0 18px 0;
}


/* =========================================================
   NAME CARD
========================================================= */

.avc-message-name-card {
    position: absolute;
    right: -5px;
    bottom: 45px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 20px;
    border-radius: 14px;
    background: #012b8f;
    color: #ffffff;
    box-shadow: 0 18px 40px rgba(1, 43, 143, 0.28);
    z-index: 6;
    animation: avcNameFloat 4s ease-in-out infinite;
}

.avc-message-name-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ed0b70;
    font-family: 'themify';
    font-size: 17px;
}

.avc-message-name-card strong {
    display: block;
    font-size: 14px;
}

.avc-message-name-card small {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 11px;
}

@keyframes avcNameFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}


/* =========================================================
   MESSAGE CONTENT
========================================================= */

.avc-message-content {
    position: relative;
}

.avc-message-content-label {
    display: inline-block;
    margin-bottom: 12px;
    color: #ed0b70;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.avc-message-content h3 {
    margin: 0 0 25px;
    color: #012b8f;
    font-size: 39px;
    line-height: 1.22;
}

.avc-message-content h3 span {
    display: block;
    color: #ed0b70;
}


/* =========================================================
   QUOTE BOX
========================================================= */

.avc-message-quote {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
    padding: 20px;
    border-left: 4px solid #ed0b70;
    border-radius: 0 13px 13px 0;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(1, 43, 143, 0.06);
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.avc-message-quote:hover {
    transform: translateX(7px);
    box-shadow: 0 15px 35px rgba(1, 43, 143, 0.10);
}

.avc-message-quote i {
    flex: 0 0 auto;
    color: #ed0b70;
    font-family: 'themify';
    font-size: 23px;
}

.avc-message-quote p {
    margin: 0;
    color: #536079;
    font-size: 14px;
    font-style: italic;
    line-height: 1.8;
}


/* =========================================================
   MESSAGE PARAGRAPHS
========================================================= */

.avc-message-content>p {
    margin: 0 0 17px;
    color: #5d6980;
    font-size: 15px;
    line-height: 1.9;
}


/* =========================================================
   SIGNATURE
========================================================= */

.avc-message-signature {
    margin-top: 28px;
}

.avc-message-signature-line {
    width: 65px;
    height: 2px;
    margin-bottom: 10px;
    background: #ed0b70;
}

.avc-message-signature strong {
    display: block;
    color: #012b8f;
    font-size: 16px;
}

.avc-message-signature span {
    display: block;
    margin-top: 3px;
    color: #7b8497;
    font-size: 12px;
}


/* =========================================================
   DARK CLOSING SECTION
========================================================= */

.avc-message-closing-section {
    padding: 90px 0;
    background: #081a45;
    color: #ffffff;
}


/* =========================================================
   CLOSING ROTATING PATTERN
========================================================= */

.avc-closing-pattern {
    position: absolute;
    width: 540px;
    height: 540px;
    left: -230px;
    top: -220px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    animation: avcClosingRotate 28s linear infinite;
}

.avc-closing-pattern::before,
.avc-closing-pattern::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.avc-closing-pattern::before {
    inset: 70px;
    border: 1px dashed rgba(255, 255, 255, 0.08);
}

.avc-closing-pattern::after {
    inset: 140px;
    border: 1px solid rgba(237, 11, 112, 0.12);
}

@keyframes avcClosingRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }

}


/* =========================================================
   CLOSING FLOATING ELEMENT
========================================================= */

.avc-closing-orbit {
    position: absolute;
    right: 8%;
    bottom: 20%;
    width: 80px;
    height: 80px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    animation: avcClosingFloat 5s ease-in-out infinite;
}

@keyframes avcClosingFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(20deg);
    }

}


/* =========================================================
   CLOSING CONTENT
========================================================= */

.avc-closing-content {
    position: relative;
    max-width: 850px;
    margin: auto;
    text-align: center;
    z-index: 2;
}

.avc-closing-eyebrow {
    display: inline-block;
    margin-bottom: 13px;
    color: #ed0b70;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.avc-closing-content h2 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 39px;
    line-height: 1.25;
}

.avc-closing-content h2 strong {
    display: block;
    color: #ffffff;
}

.avc-closing-content>p {
    max-width: 730px;
    margin: auto;
    color: rgba(255, 255, 255, 0.70);
    font-size: 15px;
    line-height: 1.9;
}


/* =========================================================
   CLOSING POINTS
========================================================= */

.avc-closing-points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
}

.avc-closing-point {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 17px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.05);
    transition:
        transform 0.4s ease,
        background 0.4s ease,
        border-color 0.4s ease;
}

.avc-closing-point:hover {
    transform: translateY(-5px);
    background: rgba(237, 11, 112, 0.12);
    border-color: rgba(237, 11, 112, 0.45);
}

.avc-closing-point i {
    color: #ed0b70;
    font-family: 'themify';
    font-size: 14px;
}

.avc-closing-point span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
}


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

@media (max-width: 1199px) {

    .avc-message-layout {
        gap: 45px;
    }

}


@media (max-width: 991px) {

    .avc-message-section,
    .avc-message-closing-section {
        padding: 80px 0;
    }

    .avc-message-heading h2 {
        font-size: 38px;
    }

    .avc-message-layout {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .avc-message-image-box {
        height: 600px;
    }

    .avc-message-content h3 {
        font-size: 34px;
    }

    .avc-closing-content h2 {
        font-size: 34px;
    }

}


@media (max-width: 767px) {

    .avc-message-section,
    .avc-message-closing-section {
        padding: 65px 0;
    }

    .avc-message-heading {
        margin-bottom: 42px;
    }

    .avc-message-heading h2 {
        font-size: 32px;
    }

    .avc-message-image-box {
        height: 500px;
        border-radius: 18px;
    }

    .avc-message-content h3 {
        font-size: 28px;
    }

    .avc-message-content>p {
        font-size: 14px;
        line-height: 1.85;
    }

    .avc-closing-content h2 {
        font-size: 29px;
    }

}


@media (max-width: 480px) {

    .avc-message-image-area {
        padding: 8px;
    }

    .avc-message-image-box {
        height: 420px;
    }

    .avc-message-name-card {
        right: 3px;
        bottom: 25px;
        padding: 12px 15px;
    }

    .avc-message-name-icon {
        width: 40px;
        height: 40px;
    }

    .avc-message-content h3 {
        font-size: 25px;
    }

    .avc-message-quote {
        padding: 16px;
    }

    .avc-closing-points {
        flex-direction: column;
        align-items: stretch;
    }

    .avc-closing-point {
        justify-content: center;
    }

}

/* =========================================================
   ANNAI VEILANKANNI'S
   PREMIUM ACADEMIC OVERVIEW
   ROYAL BLUE + PINK THEME
========================================================= */


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

.av-academic-overview,
.av-academic-excellence {
    position: relative;
    overflow: hidden;
}


/* =========================================================
   ACADEMIC OVERVIEW - LIGHT SECTION
========================================================= */

.av-academic-overview {
    padding: 60px 0;
    background: #f5f8fd;
    color: #17213c;
}


/* =========================================================
   ACADEMIC OVERVIEW
   ROTATING BACKGROUND PATTERN
========================================================= */

.av-academic-bg-pattern {
    position: absolute;
    width: 680px;
    height: 680px;
    right: -310px;
    top: -280px;
    border: 1px solid rgba(1, 43, 143, 0.07);
    border-radius: 50%;
    pointer-events: none;
    animation: avAcademicRotate 35s linear infinite;
}

.av-academic-bg-pattern::before {
    content: "";
    position: absolute;
    inset: 75px;
    border: 1px dashed rgba(237, 11, 112, 0.12);
    border-radius: 50%;
}

.av-academic-bg-pattern::after {
    content: "";
    position: absolute;
    inset: 150px;
    border: 1px solid rgba(1, 43, 143, 0.06);
    border-radius: 50%;
}

@keyframes avAcademicRotate {

    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }

}


/* =========================================================
   FLOATING DECORATIVE ELEMENTS
========================================================= */

.av-academic-floating {
    position: absolute;
    display: block;
    border-radius: 50%;
    pointer-events: none;
}

.av-academic-floating-1 {
    width: 190px;
    height: 190px;
    left: -95px;
    bottom: 100px;
    border: 1px solid rgba(1, 43, 143, 0.07);
    animation: avAcademicFloatOne 8s ease-in-out infinite;
}

.av-academic-floating-2 {
    width: 70px;
    height: 70px;
    left: 12%;
    bottom: 10%;
    background: rgba(237, 11, 112, 0.06);
    animation: avAcademicFloatTwo 6s ease-in-out infinite reverse;
}

@keyframes avAcademicFloatOne {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-25px);
    }

}

@keyframes avAcademicFloatTwo {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(90deg);
    }

}


/* =========================================================
   ACADEMIC HEADER
========================================================= */

.av-academic-header {
    position: relative;
    max-width: 850px;
    margin: 0 auto 70px;
    text-align: center;
    z-index: 5;
}

.av-academic-kicker {
    display: inline-block;
    margin-bottom: 14px;
    color: #ed0b70;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.av-academic-header h2 {
    margin: 0;
    color: #17213c;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.6px;
}

.av-academic-header h2 span {
    color: #012b8f;
}


/* =========================================================
   HEADER DIVIDER
========================================================= */

.av-academic-divider {
    position: relative;
    width: 75px;
    height: 3px;
    margin: 23px auto;
    background: #ed0b70;
}

.av-academic-divider i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f5f8fd;
    color: #012b8f;
    font-family: 'themify';
    font-size: 13px;
    transform: translate(-50%, -50%);
}

.av-academic-header p {
    max-width: 700px;
    margin: auto;
    color: #6b768a;
    font-size: 15px;
    line-height: 1.9;
}


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

.av-academic-main {
    position: relative;
    display: grid;
    grid-template-columns: 0.88fr 1.12fr;
    gap: 80px;
    align-items: center;
    z-index: 5;
}


/* =========================================================
   IMAGE AREA
========================================================= */

.av-academic-visual {
    position: relative;
    padding: 16px;
}


/* =========================================================
   IMAGE WRAPPER
========================================================= */

.av-academic-image-wrap {
    position: relative;
    height: 650px;
    overflow: hidden;
    border-radius: 30px;
    background: #ffffff;
    box-shadow:
        0 30px 80px rgba(1, 43, 143, 0.16);
}


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

.av-academic-image-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    filter:
        saturate(0.88) contrast(1.04) brightness(0.98);

    transition:
        transform 1s cubic-bezier(.2, .8, .2, 1),
        filter 0.8s ease;
}


/* Image Hover */

.av-academic-visual:hover .av-academic-image-wrap img {
    transform: scale(1.10);
    filter:
        saturate(1.20) contrast(1.06) brightness(1.02);
}


/* =========================================================
   IMAGE COLOUR OVERLAY
========================================================= */

.av-academic-colour-overlay {
    position: absolute;
    inset: 0;
    background: rgba(1, 43, 143, 0.08);
    mix-blend-mode: multiply;
    pointer-events: none;
    transition:
        opacity 0.7s ease,
        background 0.7s ease;
}

.av-academic-visual:hover .av-academic-colour-overlay {
    opacity: 0;
}


/* =========================================================
   IMAGE LIGHTING SWEEP
========================================================= */

.av-academic-light-sweep {
    position: absolute;
    top: -140%;
    left: -90%;
    width: 35%;
    height: 380%;
    background: rgba(255, 255, 255, 0.30);
    transform: rotate(28deg);
    pointer-events: none;
    z-index: 4;
}

.av-academic-visual:hover .av-academic-light-sweep {
    animation:
        avAcademicImageLight 1.25s ease forwards;
}

@keyframes avAcademicImageLight {

    0% {
        left: -90%;
    }

    100% {
        left: 155%;
    }

}


/* =========================================================
   IMAGE INNER BORDER
========================================================= */

.av-academic-image-border {
    position: absolute;
    inset: 11px;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 22px;
    z-index: 5;
    pointer-events: none;
}


/* =========================================================
   IMAGE HOVER FRAME
========================================================= */

.av-academic-image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 3px solid transparent;
    border-radius: 30px;
    transition:
        border-color 0.6s ease,
        box-shadow 0.6s ease;
    pointer-events: none;
    z-index: 6;
}

.av-academic-visual:hover .av-academic-image-wrap::after {
    border-color: rgba(237, 11, 112, 0.35);
    box-shadow:
        inset 0 0 35px rgba(237, 11, 112, 0.10);
}


/* =========================================================
   FLOATING ACADEMIC CARD
========================================================= */

.av-academic-floating-card {
    position: absolute;
    right: -5px;
    bottom: 52px;

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

    min-width: 240px;
    padding: 17px 20px;

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

    background: #012b8f;

    box-shadow:
        0 20px 50px rgba(1, 43, 143, 0.28);

    z-index: 8;

    animation:
        avAcademicBadgeFloat 4s ease-in-out infinite;

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

.av-academic-floating-card:hover {
    transform: translateY(-10px);
    box-shadow:
        0 25px 60px rgba(1, 43, 143, 0.34);
}

@keyframes avAcademicBadgeFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }

}


/* =========================================================
   FLOATING CARD ICON
========================================================= */

.av-academic-floating-icon {
    width: 48px;
    height: 48px;

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

    flex: 0 0 48px;

    border-radius: 13px;

    background: #ed0b70;
    color: #ffffff;

    font-family: 'themify';
    font-size: 18px;

    transition:
        transform 0.6s ease,
        border-radius 0.5s ease;
}

.av-academic-floating-card:hover .av-academic-floating-icon {
    transform: rotateY(180deg);
    border-radius: 50%;
}

.av-academic-floating-card strong {
    display: block;
    color: #ffffff;
    font-size: 14px;
}

.av-academic-floating-card small {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 11px;
}


/* =========================================================
   CONTENT AREA
========================================================= */

.av-academic-copy {
    position: relative;
}

.av-academic-small-title {
    display: inline-block;
    margin-bottom: 12px;
    color: #ed0b70;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.av-academic-copy h3 {
    margin: 0 0 26px;
    color: #17213c;
    font-size: 42px;
    line-height: 1.18;
    letter-spacing: -0.5px;
}

.av-academic-copy h3 span {
    display: block;
    color: #012b8f;
}

.av-academic-copy>p {
    margin: 0 0 23px;
    color: #5d6980;
    font-size: 15px;
    line-height: 1.95;
}


/* =========================================================
   CURRICULUM CARD
========================================================= */

.av-academic-curriculum {
    position: relative;

    display: flex;
    align-items: flex-start;
    gap: 17px;

    margin: 28px 0;
    padding: 23px;

    overflow: hidden;

    border: 1px solid #e0e7f1;
    border-left: 4px solid #ed0b70;
    border-radius: 0 18px 18px 0;

    background: #ffffff;

    box-shadow:
        0 13px 35px rgba(1, 43, 143, 0.06);

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

.av-academic-curriculum::after {
    content: "";
    position: absolute;

    width: 130px;
    height: 130px;

    right: -70px;
    top: -70px;

    border: 1px solid rgba(1, 43, 143, 0.08);
    border-radius: 50%;

    transition:
        transform 0.7s ease;
}

.av-academic-curriculum:hover {
    transform: translateX(8px);

    border-color:
        rgba(1, 43, 143, 0.18);

    box-shadow:
        0 22px 48px rgba(1, 43, 143, 0.11);
}

.av-academic-curriculum:hover::after {
    transform: scale(2);
}


/* Curriculum Icon */

.av-academic-curriculum-icon {
    width: 55px;
    height: 55px;

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

    flex: 0 0 55px;

    border-radius: 15px;

    background: rgba(1, 43, 143, 0.07);
    color: #012b8f;

    font-family: 'themify';
    font-size: 20px;

    transition:
        transform 0.6s ease,
        background 0.4s ease,
        color 0.4s ease;
}

.av-academic-curriculum:hover .av-academic-curriculum-icon {
    transform: rotateY(180deg);
    background: #ed0b70;
    color: #ffffff;
}

.av-academic-curriculum-content {
    position: relative;
    z-index: 2;
}

.av-academic-curriculum-content>span {
    display: block;
    margin-bottom: 3px;

    color: #ed0b70;

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

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

.av-academic-curriculum h4 {
    margin: 0 0 6px;
    color: #17213c;
    font-size: 17px;
}

.av-academic-curriculum p {
    margin: 0;
    color: #69758a;
    font-size: 13px;
    line-height: 1.7;
}


/* =========================================================
   ACADEMIC FEATURE GRID
========================================================= */

.av-academic-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 28px;
}


/* =========================================================
   FEATURE CARD
========================================================= */

.av-academic-feature {
    position: relative;

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

    padding: 15px;

    overflow: hidden;

    border: 1px solid #e1e7f0;
    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 5px 18px rgba(1, 43, 143, 0.025);

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


/* Pink side animation */

.av-academic-feature::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;

    width: 3px;
    height: 0;

    background: #ed0b70;

    transition:
        height 0.4s ease;
}

.av-academic-feature:hover::before {
    height: 100%;
}

.av-academic-feature:hover {
    transform: translateY(-6px);

    border-color:
        rgba(1, 43, 143, 0.14);

    box-shadow:
        0 17px 35px rgba(1, 43, 143, 0.09);
}


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

.av-academic-feature-icon {
    width: 40px;
    height: 40px;

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

    flex: 0 0 40px;

    border-radius: 11px;

    background: rgba(237, 11, 112, 0.08);
    color: #ed0b70;

    font-family: 'themify';
    font-size: 15px;

    transition:
        transform 0.5s ease,
        background 0.4s ease,
        color 0.4s ease;
}

.av-academic-feature:hover .av-academic-feature-icon {
    transform:
        rotate(8deg) scale(1.12);

    background: #012b8f;
    color: #ffffff;
}

.av-academic-feature strong {
    display: block;
    color: #26334d;
    font-size: 14px;
}

.av-academic-feature small {
    display: block;
    margin-top: 3px;
    color: #8992a2;
    font-size: 12px;
}


/* =========================================================
   =========================================================
   ACADEMIC EXCELLENCE
   LIGHT ALTERNATE SECTION
   =========================================================
========================================================= */

.av-academic-excellence {
    padding: 60px 0;
    background: #ffffff;
    color: #17213c;
}


/* =========================================================
   EXCELLENCE ROTATING PATTERN
========================================================= */

.av-excellence-pattern {
    position: absolute;

    width: 700px;
    height: 700px;

    left: -320px;
    top: -320px;

    border: 1px solid rgba(1, 43, 143, 0.07);
    border-radius: 50%;

    pointer-events: none;

    animation:
        avExcellenceRotate 42s linear infinite;
}

.av-excellence-pattern::before {
    content: "";

    position: absolute;

    inset: 80px;

    border: 1px dashed rgba(237, 11, 112, 0.10);
    border-radius: 50%;
}

.av-excellence-pattern::after {
    content: "";

    position: absolute;

    inset: 160px;

    border: 1px solid rgba(1, 43, 143, 0.06);
    border-radius: 50%;
}

@keyframes avExcellenceRotate {

    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }

}


/* =========================================================
   EXCELLENCE FLOATING CIRCLES
========================================================= */

.av-excellence-circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.av-excellence-circle-one {
    width: 180px;
    height: 180px;

    right: -80px;
    top: 18%;

    border: 1px solid rgba(1, 43, 143, 0.07);

    animation:
        avExcellenceFloat 7s ease-in-out infinite;
}

.av-excellence-circle-two {
    width: 75px;
    height: 75px;

    right: 14%;
    bottom: 15%;

    background: rgba(237, 11, 112, 0.06);

    animation:
        avExcellenceFloat 5s ease-in-out infinite reverse;
}

@keyframes avExcellenceFloat {

    0%,
    100% {
        transform:
            translateY(0) rotate(0deg);
    }

    50% {
        transform:
            translateY(-20px) rotate(25deg);
    }

}


/* =========================================================
   EXCELLENCE CONTENT
========================================================= */

.av-excellence-inner {
    position: relative;

    max-width: 900px;

    margin: auto;

    text-align: center;

    z-index: 5;
}

.av-excellence-kicker {
    display: inline-block;

    margin-bottom: 14px;

    color: #ed0b70;

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

    letter-spacing: 2.5px;

    text-transform: uppercase;
}

.av-excellence-inner h2 {
    margin: 0;

    color: #17213c;

    font-size: 44px;

    line-height: 1.2;
}

.av-excellence-inner h2 span {
    color: #012b8f;
}


/* =========================================================
   EXCELLENCE LINE
========================================================= */

.av-excellence-line {
    position: relative;

    width: 75px;
    height: 3px;

    margin: 22px auto;

    background: #ed0b70;
}

.av-excellence-line::before,
.av-excellence-line::after {
    content: "";

    position: absolute;

    top: -4px;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: #012b8f;
}

.av-excellence-line::before {
    left: -5px;
}

.av-excellence-line::after {
    right: -5px;
}


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

.av-excellence-inner>p {
    max-width: 750px;

    margin: auto;

    color: #68748a;

    font-size: 15px;

    line-height: 1.95;
}


/* =========================================================
   EXCELLENCE ITEMS
========================================================= */

.av-excellence-items {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 14px;

    margin-top: 38px;
}


/* =========================================================
   EXCELLENCE ITEM
========================================================= */

.av-excellence-item {
    position: relative;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 13px 19px;

    overflow: hidden;

    border: 1px solid #e0e7f1;

    border-radius: 50px;

    background: #ffffff;

    box-shadow:
        0 8px 25px rgba(1, 43, 143, 0.05);

    transition:
        transform 0.45s ease,
        background 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}


/* Light Sweep */

.av-excellence-item::before {
    content: "";

    position: absolute;

    top: 0;
    left: -110%;

    width: 70%;
    height: 100%;

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

    transform: skewX(-25deg);

    transition:
        left 0.7s ease;
}

.av-excellence-item:hover::before {
    left: 150%;
}

.av-excellence-item:hover {
    transform: translateY(-7px);

    border-color:
        rgba(237, 11, 112, 0.30);

    box-shadow:
        0 18px 38px rgba(1, 43, 143, 0.10);
}


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

.av-excellence-icon {
    position: relative;

    width: 32px;
    height: 32px;

    display: flex;

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

    border-radius: 50%;

    background: rgba(237, 11, 112, 0.09);

    color: #ed0b70;

    font-family: 'themify';

    font-size: 13px;

    z-index: 2;

    transition:
        transform 0.6s ease,
        background 0.4s ease,
        color 0.4s ease;
}

.av-excellence-item:hover .av-excellence-icon {
    transform:
        rotate(360deg) scale(1.1);

    background: #012b8f;
    color: #ffffff;
}

.av-excellence-item span {
    position: relative;

    color: #34415b;

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

    z-index: 2;
}


/* =========================================================
   IMAGE OPTIONAL LIGHTING EFFECT
   FOR OTHER ACADEMIC IMAGES
========================================================= */

.av-academic-image-wrap::before {
    content: "";

    position: absolute;

    top: -130%;
    left: -100%;

    width: 30%;
    height: 360%;

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

    transform: rotate(28deg);

    z-index: 4;

    pointer-events: none;
}

.av-academic-image-wrap:hover::before {
    animation:
        avAcademicImageShine 1.3s ease forwards;
}

@keyframes avAcademicImageShine {

    0% {
        left: -100%;
    }

    100% {
        left: 160%;
    }

}


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

@media (max-width: 1199px) {

    .av-academic-main {
        gap: 55px;
    }

}


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

@media (max-width: 991px) {

    .av-academic-overview,
    .av-academic-excellence {
        padding: 85px 0;
    }

    .av-academic-header {
        margin-bottom: 55px;
    }

    .av-academic-header h2 {
        font-size: 40px;
    }

    .av-academic-main {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .av-academic-image-wrap {
        height: 600px;
    }

    .av-academic-copy h3 {
        font-size: 36px;
    }

    .av-excellence-inner h2 {
        font-size: 36px;
    }

}


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

@media (max-width: 767px) {

    .av-academic-overview,
    .av-academic-excellence {
        padding: 70px 0;
    }

    .av-academic-header {
        margin-bottom: 45px;
    }

    .av-academic-header h2 {
        font-size: 33px;
    }

    .av-academic-header p {
        font-size: 14px;
        line-height: 1.8;
    }

    .av-academic-image-wrap {
        height: 500px;
        border-radius: 22px;
    }

    .av-academic-copy h3 {
        font-size: 30px;
    }

    .av-academic-copy>p {
        font-size: 14px;
        line-height: 1.85;
    }

    .av-academic-feature-grid {
        grid-template-columns: 1fr;
    }

    .av-excellence-inner h2 {
        font-size: 30px;
    }

    .av-excellence-inner>p {
        font-size: 14px;
        line-height: 1.85;
    }

}


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

@media (max-width: 480px) {

    .av-academic-overview,
    .av-academic-excellence {
        padding: 60px 0;
    }

    .av-academic-header h2 {
        font-size: 29px;
    }

    .av-academic-kicker,
    .av-excellence-kicker {
        font-size: 10px;
        letter-spacing: 1.5px;
    }

    .av-academic-visual {
        padding: 8px;
    }

    .av-academic-image-wrap {
        height: 420px;
        border-radius: 18px;
    }

    .av-academic-floating-card {
        right: 0;
        bottom: 25px;

        min-width: 205px;

        padding: 12px 14px;
    }

    .av-academic-floating-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .av-academic-copy h3 {
        font-size: 26px;
    }

    .av-academic-curriculum {
        padding: 17px;
    }

    .av-academic-curriculum-icon {
        width: 45px;
        height: 45px;
        flex-basis: 45px;
    }

    .av-excellence-inner h2 {
        font-size: 27px;
    }

    .av-excellence-items {
        flex-direction: column;
        align-items: stretch;
    }

    .av-excellence-item {
        justify-content: center;
    }

}

/* =========================================================
   ANNAI VEILANKANNI'S MATRICULATION HIGHER SECONDARY SCHOOL
   CLASSES OFFERED - PREMIUM DESIGN
   COLOR THEME:
   ROYAL BLUE  : #012b8f
   PINK        : #ed0b70
   LIGHT       : #f5f8fd
   DARK        : #081a45
========================================================= */


/* =========================================================
   COMMON SECTION SETTINGS
========================================================= */

.avco-classes-section,
.avco-journey-section {
    position: relative;
    overflow: hidden;
}


/* =========================================================
   LIGHT - CLASSES OFFERED SECTION
========================================================= */

.avco-classes-section {
    position: relative;
    padding: 60px 0;
    background: #f5f8fd;
    color: #17213c;
}


/* =========================================================
   ROTATING BACKGROUND PATTERN
========================================================= */

.avco-classes-pattern {
    position: absolute;
    width: 720px;
    height: 720px;
    right: -330px;
    top: -320px;

    border: 1px solid rgba(1, 43, 143, 0.07);
    border-radius: 50%;

    pointer-events: none;

    animation:
        avcoClassesRotate 42s linear infinite;
}

.avco-classes-pattern::before {
    content: "";

    position: absolute;
    inset: 80px;

    border: 1px dashed rgba(237, 11, 112, 0.11);
    border-radius: 50%;
}

.avco-classes-pattern::after {
    content: "";

    position: absolute;
    inset: 165px;

    border: 1px solid rgba(1, 43, 143, 0.06);
    border-radius: 50%;
}

@keyframes avcoClassesRotate {

    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }

}


/* =========================================================
   FLOATING DECORATIVE CIRCLES
========================================================= */

.avco-classes-orbit {
    position: absolute;
    display: block;
    border-radius: 50%;
    pointer-events: none;
}

.avco-classes-orbit-1 {
    width: 210px;
    height: 210px;

    left: -110px;
    bottom: 110px;

    border: 1px solid rgba(1, 43, 143, 0.07);

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

.avco-classes-orbit-2 {
    width: 75px;
    height: 75px;

    right: 13%;
    bottom: 8%;

    background: rgba(237, 11, 112, 0.06);

    animation:
        avcoClassesFloatSmall 6s ease-in-out infinite reverse;
}

@keyframes avcoClassesFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-25px);
    }

}

@keyframes avcoClassesFloatSmall {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(90deg);
    }

}


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

.avco-classes-heading {
    position: relative;

    max-width: 1100px;

    margin: 0 auto 40px;

    text-align: center;

    z-index: 5;
}


/* =========================================================
   KICKER
========================================================= */

.avco-classes-kicker {
    display: inline-block;

    margin-bottom: 15px;

    color: #ed0b70;

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

    letter-spacing: 2.8px;

    text-transform: uppercase;
}


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

.avco-classes-heading h2 {
    margin: 0;

    color: #17213c;

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

    line-height: 1.15;

    letter-spacing: -1px;
}

.avco-classes-heading h2 span {
    color: #012b8f;
}


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

.avco-classes-divider {
    position: relative;

    width: 80px;
    height: 3px;

    margin: 25px auto;

    background: #ed0b70;
}

.avco-classes-divider i {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 32px;
    height: 32px;

    display: flex;

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

    border-radius: 50%;

    background: #f5f8fd;

    color: #012b8f;

    font-family: 'themify';

    font-size: 14px;

    transform:
        translate(-50%, -50%);
}

.avco-classes-heading p {
    max-width: 1150px;

    margin: auto;

    color: #657187;

    font-size: 17px;

    line-height: 1.9;
}


/* =========================================================
   TABLE WRAPPER
========================================================= */

.avco-classes-table-wrap {
    position: relative;

    z-index: 5;

    padding: 6px;

    overflow-x: auto;

    scrollbar-width: thin;
}


/* =========================================================
   TABLE
========================================================= */

.avco-classes-table {
    min-width: 1000px;

    overflow: hidden;

    border-radius: 24px;

    background: #ffffff;

    box-shadow:
        0 30px 75px rgba(1, 43, 143, 0.11);
}


/* =========================================================
   TABLE ROW
========================================================= */

.avco-classes-row {
    position: relative;

    display: grid;

    grid-template-columns:
        1fr 0.85fr 1.8fr;

    min-height: 100px;

    border-bottom: 1px solid #e5eaf2;

    transition:
        background 0.45s ease,
        transform 0.45s ease,
        box-shadow 0.45s ease;
}

.avco-classes-row:last-child {
    border-bottom: none;
}


/* =========================================================
   TABLE HEADER
========================================================= */

.avco-classes-header {
    min-height: 75px;

    background: #012b8f;

    border-bottom: none;
}

.avco-classes-header .avco-classes-cell {
    color: #ffffff;

    font-size: 15px;

    font-weight: 800;

    letter-spacing: 1.0px;

    text-transform: uppercase;
}


/* =========================================================
   TABLE CELLS
========================================================= */

.avco-classes-cell {
    display: flex;

    align-items: center;

    padding: 25px 28px;

    color: #536078;

    font-size: 16px;

    line-height: 1.8;
}


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

.avco-classes-row:not(.avco-classes-header):hover {
    background: #fbfcff;

    transform: translateX(5px);

    box-shadow:
        inset 5px 0 0 #ed0b70;
}


/* =========================================================
   ROW LIGHTING SWEEP
========================================================= */

.avco-classes-row:not(.avco-classes-header)::after {
    content: "";

    position: absolute;

    top: 0;
    left: -110%;

    width: 30%;
    height: 100%;

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

    transform: skewX(-20deg);

    pointer-events: none;

    transition:
        left 0.8s ease;
}

.avco-classes-row:not(.avco-classes-header):hover::after {
    left: 135%;
}


/* =========================================================
   STAGE CELL
========================================================= */

.avco-stage-cell {
    gap: 19px;
}


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

.avco-stage-number {
    width: 55px;
    height: 55px;

    display: flex;

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

    flex: 0 0 55px;

    border-radius: 15px;

    background: rgba(1, 43, 143, 0.07);

    color: #012b8f;

    font-size: 15px;

    font-weight: 800;

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

.avco-classes-row:hover .avco-stage-number {
    transform:
        rotate(8deg) scale(1.10);

    background: #ed0b70;

    color: #ffffff;

    box-shadow:
        0 10px 22px rgba(237, 11, 112, 0.22);
}


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

.avco-stage-label {
    display: block;

    margin-bottom: 5px;

    color: #ed0b70;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.6px;

    text-transform: uppercase;
}


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

.avco-stage-cell h4 {
    margin: 0;

    color: #17213c;

    font-size: 20px;

    font-weight: 700;

    line-height: 1.4;
}


/* =========================================================
   CLASS PILL
========================================================= */

.avco-class-pill {
    position: relative;

    display: inline-block;

    padding: 12px 19px;

    border: 1px solid rgba(1, 43, 143, 0.13);

    border-radius: 50px;

    background: rgba(1, 43, 143, 0.05);

    color: #012b8f;

    font-size: 14px;

    font-weight: 700;

    white-space: nowrap;

    transition:
        transform 0.45s ease,
        background 0.45s ease,
        color 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}

.avco-classes-row:hover .avco-class-pill {
    transform: translateY(-5px);

    background: #012b8f;

    border-color: #012b8f;

    color: #ffffff;

    box-shadow:
        0 10px 25px rgba(1, 43, 143, 0.18);
}


/* =========================================================
   ACADEMIC FOCUS
========================================================= */

.avco-focus-cell {
    padding-right: 40px;
}

.avco-focus-cell p {
    margin: 0;

    color: #5f6c82;

    font-size: 15px;

    line-height: 1.9;
}


/* =========================================================
   =========================================================
   DARK ALTERNATE SECTION
=========================================================
========================================================= */

.avco-journey-section {
    position: relative;

    padding: 115px 0;

    background: #081a45;

    color: #ffffff;
}


/* =========================================================
   DARK ROTATING PATTERN
========================================================= */

.avco-journey-pattern {
    position: absolute;

    width: 720px;
    height: 720px;

    left: -330px;
    top: -320px;

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

    border-radius: 50%;

    pointer-events: none;

    animation:
        avcoJourneyRotate 45s linear infinite;
}

.avco-journey-pattern::before {
    content: "";

    position: absolute;

    inset: 80px;

    border: 1px dashed rgba(255, 255, 255, 0.08);

    border-radius: 50%;
}

.avco-journey-pattern::after {
    content: "";

    position: absolute;

    inset: 165px;

    border: 1px solid rgba(237, 11, 112, 0.13);

    border-radius: 50%;
}

@keyframes avcoJourneyRotate {

    0% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(0deg);
    }

}


/* =========================================================
   DARK FLOATING CIRCLES
========================================================= */

.avco-journey-circle {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.avco-journey-circle-1 {
    width: 190px;
    height: 190px;

    right: -90px;
    top: 18%;

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

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

.avco-journey-circle-2 {
    width: 75px;
    height: 75px;

    right: 14%;
    bottom: 13%;

    background: rgba(237, 11, 112, 0.08);

    animation:
        avcoJourneyFloat 5s ease-in-out infinite reverse;
}

@keyframes avcoJourneyFloat {

    0%,
    100% {
        transform:
            translateY(0) rotate(0deg);
    }

    50% {
        transform:
            translateY(-22px) rotate(25deg);
    }

}


/* =========================================================
   JOURNEY CONTENT
========================================================= */

.avco-journey-content {
    position: relative;

    max-width: 920px;

    margin: auto;

    text-align: center;

    z-index: 5;
}


/* =========================================================
   JOURNEY KICKER
========================================================= */

.avco-journey-kicker {
    display: inline-block;

    margin-bottom: 15px;

    color: #ed0b70;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2.8px;

    text-transform: uppercase;
}


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

.avco-journey-content h2 {
    margin: 0;

    color: #ffffff;

    font-size: 50px;

    font-weight: 700;

    line-height: 1.2;
}

.avco-journey-content h2 span {

    color: #ffffff;
}


/* =========================================================
   JOURNEY LINE
========================================================= */

.avco-journey-line {
    width: 80px;
    height: 3px;

    margin: 25px auto;

    background: #ed0b70;
}

.avco-journey-content>p {
    max-width: 780px;

    margin: auto;

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

    font-size: 16px;

    line-height: 1.95;
}


/* =========================================================
   JOURNEY POINTS
========================================================= */

.avco-journey-points {
    display: grid;

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

    gap: 16px;

    margin-top: 42px;
}


/* =========================================================
   JOURNEY CARD
========================================================= */

.avco-journey-point {
    position: relative;

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 20px;

    overflow: hidden;

    text-align: left;

    border: 1px solid rgba(255, 255, 255, 0.10);

    border-radius: 17px;

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

    transition:
        transform 0.45s ease,
        background 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}


/* Journey Light Sweep */

.avco-journey-point::before {
    content: "";

    position: absolute;

    left: -110%;
    top: 0;

    width: 65%;
    height: 100%;

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

    transform: skewX(-20deg);

    transition:
        left 0.8s ease;
}

.avco-journey-point:hover::before {
    left: 140%;
}

.avco-journey-point:hover {
    transform: translateY(-8px);

    background:
        rgba(237, 11, 112, 0.08);

    border-color:
        rgba(237, 11, 112, 0.40);

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


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

.avco-journey-icon {
    width: 48px;
    height: 48px;

    display: flex;

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

    flex: 0 0 48px;

    border-radius: 14px;

    background:
        rgba(237, 11, 112, 0.12);

    color: #ed0b70;

    font-family: 'themify';

    font-size: 17px;

    transition:
        transform 0.6s ease,
        background 0.4s ease,
        color 0.4s ease;
}

.avco-journey-point:hover .avco-journey-icon {
    transform:
        rotateY(180deg);

    background: #ed0b70;

    color: #ffffff;
}


/* =========================================================
   JOURNEY TEXT
========================================================= */

.avco-journey-point strong {
    display: block;

    color: #ffffff;

    font-size: 15px;

    line-height: 1.4;
}

.avco-journey-point small {
    display: block;

    margin-top: 5px;

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

    font-size: 12px;

    line-height: 1.5;
}


/* =========================================================
   TABLET 1199PX
========================================================= */

@media (max-width: 1199px) {

    .avco-classes-table {
        min-width: 950px;
    }

    .avco-classes-row {
        grid-template-columns:
            1fr 0.9fr 1.7fr;
    }

}


/* =========================================================
   TABLET 991PX
========================================================= */

@media (max-width: 991px) {

    .avco-classes-section,
    .avco-journey-section {
        padding: 90px 0;
    }

    .avco-classes-heading {
        margin-bottom: 55px;
    }

    .avco-classes-heading h2 {
        font-size: 46px;
    }

    .avco-classes-heading p {
        font-size: 16px;
    }

    .avco-classes-table {
        min-width: 900px;
    }

    .avco-classes-cell {
        padding: 22px;
    }

    .avco-stage-cell h4 {
        font-size: 18px;
    }

    .avco-focus-cell p {
        font-size: 14px;
    }

    .avco-journey-content h2 {
        font-size: 42px;
    }

}


/* =========================================================
   MOBILE 767PX
========================================================= */

@media (max-width: 767px) {

    .avco-classes-section,
    .avco-journey-section {
        padding: 75px 0;
    }

    .avco-classes-heading {
        margin-bottom: 45px;
    }

    .avco-classes-heading h2 {
        font-size: 38px;
    }

    .avco-classes-heading p {
        font-size: 15px;

        line-height: 1.8;
    }

    .avco-classes-table-wrap {
        margin-left: -5px;
        margin-right: -5px;
    }

    .avco-classes-table {
        min-width: 850px;
    }

    .avco-classes-header {
        min-height: 70px;
    }

    .avco-classes-header .avco-classes-cell {
        font-size: 14px;
    }

    .avco-classes-row {
        min-height: 135px;
    }

    .avco-classes-cell {
        padding: 20px;
        font-size: 15px;
    }

    .avco-stage-number {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
    }

    .avco-stage-cell h4 {
        font-size: 18px;
    }

    .avco-stage-label {
        font-size: 10px;
    }

    .avco-class-pill {
        font-size: 13px;
        padding: 10px 16px;
    }

    .avco-focus-cell p {
        font-size: 14px;
    }

    .avco-journey-content h2 {
        font-size: 35px;
    }

    .avco-journey-content>p {
        font-size: 15px;
    }

    .avco-journey-points {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   SMALL MOBILE 480PX
========================================================= */

@media (max-width: 480px) {

    .avco-classes-section,
    .avco-journey-section {
        padding: 65px 0;
    }

    .avco-classes-heading h2 {
        font-size: 32px;
    }

    .avco-classes-kicker,
    .avco-journey-kicker {
        font-size: 10px;
        letter-spacing: 1.0px;
    }

    .avco-classes-heading p {
        font-size: 14px;
    }

    .avco-classes-table {
        min-width: 820px;
    }

    .avco-classes-cell {
        padding: 18px;
    }

    .avco-stage-number {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        font-size: 13px;
    }

    .avco-stage-cell {
        gap: 13px;
    }

    .avco-stage-cell h4 {
        font-size: 17px;
    }

    .avco-focus-cell p {
        font-size: 13px;
    }

    .avco-journey-content h2 {
        font-size: 29px;
    }

    .avco-journey-content>p {
        font-size: 14px;
    }

    .avco-journey-point {
        padding: 16px;
    }

    .avco-journey-icon {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 360px) {

    .avco-classes-heading h2 {
        font-size: 29px;
    }

    .avco-journey-content h2 {
        font-size: 27px;
    }

    .avco-classes-table {
        min-width: 800px;
    }

}

/* =========================================================
   KINDERGARTEN PROGRAMME
   COMPLETE PREMIUM CSS
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {

    --avkg-blue: #012b8f;
    --avkg-dark-blue: #081a45;
    --avkg-pink: #ed0b70;

    --avkg-light: #f5f8fd;
    --avkg-white: #ffffff;

    --avkg-heading: #17213c;
    --avkg-text: #657187;
    --avkg-muted: #788397;

    --avkg-border: #e2e8f1;

}


/* =========================================================
   MAIN SECTION
========================================================= */

.avkg-programme-section {

    position: relative;

    width: 100%;

    padding: 60px 0;

    overflow: hidden;

    background: #f5f8fd;

    color: #17213c;

    isolation: isolate;

}


/* =========================================================
   BACKGROUND BLUE GLOW
========================================================= */

.avkg-programme-section::before {

    content: "";

    position: absolute;

    width: 550px;
    height: 550px;

    top: -270px;
    right: -220px;

    border-radius: 50%;

    background:
        rgba(1, 43, 143, 0.045);

    pointer-events: none;

    animation:
        avkgProgrammeGlow 10s ease-in-out infinite;

}


@keyframes avkgProgrammeGlow {

    0%,
    100% {

        transform:
            translate(0, 0) scale(1);

    }

    50% {

        transform:
            translate(-25px, 25px) scale(1.1);

    }

}


/* =========================================================
   PINK BACKGROUND GLOW
========================================================= */

.avkg-programme-section::after {

    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

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

    border-radius: 50%;

    background:
        rgba(237, 11, 112, 0.045);

    pointer-events: none;

    animation:
        avkgProgrammePinkGlow 9s ease-in-out infinite;

}


@keyframes avkgProgrammePinkGlow {

    0%,
    100% {

        transform:
            translate(0, 0) scale(1);

    }

    50% {

        transform:
            translate(25px, -20px) scale(1.1);

    }

}


/* =========================================================
   ROTATING BACKGROUND PATTERN
========================================================= */

.avkg-programme-pattern {

    position: absolute;

    width: 760px;
    height: 760px;

    top: -360px;
    left: -360px;

    border:
        1px solid rgba(1, 43, 143, 0.075);

    border-radius: 50%;

    pointer-events: none;

    z-index: 0;

    animation:
        avkgProgrammePatternRotate 50s linear infinite;

}


.avkg-programme-pattern::before {

    content: "";

    position: absolute;

    inset: 85px;

    border:
        1px dashed rgba(237, 11, 112, 0.12);

    border-radius: 50%;

}


.avkg-programme-pattern::after {

    content: "";

    position: absolute;

    inset: 175px;

    border:
        1px solid rgba(1, 43, 143, 0.06);

    border-radius: 50%;

}


@keyframes avkgProgrammePatternRotate {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


/* =========================================================
   FLOATING DECORATIONS
========================================================= */

.avkg-programme-float {

    position: absolute;

    display: block;

    border-radius: 50%;

    pointer-events: none;

    z-index: 1;

}


.avkg-programme-float-one {

    width: 190px;
    height: 190px;

    left: -95px;
    bottom: 12%;

    border:
        1px solid rgba(1, 43, 143, 0.07);

    animation:
        avkgFloatOne 8s ease-in-out infinite;

}


.avkg-programme-float-two {

    width: 70px;
    height: 70px;

    left: 14%;
    bottom: 7%;

    background:
        rgba(237, 11, 112, 0.06);

    animation:
        avkgFloatTwo 6s ease-in-out infinite;

}


@keyframes avkgFloatOne {

    0%,
    100% {

        transform:
            translateY(0) rotate(0deg);

    }

    50% {

        transform:
            translateY(-25px) rotate(20deg);

    }

}


@keyframes avkgFloatTwo {

    0%,
    100% {

        transform:
            translateY(0) rotate(0deg);

    }

    50% {

        transform:
            translateY(-20px) rotate(90deg);

    }

}


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

.avkg-programme-heading {

    position: relative;

    max-width: 1150px;

    margin:
        0 auto 40px;

    text-align: center;

    z-index: 5;

}


/* =========================================================
   EYEBROW
========================================================= */

.avkg-programme-eyebrow {

    display: inline-block;

    margin-bottom: 15px;

    color:
        #ed0b70;

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        3px;

    text-transform:
        uppercase;

}


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

.avkg-programme-heading h2 {

    margin: 0;

    color:
        #17213c;

    font-size:
        54px;

    font-weight:
        700;

    line-height:
        1.18;

    letter-spacing:
        -1px;

}


.avkg-programme-heading h2 span {

    color:
        #012b8f;

}


/* =========================================================
   DIVIDER
========================================================= */

.avkg-programme-divider {

    position: relative;

    width: 85px;
    height: 3px;

    margin:
        26px auto;

    background:
        #ed0b70;

}


.avkg-programme-divider::before,
.avkg-programme-divider::after {

    content: "";

    position: absolute;

    top: 50%;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background:
        #012b8f;

    transform:
        translateY(-50%);

}


.avkg-programme-divider::before {

    left: -7px;

}


.avkg-programme-divider::after {

    right: -7px;

}


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

.avkg-programme-heading p {

    max-width:
        1150px;

    margin:
        0 auto;

    color:
        #657187;

    font-size:
        16px;

    line-height:
        1.95;

}


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

.avkg-programme-layout {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        0.9fr 1.1fr;

    gap:
        75px;

    align-items:
        center;

    z-index:
        5;

}


/* =========================================================
   IMAGE AREA
========================================================= */

.avkg-programme-image-area {

    position:
        relative;

    padding:
        12px;

}


/* =========================================================
   IMAGE FRAME
========================================================= */

.avkg-programme-image {

    position:
        relative;

    width:
        100%;

    height:
        650px;

    overflow:
        hidden;

    border-radius:
        28px;

    background:
        #ffffff;

    box-shadow:
        0 30px 75px rgba(1, 43, 143, 0.15);

    transition:
        box-shadow .5s ease;

}


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

.avkg-programme-image img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    object-position:
        center;

    filter:
        saturate(.88) contrast(1.04) brightness(.98);

    transition:
        transform 1s cubic-bezier(.2, .8, .2, 1),

        filter .7s ease;

}


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

.avkg-programme-image-area:hover .avkg-programme-image img {

    transform:
        scale(1.10);

    filter:
        saturate(1.18) contrast(1.06) brightness(1.04);

}


/* =========================================================
   IMAGE COLOUR
========================================================= */

.avkg-image-colour {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(1, 43, 143, .09);

    mix-blend-mode:
        multiply;

    pointer-events:
        none;

    z-index:
        2;

    transition:
        opacity .6s ease;

}


.avkg-programme-image-area:hover .avkg-image-colour {

    opacity:
        0;

}


/* =========================================================
   IMAGE LIGHTING SWEEP
========================================================= */

.avkg-image-light {

    position:
        absolute;

    width:
        32%;

    height:
        400%;

    top:
        -150%;

    left:
        -110%;

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

    transform:
        rotate(28deg);

    pointer-events:
        none;

    z-index:
        5;

}


.avkg-programme-image-area:hover .avkg-image-light {

    animation:
        avkgImageLight 1.25s ease forwards;

}


@keyframes avkgImageLight {

    0% {

        left:
            -110%;

    }

    100% {

        left:
            165%;

    }

}


/* =========================================================
   IMAGE BORDER
========================================================= */

.avkg-image-border {

    position:
        absolute;

    inset:
        12px;

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

    border-radius:
        20px;

    pointer-events:
        none;

    z-index:
        6;

}


/* =========================================================
   IMAGE FRAME HOVER
========================================================= */

.avkg-programme-image-area:hover .avkg-programme-image {

    box-shadow:
        0 40px 90px rgba(1, 43, 143, .20);

}


/* =========================================================
   BADGE
========================================================= */

.avkg-programme-badge {

    position:
        absolute;

    right:
        -5px;

    bottom:
        50px;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    min-width:
        235px;

    padding:
        16px 20px;

    border-radius:
        16px;

    background:
        #012b8f;

    box-shadow:
        0 20px 50px rgba(1, 43, 143, .25);

    z-index:
        10;

    animation:
        avkgBadgeFloat 4s ease-in-out infinite;

}


@keyframes avkgBadgeFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-9px);

    }

}


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

.avkg-programme-badge-icon {

    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 48px;

    border-radius:
        13px;

    background:
        #ed0b70;

    color:
        #ffffff;

    font-family:
        'themify';

    font-size:
        18px;

    transition:
        transform .6s ease;

}


.avkg-programme-badge:hover .avkg-programme-badge-icon {

    transform:
        rotateY(180deg);

}


.avkg-programme-badge strong {

    display:
        block;

    color:
        #ffffff;

    font-size:
        16px;

}


.avkg-programme-badge small {

    display:
        block;

    margin-top:
        4px;

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

    font-size:
        14px;

}


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

.avkg-programme-content {

    position:
        relative;

}


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

.avkg-content-label {

    display:
        inline-block;

    margin-bottom:
        12px;

    color:
        #ed0b70;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        2.5px;

    text-transform:
        uppercase;

}


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

.avkg-programme-content h3 {

    margin:
        0 0 22px;

    color:
        #17213c;

    font-size:
        42px;

    font-weight:
        700;

    line-height:
        1.2;

}


.avkg-programme-content h3 span {




    color:
        #012b8f;

}


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

.avkg-programme-content>p {

    margin:
        0 0 28px;

    color:
        #657187;

    font-size:
        16px;

    line-height:
        1.9;

}


/* =========================================================
   FEATURE GRID
========================================================= */

.avkg-programme-features {

    display:
        grid;

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

    gap:
        14px;

}


/* =========================================================
   FEATURE CARD
========================================================= */

.avkg-programme-card {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    min-height:
        108px;

    padding:
        15px;

    overflow:
        hidden;

    border:
        1px solid #e1e7f0;

    border-radius:
        16px;

    background:
        #ffffff;

    box-shadow:
        0 8px 28px rgba(1, 43, 143, .045);

    transition:
        transform .45s ease,

        box-shadow .45s ease,

        border-color .45s ease;

}


/* =========================================================
   CARD LIGHTING
========================================================= */

.avkg-programme-card::before {

    content:
        "";

    position:
        absolute;

    width:
        60%;

    height:
        180%;

    top:
        -40%;

    left:
        -130%;

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

    transform:
        rotate(25deg);

    pointer-events:
        none;

    z-index:
        1;

}


.avkg-programme-card:hover::before {

    animation:
        avkgCardLighting 1s ease forwards;

}


@keyframes avkgCardLighting {

    0% {

        left:
            -130%;

    }

    100% {

        left:
            155%;

    }

}


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

.avkg-programme-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(1, 43, 143, .17);

    box-shadow:
        0 20px 45px rgba(1, 43, 143, .10);

}


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

.avkg-card-number {

    position:
        absolute;

    top:
        7px;

    right:
        10px;

    color:
        rgba(1, 43, 143, .055);

    font-size:
        28px;

    font-weight:
        800;

    line-height:
        1;

    transition:
        color .4s ease;

}


.avkg-programme-card:hover .avkg-card-number {

    color:
        rgba(237, 11, 112, .12);

}


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

.avkg-card-icon {

    position:
        relative;

    width:
        45px;

    height:
        45px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 45px;

    border-radius:
        13px;

    background:
        rgba(237, 11, 112, .08);

    color:
        #ed0b70;

    font-family:
        'themify';

    font-size:
        16px;

    z-index:
        5;

    transition:
        transform .6s ease,

        background .4s ease,

        color .4s ease,

        box-shadow .4s ease;

}


.avkg-programme-card:hover .avkg-card-icon {

    transform:
        rotateY(180deg) scale(1.08);

    background:
        #012b8f;

    color:
        #ffffff;

    box-shadow:
        0 10px 25px rgba(1, 43, 143, .18);

}


/* =========================================================
   CARD CONTENT
========================================================= */

.avkg-card-content {

    position:
        relative;

    z-index:
        5;

}


.avkg-card-content h4 {

    margin:
        0 0 5px;

    color:
        #26334d;

    font-size:
        16px;

    font-weight:
        700;

    line-height:
        1.4;

}


.avkg-card-content p {

    margin:
        0;

    color:
        #788397;

    font-size:
        14px;

    line-height:
        1.65;

}


/* =========================================================
   DARK ALTERNATE VERSION
========================================================= */

.avkg-programme-dark {

    position:
        relative;

    overflow:
        hidden;

    background:
        #081a45;

    color:
        #ffffff;

}


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

.avkg-programme-dark .avkg-programme-heading h2 {

    color:
        #ffffff;

}


.avkg-programme-dark .avkg-programme-heading h2 span {

    color:
        #ed0b70;

}


.avkg-programme-dark .avkg-programme-heading p {

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

}


/* =========================================================
   DARK CONTENT
========================================================= */

.avkg-programme-dark .avkg-programme-content h3 {

    color:
        #ffffff;

}


.avkg-programme-dark .avkg-programme-content h3 span {

    color:
        #ed0b70;

}


.avkg-programme-dark .avkg-programme-content>p {

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

}


/* =========================================================
   DARK CARDS
========================================================= */

.avkg-programme-dark .avkg-programme-card {

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

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

    box-shadow:
        none;

}


.avkg-programme-dark .avkg-programme-card:hover {

    background:
        rgba(237, 11, 112, .08);

    border-color:
        rgba(237, 11, 112, .35);

    box-shadow:
        0 25px 55px rgba(0, 0, 0, .20);

}


.avkg-programme-dark .avkg-card-content h4 {

    color:
        #ffffff;

}


.avkg-programme-dark .avkg-card-content p {

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

}


.avkg-programme-dark .avkg-card-icon {

    background:
        rgba(237, 11, 112, .12);

    color:
        #ed0b70;

}


.avkg-programme-dark .avkg-programme-card:hover .avkg-card-icon {

    background:
        #ed0b70;

    color:
        #ffffff;

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width:1400px) {

    .avkg-programme-section {

        padding:
            60px 0;

    }

    .avkg-programme-heading h2 {

        font-size:
            58px;

    }

    .avkg-programme-image {

        height:
            690px;

    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width:1199px) {

    .avkg-programme-layout {

        gap:
            50px;

    }

    .avkg-programme-heading h2 {

        font-size:
            48px;

    }

    .avkg-programme-content h3 {

        font-size:
            37px;

    }

    .avkg-programme-image {

        height:
            590px;

    }

}


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

@media (max-width:991px) {

    .avkg-programme-section {

        padding:
            90px 0;

    }

    .avkg-programme-heading {

        margin-bottom:
            55px;

    }

    .avkg-programme-heading h2 {

        font-size:
            44px;

    }

    .avkg-programme-layout {

        grid-template-columns:
            1fr;

        gap:
            55px;

    }

    .avkg-programme-image {

        height:
            600px;

    }

    .avkg-programme-content h3 {

        font-size:
            38px;

    }

}


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

@media (max-width:767px) {

    .avkg-programme-section {

        padding:
            75px 0;

    }

    .avkg-programme-heading {

        margin-bottom:
            45px;

    }

    .avkg-programme-eyebrow {

        font-size:
            10px;

        letter-spacing:
            2px;

    }

    .avkg-programme-heading h2 {

        font-size:
            36px;

    }

    .avkg-programme-heading p {

        font-size:
            14px;

        line-height:
            1.85;

    }

    .avkg-programme-image {

        height:
            500px;

        border-radius:
            22px;

    }

    .avkg-programme-content h3 {

        font-size:
            32px;

    }

    .avkg-programme-content>p {

        font-size:
            14px;

    }

    .avkg-programme-features {

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

    }

    .avkg-programme-card {

        min-height:
            105px;

        padding:
            13px;

    }

}


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

@media (max-width:575px) {

    .avkg-programme-section {

        padding:
            65px 0;

    }

    .avkg-programme-heading h2 {

        font-size:
            32px;

    }

    .avkg-programme-image {

        height:
            460px;

    }

    .avkg-programme-content h3 {

        font-size:
            29px;

    }

    .avkg-programme-features {

        grid-template-columns:
            1fr;

    }

    .avkg-programme-card {

        min-height:
            95px;

    }

}


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

@media (max-width:480px) {

    .avkg-programme-section {

        padding:
            60px 0;

    }

    .avkg-programme-heading h2 {

        font-size:
            29px;

    }

    .avkg-programme-content h3 {

        font-size:
            26px;

    }

    .avkg-programme-image {

        height:
            420px;

        border-radius:
            18px;

    }

    .avkg-programme-image-area {

        padding:
            7px;

    }

    .avkg-programme-badge {

        right:
            0;

        bottom:
            25px;

        min-width:
            205px;

        padding:
            12px 14px;

    }

    .avkg-programme-badge-icon {

        width:
            40px;

        height:
            40px;

        flex-basis:
            40px;

    }

}


/* =========================================================
   360PX
========================================================= */

@media (max-width:360px) {

    .avkg-programme-heading h2 {

        font-size:
            27px;

    }

    .avkg-programme-content h3 {

        font-size:
            24px;

    }

    .avkg-programme-image {

        height:
            380px;

    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .avkg-programme-section *,
    .avkg-programme-section::before,
    .avkg-programme-section::after {

        animation:
            none !important;

        transition:
            none !important;

    }

}

/* =========================================================
   PRIMARY & MIDDLE SCHOOL
   PREMIUM COMPLETE CSS
========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {

    --avpm-blue: #012b8f;
    --avpm-dark: #081a45;
    --avpm-pink: #ed0b70;

    --avpm-light: #f5f8fd;
    --avpm-white: #ffffff;

    --avpm-heading: #17213c;
    --avpm-text: #657187;
    --avpm-muted: #788397;

    --avpm-border: #e1e7f0;

}


/* =========================================================
   MAIN SECTION
========================================================= */

.avpm-primary-middle-section {

    position: relative;

    width: 100%;

    padding: 120px 0;

    overflow: hidden;

    background: #f5f8fd;

    color: #17213c;

    isolation: isolate;

}


/* =========================================================
   BACKGROUND BLUE GLOW
========================================================= */

.avpm-primary-middle-section::before {

    content: "";

    position: absolute;

    width: 560px;
    height: 560px;

    top: -280px;
    right: -220px;

    border-radius: 50%;

    background:
        rgba(1, 43, 143, 0.045);

    pointer-events: none;

    animation:
        avpmBlueGlow 10s ease-in-out infinite;

}


@keyframes avpmBlueGlow {

    0%,
    100% {

        transform:
            translate(0, 0) scale(1);

    }

    50% {

        transform:
            translate(-25px, 25px) scale(1.10);

    }

}


/* =========================================================
   BACKGROUND PINK GLOW
========================================================= */

.avpm-primary-middle-section::after {

    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

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

    border-radius: 50%;

    background:
        rgba(237, 11, 112, 0.045);

    pointer-events: none;

    animation:
        avpmPinkGlow 9s ease-in-out infinite;

}


@keyframes avpmPinkGlow {

    0%,
    100% {

        transform:
            translate(0, 0) scale(1);

    }

    50% {

        transform:
            translate(25px, -20px) scale(1.10);

    }

}


/* =========================================================
   ROTATING BACKGROUND PATTERN
========================================================= */

.avpm-bg-pattern {

    position: absolute;

    width: 760px;
    height: 760px;

    top: -360px;
    left: -360px;

    border:
        1px solid rgba(1, 43, 143, 0.075);

    border-radius: 50%;

    pointer-events: none;

    z-index: 0;

    animation:
        avpmPatternRotate 50s linear infinite;

}


.avpm-bg-pattern::before {

    content: "";

    position: absolute;

    inset: 85px;

    border:
        1px dashed rgba(237, 11, 112, 0.12);

    border-radius: 50%;

}


.avpm-bg-pattern::after {

    content: "";

    position: absolute;

    inset: 175px;

    border:
        1px solid rgba(1, 43, 143, 0.06);

    border-radius: 50%;

}


@keyframes avpmPatternRotate {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


/* =========================================================
   FLOATING SHAPES
========================================================= */

.avpm-floating {

    position: absolute;

    display: block;

    border-radius: 50%;

    pointer-events: none;

    z-index: 1;

}


.avpm-floating-one {

    width: 190px;
    height: 190px;

    left: -95px;
    bottom: 13%;

    border:
        1px solid rgba(1, 43, 143, 0.07);

    animation:
        avpmFloatOne 8s ease-in-out infinite;

}


.avpm-floating-two {

    width: 70px;
    height: 70px;

    left: 14%;
    bottom: 7%;

    background:
        rgba(237, 11, 112, 0.06);

    animation:
        avpmFloatTwo 6s ease-in-out infinite;

}


@keyframes avpmFloatOne {

    0%,
    100% {

        transform:
            translateY(0) rotate(0deg);

    }

    50% {

        transform:
            translateY(-25px) rotate(20deg);

    }

}


@keyframes avpmFloatTwo {

    0%,
    100% {

        transform:
            translateY(0) rotate(0deg);

    }

    50% {

        transform:
            translateY(-20px) rotate(90deg);

    }

}


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

.avpm-section-heading {

    position: relative;

    max-width: 1150px;

    margin:
        0 auto 70px;

    text-align: center;

    z-index: 5;

}


/* =========================================================
   EYEBROW
========================================================= */

.avpm-eyebrow {

    display: inline-block;

    margin-bottom: 15px;

    color:
        #ed0b70;

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        3px;

    text-transform:
        uppercase;

}


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

.avpm-section-heading h2 {

    margin: 0;

    color:
        #17213c;

    font-size:
        54px;

    font-weight:
        700;

    line-height:
        1.18;

    letter-spacing:
        -1px;

}


.avpm-section-heading h2 span {



    color:
        #012b8f;

}


/* =========================================================
   DIVIDER
========================================================= */

.avpm-divider {

    position: relative;

    width: 85px;
    height: 3px;

    margin:
        26px auto;

    background:
        #ed0b70;

}


.avpm-divider::before,
.avpm-divider::after {

    content: "";

    position: absolute;

    top: 50%;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background:
        #012b8f;

    transform:
        translateY(-50%);

}


.avpm-divider::before {

    left:
        -7px;

}


.avpm-divider::after {

    right:
        -7px;

}


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

.avpm-section-heading p {

    max-width:
        1150px;

    margin:
        0 auto;

    color:
        #657187;

    font-size:
        16px;

    line-height:
        1.95;

}


/* =========================================================
   MAIN GRID
========================================================= */

.avpm-main-grid {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        0.9fr 1.1fr;

    gap:
        75px;

    align-items:
        center;

    z-index:
        5;

}


/* =========================================================
   IMAGE AREA
========================================================= */

.avpm-image-area {

    position:
        relative;

    padding:
        12px;

}


/* =========================================================
   IMAGE BOX
========================================================= */

.avpm-image-box {

    position:
        relative;

    width:
        100%;

    height:
        650px;

    overflow:
        hidden;

    border-radius:
        28px;

    background:
        #ffffff;

    box-shadow:
        0 30px 75px rgba(1, 43, 143, .15);

    transition:
        box-shadow .5s ease;

}


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

.avpm-image-box img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    object-position:
        center;

    filter:
        saturate(.88) contrast(1.04) brightness(.98);

    transition:
        transform 1s cubic-bezier(.2, .8, .2, 1),

        filter .7s ease;

}


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

.avpm-image-area:hover .avpm-image-box img {

    transform:
        scale(1.10);

    filter:
        saturate(1.18) contrast(1.06) brightness(1.04);

}


/* =========================================================
   IMAGE COLOUR OVERLAY
========================================================= */

.avpm-image-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(1, 43, 143, .09);

    mix-blend-mode:
        multiply;

    pointer-events:
        none;

    z-index:
        2;

    transition:
        opacity .6s ease;

}


.avpm-image-area:hover .avpm-image-overlay {

    opacity:
        0;

}


/* =========================================================
   IMAGE LIGHTING
========================================================= */

.avpm-image-light {

    position:
        absolute;

    width:
        32%;

    height:
        400%;

    top:
        -150%;

    left:
        -110%;

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

    transform:
        rotate(28deg);

    pointer-events:
        none;

    z-index:
        5;

}


.avpm-image-area:hover .avpm-image-light {

    animation:
        avpmImageLight 1.25s ease forwards;

}


@keyframes avpmImageLight {

    0% {

        left:
            -110%;

    }

    100% {

        left:
            165%;

    }

}


/* =========================================================
   IMAGE BORDER
========================================================= */

.avpm-image-border {

    position:
        absolute;

    inset:
        12px;

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

    border-radius:
        21px;

    pointer-events:
        none;

    z-index:
        6;

}


/* =========================================================
   IMAGE SHADOW HOVER
========================================================= */

.avpm-image-area:hover .avpm-image-box {

    box-shadow:
        0 40px 90px rgba(1, 43, 143, .20);

}


/* =========================================================
   BADGE
========================================================= */

.avpm-image-badge {

    position:
        absolute;

    right:
        -5px;

    bottom:
        50px;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    min-width:
        245px;

    padding:
        16px 20px;

    border-radius:
        16px;

    background:
        #012b8f;

    box-shadow:
        0 20px 50px rgba(1, 43, 143, .25);

    z-index:
        10;

    animation:
        avpmBadgeFloat 4s ease-in-out infinite;

}


@keyframes avpmBadgeFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-9px);

    }

}


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

.avpm-badge-icon {

    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 48px;

    border-radius:
        13px;

    background:
        #ed0b70;

    color:
        #ffffff;

    font-family:
        'themify';

    font-size:
        18px;

    transition:
        transform .6s ease;

}


.avpm-image-badge:hover .avpm-badge-icon {

    transform:
        rotateY(180deg);

}


/* =========================================================
   BADGE TEXT
========================================================= */

.avpm-badge-text strong {

    display:
        block;

    color:
        #ffffff;

    font-size:
        16px;

}


.avpm-badge-text small {

    display:
        block;

    margin-top:
        4px;

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

    font-size:
        13px;

}


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

.avpm-content {

    position:
        relative;

}


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

.avpm-content-label {

    display:
        inline-block;

    margin-bottom:
        12px;

    color:
        #ed0b70;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        2.5px;

    text-transform:
        uppercase;

}


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

.avpm-content h3 {

    margin:
        0 0 22px;

    color:
        #17213c;

    font-size:
        42px;

    font-weight:
        700;

    line-height:
        1.2;

}


.avpm-content h3 span {




    color:
        #012b8f;

}


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

.avpm-content>p {

    margin:
        0 0 30px;

    color:
        #657187;

    font-size:
        16px;

    line-height:
        1.9;

}


/* =========================================================
   FEATURE GRID
========================================================= */

.avpm-feature-grid {

    display:
        grid;

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

    gap:
        14px;

}


/* =========================================================
   FEATURE CARD
========================================================= */

.avpm-feature-card {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    min-height:
        112px;

    padding:
        15px;

    overflow:
        hidden;

    border:
        1px solid #e1e7f0;

    border-radius:
        16px;

    background:
        #ffffff;

    box-shadow:
        0 8px 28px rgba(1, 43, 143, .045);

    transition:
        transform .45s ease,

        box-shadow .45s ease,

        border-color .45s ease;

}


/* =========================================================
   CARD LIGHTING
========================================================= */

.avpm-feature-card::before {

    content:
        "";

    position:
        absolute;

    width:
        60%;

    height:
        180%;

    top:
        -40%;

    left:
        -130%;

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

    transform:
        rotate(25deg);

    pointer-events:
        none;

    z-index:
        1;

}


.avpm-feature-card:hover::before {

    animation:
        avpmCardLight 1s ease forwards;

}


@keyframes avpmCardLight {

    0% {

        left:
            -130%;

    }

    100% {

        left:
            155%;

    }

}


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

.avpm-feature-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(1, 43, 143, .17);

    box-shadow:
        0 20px 45px rgba(1, 43, 143, .10);

}


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

.avpm-number {

    position:
        absolute;

    top:
        7px;

    right:
        10px;

    color:
        rgba(1, 43, 143, .055);

    font-size:
        28px;

    font-weight:
        800;

    line-height:
        1;

    transition:
        color .4s ease;

}


.avpm-feature-card:hover .avpm-number {

    color:
        rgba(237, 11, 112, .12);

}


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

.avpm-icon {

    position:
        relative;

    width:
        46px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 46px;

    border-radius:
        13px;

    background:
        rgba(237, 11, 112, .08);

    color:
        #ed0b70;

    font-family:
        'themify';

    font-size:
        17px;

    z-index:
        5;

    transition:
        transform .6s ease,

        background .4s ease,

        color .4s ease,

        box-shadow .4s ease;

}


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

.avpm-feature-card:hover .avpm-icon {

    transform:
        rotateY(180deg) scale(1.08);

    background:
        #012b8f;

    color:
        #ffffff;

    box-shadow:
        0 10px 25px rgba(1, 43, 143, .18);

}


/* =========================================================
   FEATURE CONTENT
========================================================= */

.avpm-feature-content {

    position:
        relative;

    z-index:
        5;

}


.avpm-feature-content h4 {

    margin:
        0 0 5px;

    color:
        #26334d;

    font-size:
        16px;

    font-weight:
        700;

    line-height:
        1.4;

}


.avpm-feature-content p {

    margin:
        0;

    color:
        #788397;

    font-size:
        14px;

    line-height:
        1.65;

}


/* =========================================================
   DARK ALTERNATE SECTION
========================================================= */

.avpm-primary-middle-dark {

    position:
        relative;

    overflow:
        hidden;

    background:
        #081a45;

    color:
        #ffffff;

}


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

.avpm-primary-middle-dark .avpm-section-heading h2 {

    color:
        #ffffff;

}


.avpm-primary-middle-dark .avpm-section-heading h2 span {

    color:
        #ed0b70;

}


.avpm-primary-middle-dark .avpm-section-heading p {

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

}


/* =========================================================
   DARK CONTENT
========================================================= */

.avpm-primary-middle-dark .avpm-content h3 {

    color:
        #ffffff;

}


.avpm-primary-middle-dark .avpm-content h3 span {

    color:
        #ed0b70;

}


.avpm-primary-middle-dark .avpm-content>p {

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

}


/* =========================================================
   DARK CARDS
========================================================= */

.avpm-primary-middle-dark .avpm-feature-card {

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

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

    box-shadow:
        none;

}


.avpm-primary-middle-dark .avpm-feature-card:hover {

    background:
        rgba(237, 11, 112, .08);

    border-color:
        rgba(237, 11, 112, .35);

    box-shadow:
        0 25px 55px rgba(0, 0, 0, .20);

}


.avpm-primary-middle-dark .avpm-feature-content h4 {

    color:
        #ffffff;

}


.avpm-primary-middle-dark .avpm-feature-content p {

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

}


.avpm-primary-middle-dark .avpm-icon {

    background:
        rgba(237, 11, 112, .12);

    color:
        #ed0b70;

}


.avpm-primary-middle-dark .avpm-feature-card:hover .avpm-icon {

    background:
        #ed0b70;

    color:
        #ffffff;

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width:1400px) {

    .avpm-primary-middle-section {

        padding:
            60px 0;

    }

    .avpm-section-heading h2 {

        font-size:
            58px;

    }

    .avpm-image-box {

        height:
            690px;

    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width:1199px) {

    .avpm-primary-middle-section {

        padding:
            105px 0;

    }

    .avpm-main-grid {

        gap:
            50px;

    }

    .avpm-section-heading h2 {

        font-size:
            48px;

    }

    .avpm-content h3 {

        font-size:
            37px;

    }

    .avpm-image-box {

        height:
            590px;

    }

}


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

@media (max-width:991px) {

    .avpm-primary-middle-section {

        padding:
            90px 0;

    }

    .avpm-section-heading {

        margin-bottom:
            55px;

    }

    .avpm-section-heading h2 {

        font-size:
            44px;

    }

    .avpm-main-grid {

        grid-template-columns:
            1fr;

        gap:
            55px;

    }

    .avpm-image-box {

        height:
            600px;

    }

    .avpm-content h3 {

        font-size:
            38px;

    }

}


/* =========================================================
   MOBILE 767PX
========================================================= */

@media (max-width:767px) {

    .avpm-primary-middle-section {

        padding:
            75px 0;

    }

    .avpm-section-heading {

        margin-bottom:
            45px;

    }

    .avpm-eyebrow {

        font-size:
            10px;

        letter-spacing:
            2px;

    }

    .avpm-section-heading h2 {

        font-size:
            36px;

    }

    .avpm-section-heading p {

        font-size:
            14px;

        line-height:
            1.85;

    }

    .avpm-image-box {

        height:
            500px;

        border-radius:
            22px;

    }

    .avpm-content h3 {

        font-size:
            32px;

    }

    .avpm-content>p {

        font-size:
            14px;

    }

    .avpm-feature-grid {

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

    }

    .avpm-feature-card {

        min-height:
            105px;

        padding:
            13px;

    }

}


/* =========================================================
   SMALL MOBILE 575PX
========================================================= */

@media (max-width:575px) {

    .avpm-primary-middle-section {

        padding:
            65px 0;

    }

    .avpm-section-heading h2 {

        font-size:
            32px;

    }

    .avpm-image-box {

        height:
            460px;

    }

    .avpm-content h3 {

        font-size:
            29px;

    }

    .avpm-feature-grid {

        grid-template-columns:
            1fr;

    }

    .avpm-feature-card {

        min-height:
            95px;

    }

}


/* =========================================================
   MOBILE 480PX
========================================================= */

@media (max-width:480px) {

    .avpm-primary-middle-section {

        padding:
            60px 0;

    }

    .avpm-section-heading h2 {

        font-size:
            29px;

    }

    .avpm-content h3 {

        font-size:
            26px;

    }

    .avpm-image-area {

        padding:
            7px;

    }

    .avpm-image-box {

        height:
            420px;

        border-radius:
            18px;

    }

    .avpm-image-badge {

        right:
            0;

        bottom:
            25px;

        min-width:
            205px;

        padding:
            12px 14px;

    }

    .avpm-badge-icon {

        width:
            40px;

        height:
            40px;

        flex-basis:
            40px;

    }

}


/* =========================================================
   MOBILE 360PX
========================================================= */

@media (max-width:360px) {

    .avpm-section-heading h2 {

        font-size:
            27px;

    }

    .avpm-content h3 {

        font-size:
            24px;

    }

    .avpm-image-box {

        height:
            380px;

    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .avpm-primary-middle-section *,
    .avpm-primary-middle-section::before,
    .avpm-primary-middle-section::after {

        animation:
            none !important;

        transition:
            none !important;

    }

}

/* =========================================================
   HIGH SCHOOL STANDARDS
   UNIQUE CLASS NAMES
========================================================= */

.hs-standard-section {
    position: relative;
    padding: 60px 0;
    overflow: hidden;
    isolation: isolate;
}


/* =========================================================
   LIGHT SECTION
========================================================= */

.hs-standard-light {
    background: #f5f8fc;
    color: #26364a;
}


/* Rotating Background Pattern */

.hs-standard-pattern {
    position: absolute;
    width: 500px;
    height: 500px;
    border: 1px solid rgba(18, 74, 128, 0.08);
    border-radius: 50%;
    right: -180px;
    top: -180px;
    z-index: 0;
    animation: hsRotatePattern 25s linear infinite;
}

.hs-standard-pattern::before,
.hs-standard-pattern::after {
    content: "";
    position: absolute;
    inset: 35px;
    border: 1px dashed rgba(18, 74, 128, 0.12);
    border-radius: 50%;
}

.hs-standard-pattern::after {
    inset: 90px;
    border-style: solid;
}

@keyframes hsRotatePattern {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


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

.hs-standard-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 70px;
}


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

.hs-standard-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    margin-bottom: 18px;
    border-radius: 50px;
    background: rgba(18, 74, 128, 0.08);
    color: #124a80;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.hs-standard-label i {
    font-size: 15px;
}


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

.hs-standard-content h2 {
    margin: 0 0 18px;
    color: #132b45;
    font-size: 46px;
    line-height: 1.15;
    font-weight: 800;
}

.hs-standard-content h2 span {

    color: #ed0b70;
}

.hs-standard-line {
    width: 75px;
    height: 4px;
    margin-bottom: 25px;
    border-radius: 10px;
    background: #ed0b70;
    position: relative;
}

.hs-standard-line::after {
    content: "";
    position: absolute;
    width: 25px;
    height: 4px;
    left: 85px;
    border-radius: 10px;
    background: #124a80;
}

.hs-standard-content>p {
    color: #5d6b7c;
    font-size: 16px;
    line-height: 1.9;
    margin: 0 0 18px;
}


/* =========================================================
   POINTS
========================================================= */

.hs-standard-points {
    margin-top: 30px;
    display: grid;
    gap: 14px;
}

.hs-standard-point {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(18, 74, 128, 0.08);
    box-shadow: 0 8px 25px rgba(18, 74, 128, 0.06);
    transition: all 0.35s ease;
}

.hs-standard-point:hover {
    transform: translateX(8px);
    box-shadow: 0 15px 35px rgba(18, 74, 128, 0.13);
}

.hs-point-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #124a80;
    color: #ffffff;
    font-size: 18px;
    transition: all 0.35s ease;
}

.hs-standard-point:hover .hs-point-icon {
    background: #ed0b70;
    transform: rotate(8deg) scale(1.08);
}

.hs-standard-point h4 {
    margin: 0 0 4px;
    color: #163653;
    font-size: 16px;
    font-weight: 700;
}

.hs-standard-point p {
    margin: 0;
    color: #718096;
    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   IMAGE AREA
========================================================= */

.hs-standard-image-wrap {
    position: relative;
    padding: 20px;
}

.hs-standard-image {
    position: relative;
    overflow: hidden;
    height: 560px;
    border-radius: 25px;
    box-shadow: 0 25px 60px rgba(11, 53, 92, 0.20);
    transform: perspective(1000px) rotateY(-2deg);
    transition: all 0.5s ease;
}

.hs-standard-image:hover {
    transform: perspective(1000px) rotateY(0deg) translateY(-8px);
    box-shadow: 0 35px 75px rgba(18, 74, 128, 0.28);
}

.hs-standard-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.05) contrast(1.03);
    transition: transform 0.8s ease, filter 0.8s ease;
}

.hs-standard-image:hover img {
    transform: scale(1.08);
    filter: saturate(1.2) contrast(1.08);
}


/* =========================================================
   IMAGE LIGHTING EFFECT
========================================================= */

.hs-image-light {
    position: absolute;
    width: 180px;
    height: 180px;
    top: -100px;
    left: -120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    filter: blur(35px);
    transition: all 0.8s ease;
    pointer-events: none;
}

.hs-standard-image:hover .hs-image-light {
    top: 80%;
    left: 90%;
}


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

.hs-image-caption {
    position: absolute;
    left: 25px;
    right: 25px;
    bottom: 25px;
    padding: 20px;
    border-radius: 15px;
    background: rgba(11, 53, 92, 0.85);
    backdrop-filter: blur(10px);
    color: #ffffff;
    transform: translateY(15px);
    opacity: 0.9;
    transition: all 0.4s ease;
}

.hs-standard-image:hover .hs-image-caption {
    transform: translateY(0);
    background: rgba(237, 11, 112, 0.9);
}

.hs-image-caption span {
    display: block;
    font-size: 13px;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.hs-image-caption strong {
    font-size: 21px;
}


/* =========================================================
   IMAGE DECORATIONS
========================================================= */

.hs-image-decoration {
    position: absolute;
    border-radius: 20px;
    z-index: -1;
}

.hs-decoration-one {
    width: 150px;
    height: 150px;
    background: rgba(237, 11, 112, 0.12);
    right: -10px;
    top: -10px;
    animation: hsFloatOne 5s ease-in-out infinite;
}

.hs-decoration-two {
    width: 110px;
    height: 110px;
    background: rgba(18, 74, 128, 0.12);
    left: -5px;
    bottom: -5px;
    animation: hsFloatTwo 6s ease-in-out infinite;
}

@keyframes hsFloatOne {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(8deg);
    }
}

@keyframes hsFloatTwo {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(12px) rotate(-8deg);
    }
}


/* =========================================================
   DARK SECTION
========================================================= */

.hs-standard-dark {
    background: #ffffff;
}

.hs-dark-pattern {
    position: absolute;
    width: 650px;
    height: 650px;
    right: -250px;
    top: -300px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    animation: hsDarkRotate 30s linear infinite;
}

.hs-dark-pattern::before,
.hs-dark-pattern::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.10);
}

.hs-dark-pattern::before {
    inset: 70px;
}

.hs-dark-pattern::after {
    inset: 150px;
}

@keyframes hsDarkRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}


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

.hs-dark-heading {
    max-width: 760px;
    margin: 0 auto 50px;
    text-align: center;
}

.hs-dark-heading .hs-standard-label {
    color: #ffffff;
    background: #0b355c;
}

.hs-dark-heading h2 {
    margin: 0 0 18px;
    color: #0b355c;
    font-size: 42px;
    font-weight: 800;

}

.hs-dark-heading h2 span {
    color: #ed0b70;
}

.hs-dark-heading>p {
    margin: 0;
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   DARK CARDS
========================================================= */

.hs-dark-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.hs-dark-card {
    position: relative;
    padding: 35px 30px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    background: #0b355c;
    backdrop-filter: blur(8px);
    transition: all 0.4s ease;
    overflow: hidden;
}

.hs-dark-card::before {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    right: -50px;
    top: -50px;
    border-radius: 50%;
    background: rgba(237, 11, 112, 0.18);
    transition: all 0.5s ease;
}

.hs-dark-card:hover {
    transform: translateY(-12px);
    border-color: rgba(237, 11, 112, 0.45);
    background: #083788;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.20);
}

.hs-dark-card:hover::before {
    width: 180px;
    height: 180px;
}

.hs-dark-card-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    border-radius: 15px;
    background: #ed0b70;
    color: #ffffff;
    font-size: 22px;
    transition: all 0.4s ease;
}

.hs-dark-card:hover .hs-dark-card-icon {
    transform: rotate(10deg) scale(1.08);
    box-shadow: 0 10px 25px rgba(237, 11, 112, 0.30);
}

.hs-dark-card h3 {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 21px;
}

.hs-dark-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.70);
    font-size: 14px;
    line-height: 1.8;
}


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

@media (max-width: 991px) {

    .hs-standard-section {
        padding: 75px 0;
    }

    .hs-standard-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .hs-standard-content {
        text-align: center;
    }

    .hs-standard-content h2 {
        font-size: 40px;
    }

    .hs-standard-line {
        margin-left: auto;
        margin-right: auto;
    }

    .hs-standard-point {
        text-align: left;
    }

    .hs-standard-image-wrap {
        max-width: 650px;
        width: 100%;
        margin: auto;
    }

    .hs-standard-image {
        height: 500px;
    }

    .hs-dark-cards {
        grid-template-columns: 1fr;
    }

    .hs-dark-card {
        text-align: center;
    }

    .hs-dark-card-icon {
        margin-left: auto;
        margin-right: auto;
    }
}


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

@media (max-width: 767px) {

    .hs-standard-section {
        padding: 60px 0;
    }

    .hs-standard-section .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .hs-standard-content h2 {
        font-size: 32px;
    }

    .hs-standard-content>p {
        font-size: 14px;
        line-height: 1.8;
    }

    .hs-standard-label {
        font-size: 11px;
    }

    .hs-standard-image-wrap {
        padding: 12px;
    }

    .hs-standard-image {
        height: 430px;
        border-radius: 18px;
    }

    .hs-image-caption {
        left: 15px;
        right: 15px;
        bottom: 15px;
        padding: 15px;
    }

    .hs-image-caption strong {
        font-size: 18px;
    }

    .hs-dark-heading h2 {
        font-size: 32px;
    }

    .hs-dark-heading>p {
        font-size: 14px;
    }

    .hs-dark-card {
        padding: 28px 22px;
    }
}


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

@media (max-width: 480px) {

    .hs-standard-section {
        padding: 50px 0;
    }

    .hs-standard-content h2 {
        font-size: 28px;
    }

    .hs-standard-content>p {
        font-size: 13px;
    }

    .hs-standard-point {
        gap: 12px;
        padding: 12px;
    }

    .hs-point-icon {
        width: 42px;
        min-width: 42px;
        height: 42px;
        font-size: 15px;
    }

    .hs-standard-point h4 {
        font-size: 14px;
    }

    .hs-standard-point p {
        font-size: 12px;
    }

    .hs-standard-image {
        height: 360px;
    }

    .hs-dark-heading h2 {
        font-size: 28px;
    }

    .hs-dark-card h3 {
        font-size: 18px;
    }

    .hs-dark-card p {
        font-size: 13px;
    }

    .hs-standard-pattern {
        width: 300px;
        height: 300px;
    }

    .hs-dark-pattern {
        width: 350px;
        height: 350px;
    }
}


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

@media (max-width: 360px) {

    .hs-standard-content h2 {
        font-size: 25px;
    }

    .hs-standard-image {
        height: 320px;
    }

    .hs-standard-point {
        align-items: flex-start;
    }

    .hs-point-icon {
        width: 38px;
        min-width: 38px;
        height: 38px;
    }

    .hs-image-caption strong {
        font-size: 16px;
    }
}

/* =========================================================
   HIGHER SECONDARY PREMIUM SECTION
   UNIQUE CLASS NAMES
   THEMIFY ICONS
========================================================= */


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

.hss-academic-section {
    position: relative;
    padding: 60px 0;
    overflow: hidden;
    isolation: isolate;
}


/* =========================================================
   THEMIFY ICON FONT
========================================================= */

.hss-academic-section i {
    font-family: 'themify' !important;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    speak: none;
}


/* =========================================================
   LIGHT SECTION
========================================================= */

.hss-academic-light {
    background: #f5f8fc;
    color: #26364a;
}


/* =========================================================
   LIGHT ROTATING PATTERN
========================================================= */

.hss-light-pattern {
    position: absolute;
    width: 620px;
    height: 620px;
    right: -270px;
    top: -280px;
    border: 1px solid rgba(18, 74, 128, 0.08);
    border-radius: 50%;
    animation: hssLightRotate 28s linear infinite;
}

.hss-light-pattern::before {
    content: "";
    position: absolute;
    inset: 55px;
    border: 1px dashed rgba(18, 74, 128, 0.12);
    border-radius: 50%;
}

.hss-light-pattern::after {
    content: "";
    position: absolute;
    inset: 135px;
    border: 1px solid rgba(237, 11, 112, 0.10);
    border-radius: 50%;
}

@keyframes hssLightRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   MAIN GRID
========================================================= */

.hss-academic-grid {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    align-items: center;
    gap: 75px;
}


/* =========================================================
   IMAGE AREA
========================================================= */

.hss-academic-image-area {
    position: relative;
    padding: 20px;
}


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

.hss-academic-image {
    position: relative;
    height: 570px;
    overflow: hidden;
    border-radius: 28px;
    background: #0b355c;
    box-shadow: 0 25px 65px rgba(11, 53, 92, 0.22);
    transform: perspective(1100px) rotateY(3deg);
    transition: all 0.6s ease;
}

.hss-academic-image:hover {
    transform: perspective(1100px) rotateY(0deg) translateY(-10px);
    box-shadow: 0 35px 85px rgba(18, 74, 128, 0.30);
}

.hss-academic-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(1.08) contrast(1.04);
    transition:
        transform 0.9s ease,
        filter 0.9s ease;
}

.hss-academic-image:hover img {
    transform: scale(1.10);
    filter: saturate(1.25) contrast(1.08);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.hss-image-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg,
            rgba(11, 53, 92, 0.02) 35%,
            rgba(11, 53, 92, 0.72) 100%);
    pointer-events: none;
}


/* =========================================================
   IMAGE LIGHTING
========================================================= */

.hss-image-glow {
    position: absolute;
    z-index: 2;
    width: 240px;
    height: 240px;
    left: -160px;
    top: -150px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    filter: blur(45px);
    pointer-events: none;
    transition: all 1s ease;
}

.hss-academic-image:hover .hss-image-glow {
    left: 90%;
    top: 85%;
}


/* =========================================================
   IMAGE INFO
========================================================= */

.hss-image-info {
    position: absolute;
    z-index: 4;
    left: 25px;
    right: 25px;
    bottom: 25px;
    padding: 20px;
    border-radius: 16px;
    background: rgba(11, 53, 92, 0.86);
    backdrop-filter: blur(12px);
    color: #ffffff;
    transform: translateY(15px);
    transition: all 0.45s ease;
}

.hss-academic-image:hover .hss-image-info {
    transform: translateY(0);
    background: rgba(237, 11, 112, 0.90);
}

.hss-image-info span {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.hss-image-info strong {
    display: block;
    font-size: 21px;
}


/* =========================================================
   IMAGE DECORATION
========================================================= */

.hss-image-shape {
    position: absolute;
    border-radius: 22px;
    z-index: -1;
}

.hss-shape-one {
    width: 160px;
    height: 160px;
    top: -10px;
    left: -5px;
    background: rgba(237, 11, 112, 0.12);
    animation: hssShapeOne 5s ease-in-out infinite;
}

.hss-shape-two {
    width: 120px;
    height: 120px;
    bottom: -5px;
    right: -5px;
    background: rgba(18, 74, 128, 0.12);
    animation: hssShapeTwo 6s ease-in-out infinite;
}

@keyframes hssShapeOne {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-14px) rotate(8deg);
    }

}

@keyframes hssShapeTwo {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(12px) rotate(-8deg);
    }

}


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

.hss-section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    margin-bottom: 20px;
    border-radius: 50px;
    background: rgba(18, 74, 128, 0.08);
    color: #124a80;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    transition: all 0.35s ease;
}

.hss-section-label i {
    font-size: 22px;
    color: #ed0b70;
    transition: all 0.35s ease;
}

.hss-section-label:hover {
    color: #ffffff;
    background: #124a80;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(18, 74, 128, 0.16);
}

.hss-section-label:hover i {
    color: #ffffff;
    transform: rotate(10deg) scale(1.15);
}


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

.hss-academic-content h2 {
    margin: 0 0 18px;
    color: #132b45;
    font-size: 48px;
    line-height: 1.15;
    font-weight: 800;
}

.hss-academic-content h2 span {

    color: #ed0b70;
}


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

.hss-title-line {
    position: relative;
    width: 75px;
    height: 4px;
    margin-bottom: 28px;
    border-radius: 20px;
    background: #ed0b70;
}

.hss-title-line::after {
    content: "";
    position: absolute;
    left: 85px;
    top: 0;
    width: 25px;
    height: 4px;
    border-radius: 20px;
    background: #124a80;
}


/* =========================================================
   CONTENT PARAGRAPH
========================================================= */

.hss-academic-content>p {
    margin: 0 0 18px;
    color: #5d6b7c;
    font-size: 16px;
    line-height: 1.9;
}

.hss-academic-content>p strong {
    color: #124a80;
    font-weight: 700;
}


/* =========================================================
   PATHWAY CARDS
========================================================= */

.hss-pathway-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 30px;
}

.hss-pathway-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid rgba(18, 74, 128, 0.08);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(18, 74, 128, 0.06);
    overflow: hidden;
    transition: all 0.4s ease;
}

.hss-pathway-card::before {
    content: "";
    position: absolute;
    width: 4px;
    height: 0;
    left: 0;
    top: 0;
    background: #ed0b70;
    transition: height 0.4s ease;
}

.hss-pathway-card:hover {
    transform: translateY(-8px);
    border-color: rgba(237, 11, 112, 0.20);
    box-shadow: 0 20px 45px rgba(18, 74, 128, 0.13);
}

.hss-pathway-card:hover::before {
    height: 100%;
}


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

.hss-pathway-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #124a80;
    color: #ffffff;
    transition: all 0.4s ease;
}

.hss-pathway-icon i {
    font-size: 25px;
    color: #ffffff;
    transition: all 0.4s ease;
}

.hss-pathway-card:hover .hss-pathway-icon {
    background: #ed0b70;
    transform: rotate(-7deg) scale(1.08);
    box-shadow: 0 10px 25px rgba(237, 11, 112, 0.25);
}

.hss-pathway-card:hover .hss-pathway-icon i {
    transform: scale(1.15) rotate(8deg);
}


/* =========================================================
   PATHWAY TEXT
========================================================= */

.hss-pathway-content h4 {
    margin: 0 0 6px;
    color: #163653;
    font-size: 17px;
    font-weight: 700;
}

.hss-pathway-content p {
    margin: 0;
    color: #718096;
    font-size: 12.5px;
    line-height: 1.65;
}


/* =========================================================
   DARK SECTION
========================================================= */

.hss-academic-dark {
    background: #ffffff;
    color: #ffffff;
}


/* =========================================================
   DARK ROTATING PATTERN
========================================================= */

.hss-dark-pattern {
    position: absolute;
    width: 750px;
    height: 750px;
    right: -300px;
    top: -360px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    animation: hssDarkRotate 32s linear infinite;
}

.hss-dark-pattern::before {
    content: "";
    position: absolute;
    inset: 70px;
    border: 1px dashed rgba(255, 255, 255, 0.10);
    border-radius: 50%;
}

.hss-dark-pattern::after {
    content: "";
    position: absolute;
    inset: 160px;
    border: 1px solid rgba(237, 11, 112, 0.13);
    border-radius: 50%;
}

@keyframes hssDarkRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }

}


/* =========================================================
   DARK HEADER
========================================================= */

.hss-dark-header {
    max-width: 780px;
    margin: 0 auto 55px;
    text-align: center;
}

.hss-dark-label {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.hss-dark-label i {
    color: #ed0b70;
}

.hss-dark-header h2 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 44px;
    line-height: 1.2;
    font-weight: 800;
}

.hss-dark-header h2 span {
    color: #ed0b70;
}

.hss-dark-header>p {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 16px;
    line-height: 1.85;
}


/* =========================================================
   DARK CARDS
========================================================= */

.hss-development-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.hss-development-card {
    position: relative;
    padding: 32px 25px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
    overflow: hidden;
    transition: all 0.45s ease;
}

.hss-development-card::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    right: -60px;
    top: -60px;
    border-radius: 50%;
    background: rgba(237, 11, 112, 0.16);
    transition: all 0.6s ease;
}

.hss-development-card:hover {
    transform: translateY(-12px);
    border-color: rgba(237, 11, 112, 0.40);
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.22);
}

.hss-development-card:hover::before {
    width: 210px;
    height: 210px;
}


/* =========================================================
   DARK CARD ICON
========================================================= */

.hss-development-icon {
    position: relative;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    border-radius: 15px;
    background: #ed0b70;
    color: #ffffff;
    overflow: hidden;
    transition: all 0.45s ease;
}

.hss-development-icon i {
    position: relative;
    z-index: 2;
    font-size: 29px;
    color: #ffffff;
    transition: all 0.45s ease;
}

.hss-development-card:hover .hss-development-icon {
    transform: rotate(9deg) scale(1.08);
    box-shadow: 0 12px 30px rgba(237, 11, 112, 0.35);
}

.hss-development-card:hover .hss-development-icon i {
    transform: scale(1.2) rotate(-8deg);
}


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

.hss-development-card h3 {
    position: relative;
    z-index: 2;
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 19px;
    line-height: 1.35;
    font-weight: 700;
}

.hss-development-card p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: rgba(255, 255, 255, 0.70);
    font-size: 13px;
    line-height: 1.8;
}


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

@media (max-width: 1199px) {

    .hss-academic-section {
        padding: 85px 0;
    }

    .hss-academic-grid {
        gap: 45px;
    }

    .hss-academic-content h2 {
        font-size: 42px;
    }

    .hss-academic-image {
        height: 530px;
    }

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

}


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

@media (max-width: 991px) {

    .hss-academic-section {
        padding: 75px 0;
    }

    .hss-academic-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .hss-academic-content {
        text-align: center;
    }

    .hss-academic-content h2 {
        font-size: 40px;
    }

    .hss-title-line {
        margin-left: auto;
        margin-right: auto;
    }

    .hss-academic-content>p {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    .hss-academic-image-area {
        width: 100%;
        max-width: 650px;
        margin: 0 auto;
    }

    .hss-academic-image {
        height: 500px;
        transform: none;
    }

    .hss-academic-image:hover {
        transform: translateY(-8px);
    }

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

}


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

@media (max-width: 767px) {

    .hss-academic-section {
        padding: 60px 0;
    }

    .hss-academic-section .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .hss-academic-grid {
        gap: 35px;
    }

    .hss-section-label {
        padding: 8px 15px;
        font-size: 11px;
    }

    .hss-section-label i {
        font-size: 19px;
    }

    .hss-academic-content h2 {
        font-size: 34px;
    }

    .hss-academic-content>p {
        font-size: 14px;
        line-height: 1.8;
    }

    .hss-pathway-list {
        grid-template-columns: 1fr;
    }

    .hss-pathway-card {
        text-align: left;
    }

    .hss-academic-image-area {
        padding: 12px;
    }

    .hss-academic-image {
        height: 430px;
        border-radius: 20px;
    }

    .hss-image-info {
        left: 15px;
        right: 15px;
        bottom: 15px;
        padding: 16px;
    }

    .hss-image-info strong {
        font-size: 19px;
    }

    .hss-dark-header {
        margin-bottom: 35px;
    }

    .hss-dark-header h2 {
        font-size: 34px;
    }

    .hss-dark-header>p {
        font-size: 14px;
    }

    .hss-development-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .hss-development-card {
        text-align: center;
    }

    .hss-development-icon {
        margin-left: auto;
        margin-right: auto;
    }

}


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

@media (max-width: 480px) {

    .hss-academic-section {
        padding: 50px 0;
    }

    .hss-academic-content h2 {
        font-size: 29px;
    }

    .hss-academic-content>p {
        font-size: 13px;
        line-height: 1.75;
    }

    .hss-title-line {
        width: 60px;
    }

    .hss-title-line::after {
        left: 70px;
        width: 20px;
    }

    .hss-pathway-card {
        padding: 15px;
        gap: 12px;
    }

    .hss-pathway-icon {
        width: 45px;
        min-width: 45px;
        height: 45px;
    }

    .hss-pathway-icon i {
        font-size: 21px;
    }

    .hss-pathway-content h4 {
        font-size: 15px;
    }

    .hss-pathway-content p {
        font-size: 11.5px;
    }

    .hss-academic-image {
        height: 370px;
        border-radius: 17px;
    }

    .hss-image-info {
        padding: 13px;
    }

    .hss-image-info span {
        font-size: 10px;
    }

    .hss-image-info strong {
        font-size: 17px;
    }

    .hss-dark-header h2 {
        font-size: 29px;
    }

    .hss-dark-header>p {
        font-size: 13px;
    }

    .hss-development-card {
        padding: 25px 18px;
    }

    .hss-development-icon {
        width: 55px;
        height: 55px;
    }

    .hss-development-icon i {
        font-size: 25px;
    }

    .hss-development-card h3 {
        font-size: 18px;
    }

    .hss-development-card p {
        font-size: 12px;
    }

    .hss-light-pattern {
        width: 350px;
        height: 350px;
        right: -190px;
        top: -160px;
    }

    .hss-dark-pattern {
        width: 400px;
        height: 400px;
        right: -210px;
        top: -190px;
    }

}


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

@media (max-width: 360px) {

    .hss-academic-section {
        padding: 45px 0;
    }

    .hss-academic-content h2 {
        font-size: 26px;
    }

    .hss-academic-content>p {
        font-size: 12.5px;
    }

    .hss-section-label {
        font-size: 10px;
    }

    .hss-section-label i {
        font-size: 17px;
    }

    .hss-pathway-icon {
        width: 40px;
        min-width: 40px;
        height: 40px;
    }

    .hss-pathway-icon i {
        font-size: 19px;
    }

    .hss-academic-image {
        height: 330px;
    }

    .hss-image-info strong {
        font-size: 15px;
    }

    .hss-dark-header h2 {
        font-size: 26px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hss-light-pattern,
    .hss-dark-pattern,
    .hss-shape-one,
    .hss-shape-two {
        animation: none;
    }

    .hss-academic-image,
    .hss-academic-image img,
    .hss-image-glow,
    .hss-pathway-card,
    .hss-pathway-icon,
    .hss-development-card,
    .hss-development-icon {
        transition: none;
    }

}

/* =========================================================
   LANGUAGE EDUCATION - PREMIUM DESIGN
   UNIQUE CLASS NAMES
   THEMIFY ICONS
========================================================= */


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

.langpro-section {
    position: relative;
    padding: 60px 0;
    overflow: hidden;
    isolation: isolate;
}


/* =========================================================
   THEMIFY
========================================================= */

.langpro-section i {
    font-family: 'themify' !important;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    display: inline-block;
}


/* =========================================================
   LIGHT SECTION
========================================================= */

.langpro-light {
    background: #f5f8fc;
    color: #26364a;
}


/* =========================================================
   ROTATING LIGHT PATTERN
========================================================= */

.langpro-rotate-pattern {
    position: absolute;
    width: 650px;
    height: 650px;
    right: -280px;
    top: -300px;
    border: 1px solid rgba(18, 74, 128, 0.08);
    border-radius: 50%;
    animation: langproRotate 30s linear infinite;
}

.langpro-rotate-pattern::before {
    content: "";
    position: absolute;
    inset: 60px;
    border: 1px dashed rgba(18, 74, 128, 0.12);
    border-radius: 50%;
}

.langpro-rotate-pattern::after {
    content: "";
    position: absolute;
    inset: 145px;
    border: 1px solid rgba(237, 11, 112, 0.10);
    border-radius: 50%;
}

@keyframes langproRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   MAIN GRID
========================================================= */


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

.langpro-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    margin-bottom: 20px;
    border-radius: 50px;
    background: rgba(18, 74, 128, 0.08);
    color: #124a80;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    transition: all 0.35s ease;
}

.langpro-label i {
    font-size: 22px;
    color: #ed0b70;
    transition: all 0.35s ease;
}

.langpro-label:hover {
    color: #ffffff;
    background: #124a80;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(18, 74, 128, 0.15);
}

.langpro-label:hover i {
    color: #ffffff;
    transform: scale(1.2) rotate(10deg);
}


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

.langpro-content h2 {
    margin: 0 0 18px;
    color: #132b45;
    font-size: 48px;
    line-height: 1.15;
    font-weight: 800;
}

.langpro-content h2 span {

    color: #ed0b70;
}


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

.langpro-line {
    position: relative;
    width: 75px;
    height: 4px;
    margin-bottom: 28px;
    border-radius: 20px;
    background: #ed0b70;
}

.langpro-line::after {
    content: "";
    position: absolute;
    left: 85px;
    top: 0;
    width: 25px;
    height: 4px;
    border-radius: 20px;
    background: #124a80;
}


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

.langpro-content>p {
    margin: 0 0 18px;
    color: #5d6b7c;
    font-size: 16px;
    line-height: 1.9;
}


/* =========================================================
   STANDARD CARDS
========================================================= */

.langpro-standard-list {
    display: grid;
    gap: 15px;
    margin-top: 30px;
    grid-template-columns: repeat(3, 1fr);
}

.langpro-standard-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid rgba(18, 74, 128, 0.08);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(18, 74, 128, 0.06);
    overflow: hidden;
    transition: all 0.4s ease;
}

.langpro-standard-card::before {
    content: "";
    position: absolute;
    width: 4px;
    height: 0;
    left: 0;
    top: 0;
    background: #ed0b70;
    transition: height 0.4s ease;
}

.langpro-standard-card:hover {
    transform: translateX(10px);
    border-color: rgba(237, 11, 112, 0.20);
    box-shadow: 0 20px 45px rgba(18, 74, 128, 0.13);
}

.langpro-standard-card:hover::before {
    height: 100%;
}


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

.langpro-icon {
    position: relative;
    width: 52px;
    height: 52px;
    min-width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #124a80;
    color: #ffffff;
    overflow: hidden;
    transition: all 0.4s ease;
}

.langpro-icon::before {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    top: -55px;
    left: -55px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    filter: blur(12px);
    transition: all 0.7s ease;
}

.langpro-icon i {
    position: relative;
    z-index: 2;
    font-size: 25px;
    color: #ffffff;
    transition: all 0.4s ease;
}

.langpro-standard-card:hover .langpro-icon {
    background: #ed0b70;
    transform: rotate(-8deg) scale(1.08);
    box-shadow: 0 10px 25px rgba(237, 11, 112, 0.25);
}

.langpro-standard-card:hover .langpro-icon::before {
    left: 45px;
    top: 45px;
}

.langpro-standard-card:hover .langpro-icon i {
    transform: scale(1.18) rotate(8deg);
}


/* =========================================================
   STANDARD CONTENT
========================================================= */

.langpro-class {
    display: block;
    margin-bottom: 4px;
    color: #ed0b70;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.langpro-card-content h4 {
    margin: 0 0 6px;
    color: #163653;
    font-size: 17px;
    font-weight: 700;
}

.langpro-card-content p {
    margin: 0;
    color: #718096;
    font-size: 12.5px;
    line-height: 1.7;
}


/* =========================================================
   IMAGE AREA
========================================================= */

.langpro-image-area {
    position: relative;
    padding: 20px;
}


/* =========================================================
   IMAGE BOX
========================================================= */

.langpro-image-box {
    position: relative;
    height: 600px;
    overflow: hidden;
    border-radius: 28px;
    background: #0b355c;
    box-shadow: 0 25px 65px rgba(11, 53, 92, 0.23);
    transform: perspective(1100px) rotateY(-3deg);
    transition: all 0.6s ease;
}

.langpro-image-box:hover {
    transform: perspective(1100px) rotateY(0deg) translateY(-10px);
    box-shadow: 0 35px 85px rgba(18, 74, 128, 0.30);
}

.langpro-image-box img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(1.05) contrast(1.04);
    transition:
        transform 0.9s ease,
        filter 0.9s ease;
}

.langpro-image-box:hover img {
    transform: scale(1.10);
    filter: saturate(1.25) contrast(1.08);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.langpro-image-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg,
            rgba(11, 53, 92, 0.02) 35%,
            rgba(11, 53, 92, 0.75) 100%);
}


/* =========================================================
   IMAGE LIGHTING
========================================================= */

.langpro-image-light {
    position: absolute;
    z-index: 2;
    width: 240px;
    height: 240px;
    left: -160px;
    top: -150px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.30);
    filter: blur(45px);
    pointer-events: none;
    transition: all 1s ease;
}

.langpro-image-box:hover .langpro-image-light {
    left: 90%;
    top: 85%;
}


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

.langpro-image-caption {
    position: absolute;
    z-index: 4;
    left: 25px;
    right: 25px;
    bottom: 25px;
    padding: 20px;
    border-radius: 16px;
    background: rgba(11, 53, 92, 0.86);
    backdrop-filter: blur(12px);
    color: #ffffff;
    transform: translateY(15px);
    transition: all 0.45s ease;
}

.langpro-image-box:hover .langpro-image-caption {
    transform: translateY(0);
    background: rgba(237, 11, 112, 0.90);
}

.langpro-image-caption span {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.langpro-image-caption strong {
    display: block;
    font-size: 21px;
}


/* =========================================================
   IMAGE DECORATIONS
========================================================= */

.langpro-shape {
    position: absolute;
    border-radius: 22px;
    z-index: -1;
}

.langpro-shape-one {
    width: 155px;
    height: 155px;
    left: -5px;
    top: -10px;
    background: rgba(237, 11, 112, 0.12);
    animation: langproFloatOne 5s ease-in-out infinite;
}

.langpro-shape-two {
    width: 115px;
    height: 115px;
    right: -5px;
    bottom: -5px;
    background: rgba(18, 74, 128, 0.12);
    animation: langproFloatTwo 6s ease-in-out infinite;
}

@keyframes langproFloatOne {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-14px) rotate(8deg);
    }

}

@keyframes langproFloatTwo {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(12px) rotate(-8deg);
    }

}


/* =========================================================
   DARK SECTION
========================================================= */

.langpro-dark {
    background: #0b355c;
    color: #ffffff;
}


/* =========================================================
   DARK PATTERN
========================================================= */

.langpro-dark-pattern {
    position: absolute;
    width: 750px;
    height: 750px;
    right: -300px;
    top: -350px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    animation: langproDarkRotate 32s linear infinite;
}

.langpro-dark-pattern::before {
    content: "";
    position: absolute;
    inset: 70px;
    border: 1px dashed rgba(255, 255, 255, 0.10);
    border-radius: 50%;
}

.langpro-dark-pattern::after {
    content: "";
    position: absolute;
    inset: 165px;
    border: 1px solid rgba(237, 11, 112, 0.13);
    border-radius: 50%;
}

@keyframes langproDarkRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }

}


/* =========================================================
   DARK HEADER
========================================================= */

.langpro-dark-heading {
    max-width: 780px;
    margin: 0 auto 55px;
    text-align: center;
}

.langpro-dark-label {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.langpro-dark-label i {
    color: #ed0b70;
}

.langpro-dark-heading h2 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 44px;
    line-height: 1.2;
    font-weight: 800;
}

.langpro-dark-heading h2 span {
    color: #ed0b70;
}

.langpro-dark-heading>p {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 16px;
    line-height: 1.85;
}


/* =========================================================
   FOCUS GRID
========================================================= */

.langpro-focus-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}


/* =========================================================
   FOCUS CARD
========================================================= */

.langpro-focus-card {
    position: relative;
    padding: 32px 27px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
    overflow: hidden;
    transition: all 0.45s ease;
}

.langpro-focus-card::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    right: -60px;
    top: -60px;
    border-radius: 50%;
    background: rgba(237, 11, 112, 0.16);
    transition: all 0.6s ease;
}

.langpro-focus-card:hover {
    transform: translateY(-12px);
    border-color: rgba(237, 11, 112, 0.40);
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.22);
}

.langpro-focus-card:hover::before {
    width: 210px;
    height: 210px;
}


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

.langpro-focus-icon {
    position: relative;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    border-radius: 15px;
    background: #ed0b70;
    color: #ffffff;
    overflow: hidden;
    transition: all 0.45s ease;
}

.langpro-focus-icon i {
    position: relative;
    z-index: 2;
    font-size: 29px;
    color: #ffffff;
    transition: all 0.45s ease;
}

.langpro-focus-card:hover .langpro-focus-icon {
    transform: rotate(9deg) scale(1.08);
    box-shadow: 0 12px 30px rgba(237, 11, 112, 0.35);
}

.langpro-focus-card:hover .langpro-focus-icon i {
    transform: scale(1.2) rotate(-8deg);
}


/* =========================================================
   FOCUS TEXT
========================================================= */

.langpro-focus-card h3 {
    position: relative;
    z-index: 2;
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 19px;
    font-weight: 700;
}

.langpro-focus-card p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: rgba(255, 255, 255, 0.70);
    font-size: 13px;
    line-height: 1.8;
}


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

@media (max-width: 1199px) {

    .langpro-section {
        padding: 85px 0;
    }

    .langpro-grid {
        gap: 45px;
    }

    .langpro-content h2 {
        font-size: 42px;
    }

    .langpro-image-box {
        height: 540px;
    }

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

}


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

@media (max-width: 991px) {

    .langpro-section {
        padding: 75px 0;
    }

    .langpro-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .langpro-content {
        text-align: center;
    }

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

    .langpro-line {
        margin-left: auto;
        margin-right: auto;
    }

    .langpro-content>p {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    .langpro-standard-card {
        text-align: left;
    }

    .langpro-image-area {
        width: 100%;
        max-width: 650px;
        margin: 0 auto;
    }

    .langpro-image-box {
        height: 500px;
        transform: none;
    }

    .langpro-image-box:hover {
        transform: translateY(-8px);
    }

}


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

@media (max-width: 767px) {

    .langpro-section {
        padding: 60px 0;
    }

    .langpro-section .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .langpro-grid {
        gap: 35px;
    }

    .langpro-label {
        padding: 8px 15px;
        font-size: 11px;
    }

    .langpro-label i {
        font-size: 19px;
    }

    .langpro-content h2 {
        font-size: 34px;
    }

    .langpro-content>p {
        font-size: 14px;
        line-height: 1.8;
    }

    .langpro-standard-card {
        padding: 14px;
        gap: 13px;
    }

    .langpro-icon {
        width: 46px;
        min-width: 46px;
        height: 46px;
    }

    .langpro-icon i {
        font-size: 21px;
    }

    .langpro-card-content h4 {
        font-size: 15px;
    }

    .langpro-card-content p {
        font-size: 12px;
    }

    .langpro-image-area {
        padding: 12px;
    }

    .langpro-image-box {
        height: 430px;
        border-radius: 20px;
    }

    .langpro-image-caption {
        left: 15px;
        right: 15px;
        bottom: 15px;
        padding: 16px;
    }

    .langpro-image-caption strong {
        font-size: 19px;
    }

    .langpro-dark-heading {
        margin-bottom: 35px;
    }

    .langpro-dark-heading h2 {
        font-size: 34px;
    }

    .langpro-dark-heading>p {
        font-size: 14px;
    }

    .langpro-focus-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .langpro-focus-card {
        text-align: center;
    }

    .langpro-focus-icon {
        margin-left: auto;
        margin-right: auto;
    }

}


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

@media (max-width: 480px) {

    .langpro-section {
        padding: 50px 0;
    }

    .langpro-content h2 {
        font-size: 29px;
    }

    .langpro-content>p {
        font-size: 13px;
    }

    .langpro-standard-card {
        padding: 13px;
    }

    .langpro-icon {
        width: 42px;
        min-width: 42px;
        height: 42px;
    }

    .langpro-icon i {
        font-size: 19px;
    }

    .langpro-class {
        font-size: 9px;
    }

    .langpro-card-content h4 {
        font-size: 14px;
    }

    .langpro-card-content p {
        font-size: 11.5px;
    }

    .langpro-image-box {
        height: 370px;
        border-radius: 17px;
    }

    .langpro-image-caption {
        padding: 13px;
    }

    .langpro-image-caption span {
        font-size: 9px;
    }

    .langpro-image-caption strong {
        font-size: 17px;
    }

    .langpro-dark-heading h2 {
        font-size: 29px;
    }

    .langpro-dark-heading>p {
        font-size: 13px;
    }

    .langpro-focus-card {
        padding: 25px 18px;
    }

    .langpro-focus-icon {
        width: 55px;
        height: 55px;
    }

    .langpro-focus-icon i {
        font-size: 25px;
    }

    .langpro-focus-card h3 {
        font-size: 18px;
    }

    .langpro-focus-card p {
        font-size: 12px;
    }

    .langpro-rotate-pattern {
        width: 350px;
        height: 350px;
        right: -190px;
        top: -160px;
    }

    .langpro-dark-pattern {
        width: 400px;
        height: 400px;
        right: -210px;
        top: -190px;
    }

}


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

@media (max-width: 360px) {

    .langpro-section {
        padding: 45px 0;
    }

    .langpro-content h2 {
        font-size: 26px;
    }

    .langpro-content>p {
        font-size: 12.5px;
    }

    .langpro-label {
        font-size: 10px;
    }

    .langpro-label i {
        font-size: 17px;
    }

    .langpro-standard-card {
        gap: 10px;
    }

    .langpro-icon {
        width: 39px;
        min-width: 39px;
        height: 39px;
    }

    .langpro-icon i {
        font-size: 18px;
    }

    .langpro-image-box {
        height: 330px;
    }

    .langpro-image-caption strong {
        font-size: 15px;
    }

    .langpro-dark-heading h2 {
        font-size: 26px;
    }

}


/* =========================================================
   REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .langpro-rotate-pattern,
    .langpro-dark-pattern,
    .langpro-shape-one,
    .langpro-shape-two {
        animation: none;
    }

    .langpro-image-box,
    .langpro-image-box img,
    .langpro-image-light,
    .langpro-standard-card,
    .langpro-icon,
    .langpro-focus-card,
    .langpro-focus-icon {
        transition: none;
    }

}

/* =========================================================
   HIGHER SECONDARY GROUPS
   PREMIUM RESPONSIVE DESIGN
   UNIQUE CLASS NAMES
   THEMIFY ICONS
========================================================= */


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

.hsgroups-academic-section,
.hsgroups-future-section {
    position: relative;
    padding: 60px 0;
    overflow: hidden;
    isolation: isolate;
}


/* =========================================================
   THEMIFY ICONS
========================================================= */

.hsgroups-academic-section i,
.hsgroups-future-section i {
    font-family: 'themify' !important;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    display: inline-block;
}


/* =========================================================
   LIGHT SECTION
========================================================= */

.hsgroups-light {
    background: #f5f8fc;
    color: #26364a;
}


/* =========================================================
   ROTATING BACKGROUND
========================================================= */

.hsgroups-bg-pattern {
    position: absolute;
    width: 700px;
    height: 700px;
    right: -320px;
    top: -350px;
    border: 1px solid rgba(18, 74, 128, 0.08);
    border-radius: 50%;
    animation: hsgroupsRotate 32s linear infinite;
}

.hsgroups-bg-pattern::before {
    content: "";
    position: absolute;
    inset: 70px;
    border: 1px dashed rgba(18, 74, 128, 0.11);
    border-radius: 50%;
}

.hsgroups-bg-pattern::after {
    content: "";
    position: absolute;
    inset: 160px;
    border: 1px solid rgba(237, 11, 112, 0.10);
    border-radius: 50%;
}

@keyframes hsgroupsRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


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

.hsgroups-heading {
    max-width: 850px;
    margin: 0 auto 50px;
    text-align: center;
}

.hsgroups-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    margin-bottom: 20px;
    border-radius: 50px;
    background: rgba(18, 74, 128, 0.08);
    color: #124a80;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    transition: all 0.35s ease;
}

.hsgroups-label i {
    font-size: 22px;
    color: #ed0b70;
    transition: all 0.35s ease;
}

.hsgroups-label:hover {
    color: #ffffff;
    background: #124a80;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(18, 74, 128, 0.15);
}

.hsgroups-label:hover i {
    color: #ffffff;
    transform: scale(1.15) rotate(10deg);
}

.hsgroups-heading h2 {
    margin: 0 0 18px;
    color: #132b45;
    font-size: 46px;
    line-height: 1.15;
    font-weight: 800;
}

.hsgroups-heading h2 span {
    color: #ed0b70;
}

.hsgroups-title-line {
    width: 75px;
    height: 4px;
    margin: 0 auto 25px;
    border-radius: 20px;
    background: #ed0b70;
}

.hsgroups-heading p {
    margin: 0;
    color: #68778a;
    font-size: 16px;
    line-height: 1.85;
}


/* =========================================================
   TABLE WRAPPER
========================================================= */

.hsgroups-table-wrapper {
    position: relative;
    width: 100%;
    overflow-x: auto;
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(18, 74, 128, 0.10);
    scrollbar-width: thin;
}


/* =========================================================
   TABLE
========================================================= */

.hsgroups-table {
    width: 100%;
    min-width: 900px;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
    overflow: hidden;
}


/* =========================================================
   TABLE HEADER
========================================================= */

.hsgroups-table thead th {
    padding: 22px 20px;
    background: #124a80;
    color: #ffffff;
    border: none;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-align: left;
    white-space: nowrap;
}

.hsgroups-table thead th i {
    margin-right: 8px;
    color: #ed0b70;
    font-size: 18px;
    vertical-align: middle;
}


/* =========================================================
   TABLE BODY
========================================================= */

.hsgroups-table tbody td {
    position: relative;
    padding: 22px 20px;
    color: #5d6b7c;
    background: #ffffff;
    border-bottom: 1px solid #edf1f5;
    font-size: 14px;
    line-height: 1.7;
    vertical-align: middle;
    transition: all 0.35s ease;
}

.hsgroups-table tbody tr:last-child td {
    border-bottom: none;
}


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

.hsgroups-table tbody tr {
    transition: all 0.35s ease;
}

.hsgroups-table tbody tr:hover td {
    background: #f9fbfe;
}

.hsgroups-table tbody tr:hover {
    box-shadow: 0 8px 25px rgba(18, 74, 128, 0.08);
}


/* =========================================================
   CODE
========================================================= */

.hsgroups-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 9px 13px;
    border-radius: 10px;
    background: rgba(18, 74, 128, 0.09);
    color: #124a80;
    font-size: 14px;
    font-weight: 800;
    transition: all 0.35s ease;
}

.hsgroups-table tbody tr:hover .hsgroups-code {
    color: #ffffff;
    background: #ed0b70;
    transform: scale(1.06);
}


/* =========================================================
   STREAM
========================================================= */

.hsgroups-stream {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hsgroups-stream-icon {
    width: 45px;
    height: 45px;
    min-width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #124a80;
    color: #ffffff;
    transition: all 0.4s ease;
}

.hsgroups-stream-icon i {
    font-size: 20px;
}

.hsgroups-table tbody tr:hover .hsgroups-stream-icon {
    background: #ed0b70;
    transform: rotate(-8deg) scale(1.08);
    box-shadow: 0 8px 20px rgba(237, 11, 112, 0.25);
}

.hsgroups-stream strong {
    color: #163653;
    font-size: 14px;
    font-weight: 700;
}


/* =========================================================
   SUBJECTS
========================================================= */

.hsgroups-subjects {
    color: #40556a;
    font-weight: 500;
}


/* =========================================================
   NOTE
========================================================= */

.hsgroups-note {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-top: 25px;
    padding: 20px 22px;
    border-left: 4px solid #ed0b70;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(18, 74, 128, 0.06);
}

.hsgroups-note-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(237, 11, 112, 0.10);
    color: #ed0b70;
}

.hsgroups-note-icon i {
    font-size: 20px;
}

.hsgroups-note-content {
    color: #68778a;
    font-size: 13px;
    line-height: 1.7;
}

.hsgroups-note-content strong {
    color: #124a80;
    margin-right: 5px;
}


/* =========================================================
   DARK SECTION
========================================================= */

.hsgroups-future-section {
    background: #0b355c;
    color: #ffffff;
}


/* =========================================================
   DARK PATTERN
========================================================= */

.hsgroups-future-pattern {
    position: absolute;
    width: 750px;
    height: 750px;
    left: -340px;
    bottom: -400px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    animation: hsgroupsDarkRotate 35s linear infinite;
}

.hsgroups-future-pattern::before {
    content: "";
    position: absolute;
    inset: 70px;
    border: 1px dashed rgba(255, 255, 255, 0.10);
    border-radius: 50%;
}

.hsgroups-future-pattern::after {
    content: "";
    position: absolute;
    inset: 160px;
    border: 1px solid rgba(237, 11, 112, 0.13);
    border-radius: 50%;
}

@keyframes hsgroupsDarkRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }

}


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

.hsgroups-future-heading {
    max-width: 780px;
    margin: 0 auto 55px;
    text-align: center;
}

.hsgroups-dark-label {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.hsgroups-dark-label i {
    color: #ed0b70;
}

.hsgroups-future-heading h2 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 44px;
    line-height: 1.2;
    font-weight: 800;
}

.hsgroups-future-heading h2 span {
    color: #ed0b70;
}

.hsgroups-future-heading p {
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    font-size: 16px;
    line-height: 1.85;
}


/* =========================================================
   FUTURE GRID
========================================================= */

.hsgroups-future-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}


/* =========================================================
   FUTURE CARD
========================================================= */

.hsgroups-future-card {
    position: relative;
    padding: 32px 25px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
    overflow: hidden;
    transition: all 0.45s ease;
}

.hsgroups-future-card::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    right: -60px;
    top: -60px;
    border-radius: 50%;
    background: rgba(237, 11, 112, 0.16);
    transition: all 0.6s ease;
}

.hsgroups-future-card:hover {
    transform: translateY(-12px);
    border-color: rgba(237, 11, 112, 0.40);
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.22);
}

.hsgroups-future-card:hover::before {
    width: 210px;
    height: 210px;
}


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

.hsgroups-future-icon {
    position: relative;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    border-radius: 15px;
    background: #ed0b70;
    color: #ffffff;
    transition: all 0.45s ease;
}

.hsgroups-future-icon i {
    font-size: 29px;
    color: #ffffff;
    transition: all 0.45s ease;
}

.hsgroups-future-card:hover .hsgroups-future-icon {
    transform: rotate(9deg) scale(1.08);
    box-shadow: 0 12px 30px rgba(237, 11, 112, 0.35);
}

.hsgroups-future-card:hover .hsgroups-future-icon i {
    transform: scale(1.2) rotate(-8deg);
}


/* =========================================================
   FUTURE TEXT
========================================================= */

.hsgroups-future-card h3 {
    position: relative;
    z-index: 2;
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 19px;
    line-height: 1.4;
}

.hsgroups-future-card p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: rgba(255, 255, 255, 0.70);
    font-size: 13px;
    line-height: 1.8;
}


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

@media (max-width: 1199px) {

    .hsgroups-academic-section,
    .hsgroups-future-section {
        padding: 85px 0;
    }

    .hsgroups-heading h2 {
        font-size: 42px;
    }

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

}


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

@media (max-width: 991px) {

    .hsgroups-academic-section,
    .hsgroups-future-section {
        padding: 75px 0;
    }

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

    .hsgroups-table-wrapper {
        border-radius: 15px;
    }

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

}


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

@media (max-width: 767px) {

    .hsgroups-academic-section,
    .hsgroups-future-section {
        padding: 60px 0;
    }

    .hsgroups-academic-section .container,
    .hsgroups-future-section .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .hsgroups-heading {
        margin-bottom: 35px;
    }

    .hsgroups-label {
        padding: 8px 15px;
        font-size: 11px;
    }

    .hsgroups-label i {
        font-size: 19px;
    }

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

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

    /*
       Mobile Table:
       Convert each row into a card
    */

    .hsgroups-table-wrapper {
        overflow: visible;
        box-shadow: none;
    }

    .hsgroups-table {
        min-width: 0;
        width: 100%;
        display: block;
        background: transparent;
    }

    .hsgroups-table thead {
        display: none;
    }

    .hsgroups-table tbody {
        display: grid;
        gap: 18px;
    }

    .hsgroups-table tbody tr {
        display: block;
        padding: 20px;
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(18, 74, 128, 0.08);
    }

    .hsgroups-table tbody tr:hover {
        transform: translateY(-5px);
    }

    .hsgroups-table tbody td {
        display: block;
        padding: 10px 0;
        border: none;
        background: transparent;
    }

    .hsgroups-table tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 5px;
        color: #124a80;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .hsgroups-table tbody tr:hover td {
        background: transparent;
    }

    .hsgroups-stream {
        align-items: flex-start;
    }

    .hsgroups-note {
        padding: 17px;
    }

    .hsgroups-future-heading {
        margin-bottom: 35px;
    }

    .hsgroups-future-heading h2 {
        font-size: 34px;
    }

    .hsgroups-future-heading p {
        font-size: 14px;
    }

    .hsgroups-future-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .hsgroups-future-card {
        text-align: center;
    }

    .hsgroups-future-icon {
        margin-left: auto;
        margin-right: auto;
    }

}


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

@media (max-width: 480px) {

    .hsgroups-academic-section,
    .hsgroups-future-section {
        padding: 50px 0;
    }

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

    .hsgroups-heading p {
        font-size: 13px;
        line-height: 1.75;
    }

    .hsgroups-table tbody tr {
        padding: 16px;
    }

    .hsgroups-table tbody td {
        font-size: 13px;
    }

    .hsgroups-code {
        min-width: 52px;
        padding: 8px 11px;
        font-size: 13px;
    }

    .hsgroups-stream-icon {
        width: 42px;
        min-width: 42px;
        height: 42px;
    }

    .hsgroups-stream-icon i {
        font-size: 18px;
    }

    .hsgroups-stream strong {
        font-size: 13px;
    }

    .hsgroups-subjects {
        font-size: 12px;
    }

    .hsgroups-note {
        gap: 11px;
        padding: 14px;
    }

    .hsgroups-note-icon {
        width: 38px;
        min-width: 38px;
        height: 38px;
    }

    .hsgroups-note-content {
        font-size: 11.5px;
    }

    .hsgroups-future-heading h2 {
        font-size: 29px;
    }

    .hsgroups-future-heading p {
        font-size: 13px;
    }

    .hsgroups-future-card {
        padding: 25px 18px;
    }

    .hsgroups-future-icon {
        width: 55px;
        height: 55px;
    }

    .hsgroups-future-icon i {
        font-size: 25px;
    }

    .hsgroups-future-card h3 {
        font-size: 18px;
    }

    .hsgroups-future-card p {
        font-size: 12px;
    }

    .hsgroups-bg-pattern {
        width: 350px;
        height: 350px;
        right: -190px;
        top: -170px;
    }

    .hsgroups-future-pattern {
        width: 400px;
        height: 400px;
        left: -200px;
        bottom: -190px;
    }

}


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

@media (max-width: 360px) {

    .hsgroups-academic-section,
    .hsgroups-future-section {
        padding: 45px 0;
    }

    .hsgroups-heading h2 {
        font-size: 26px;
    }

    .hsgroups-heading p {
        font-size: 12px;
    }

    .hsgroups-table tbody tr {
        padding: 14px;
    }

    .hsgroups-table tbody td {
        font-size: 12px;
    }

    .hsgroups-stream strong {
        font-size: 12px;
    }

    .hsgroups-future-heading h2 {
        font-size: 26px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hsgroups-bg-pattern,
    .hsgroups-future-pattern {
        animation: none;
    }

    .hsgroups-table tbody tr,
    .hsgroups-code,
    .hsgroups-stream-icon,
    .hsgroups-future-card,
    .hsgroups-future-icon {
        transition: none;
    }

}

/* =========================================================
   SCHOOL TIMINGS - PREMIUM DESIGN
   UNIQUE CLASS NAMES
   THEMIFY ICONS
========================================================= */


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

.schtime-pro-section,
.schtime-pro-dark {
    position: relative;
    padding: 60px 0;
    overflow: hidden;
    isolation: isolate;
}

/* =========================================================
   THEMIFY ICONS
========================================================= */

.schtime-pro-section i,
.schtime-pro-dark i {
    font-family: 'themify' !important;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    display: inline-block;
}


/* =========================================================
   LIGHT SECTION
========================================================= */

.schtime-pro-light {
    background: #f5f8fc;
    color: #26364a;
}


/* =========================================================
   ROTATING BACKGROUND PATTERN
========================================================= */

.schtime-pro-pattern {
    position: absolute;
    width: 680px;
    height: 680px;
    right: -310px;
    top: -320px;
    border: 1px solid rgba(18, 74, 128, 0.08);
    border-radius: 50%;
    animation: schtimeRotate 30s linear infinite;
}

.schtime-pro-pattern::before {
    content: "";
    position: absolute;
    inset: 65px;
    border: 1px dashed rgba(18, 74, 128, 0.12);
    border-radius: 50%;
}

.schtime-pro-pattern::after {
    content: "";
    position: absolute;
    inset: 150px;
    border: 1px solid rgba(237, 11, 112, 0.10);
    border-radius: 50%;
}

@keyframes schtimeRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


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

.schtime-pro-heading {
    max-width: 1150px;
    margin: 0 auto 50px;
    text-align: center;
}

.schtime-pro-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    margin-bottom: 20px;
    border-radius: 50px;
    background: rgba(18, 74, 128, 0.08);
    color: #124a80;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    transition: all 0.35s ease;
}

.schtime-pro-label i {
    font-size: 22px;
    color: #ed0b70;
    transition: all 0.35s ease;
}

.schtime-pro-label:hover {
    color: #ffffff;
    background: #124a80;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(18, 74, 128, 0.15);
}

.schtime-pro-label:hover i {
    color: #ffffff;
    transform: scale(1.15) rotate(10deg);
}

.schtime-pro-heading h2 {
    margin: 0 0 18px;
    color: #132b45;
    font-size: 46px;
    line-height: 1.15;
    font-weight: 800;
}

.schtime-pro-heading h2 span {
    color: #ed0b70;
}

.schtime-pro-line {
    width: 75px;
    height: 4px;
    margin: 0 auto 25px;
    border-radius: 20px;
    background: #ed0b70;
}

.schtime-pro-heading>p {
    margin: 0;
    color: #68778a;
    font-size: 16px;
    line-height: 1.85;
}


/* =========================================================
   TABLE WRAPPER
========================================================= */

.schtime-pro-table-wrap {
    position: relative;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(18, 74, 128, 0.11);
}


/* =========================================================
   TABLE
========================================================= */

.schtime-pro-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
}


/* =========================================================
   TABLE HEADER
========================================================= */

.schtime-pro-table thead th {
    padding: 22px 25px;
    background: #124a80;
    color: #ffffff;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.schtime-pro-table thead th i {
    margin-right: 8px;
    color: #ed0b70;
    font-size: 19px;
    vertical-align: middle;
}


/* =========================================================
   TABLE BODY
========================================================= */

.schtime-pro-table tbody td {
    position: relative;
    padding: 22px 25px;
    background: #ffffff;
    color: #5d6b7c;
    border-bottom: 1px solid #edf1f5;
    font-size: 15px;
    line-height: 1.7;
    vertical-align: middle;
    transition: all 0.35s ease;
}

.schtime-pro-table tbody tr:last-child td {
    border-bottom: none;
}

.schtime-pro-table tbody tr {
    transition: all 0.35s ease;
}

.schtime-pro-table tbody tr:hover {
    transform: scale(1.005);
}

.schtime-pro-table tbody tr:hover td {
    background: #f9fbfe;
}


/* =========================================================
   SECTION NAME
========================================================= */

.schtime-pro-section-name {
    display: flex;
    align-items: center;
    gap: 14px;
}

.schtime-pro-section-name strong {
    color: #163653;
    font-size: 15px;
    font-weight: 700;
}


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

.schtime-pro-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #124a80;
    color: #ffffff;
    transition: all 0.4s ease;
}

.schtime-pro-icon i {
    font-size: 21px;
}

.schtime-pro-table tbody tr:hover .schtime-pro-icon {
    background: #ed0b70;
    transform: rotate(-8deg) scale(1.08);
    box-shadow: 0 10px 25px rgba(237, 11, 112, 0.25);
}


/* =========================================================
   TIME
========================================================= */

.schtime-pro-time {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: 9px;
    background: rgba(18, 74, 128, 0.07);
    color: #124a80;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.35s ease;
}

.schtime-pro-table tbody tr:hover .schtime-pro-time {
    color: #ffffff;
    background: #ed0b70;
    transform: translateX(5px);
}


/* =========================================================
   LUNCH
========================================================= */

.schtime-lunch-icon {
    background: #ed0b70;
}

.schtime-break-time {
    background: rgba(237, 11, 112, 0.08);
    color: #ed0b70;
}


/* =========================================================
   NOTE
========================================================= */

.schtime-pro-note {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-top: 25px;
    padding: 20px 22px;
    border-left: 4px solid #ed0b70;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(18, 74, 128, 0.06);
}

.schtime-pro-note-icon {
    width: 43px;
    height: 43px;
    min-width: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(237, 11, 112, 0.10);
    color: #ed0b70;
}

.schtime-pro-note-icon i {
    font-size: 20px;
}

.schtime-pro-note-content strong {
    display: block;
    margin-bottom: 4px;
    color: #124a80;
    font-size: 14px;
}

.schtime-pro-note-content p {
    margin: 0;
    color: #68778a;
    font-size: 13px;
    line-height: 1.7;
}


/* =========================================================
   DARK SECTION
========================================================= */

.schtime-pro-dark {
    background: #0b355c;
    color: #ffffff;
}


/* =========================================================
   DARK PATTERN
========================================================= */

.schtime-dark-pattern {
    position: absolute;
    width: 750px;
    height: 750px;
    left: -350px;
    bottom: -380px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    animation: schtimeDarkRotate 35s linear infinite;
}

.schtime-dark-pattern::before {
    content: "";
    position: absolute;
    inset: 70px;
    border: 1px dashed rgba(255, 255, 255, 0.10);
    border-radius: 50%;
}

.schtime-dark-pattern::after {
    content: "";
    position: absolute;
    inset: 160px;
    border: 1px solid rgba(237, 11, 112, 0.13);
    border-radius: 50%;
}

@keyframes schtimeDarkRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }

}


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

.schtime-dark-heading {
    max-width: 780px;
    margin: 0 auto 55px;
    text-align: center;
}

.schtime-dark-label {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.schtime-dark-label i {
    color: #ed0b70;
}

.schtime-dark-heading h2 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 44px;
    line-height: 1.2;
    font-weight: 800;
}

.schtime-dark-heading h2 span {
    color: #ed0b70;
}

.schtime-dark-heading p {
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    font-size: 16px;
    line-height: 1.85;
}


/* =========================================================
   ROUTINE GRID
========================================================= */

.schtime-routine-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}


/* =========================================================
   ROUTINE CARD
========================================================= */

.schtime-routine-card {
    position: relative;
    padding: 32px 25px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
    overflow: hidden;
    transition: all 0.45s ease;
}

.schtime-routine-card::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    right: -60px;
    top: -60px;
    border-radius: 50%;
    background: rgba(237, 11, 112, 0.16);
    transition: all 0.6s ease;
}

.schtime-routine-card:hover {
    transform: translateY(-12px);
    border-color: rgba(237, 11, 112, 0.40);
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.22);
}

.schtime-routine-card:hover::before {
    width: 210px;
    height: 210px;
}


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

.schtime-routine-icon {
    position: relative;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 15px;
    background: #ed0b70;
    color: #ffffff;
    transition: all 0.45s ease;
}

.schtime-routine-icon i {
    font-size: 29px;
    color: #ffffff;
    transition: all 0.45s ease;
}

.schtime-routine-card:hover .schtime-routine-icon {
    transform: rotate(9deg) scale(1.08);
    box-shadow: 0 12px 30px rgba(237, 11, 112, 0.35);
}

.schtime-routine-card:hover .schtime-routine-icon i {
    transform: scale(1.2) rotate(-8deg);
}


/* =========================================================
   ROUTINE TEXT
========================================================= */

.schtime-routine-time {
    position: relative;
    z-index: 2;
    display: block;
    margin-bottom: 7px;
    color: #ed0b70;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.schtime-routine-card h3 {
    position: relative;
    z-index: 2;
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 19px;
    line-height: 1.4;
}

.schtime-routine-card p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: rgba(255, 255, 255, 0.70);
    font-size: 13px;
    line-height: 1.8;
}


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

@media (max-width: 1199px) {

    .schtime-pro-section,
    .schtime-pro-dark {
        padding: 85px 0;
    }

    .schtime-pro-heading h2 {
        font-size: 42px;
    }

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

}


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

@media (max-width: 991px) {

    .schtime-pro-section,
    .schtime-pro-dark {
        padding: 75px 0;
    }

    .schtime-pro-heading h2 {
        font-size: 40px;
    }

    .schtime-pro-table-wrap {
        border-radius: 15px;
    }

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

}


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

@media (max-width: 767px) {

    .schtime-pro-section,
    .schtime-pro-dark {
        padding: 60px 0;
    }

    .schtime-pro-section .container,
    .schtime-pro-dark .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .schtime-pro-heading {
        margin-bottom: 35px;
    }

    .schtime-pro-label {
        padding: 8px 15px;
        font-size: 11px;
    }

    .schtime-pro-label i {
        font-size: 19px;
    }

    .schtime-pro-heading h2 {
        font-size: 34px;
    }

    .schtime-pro-heading>p {
        font-size: 14px;
        line-height: 1.8;
    }


    /* Mobile Table */

    .schtime-pro-table-wrap {
        overflow: visible;
        box-shadow: none;
    }

    .schtime-pro-table {
        display: block;
        background: transparent;
    }

    .schtime-pro-table thead {
        display: none;
    }

    .schtime-pro-table tbody {
        display: grid;
        gap: 16px;
    }

    .schtime-pro-table tbody tr {
        display: block;
        padding: 18px;
        border-radius: 16px;
        background: #ffffff;
        box-shadow: 0 10px 30px rgba(18, 74, 128, 0.08);
    }

    .schtime-pro-table tbody td {
        display: block;
        padding: 8px 0;
        border: none;
        background: transparent;
    }

    .schtime-pro-table tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 6px;
        color: #124a80;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .schtime-pro-table tbody tr:hover td {
        background: transparent;
    }

    .schtime-pro-table tbody tr:hover {
        transform: translateY(-5px);
    }

    .schtime-pro-time {
        font-size: 13px;
    }


    /* Note */

    .schtime-pro-note {
        padding: 17px;
    }


    /* Dark */

    .schtime-dark-heading {
        margin-bottom: 35px;
    }

    .schtime-dark-heading h2 {
        font-size: 34px;
    }

    .schtime-dark-heading p {
        font-size: 14px;
    }

    .schtime-routine-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .schtime-routine-card {
        text-align: center;
    }

    .schtime-routine-icon {
        margin-left: auto;
        margin-right: auto;
    }

}


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

@media (max-width: 480px) {

    .schtime-pro-section,
    .schtime-pro-dark {
        padding: 50px 0;
    }

    .schtime-pro-heading h2 {
        font-size: 29px;
    }

    .schtime-pro-heading>p {
        font-size: 13px;
    }

    .schtime-pro-table tbody tr {
        padding: 15px;
    }

    .schtime-pro-section-name {
        gap: 11px;
    }

    .schtime-pro-section-name strong {
        font-size: 13px;
    }

    .schtime-pro-icon {
        width: 43px;
        min-width: 43px;
        height: 43px;
    }

    .schtime-pro-icon i {
        font-size: 19px;
    }

    .schtime-pro-time {
        font-size: 12px;
        padding: 9px 12px;
    }

    .schtime-pro-note {
        gap: 11px;
        padding: 14px;
    }

    .schtime-pro-note-icon {
        width: 38px;
        min-width: 38px;
        height: 38px;
    }

    .schtime-pro-note-content strong {
        font-size: 12px;
    }

    .schtime-pro-note-content p {
        font-size: 11.5px;
    }

    .schtime-dark-heading h2 {
        font-size: 29px;
    }

    .schtime-dark-heading p {
        font-size: 13px;
    }

    .schtime-routine-card {
        padding: 25px 18px;
    }

    .schtime-routine-icon {
        width: 55px;
        height: 55px;
    }

    .schtime-routine-icon i {
        font-size: 25px;
    }

    .schtime-routine-card h3 {
        font-size: 18px;
    }

    .schtime-routine-card p {
        font-size: 12px;
    }

    .schtime-pro-pattern {
        width: 350px;
        height: 350px;
        right: -190px;
        top: -160px;
    }

    .schtime-dark-pattern {
        width: 400px;
        height: 400px;
        left: -200px;
        bottom: -200px;
    }

}


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

@media (max-width: 360px) {

    .schtime-pro-section,
    .schtime-pro-dark {
        padding: 45px 0;
    }

    .schtime-pro-heading h2 {
        font-size: 26px;
    }

    .schtime-pro-heading>p {
        font-size: 12px;
    }

    .schtime-pro-table tbody tr {
        padding: 13px;
    }

    .schtime-pro-section-name strong {
        font-size: 12px;
    }

    .schtime-pro-time {
        font-size: 11px;
    }

    .schtime-dark-heading h2 {
        font-size: 26px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .schtime-pro-pattern,
    .schtime-dark-pattern {
        animation: none;
    }

    .schtime-pro-table tbody tr,
    .schtime-pro-icon,
    .schtime-routine-card,
    .schtime-routine-icon {
        transition: none;
    }

}

/* =========================================================
   HOUSE SYSTEM - PREMIUM SCHOOL DESIGN
   UNIQUE CLASS NAMES
   THEMIFY ICONS
========================================================= */


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

.housepro-section,
.housepro-dark-section {
    position: relative;
    padding: 60px 0;
    overflow: hidden;
    isolation: isolate;
}


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

.housepro-section i,
.housepro-dark-section i {
    font-family: 'themify' !important;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    display: inline-block;
}


/* =========================================================
   LIGHT SECTION
========================================================= */

.housepro-light {
    background: #f5f8fc;
    color: #26364a;
}


/* =========================================================
   ROTATING BACKGROUND
========================================================= */

.housepro-bg-pattern {
    position: absolute;
    width: 700px;
    height: 700px;
    right: -320px;
    top: -350px;
    border: 1px solid rgba(18, 74, 128, 0.08);
    border-radius: 50%;
    animation: houseproRotate 32s linear infinite;
}

.housepro-bg-pattern::before {
    content: "";
    position: absolute;
    inset: 65px;
    border: 1px dashed rgba(18, 74, 128, 0.11);
    border-radius: 50%;
}

.housepro-bg-pattern::after {
    content: "";
    position: absolute;
    inset: 150px;
    border: 1px solid rgba(237, 11, 112, 0.10);
    border-radius: 50%;
}

@keyframes houseproRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


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

.housepro-intro-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 70px;
}


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

.housepro-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    margin-bottom: 20px;
    border-radius: 50px;
    background: rgba(18, 74, 128, 0.08);
    color: #124a80;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    transition: all 0.35s ease;
}

.housepro-label i {
    font-size: 22px;
    color: #ed0b70;
    transition: all 0.35s ease;
}

.housepro-label:hover {
    color: #ffffff;
    background: #124a80;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(18, 74, 128, 0.15);
}

.housepro-label:hover i {
    color: #ffffff;
    transform: scale(1.15) rotate(10deg);
}


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

.housepro-intro-content h2 {
    margin: 0 0 18px;
    color: #132b45;
    font-size: 48px;
    line-height: 1.15;
    font-weight: 800;
}

.housepro-intro-content h2 span {

    color: #ed0b70;
}


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

.housepro-title-line {
    width: 75px;
    height: 4px;
    margin-bottom: 28px;
    border-radius: 20px;
    background: #ed0b70;
}

.housepro-intro-content>p {
    margin: 0 0 20px;
    color: #5d6b7c;
    font-size: 16px;
    line-height: 1.9;
}

.housepro-intro-content>p strong {
    color: #124a80;
}


/* =========================================================
   VALUE CARDS
========================================================= */

.housepro-values {
    display: grid;
    gap: 15px;
    margin-top: 30px;
}

.housepro-value-card {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 17px;
    background: #ffffff;
    border: 1px solid rgba(18, 74, 128, 0.08);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(18, 74, 128, 0.06);
    transition: all 0.4s ease;
}

.housepro-value-card:hover {
    transform: translateX(9px);
    border-color: rgba(237, 11, 112, 0.20);
    box-shadow: 0 18px 40px rgba(18, 74, 128, 0.12);
}

.housepro-value-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #124a80;
    color: #ffffff;
    transition: all 0.4s ease;
}

.housepro-value-icon i {
    font-size: 23px;
}

.housepro-value-card:hover .housepro-value-icon {
    background: #ed0b70;
    transform: rotate(-8deg) scale(1.08);
}

.housepro-value-card h4 {
    margin: 0 0 5px;
    color: #163653;
    font-size: 16px;
}

.housepro-value-card p {
    margin: 0;
    color: #718096;
    font-size: 12.5px;
    line-height: 1.65;
}


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

.housepro-image-area {
    position: relative;
    padding: 20px;
}

.housepro-image-box {
    position: relative;
    height: 580px;
    overflow: hidden;
    border-radius: 28px;
    background: #0b355c;
    box-shadow: 0 25px 65px rgba(11, 53, 92, 0.23);
    transform: perspective(1100px) rotateY(-3deg);
    transition: all 0.6s ease;
}

.housepro-image-box:hover {
    transform: perspective(1100px) rotateY(0deg) translateY(-10px);
    box-shadow: 0 35px 85px rgba(18, 74, 128, 0.30);
}

.housepro-image-box img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(1.05) contrast(1.04);
    transition:
        transform 0.9s ease,
        filter 0.9s ease;
}

.housepro-image-box:hover img {
    transform: scale(1.10);
    filter: saturate(1.25) contrast(1.08);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.housepro-image-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg,
            rgba(11, 53, 92, 0.02) 35%,
            rgba(11, 53, 92, 0.75) 100%);
}


/* =========================================================
   IMAGE LIGHT
========================================================= */

.housepro-image-light {
    position: absolute;
    z-index: 2;
    width: 240px;
    height: 240px;
    left: -160px;
    top: -150px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.30);
    filter: blur(45px);
    pointer-events: none;
    transition: all 1s ease;
}

.housepro-image-box:hover .housepro-image-light {
    left: 90%;
    top: 85%;
}


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

.housepro-image-caption {
    position: absolute;
    z-index: 4;
    left: 25px;
    right: 25px;
    bottom: 25px;
    padding: 20px;
    border-radius: 16px;
    background: rgba(11, 53, 92, 0.86);
    backdrop-filter: blur(12px);
    color: #ffffff;
    transform: translateY(15px);
    transition: all 0.45s ease;
}

.housepro-image-box:hover .housepro-image-caption {
    transform: translateY(0);
    background: rgba(237, 11, 112, 0.90);
}

.housepro-image-caption span {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.housepro-image-caption strong {
    display: block;
    font-size: 21px;
}


/* =========================================================
   IMAGE SHAPES
========================================================= */

.housepro-image-shape {
    position: absolute;
    border-radius: 22px;
    z-index: -1;
}

.housepro-shape-one {
    width: 155px;
    height: 155px;
    left: -5px;
    top: -10px;
    background: rgba(237, 11, 112, 0.12);
    animation: houseproFloatOne 5s ease-in-out infinite;
}

.housepro-shape-two {
    width: 115px;
    height: 115px;
    right: -5px;
    bottom: -5px;
    background: rgba(18, 74, 128, 0.12);
    animation: houseproFloatTwo 6s ease-in-out infinite;
}

@keyframes houseproFloatOne {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-14px) rotate(8deg);
    }

}

@keyframes houseproFloatTwo {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(12px) rotate(-8deg);
    }

}


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

.housepro-table-heading {
    margin: 85px auto 30px;
    text-align: center;
}

.housepro-table-heading>span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #ed0b70;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.housepro-table-heading h3 {
    margin: 0;
    color: #132b45;
    font-size: 32px;
    font-weight: 800;
}

.housepro-table-heading h3 strong {
    color: #ed0b70;
}


/* =========================================================
   TABLE
========================================================= */

.housepro-table-wrapper {
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(18, 74, 128, 0.10);
}

.housepro-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
}

.housepro-table thead th {
    padding: 22px 25px;
    background: #124a80;
    color: #ffffff;
    text-align: left;
    font-size: 14px;
}

.housepro-table thead th i {
    margin-right: 8px;
    color: #ed0b70;
    font-size: 18px;
}

.housepro-table tbody td {
    padding: 22px 25px;
    color: #5d6b7c;
    background: #ffffff;
    border-bottom: 1px solid #edf1f5;
    font-size: 14px;
    line-height: 1.7;
    transition: all 0.35s ease;
}

.housepro-table tbody tr:last-child td {
    border-bottom: none;
}

.housepro-table tbody tr:hover td {
    background: #f9fbfe;
}


/* =========================================================
   HOUSE NAME
========================================================= */

.housepro-name {
    display: flex;
    align-items: center;
    gap: 13px;
}

.housepro-name strong {
    color: #163653;
    font-size: 15px;
}


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

.housepro-house-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: #ffffff;
    transition: all 0.4s ease;
}

.housepro-house-icon i {
    font-size: 21px;
}

.housepro-charity {
    background: #ed0b70;
}

.housepro-honesty {
    background: #124a80;
}

.housepro-loyalty {
    background: #0b355c;
}

.housepro-humility {
    background: #65788c;
}

.housepro-table tbody tr:hover .housepro-house-icon {
    transform: rotate(-8deg) scale(1.08);
    box-shadow: 0 10px 25px rgba(18, 74, 128, 0.20);
}


/* =========================================================
   DARK SECTION
========================================================= */

.housepro-dark-section {
    background: #0b355c;
    color: #ffffff;
}


/* =========================================================
   DARK PATTERN
========================================================= */

.housepro-dark-pattern {
    position: absolute;
    width: 750px;
    height: 750px;
    left: -350px;
    bottom: -380px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    animation: houseproDarkRotate 35s linear infinite;
}

.housepro-dark-pattern::before {
    content: "";
    position: absolute;
    inset: 70px;
    border: 1px dashed rgba(255, 255, 255, 0.10);
    border-radius: 50%;
}

.housepro-dark-pattern::after {
    content: "";
    position: absolute;
    inset: 160px;
    border: 1px solid rgba(237, 11, 112, 0.13);
    border-radius: 50%;
}

@keyframes houseproDarkRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }

}


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

.housepro-dark-heading {
    max-width: 780px;
    margin: 0 auto 55px;
    text-align: center;
}

.housepro-dark-label {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.housepro-dark-label i {
    color: #ed0b70;
}

.housepro-dark-heading h2 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 44px;
    line-height: 1.2;
    font-weight: 800;
}

.housepro-dark-heading h2 span {
    color: #ed0b70;
}

.housepro-dark-heading p {
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    font-size: 16px;
    line-height: 1.85;
}


/* =========================================================
   DARK CARDS
========================================================= */

.housepro-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.housepro-dark-card {
    position: relative;
    padding: 32px 25px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
    overflow: hidden;
    transition: all 0.45s ease;
}

.housepro-dark-card::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    right: -60px;
    top: -60px;
    border-radius: 50%;
    background: rgba(237, 11, 112, 0.16);
    transition: all 0.6s ease;
}

.housepro-dark-card:hover {
    transform: translateY(-12px);
    border-color: rgba(237, 11, 112, 0.40);
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.22);
}

.housepro-dark-card:hover::before {
    width: 210px;
    height: 210px;
}

.housepro-dark-card>span {
    position: absolute;
    top: 25px;
    right: 25px;
    color: rgba(255, 255, 255, 0.25);
    font-size: 12px;
    font-weight: 800;
}


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

.housepro-dark-icon {
    position: relative;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    border-radius: 15px;
    background: #ed0b70;
    color: #ffffff;
    transition: all 0.45s ease;
}

.housepro-dark-icon i {
    font-size: 29px;
    transition: all 0.45s ease;
}

.housepro-dark-card:hover .housepro-dark-icon {
    transform: rotate(9deg) scale(1.08);
    box-shadow: 0 12px 30px rgba(237, 11, 112, 0.35);
}

.housepro-dark-card:hover .housepro-dark-icon i {
    transform: scale(1.2) rotate(-8deg);
}


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

.housepro-dark-card h3 {
    position: relative;
    z-index: 2;
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 19px;
}

.housepro-dark-card p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: rgba(255, 255, 255, 0.70);
    font-size: 13px;
    line-height: 1.8;
}


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

@media (max-width: 1199px) {

    .housepro-section,
    .housepro-dark-section {
        padding: 85px 0;
    }

    .housepro-intro-grid {
        gap: 45px;
    }

    .housepro-intro-content h2 {
        font-size: 42px;
    }

    .housepro-image-box {
        height: 540px;
    }

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

}


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

@media (max-width: 991px) {

    .housepro-section,
    .housepro-dark-section {
        padding: 75px 0;
    }

    .housepro-intro-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .housepro-intro-content {
        text-align: center;
    }

    .housepro-intro-content h2 {
        font-size: 40px;
    }

    .housepro-title-line {
        margin-left: auto;
        margin-right: auto;
    }

    .housepro-intro-content>p {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    .housepro-image-area {
        width: 100%;
        max-width: 650px;
        margin: 0 auto;
    }

    .housepro-image-box {
        height: 500px;
        transform: none;
    }

    .housepro-image-box:hover {
        transform: translateY(-8px);
    }

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

}


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

@media (max-width: 767px) {

    .housepro-section,
    .housepro-dark-section {
        padding: 60px 0;
    }

    .housepro-section .container,
    .housepro-dark-section .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .housepro-intro-grid {
        gap: 35px;
    }

    .housepro-label {
        padding: 8px 15px;
        font-size: 11px;
    }

    .housepro-label i {
        font-size: 19px;
    }

    .housepro-intro-content h2 {
        font-size: 34px;
    }

    .housepro-intro-content>p {
        font-size: 14px;
        line-height: 1.8;
    }

    .housepro-value-card {
        text-align: left;
        padding: 14px;
    }

    .housepro-value-icon {
        width: 46px;
        min-width: 46px;
        height: 46px;
    }

    .housepro-value-icon i {
        font-size: 21px;
    }

    .housepro-value-card h4 {
        font-size: 15px;
    }

    .housepro-value-card p {
        font-size: 12px;
    }

    .housepro-image-area {
        padding: 12px;
    }

    .housepro-image-box {
        height: 430px;
        border-radius: 20px;
    }

    .housepro-image-caption {
        left: 15px;
        right: 15px;
        bottom: 15px;
        padding: 16px;
    }

    .housepro-image-caption strong {
        font-size: 18px;
    }

    .housepro-table-heading {
        margin-top: 60px;
    }

    .housepro-table-heading h3 {
        font-size: 28px;
    }

    /* Mobile Table */

    .housepro-table-wrapper {
        overflow: visible;
        box-shadow: none;
    }

    .housepro-table {
        display: block;
        background: transparent;
    }

    .housepro-table thead {
        display: none;
    }

    .housepro-table tbody {
        display: grid;
        gap: 16px;
    }

    .housepro-table tbody tr {
        display: block;
        padding: 18px;
        border-radius: 16px;
        background: #ffffff;
        box-shadow: 0 10px 30px rgba(18, 74, 128, 0.08);
    }

    .housepro-table tbody td {
        display: block;
        padding: 8px 0;
        border: none;
        background: transparent;
    }

    .housepro-table tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 6px;
        color: #124a80;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .housepro-table tbody tr:hover td {
        background: transparent;
    }

    .housepro-table tbody tr:hover {
        transform: translateY(-5px);
    }

    .housepro-dark-heading {
        margin-bottom: 35px;
    }

    .housepro-dark-heading h2 {
        font-size: 34px;
    }

    .housepro-dark-heading p {
        font-size: 14px;
    }

    .housepro-cards {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .housepro-dark-card {
        text-align: center;
    }

    .housepro-dark-icon {
        margin-left: auto;
        margin-right: auto;
    }

}


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

@media (max-width: 480px) {

    .housepro-section,
    .housepro-dark-section {
        padding: 50px 0;
    }

    .housepro-intro-content h2 {
        font-size: 29px;
    }

    .housepro-intro-content>p {
        font-size: 13px;
    }

    .housepro-value-card {
        gap: 11px;
        padding: 13px;
    }

    .housepro-value-icon {
        width: 42px;
        min-width: 42px;
        height: 42px;
    }

    .housepro-value-icon i {
        font-size: 19px;
    }

    .housepro-value-card h4 {
        font-size: 14px;
    }

    .housepro-value-card p {
        font-size: 11.5px;
    }

    .housepro-image-box {
        height: 370px;
        border-radius: 17px;
    }

    .housepro-image-caption {
        padding: 13px;
    }

    .housepro-image-caption span {
        font-size: 9px;
    }

    .housepro-image-caption strong {
        font-size: 16px;
    }

    .housepro-table-heading h3 {
        font-size: 25px;
    }

    .housepro-table tbody tr {
        padding: 15px;
    }

    .housepro-name strong {
        font-size: 13px;
    }

    .housepro-house-icon {
        width: 43px;
        min-width: 43px;
        height: 43px;
    }

    .housepro-house-icon i {
        font-size: 19px;
    }

    .housepro-table tbody td {
        font-size: 12px;
    }

    .housepro-dark-heading h2 {
        font-size: 29px;
    }

    .housepro-dark-heading p {
        font-size: 13px;
    }

    .housepro-dark-card {
        padding: 25px 18px;
    }

    .housepro-dark-icon {
        width: 55px;
        height: 55px;
    }

    .housepro-dark-icon i {
        font-size: 25px;
    }

    .housepro-dark-card h3 {
        font-size: 18px;
    }

    .housepro-dark-card p {
        font-size: 12px;
    }

    .housepro-bg-pattern {
        width: 350px;
        height: 350px;
        right: -190px;
        top: -160px;
    }

    .housepro-dark-pattern {
        width: 400px;
        height: 400px;
        left: -200px;
        bottom: -190px;
    }

}


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

@media (max-width: 360px) {

    .housepro-section,
    .housepro-dark-section {
        padding: 45px 0;
    }

    .housepro-intro-content h2 {
        font-size: 26px;
    }

    .housepro-intro-content>p {
        font-size: 12px;
    }

    .housepro-label {
        font-size: 10px;
    }

    .housepro-label i {
        font-size: 17px;
    }

    .housepro-image-box {
        height: 330px;
    }

    .housepro-table-heading h3 {
        font-size: 23px;
    }

    .housepro-dark-heading h2 {
        font-size: 26px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .housepro-bg-pattern,
    .housepro-dark-pattern,
    .housepro-shape-one,
    .housepro-shape-two {
        animation: none;
    }

    .housepro-image-box,
    .housepro-image-box img,
    .housepro-image-light,
    .housepro-value-card,
    .housepro-value-icon,
    .housepro-house-icon,
    .housepro-dark-card,
    .housepro-dark-icon {
        transition: none;
    }

}

/* =========================================================
   CO-CURRICULAR ACTIVITIES
   PREMIUM SCHOOL DESIGN
   UNIQUE CLASS NAMES
========================================================= */


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

.ccapro-section,
.ccapro-dark-section {
    position: relative;
    padding: 60px 0;
    overflow: hidden;
    isolation: isolate;
}


/* =========================================================
   THEMIFY ICONS
========================================================= */

.ccapro-section i,
.ccapro-dark-section i {
    font-family: 'themify' !important;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    display: inline-block;
}


/* =========================================================
   LIGHT SECTION
========================================================= */

.ccapro-light {
    background: #f5f8fc;
}


/* =========================================================
   ROTATING BACKGROUND
========================================================= */

.ccapro-bg-pattern {
    position: absolute;
    width: 720px;
    height: 720px;
    right: -350px;
    top: -360px;
    border: 1px solid rgba(18, 74, 128, 0.08);
    border-radius: 50%;
    animation: ccaproRotate 32s linear infinite;
}

.ccapro-bg-pattern::before {
    content: "";
    position: absolute;
    inset: 70px;
    border: 1px dashed rgba(18, 74, 128, 0.12);
    border-radius: 50%;
}

.ccapro-bg-pattern::after {
    content: "";
    position: absolute;
    inset: 165px;
    border: 1px solid rgba(237, 11, 112, 0.10);
    border-radius: 50%;
}

@keyframes ccaproRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


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

.ccapro-heading {
    max-width: 1150px;
    margin: 0 auto 55px;
    text-align: center;
}

.ccapro-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    margin-bottom: 20px;
    border-radius: 50px;
    background: rgba(18, 74, 128, 0.08);
    color: #124a80;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    transition: all 0.35s ease;
}

.ccapro-label i {
    font-size: 22px;
    color: #ed0b70;
    transition: all 0.35s ease;
}

.ccapro-label:hover {
    color: #ffffff;
    background: #124a80;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(18, 74, 128, 0.15);
}

.ccapro-label:hover i {
    color: #ffffff;
    transform: scale(1.15) rotate(10deg);
}

.ccapro-heading h2 {
    margin: 0 0 18px;
    color: #132b45;
    font-size: 48px;
    line-height: 1.15;
    font-weight: 800;
}

.ccapro-heading h2 span {
    color: #ed0b70;
}

.ccapro-title-line {
    width: 75px;
    height: 4px;
    margin: 0 auto 25px;
    border-radius: 20px;
    background: #ed0b70;
}

.ccapro-heading>p {
    margin: 0;
    color: #68778a;
    font-size: 16px;
    line-height: 1.85;
}


/* =========================================================
   ACTIVITY GRID
========================================================= */

.ccapro-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


/* =========================================================
   ACTIVITY CARD
========================================================= */

.ccapro-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(18, 74, 128, 0.07);
    box-shadow: 0 12px 35px rgba(18, 74, 128, 0.07);
    transition: all 0.5s ease;
}

.ccapro-card:hover {
    transform: translateY(-12px);
    border-color: rgba(237, 11, 112, 0.22);
    box-shadow: 0 28px 60px rgba(18, 74, 128, 0.15);
}


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

.ccapro-image {
    position: relative;
    height: 300px;
    overflow: hidden;
    background: #0b355c;
}

.ccapro-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(1.05) contrast(1.03);
    transition:
        transform 0.9s ease,
        filter 0.9s ease;
}

.ccapro-card:hover .ccapro-image img {
    transform: scale(1.10);
    filter: saturate(1.25) contrast(1.08);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.ccapro-image-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg,
            rgba(11, 53, 92, 0.02) 20%,
            rgba(11, 53, 92, 0.72) 100%);
}


/* =========================================================
   MOVING LIGHT
========================================================= */

.ccapro-image-light {
    position: absolute;
    z-index: 2;
    width: 180px;
    height: 180px;
    left: -150px;
    top: -120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.30);
    filter: blur(40px);
    pointer-events: none;
    transition: all 1s ease;
}

.ccapro-card:hover .ccapro-image-light {
    left: 90%;
    top: 80%;
}


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

.ccapro-number {
    position: absolute;
    z-index: 4;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(11, 53, 92, 0.65);
    backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    transition: all 0.4s ease;
}

.ccapro-card:hover .ccapro-number {
    background: #ed0b70;
    border-color: #ed0b70;
    transform: rotate(360deg);
}


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

.ccapro-icon {
    position: absolute;
    z-index: 4;
    left: 20px;
    bottom: 18px;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: #ed0b70;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(237, 11, 112, 0.25);
    transition: all 0.45s ease;
}

.ccapro-icon i {
    font-size: 27px;
    transition: all 0.45s ease;
}

.ccapro-card:hover .ccapro-icon {
    transform: rotate(-8deg) scale(1.10);
    box-shadow: 0 15px 35px rgba(237, 11, 112, 0.38);
}

.ccapro-card:hover .ccapro-icon i {
    transform: scale(1.18) rotate(8deg);
}


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

.ccapro-content {
    padding: 25px 24px 28px;
}

.ccapro-small-title {
    display: block;
    margin-bottom: 7px;
    color: #ed0b70;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.ccapro-content h3 {
    margin: 0 0 12px;
    color: #163653;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 750;
    transition: color 0.35s ease;
}

.ccapro-card:hover .ccapro-content h3 {
    color: #124a80;
}

.ccapro-content p {
    margin: 0;
    color: #718096;
    font-size: 13px;
    line-height: 1.8;
}


/* =========================================================
   DARK SECTION
========================================================= */

.ccapro-dark-section {
    background: #0b355c;
}


/* =========================================================
   DARK ROTATING PATTERN
========================================================= */

.ccapro-dark-pattern {
    position: absolute;
    width: 760px;
    height: 760px;
    left: -350px;
    bottom: -420px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    animation: ccaproDarkRotate 35s linear infinite;
}

.ccapro-dark-pattern::before {
    content: "";
    position: absolute;
    inset: 70px;
    border: 1px dashed rgba(255, 255, 255, 0.10);
    border-radius: 50%;
}

.ccapro-dark-pattern::after {
    content: "";
    position: absolute;
    inset: 165px;
    border: 1px solid rgba(237, 11, 112, 0.13);
    border-radius: 50%;
}

@keyframes ccaproDarkRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }

}


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

.ccapro-dark-heading {
    max-width: 800px;
    margin: 0 auto 55px;
    text-align: center;
}

.ccapro-dark-label {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.ccapro-dark-label i {
    color: #ed0b70;
}

.ccapro-dark-heading h2 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 44px;
    line-height: 1.2;
    font-weight: 800;
}

.ccapro-dark-heading h2 span {
    color: #ed0b70;
}

.ccapro-dark-heading p {
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    font-size: 16px;
    line-height: 1.85;
}


/* =========================================================
   FEATURE GRID
========================================================= */

.ccapro-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}


/* =========================================================
   FEATURE CARD
========================================================= */

.ccapro-feature-card {
    position: relative;
    padding: 32px 25px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
    overflow: hidden;
    transition: all 0.45s ease;
}

.ccapro-feature-card::before {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    right: -65px;
    top: -65px;
    border-radius: 50%;
    background: rgba(237, 11, 112, 0.15);
    transition: all 0.6s ease;
}

.ccapro-feature-card:hover {
    transform: translateY(-12px);
    border-color: rgba(237, 11, 112, 0.38);
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.22);
}

.ccapro-feature-card:hover::before {
    width: 230px;
    height: 230px;
}


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

.ccapro-feature-icon {
    position: relative;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    border-radius: 15px;
    background: #ed0b70;
    color: #ffffff;
    transition: all 0.45s ease;
}

.ccapro-feature-icon i {
    font-size: 29px;
    transition: all 0.45s ease;
}

.ccapro-feature-card:hover .ccapro-feature-icon {
    transform: rotate(9deg) scale(1.08);
    box-shadow: 0 12px 30px rgba(237, 11, 112, 0.35);
}

.ccapro-feature-card:hover .ccapro-feature-icon i {
    transform: scale(1.2) rotate(-8deg);
}


/* =========================================================
   FEATURE TEXT
========================================================= */

.ccapro-feature-card h3 {
    position: relative;
    z-index: 2;
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 19px;
    line-height: 1.4;
}

.ccapro-feature-card p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: rgba(255, 255, 255, 0.70);
    font-size: 13px;
    line-height: 1.8;
}


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

@media (max-width: 1199px) {

    .ccapro-section,
    .ccapro-dark-section {
        padding: 85px 0;
    }

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

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

    .ccapro-heading h2 {
        font-size: 42px;
    }

}


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

@media (max-width: 991px) {

    .ccapro-section,
    .ccapro-dark-section {
        padding: 75px 0;
    }

    .ccapro-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .ccapro-image {
        height: 230px;
    }

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

}


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

@media (max-width: 767px) {

    .ccapro-section,
    .ccapro-dark-section {
        padding: 60px 0;
    }

    .ccapro-section .container,
    .ccapro-dark-section .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .ccapro-heading {
        margin-bottom: 35px;
    }

    .ccapro-label {
        padding: 8px 15px;
        font-size: 11px;
    }

    .ccapro-label i {
        font-size: 19px;
    }

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

    .ccapro-heading>p {
        font-size: 14px;
        line-height: 1.8;
    }

    .ccapro-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ccapro-image {
        height: 260px;
    }

    .ccapro-content {
        padding: 22px 20px 25px;
    }

    .ccapro-content h3 {
        font-size: 19px;
    }

    .ccapro-content p {
        font-size: 12.5px;
    }

    .ccapro-dark-heading {
        margin-bottom: 35px;
    }

    .ccapro-dark-heading h2 {
        font-size: 34px;
    }

    .ccapro-dark-heading p {
        font-size: 14px;
    }

    .ccapro-feature-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .ccapro-feature-card {
        text-align: center;
    }

    .ccapro-feature-icon {
        margin-left: auto;
        margin-right: auto;
    }

}


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

@media (max-width: 480px) {

    .ccapro-section,
    .ccapro-dark-section {
        padding: 50px 0;
    }

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

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

    .ccapro-image {
        height: 230px;
    }

    .ccapro-number {
        width: 38px;
        height: 38px;
        top: 14px;
        right: 14px;
        font-size: 11px;
    }

    .ccapro-icon {
        width: 52px;
        height: 52px;
        left: 15px;
        bottom: 15px;
    }

    .ccapro-icon i {
        font-size: 24px;
    }

    .ccapro-content {
        padding: 20px 17px 23px;
    }

    .ccapro-content h3 {
        font-size: 17px;
    }

    .ccapro-content p {
        font-size: 12px;
    }

    .ccapro-dark-heading h2 {
        font-size: 29px;
    }

    .ccapro-dark-heading p {
        font-size: 13px;
    }

    .ccapro-feature-card {
        padding: 25px 18px;
    }

    .ccapro-feature-icon {
        width: 55px;
        height: 55px;
    }

    .ccapro-feature-icon i {
        font-size: 25px;
    }

    .ccapro-feature-card h3 {
        font-size: 18px;
    }

    .ccapro-feature-card p {
        font-size: 12px;
    }

    .ccapro-bg-pattern {
        width: 350px;
        height: 350px;
        right: -190px;
        top: -160px;
    }

    .ccapro-dark-pattern {
        width: 400px;
        height: 400px;
        left: -200px;
        bottom: -190px;
    }

}


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

@media (max-width: 360px) {

    .ccapro-section,
    .ccapro-dark-section {
        padding: 45px 0;
    }

    .ccapro-heading h2 {
        font-size: 26px;
    }

    .ccapro-heading>p {
        font-size: 12px;
    }

    .ccapro-image {
        height: 210px;
    }

    .ccapro-content h3 {
        font-size: 16px;
    }

    .ccapro-content p {
        font-size: 11.5px;
    }

    .ccapro-dark-heading h2 {
        font-size: 26px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ccapro-bg-pattern,
    .ccapro-dark-pattern {
        animation: none;
    }

    .ccapro-card,
    .ccapro-card img,
    .ccapro-image-light,
    .ccapro-icon,
    .ccapro-number,
    .ccapro-feature-card,
    .ccapro-feature-icon {
        transition: none;
    }

}

/* =========================================================
   CLUBS, SERVICE & LEADERSHIP ORGANISATIONS
   PREMIUM SCHOOL WEBSITE CSS
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --avcslo-blue: #012b8f;
    --avcslo-dark: #081a45;
    --avcslo-pink: #ed0b70;

    --avcslo-light: #f5f8fd;
    --avcslo-white: #ffffff;

    --avcslo-heading: #17213c;
    --avcslo-text: #657187;
    --avcslo-muted: #788397;

    --avcslo-border: #e1e7f0;

}


/* =========================================================
   MAIN SECTION
========================================================= */

.avcslo-section {

    position: relative;

    width: 100%;

    padding: 60px 0;

    overflow: hidden;

    background: #f5f8fd;

    color: #17213c;

    isolation: isolate;

}


/* =========================================================
   BLUE GLOW
========================================================= */

.avcslo-section::before {

    content: "";

    position: absolute;

    width: 560px;
    height: 560px;

    top: -280px;
    right: -220px;

    border-radius: 50%;

    background:
        rgba(1, 43, 143, .045);

    pointer-events: none;

    animation:
        avcsloBlueGlow 10s ease-in-out infinite;

}


@keyframes avcsloBlueGlow {

    0%,
    100% {

        transform:
            translate(0, 0) scale(1);

    }

    50% {

        transform:
            translate(-25px, 25px) scale(1.1);

    }

}


/* =========================================================
   PINK GLOW
========================================================= */

.avcslo-section::after {

    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

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

    border-radius: 50%;

    background:
        rgba(237, 11, 112, .045);

    pointer-events: none;

    animation:
        avcsloPinkGlow 9s ease-in-out infinite;

}


@keyframes avcsloPinkGlow {

    0%,
    100% {

        transform:
            translate(0, 0) scale(1);

    }

    50% {

        transform:
            translate(25px, -20px) scale(1.1);

    }

}


/* =========================================================
   ROTATING BACKGROUND PATTERN
========================================================= */

.avcslo-pattern {

    position: absolute;

    width: 760px;
    height: 760px;

    top: -360px;
    left: -360px;

    border:
        1px solid rgba(1, 43, 143, .075);

    border-radius: 50%;

    pointer-events: none;

    z-index: 0;

    animation:
        avcsloPatternRotate 50s linear infinite;

}


.avcslo-pattern::before {

    content: "";

    position: absolute;

    inset: 85px;

    border:
        1px dashed rgba(237, 11, 112, .12);

    border-radius: 50%;

}


.avcslo-pattern::after {

    content: "";

    position: absolute;

    inset: 175px;

    border:
        1px solid rgba(1, 43, 143, .06);

    border-radius: 50%;

}


@keyframes avcsloPatternRotate {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


/* =========================================================
   FLOATING SHAPES
========================================================= */

.avcslo-floating {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: 1;

}


.avcslo-float-one {

    width: 180px;
    height: 180px;

    left: -90px;
    bottom: 10%;

    border:
        1px solid rgba(1, 43, 143, .07);

    animation:
        avcsloFloatOne 8s ease-in-out infinite;

}


.avcslo-float-two {

    width: 65px;
    height: 65px;

    left: 14%;
    bottom: 7%;

    background:
        rgba(237, 11, 112, .06);

    animation:
        avcsloFloatTwo 6s ease-in-out infinite;

}


@keyframes avcsloFloatOne {

    0%,
    100% {

        transform:
            translateY(0) rotate(0deg);

    }

    50% {

        transform:
            translateY(-25px) rotate(20deg);

    }

}


@keyframes avcsloFloatTwo {

    0%,
    100% {

        transform:
            translateY(0) rotate(0deg);

    }

    50% {

        transform:
            translateY(-20px) rotate(90deg);

    }

}


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

.avcslo-heading {

    position: relative;

    max-width: 1150px;

    margin:
        0 auto 40px;

    text-align: center;

    z-index: 5;

}


/* =========================================================
   EYEBROW
========================================================= */

.avcslo-eyebrow {

    display: inline-block;

    margin-bottom: 15px;

    color:
        #ed0b70;

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        3px;

    text-transform:
        uppercase;

}


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

.avcslo-heading h2 {

    margin: 0;

    color:
        #17213c;

    font-size:
        52px;

    font-weight:
        700;

    line-height:
        1.18;

    letter-spacing:
        -1px;

}


.avcslo-heading h2 span {



    color:
        #012b8f;

}


/* =========================================================
   DIVIDER
========================================================= */

.avcslo-divider {

    position: relative;

    width: 85px;
    height: 3px;

    margin:
        26px auto;

    background:
        #ed0b70;

}


.avcslo-divider::before,
.avcslo-divider::after {

    content: "";

    position: absolute;

    top: 50%;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background:
        #012b8f;

    transform:
        translateY(-50%);

}


.avcslo-divider::before {

    left:
        -7px;

}


.avcslo-divider::after {

    right:
        -7px;

}


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

.avcslo-heading p {

    max-width:
        820px;

    margin:
        0 auto;

    color:
        #657187;

    font-size:
        16px;

    line-height:
        1.95;

}


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

.avcslo-layout {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        .85fr 1.15fr;

    gap:
        70px;

    align-items:
        center;

    z-index:
        5;

}


/* =========================================================
   IMAGE AREA
========================================================= */

.avcslo-image-area {

    position:
        relative;

    padding:
        12px;

}


/* =========================================================
   IMAGE BOX
========================================================= */

.avcslo-image-box {

    position:
        relative;

    width:
        100%;

    height:
        680px;

    overflow:
        hidden;

    border-radius:
        28px;

    background:
        #ffffff;

    box-shadow:
        0 30px 75px rgba(1, 43, 143, .15);

    transition:
        box-shadow .5s ease;

}


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

.avcslo-image-box img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    filter:
        saturate(.88) contrast(1.04) brightness(.98);

    transition:
        transform 1s cubic-bezier(.2, .8, .2, 1),

        filter .7s ease;

}


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

.avcslo-image-area:hover .avcslo-image-box img {

    transform:
        scale(1.10);

    filter:
        saturate(1.18) contrast(1.06) brightness(1.05);

}


/* =========================================================
   IMAGE COLOUR
========================================================= */

.avcslo-image-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(1, 43, 143, .09);

    mix-blend-mode:
        multiply;

    z-index:
        2;

    pointer-events:
        none;

    transition:
        opacity .6s ease;

}


.avcslo-image-area:hover .avcslo-image-overlay {

    opacity:
        0;

}


/* =========================================================
   IMAGE LIGHTING
========================================================= */

.avcslo-image-light {

    position:
        absolute;

    width:
        32%;

    height:
        400%;

    top:
        -150%;

    left:
        -110%;

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

    transform:
        rotate(28deg);

    pointer-events:
        none;

    z-index:
        5;

}


.avcslo-image-area:hover .avcslo-image-light {

    animation:
        avcsloImageLight 1.25s ease forwards;

}


@keyframes avcsloImageLight {

    0% {

        left:
            -110%;

    }

    100% {

        left:
            165%;

    }

}


/* =========================================================
   IMAGE BORDER
========================================================= */

.avcslo-image-border {

    position:
        absolute;

    inset:
        12px;

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

    border-radius:
        21px;

    pointer-events:
        none;

    z-index:
        6;

}


/* =========================================================
   IMAGE SHADOW
========================================================= */

.avcslo-image-area:hover .avcslo-image-box {

    box-shadow:
        0 40px 90px rgba(1, 43, 143, .21);

}


/* =========================================================
   BADGE
========================================================= */

.avcslo-badge {

    position:
        absolute;

    right:
        -5px;

    bottom:
        50px;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    min-width:
        250px;

    padding:
        16px 20px;

    border-radius:
        16px;

    background:
        #012b8f;

    box-shadow:
        0 20px 50px rgba(1, 43, 143, .25);

    z-index:
        10;

    animation:
        avcsloBadgeFloat 4s ease-in-out infinite;

}


@keyframes avcsloBadgeFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-9px);

    }

}


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

.avcslo-badge-icon {

    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 48px;

    border-radius:
        13px;

    background:
        #ed0b70;

    color:
        #ffffff;

    font-family:
        'themify';

    font-size:
        18px;

    transition:
        transform .6s ease;

}


.avcslo-badge:hover .avcslo-badge-icon {

    transform:
        rotateY(180deg);

}


/* =========================================================
   BADGE TEXT
========================================================= */

.avcslo-badge-text strong {

    display:
        block;

    color:
        #ffffff;

    font-size:
        14px;

}


.avcslo-badge-text small {

    display:
        block;

    margin-top:
        4px;

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

    font-size:
        11px;

}


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

.avcslo-content {

    position:
        relative;

}


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

.avcslo-content-label {

    display:
        inline-block;

    margin-bottom:
        12px;

    color:
        #ed0b70;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        2.5px;

    text-transform:
        uppercase;

}


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

.avcslo-content h3 {

    margin:
        0 0 20px;

    color:
        #17213c;

    font-size:
        42px;

    font-weight:
        700;

    line-height:
        1.2;

}


.avcslo-content h3 span {




    color:
        #012b8f;

}


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

.avcslo-content>p {

    margin:
        0 0 30px;

    color:
        #657187;

    font-size:
        16px;

    line-height:
        1.9;

}


/* =========================================================
   CARD GRID
========================================================= */

.avcslo-grid {

    display:
        grid;

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

    gap:
        14px;

}


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

.avcslo-card {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    min-height:
        120px;

    padding:
        15px;

    overflow:
        hidden;

    border:
        1px solid #e1e7f0;

    border-radius:
        16px;

    background:
        #ffffff;

    box-shadow:
        0 8px 28px rgba(1, 43, 143, .045);

    transition:
        transform .45s ease,

        box-shadow .45s ease,

        border-color .45s ease;

}


/* =========================================================
   WIDE CARD
========================================================= */

.avcslo-wide-card {

    grid-column:
        1 / -1;

}


/* =========================================================
   CARD LIGHTING
========================================================= */

.avcslo-card::before {

    content:
        "";

    position:
        absolute;

    width:
        60%;

    height:
        180%;

    top:
        -40%;

    left:
        -130%;

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

    transform:
        rotate(25deg);

    pointer-events:
        none;

    z-index:
        1;

}


.avcslo-card:hover::before {

    animation:
        avcsloCardLight 1s ease forwards;

}


@keyframes avcsloCardLight {

    0% {

        left:
            -130%;

    }

    100% {

        left:
            155%;

    }

}


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

.avcslo-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(1, 43, 143, .18);

    box-shadow:
        0 22px 48px rgba(1, 43, 143, .11);

}


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

.avcslo-number {

    position:
        absolute;

    top:
        7px;

    right:
        10px;

    color:
        rgba(1, 43, 143, .055);

    font-size:
        28px;

    font-weight:
        800;

    line-height:
        1;

    transition:
        color .4s ease;

}


.avcslo-card:hover .avcslo-number {

    color:
        rgba(237, 11, 112, .13);

}


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

.avcslo-icon {

    position:
        relative;

    width:
        47px;

    height:
        47px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 47px;

    border-radius:
        13px;

    background:
        rgba(237, 11, 112, .08);

    color:
        #ed0b70;

    font-family:
        'themify';

    font-size:
        17px;

    z-index:
        5;

    transition:
        transform .6s ease,

        background .4s ease,

        color .4s ease,

        box-shadow .4s ease;

}


.avcslo-card:hover .avcslo-icon {

    transform:
        rotateY(180deg) scale(1.08);

    background:
        #012b8f;

    color:
        #ffffff;

    box-shadow:
        0 10px 25px rgba(1, 43, 143, .18);

}


/* =========================================================
   CARD CONTENT
========================================================= */

.avcslo-card-content {

    position:
        relative;

    z-index:
        5;

}


.avcslo-card-content h4 {

    margin:
        0 0 5px;

    color:
        #26334d;

    font-size:
        20px;

    font-weight:
        700;

    line-height:
        1.45;

}


.avcslo-card-content p {

    margin:
        0;

    color:
        #788397;

    font-size:
        14px;

    line-height:
        1.65;

}


/* =========================================================
   DARK VERSION
========================================================= */

.avcslo-dark {

    background:
        #081a45;

    color:
        #ffffff;

}


.avcslo-dark .avcslo-heading h2 {

    color:
        #ffffff;

}


.avcslo-dark .avcslo-heading h2 span {

    color:
        #ed0b70;

}


.avcslo-dark .avcslo-heading p {

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

}


.avcslo-dark .avcslo-content h3 {

    color:
        #ffffff;

}


.avcslo-dark .avcslo-content h3 span {

    color:
        #ed0b70;

}


.avcslo-dark .avcslo-content>p {

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

}


/* =========================================================
   DARK CARDS
========================================================= */

.avcslo-dark .avcslo-card {

    border-color:
        rgba(255, 255, 255, .10);

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

    box-shadow:
        none;

}


.avcslo-dark .avcslo-card:hover {

    background:
        rgba(237, 11, 112, .08);

    border-color:
        rgba(237, 11, 112, .35);

    box-shadow:
        0 25px 55px rgba(0, 0, 0, .22);

}


.avcslo-dark .avcslo-card-content h4 {

    color:
        #ffffff;

}


.avcslo-dark .avcslo-card-content p {

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

}


.avcslo-dark .avcslo-icon {

    background:
        rgba(237, 11, 112, .12);

    color:
        #ed0b70;

}


.avcslo-dark .avcslo-card:hover .avcslo-icon {

    background:
        #ed0b70;

    color:
        #ffffff;

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width:1400px) {

    .avcslo-section {

        padding:
            60px 0;

    }

    .avcslo-heading h2 {

        font-size:
            58px;

    }

    .avcslo-image-box {

        height:
            720px;

    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width:1199px) {

    .avcslo-section {

        padding:
            60px 0;

    }

    .avcslo-layout {

        gap:
            50px;

    }

    .avcslo-heading h2 {

        font-size:
            47px;

    }

    .avcslo-content h3 {

        font-size:
            37px;

    }

    .avcslo-image-box {

        height:
            600px;

    }

}


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

@media (max-width:991px) {

    .avcslo-section {

        padding:
            90px 0;

    }

    .avcslo-heading {

        margin-bottom:
            55px;

    }

    .avcslo-heading h2 {

        font-size:
            43px;

    }

    .avcslo-layout {

        grid-template-columns:
            1fr;

        gap:
            55px;

    }

    .avcslo-image-box {

        height:
            620px;

    }

    .avcslo-content h3 {

        font-size:
            37px;

    }

}


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

@media (max-width:767px) {

    .avcslo-section {

        padding:
            75px 0;

    }

    .avcslo-heading {

        margin-bottom:
            45px;

    }

    .avcslo-eyebrow {

        font-size:
            10px;

        letter-spacing:
            2px;

    }

    .avcslo-heading h2 {

        font-size:
            35px;

    }

    .avcslo-heading p {

        font-size:
            14px;

        line-height:
            1.85;

    }

    .avcslo-image-box {

        height:
            500px;

        border-radius:
            22px;

    }

    .avcslo-content h3 {

        font-size:
            31px;

    }

    .avcslo-content>p {

        font-size:
            14px;

    }

}


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

@media (max-width:575px) {

    .avcslo-section {

        padding:
            65px 0;

    }

    .avcslo-heading h2 {

        font-size:
            31px;

    }

    .avcslo-content h3 {

        font-size:
            28px;

    }

    .avcslo-image-box {

        height:
            460px;

    }

    .avcslo-grid {

        grid-template-columns:
            1fr;

    }

    .avcslo-wide-card {

        grid-column:
            auto;

    }

}


/* =========================================================
   480PX
========================================================= */

@media (max-width:480px) {

    .avcslo-section {

        padding:
            60px 0;

    }

    .avcslo-heading h2 {

        font-size:
            29px;

    }

    .avcslo-content h3 {

        font-size:
            26px;

    }

    .avcslo-image-area {

        padding:
            7px;

    }

    .avcslo-image-box {

        height:
            420px;

        border-radius:
            18px;

    }

    .avcslo-badge {

        right:
            0;

        bottom:
            25px;

        min-width:
            210px;

        padding:
            12px 14px;

    }

    .avcslo-badge-icon {

        width:
            40px;

        height:
            40px;

        flex-basis:
            40px;

    }

}


/* =========================================================
   360PX
========================================================= */

@media (max-width:360px) {

    .avcslo-heading h2 {

        font-size:
            27px;

    }

    .avcslo-content h3 {

        font-size:
            24px;

    }

    .avcslo-image-box {

        height:
            380px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .avcslo-section *,
    .avcslo-section::before,
    .avcslo-section::after {

        animation:
            none !important;

        transition:
            none !important;

    }

}

/* =========================================================
   SPORTS PROGRAMME
   PREMIUM COMPLETE CSS
========================================================= */

:root {

    --avsp-blue: #012b8f;
    --avsp-dark: #081a45;
    --avsp-pink: #ed0b70;

    --avsp-light: #f5f8fd;
    --avsp-white: #ffffff;

    --avsp-heading: #17213c;
    --avsp-text: #657187;
    --avsp-muted: #788397;

    --avsp-border: #e1e7f0;

}


/* =========================================================
   MAIN SECTION
========================================================= */

.avsp-sports-section {

    position: relative;

    width: 100%;

    padding: 60px 0;

    overflow: hidden;

    background: #f5f8fd;

    color: #17213c;

    isolation: isolate;

}


/* =========================================================
   BLUE GLOW
========================================================= */

.avsp-sports-section::before {

    content: "";

    position: absolute;

    width: 560px;
    height: 560px;

    top: -280px;
    right: -220px;

    border-radius: 50%;

    background:
        rgba(1, 43, 143, .045);

    pointer-events: none;

    animation:
        avspBlueGlow 10s ease-in-out infinite;

}


@keyframes avspBlueGlow {

    0%,
    100% {

        transform:
            translate(0, 0) scale(1);

    }

    50% {

        transform:
            translate(-25px, 25px) scale(1.1);

    }

}


/* =========================================================
   PINK GLOW
========================================================= */

.avsp-sports-section::after {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -210px;
    bottom: -210px;

    border-radius: 50%;

    background:
        rgba(237, 11, 112, .045);

    pointer-events: none;

    animation:
        avspPinkGlow 9s ease-in-out infinite;

}


@keyframes avspPinkGlow {

    0%,
    100% {

        transform:
            translate(0, 0) scale(1);

    }

    50% {

        transform:
            translate(25px, -20px) scale(1.1);

    }

}


/* =========================================================
   ROTATING BACKGROUND PATTERN
========================================================= */

.avsp-bg-pattern {

    position: absolute;

    width: 760px;
    height: 760px;

    top: -360px;
    left: -360px;

    border:
        1px solid rgba(1, 43, 143, .075);

    border-radius: 50%;

    pointer-events: none;

    z-index: 0;

    animation:
        avspPatternRotate 50s linear infinite;

}


.avsp-bg-pattern::before {

    content: "";

    position: absolute;

    inset: 85px;

    border:
        1px dashed rgba(237, 11, 112, .12);

    border-radius: 50%;

}


.avsp-bg-pattern::after {

    content: "";

    position: absolute;

    inset: 175px;

    border:
        1px solid rgba(1, 43, 143, .06);

    border-radius: 50%;

}


@keyframes avspPatternRotate {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


/* =========================================================
   FLOATING SHAPES
========================================================= */

.avsp-floating {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: 1;

}


.avsp-floating-one {

    width: 190px;
    height: 190px;

    left: -95px;
    bottom: 12%;

    border:
        1px solid rgba(1, 43, 143, .07);

    animation:
        avspFloatOne 8s ease-in-out infinite;

}


.avsp-floating-two {

    width: 70px;
    height: 70px;

    left: 15%;
    bottom: 7%;

    background:
        rgba(237, 11, 112, .06);

    animation:
        avspFloatTwo 6s ease-in-out infinite;

}


@keyframes avspFloatOne {

    0%,
    100% {

        transform:
            translateY(0) rotate(0deg);

    }

    50% {

        transform:
            translateY(-25px) rotate(20deg);

    }

}


@keyframes avspFloatTwo {

    0%,
    100% {

        transform:
            translateY(0) rotate(0deg);

    }

    50% {

        transform:
            translateY(-20px) rotate(90deg);

    }

}


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

.avsp-section-heading {

    position: relative;

    max-width: 1150px;

    margin:
        0 auto 70px;

    text-align: center;

    z-index: 5;

}


.avsp-eyebrow {

    display: inline-block;

    margin-bottom: 15px;

    color:
        #ed0b70;

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        3px;

    text-transform:
        uppercase;

}


.avsp-section-heading h2 {

    margin: 0;

    color:
        #17213c;

    font-size:
        54px;

    font-weight:
        700;

    line-height:
        1.18;

    letter-spacing:
        -1px;

}


.avsp-section-heading h2 span {



    color:
        #012b8f;

}


/* =========================================================
   DIVIDER
========================================================= */

.avsp-divider {

    position: relative;

    width: 85px;
    height: 3px;

    margin:
        26px auto;

    background:
        #ed0b70;

}


.avsp-divider::before,
.avsp-divider::after {

    content: "";

    position: absolute;

    top: 50%;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background:
        #012b8f;

    transform:
        translateY(-50%);

}


.avsp-divider::before {

    left:
        -7px;

}


.avsp-divider::after {

    right:
        -7px;

}


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

.avsp-section-heading p {

    max-width:
        820px;

    margin:
        0 auto;

    color:
        #657187;

    font-size:
        16px;

    line-height:
        1.95;

}


/* =========================================================
   MAIN GRID
========================================================= */

.avsp-main-grid {

    position: relative;

    display: grid;

    grid-template-columns:
        .85fr 1.15fr;

    gap:
        70px;

    align-items:
        center;

    z-index:
        5;

}


/* =========================================================
   IMAGE AREA
========================================================= */

.avsp-image-area {

    position:
        relative;

    padding:
        12px;

}


/* =========================================================
   IMAGE BOX
========================================================= */

.avsp-image-box {

    position:
        relative;

    width:
        100%;

    height:
        680px;

    overflow:
        hidden;

    border-radius:
        28px;

    background:
        #ffffff;

    box-shadow:
        0 30px 75px rgba(1, 43, 143, .15);

    transition:
        box-shadow .5s ease;

}


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

.avsp-image-box img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    object-position:
        center;

    filter:
        saturate(.88) contrast(1.04) brightness(.98);

    transition:
        transform 1s cubic-bezier(.2, .8, .2, 1),

        filter .7s ease;

}


.avsp-image-area:hover .avsp-image-box img {

    transform:
        scale(1.10);

    filter:
        saturate(1.18) contrast(1.06) brightness(1.05);

}


/* =========================================================
   IMAGE COLOUR
========================================================= */

.avsp-image-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(1, 43, 143, .09);

    mix-blend-mode:
        multiply;

    z-index:
        2;

    pointer-events:
        none;

    transition:
        opacity .6s ease;

}


.avsp-image-area:hover .avsp-image-overlay {

    opacity:
        0;

}


/* =========================================================
   IMAGE LIGHTING
========================================================= */

.avsp-image-light {

    position:
        absolute;

    width:
        32%;

    height:
        400%;

    top:
        -150%;

    left:
        -110%;

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

    transform:
        rotate(28deg);

    pointer-events:
        none;

    z-index:
        5;

}


.avsp-image-area:hover .avsp-image-light {

    animation:
        avspImageLight 1.25s ease forwards;

}


@keyframes avspImageLight {

    0% {

        left:
            -110%;

    }

    100% {

        left:
            165%;

    }

}


/* =========================================================
   IMAGE BORDER
========================================================= */

.avsp-image-border {

    position:
        absolute;

    inset:
        12px;

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

    border-radius:
        21px;

    pointer-events:
        none;

    z-index:
        6;

}


/* =========================================================
   IMAGE SHADOW HOVER
========================================================= */

.avsp-image-area:hover .avsp-image-box {

    box-shadow:
        0 40px 90px rgba(1, 43, 143, .21);

}


/* =========================================================
   SPORTS BADGE
========================================================= */

.avsp-sports-badge {

    position:
        absolute;

    right:
        -5px;

    bottom:
        50px;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    min-width:
        250px;

    padding:
        16px 20px;

    border-radius:
        16px;

    background:
        #012b8f;

    box-shadow:
        0 20px 50px rgba(1, 43, 143, .25);

    z-index:
        10;

    animation:
        avspBadgeFloat 4s ease-in-out infinite;

}


@keyframes avspBadgeFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-9px);

    }

}


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

.avsp-badge-icon {

    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 48px;

    border-radius:
        13px;

    background:
        #ed0b70;

    color:
        #ffffff;

    font-family:
        'themify';

    font-size:
        18px;

    transition:
        transform .6s ease;

}


.avsp-sports-badge:hover .avsp-badge-icon {

    transform:
        rotateY(180deg);

}


.avsp-badge-text strong {

    display:
        block;

    color:
        #ffffff;

    font-size:
        14px;

}


.avsp-badge-text small {

    display:
        block;

    margin-top:
        4px;

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

    font-size:
        11px;

}


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

.avsp-content {

    position:
        relative;

}


.avsp-content-label {

    display:
        inline-block;

    margin-bottom:
        12px;

    color:
        #ed0b70;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        2.5px;

    text-transform:
        uppercase;

}


.avsp-content h3 {

    margin:
        0 0 20px;

    color:
        #17213c;

    font-size:
        42px;

    font-weight:
        700;

    line-height:
        1.2;

}


.avsp-content h3 span {




    color:
        #012b8f;

}


.avsp-content>p {

    margin:
        0 0 30px;

    color:
        #657187;

    font-size:
        16px;

    line-height:
        1.9;

}


/* =========================================================
   SPORTS GRID
========================================================= */

.avsp-sports-grid {

    display:
        grid;

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

    gap:
        14px;

}


/* =========================================================
   SPORT CARD
========================================================= */

.avsp-sport-card {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    min-height:
        105px;

    padding:
        15px;

    overflow:
        hidden;

    border:
        1px solid #e1e7f0;

    border-radius:
        16px;

    background:
        #ffffff;

    box-shadow:
        0 8px 28px rgba(1, 43, 143, .045);

    transition:
        transform .45s ease,

        box-shadow .45s ease,

        border-color .45s ease;

}


/* =========================================================
   CARD LIGHTING
========================================================= */

.avsp-sport-card::before {

    content:
        "";

    position:
        absolute;

    width:
        60%;

    height:
        180%;

    top:
        -40%;

    left:
        -130%;

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

    transform:
        rotate(25deg);

    pointer-events:
        none;

    z-index:
        1;

}


.avsp-sport-card:hover::before {

    animation:
        avspCardLight 1s ease forwards;

}


@keyframes avspCardLight {

    0% {

        left:
            -130%;

    }

    100% {

        left:
            155%;

    }

}


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

.avsp-sport-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(1, 43, 143, .18);

    box-shadow:
        0 22px 48px rgba(1, 43, 143, .11);

}


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

.avsp-sport-number {

    position:
        absolute;

    top:
        7px;

    right:
        10px;

    color:
        rgba(1, 43, 143, .055);

    font-size:
        28px;

    font-weight:
        800;

    line-height:
        1;

    transition:
        color .4s ease;

}


.avsp-sport-card:hover .avsp-sport-number {

    color:
        rgba(237, 11, 112, .13);

}


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

.avsp-sport-icon {

    position:
        relative;

    width:
        46px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 46px;

    border-radius:
        13px;

    background:
        rgba(237, 11, 112, .08);

    color:
        #ed0b70;

    font-family:
        'themify';

    font-size:
        17px;

    z-index:
        5;

    transition:
        transform .6s ease,

        background .4s ease,

        color .4s ease,

        box-shadow .4s ease;

}


.avsp-sport-card:hover .avsp-sport-icon {

    transform:
        rotateY(180deg) scale(1.08);

    background:
        #012b8f;

    color:
        #ffffff;

    box-shadow:
        0 10px 25px rgba(1, 43, 143, .18);

}


/* =========================================================
   SPORT CONTENT
========================================================= */

.avsp-sport-info {

    position:
        relative;

    z-index:
        5;

}


.avsp-sport-info h4 {

    margin:
        0 0 5px;

    color:
        #26334d;

    font-size:
        16px;

    font-weight:
        700;

    line-height:
        1.4;

}


.avsp-sport-info p {

    margin:
        0;

    color:
        #788397;

    font-size:
        13px;

    line-height:
        1.55;

}


/* =========================================================
   DARK ALTERNATE VERSION
========================================================= */

.avsp-sports-dark {

    background:
        #081a45;

    color:
        #ffffff;

}


.avsp-sports-dark .avsp-section-heading h2 {

    color:
        #ffffff;

}


.avsp-sports-dark .avsp-section-heading h2 span {

    color:
        #ed0b70;

}


.avsp-sports-dark .avsp-section-heading p {

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

}


.avsp-sports-dark .avsp-content h3 {

    color:
        #ffffff;

}


.avsp-sports-dark .avsp-content h3 span {

    color:
        #ed0b70;

}


.avsp-sports-dark .avsp-content>p {

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

}


/* =========================================================
   DARK CARDS
========================================================= */

.avsp-sports-dark .avsp-sport-card {

    border-color:
        rgba(255, 255, 255, .10);

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

    box-shadow:
        none;

}


.avsp-sports-dark .avsp-sport-card:hover {

    background:
        rgba(237, 11, 112, .08);

    border-color:
        rgba(237, 11, 112, .35);

    box-shadow:
        0 25px 55px rgba(0, 0, 0, .22);

}


.avsp-sports-dark .avsp-sport-info h4 {

    color:
        #ffffff;

}


.avsp-sports-dark .avsp-sport-info p {

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

}


.avsp-sports-dark .avsp-sport-icon {

    background:
        rgba(237, 11, 112, .12);

    color:
        #ed0b70;

}


.avsp-sports-dark .avsp-sport-card:hover .avsp-sport-icon {

    background:
        #ed0b70;

    color:
        #ffffff;

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width:1400px) {

    .avsp-sports-section {

        padding: 60px 0;

    }

    .avsp-section-heading h2 {

        font-size:
            58px;

    }

    .avsp-image-box {

        height:
            720px;

    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width:1199px) {

    .avsp-sports-section {

        padding:
            105px 0;

    }

    .avsp-main-grid {

        gap:
            50px;

    }

    .avsp-section-heading h2 {

        font-size:
            47px;

    }

    .avsp-content h3 {

        font-size:
            37px;

    }

    .avsp-image-box {

        height:
            600px;

    }

}


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

@media (max-width:991px) {

    .avsp-sports-section {

        padding:
            90px 0;

    }

    .avsp-section-heading {

        margin-bottom:
            55px;

    }

    .avsp-section-heading h2 {

        font-size:
            43px;

    }

    .avsp-main-grid {

        grid-template-columns:
            1fr;

        gap:
            55px;

    }

    .avsp-image-box {

        height:
            620px;

    }

    .avsp-content h3 {

        font-size:
            37px;

    }

}


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

@media (max-width:767px) {

    .avsp-sports-section {

        padding:
            75px 0;

    }

    .avsp-section-heading {

        margin-bottom:
            45px;

    }

    .avsp-eyebrow {

        font-size:
            10px;

        letter-spacing:
            2px;

    }

    .avsp-section-heading h2 {

        font-size:
            35px;

    }

    .avsp-section-heading p {

        font-size:
            14px;

        line-height:
            1.85;

    }

    .avsp-image-box {

        height:
            500px;

        border-radius:
            22px;

    }

    .avsp-content h3 {

        font-size:
            31px;

    }

    .avsp-content>p {

        font-size:
            14px;

    }

    .avsp-sports-grid {

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

    }

}


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

@media (max-width:575px) {

    .avsp-sports-section {

        padding:
            65px 0;

    }

    .avsp-section-heading h2 {

        font-size:
            31px;

    }

    .avsp-content h3 {

        font-size:
            28px;

    }

    .avsp-image-box {

        height:
            460px;

    }

    .avsp-sports-grid {

        grid-template-columns:
            1fr;

    }

}


/* =========================================================
   480PX
========================================================= */

@media (max-width:480px) {

    .avsp-sports-section {

        padding:
            60px 0;

    }

    .avsp-section-heading h2 {

        font-size:
            29px;

    }

    .avsp-content h3 {

        font-size:
            26px;

    }

    .avsp-image-area {

        padding:
            7px;

    }

    .avsp-image-box {

        height:
            420px;

        border-radius:
            18px;

    }

    .avsp-sports-badge {

        right:
            0;

        bottom:
            25px;

        min-width:
            210px;

        padding:
            12px 14px;

    }

    .avsp-badge-icon {

        width:
            40px;

        height:
            40px;

        flex-basis:
            40px;

    }

}


/* =========================================================
   360PX
========================================================= */

@media (max-width:360px) {

    .avsp-section-heading h2 {

        font-size:
            27px;

    }

    .avsp-content h3 {

        font-size:
            24px;

    }

    .avsp-image-box {

        height:
            380px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .avsp-sports-section *,
    .avsp-sports-section::before,
    .avsp-sports-section::after {

        animation:
            none !important;

        transition:
            none !important;

    }

}

/* =========================================================
   SPORTS ACHIEVEMENTS ARCHIVE
   2022–23
========================================================= */

:root {

    --avsa-blue: #012b8f;
    --avsa-dark: #081a45;
    --avsa-pink: #ed0b70;

    --avsa-light: #f5f8fd;
    --avsa-white: #ffffff;

    --avsa-heading: #17213c;
    --avsa-text: #657187;
    --avsa-muted: #788397;

    --avsa-border: #e1e7f0;

}


/* =========================================================
   MAIN SECTION
========================================================= */

.avsa-archive-section {

    position: relative;

    width: 100%;

    padding: 60px 0;

    overflow: hidden;

    background: #f5f8fd;

    color: #17213c;

    isolation: isolate;

}


/* =========================================================
   BACKGROUND GLOW
========================================================= */

.avsa-archive-section::before {

    content: "";

    position: absolute;

    width: 550px;
    height: 550px;

    top: -270px;
    right: -220px;

    border-radius: 50%;

    background:
        rgba(1, 43, 143, .045);

    pointer-events: none;

    animation:
        avsaBlueGlow 10s ease-in-out infinite;

}


@keyframes avsaBlueGlow {

    0%,
    100% {

        transform:
            translate(0, 0) scale(1);

    }

    50% {

        transform:
            translate(-25px, 25px) scale(1.1);

    }

}


/* =========================================================
   PINK GLOW
========================================================= */

.avsa-archive-section::after {

    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

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

    border-radius: 50%;

    background:
        rgba(237, 11, 112, .045);

    pointer-events: none;

    animation:
        avsaPinkGlow 9s ease-in-out infinite;

}


@keyframes avsaPinkGlow {

    0%,
    100% {

        transform:
            translate(0, 0) scale(1);

    }

    50% {

        transform:
            translate(25px, -20px) scale(1.1);

    }

}


/* =========================================================
   ROTATING BACKGROUND PATTERN
========================================================= */

.avsa-bg-pattern {

    position: absolute;

    width: 760px;
    height: 760px;

    top: -360px;
    left: -360px;

    border:
        1px solid rgba(1, 43, 143, .075);

    border-radius: 50%;

    pointer-events: none;

    z-index: 0;

    animation:
        avsaPatternRotate 50s linear infinite;

}


.avsa-bg-pattern::before {

    content: "";

    position: absolute;

    inset: 85px;

    border:
        1px dashed rgba(237, 11, 112, .12);

    border-radius: 50%;

}


.avsa-bg-pattern::after {

    content: "";

    position: absolute;

    inset: 175px;

    border:
        1px solid rgba(1, 43, 143, .06);

    border-radius: 50%;

}


@keyframes avsaPatternRotate {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


/* =========================================================
   FLOATING DECORATIONS
========================================================= */

.avsa-floating {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: 1;

}


.avsa-floating-one {

    width: 180px;
    height: 180px;

    left: -90px;
    bottom: 10%;

    border:
        1px solid rgba(1, 43, 143, .07);

    animation:
        avsaFloatOne 8s ease-in-out infinite;

}


.avsa-floating-two {

    width: 65px;
    height: 65px;

    right: 12%;
    bottom: 6%;

    background:
        rgba(237, 11, 112, .06);

    animation:
        avsaFloatTwo 6s ease-in-out infinite;

}


@keyframes avsaFloatOne {

    0%,
    100% {

        transform:
            translateY(0) rotate(0deg);

    }

    50% {

        transform:
            translateY(-25px) rotate(20deg);

    }

}


@keyframes avsaFloatTwo {

    0%,
    100% {

        transform:
            translateY(0) rotate(0deg);

    }

    50% {

        transform:
            translateY(-20px) rotate(90deg);

    }

}


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

.avsa-heading {

    position: relative;

    max-width: 1150px;

    margin:
        0 auto 45px;

    text-align: center;

    z-index: 5;

}


.avsa-eyebrow {

    display: inline-block;

    margin-bottom: 13px;

    color:
        #ed0b70;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        3px;

    text-transform:
        uppercase;

}


.avsa-heading h2 {

    margin: 0;

    color:
        #17213c;

    font-size:
        50px;

    font-weight:
        700;

    line-height:
        1.2;

}


.avsa-heading h2 span {



    color:
        #012b8f;

}


/* =========================================================
   DIVIDER
========================================================= */

.avsa-divider {

    position: relative;

    width: 80px;
    height: 3px;

    margin:
        23px auto;

    background:
        #ed0b70;

}


.avsa-divider::before,
.avsa-divider::after {

    content: "";

    position: absolute;

    top: 50%;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background:
        #012b8f;

    transform:
        translateY(-50%);

}


.avsa-divider::before {

    left:
        -6px;

}


.avsa-divider::after {

    right:
        -6px;

}


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

.avsa-heading p {

    max-width:
        780px;

    margin:
        0 auto;

    color:
        #657187;

    font-size:
        15px;

    line-height:
        1.85;

}


/* =========================================================
   ARCHIVE NOTE
========================================================= */

.avsa-note {

    position: relative;

    display: flex;

    align-items: center;

    gap: 18px;

    max-width:
        1000px;

    margin:
        0 auto 35px;

    padding:
        22px 25px;

    border:
        1px solid rgba(237, 11, 112, .15);

    border-left:
        4px solid #ed0b70;

    border-radius:
        16px;

    background:
        #ffffff;

    box-shadow:
        0 12px 35px rgba(1, 43, 143, .06);

    z-index:
        5;

    transition:
        transform .4s ease,

        box-shadow .4s ease;

}


.avsa-note:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 20px 45px rgba(1, 43, 143, .10);

}


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

.avsa-note-icon {

    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 48px;

    border-radius:
        13px;

    background:
        rgba(237, 11, 112, .09);

    color:
        #ed0b70;

    font-family:
        'themify';

    font-size:
        18px;

}


/* =========================================================
   NOTE CONTENT
========================================================= */

.avsa-note-content h4 {

    margin:
        0 0 5px;

    color:
        #17213c;

    font-size:
        15px;

    font-weight:
        700;

}


.avsa-note-content p {

    margin:
        0;

    color:
        #788397;

    font-size:
        12px;

    line-height:
        1.7;

}


/* =========================================================
   ACHIEVEMENT GRID
========================================================= */

.avsa-achievement-grid {

    position:
        relative;

    display:
        grid;

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

    gap:
        18px;

    z-index:
        5;

}


/* =========================================================
   ACHIEVEMENT CARD
========================================================= */

.avsa-achievement-card {

    position:
        relative;

    min-height:
        255px;

    padding:
        25px;

    overflow:
        hidden;

    border:
        1px solid #e1e7f0;

    border-radius:
        20px;

    box-shadow:
        0 10px 32px rgba(1, 43, 143, .045);

    transition:
        transform .45s ease,

        box-shadow .45s ease,

        border-color .45s ease;

}

.avsa-achievement-grid .avsa-achievement-card:nth-child(1) {
    background-color: #eaf2ff;
    border-color: #c9dcff;
}

.avsa-achievement-grid .avsa-achievement-card:nth-child(2) {
    background-color: #ffedf5;
    border-color: #ffd0e4;
}

.avsa-achievement-grid .avsa-achievement-card:nth-child(3) {
    background-color: #eaf9f1;
    border-color: #c9ecd9;
}

.avsa-achievement-grid .avsa-achievement-card:nth-child(4) {
    background-color: #fff6df;
    border-color: #f2dfae;
}

.avsa-achievement-grid .avsa-achievement-card:nth-child(5) {
    background-color: #f0eeff;
    border-color: #d8d2ff;
}

.avsa-achievement-grid .avsa-achievement-card:nth-child(6) {
    background-color: #e8f8fc;
    border-color: #c6eaf2;
}

.avsa-achievement-grid .avsa-achievement-card:nth-child(7) {
    background-color: #fff0e9;
    border-color: #f4d5c7;
}

.avsa-achievement-grid .avsa-achievement-card:nth-child(8) {
    background-color: #eaf5ff;
    border-color: #cce4fa;
}

.avsa-achievement-grid .avsa-achievement-card {
    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease,
        background-color .45s ease;
}

.avsa-achievement-grid .avsa-achievement-card:hover {
    transform: translateY(-9px) scale(1.015);

    box-shadow:
        0 25px 55px rgba(1, 43, 143, 0.15);
}


/* =========================================================
   CARD LIGHTING
========================================================= */

.avsa-achievement-card::before {

    content:
        "";

    position:
        absolute;

    width:
        55%;

    height:
        180%;

    top:
        -40%;

    left:
        -130%;

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

    transform:
        rotate(25deg);

    pointer-events:
        none;

    z-index:
        1;

}


.avsa-achievement-card:hover::before {

    animation:
        avsaCardLight 1s ease forwards;

}


@keyframes avsaCardLight {

    0% {

        left:
            -130%;

    }

    100% {

        left:
            155%;

    }

}


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

.avsa-achievement-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(1, 43, 143, .18);

    box-shadow:
        0 25px 55px rgba(1, 43, 143, .11);

}


/* =========================================================
   CARD TOP
========================================================= */

.avsa-card-top {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        18px;

    z-index:
        5;

}


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

.avsa-card-number {

    color:
        rgba(1, 43, 143, .10);

    font-size:
        28px;

    font-weight:
        800;

    line-height:
        1;

}


/* =========================================================
   LEVEL
========================================================= */

.avsa-level {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        28px;

    padding:
        5px 11px;

    border-radius:
        30px;

    background:
        rgba(1, 43, 143, .07);

    color:
        #012b8f;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .8px;

    text-transform:
        uppercase;

}


.avsa-state-level {

    background:
        rgba(237, 11, 112, .08);

    color:
        #ed0b70;

}


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

.avsa-card-icon {

    margin-left:
        auto;

    width:
        45px;

    height:
        45px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        13px;

    background:
        rgba(237, 11, 112, .08);

    color:
        #ed0b70;

    font-family:
        'themify';

    font-size:
        17px;

    transition:
        transform .6s ease,

        background .4s ease,

        color .4s ease,

        box-shadow .4s ease;

}


.avsa-achievement-card:hover .avsa-card-icon {

    transform:
        rotateY(180deg) scale(1.08);

    background:
        #012b8f;

    color:
        #ffffff;

    box-shadow:
        0 10px 25px rgba(1, 43, 143, .18);

}


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

.avsa-achievement-card h3 {

    position:
        relative;

    margin:
        0 0 12px;

    color:
        #17213c;

    font-size:
        23px;

    font-weight:
        700;

    line-height:
        1.4;

    z-index:
        5;

}


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

.avsa-achievement-card p {

    position:
        relative;

    margin:
        0;

    color:
        #657187;

    font-size:
        14px;

    line-height:
        1.8;

    z-index:
        5;

}


/* =========================================================
   STATE CARD
========================================================= */

.avsa-state-card {

    border-color:
        rgba(237, 11, 112, .18);

}


.avsa-state-card:hover {

    border-color:
        rgba(237, 11, 112, .40);

}


/* =========================================================
   DARK ALTERNATE VERSION
========================================================= */

.avsa-archive-dark {

    background:
        #081a45;

    color:
        #ffffff;

}


.avsa-archive-dark .avsa-heading h2 {

    color:
        #ffffff;

}


.avsa-archive-dark .avsa-heading h2 span {

    color:
        #ed0b70;

}


.avsa-archive-dark .avsa-heading p {

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

}


.avsa-archive-dark .avsa-note {

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

    border-color:
        rgba(255, 255, 255, .10);

    border-left-color:
        #ed0b70;

}


.avsa-archive-dark .avsa-note-content h4 {

    color:
        #ffffff;

}


.avsa-archive-dark .avsa-note-content p {

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

}


.avsa-archive-dark .avsa-achievement-card {

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

    border-color:
        rgba(255, 255, 255, .10);

    box-shadow:
        none;

}


.avsa-archive-dark .avsa-achievement-card:hover {

    background:
        rgba(237, 11, 112, .07);

    border-color:
        rgba(237, 11, 112, .35);

}


.avsa-archive-dark .avsa-achievement-card h3 {

    color:
        #ffffff;

}


.avsa-archive-dark .avsa-achievement-card p {

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

}


.avsa-archive-dark .avsa-level {

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

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

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width:1199px) {

    .avsa-archive-section {

        padding:
            90px 0;

    }

    .avsa-heading h2 {

        font-size:
            46px;

    }

}


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

@media (max-width:991px) {

    .avsa-archive-section {

        padding:
            80px 0;

    }

    .avsa-heading {

        margin-bottom:
            40px;

    }

    .avsa-heading h2 {

        font-size:
            42px;

    }

    .avsa-achievement-grid {

        grid-template-columns:
            1fr;

    }

}


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

@media (max-width:767px) {

    .avsa-archive-section {

        padding:
            65px 0;

    }

    .avsa-heading h2 {

        font-size:
            35px;

    }

    .avsa-heading p {

        font-size:
            14px;

    }

    .avsa-note {

        align-items:
            flex-start;

        padding:
            18px;

    }

    .avsa-note-icon {

        width:
            42px;

        height:
            42px;

        flex-basis:
            42px;

    }

    .avsa-achievement-card {

        min-height:
            auto;

        padding:
            21px;

    }

}


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

@media (max-width:575px) {

    .avsa-archive-section {

        padding:
            60px 0;

    }

    .avsa-heading h2 {

        font-size:
            31px;

    }

    .avsa-eyebrow {

        font-size:
            10px;

        letter-spacing:
            2px;

    }

    .avsa-note {

        gap:
            12px;

    }

    .avsa-note-content p {

        font-size:
            11px;

    }

    .avsa-card-top {

        gap:
            8px;

    }

    .avsa-card-number {

        font-size:
            23px;

    }

    .avsa-card-icon {

        width:
            40px;

        height:
            40px;

    }

    .avsa-achievement-card h3 {

        font-size:
            17px;

    }

    .avsa-achievement-card p {

        font-size:
            12px;

    }

}


/* =========================================================
   480PX
========================================================= */

@media (max-width:480px) {

    .avsa-archive-section {

        padding:
            55px 0;

    }

    .avsa-heading h2 {

        font-size:
            29px;

    }

    .avsa-heading p {

        font-size:
            13px;

        line-height:
            1.8;

    }

    .avsa-achievement-card {

        padding:
            18px;

        border-radius:
            16px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .avsa-archive-section *,
    .avsa-archive-section::before,
    .avsa-archive-section::after {

        animation:
            none !important;

        transition:
            none !important;

    }

}

/* =========================================================
   WELCOME TO ADMISSIONS
========================================================= */

.avwa-admission-section {

    position: relative;

    width: 100%;

    padding: 60px 0;

    overflow: hidden;

    background-color: #f5f8fd;

    isolation: isolate;

}


/* =========================================================
   BACKGROUND GLOW
========================================================= */

.avwa-admission-section::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

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

    border-radius: 50%;

    background-color: rgba(1, 43, 143, 0.045);

    pointer-events: none;

    animation:
        avwaBlueGlow 10s ease-in-out infinite;

}


.avwa-admission-section::after {

    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

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

    border-radius: 50%;

    background-color: rgba(237, 11, 112, 0.045);

    pointer-events: none;

    animation:
        avwaPinkGlow 9s ease-in-out infinite;

}


@keyframes avwaBlueGlow {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-25px, 25px) scale(1.1);
    }

}


@keyframes avwaPinkGlow {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(25px, -20px) scale(1.1);
    }

}


/* =========================================================
   ROTATING BACKGROUND PATTERN
========================================================= */

.avwa-bg-pattern {

    position: absolute;

    width: 720px;
    height: 720px;

    top: -340px;
    left: -340px;

    border:
        1px solid rgba(1, 43, 143, 0.07);

    border-radius: 50%;

    z-index: 0;

    pointer-events: none;

    animation:
        avwaPatternRotate 50s linear infinite;

}


.avwa-bg-pattern::before {

    content: "";

    position: absolute;

    inset: 80px;

    border:
        1px dashed rgba(237, 11, 112, 0.12);

    border-radius: 50%;

}


.avwa-bg-pattern::after {

    content: "";

    position: absolute;

    inset: 170px;

    border:
        1px solid rgba(1, 43, 143, 0.06);

    border-radius: 50%;

}


@keyframes avwaPatternRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   FLOATING DECORATIONS
========================================================= */

.avwa-floating {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: 1;

}


.avwa-floating-one {

    width: 170px;
    height: 170px;

    left: -85px;
    bottom: 12%;

    border:
        1px solid rgba(1, 43, 143, 0.07);

    animation:
        avwaFloatOne 8s ease-in-out infinite;

}


.avwa-floating-two {

    width: 60px;
    height: 60px;

    right: 12%;
    bottom: 8%;

    background-color:
        rgba(237, 11, 112, 0.06);

    animation:
        avwaFloatTwo 6s ease-in-out infinite;

}


@keyframes avwaFloatOne {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-25px) rotate(20deg);
    }

}


@keyframes avwaFloatTwo {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(90deg);
    }

}


/* =========================================================
   MAIN GRID
========================================================= */

.avwa-admission-grid {

    position: relative;

    display: grid;

    grid-template-columns:
        0.9fr 1.1fr;

    gap: 70px;

    align-items: center;

    z-index: 5;

}


/* =========================================================
   IMAGE AREA
========================================================= */

.avwa-admission-image {

    position: relative;

    padding: 12px;

}


/* =========================================================
   IMAGE BOX
========================================================= */

.avwa-image-box {

    position: relative;

    width: 100%;

    height: 600px;

    overflow: hidden;

    border-radius: 28px;

    background-color: #ffffff;

    box-shadow:
        0 30px 75px rgba(1, 43, 143, 0.15);

    transition:
        box-shadow .5s ease;

}


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

.avwa-image-box img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    filter:
        saturate(.88) contrast(1.04) brightness(.98);

    transition:
        transform 1s cubic-bezier(.2, .8, .2, 1),
        filter .7s ease;

}


.avwa-admission-image:hover .avwa-image-box img {

    transform: scale(1.09);

    filter:
        saturate(1.18) contrast(1.06) brightness(1.05);

}


/* =========================================================
   IMAGE COLOUR OVERLAY
========================================================= */

.avwa-image-overlay {

    position: absolute;

    inset: 0;

    background-color:
        rgba(1, 43, 143, 0.09);

    mix-blend-mode: multiply;

    z-index: 2;

    pointer-events: none;

    transition:
        opacity .6s ease;

}


.avwa-admission-image:hover .avwa-image-overlay {

    opacity: 0;

}


/* =========================================================
   IMAGE LIGHTING SWEEP
========================================================= */

.avwa-image-light {

    position: absolute;

    width: 30%;

    height: 400%;

    top: -150%;

    left: -110%;

    background-color:
        rgba(255, 255, 255, .32);

    transform: rotate(28deg);

    pointer-events: none;

    z-index: 5;

}


.avwa-admission-image:hover .avwa-image-light {

    animation:
        avwaImageLight 1.25s ease forwards;

}


@keyframes avwaImageLight {

    0% {
        left: -110%;
    }

    100% {
        left: 165%;
    }

}


/* =========================================================
   IMAGE BORDER
========================================================= */

.avwa-image-border {

    position: absolute;

    inset: 12px;

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

    border-radius: 21px;

    pointer-events: none;

    z-index: 6;

}


/* =========================================================
   IMAGE HOVER SHADOW
========================================================= */

.avwa-admission-image:hover .avwa-image-box {

    box-shadow:
        0 40px 90px rgba(1, 43, 143, .21);

}


/* =========================================================
   ADMISSION BADGE
========================================================= */

.avwa-admission-badge {

    position: absolute;

    right: -5px;

    bottom: 45px;

    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 245px;

    padding: 15px 18px;

    border-radius: 16px;

    background-color: #012b8f;

    box-shadow:
        0 20px 50px rgba(1, 43, 143, .25);

    z-index: 10;

    animation:
        avwaBadgeFloat 4s ease-in-out infinite;

}


@keyframes avwaBadgeFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }

}


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

.avwa-badge-icon {

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 46px;

    border-radius: 12px;

    background-color: #ed0b70;

    color: #ffffff;

    font-family: 'themify';

    font-size: 17px;

    transition:
        transform .6s ease;

}


.avwa-admission-badge:hover .avwa-badge-icon {

    transform:
        rotateY(180deg);

}


/* =========================================================
   BADGE TEXT
========================================================= */

.avwa-admission-badge strong {

    display: block;

    color: #ffffff;

    font-size: 14px;

}


.avwa-admission-badge small {

    display: block;

    margin-top: 4px;

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

    font-size: 11px;

}


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

.avwa-admission-content {

    position: relative;

}


/* =========================================================
   EYEBROW
========================================================= */

.avwa-eyebrow {

    display: inline-block;

    margin-bottom: 12px;

    color: #ed0b70;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;

}


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

.avwa-admission-content h2 {

    margin: 0;

    color: #17213c;

    font-size: 50px;

    font-weight: 700;

    line-height: 1.15;

}


.avwa-admission-content h2 span {



    color: #012b8f;

}


/* =========================================================
   DIVIDER
========================================================= */

.avwa-divider {

    position: relative;

    width: 80px;

    height: 3px;

    margin: 22px 0 25px;

    background-color: #ed0b70;

}


.avwa-divider::after {

    content: "";

    position: absolute;

    top: 50%;

    right: -7px;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background-color: #012b8f;

    transform: translateY(-50%);

}


/* =========================================================
   PARAGRAPHS
========================================================= */

.avwa-admission-content>p {

    margin: 0 0 15px;

    color: #657187;

    font-size: 16px;

    line-height: 1.9;

}


/* =========================================================
   HIGHLIGHTS
========================================================= */

.avwa-highlights {

    display: grid;

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

    gap: 14px;

    margin-top: 28px;

}


/* =========================================================
   HIGHLIGHT CARD
========================================================= */

.avwa-highlight-card {

    position: relative;

    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 90px;

    padding: 15px;

    overflow: hidden;

    border:
        1px solid #e1e7f0;

    border-radius: 15px;

    background-color: #ffffff;

    box-shadow:
        0 8px 28px rgba(1, 43, 143, .045);

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

}


.avwa-highlight-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(1, 43, 143, .18);

    box-shadow:
        0 20px 45px rgba(1, 43, 143, .11);

}


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

.avwa-highlight-icon {

    width: 43px;

    height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 43px;

    border-radius: 11px;

    background-color:
        rgba(237, 11, 112, .08);

    color: #ed0b70;

    font-family: 'themify';

    font-size: 16px;

    transition:
        transform .5s ease,
        background-color .4s ease,
        color .4s ease;

}


.avwa-highlight-card:hover .avwa-highlight-icon {

    transform:
        rotateY(180deg) scale(1.08);

    background-color:
        #012b8f;

    color:
        #ffffff;

}


/* =========================================================
   HIGHLIGHT CONTENT
========================================================= */

.avwa-highlight-card h4 {

    margin: 0 0 4px;

    color: #26334d;

    font-size: 14px;

    font-weight: 700;

}


.avwa-highlight-card p {

    margin: 0;

    color: #788397;

    font-size: 11px;

    line-height: 1.55;

}


/* =========================================================
   DARK ALTERNATE VERSION
========================================================= */

.avwa-admission-dark {

    background-color:
        #081a45;

}


.avwa-admission-dark .avwa-admission-content h2 {

    color: #ffffff;

}


.avwa-admission-dark .avwa-admission-content h2 span {

    color: #ed0b70;

}


.avwa-admission-dark .avwa-admission-content>p {

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

}


.avwa-admission-dark .avwa-highlight-card {

    background-color:
        rgba(255, 255, 255, .045);

    border-color:
        rgba(255, 255, 255, .10);

}


.avwa-admission-dark .avwa-highlight-card:hover {

    background-color:
        rgba(237, 11, 112, .07);

    border-color:
        rgba(237, 11, 112, .30);

}


.avwa-admission-dark .avwa-highlight-card h4 {

    color: #ffffff;

}


.avwa-admission-dark .avwa-highlight-card p {

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

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width:1400px) {

    .avwa-admission-section {

        padding: 120px 0;

    }

    .avwa-admission-content h2 {

        font-size: 56px;

    }

    .avwa-image-box {

        height: 680px;

    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width:1199px) {

    .avwa-admission-section {

        padding: 90px 0;

    }

    .avwa-admission-grid {

        gap: 50px;

    }

    .avwa-admission-content h2 {

        font-size: 44px;

    }

    .avwa-image-box {

        height: 570px;

    }

}


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

@media (max-width:991px) {

    .avwa-admission-section {

        padding: 80px 0;

    }

    .avwa-admission-grid {

        grid-template-columns: 1fr;

        gap: 55px;

    }

    .avwa-image-box {

        height: 620px;

    }

    .avwa-admission-content h2 {

        font-size: 42px;

    }

}


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

@media (max-width:767px) {

    .avwa-admission-section {

        padding: 65px 0;

    }

    .avwa-admission-grid {

        gap: 40px;

    }

    .avwa-image-box {

        height: 500px;

        border-radius: 22px;

    }

    .avwa-admission-content h2 {

        font-size: 36px;

    }

    .avwa-admission-content>p {

        font-size: 14px;

    }

    .avwa-highlights {

        grid-template-columns: 1fr 1fr;

    }

}


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

@media (max-width:575px) {

    .avwa-admission-section {

        padding: 60px 0;

    }

    .avwa-image-box {

        height: 460px;

    }

    .avwa-admission-content h2 {

        font-size: 32px;

    }

    .avwa-highlights {

        grid-template-columns: 1fr;

    }

    .avwa-admission-badge {

        right: 0;

        bottom: 25px;

        min-width: 215px;

        padding: 12px 14px;

    }

    .avwa-badge-icon {

        width: 40px;

        height: 40px;

        flex-basis: 40px;

    }

}


/* =========================================================
   480PX
========================================================= */

@media (max-width:480px) {

    .avwa-admission-section {

        padding: 55px 0;

    }

    .avwa-image-area {

        padding: 7px;

    }

    .avwa-image-box {

        height: 420px;

        border-radius: 18px;

    }

    .avwa-admission-content h2 {

        font-size: 29px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .avwa-admission-section *,
    .avwa-admission-section::before,
    .avwa-admission-section::after {

        animation: none !important;

        transition: none !important;

    }

}


/* =========================================================
   ADMISSIONS PAGE
   ANNai VEILANKANNI'S MATRICULATION HIGHER SECONDARY SCHOOL
========================================================= */

:root {

    --avadm-blue: #012b8f;
    --avadm-dark: #081a45;
    --avadm-pink: #ed0b70;

    --avadm-light: #f5f8fd;
    --avadm-white: #ffffff;

    --avadm-heading: #17213c;
    --avadm-text: #657187;
    --avadm-muted: #788397;

    --avadm-border: #e1e7f0;

}


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

.avadm-section {

    position: relative;

    padding: 60px 0;

    overflow: hidden;

    isolation: isolate;


}


.avadm-light {

    background-color:
        #f5f8fd;

    color:
        #17213c;

}


.avadm-dark {

    background-color:
        #081a45;

    color:
        #ffffff;
    background: linear-gradient(135deg, rgb(4 29 73 / 89%),
            /* purple tint, adjust alpha */
            rgb(2 20 51 / 93%)),
        /* denim tint */
        url(../images/bg1.jpg);

}


/* =========================================================
   ROTATING PATTERN
========================================================= */

.avadm-pattern {

    position: absolute;

    width: 720px;
    height: 720px;

    top: -340px;
    left: -340px;

    border:
        1px solid rgba(1, 43, 143, .08);

    border-radius: 50%;

    pointer-events: none;

    z-index: 0;

    animation:
        avadmPatternRotate 50s linear infinite;

}


.avadm-pattern::before {

    content: "";

    position: absolute;

    inset: 80px;

    border:
        1px dashed rgba(237, 11, 112, .12);

    border-radius: 50%;

}


.avadm-pattern::after {

    content: "";

    position: absolute;

    inset: 170px;

    border:
        1px solid rgba(1, 43, 143, .06);

    border-radius: 50%;

}


.avadm-dark .avadm-pattern {

    border-color:
        rgba(255, 255, 255, .06);

}


.avadm-dark .avadm-pattern::before {

    border-color:
        rgba(237, 11, 112, .14);

}


@keyframes avadmPatternRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   BACKGROUND GLOWS
========================================================= */

.avadm-light::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

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

    border-radius: 50%;

    background-color:
        rgba(1, 43, 143, .045);

    pointer-events: none;

    animation:
        avadmGlow 10s ease-in-out infinite;

}


.avadm-dark::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -250px;
    bottom: -250px;

    border-radius: 50%;

    background-color:
        rgba(237, 11, 112, .055);

    pointer-events: none;

    animation:
        avadmGlow 10s ease-in-out infinite;

}


@keyframes avadmGlow {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.12);
    }

}


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

.avadm-intro-grid {

    position: relative;

    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap: 70px;

    align-items: center;

    z-index: 5;

}


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

.avadm-image-wrap {

    position: relative;

    padding: 12px;

}


.avadm-image-box {

    position: relative;

    height: 450px;

    overflow: hidden;

    border-radius: 28px;

    background-color:
        #ffffff;

    box-shadow:
        0 30px 75px rgba(1, 43, 143, .15);

    transition:
        box-shadow .5s ease;

}


.avadm-image-box img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    filter:
        saturate(.88) contrast(1.04) brightness(.98);

    transition:
        transform 1s cubic-bezier(.2, .8, .2, 1),
        filter .7s ease;

}


.avadm-image-wrap:hover .avadm-image-box img {

    transform:
        scale(1.10);

    filter:
        saturate(1.18) contrast(1.06) brightness(1.05);

}


/* =========================================================
   IMAGE COLOUR
========================================================= */

.avadm-image-overlay {

    position: absolute;

    inset: 0;

    background-color:
        rgba(1, 43, 143, .10);

    mix-blend-mode:
        multiply;

    z-index: 2;

    pointer-events: none;

    transition:
        opacity .6s ease;

}


.avadm-image-wrap:hover .avadm-image-overlay {

    opacity: 0;

}


/* =========================================================
   IMAGE LIGHTING
========================================================= */

.avadm-image-light {

    position: absolute;

    width: 30%;

    height: 400%;

    top: -150%;
    left: -110%;

    background-color:
        rgba(255, 255, 255, .32);

    transform:
        rotate(28deg);

    z-index: 5;

    pointer-events: none;

}


.avadm-image-wrap:hover .avadm-image-light {

    animation:
        avadmImageLight 1.25s ease forwards;

}


@keyframes avadmImageLight {

    0% {
        left: -110%;
    }

    100% {
        left: 165%;
    }

}


/* =========================================================
   IMAGE BORDER
========================================================= */

.avadm-image-border {

    position: absolute;

    inset: 12px;

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

    border-radius: 21px;

    z-index: 6;

    pointer-events: none;

}


/* =========================================================
   IMAGE SHADOW
========================================================= */

.avadm-image-wrap:hover .avadm-image-box {

    box-shadow:
        0 40px 90px rgba(1, 43, 143, .22);

}


/* =========================================================
   FLOATING BADGE
========================================================= */

.avadm-floating-badge {

    position: absolute;

    right: -5px;
    bottom: 45px;

    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 225px;

    padding: 15px 18px;

    border-radius: 16px;

    background-color:
        #012b8f;

    box-shadow:
        0 20px 50px rgba(1, 43, 143, .25);

    z-index: 10;

    animation:
        avadmBadgeFloat 4s ease-in-out infinite;

}


@keyframes avadmBadgeFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }

}


.avadm-badge-icon {

    width: 46px;
    height: 46px;

    display: flex;

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

    flex: 0 0 46px;

    border-radius: 12px;

    background-color:
        #ed0b70;

    color:
        #ffffff;

    font-family:
        'themify';

    transition:
        transform .6s ease;

}


.avadm-floating-badge:hover .avadm-badge-icon {

    transform:
        rotateY(180deg);

}


.avadm-floating-badge strong {

    display: block;

    color:
        #ffffff;

    font-size: 14px;

}


.avadm-floating-badge small {

    display: block;

    margin-top: 4px;

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

    font-size: 11px;

}


/* =========================================================
   EYEBROW
========================================================= */

.avadm-eyebrow {

    display: inline-block;

    margin-bottom: 12px;

    color:
        #ed0b70;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2.5px;

    text-transform: uppercase;

}


/* =========================================================
   TITLES
========================================================= */

.avadm-content h2,
.avadm-section-heading h2,
.avadm-info-content h2,
.avadm-enquiry-content h2 {

    margin: 0;

    font-size: 48px;

    font-weight: 700;

    line-height: 1.18;

    color:
        #17213c;

}


.avadm-content h2 span,
.avadm-section-heading h2 span,
.avadm-info-content h2 span,
.avadm-enquiry-content h2 span {



    color:
        #012b8f;

}


/* =========================================================
   DARK TITLES
========================================================= */

.avadm-dark .avadm-section-heading h2,
.avadm-dark .avadm-info-content h2 {

    color:
        #ffffff;

}


.avadm-dark .avadm-section-heading h2 span,
.avadm-dark .avadm-info-content h2 span {

    color:
        #ed0b70;

}


/* =========================================================
   DIVIDER
========================================================= */

.avadm-divider {

    position: relative;

    width: 80px;
    height: 3px;

    margin: 24px 0;

    background-color:
        #ed0b70;

}


.avadm-section-heading .avadm-divider {

    margin:
        24px auto;

}


.avadm-divider::after {

    content: "";

    position: absolute;

    right: -7px;
    top: 50%;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background-color:
        #012b8f;

    transform:
        translateY(-50%);

}


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

.avadm-content>p {

    margin: 0;

    max-width: 700px;

    color:
        #657187;

    font-size: 16px;

    line-height: 1.95;

}


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

.avadm-section-heading {

    position: relative;

    max-width: 850px;

    margin:
        0 auto 50px;

    text-align: center;

    z-index: 5;

}


/* =========================================================
   PROCEDURE GRID
========================================================= */

.avadm-procedure-grid {

    position: relative;

    display: grid;

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

    gap: 15px;

    z-index: 5;

}


/* =========================================================
   PROCEDURE CARD
========================================================= */

.avadm-procedure-card {

    position: relative;

    min-height: 300px;

    padding: 28px 20px;

    overflow: hidden;

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

    border-radius: 18px;

    background-color: rgb(19 36 77);

    transition:
        transform .45s ease,
        background-color .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;

}


.avadm-procedure-card:hover {

    transform:
        translateY(-9px);

    background-color:
        rgba(237, 11, 112, .08);

    border-color:
        rgba(237, 11, 112, .35);

    box-shadow:
        0 25px 55px rgba(0, 0, 0, .22);

}


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

.avadm-step-number {

    position: absolute;

    top: 12px;
    right: 15px;

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

    font-size: 42px;

    font-weight: 800;

    line-height: 1;

}


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

.avadm-step-icon {

    width: 55px;
    height: 55px;

    display: flex;

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

    margin-bottom: 25px;

    border-radius: 15px;

    background-color:
        rgba(237, 11, 112, .12);

    color:
        #ed0b70;

    font-family:
        'themify';

    font-size: 18px;

    transition:
        transform .6s ease,
        background-color .4s ease,
        color .4s ease;

}


.avadm-procedure-card:hover .avadm-step-icon {

    transform:
        rotateY(180deg) scale(1.08);

    background-color:
        #ed0b70;

    color:
        #ffffff;

}


/* =========================================================
   PROCEDURE TEXT
========================================================= */

.avadm-procedure-card h3 {

    margin:
        0 0 12px;

    color:
        #ffffff;

    font-size:
        18px;

    font-weight:
        700;

    line-height:
        1.4;

}


.avadm-procedure-card p {

    margin:
        0;

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

    font-size:
        13px;

    line-height:
        1.8;

}


/* =========================================================
   DOCUMENT GRID
========================================================= */

.avadm-document-grid {

    position: relative;

    display: grid;

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

    gap: 25px;

    z-index: 5;

}


/* =========================================================
   DOCUMENT CARD
========================================================= */

.avadm-document-card {

    position: relative;

    padding: 32px;

    overflow: hidden;

    border:
        1px solid #e1e7f0;

    border-radius: 20px;

    background-color:
        #ffffff;

    box-shadow:
        0 12px 35px rgba(1, 43, 143, .055);

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

}


.avadm-document-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 25px 55px rgba(1, 43, 143, .12);

}


/* =========================================================
   DOCUMENT HEADER
========================================================= */

.avadm-document-head {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 25px;

}


.avadm-document-icon {

    width: 55px;
    height: 55px;

    display: flex;

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

    flex: 0 0 55px;

    border-radius: 15px;

    background-color:
        rgba(1, 43, 143, .08);

    color:
        #012b8f;

    font-family:
        'themify';

    font-size: 19px;

    transition:
        transform .6s ease;

}


.avadm-document-card:hover .avadm-document-icon {

    transform:
        rotateY(180deg);

}


.avadm-document-label {

    display: block;

    margin-bottom: 4px;

    color:
        #ed0b70;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.avadm-document-head h3 {

    margin: 0;

    color:
        #17213c;

    font-size: 21px;

    font-weight: 700;

}


/* =========================================================
   DOCUMENT LIST
========================================================= */

.avadm-document-card ul {

    margin: 0;

    padding: 0;

    list-style: none;

}


.avadm-document-card li {

    display: flex;

    align-items: flex-start;

    gap: 11px;

    padding: 13px 0;

    border-bottom:
        1px solid #edf0f5;

    color:
        #657187;

    font-size: 14px;

    line-height: 1.7;

}


.avadm-document-card li:last-child {

    border-bottom:
        0;

}


.avadm-check {

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 23px;

    width: 23px;
    height: 23px;

    margin-top: 1px;

    border-radius: 50%;

    background-color:
        rgba(237, 11, 112, .09);

    color:
        #ed0b70;

    font-family:
        'themify';

    font-size: 9px;

}


/* =========================================================
   INFO LAYOUT
========================================================= */

.avadm-info-layout {

    position: relative;

    display: grid;

    grid-template-columns:
        130px 1fr;

    gap: 45px;

    align-items: start;

    z-index: 5;

}


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

.avadm-info-icon-box {

    width: 110px;
    height: 110px;

    display: flex;

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

    border-radius: 25px;

    background-color:
        rgba(237, 11, 112, .10);

    color:
        #ed0b70;

    font-family:
        'themify';

    font-size: 38px;

    transition:
        transform .6s ease,
        background-color .4s ease;

}


.avadm-info-layout:hover .avadm-info-icon-box {

    transform:
        rotateY(180deg) scale(1.05);

    background-color:
        rgba(237, 11, 112, .18);

}


/* =========================================================
   INFO CONTENT
========================================================= */

.avadm-info-content {

    max-width:
        900px;

}


.avadm-info-content p {

    margin:
        0 0 18px;

    color:
        #657187;

    font-size:
        16px;

    line-height:
        1.95;

}


.avadm-dark .avadm-info-content p {

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

}


/* =========================================================
   FEES
========================================================= */

.avadm-fees-layout .avadm-info-icon-box {

    background-color:
        rgba(1, 43, 143, .08);

    color:
        #012b8f;

}


/* =========================================================
   ENQUIRY SECTION
========================================================= */

.avadm-enquiry-section {

    background-color:
        #ffffff;

}


.avadm-enquiry-pattern {

    position: absolute;

    width: 700px;
    height: 700px;

    top: -350px;
    right: -350px;

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

    border-radius: 50%;

    animation:
        avadmPatternRotate 50s linear infinite;

}


.avadm-enquiry-pattern::before {

    content: "";

    position: absolute;

    inset: 90px;

    border:
        1px dashed rgba(237, 11, 112, .30);

    border-radius: 50%;

}


.avadm-enquiry-box {

    position: relative;

    z-index: 5;

    padding: 55px;

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

    border-radius: 28px;

    background-color: #081a45;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, .15);

}


.avadm-enquiry-content {

    text-align: center;

}


.avadm-enquiry-content h2 {

    color:
        #ffffff;

}


.avadm-enquiry-content h2 span {

    color:
        #ed0b70;

}


.avadm-enquiry-content>p {

    margin:
        0 0 30px;

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

    font-size:
        16px;

}


.avadm-enquiry-content>p strong {

    color:
        #ffffff;

    font-size:
        19px;

}


/* =========================================================
   CONTACT GRID
========================================================= */

.avadm-contact-grid {

    display: grid;

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

    gap: 15px;

    text-align: left;

}


.avadm-contact-item {

    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 82px;

    padding: 15px;

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

    border-radius: 15px;

    background-color:
        rgba(255, 255, 255, .045);

    color:
        #ffffff;

    text-decoration: none;

    transition:
        transform .4s ease,
        background-color .4s ease,
        border-color .4s ease;

}


.avadm-contact-item:hover {

    transform:
        translateY(-5px);

    background-color:
        rgba(237, 11, 112, .12);

    border-color:
        rgba(237, 11, 112, .35);

    color:
        #ffffff;

}


.avadm-contact-icon {

    width: 45px;
    height: 45px;

    display: flex;

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

    flex: 0 0 45px;

    border-radius: 12px;

    background-color:
        #ed0b70;

    color:
        #ffffff;

    font-family:
        'themify';

    font-size:
        16px;

    transition:
        transform .5s ease;

}


.avadm-contact-item:hover .avadm-contact-icon {

    transform:
        rotateY(180deg);

}


.avadm-contact-item span:last-child {

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

    font-size:
        15px;

    line-height:
        1.55;

}


.avadm-contact-item small {

    display: block;

    margin-bottom: 3px;

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

    font-size:
        16px;

    font-weight:
        800;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width:1199px) {

    .avadm-section {

        padding:
            90px 0;

    }

    .avadm-intro-grid {

        gap:
            50px;

    }

    .avadm-content h2,
    .avadm-section-heading h2,
    .avadm-info-content h2,
    .avadm-enquiry-content h2 {

        font-size:
            43px;

    }

    .avadm-procedure-grid {

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

    }

}


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

@media (max-width:991px) {

    .avadm-section {

        padding:
            80px 0;

    }

    .avadm-intro-grid {

        grid-template-columns:
            1fr;

        gap:
            50px;

    }

    .avadm-image-box {

        height:
            600px;

    }

    .avadm-procedure-grid {

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

    }

    .avadm-info-layout {

        grid-template-columns:
            90px 1fr;

        gap:
            30px;

    }

    .avadm-info-icon-box {

        width:
            85px;

        height:
            85px;

        font-size:
            30px;

    }

}


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

@media (max-width:767px) {

    .avadm-section {

        padding:
            65px 0;

    }

    .avadm-content h2,
    .avadm-section-heading h2,
    .avadm-info-content h2,
    .avadm-enquiry-content h2 {

        font-size:
            35px;

    }

    .avadm-content>p,
    .avadm-info-content p {

        font-size:
            14px;

    }

    .avadm-image-box {

        height:
            500px;

        border-radius:
            22px;

    }

    .avadm-procedure-grid {

        grid-template-columns:
            1fr;

    }

    .avadm-document-grid {

        grid-template-columns:
            1fr;

    }

    .avadm-info-layout {

        grid-template-columns:
            1fr;

        gap:
            25px;

    }

    .avadm-info-icon-box {

        width:
            75px;

        height:
            75px;

        font-size:
            27px;

    }

    .avadm-contact-grid {

        grid-template-columns:
            1fr;

    }

    .avadm-enquiry-box {

        padding:
            30px 20px;

    }

}


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

@media (max-width:575px) {

    .avadm-section {

        padding:
            60px 0;

    }

    .avadm-content h2,
    .avadm-section-heading h2,
    .avadm-info-content h2,
    .avadm-enquiry-content h2 {

        font-size:
            31px;

    }

    .avadm-eyebrow {

        font-size:
            10px;

        letter-spacing:
            2px;

    }

    .avadm-image-box {

        height:
            460px;

    }

    .avadm-floating-badge {

        right:
            0;

        bottom:
            25px;

        min-width:
            205px;

        padding:
            12px 14px;

    }

    .avadm-badge-icon {

        width:
            40px;

        height:
            40px;

        flex-basis:
            40px;

    }

    .avadm-document-card {

        padding:
            22px;

    }

    .avadm-document-card li {

        font-size:
            12px;

    }

}


/* =========================================================
   480PX
========================================================= */

@media (max-width:480px) {

    .avadm-section {

        padding:
            55px 0;

    }

    .avadm-image-wrap {

        padding:
            7px;

    }

    .avadm-image-box {

        height:
            420px;

        border-radius:
            18px;

    }

    .avadm-enquiry-box {

        padding:
            25px 16px;

        border-radius:
            20px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .avadm-section *,
    .avadm-section::before,
    .avadm-section::after {

        animation:
            none !important;

        transition:
            none !important;

    }

}

/* =========================================================
   PARENTS' CORNER
========================================================= */

:root {

    --avpc-blue: #012b8f;
    --avpc-dark: #081a45;
    --avpc-pink: #ed0b70;

    --avpc-light: #f5f8fd;
    --avpc-white: #ffffff;

    --avpc-heading: #17213c;
    --avpc-text: #657187;
    --avpc-muted: #788397;

    --avpc-border: #e1e7f0;

}


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

.avpc-section {

    position: relative;

    padding: 60px 0;

    overflow: hidden;

    isolation: isolate;

}


.avpc-light {

    background-color:
        #f5f8fd;

}


.avpc-dark {

    background-color: #061a3a;
    background-image: linear-gradient(rgba(4, 20, 48, 0.94), rgba(3, 15, 38, 0.97)), url(../images/footer-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}


/* =========================================================
   ROTATING BACKGROUND PATTERN
========================================================= */

.avpc-pattern {

    position: absolute;

    width: 720px;
    height: 720px;

    top: -350px;
    right: -350px;

    border:
        1px solid rgba(1, 43, 143, .07);

    border-radius: 50%;

    pointer-events: none;

    z-index: 0;

    animation:
        avpcRotate 55s linear infinite;

}


.avpc-pattern::before {

    content: "";

    position: absolute;

    inset: 80px;

    border:
        1px dashed rgba(237, 11, 112, .12);

    border-radius: 50%;

}


.avpc-pattern::after {

    content: "";

    position: absolute;

    inset: 175px;

    border:
        1px solid rgba(1, 43, 143, .06);

    border-radius: 50%;

}


.avpc-dark .avpc-pattern {

    border-color:
        rgba(255, 255, 255, .07);

}


.avpc-dark .avpc-pattern::before {

    border-color:
        rgba(237, 11, 112, .16);

}


@keyframes avpcRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   FLOATING SHAPES
========================================================= */

.avpc-floating {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: 1;

}


.avpc-float-one {

    width: 180px;
    height: 180px;

    left: -90px;
    bottom: 10%;

    border:
        1px solid rgba(1, 43, 143, .07);

    animation:
        avpcFloatOne 8s ease-in-out infinite;

}


.avpc-float-two {

    width: 65px;
    height: 65px;

    right: 10%;
    bottom: 7%;

    background-color:
        rgba(237, 11, 112, .06);

    animation:
        avpcFloatTwo 6s ease-in-out infinite;

}


@keyframes avpcFloatOne {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-25px) rotate(20deg);
    }

}


@keyframes avpcFloatTwo {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-20px) rotate(90deg);
    }

}


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

.avpc-intro-grid {

    position: relative;

    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap: 70px;

    align-items: center;

    z-index: 5;

}


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

.avpc-image-wrap {

    position: relative;

    padding: 12px;

}


.avpc-image-box {

    position: relative;

    height: 420px;

    overflow: hidden;

    border-radius: 28px;

    background-color:
        #ffffff;

    box-shadow:
        0 30px 75px rgba(1, 43, 143, .15);

    transition:
        box-shadow .5s ease;

}


.avpc-image-box img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    filter:
        saturate(.88) contrast(1.04) brightness(.98);

    transition:
        transform 1s cubic-bezier(.2, .8, .2, 1),
        filter .7s ease;

}


.avpc-image-wrap:hover .avpc-image-box img {

    transform:
        scale(1.09);

    filter:
        saturate(1.18) contrast(1.06) brightness(1.05);

}


/* =========================================================
   IMAGE COLOUR OVERLAY
========================================================= */

.avpc-image-overlay {

    position: absolute;

    inset: 0;

    background-color:
        rgba(1, 43, 143, .10);

    mix-blend-mode:
        multiply;

    z-index: 2;

    transition:
        opacity .6s ease;

}


.avpc-image-wrap:hover .avpc-image-overlay {

    opacity: 0;

}


/* =========================================================
   IMAGE LIGHTING
========================================================= */

.avpc-image-light {

    position: absolute;

    width: 30%;

    height: 400%;

    top: -150%;
    left: -110%;

    background-color:
        rgba(255, 255, 255, .34);

    transform:
        rotate(28deg);

    z-index: 5;

    pointer-events: none;

}


.avpc-image-wrap:hover .avpc-image-light {

    animation:
        avpcImageLight 1.25s ease forwards;

}


@keyframes avpcImageLight {

    0% {
        left: -110%;
    }

    100% {
        left: 165%;
    }

}


/* =========================================================
   IMAGE BORDER
========================================================= */

.avpc-image-border {

    position: absolute;

    inset: 12px;

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

    border-radius: 21px;

    pointer-events: none;

    z-index: 6;

}


/* =========================================================
   IMAGE BADGE
========================================================= */

.avpc-image-badge {

    position: absolute;

    right: -5px;
    bottom: 45px;

    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 245px;

    padding: 15px 18px;

    border-radius: 16px;

    background-color:
        #012b8f;

    box-shadow:
        0 20px 50px rgba(1, 43, 143, .25);

    z-index: 10;

    animation:
        avpcBadgeFloat 4s ease-in-out infinite;

}


@keyframes avpcBadgeFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }

}


.avpc-badge-icon {

    width: 46px;
    height: 46px;

    display: flex;

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

    flex: 0 0 46px;

    border-radius: 12px;

    background-color:
        #ed0b70;

    color:
        #ffffff;

    font-family:
        'themify';

    transition:
        transform .6s ease;

}


.avpc-image-badge:hover .avpc-badge-icon {

    transform:
        rotateY(180deg);

}


.avpc-image-badge strong {

    display: block;

    color:
        #ffffff;

    font-size:
        14px;

}


.avpc-image-badge small {

    display: block;

    margin-top: 4px;

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

    font-size:
        11px;

}


/* =========================================================
   EYEBROW
========================================================= */

.avpc-eyebrow {

    display: inline-block;

    margin-bottom: 12px;

    color:
        #ed0b70;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        2.5px;

    text-transform:
        uppercase;

}


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

.avpc-content h2,
.avpc-heading h2,
.avpc-material-content h2 {

    margin:
        0;

    color:
        #17213c;

    font-size:
        48px;

    font-weight:
        700;

    line-height:
        1.18;

}


.avpc-content h2 span,
.avpc-heading h2 span,
.avpc-material-content h2 span {




    color:
        #012b8f;

}


.avpc-dark .avpc-heading h2,
.avpc-dark .avpc-material-content h2 {

    color:
        #ffffff;

}


.avpc-dark .avpc-heading h2 span,
.avpc-dark .avpc-material-content h2 span {

    color:
        #ed0b70;

}


/* =========================================================
   DIVIDER
========================================================= */

.avpc-divider {

    position:
        relative;

    width:
        80px;

    height:
        3px;

    margin:
        24px 0;

    background-color:
        #ed0b70;

}


.avpc-divider::after {

    content:
        "";

    position:
        absolute;

    right:
        -7px;

    top:
        50%;

    width:
        10px;

    height:
        10px;

    border-radius:
        50%;

    background-color:
        #012b8f;

    transform:
        translateY(-50%);

}


.avpc-divider-center {

    margin:
        24px auto;

}


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

.avpc-content>p {

    max-width:
        700px;

    margin:
        0;

    color:
        #657187;

    font-size:
        16px;

    line-height:
        1.95;

}


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

.avpc-heading {

    position:
        relative;

    max-width:
        850px;

    margin:
        0 auto 45px;

    text-align:
        center;

    z-index:
        5;

}


.avpc-heading>p {

    max-width:
        1150px;

    margin:
        0 auto;

    color:
        #657187;

    font-size:
        16px;

    line-height:
        1.8;

}


.avpc-dark .avpc-heading>p {

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

}


/* =========================================================
   MEETING GRID
========================================================= */

.avpc-meeting-grid {

    position:
        relative;

    display:
        grid;

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

    gap:
        16px;

    z-index:
        5;

}


/* =========================================================
   MEETING CARD
========================================================= */

.avpc-meeting-card {

    position:
        relative;

    min-height:
        300px;

    padding:
        28px 21px;

    overflow:
        hidden;

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

    border-radius:
        18px;

    background-color:
        rgba(255, 255, 255, .045);

    transition:
        transform .45s ease,
        background-color .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;

}


.avpc-meeting-card:hover {

    transform:
        translateY(-9px);

    background-color:
        rgba(237, 11, 112, .08);

    border-color:
        rgba(237, 11, 112, .35);

    box-shadow:
        0 25px 55px rgba(0, 0, 0, .22);

}


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

.avpc-meeting-number {

    position:
        absolute;

    top:
        10px;

    right:
        14px;

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

    font-size:
        42px;

    font-weight:
        800;

}


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

.avpc-meeting-icon {

    width:
        55px;

    height:
        55px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        25px;

    border-radius:
        15px;

    background-color:
        rgba(237, 11, 112, .12);

    color:
        #ed0b70;

    font-family:
        'themify';

    transition:
        transform .6s ease,
        background-color .4s ease,
        color .4s ease;

}


.avpc-meeting-card:hover .avpc-meeting-icon {

    transform:
        rotateY(180deg) scale(1.08);

    background-color:
        #ed0b70;

    color:
        #ffffff;

}


.avpc-meeting-card h3 {

    margin:
        0 0 12px;

    color:
        #ffffff;

    font-size:
        18px;

    line-height:
        1.4;

}


.avpc-meeting-card p {

    margin:
        0;

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

    font-size:
        14px;

    line-height:
        1.8;

}


/* =========================================================
   GUIDELINES GRID
========================================================= */

.avpc-guidelines-grid {

    position:
        relative;

    display:
        grid;

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

    gap:
        17px;

    z-index:
        5;

}


/* =========================================================
   GUIDELINE CARD
========================================================= */

.avpc-guideline-card {

    position:
        relative;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        16px;

    min-height:
        150px;

    padding:
        23px;

    overflow:
        hidden;

    border:
        1px solid transparent;

    border-radius:
        18px;

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

}


.avpc-guideline-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        0 20px 45px rgba(1, 43, 143, .11);

}


/* =========================================================
   DIFFERENT CARD COLORS
========================================================= */

.avpc-color-one {
    background-color: #eaf2ff;
    border-color: #cbdcff;
}

.avpc-color-two {
    background-color: #fff0f6;
    border-color: #ffd3e5;
}

.avpc-color-three {
    background-color: #ebfaf2;
    border-color: #cceedd;
}

.avpc-color-four {
    background-color: #fff7e3;
    border-color: #f2dfb0;
}

.avpc-color-five {
    background-color: #f1efff;
    border-color: #dcd7ff;
}

.avpc-color-six {
    background-color: #e9f8fc;
    border-color: #c9eaf2;
}

.avpc-color-seven {
    background-color: #fff1ea;
    border-color: #f2d7c9;
}

.avpc-color-eight {
    background-color: #edf5ff;
    border-color: #d0e2fa;
}

.avpc-color-nine {
    background-color: #f5efff;
    border-color: #dfd3f7;
}

.avpc-color-ten {
    background-color: #fff3ed;
    border-color: #f2d7ca;
}

.avpc-color-eleven {
    background-color: #eafafa;
    border-color: #c9eaea;
}

.avpc-color-twelve {
    background-color: #f1f7e9;
    border-color: #d6e7c1;
}

.avpc-color-thirteen {
    background-color: #fdf0f7;
    border-color: #efd1e0;
}

.avpc-color-fourteen {
    background-color: #edf3ff;
    border-color: #d1ddf3;
}


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

.avpc-guideline-number {

    position:
        absolute;

    right:
        16px;

    top:
        10px;

    color:
        rgba(1, 43, 143, .09);

    font-size:
        35px;

    font-weight:
        800;

}


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

.avpc-guideline-icon {

    position:
        relative;

    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 48px;

    border-radius:
        13px;

    background-color:
        rgba(1, 43, 143, .08);

    color:
        #012b8f;

    font-family:
        'themify';

    font-size:
        16px;

    transition:
        transform .6s ease,
        background-color .4s ease,
        color .4s ease;

}


.avpc-guideline-card:hover .avpc-guideline-icon {

    transform:
        rotateY(180deg) scale(1.08);

    background-color:
        #ed0b70;

    color:
        #ffffff;

}


/* =========================================================
   GUIDELINE TEXT
========================================================= */

.avpc-guideline-card p {

    position:
        relative;

    margin:
        0;

    padding-right:
        30px;

    color:
        #657187;

    font-size:
        15px;

    line-height:
        1.8;

}


/* =========================================================
   BOOKS & MATERIALS
========================================================= */

.avpc-material-layout {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        120px 1fr;

    gap:
        45px;

    align-items:
        start;

    z-index:
        5;

}


.avpc-material-icon {

    width:
        110px;

    height:
        110px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        25px;

    background-color:
        rgba(237, 11, 112, .10);

    color:
        #ed0b70;

    font-family:
        'themify';

    font-size:
        38px;

    transition:
        transform .6s ease,
        background-color .4s ease;

}


.avpc-material-layout:hover .avpc-material-icon {

    transform:
        rotateY(180deg) scale(1.05);

    background-color:
        rgba(237, 11, 112, .18);

}


.avpc-material-content {

    max-width:
        900px;

}


.avpc-material-content p {

    margin:
        0;


    font-size:
        16px;

    line-height:
        1.95;

}


/* =========================================================
   RESPONSIVE — LAPTOP
========================================================= */

@media (max-width:1199px) {

    .avpc-section {

        padding:
            90px 0;

    }

    .avpc-intro-grid {

        gap:
            50px;

    }

    .avpc-content h2,
    .avpc-heading h2,
    .avpc-material-content h2 {

        font-size:
            43px;

    }

    .avpc-meeting-grid {

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

    }

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width:991px) {

    .avpc-section {

        padding:
            80px 0;

    }

    .avpc-intro-grid {

        grid-template-columns:
            1fr;

        gap:
            50px;

    }

    .avpc-image-box {

        height:
            600px;

    }

    .avpc-material-layout {

        grid-template-columns:
            90px 1fr;

        gap:
            30px;

    }

    .avpc-material-icon {

        width:
            85px;

        height:
            85px;

        font-size:
            30px;

    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width:767px) {

    .avpc-section {

        padding:
            65px 0;

    }

    .avpc-content h2,
    .avpc-heading h2,
    .avpc-material-content h2 {

        font-size:
            35px;

    }

    .avpc-content>p,
    .avpc-material-content p {

        font-size:
            14px;

    }

    .avpc-image-box {

        height:
            500px;

        border-radius:
            22px;

    }

    .avpc-meeting-grid {

        grid-template-columns:
            1fr;

    }

    .avpc-guidelines-grid {

        grid-template-columns:
            1fr;

    }

    .avpc-material-layout {

        grid-template-columns:
            1fr;

        gap:
            25px;

    }

    .avpc-material-icon {

        width:
            75px;

        height:
            75px;

        font-size:
            27px;

    }

}


/* =========================================================
   RESPONSIVE — SMALL MOBILE
========================================================= */

@media (max-width:575px) {

    .avpc-section {

        padding:
            60px 0;

    }

    .avpc-content h2,
    .avpc-heading h2,
    .avpc-material-content h2 {

        font-size:
            31px;

    }

    .avpc-eyebrow {

        font-size:
            10px;

        letter-spacing:
            2px;

    }

    .avpc-image-box {

        height:
            460px;

    }

    .avpc-image-badge {

        right:
            0;

        bottom:
            25px;

        min-width:
            210px;

        padding:
            12px 14px;

    }

    .avpc-badge-icon {

        width:
            40px;

        height:
            40px;

        flex-basis:
            40px;

    }

    .avpc-guideline-card {

        min-height:
            auto;

        padding:
            20px;

    }

    .avpc-guideline-card p {

        font-size:
            12px;

    }

}


/* =========================================================
   480PX
========================================================= */

@media (max-width:480px) {

    .avpc-section {

        padding:
            55px 0;

    }

    .avpc-image-wrap {

        padding:
            7px;

    }

    .avpc-image-box {

        height:
            420px;

        border-radius:
            18px;

    }

    .avpc-meeting-card {

        min-height:
            auto;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .avpc-section *,
    .avpc-section::before,
    .avpc-section::after {

        animation:
            none !important;

        transition:
            none !important;

    }

}

/* =========================================================
   STUDENTS' CORNER
========================================================= */

:root {

    --avsc-blue: #012b8f;
    --avsc-dark: #081a45;
    --avsc-pink: #ed0b70;

    --avsc-light: #f5f8fd;
    --avsc-white: #ffffff;

    --avsc-heading: #17213c;
    --avsc-text: #657187;
    --avsc-muted: #788397;

    --avsc-border: #e1e7f0;

}


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

.avsc-section {

    position: relative;

    padding: 60px 0;

    overflow: hidden;

    isolation: isolate;

}


.avsc-light {

    background-color:
        #f5f8fd;

}


.avsc-dark {

    background-color: #081a45;
    background: linear-gradient(135deg, #081a45eb,
            /* purple tint, adjust alpha */
            #030e29),
        /* denim tint */
        url(../images/bg3.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}


/* =========================================================
   ROTATING PATTERN
========================================================= */

.avsc-pattern {

    position: absolute;

    width: 720px;
    height: 720px;

    top: -350px;
    right: -350px;

    border:
        1px solid rgba(1, 43, 143, .07);

    border-radius: 50%;

    pointer-events: none;

    z-index: 0;

    animation:
        avscRotate 55s linear infinite;

}


.avsc-pattern::before {

    content: "";

    position: absolute;

    inset: 80px;

    border:
        1px dashed rgba(237, 11, 112, .12);

    border-radius: 50%;

}


.avsc-pattern::after {

    content: "";

    position: absolute;

    inset: 175px;

    border:
        1px solid rgba(1, 43, 143, .06);

    border-radius: 50%;

}


.avsc-dark .avsc-pattern {

    border-color:
        rgba(255, 255, 255, .07);

}


.avsc-dark .avsc-pattern::before {

    border-color:
        rgba(237, 11, 112, .16);

}


@keyframes avscRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   FLOATING ELEMENTS
========================================================= */

.avsc-floating {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

}


.avsc-float-one {

    width: 180px;
    height: 180px;

    left: -90px;
    bottom: 10%;

    border:
        1px solid rgba(1, 43, 143, .07);

    animation:
        avscFloatOne 8s ease-in-out infinite;

}


.avsc-float-two {

    width: 65px;
    height: 65px;

    right: 10%;
    bottom: 7%;

    background-color:
        rgba(237, 11, 112, .06);

    animation:
        avscFloatTwo 6s ease-in-out infinite;

}


@keyframes avscFloatOne {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-25px) rotate(20deg);
    }

}


@keyframes avscFloatTwo {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-20px) rotate(90deg);
    }

}


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

.avsc-intro-grid {

    position: relative;

    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap:
        70px;

    align-items:
        center;

    z-index:
        5;

}


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

.avsc-image-wrap {

    position: relative;

    padding:
        12px;

}


.avsc-image-box {

    position: relative;

    height:
        400px;

    overflow:
        hidden;

    border-radius:
        28px;

    background-color:
        #ffffff;

    box-shadow:
        0 30px 75px rgba(1, 43, 143, .15);

    transition:
        box-shadow .5s ease;

}


.avsc-image-box img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    filter:
        saturate(.88) contrast(1.04) brightness(.98);

    transition:
        transform 1s cubic-bezier(.2, .8, .2, 1),
        filter .7s ease;

}


.avsc-image-wrap:hover .avsc-image-box img {

    transform:
        scale(1.09);

    filter:
        saturate(1.18) contrast(1.06) brightness(1.05);

}


/* =========================================================
   IMAGE COLOUR OVERLAY
========================================================= */

.avsc-image-overlay {

    position:
        absolute;

    inset:
        0;

    background-color:
        rgba(1, 43, 143, .10);

    mix-blend-mode:
        multiply;

    z-index:
        2;

    transition:
        opacity .6s ease;

}


.avsc-image-wrap:hover .avsc-image-overlay {

    opacity:
        0;

}


/* =========================================================
   IMAGE LIGHTING
========================================================= */

.avsc-image-light {

    position:
        absolute;

    width:
        30%;

    height:
        400%;

    top:
        -150%;

    left:
        -110%;

    background-color:
        rgba(255, 255, 255, .34);

    transform:
        rotate(28deg);

    z-index:
        5;

    pointer-events:
        none;

}


.avsc-image-wrap:hover .avsc-image-light {

    animation:
        avscImageLight 1.25s ease forwards;

}


@keyframes avscImageLight {

    0% {
        left: -110%;
    }

    100% {
        left: 165%;
    }

}


/* =========================================================
   IMAGE BORDER
========================================================= */

.avsc-image-border {

    position:
        absolute;

    inset:
        12px;

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

    border-radius:
        21px;

    z-index:
        6;

    pointer-events:
        none;

}


/* =========================================================
   IMAGE BADGE
========================================================= */

.avsc-image-badge {

    position:
        absolute;

    right:
        -5px;

    bottom:
        45px;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    min-width:
        245px;

    padding:
        15px 18px;

    border-radius:
        16px;

    background-color:
        #012b8f;

    box-shadow:
        0 20px 50px rgba(1, 43, 143, .25);

    z-index:
        10;

    animation:
        avscBadgeFloat 4s ease-in-out infinite;

}


@keyframes avscBadgeFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }

}


.avsc-badge-icon {

    width:
        46px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 46px;

    border-radius:
        12px;

    background-color:
        #ed0b70;

    color:
        #ffffff;

    font-family:
        'themify';

    transition:
        transform .6s ease;

}


.avsc-image-badge:hover .avsc-badge-icon {

    transform:
        rotateY(180deg);

}


.avsc-image-badge strong {

    display:
        block;

    color:
        #ffffff;

    font-size:
        14px;

}


.avsc-image-badge small {

    display:
        block;

    margin-top:
        4px;

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

    font-size:
        11px;

}


/* =========================================================
   EYEBROW
========================================================= */

.avsc-eyebrow {

    display:
        inline-block;

    margin-bottom:
        12px;

    color:
        #ed0b70;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        2.5px;

    text-transform:
        uppercase;

}


/* =========================================================
   TITLES
========================================================= */

.avsc-content h2,
.avsc-heading h2,
.avsc-note-content h2 {

    margin:
        0;

    color:
        #17213c;

    font-size:
        48px;

    font-weight:
        700;

    line-height:
        1.18;

}


.avsc-content h2 span,
.avsc-heading h2 span,
.avsc-note-content h2 span {

    color:
        #012b8f;

}


.avsc-dark .avsc-heading h2 {

    color:
        #ffffff;

}


.avsc-dark .avsc-heading h2 span {

    color:
        #ed0b70;

}


/* =========================================================
   DIVIDER
========================================================= */

.avsc-divider {

    position:
        relative;

    width:
        80px;

    height:
        3px;

    margin:
        24px 0;

    background-color:
        #ed0b70;

}


.avsc-divider::after {

    content:
        "";

    position:
        absolute;

    right:
        -7px;

    top:
        50%;

    width:
        10px;

    height:
        10px;

    border-radius:
        50%;

    background-color:
        #012b8f;

    transform:
        translateY(-50%);

}


.avsc-divider-center {

    margin:
        24px auto;

}


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

.avsc-content>p {

    max-width:
        700px;

    margin:
        0;

    color:
        #657187;

    font-size:
        16px;

    line-height:
        1.95;

}


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

.avsc-heading {

    position:
        relative;

    max-width:
        850px;

    margin:
        0 auto 45px;

    text-align:
        center;

    z-index:
        5;

}


.avsc-heading>p {

    max-width:
        720px;

    margin:
        0 auto;

    color:
        #657187;

    font-size:
        14px;

    line-height:
        1.8;

}


.avsc-dark .avsc-heading>p {

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

}


/* =========================================================
   RESPONSIBILITY GRID
========================================================= */

.avsc-responsibility-grid {

    position:
        relative;

    display:
        grid;

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

    gap:
        17px;

    z-index:
        5;

}


/* =========================================================
   RULE CARDS
========================================================= */

.avsc-rule-card {

    position:
        relative;

    min-height:
        245px;

    padding:
        25px 20px;

    overflow:
        hidden;

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

    border-radius:
        18px;

    background-color: #081a45;

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease,
        background-color .45s ease;

}


.avsc-rule-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(237, 11, 112, .35);

    background-color:
        rgba(237, 11, 112, .08);

    box-shadow:
        0 25px 55px rgba(0, 0, 0, .20);

}


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

.avsc-rule-number {

    position:
        absolute;

    right:
        13px;

    top:
        10px;

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

    font-size:
        38px;

    font-weight:
        800;

}


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

.avsc-rule-icon {

    width:
        53px;

    height:
        53px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        25px;

    border-radius:
        14px;

    background-color:
        rgba(237, 11, 112, .12);

    color:
        #ed0b70;

    font-family:
        'themify';

    font-size:
        17px;

    transition:
        transform .6s ease,
        background-color .4s ease,
        color .4s ease;

}


.avsc-rule-card:hover .avsc-rule-icon {

    transform:
        rotateY(180deg) scale(1.08);

    background-color:
        #ed0b70;

    color:
        #ffffff;

}


.avsc-rule-card p {

    margin:
        0;

    color: rgb(232 237 250 / 89%);

    font-size:
        15px;

    line-height:
        1.8;

}


/* =========================================================
   CLASSROOM DECORUM GRID
========================================================= */

.avsc-decorum-grid {

    position:
        relative;

    display:
        grid;

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

    gap:
        17px;

    z-index:
        5;

}


/* =========================================================
   DECORUM CARD
========================================================= */

.avsc-decorum-card {

    position:
        relative;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        16px;

    min-height:
        145px;

    padding:
        22px;

    overflow:
        hidden;

    border:
        1px solid transparent;

    border-radius:
        18px;

    transition:
        transform .45s ease,
        box-shadow .45s ease;

}


/* =========================================================
   DIFFERENT LIGHT COLORS
========================================================= */

.avsc-card-one {
    background-color: #eaf2ff;
    border-color: #cbdcff;
}

.avsc-card-two {
    background-color: #fff0f6;
    border-color: #ffd3e5;
}

.avsc-card-three {
    background-color: #eaf9f1;
    border-color: #cceedd;
}

.avsc-card-four {
    background-color: #fff7e3;
    border-color: #f2dfb0;
}

.avsc-card-five {
    background-color: #f1efff;
    border-color: #dcd7ff;
}

.avsc-card-six {
    background-color: #e9f8fc;
    border-color: #c9eaf2;
}

.avsc-card-seven {
    background-color: #fff1ea;
    border-color: #f2d7c9;
}

.avsc-card-eight {
    background-color: #edf5ff;
    border-color: #d0e2fa;
}

.avsc-card-nine {
    background-color: #f5efff;
    border-color: #dfd3f7;
}

.avsc-card-ten {
    background-color: #edf8f0;
    border-color: #d0e8d7;
}


.avsc-decorum-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        0 20px 45px rgba(1, 43, 143, .11);

}


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

.avsc-decorum-number {

    position:
        absolute;

    right:
        15px;

    top:
        9px;

    color:
        rgba(1, 43, 143, .09);

    font-size:
        34px;

    font-weight:
        800;

}


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

.avsc-decorum-icon {

    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 48px;

    border-radius:
        13px;

    background-color:
        rgba(1, 43, 143, .08);

    color:
        #012b8f;

    font-family:
        'themify';

    transition:
        transform .6s ease,
        background-color .4s ease,
        color .4s ease;

}


.avsc-decorum-card:hover .avsc-decorum-icon {

    transform:
        rotateY(180deg) scale(1.08);

    background-color:
        #ed0b70;

    color:
        #ffffff;

}


.avsc-decorum-card p {

    margin:
        0;

    padding-right:
        35px;

    color:
        #657187;

    font-size:
        16px;

    line-height:
        1.8;

}


/* =========================================================
   CAMPUS GRID
========================================================= */

.avsc-campus-grid {

    position:
        relative;

    display:
        grid;

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

    gap:
        17px;

    z-index:
        5;

}


/* =========================================================
   CAMPUS CARDS
========================================================= */

.avsc-campus-card {

    position:
        relative;

    min-height:
        230px;

    padding:
        25px 20px;

    overflow:
        hidden;

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

    border-radius:
        18px;

    background-color: #081a45;

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        background-color .45s ease,
        border-color .45s ease;

}


.avsc-campus-card:hover {

    transform:
        translateY(-8px);

    background-color:
        rgba(237, 11, 112, .08);

    border-color:
        rgba(237, 11, 112, .35);

    box-shadow:
        0 25px 55px rgba(0, 0, 0, .22);

}


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

.avsc-campus-number {

    position:
        absolute;

    top:
        9px;

    right:
        14px;

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

    font-size:
        38px;

    font-weight:
        800;

}


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

.avsc-campus-icon {

    width:
        53px;

    height:
        53px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        25px;

    border-radius:
        14px;

    background-color:
        rgba(237, 11, 112, .12);

    color:
        #ed0b70;

    font-family:
        'themify';

    transition:
        transform .6s ease,
        background-color .4s ease,
        color .4s ease;

}


.avsc-campus-card:hover .avsc-campus-icon {

    transform:
        rotateY(180deg) scale(1.08);

    background-color:
        #ed0b70;

    color:
        #ffffff;

}


.avsc-campus-card p {

    margin: 0;
    color: rgb(232 237 250 / 89%);
    font-size: 14px;
    line-height: 1.8;

}


/* =========================================================
   NOTE SECTION
========================================================= */

.avsc-note-section {

    position:
        relative;

}


.avsc-note-pattern {

    position:
        absolute;

    width:
        750px;

    height:
        750px;

    top:
        -375px;

    right:
        -375px;

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

    border-radius:
        50%;

    pointer-events:
        none;

    animation:
        avscRotate 55s linear infinite;

}


.avsc-note-pattern::before {

    content:
        "";

    position:
        absolute;

    inset:
        90px;

    border:
        1px dashed rgba(237, 11, 112, .28);

    border-radius:
        50%;

}


/* =========================================================
   NOTE BOX
========================================================= */

.avsc-note-box {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        110px 1fr;

    gap:
        40px;

    align-items:
        center;

    padding:
        50px;

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

    border-radius:
        28px;

    background: linear-gradient(135deg, rgb(1 10 62 / 83%),
            /* purple tint, adjust alpha */
            rgb(7 35 73 / 93%)),
        /* denim tint */
        url(../images/bg1.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, .15);

    z-index:
        5;

}


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

.avsc-note-icon {

    width:
        100px;

    height:
        100px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        25px;

    background-color:
        rgba(237, 11, 112, .15);

    color:
        #ed0b70;

    font-family:
        'themify';

    font-size:
        35px;

    transition:
        transform .6s ease,
        background-color .4s ease;

}


.avsc-note-box:hover .avsc-note-icon {

    transform:
        rotateY(180deg) scale(1.05);

    background-color:
        rgba(237, 11, 112, .25);

}


/* =========================================================
   NOTE CONTENT
========================================================= */

.avsc-note-content h2 {

    color:
        #ffffff;

}


.avsc-note-content h2 span {

    color:
        #ed0b70;

}


.avsc-note-content p {

    max-width:
        850px;

    margin:
        0;

    color: rgb(232 237 250 / 89%);

    font-size:
        16px;

    line-height:
        1.95;

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width:1199px) {

    .avsc-section {

        padding:
            90px 0;

    }

    .avsc-intro-grid {

        gap:
            50px;

    }

    .avsc-content h2,
    .avsc-heading h2,
    .avsc-note-content h2 {

        font-size:
            43px;

    }

    .avsc-responsibility-grid,
    .avsc-campus-grid {

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

    }

}


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

@media (max-width:991px) {

    .avsc-section {

        padding:
            80px 0;

    }

    .avsc-intro-grid {

        grid-template-columns:
            1fr;

        gap:
            50px;

    }

    .avsc-image-box {

        height:
            600px;

    }

    .avsc-note-box {

        grid-template-columns:
            1fr;

        gap:
            25px;

    }

    .avsc-note-icon {

        width:
            85px;

        height:
            85px;

    }

}


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

@media (max-width:767px) {

    .avsc-section {

        padding:
            65px 0;

    }

    .avsc-content h2,
    .avsc-heading h2,
    .avsc-note-content h2 {

        font-size:
            35px;

    }

    .avsc-content>p {

        font-size:
            14px;

    }

    .avsc-image-box {

        height:
            500px;

        border-radius:
            22px;

    }

    .avsc-responsibility-grid,
    .avsc-campus-grid,
    .avsc-decorum-grid {

        grid-template-columns:
            1fr;

    }

    .avsc-note-box {

        padding:
            30px 22px;

    }

    .avsc-note-content p {

        font-size:
            14px;

    }

}


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

@media (max-width:575px) {

    .avsc-section {

        padding:
            60px 0;

    }

    .avsc-content h2,
    .avsc-heading h2,
    .avsc-note-content h2 {

        font-size:
            31px;

    }

    .avsc-eyebrow {

        font-size:
            10px;

        letter-spacing:
            2px;

    }

    .avsc-image-box {

        height:
            460px;

    }

    .avsc-image-badge {

        right:
            0;

        bottom:
            25px;

        min-width:
            210px;

        padding:
            12px 14px;

    }

    .avsc-badge-icon {

        width:
            40px;

        height:
            40px;

        flex-basis:
            40px;

    }

    .avsc-rule-card,
    .avsc-campus-card {

        min-height:
            auto;

    }

}


/* =========================================================
   480PX
========================================================= */

@media (max-width:480px) {

    .avsc-section {

        padding:
            55px 0;

    }

    .avsc-image-wrap {

        padding:
            7px;

    }

    .avsc-image-box {

        height:
            420px;

        border-radius:
            18px;

    }

    .avsc-note-box {

        padding:
            25px 17px;

        border-radius:
            20px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .avsc-section *,
    .avsc-section::before,
    .avsc-section::after {

        animation:
            none !important;

        transition:
            none !important;

    }

}

/* =========================================================
   SCHOOL UNIFORM
========================================================= */

:root {

    --avsu-blue: #012b8f;
    --avsu-dark: #081a45;
    --avsu-pink: #ed0b70;

    --avsu-light: #f5f8fd;
    --avsu-white: #ffffff;

    --avsu-heading: #17213c;
    --avsu-text: #657187;

}


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

.avsu-section {

    position: relative;

    padding: 60px 0;

    overflow: hidden;

    isolation: isolate;

}


.avsu-light {

    background-color: #f5f8fd;

}


.avsu-dark {

    background-color: #081a45;

}


/* =========================================================
   ROTATING BACKGROUND PATTERN
========================================================= */

.avsu-pattern {

    position: absolute;

    width: 720px;
    height: 720px;

    top: -350px;
    right: -350px;

    border: 1px solid rgba(1, 43, 143, .07);

    border-radius: 50%;

    pointer-events: none;

    z-index: 0;

    animation:
        avsuRotate 55s linear infinite;

}


.avsu-pattern::before {

    content: "";

    position: absolute;

    inset: 80px;

    border: 1px dashed rgba(237, 11, 112, .12);

    border-radius: 50%;

}


.avsu-pattern::after {

    content: "";

    position: absolute;

    inset: 175px;

    border: 1px solid rgba(1, 43, 143, .06);

    border-radius: 50%;

}


.avsu-dark .avsu-pattern {

    border-color: rgba(255, 255, 255, .07);

}


.avsu-dark .avsu-pattern::before {

    border-color: rgba(237, 11, 112, .16);

}


@keyframes avsuRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   FLOATING SHAPES
========================================================= */

.avsu-floating {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

}


.avsu-float-one {

    width: 180px;
    height: 180px;

    left: -90px;
    bottom: 10%;

    border: 1px solid rgba(1, 43, 143, .07);

    animation:
        avsuFloatOne 8s ease-in-out infinite;

}


.avsu-float-two {

    width: 65px;
    height: 65px;

    right: 10%;
    bottom: 7%;

    background-color: rgba(237, 11, 112, .06);

    animation:
        avsuFloatTwo 6s ease-in-out infinite;

}


@keyframes avsuFloatOne {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-25px) rotate(20deg);
    }

}


@keyframes avsuFloatTwo {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-20px) rotate(90deg);
    }

}


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

.avsu-intro-grid {

    position: relative;

    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap: 70px;

    align-items: center;

    z-index: 5;

}


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

.avsu-image-wrap {

    position: relative;

    padding: 12px;

}


.avsu-image-box {

    position: relative;

    height: 400px;

    overflow: hidden;

    border-radius: 28px;

    background-color: #ffffff;

    box-shadow:
        0 30px 75px rgba(1, 43, 143, .15);

}


.avsu-image-box img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    filter:
        saturate(.88) contrast(1.04) brightness(.98);

    transition:
        transform 1s cubic-bezier(.2, .8, .2, 1),
        filter .7s ease;

}


.avsu-image-wrap:hover .avsu-image-box img {

    transform: scale(1.09);

    filter:
        saturate(1.18) contrast(1.06) brightness(1.05);

}


/* =========================================================
   IMAGE COLOUR EFFECT
========================================================= */

.avsu-image-overlay {

    position: absolute;

    inset: 0;

    background-color:
        rgba(1, 43, 143, .10);

    mix-blend-mode: multiply;

    z-index: 2;

    transition: opacity .6s ease;

}


.avsu-image-wrap:hover .avsu-image-overlay {

    opacity: 0;

}


/* =========================================================
   IMAGE LIGHT SWEEP
========================================================= */

.avsu-image-light {

    position: absolute;

    width: 30%;
    height: 400%;

    top: -150%;
    left: -110%;

    background-color:
        rgba(255, 255, 255, .34);

    transform: rotate(28deg);

    z-index: 5;

    pointer-events: none;

}


.avsu-image-wrap:hover .avsu-image-light {

    animation:
        avsuImageLight 1.25s ease forwards;

}


@keyframes avsuImageLight {

    0% {
        left: -110%;
    }

    100% {
        left: 165%;
    }

}


/* =========================================================
   IMAGE BORDER
========================================================= */

.avsu-image-border {

    position: absolute;

    inset: 12px;

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

    border-radius: 21px;

    z-index: 6;

}


/* =========================================================
   IMAGE BADGE
========================================================= */

.avsu-image-badge {

    position: absolute;

    right: -5px;
    bottom: 45px;

    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 245px;

    padding: 15px 18px;

    border-radius: 16px;

    background-color:
        #012b8f;

    box-shadow:
        0 20px 50px rgba(1, 43, 143, .25);

    z-index: 10;

    animation:
        avsuBadgeFloat 4s ease-in-out infinite;

}


@keyframes avsuBadgeFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }

}


.avsu-badge-icon {

    width: 46px;
    height: 46px;

    display: flex;

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

    flex: 0 0 46px;

    border-radius: 12px;

    background-color:
        #ed0b70;

    color:
        #ffffff;

    font-family:
        'themify';

    transition:
        transform .6s ease;

}


.avsu-image-badge:hover .avsu-badge-icon {

    transform:
        rotateY(180deg);

}


.avsu-image-badge strong {

    display: block;

    color: #ffffff;

    font-size: 14px;

}


.avsu-image-badge small {

    display: block;

    margin-top: 4px;

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

    font-size: 11px;

}


/* =========================================================
   EYEBROW
========================================================= */

.avsu-eyebrow {

    display: inline-block;

    margin-bottom: 12px;

    color:
        #ed0b70;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2.5px;

    text-transform: uppercase;

}


/* =========================================================
   TITLES
========================================================= */

.avsu-content h2,
.avsu-heading h2,
.avsu-note-content h2 {

    margin: 0;

    color:
        #17213c;

    font-size:
        48px;

    font-weight:
        700;

    line-height:
        1.18;

}


.avsu-content h2 span,
.avsu-heading h2 span,
.avsu-note-content h2 span {



    color:
        #012b8f;

}


.avsu-dark .avsu-heading h2 {

    color:
        #ffffff;

}


.avsu-dark .avsu-heading h2 span {

    color:
        #ed0b70;

}


/* =========================================================
   DIVIDER
========================================================= */

.avsu-divider {

    position: relative;

    width: 80px;

    height: 3px;

    margin: 24px 0;

    background-color:
        #ed0b70;

}


.avsu-divider::after {

    content: "";

    position: absolute;

    right: -7px;

    top: 50%;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background-color:
        #012b8f;

    transform:
        translateY(-50%);

}


.avsu-divider-center {

    margin:
        24px auto;

}


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

.avsu-content>p {

    max-width:
        700px;

    margin: 0;

    color:
        #657187;

    font-size:
        16px;

    line-height:
        1.95;

}


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

.avsu-heading {

    position: relative;

    max-width: 850px;

    margin:
        0 auto 45px;

    text-align:
        center;

    z-index:
        5;

}


.avsu-heading>p {

    max-width:
        720px;

    margin:
        0 auto;

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

    font-size:
        14px;

    line-height:
        1.8;

}


/* =========================================================
   TABLE WRAPPER
========================================================= */

.avsu-table-wrap {

    position: relative;

    overflow-x: auto;

    border-radius: 22px;

    z-index: 5;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .22);

}


/* =========================================================
   TABLE
========================================================= */

.avsu-table {

    width: 100%;

    min-width: 760px;

    border-collapse: collapse;

    overflow: hidden;

    background-color:
        #ffffff;

}


.avsu-table thead th {

    padding:
        22px 25px;

    text-align:
        left;

    background-color:
        #ed0b70;

    color:
        #ffffff;

    font-size:
        15px;

    font-weight:
        700;

}


.avsu-th-icon {

    width: 38px;
    height: 38px;

    display: inline-flex;

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

    margin-right: 10px;

    border-radius: 10px;

    background-color:
        rgba(255, 255, 255, .14);

    font-family:
        'themify';

    transition:
        transform .5s ease;

}


.avsu-table thead th:hover .avsu-th-icon {

    transform:
        rotateY(180deg);

}


/* =========================================================
   TABLE ROW
========================================================= */

.avsu-table tbody tr {

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


.avsu-table tbody tr:hover {

    position: relative;

    transform:
        scale(1.008);

    box-shadow:
        0 10px 35px rgba(1, 43, 143, .10);

    z-index: 2;

}


.avsu-table td {

    padding:
        20px 25px;

    border-bottom:
        1px solid #e6eaf1;

    color:
        #657187;

    font-size:
        13px;

    line-height:
        1.7;

}


.avsu-table td:first-child {

    width:
        44%;

}


/* =========================================================
   TABLE ROW COLOURS
========================================================= */

.avsu-row-one {
    background-color: #eef4ff;
}

.avsu-row-two {
    background-color: #fff0f6;
}

.avsu-row-three {
    background-color: #edf9f2;
}

.avsu-row-four {
    background-color: #fff7e6;
}

.avsu-row-five {
    background-color: #f2efff;
}

.avsu-row-six {
    background-color: #eaf8fc;
}

.avsu-row-seven {
    background-color: #fff1ec;
}


/* =========================================================
   DAY CONTENT
========================================================= */

.avsu-day {

    display: flex;

    align-items: center;

    gap: 13px;

}


.avsu-day strong {

    color:
        #17213c;

    font-size:
        14px;

}


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

.avsu-row-number {

    width:
        40px;

    height:
        40px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 40px;

    border-radius:
        11px;

    background-color:
        rgba(1, 43, 143, .08);

    color:
        #012b8f;

    font-size:
        11px;

    font-weight:
        800;

    transition:
        transform .5s ease,
        background-color .4s ease,
        color .4s ease;

}


.avsu-table tbody tr:hover .avsu-row-number {

    transform:
        rotateY(180deg);

    background-color:
        #ed0b70;

    color:
        #ffffff;

}


/* =========================================================
   GUIDELINE GRID
========================================================= */

.avsu-guideline-grid {

    position:
        relative;

    display:
        grid;

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

    gap:
        17px;

    z-index:
        5;

}


/* =========================================================
   GUIDELINE CARDS
========================================================= */

.avsu-guideline-card {

    position:
        relative;

    min-height:
        270px;

    padding:
        28px 22px;

    overflow:
        hidden;

    border:
        1px solid transparent;

    border-radius:
        20px;

    transition:
        transform .45s ease,
        box-shadow .45s ease;

}


.avsu-guideline-card:hover {

    transform:
        translateY(-9px);

    box-shadow:
        0 25px 55px rgba(1, 43, 143, .13);

}


.avsu-guide-one {
    background-color: #eaf2ff;
    border-color: #cfddf5;
}

.avsu-guide-two {
    background-color: #fff0f6;
    border-color: #f5d3e1;
}

.avsu-guide-three {
    background-color: #ebfaf1;
    border-color: #d0e8d8;
}

.avsu-guide-four {
    background-color: #fff6e5;
    border-color: #eeddbb;
}


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

.avsu-guide-icon {

    width:
        55px;

    height:
        55px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        28px;

    border-radius:
        15px;

    background-color:
        rgba(1, 43, 143, .08);

    color:
        #012b8f;

    font-family:
        'themify';

    transition:
        transform .6s ease,
        background-color .4s ease,
        color .4s ease;

}


.avsu-guideline-card:hover .avsu-guide-icon {

    transform:
        rotateY(180deg) scale(1.08);

    background-color:
        #ed0b70;

    color:
        #ffffff;

}


/* =========================================================
   GUIDE CONTENT
========================================================= */

.avsu-guideline-card h3 {

    margin:
        0 0 12px;

    color:
        #17213c;

    font-size:
        18px;
    font-weight: 600;

}


.avsu-guideline-card p {

    margin:
        0;

    color:
        #657187;

    font-size:
        15px;
    font-weight: 600;

    line-height:
        1.8;

}


/* =========================================================
   NOTE SECTION
========================================================= */

.avsu-note-section {

    background-color:
        #012b8f;

}


.avsu-note-pattern {

    position:
        absolute;

    width:
        750px;

    height:
        750px;

    top:
        -375px;

    right:
        -375px;

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

    border-radius:
        50%;

    pointer-events:
        none;

    animation:
        avsuRotate 55s linear infinite;

}


.avsu-note-pattern::before {

    content:
        "";

    position:
        absolute;

    inset:
        90px;

    border:
        1px dashed rgba(237, 11, 112, .28);

    border-radius:
        50%;

}


/* =========================================================
   NOTE BOX
========================================================= */

.avsu-note-box {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        110px 1fr;

    gap:
        40px;

    align-items:
        center;

    padding:
        50px;

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

    border-radius:
        28px;

    background-color:
        rgba(255, 255, 255, .055);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, .15);

    z-index:
        5;

}


.avsu-note-icon {

    width:
        100px;

    height:
        100px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        25px;

    background-color:
        rgba(237, 11, 112, .15);

    color:
        #ed0b70;

    font-family:
        'themify';

    font-size:
        35px;

    transition:
        transform .6s ease,
        background-color .4s ease;

}


.avsu-note-box:hover .avsu-note-icon {

    transform:
        rotateY(180deg) scale(1.05);

    background-color:
        rgba(237, 11, 112, .25);

}


/* =========================================================
   NOTE CONTENT
========================================================= */

.avsu-note-content h2 {

    color:
        #ffffff;

}


.avsu-note-content h2 span {

    color:
        #ed0b70;

}


.avsu-note-content p {

    max-width:
        850px;

    margin:
        0;

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

    font-size:
        16px;

    line-height:
        1.95;

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width:1199px) {

    .avsu-section {

        padding:
            90px 0;

    }

    .avsu-intro-grid {

        gap:
            50px;

    }

    .avsu-content h2,
    .avsu-heading h2,
    .avsu-note-content h2 {

        font-size:
            43px;

    }

    .avsu-guideline-grid {

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

    }

}


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

@media (max-width:991px) {

    .avsu-section {

        padding:
            80px 0;

    }

    .avsu-intro-grid {

        grid-template-columns:
            1fr;

        gap:
            50px;

    }

    .avsu-image-box {

        height:
            600px;

    }

    .avsu-note-box {

        grid-template-columns:
            1fr;

        gap:
            25px;

    }

    .avsu-note-icon {

        width:
            85px;

        height:
            85px;

    }

}


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

@media (max-width:767px) {

    .avsu-section {

        padding:
            65px 0;

    }

    .avsu-content h2,
    .avsu-heading h2,
    .avsu-note-content h2 {

        font-size:
            35px;

    }

    .avsu-content>p {

        font-size:
            14px;

    }

    .avsu-image-box {

        height:
            500px;

        border-radius:
            22px;

    }

    .avsu-guideline-grid {

        grid-template-columns:
            1fr;

    }

    .avsu-table-wrap {

        border-radius:
            15px;

    }

    .avsu-table {

        min-width:
            700px;

    }

    .avsu-note-box {

        padding:
            30px 22px;

    }

    .avsu-note-content p {

        font-size:
            14px;

    }

}


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

@media (max-width:575px) {

    .avsu-section {

        padding:
            60px 0;

    }

    .avsu-content h2,
    .avsu-heading h2,
    .avsu-note-content h2 {

        font-size:
            31px;

    }

    .avsu-eyebrow {

        font-size:
            10px;

        letter-spacing:
            2px;

    }

    .avsu-image-box {

        height:
            460px;

    }

    .avsu-image-badge {

        right:
            0;

        bottom:
            25px;

        min-width:
            210px;

        padding:
            12px 14px;

    }

    .avsu-badge-icon {

        width:
            40px;

        height:
            40px;

        flex-basis:
            40px;

    }

    .avsu-guideline-card {

        min-height:
            auto;

    }

}


/* =========================================================
   480PX
========================================================= */

@media (max-width:480px) {

    .avsu-section {

        padding:
            55px 0;

    }

    .avsu-image-wrap {

        padding:
            7px;

    }

    .avsu-image-box {

        height:
            420px;

        border-radius:
            18px;

    }

    .avsu-note-box {

        padding:
            25px 17px;

        border-radius:
            20px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .avsu-section *,
    .avsu-section::before,
    .avsu-section::after {

        animation:
            none !important;

        transition:
            none !important;

    }

}

/* =========================================================
   GENERAL RULES & REGULATIONS
========================================================= */

:root {

    --avgr-blue: #012b8f;
    --avgr-dark: #081a45;
    --avgr-pink: #ed0b70;

    --avgr-light: #f5f8fd;
    --avgr-heading: #17213c;
    --avgr-text: #657187;

}


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

.avgr-section {

    position: relative;

    padding: 60px 0;

    overflow: hidden;

    isolation: isolate;

}


.avgr-light {

    background-color:
        #f5f8fd;

}


.avgr-dark {

    background-color:
        #081a45;

}


/* =========================================================
   ROTATING BACKGROUND PATTERN
========================================================= */

.avgr-pattern {

    position: absolute;

    width: 700px;
    height: 700px;

    top: -340px;
    right: -340px;

    border:
        1px solid rgba(1, 43, 143, .07);

    border-radius: 50%;

    pointer-events: none;

    z-index: 0;

    animation:
        avgrRotate 55s linear infinite;

}


.avgr-pattern::before {

    content: "";

    position: absolute;

    inset: 80px;

    border:
        1px dashed rgba(237, 11, 112, .12);

    border-radius: 50%;

}


.avgr-pattern::after {

    content: "";

    position: absolute;

    inset: 175px;

    border:
        1px solid rgba(1, 43, 143, .06);

    border-radius: 50%;

}


.avgr-dark .avgr-pattern {

    border-color:
        rgba(255, 255, 255, .07);

}


.avgr-dark .avgr-pattern::before {

    border-color:
        rgba(237, 11, 112, .18);

}


@keyframes avgrRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


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

.avgr-intro {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        100px 1fr;

    gap:
        35px;

    align-items:
        center;

    max-width:
        1050px;

    margin:
        auto;

    z-index:
        5;

}


.avgr-intro-icon {

    width:
        100px;

    height:
        100px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        25px;

    background-color:
        rgba(1, 43, 143, .08);

    color:
        #012b8f;

    font-family:
        'themify';

    font-size:
        32px;

    transition:
        transform .6s ease,
        background-color .4s ease,
        color .4s ease;

}


.avgr-intro:hover .avgr-intro-icon {

    transform:
        rotateY(180deg) scale(1.08);

    background-color:
        #ed0b70;

    color:
        #ffffff;

}


/* =========================================================
   EYEBROW
========================================================= */

.avgr-eyebrow {

    display:
        inline-block;

    margin-bottom:
        10px;

    color:
        #ed0b70;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        2.5px;

    text-transform:
        uppercase;

}


/* =========================================================
   HEADINGS
========================================================= */

.avgr-intro h2,
.avgr-heading h2,
.avgr-note-content h2 {

    margin:
        0;

    font-size:
        48px;

    line-height:
        1.18;

    font-weight:
        700;

    color:
        #17213c;

}


.avgr-intro h2 span,
.avgr-heading h2 span,
.avgr-note-content h2 span {

    color:
        #012b8f;

}


.avgr-dark .avgr-heading h2 {

    color:
        #ffffff;

}


.avgr-dark .avgr-heading h2 span {

    color:
        #ed0b70;

}


/* =========================================================
   DIVIDER
========================================================= */

.avgr-divider {

    position:
        relative;

    width:
        80px;

    height:
        3px;

    margin:
        23px 0;

    background-color:
        #ed0b70;

}


.avgr-divider::after {

    content:
        "";

    position:
        absolute;

    right:
        -7px;

    top:
        50%;

    width:
        10px;

    height:
        10px;

    border-radius:
        50%;

    background-color:
        #012b8f;

    transform:
        translateY(-50%);

}


.avgr-divider-center {

    margin:
        23px auto;

}


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

.avgr-intro-content p {

    max-width:
        850px;

    margin:
        0;

    color:
        #657187;

    font-size:
        16px;

    line-height:
        1.9;

}


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

.avgr-heading {

    position:
        relative;

    text-align:
        center;

    max-width:
        850px;

    margin:
        0 auto 48px;

    z-index:
        5;

}


/* =========================================================
   RULE GRID
========================================================= */

.avgr-rules-grid {

    position:
        relative;

    display:
        grid;

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

    gap:
        20px;

    z-index:
        5;

}


/* =========================================================
   RULE CARD
========================================================= */

.avgr-rule-card {

    position:
        relative;

    min-height:
        300px;

    padding:
        28px 25px;

    overflow:
        hidden;

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

    border-radius:
        20px;

    background-color:
        rgba(255, 255, 255, .045);

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease,
        background-color .45s ease;

}


.avgr-rule-card::before {

    content:
        "";

    position:
        absolute;

    width:
        120px;

    height:
        120px;

    right:
        -60px;

    bottom:
        -60px;

    border-radius:
        50%;

    background-color:
        rgba(237, 11, 112, .07);

    transition:
        transform .6s ease;

}


.avgr-rule-card:hover::before {

    transform:
        scale(2.3);

}


.avgr-rule-card:hover {

    transform:
        translateY(-9px);

    border-color:
        rgba(237, 11, 112, .35);

    background-color:
        rgba(237, 11, 112, .075);

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

}


/* =========================================================
   CARD TOP
========================================================= */

.avgr-rule-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        25px;

}


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

.avgr-rule-number {

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

    font-size:
        34px;

    font-weight:
        800;

    transition:
        color .4s ease;

}


.avgr-rule-card:hover .avgr-rule-number {

    color:
        rgba(237, 11, 112, .55);

}


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

.avgr-rule-icon {

    width:
        54px;

    height:
        54px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        15px;

    background-color:
        rgba(237, 11, 112, .12);

    color:
        #ed0b70;

    font-family:
        'themify';

    transition:
        transform .6s ease,
        background-color .4s ease,
        color .4s ease;

}


.avgr-rule-card:hover .avgr-rule-icon {

    transform:
        rotateY(180deg) scale(1.08);

    background-color:
        #ed0b70;

    color:
        #ffffff;

}


/* =========================================================
   CARD CONTENT
========================================================= */

.avgr-rule-card h3 {

    margin:
        0 0 13px;

    color:
        #ffffff;

    font-size:
        20px;

    font-weight:
        700;

}


.avgr-rule-card p {

    margin:
        0;

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

    font-size:
        15px;

    line-height:
        1.85;

}


/* =========================================================
   DIFFERENT CARD ACCENT COLOURS
========================================================= */

.avgr-rule-01 .avgr-rule-icon {
    background-color: rgba(0, 123, 255, .13);
    color: #5ca7ff;
}

.avgr-rule-02 .avgr-rule-icon {
    background-color: rgba(237, 11, 112, .13);
    color: #ed0b70;
}

.avgr-rule-03 .avgr-rule-icon {
    background-color: rgba(24, 190, 135, .13);
    color: #38dba5;
}

.avgr-rule-04 .avgr-rule-icon {
    background-color: rgba(255, 183, 77, .13);
    color: #ffbd61;
}

.avgr-rule-05 .avgr-rule-icon {
    background-color: rgba(155, 120, 255, .13);
    color: #aa91ff;
}

.avgr-rule-06 .avgr-rule-icon {
    background-color: rgba(42, 198, 220, .13);
    color: #45d7e8;
}

.avgr-rule-07 .avgr-rule-icon {
    background-color: rgba(255, 91, 91, .13);
    color: #ff7777;
}

.avgr-rule-08 .avgr-rule-icon {
    background-color: rgba(86, 205, 116, .13);
    color: #65d982;
}

.avgr-rule-09 .avgr-rule-icon {
    background-color: rgba(255, 177, 74, .13);
    color: #ffc06d;
}


/* =========================================================
   HOVER ICON UNIFIED
========================================================= */

.avgr-rule-card:hover .avgr-rule-icon {

    background-color:
        #ed0b70;

    color:
        #ffffff;

}


/* =========================================================
   NOTE SECTION
========================================================= */

.avgr-note {

    background-color:
        #012b8f;

}


.avgr-note-pattern {

    position:
        absolute;

    width:
        750px;

    height:
        750px;

    top:
        -375px;

    right:
        -375px;

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

    border-radius:
        50%;

    animation:
        avgrRotate 55s linear infinite;

}


.avgr-note-pattern::before {

    content:
        "";

    position:
        absolute;

    inset:
        90px;

    border:
        1px dashed rgba(237, 11, 112, .28);

    border-radius:
        50%;

}


/* =========================================================
   NOTE BOX
========================================================= */

.avgr-note-box {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        110px 1fr;

    gap:
        40px;

    align-items:
        center;

    padding:
        50px;

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

    border-radius:
        28px;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, .15);

    z-index:
        5;

}


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

.avgr-note-icon {

    width:
        100px;

    height:
        100px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        25px;

    background-color:
        rgba(237, 11, 112, .16);

    color:
        #ed0b70;

    font-family:
        'themify';

    font-size:
        35px;

    transition:
        transform .6s ease;

}


.avgr-note-box:hover .avgr-note-icon {

    transform:
        rotateY(180deg) scale(1.08);

}


/* =========================================================
   NOTE CONTENT
========================================================= */

.avgr-note-content h2 {

    color:
        #ffffff;

}


.avgr-note-content h2 span {

    color:
        #ed0b70;

}


.avgr-note-content p {

    max-width:
        850px;

    margin:
        0;

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

    font-size:
        15px;

    line-height:
        1.9;

}


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

@media (max-width:1199px) {

    .avgr-rules-grid {

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

    }

}


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

@media (max-width:991px) {

    .avgr-section {

        padding:
            80px 0;

    }

    .avgr-intro {

        grid-template-columns:
            80px 1fr;

        gap:
            25px;

    }

    .avgr-intro-icon {

        width:
            80px;

        height:
            80px;

    }

    .avgr-intro h2,
    .avgr-heading h2,
    .avgr-note-content h2 {

        font-size:
            42px;

    }

    .avgr-note-box {

        grid-template-columns:
            1fr;

        gap:
            25px;

    }

}


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

@media (max-width:767px) {

    .avgr-section {

        padding:
            65px 0;

    }

    .avgr-intro {

        grid-template-columns:
            1fr;

        gap:
            25px;

    }

    .avgr-intro-icon {

        width:
            70px;

        height:
            70px;

        font-size:
            25px;

    }

    .avgr-intro h2,
    .avgr-heading h2,
    .avgr-note-content h2 {

        font-size:
            34px;

    }

    .avgr-intro-content p {

        font-size:
            14px;

    }

    .avgr-rules-grid {

        grid-template-columns:
            1fr;

    }

    .avgr-rule-card {

        min-height:
            auto;

    }

    .avgr-note-box {

        padding:
            30px 22px;

    }

    .avgr-note-icon {

        width:
            80px;

        height:
            80px;

    }

    .avgr-note-content p {

        font-size:
            14px;

    }

}


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

@media (max-width:575px) {

    .avgr-section {

        padding:
            58px 0;

    }

    .avgr-intro h2,
    .avgr-heading h2,
    .avgr-note-content h2 {

        font-size:
            30px;

    }

    .avgr-eyebrow {

        font-size:
            10px;

        letter-spacing:
            2px;

    }

    .avgr-rule-card {

        padding:
            23px 20px;

        border-radius:
            17px;

    }

    .avgr-rule-card h3 {

        font-size:
            16px;

    }

    .avgr-rule-card p {

        font-size:
            12px;

    }

    .avgr-note-box {

        padding:
            25px 18px;

        border-radius:
            20px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .avgr-section *,
    .avgr-section::before,
    .avgr-section::after {

        animation:
            none !important;

        transition:
            none !important;

    }

}
/* =========================================================
   ATTENDANCE & LEAVE
========================================================= */

:root {

    --avat-blue: #012b8f;
    --avat-dark: #081a45;
    --avat-pink: #ed0b70;

    --avat-light: #f5f8fd;

    --avat-heading: #17213c;
    --avat-text: #657187;

}


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

.avat-section {

    position: relative;

    padding: 60px 0;

    overflow: hidden;

    isolation: isolate;

}


.avat-light {

    background-color:
        #f5f8fd;

}


.avat-dark {

    background-color:
        #081a45;

}


/* =========================================================
   ROTATING BACKGROUND PATTERN
========================================================= */

.avat-pattern {

    position: absolute;

    width: 720px;
    height: 720px;

    top: -350px;
    right: -350px;

    border:
        1px solid
        rgba(1,43,143,.07);

    border-radius: 50%;

    pointer-events: none;

    z-index: 0;

    animation:
        avatRotate
        55s
        linear
        infinite;

}


.avat-pattern::before {

    content: "";

    position: absolute;

    inset: 80px;

    border:
        1px dashed
        rgba(237,11,112,.12);

    border-radius: 50%;

}


.avat-pattern::after {

    content: "";

    position: absolute;

    inset: 175px;

    border:
        1px solid
        rgba(1,43,143,.06);

    border-radius: 50%;

}


.avat-dark .avat-pattern {

    border-color:
        rgba(255,255,255,.07);

}


.avat-dark .avat-pattern::before {

    border-color:
        rgba(237,11,112,.18);

}


@keyframes avatRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


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

.avat-intro-grid {

    position: relative;

    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap:
        70px;

    align-items:
        center;

    z-index:
        5;

}


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

.avat-image-wrap {

    position:
        relative;

    padding:
        12px;

}


.avat-image-box {

    position:
        relative;

    height:
        400px;

    overflow:
        hidden;

    border-radius:
        28px;

    background-color:
        #ffffff;

    box-shadow:
        0 30px 75px
        rgba(1,43,143,.15);

}


.avat-image-box img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    filter:
        saturate(.88)
        contrast(1.04)
        brightness(.98);

    transition:
        transform 1s cubic-bezier(.2,.8,.2,1),
        filter .7s ease;

}


.avat-image-wrap:hover
.avat-image-box img {

    transform:
        scale(1.09);

    filter:
        saturate(1.18)
        contrast(1.06)
        brightness(1.05);

}


/* =========================================================
   IMAGE COLOUR OVERLAY
========================================================= */

.avat-image-overlay {

    position:
        absolute;

    inset:
        0;

    background-color:
        rgba(1,43,143,.10);

    mix-blend-mode:
        multiply;

    z-index:
        2;

    transition:
        opacity .6s ease;

}


.avat-image-wrap:hover
.avat-image-overlay {

    opacity:
        0;

}


/* =========================================================
   LIGHTING EFFECT
========================================================= */

.avat-image-light {

    position:
        absolute;

    width:
        30%;

    height:
        400%;

    top:
        -150%;

    left:
        -110%;

    background-color:
        rgba(255,255,255,.34);

    transform:
        rotate(28deg);

    z-index:
        5;

    pointer-events:
        none;

}


.avat-image-wrap:hover
.avat-image-light {

    animation:
        avatImageLight
        1.25s
        ease
        forwards;

}


@keyframes avatImageLight {

    0% {
        left: -110%;
    }

    100% {
        left: 165%;
    }

}


/* =========================================================
   IMAGE BORDER
========================================================= */

.avat-image-border {

    position:
        absolute;

    inset:
        12px;

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

    border-radius:
        21px;

    z-index:
        6;

    pointer-events:
        none;

}


/* =========================================================
   IMAGE BADGE
========================================================= */

.avat-image-badge {

    position:
        absolute;

    right:
        -5px;

    bottom:
        45px;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    min-width:
        245px;

    padding:
        15px 18px;

    border-radius:
        16px;

    background-color:
        #012b8f;

    box-shadow:
        0 20px 50px
        rgba(1,43,143,.25);

    z-index:
        10;

    animation:
        avatBadgeFloat
        4s
        ease-in-out
        infinite;

}


@keyframes avatBadgeFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }

}


.avat-badge-icon {

    width:
        46px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 46px;

    border-radius:
        12px;

    background-color:
        #ed0b70;

    color:
        #ffffff;

    font-family:
        'themify';

    transition:
        transform .6s ease;

}


.avat-image-badge:hover
.avat-badge-icon {

    transform:
        rotateY(180deg);

}


.avat-image-badge strong {

    display:
        block;

    color:
        #ffffff;

    font-size:
        14px;

}


.avat-image-badge small {

    display:
        block;

    margin-top:
        4px;

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

    font-size:
        11px;

}


/* =========================================================
   EYEBROW
========================================================= */

.avat-eyebrow {

    display:
        inline-block;

    margin-bottom:
        12px;

    color:
        #ed0b70;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        2.5px;

    text-transform:
        uppercase;

}


/* =========================================================
   HEADINGS
========================================================= */

.avat-content h2,
.avat-heading h2,
.avat-note-content h2 {

    margin:
        0;

    color:
        #17213c;

    font-size:
        48px;

    font-weight:
        700;

    line-height:
        1.18;

}


.avat-content h2 span,
.avat-heading h2 span,
.avat-note-content h2 span {

    color:
        #012b8f;

}


.avat-dark .avat-heading h2 {

    color:
        #ffffff;

}


.avat-dark .avat-heading h2 span {

    color:
        #ed0b70;

}


/* =========================================================
   DIVIDER
========================================================= */

.avat-divider {

    position:
        relative;

    width:
        80px;

    height:
        3px;

    margin:
        24px 0;

    background-color:
        #ed0b70;

}


.avat-divider::after {

    content:
        "";

    position:
        absolute;

    right:
        -7px;

    top:
        50%;

    width:
        10px;

    height:
        10px;

    border-radius:
        50%;

    background-color:
        #012b8f;

    transform:
        translateY(-50%);

}


.avat-divider-center {

    margin:
        24px auto;

}


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

.avat-content > p {

    max-width:
        700px;

    margin:
        0;

    color:
        #657187;

    font-size:
        16px;

    line-height:
        1.95;

}


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

.avat-heading {

    position:
        relative;

    max-width:
        850px;

    margin:
        0 auto 48px;

    text-align:
        center;

    z-index:
        5;

}


/* =========================================================
   RULE GRID
========================================================= */

.avat-rules-grid {

    position:
        relative;

    display:
        grid;

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

    gap:
        20px;

    z-index:
        5;

}


/* =========================================================
   RULE CARD
========================================================= */

.avat-rule-card {

    position:
        relative;

    min-height:
        290px;

    padding:
        28px 25px;

    overflow:
        hidden;

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

    border-radius:
        20px;

    background-color:
        rgba(255,255,255,.045);

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease,
        background-color .45s ease;

}


.avat-rule-card::before {

    content:
        "";

    position:
        absolute;

    width:
        150px;

    height:
        150px;

    right:
        -75px;

    bottom:
        -75px;

    border-radius:
        50%;

    background-color:
        rgba(237,11,112,.07);

    transition:
        transform .6s ease;

}


.avat-rule-card:hover::before {

    transform:
        scale(2.2);

}


.avat-rule-card:hover {

    transform:
        translateY(-9px);

    border-color:
        rgba(237,11,112,.35);

    background-color:
        rgba(237,11,112,.075);

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

}


/* =========================================================
   RULE TOP
========================================================= */

.avat-rule-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        25px;

}


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

.avat-rule-number {

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

    font-size:
        36px;

    font-weight:
        800;

    transition:
        color .4s ease;

}


.avat-rule-card:hover
.avat-rule-number {

    color:
        rgba(237,11,112,.55);

}


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

.avat-rule-icon {

    width:
        55px;

    height:
        55px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        15px;

    background-color:
        rgba(237,11,112,.12);

    color:
        #ed0b70;

    font-family:
        'themify';

    transition:
        transform .6s ease,
        background-color .4s ease,
        color .4s ease;

}


.avat-rule-card:hover
.avat-rule-icon {

    transform:
        rotateY(180deg)
        scale(1.08);

    background-color:
        #ed0b70;

    color:
        #ffffff;

}


/* =========================================================
   RULE TEXT
========================================================= */

.avat-rule-card h3 {

    margin:
        0 0 13px;

    color:
        #ffffff;

    font-size:
        20px;

    font-weight:
        700;

}


.avat-rule-card p {

    margin:
        0;

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

    font-size:
        15px;

    line-height:
        1.85;

}


/* =========================================================
   INDIVIDUAL ICON COLOURS
========================================================= */

.avat-rule-01 .avat-rule-icon {
    background-color: rgba(0,123,255,.13);
    color: #5ca7ff;
}

.avat-rule-02 .avat-rule-icon {
    background-color: rgba(24,190,135,.13);
    color: #38dba5;
}

.avat-rule-03 .avat-rule-icon {
    background-color: rgba(237,11,112,.13);
    color: #ed0b70;
}

.avat-rule-04 .avat-rule-icon {
    background-color: rgba(255,183,77,.13);
    color: #ffbd61;
}

.avat-rule-05 .avat-rule-icon {
    background-color: rgba(155,120,255,.13);
    color: #aa91ff;
}


/* =========================================================
   NOTE SECTION
========================================================= */

.avat-note-section {

    background-color:
        #f5f8fd;

}


.avat-note-pattern {

    position:
        absolute;

    width:
        700px;

    height:
        700px;

    top:
        -350px;

    right:
        -350px;

    border:
        1px solid
        rgba(1,43,143,.07);

    border-radius:
        50%;

    animation:
        avatRotate
        55s
        linear
        infinite;

}


.avat-note-pattern::before {

    content:
        "";

    position:
        absolute;

    inset:
        80px;

    border:
        1px dashed
        rgba(237,11,112,.13);

    border-radius:
        50%;

}


/* =========================================================
   NOTE BOX
========================================================= */

.avat-note-box {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        110px 1fr;

    gap:
        40px;

    align-items:
        center;

    padding:
        50px;

    border:
        1px solid
        rgba(1,43,143,.08);

    border-radius:
        28px;

    background-color:
        #ffffff;

    box-shadow:
        0 25px 70px
        rgba(1,43,143,.10);

    z-index:
        5;

    transition:
        transform .45s ease,
        box-shadow .45s ease;

}


.avat-note-box:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 35px 80px
        rgba(1,43,143,.15);

}


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

.avat-note-icon {

    width:
        100px;

    height:
        100px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        25px;

    background-color:
        rgba(1,43,143,.08);

    color:
        #012b8f;

    font-family:
        'themify';

    font-size:
        34px;

    transition:
        transform .6s ease,
        background-color .4s ease,
        color .4s ease;

}


.avat-note-box:hover
.avat-note-icon {

    transform:
        rotateY(180deg)
        scale(1.06);

    background-color:
        #ed0b70;

    color:
        #ffffff;

}


/* =========================================================
   NOTE CONTENT
========================================================= */

.avat-note-content h2 {

    color:
        #17213c;

}


.avat-note-content h2 span {

    color:
        #012b8f;

}


.avat-note-content p {

    max-width:
        850px;

    margin:
        0;

    color:
        #657187;

    font-size:
        15px;

    line-height:
        1.9;

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width:1199px) {

    .avat-section {

        padding:
            90px 0;

    }

    .avat-intro-grid {

        gap:
            50px;

    }

    .avat-content h2,
    .avat-heading h2,
    .avat-note-content h2 {

        font-size:
            43px;

    }

}


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

@media (max-width:991px) {

    .avat-section {

        padding:
            80px 0;

    }

    .avat-intro-grid {

        grid-template-columns:
            1fr;

        gap:
            50px;

    }

    .avat-image-box {

        height:
            600px;

    }

    .avat-rules-grid {

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

    }

    .avat-note-box {

        grid-template-columns:
            1fr;

        gap:
            25px;

    }

}


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

@media (max-width:767px) {

    .avat-section {

        padding:
            65px 0;

    }

    .avat-content h2,
    .avat-heading h2,
    .avat-note-content h2 {

        font-size:
            35px;

    }

    .avat-content > p {

        font-size:
            14px;

    }

    .avat-image-box {

        height:
            500px;

        border-radius:
            22px;

    }

    .avat-rules-grid {

        grid-template-columns:
            1fr;

    }

    .avat-rule-card {

        min-height:
            auto;

    }

    .avat-note-box {

        padding:
            30px 22px;

    }

    .avat-note-icon {

        width:
            80px;

        height:
            80px;

    }

    .avat-note-content p {

        font-size:
            14px;

    }

}


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

@media (max-width:575px) {

    .avat-section {

        padding:
            58px 0;

    }

    .avat-content h2,
    .avat-heading h2,
    .avat-note-content h2 {

        font-size:
            31px;

    }

    .avat-eyebrow {

        font-size:
            10px;

        letter-spacing:
            2px;

    }

    .avat-image-box {

        height:
            450px;

    }

    .avat-image-badge {

        right:
            0;

        bottom:
            25px;

        min-width:
            210px;

        padding:
            12px 14px;

    }

    .avat-note-box {

        padding:
            25px 18px;

        border-radius:
            20px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .avat-section *,
    .avat-section::before,
    .avat-section::after {

        animation:
            none !important;

        transition:
            none !important;

    }

}

/* =========================================================
   FACULTY & STAFF TABLE DESIGN
========================================================= */

.avfs-table-page {

    --avfs-blue: #012b8f;
    --avfs-dark: #081a45;
    --avfs-pink: #ed0b70;

    --avfs-light: #f5f8fd;

    font-family:
        'Poppins',
        sans-serif;

}


/* =========================================================
   SECTIONS
========================================================= */

.avfs-table-section {

    position: relative;

    padding: 60px 0;

    overflow: hidden;

    isolation: isolate;

}


.avfs-table-light {

    background-color:
        #f5f8fd;

}


.avfs-table-dark {

    background-color:
        #081a45;

}


.avfs-table-notice {

    background-color:
        #ffffff;

}


/* =========================================================
   ROTATING PATTERN
========================================================= */

.avfs-table-pattern {

    position: absolute;

    width: 650px;
    height: 650px;

    right: -320px;
    top: -300px;

    border:
        1px solid
        rgba(1,43,143,.07);

    border-radius: 50%;

    pointer-events: none;

    z-index: 0;

    animation:
        avfsTableRotate
        50s
        linear
        infinite;

}


.avfs-table-pattern::before {

    content: "";

    position: absolute;

    inset: 75px;

    border:
        1px dashed
        rgba(237,11,112,.14);

    border-radius: 50%;

}


.avfs-table-pattern::after {

    content: "";

    position: absolute;

    inset: 165px;

    border:
        1px solid
        rgba(1,43,143,.06);

    border-radius: 50%;

}


.avfs-table-dark .avfs-table-pattern {

    border-color:
        rgba(255,255,255,.07);

}


.avfs-table-dark .avfs-table-pattern::before {

    border-color:
        rgba(237,11,112,.20);

}


@keyframes avfsTableRotate {

    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }

}


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

.avfs-table-heading {

    position:
        relative;

    max-width:
        850px;

    margin:
        0 auto 5px;

    text-align:
        center;

    z-index:
        5;

}


.avfs-table-eyebrow {

    display:
        inline-block;

    margin-bottom:
        10px;

    color:
        #ed0b70;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        2.5px;

    text-transform:
        uppercase;

}


.avfs-table-heading h2 {

    margin:
        0;

    color:
        #17213c;

    font-size:
        46px;

    line-height:
        1.2;

    font-weight:
        700;

}


.avfs-table-heading h2 span {

    color:
        #012b8f;

}


.avfs-heading-dark h2 {

    color:
        #ffffff;

}


.avfs-heading-dark h2 span {

    color:
        #ed0b70;

}


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

.avfs-table-heading p {

    max-width:
        1150px;

    margin:
        25px auto 0;

    color:
        #657187;

    font-size:
        15px;

    line-height:
        1.9;

}


.avfs-heading-dark p {

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

}


/* =========================================================
   DIVIDER
========================================================= */

.avfs-table-divider {

    position:
        relative;

    width:
        75px;

    height:
        3px;

    margin:
        23px auto;

    background-color:
        #ed0b70;

}


.avfs-table-divider::after {

    content:
        "";

    position:
        absolute;

    width:
        10px;

    height:
        10px;

    right:
        -6px;

    top:
        50%;

    border-radius:
        50%;

    background-color:
        #012b8f;

    transform:
        translateY(-50%);

}


.avfs-divider-center {

    margin:
        23px auto;

}


/* =========================================================
   PUBLICATION NOTICE
========================================================= */

.avfs-publication-box {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        80px 1fr;

    align-items:
        center;

    gap:
        28px;

    padding:
        32px 38px;

    border:
        1px solid
        rgba(1,43,143,.09);

    border-radius:
        20px;

    background-color:
        #f5f8fd;

    box-shadow:
        0 20px 55px
        rgba(1,43,143,.08);

    z-index:
        5;

    transition:
        transform .45s ease,
        box-shadow .45s ease;

}


.avfs-publication-box:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 30px 70px
        rgba(1,43,143,.13);

}


.avfs-publication-icon {

    width:
        75px;

    height:
        75px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        18px;

    background-color:
        rgba(237,11,112,.10);

    color:
        #ed0b70;

    font-family:
        'themify';

    font-size:
        27px;

    transition:
        transform .6s ease,
        background-color .4s ease;

}


.avfs-publication-box:hover
.avfs-publication-icon {

    transform:
        rotateY(180deg);

    background-color:
        #ed0b70;

    color:
        #ffffff;

}


.avfs-publication-box h3 {

    margin:
        0 0 8px;

    color:
        #17213c;

    font-size:
        22px;

}


.avfs-publication-box p {

    margin:
        0;

    color:
        #657187;

    font-size:
        14px;

    line-height:
        1.8;

}


/* =========================================================
   TABLE WRAPPER
========================================================= */

.avfs-table-wrapper {   
    background-color: #081a45;
    position:
        relative;

    width:
        100%;

    overflow-x:
        auto;

    z-index:
        5;

    border-radius:
        18px;

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

}


/* =========================================================
   TABLE
========================================================= */

.avfs-staff-table {

    width:
        100%;

    min-width:
        760px;

    border-collapse:
        separate;

    border-spacing:
        0;

    overflow:
        hidden;

    background-color:
        rgba(255,255,255,.045);

}


/* =========================================================
   TABLE HEADER
========================================================= */

.avfs-staff-table thead th {

    position:
        relative;

    padding:
        18px 20px;

    color:
        #ffffff;

    background-color:
        #012b8f;

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        .5px;

    text-align:
        left;

    border-bottom:
        3px solid
        #ed0b70;

}


.avfs-staff-table thead th:first-child {

    width:
        80px;

    text-align:
        center;

}


.avfs-staff-table thead th:nth-child(3) {

    width:
        220px;

}


/* =========================================================
   TABLE BODY
========================================================= */

.avfs-staff-table tbody td {

    position:
        relative;

    padding:
        18px 20px;

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

    background-color:
        rgba(255,255,255,.035);

    font-size:
        13px;

    line-height:
        1.6;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);

    transition:
        color .35s ease,
        background-color .35s ease,
        padding-left .35s ease;

}


.avfs-staff-table tbody tr:last-child td {

    border-bottom:
        0;

}


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

.avfs-staff-table tbody td:first-child {

    color:
        rgba(237,11,112,.85);

    font-size:
        14px;

    font-weight:
        800;

    text-align:
        center;

}


/* =========================================================
   NAME
========================================================= */

.avfs-staff-table tbody td:nth-child(2) {

    color:
        #ffffff;

    font-size:
        14px;

    font-weight:
        600;

}


/* =========================================================
   ROLE
========================================================= */

.avfs-staff-table tbody td:nth-child(3) {

    color:
        #ed0b70;

    font-weight:
        600;

}


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

.avfs-staff-table tbody tr {

    position:
        relative;

    transition:
        transform .3s ease;

}


.avfs-staff-table tbody tr:hover td {

    background-color:
        rgba(237,11,112,.075);

    color:
        #ffffff;

}


.avfs-staff-table tbody tr:hover td:nth-child(2) {

    color:
        #ffffff;

}


.avfs-staff-table tbody tr:hover td:first-child {

    color:
        #ffffff;

}


.avfs-staff-table tbody tr:hover td {

    padding-left:
        24px;

}


/* =========================================================
   LIGHT TABLE
========================================================= */

.avfs-light-table {

    background-color:
        #ffffff;

    box-shadow:
        0 20px 55px
        rgba(1,43,143,.09);

}


.avfs-light-table thead th {

    background-color:
        #012b8f;

}


.avfs-light-table tbody td {

    color:
        #657187;

    background-color:
        #ffffff;

    border-bottom:
        1px solid
        rgba(1,43,143,.08);

}


.avfs-light-table tbody td:nth-child(2) {

    color:
        #17213c;

}


.avfs-light-table tbody td:first-child {

    color:
        #012b8f;

}


.avfs-light-table tbody td:nth-child(3) {

    color:
        #ed0b70;

}


.avfs-light-table tbody tr:nth-child(even) td {

    background-color:
        #f8faff;

}


.avfs-light-table tbody tr:hover td {

    background-color:
        rgba(237,11,112,.055);

    color:
        #17213c;

}


.avfs-light-table tbody tr:hover td:nth-child(2) {

    color:
        #012b8f;

}


.avfs-light-table tbody tr:hover td:first-child {

    color:
        #ed0b70;

}


/* =========================================================
   TABLE HEADER LIGHTING
========================================================= */

.avfs-table-wrapper::after {

    content:
        "";

    position:
        absolute;

    width:
        100px;

    height:
        400px;

    top:
        -150px;

    left:
        -150px;

    background-color:
        rgba(255,255,255,.12);

    transform:
        rotate(25deg);

    pointer-events:
        none;

    z-index:
        10;

}


.avfs-table-wrapper:hover::after {

    animation:
        avfsTableLight
        1.3s
        ease
        forwards;

}


@keyframes avfsTableLight {

    from {
        left: -150px;
    }

    to {
        left: 110%;
    }

}


/* =========================================================
   SCROLLBAR
========================================================= */

.avfs-table-wrapper::-webkit-scrollbar {

    height:
        7px;

}


.avfs-table-wrapper::-webkit-scrollbar-track {

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

}


.avfs-table-wrapper::-webkit-scrollbar-thumb {

    background-color:
        #ed0b70;

    border-radius:
        20px;

}


.avfs-light .avfs-table-wrapper::-webkit-scrollbar-track {

    background-color:
        #e9eef8;

}


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

@media (max-width:1199px) {

    .avfs-table-section {

        padding:
            85px 0;

    }

    .avfs-table-heading h2 {

        font-size:
            42px;

    }

}


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

@media (max-width:991px) {

    .avfs-table-section {

        padding:
            75px 0;

    }

    .avfs-publication-box {

        grid-template-columns:
            70px 1fr;

        padding:
            28px;

    }

    .avfs-publication-icon {

        width:
            65px;

        height:
            65px;

    }

    .avfs-staff-table {

        min-width:
            720px;

    }

}


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

@media (max-width:767px) {

    .avfs-table-section {

        padding:
            60px 0;

    }

    .avfs-table-heading {

        margin-bottom:
            35px;

    }

    .avfs-table-heading h2 {

        font-size:
            34px;

    }

    .avfs-table-heading p {

        font-size:
            14px;

    }

    .avfs-publication-box {

        grid-template-columns:
            1fr;

        gap:
            18px;

        padding:
            25px 20px;

    }

    .avfs-publication-box h3 {

        font-size:
            19px;

    }

    .avfs-publication-box p {

        font-size:
            13px;

    }

    .avfs-table-wrapper {

        border-radius:
            14px;

    }

}


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

@media (max-width:575px) {

    .avfs-table-section {

        padding:
            55px 0;

    }

    .avfs-table-heading h2 {

        font-size:
            30px;

    }

    .avfs-table-eyebrow {

        font-size:
            9px;

        letter-spacing:
            2px;

    }

    .avfs-staff-table {

        min-width:
            680px;

    }

    .avfs-staff-table thead th,
    .avfs-staff-table tbody td {

        padding:
            14px 15px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .avfs-table-page *,
    .avfs-table-page::before,
    .avfs-table-page::after {

        animation:
            none !important;

        transition:
            none !important;

    }

}

/* Fancybox Previous / Next Buttons */
.fancybox-button--arrow_left,
.fancybox-button--arrow_right {
    width: 55px !important;
    height: 55px !important;
    background: rgba(11, 93, 42, 0.90) !important;
    border-radius: 50% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transition: all 0.3s ease !important;
}

/* Previous */
.fancybox-button--arrow_left {
    left: 20px !important;
}

/* Next */
.fancybox-button--arrow_right {
    right: 20px !important;
}

/* Hover Effect */
.fancybox-button--arrow_left:hover,
.fancybox-button--arrow_right:hover {
    background: rgba(255, 200, 30, 0.95) !important;
    transform: translateY(-50%) scale(1.12) !important;
}

/* Arrow Icon */
.fancybox-button--arrow_left svg,
.fancybox-button--arrow_right svg {
    width: 28px !important;
    height: 28px !important;
}

/* Mobile */
@media (max-width: 767px) {

    .fancybox-button--arrow_left,
    .fancybox-button--arrow_right {
        width: 45px !important;
        height: 45px !important;
    }

    .fancybox-button--arrow_left {
        left: 10px !important;
    }

    .fancybox-button--arrow_right {
        right: 10px !important;
    }

}