:root {
    --font-primary: 'Poppins', sans-serif;
    --color-red: #EC2825;
    --color-yellow: #FCD702;
    --color-warning: #FFC107;
    --color-blue: #0D4079;
    --color-cyan-dark: #001D25;
    --color-primary-light: #FCD4D4;   /* Equivalent of the 20% opacity red */
    --color-secondary-light: #FFFBE5; /* Equivalent of the 20% opacity yellow */
    --color-tertiary-light: #E7ECF2;  /* Equivalent of the 10% opacity blue */
    --color-quaternary-light: #E4E8E9;  /* Equivalent of the 10% opacity white blue */
    --color-black: #061C25;
    --color-dark: #2B3037;
    --color-medium-dark: #4C5763;
    --color-medium: #6F7D8B;
    --color-medium-light: #C2C7CF;
    --color-light: #EAECEF;
    --color-ultra-light: #F5F6F9;
    --color-white: #FFFFFF;
    --color-green: #6fb231;
}

.scroll-to-top {
    position: fixed;
    bottom: 40px;
    right: 30px;
    background-color: var(--color-red);
    color: var(--color-white);
    border: none;
    padding: 12px 16px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease-in-out, transform .3s;
    z-index: 1000
}

.scroll-to-top.show {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1.1)
}

.header {
    position: sticky;
    top: 0;
    width: 100%;
    background: #000;
    padding: 20px 120px;
    z-index: 1000
}

.header .header-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.header .logo {
    width: 125px;
    height: 70px
}

.header .nav-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-left: 250px;
    margin-right: 150px
}

.header .nav-links a,
.header .nav-links span {
    color: var(--color-white);
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    transition: color .3s ease;
    cursor: pointer
}

.header .nav-links a:hover,
.header .nav-links span:hover,
.header .nav-links .active {
    color: #fbc51d
}

.header .nav-links .dropdown {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer
}

.header .nav-links .dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #222222b9;
    list-style: none;
    padding: 10px 0;
    min-width: 200px;
    display: none;
    border-radius: 5px;
    box-shadow: 0 4px 6px #0003
}

.header .nav-links .dropdown .dropdown-menu li {
    position: relative;
    padding: 10px 20px;
    transition: background .3s ease
}

.header .nav-links .dropdown .dropdown-menu li .subCourseList {
    position: absolute;
    top: 0%;
    left: 102%;
    background: #222222b9;
    list-style: none;
    padding: 10px 0;
    min-width: 200px;
    display: none;
    border-radius: 5px;
    box-shadow: 0 4px 6px #0003
}

.header .nav-links .dropdown .dropdown-menu li:hover .subCourseList {
    display: block
}

.header .nav-links .dropdown .dropdown-menu li:hover {
    background: #333
}

.header .nav-links .dropdown .dropdown-menu li a {
    color: var(--color-white);
    text-decoration: none;
    display: block
}

.header .nav-links .dropdown:hover .dropdown-menu {
    display: block
}

.header .nav-links .dropdown-menu li a.active {
    color: #ffc107;
    font-weight: 700
}

.header .header-actions {
    display: flex;
    align-items: center;
    gap: 20px
}

.header .header-actions .call-icon {
    width: 24px;
    height: 24px;
    cursor: pointer
}

.header .header-actions .call-popup-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #00000080;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999
}

.header .header-actions .call-popup {
    background: var(--color-white);
    padding: 30px;
    border-radius: 20px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 10px 30px #0003
}

.header .header-actions .call-popup h2 {
    font-size: 22px;
    font-weight: 600;
    color: #222;
    margin-bottom: 10px
}

.header .header-actions .call-popup .number {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 5px;
    color: #333
}

.header .header-actions .call-popup .timing {
    font-size: 14px;
    color: #777;
    margin-bottom: 20px
}

.header .header-actions .call-popup .buttons {
    display: flex;
    justify-content: center;
    gap: 15px
}

.header .header-actions .call-popup .buttons .call-btn {
    background: #007bff;
    color: var(--color-white);
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500
}

.header .header-actions .call-popup .buttons .call-btn:hover {
    background: #005ecb
}

.header .header-actions .call-popup .buttons .cancel-btn {
    background: #eee;
    padding: 10px 20px;
    border-radius: 25px;
    border: none;
    font-size: 14px;
    font-weight: 500
}

.header .header-actions .call-popup .buttons .cancel-btn:hover {
    background: #ddd
}

.header .header-actions .icon {
    width: 24px;
    height: 24px;
    cursor: pointer
}

.header .header-actions .enquire-btn {
    width: max-content;
    display: flex;
    height: 50px;
    padding: 12px 26px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    background: transparent;
    color: #fabc3f;
    font-size: 20px;
    font-weight: 400;
    border: 1px solid #fabc3f;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: color .3s ease, border-color .3s ease, background .3s ease
}

.header .header-actions .enquire-btn .btn-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #fabc3f;
    transform: translateY(-100%);
    transition: transform .6s ease-out;
    z-index: 1
}

.header .header-actions .enquire-btn .btn-text {
    position: relative;
    z-index: 2;
    transition: color .3s ease
}

.header .header-actions .enquire-btn .btn-text:after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: transparent;
    transform: translateY(0);
    transition: transform .6s ease-out;
    z-index: 1
}

.header .header-actions .enquire-btn:hover .btn-background {
    transform: translateY(0)
}

.header .header-actions .enquire-btn:hover .btn-text {
    color: #000
}

.header .header-actions .enquire-btn:hover .btn-text:after {
    transform: translateY(-100%)
}

.header .header-actions .enquire-btn:not(:hover) .btn-background {
    transform: translateY(-100%)
}

.header .header-actions .enquire-btn:not(:hover) .btn-text:after {
    transform: translateY(0)
}

.header .header-actions .menu-icon {
    cursor: pointer;
    color: var(--color-white);
    font-size: 28px
}

.mobile-menu {
    position: fixed;
    right: 0;
    top: 0;
    width: 25%;
    height: 100vh;
    background: #000;
    color: var(--color-white);
    padding: 30px;
    z-index: 1001;
    box-shadow: -2px 0 10px #ffffff1a;
    overflow-y: auto;
    transition: transform .3s ease-in-out
}

.mobile-menu .close-btn {
    background: none;
    border: none;
    color: #fbc51d;
    font-size: 24px;
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 20px
}

.mobile-menu .menu-list {
    list-style: none;
    padding: 0;
    margin-top: 50px
}

.mobile-menu .menu-list li {
    padding: 12px 0
}

.mobile-menu .menu-list li a {
    color: var(--color-white);
    font-size: 18px;
    text-decoration: none;
    font-weight: 500;
    transition: color .3s ease
}

.mobile-menu .menu-list li a:hover {
    color: #fbc51d
}

.mobile-menu .menu-list li .menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 12px 0;
    font-size: 18px;
    font-weight: 500
}

.mobile-menu .menu-list li .menu-header:hover {
    color: #fbc51d
}

.mobile-menu .menu-list li .plus-icon {
    color: #fbc51d;
    cursor: pointer;
    font-size: 18px
}

.mobile-menu .menu-list li .submenu {
    padding-left: 20px;
    padding-top: 5px
}

.mobile-menu .menu-list li .submenu li {
    padding: 8px 0
}

.mobile-menu .menu-list li .submenu li a {
    font-size: 16px;
    color: #bbb;
    transition: color .3s ease
}

.mobile-menu .menu-list li .submenu li a:hover {
    color: #fbc51d
}

.menu-list li.open .submenu {
    display: block
}

.mobile-menu::-webkit-scrollbar {
    display: none
}

.submenu {
    padding-left: 20px;
    padding-top: 5px
}

.submenu li {
    padding: 8px 0
}

.submenu li a {
    font-size: 16px;
    color: #bbb;
    transition: color .3s ease
}

.submenu li a:hover {
    color: #fbc51d
}

.submenu li a.active {
    color: #fbc51d !important;
    font-weight: 600
}

.buzz-link {
    display: inline-flex;
    align-items: center;
    padding: 10px 5px;
    color: #fbc51d;
    font-weight: 700;
    text-decoration: none;
    position: relative
}

.buzz-link:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 15px #0003
}

.buzz-text {
    color: #fbc51d !important
}

.buzz-icon {
    width: 20px;
    height: 20px;
    animation: spin-slow 4s linear infinite;
    margin-right: 5px
}

.buzz-badge {
    background: var(--color-white);
    color: #f0a !important;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
    margin-left: 6px;
    animation: pop-in 1s ease-in-out infinite alternate
}

@keyframes spin-slow {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 10px #fbc51d99
    }

    50% {
        box-shadow: 0 0 20px #fbc51d
    }

    to {
        box-shadow: 0 0 10px #fbc51d99
    }
}

@keyframes pop-in {
    0% {
        transform: scale(1)
    }

    to {
        transform: scale(1.15)
    }
}

@media (max-width: 1536px) {
    .header {
        padding: 15px 60px
    }

    .header .nav-links {
        gap: 15px;
        margin-left: 50px;
        margin-right: 50px
    }

    .header .nav-links a,
    .header .nav-links span {
        font-size: 16px
    }

    .header .header-actions {
        gap: 15px
    }

    .header .header-actions .icon {
        width: 22px;
        height: 22px
    }

    .header .header-actions .enquire-btn {
        height: 45px;
        padding: 10px 20px;
        font-size: 16px
    }

    .mobile-menu {
        width: 35%;
        padding: 25px
    }

    .mobile-menu .menu-list {
        margin-top: 40px
    }

    .mobile-menu .menu-list li {
        padding: 10px 0
    }

    .mobile-menu .menu-list li .menu-header,
    .mobile-menu .menu-list li .plus-icon {
        font-size: 16px
    }

    .mobile-menu .menu-list li .submenu {
        padding-left: 15px
    }

    .mobile-menu .menu-list li .submenu li a {
        font-size: 14px
    }

    .mobile-menu .close-btn {
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .header {
        padding: 15px 40px
    }

    .header .nav-links {
        gap: 20px;
        margin-left: 40px;
        margin-right: 40px
    }

    .header .nav-links a,
    .header .nav-links span {
        font-size: 15px
    }

    .header .header-actions {
        gap: 12px
    }

    .header .header-actions .icon {
        width: 20px;
        height: 20px
    }

    .header .header-actions .enquire-btn {
        height: 42px;
        padding: 8px 18px;
        font-size: 15px
    }

    .mobile-menu {
        width: 30%;
        padding: 20px
    }

    .mobile-menu .menu-list {
        margin-top: 35px
    }

    .mobile-menu .menu-list li {
        padding: 8px 0
    }

    .mobile-menu .menu-list li .menu-header,
    .mobile-menu .menu-list li .plus-icon {
        font-size: 15px
    }

    .mobile-menu .menu-list li .submenu {
        padding-left: 12px
    }

    .mobile-menu .menu-list li .submenu li a {
        font-size: 13.5px
    }

    .mobile-menu .close-btn {
        font-size: 20px
    }
}

@media (max-width: 1280px) {
    .header {
        padding: 10px 30px
    }

    .header .nav-links {
        gap: 20px;
        margin-left: 30px;
        margin-right: 30px
    }

    .header .nav-links a,
    .header .nav-links span {
        font-size: 14px
    }

    .header .header-actions {
        gap: 10px
    }

    .header .header-actions .icon {
        width: 18px;
        height: 18px
    }

    .header .header-actions .enquire-btn {
        height: 40px;
        padding: 6px 16px;
        font-size: 14px
    }

    .mobile-menu {
        width: 35%;
        padding: 18px
    }

    .mobile-menu .menu-list {
        margin-top: 30px
    }

    .mobile-menu .menu-list li {
        padding: 6px 0
    }

    .mobile-menu .menu-list li .menu-header,
    .mobile-menu .menu-list li .plus-icon {
        font-size: 14px
    }

    .mobile-menu .menu-list li .submenu {
        padding-left: 10px
    }

    .mobile-menu .menu-list li .submenu li a {
        font-size: 13px
    }

    .mobile-menu .close-btn {
        font-size: 18px
    }
}

@media (max-width: 480px) {
    .header {
        padding: 15px 20px
    }

    .header .header-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%
    }

    .header .logo {
        width: 57px;
        height: auto
    }

    .header .nav-links {
        display: none
    }

    .header .header-actions {
        display: flex;
        align-items: center;
        gap: 10px
    }

    .header .header-actions .call-icon {
        width: 20px;
        height: 20px
    }

    .header .header-actions .call-popup {
        padding: 20px;
        border-radius: 15px;
        width: 90%
    }

    .header .header-actions .call-popup h2 {
        font-size: 18px
    }

    .header .header-actions .call-popup .number {
        font-size: 16px
    }

    .header .header-actions .call-popup .timing {
        font-size: 12px
    }

    .header .header-actions .call-popup .buttons {
        flex-direction: column;
        gap: 10px
    }

    .header .header-actions .call-popup .buttons .call-btn,
    .header .header-actions .call-popup .buttons .cancel-btn {
        width: 100%;
        padding: 10px 0;
        font-size: 14px
    }

    .header .header-actions .animated-button {
        height: 32px;
        font-size: 12px
    }

    .header .header-actions .icon {
        width: 22px;
        height: 22px
    }

    .header .header-actions .enquire-btn {
        display: flex;
        height: 24px;
        padding: 12px 15px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        font-size: 12px
    }

    .header .header-actions .menu-icon {
        font-size: 26px
    }

    .mobile-menu {
        width: 80%;
        padding: 20px
    }

    .mobile-menu .menu-list {
        margin-top: 30px
    }

    .mobile-menu .menu-list li {
        padding: 10px 0
    }

    .mobile-menu .menu-list li .menu-header,
    .mobile-menu .menu-list li .plus-icon {
        font-size: 16px
    }

    .mobile-menu .menu-list li .submenu {
        padding-left: 15px
    }

    .mobile-menu .menu-list li .submenu li a {
        font-size: 14px
    }

    .mobile-menu .close-btn {
        font-size: 22px
    }
}

.centered-banner {
    width: 100%;
    height: 14rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center
}

.centered-banner__content {
    display: flex;
    align-items: center;
    gap: 5rem
}

.centered-banner__text {
    font-weight: 400;
    font-size: 2.67rem;
    text-align: center;
    justify-content: center;
    max-width: 46.83rem;
    color: var(--color-white)
}

.centered-banner__button {
    padding: 1rem 2.167rem;
    width: 15.33rem;
    height: 4.25rem;
    font-size: 24px;
    font-weight: 650;
    color: var(--color-red);
    background-color: var(--color-white);
    border: none;
    border-radius: .833rem;
    cursor: pointer;
    transition: background-color .3s
}

.centered-banner__button:hover {
    transform: scale(1.1)
}

@media (max-width: 1536px) {
    .centered-banner {
        height: 10rem !important
    }

    .centered-banner__content {
        gap: 4rem !important
    }

    .centered-banner__text {
        font-size: 2.2rem !important;
        max-width: 40rem !important
    }

    .centered-banner__button {
        width: 12rem !important;
        height: 3.5rem !important;
        font-size: 20px !important
    }
}

@media (max-width: 1440px) {
    .centered-banner {
        height: 9rem !important
    }

    .centered-banner__content {
        gap: 3.5rem !important
    }

    .centered-banner__text {
        font-size: 2rem !important;
        max-width: 36rem !important
    }

    .centered-banner__button {
        width: 11rem !important;
        height: 3.2rem !important;
        font-size: 18px !important
    }
}

@media (max-width: 1280px) {
    .centered-banner {
        height: 8rem !important
    }

    .centered-banner__content {
        gap: 3rem !important
    }

    .centered-banner__text {
        font-size: 1.8rem !important;
        max-width: 32rem !important
    }

    .centered-banner__button {
        width: 10rem !important;
        height: 3rem !important;
        font-size: 16px !important
    }
}

@media (max-width: 480px) {
    .centered-banner {
        width: 100% !important;
        background-size: cover !important;
        height: 10rem !important
    }

    .centered-banner__content {
        flex-direction: column !important;
        gap: 1rem !important
    }

    .centered-banner__text {
        font-size: 18px !important;
        font-weight: 400 !important;
        text-align: center !important
    }

    .centered-banner__button {
        width: 12rem !important;
        height: 2.8rem !important;
        font-size: 1.2rem !important;
        padding: .4rem 1rem !important
    }
}

.homeHero {
    position: relative;
    width: 100%;
    height: 44rem;
    margin: auto;
    overflow: hidden
}

.homeHero .arrows {
    display: flex;
    position: absolute;
    width: 100%;
    flex-direction: row;
    z-index: 3;
    justify-content: space-between;
    padding: 0 2%;
    top: 45%
}

.homeHero .arrows .left:hover {
    transform: translate(-10%, -10%) scale(1.5)
}

.homeHero .arrows .right:hover {
    transform: translate(10%, 10%) scale(1.5)
}

.homeHero .hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.homeHero .hero-video:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1f1f1fa0;
    pointer-events: none
}

.homeHero .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #00000095, #00000083);
    z-index: 1
}

.homeHero .hero-content {
    position: absolute;
    margin: 12rem 0 0 7.99rem;
    width: 70rem;
    padding: 0;
    z-index: 2;
    display: flex;
    flex-direction: column
}

.homeHero .hero-content .hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: #fbc51d
}

.homeHero .hero-content .hero-subtitle {
    color: var(--color-white);
    font-size: 2.7rem;
    font-weight: 650;
    margin-bottom: 1.875rem;
    line-height: normal
}

.homeHero .hero-content .hero-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15rem;
    padding: .8rem;
    font-size: 1.5rem;
    font-weight: 650;
    background-color: #fbc51d;
    color: #2c2c2c;
    text-decoration: none;
    border-radius: .625rem;
    transition: background-color .3s, color .3s
}

.homeHero .hero-content .hero-button:hover {
    background-color: #2c2c2c;
    color: var(--color-white)
}

.homeHero .hactive {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: 2.5rem;
    position: absolute;
    top: 90%;
    width: 100%;
    z-index: 3
}

.homeHero .hactive .hpage {
    height: .825rem;
    width: .825rem;
    border-radius: 50%;
    background-color: var(--color-white)33;
    transition: background-color .3s ease
}

.homeHero .hactive .hpage.hactive-page {
    background-color: var(--color-white)
}

@media (max-width: 1536px) {
    .homeHero {
        height: 40rem
    }

    .homeHero .hero-content {
        margin: 10rem 0 0 6.5rem;
        width: 60rem
    }

    .homeHero .hero-content .hero-title {
        font-size: 3rem
    }

    .homeHero .hero-content .hero-subtitle {
        font-size: 2.3rem;
        margin-bottom: 1.5rem
    }

    .homeHero .hero-content .hero-button {
        width: 13rem;
        font-size: 1.3rem;
        padding: .7rem
    }

    .homeHero .hactive {
        margin-top: 2rem
    }

    .homeHero .hactive .hpage {
        height: .75rem;
        width: .75rem
    }
}

@media (max-width: 1440px) {
    .homeHero {
        height: 36rem
    }

    .homeHero .hero-content {
        margin: 8.5rem 0 0 6rem;
        width: 55rem
    }

    .homeHero .hero-content .hero-title {
        font-size: 2.7rem
    }

    .homeHero .hero-content .hero-subtitle {
        font-size: 2rem;
        margin-bottom: 1.25rem
    }

    .homeHero .hero-content .hero-button {
        width: 12rem;
        font-size: 1.2rem;
        padding: .65rem
    }

    .homeHero .hactive {
        margin-top: 1.8rem
    }

    .homeHero .hactive .hpage {
        height: .7rem;
        width: .7rem
    }
}

@media (max-width: 1280px) {
    .homeHero {
        height: 32rem
    }

    .homeHero .hero-content {
        margin: 7rem 0 0 5.5rem;
        width: 48rem
    }

    .homeHero .hero-content .hero-title {
        font-size: 2.3rem
    }

    .homeHero .hero-content .hero-subtitle {
        font-size: 1.7rem;
        margin-bottom: 1rem
    }

    .homeHero .hero-content .hero-button {
        width: 11rem;
        font-size: 1.1rem;
        padding: .6rem
    }

    .homeHero .hactive {
        margin-top: 1.5rem
    }

    .homeHero .hactive .hpage {
        height: .65rem;
        width: .65rem
    }
}

@media (max-width: 480px) {
    .homeHero {
        height: 16.063rem !important;
        width: 100% !important
    }

    .homeHero .arrows {
        padding: 0
    }

    .homeHero .arrows .left,
    .homeHero .arrows .right {
        scale: .7
    }

    .homeHero .section4 .hero-slide video {
        object-fit: cover
    }

    .homeHero .hero-content {
        width: 80% !important;
        margin: 3rem 2rem !important;
        padding: 0 !important
    }

    .homeHero .hero-content .hero-title {
        font-size: 1.125rem !important;
        width: fit-content !important
    }

    .homeHero .hero-content .hero-subtitle {
        width: 280px;
        font-size: .875rem !important;
        margin-bottom: 2rem !important
    }

    .homeHero .hero-content .hero-button {
        width: fit-content !important;
        padding: .594rem 1.2rem !important;
        font-size: .875rem !important
    }

    .homeHero .hactive {
        scale: .6;
        margin-top: 0;
        top: 90%
    }
}

.legacy {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 18.5rem;
    background-color: var(--color-white)
}

.legacy__item {
    width: 20vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .8rem
}

.legacy__item .legacy__number {
    color: #72bf44;
    font-size: 2.67rem;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.legacy__item .legacy__text {
    color: #2c2c2c;
    font-size: 1.33rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.legacy__divider {
    width: .167rem;
    height: 6.67rem;
    background: #2c2c2c99;
    margin: 0 6.25rem
}

@media (max-width: 1536px) {
    .legacy {
        padding: 1rem 16rem !important
    }

    .legacy__item {
        gap: .45rem !important
    }

    .legacy__item .legacy__number {
        font-size: 2rem !important
    }

    .legacy__item .legacy__text {
        font-size: 1.25rem !important
    }

    .legacy__divider {
        width: .15rem !important;
        height: 6.25rem !important;
        margin: 0 5.5rem !important
    }
}

@media (max-width: 1440px) {
    .legacy {
        padding: 1rem 14rem !important
    }

    .legacy__item {
        gap: .4rem !important
    }

    .legacy__item .legacy__number {
        font-size: 1.85rem !important
    }

    .legacy__item .legacy__text {
        font-size: 1.125rem !important
    }

    .legacy__divider {
        width: .14rem !important;
        height: 6rem !important;
        margin: 0 5rem !important
    }
}

@media (max-width: 1280px) {
    .legacy {
        padding: 1rem 11.5rem !important
    }

    .legacy__item {
        gap: .35rem !important
    }

    .legacy__item .legacy__number {
        font-size: 1.65rem !important
    }

    .legacy__item .legacy__text {
        font-size: 1rem !important
    }

    .legacy__divider {
        width: .13rem !important;
        height: 5.5rem !important;
        margin: 0 4rem !important
    }
}

@media (min-width: 420px) and (max-width: 480px) {
    .legacy {
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important
    }

    .legacy__item {
        width: 25vw !important
    }

    .legacy__item .legacy__number {
        font-size: 2rem !important
    }

    .legacy__item .legacy__text {
        font-size: 1rem !important
    }

    .legacy__divider {
        margin: 0 24px !important
    }

    .legacy__divider:nth-child(2) {
        margin: 10px 62px !important;
        width: .125rem !important
    }

    .legacy__divider:nth-child(6) {
        margin: 10px 62px !important;
        width: .125rem !important
    }

    .legacy__divider:nth-child(4) {
        display: none !important
    }
}

@media (min-width: 360px) and (max-width: 420px) {
    .legacy {
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important
    }

    .legacy__item {
        width: 30vw !important
    }

    .legacy__item .legacy__number {
        font-size: 1.5rem !important
    }

    .legacy__item .legacy__text {
        font-size: 1rem !important
    }

    .legacy__divider {
        margin: 0 30px !important
    }

    .legacy__divider:nth-child(2) {
        margin: 10px 40px !important;
        width: .125rem !important
    }

    .legacy__divider:nth-child(4) {
        display: none !important
    }
}

.why-arena {
    display: flex;
    justify-content: space-between;
    position: relative;
    max-width: 100%;
    margin: auto;
    margin-bottom: 5.5rem;
    align-items: flex-start
}

.why-arena .video-background {
    position: absolute;
    padding: 2.625rem;
    width: 55rem;
    height: 55rem;
    scale: 2;
    opacity: .4;
    z-index: 1;
    pointer-events: none
}

.why-arena .why-arena-left {
    padding: 5.625rem 0 0 8rem;
    flex: 1;
    margin: auto;
    width: 26.75rem;
    z-index: 1;
    position: relative
}

.why-arena .why-arena-left .why-title {
    color: var(--color-red);
    font-size: 3rem;
    font-style: normal;
    font-weight: 400;
    line-height: 3.60875rem;
    width: 26.75rem;
    margin-bottom: 1.25rem;
    text-shadow: 0rem .25rem .25rem rgba(0, 0, 0, .3)
}

.why-arena .why-arena-left .why-description {
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 650;
    line-height: 1.35rem;
    width: 31.6875rem;
    color: #2c2c2c
}

.why-arena .why-arena-right {
    padding: 2rem 8.25rem 0 0;
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .8rem;
    z-index: 1;
    position: relative
}

.why-arena .why-arena-right .card {
    position: relative;
    width: 19.25rem;
    height: 16.8125rem;
    border-radius: .625rem;
    perspective: 62.5rem
}

.why-arena .why-arena-right .card .card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform .6s;
    transform-style: preserve-3d;
    border-radius: .625rem
}

.why-arena .why-arena-right .card:hover .card-inner {
    transform: rotateY(180deg)
}

.why-arena .why-arena-right .card .card-front,
.why-arena .why-arena-right .card .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem;
    border-radius: .625rem;
    text-align: left
}

.why-arena .why-arena-right .card .card-front {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 2.5rem;
    border: .0625rem solid rgba(255, 242, 0, .4)
}

.why-arena .why-arena-right .card .card-front .card-title {
    color: var(--color-white)
}

.why-arena .why-arena-right .card .card-back {
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    text-align: left;
    padding: .8rem;
    position: relative
}

.why-arena .why-arena-right .card .card-title {
    font-size: 1.325rem;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    color: var(--color-white)
}

.why-arena .why-arena-right .card .card-description {
    font-size: 1.175rem;
    margin-top: .3125rem;
    font-weight: 200;
    color: var(--color-white)
}

.why-arena .why-arena-right .card:nth-child(3) .card-back,
.why-arena .why-arena-right .card:nth-child(5) .card-back,
.why-arena .why-arena-right .card:nth-child(7) .card-back {
    color: #2c2c2c
}

.why-arena .why-arena-right .card:nth-child(3) .card-back .card-title,
.why-arena .why-arena-right .card:nth-child(5) .card-back .card-title,
.why-arena .why-arena-right .card:nth-child(7) .card-back .card-title {
    color: #2c2c2c
}

.why-arena .why-arena-right .card:nth-child(3) .card-back .card-description,
.why-arena .why-arena-right .card:nth-child(5) .card-back .card-description,
.why-arena .why-arena-right .card:nth-child(7) .card-back .card-description {
    color: #2c2c2c
}

.why-arena .why-arena-right .card:nth-child(3) .card-back .card-image,
.why-arena .why-arena-right .card:nth-child(5) .card-back .card-image,
.why-arena .why-arena-right .card:nth-child(7) .card-back .card-image {
    filter: brightness(0) invert(0)
}

.why-arena .why-arena-right .card .card-image {
    position: absolute;
    top: 1.225rem;
    left: 1.225rem;
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
    transition: filter .3s ease;
    z-index: 2
}

.why-arena .why-arena-right .card .card-back .card-image {
    position: absolute;
    top: 1.225rem;
    left: 1.225rem;
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover
}

.why-arena .why-arena-right .card .card-back .card-title {
    font-size: 1.125rem;
    margin-top: 2.5rem;
    line-height: 1.35rem
}

.why-arena .pagination-buttons {
    display: flex;
    gap: 10px;
    position: absolute;
    right: 3%;
    top: 37%;
    z-index: 2
}

.why-arena .slider-icon .left-icon,
.why-arena .slider-icon .right-icon {
    cursor: pointer;
    background-color: #fbc51d;
    color: #2c2c2c;
    border-radius: 50%;
    font-size: 2.25rem !important;
    padding: .5rem !important;
    height: 2rem !important;
    width: 2rem !important;
    display: flex;
    opacity: 0
}

.why-arena .sactive {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    margin: 2rem auto;
    opacity: 0
}

.why-arena .sactive .page {
    height: .5rem;
    width: .5rem;
    border-radius: 50%;
    background-color: #da1e3733;
    transition: background-color .3s ease
}

.why-arena .sactive .page.active-page {
    background-color: #da1e37
}

@media (max-width: 1536px) {
    .why-arena {
        margin-bottom: 7rem !important
    }

    .why-arena .video-background {
        width: 50rem !important;
        height: 45rem !important;
        scale: 1.8 !important
    }

    .why-arena .why-arena-left {
        padding: 4.5rem 0 0 6rem !important;
        width: 24rem !important
    }

    .why-arena .why-arena-left .why-title {
        font-size: 2.8rem !important;
        line-height: 3.2rem !important;
        width: 24rem !important
    }

    .why-arena .why-arena-left .why-description {
        font-size: 1.3rem !important;
        width: 29rem !important
    }

    .why-arena .why-arena-right {
        padding: 1.5rem 6.5rem 0 0 !important;
        gap: .6rem !important
    }

    .why-arena .why-arena-right .card {
        width: 16rem !important;
        height: 13rem !important
    }

    .why-arena .why-arena-right .card .card-title {
        font-size: 1.2rem !important
    }

    .why-arena .why-arena-right .card .card-description {
        font-size: 1.1rem !important
    }

    .why-arena .why-arena-right .card .card-image {
        width: 3rem !important;
        height: 3rem !important
    }

    .why-arena .pagination-buttons {
        right: 3% !important;
        margin-top: 30% !important
    }

    .why-arena .slider-icon .left-icon,
    .why-arena .slider-icon .right-icon {
        font-size: 2rem !important;
        height: 2rem !important;
        width: 2rem !important
    }

    .why-arena .sactive {
        display: none !important
    }
}

@media (max-width: 1440px) {
    .why-arena {
        margin-bottom: 6rem !important
    }

    .why-arena .video-background {
        width: 45rem !important;
        height: 40rem !important;
        scale: 1.7 !important
    }

    .why-arena .why-arena-left {
        padding: 4rem 0 0 5.5rem !important;
        width: 22rem !important
    }

    .why-arena .why-arena-left .why-title {
        font-size: 2.6rem !important;
        line-height: 3rem !important;
        width: 22rem !important
    }

    .why-arena .why-arena-left .why-description {
        font-size: 1.2rem !important;
        width: 27rem !important
    }

    .why-arena .why-arena-right {
        padding: 1.5rem 5.5rem 0 0 !important;
        gap: .6rem !important
    }

    .why-arena .why-arena-right .card {
        width: 14.5rem !important;
        height: 12rem !important
    }

    .why-arena .why-arena-right .card .card-title {
        font-size: 1.1rem !important
    }

    .why-arena .why-arena-right .card .card-description {
        font-size: 1rem !important
    }

    .why-arena .why-arena-right .card .card-image {
        width: 2.75rem !important;
        height: 2.75rem !important
    }

    .why-arena .why-arena-right .card .card-back .card-title {
        font-size: .9rem !important
    }

    .why-arena .pagination-buttons {
        right: 3% !important;
        margin-top: 28% !important
    }

    .why-arena .slider-icon .left-icon,
    .why-arena .slider-icon .right-icon {
        font-size: 1.9rem !important;
        height: 1.9rem !important;
        width: 1.9rem !important
    }

    .why-arena .sactive {
        display: none !important
    }
}

@media (max-width: 1280px) {
    .why-arena {
        margin-bottom: 5rem !important
    }

    .why-arena .video-background {
        width: 40rem !important;
        height: 35rem !important;
        scale: 1.9 !important
    }

    .why-arena .why-arena-left {
        padding: 3.5rem 0 0 4.5rem !important;
        width: 20rem !important
    }

    .why-arena .why-arena-left .why-title {
        font-size: 2.3rem !important;
        line-height: 2.8rem !important;
        width: 20rem !important
    }

    .why-arena .why-arena-left .why-description {
        font-size: 1.1rem !important;
        width: 25rem !important
    }

    .why-arena .why-arena-right {
        padding: 1.5rem 4.5rem 0 0 !important;
        gap: .5rem !important
    }

    .why-arena .why-arena-right .card {
        width: 14.5rem !important;
        height: 11rem !important
    }

    .why-arena .why-arena-right .card .card-title {
        font-size: 1rem !important
    }

    .why-arena .why-arena-right .card .card-description {
        font-size: .95rem !important
    }

    .why-arena .why-arena-right .card .card-image {
        width: 2.5rem !important;
        height: 2.5rem !important
    }

    .why-arena .why-arena-right .card .card-back .card-title {
        font-size: .95rem !important
    }

    .why-arena .pagination-buttons {
        right: 3% !important;
        margin-top: 26% !important
    }

    .why-arena .slider-icon .left-icon,
    .why-arena .slider-icon .right-icon {
        font-size: 1.75rem !important;
        height: 1.75rem !important;
        width: 1.75rem !important
    }

    .why-arena .sactive {
        display: none !important
    }
}

@media (max-width: 480px) {
    .why-arena {
        flex-direction: column !important;
        align-items: left !important;
        text-align: left !important;
        padding: 3rem 0rem 0rem !important;
        position: relative !important;
        width: 100% !important;
        max-width: 375px !important
    }

    .why-arena .video-background {
        width: 90% !important;
        height: 90% !important;
        scale: 1.2 !important;
        padding: 0;
        margin: 0
    }

    .why-arena .why-arena-left {
        padding: 0rem .5rem !important;
        width: 100% !important;
        text-align: left !important
    }

    .why-arena .why-arena-left .why-title {
        margin-bottom: 0 !important;
        font-size: 1.5rem !important;
        line-height: normal !important;
        width: auto !important
    }

    .why-arena .why-arena-left .why-description {
        font-size: 1rem !important;
        line-height: 1.4rem !important;
        width: auto !important;
        margin: 0 auto !important
    }

    .why-arena .why-arena-right {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 1rem 0 !important;
        gap: 1rem !important;
        width: 100% !important;
        justify-content: flex-start !important
    }

    .why-arena .why-arena-right::-webkit-scrollbar {
        display: none !important
    }

    .why-arena .why-arena-right .card {
        flex: 0 0 48% !important;
        scroll-snap-align: start !important;
        width: 180px !important;
        padding-top: 10%;
        height: 240px !important
    }

    .why-arena .why-arena-right .card .card-back .card-title {
        font-size: 14px !important;
        padding-top: 1rem
    }

    .why-arena .why-arena-right .card .card-back .card-description {
        font-size: .8rem !important
    }

    .why-arena .why-arena-right .card .card-back .card-image {
        position: absolute;
        top: 1.225rem;
        left: 1.225rem;
        width: 24px;
        height: 24px;
        object-fit: cover
    }

    .why-arena .why-arena-right .card .card-inner {
        transform: rotateY(180deg) !important
    }

    .pagination-buttons .slider-icon {
        opacity: 1 !important
    }

    .sactive {
        margin: 20px;
        opacity: 1 !important
    }
}

.recruiters {
    padding: 50px 0;
    text-align: left;
    background-color: var(--color-white)
}

.recruiters .recruiter-container .recruiter-header {
    margin: auto;
    display: flex;
    flex-direction: column;
    max-width: 120rem;
    padding: 0 8rem
}

.recruiters .recruiter-container .recruiter-header h2 {
    color: var(--color-red);
    font-size: 3rem;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 10px;
    text-shadow: 0 .3rem .3rem rgba(0, 0, 0, .3)
}

.recruiters .recruiter-container .recruiter-header p {
    font-size: 1.5rem;
    font-weight: 650;
    color: #2c2c2c;
    margin-bottom: 27px;
    width: 65rem;
    line-height: 1.75rem
}

.recruiters .recruiter-container .scrolling-container {
    position: relative;
    overflow: hidden;
    padding: 4rem 0;
    border-top: .1875rem solid rgba(44, 44, 44, .5);
    border-bottom: .1875rem solid rgba(44, 44, 44, .5)
}

.recruiters .recruiter-container .scrolling-container .scrolling-wrapper {
    width: max-content;
    white-space: nowrap;
    display: flex;
    gap: 2rem;
    animation: scroll-right 60s linear infinite
}

.recruiters .recruiter-container .scrolling-container .scroll-box {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 6rem;
    padding: 2rem 1.5rem;
    border-radius: 5px;
    border: 1px solid rgba(231, 181, 26, .8);
    white-space: nowrap;
    color: #2c2c2c;
    font-size: 18px;
    font-weight: 700;
    line-height: 2rem
}

.recruiters .recruiter-container .scrolling-container .scrolling-wrapper-2 {
    display: flex;
    width: max-content;
    gap: 2rem;
    animation: scroll-left 60s linear infinite;
    margin-top: 3rem
}

.recruiters .recruiter-container .scrolling-container .scroll-box-2 {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 6rem;
    padding: 2rem 1.5rem;
    border-radius: 5px;
    border: 1px solid rgba(231, 181, 26, .8);
    color: #2c2c2c;
    font-size: 18px;
    font-weight: 700;
    line-height: 2rem;
    white-space: nowrap
}

@media (max-width: 1536px) {
    .recruiters {
        padding: 40px 0 !important
    }

    .recruiters .recruiter-container .recruiter-header {
        max-width: 110rem !important;
        padding: 0 6rem !important
    }

    .recruiters .recruiter-container .recruiter-header h2 {
        font-size: 2.8rem !important;
        margin-bottom: 8px !important
    }

    .recruiters .recruiter-container .recruiter-header p {
        font-size: 1.4rem !important;
        width: 60rem !important;
        line-height: 1.6rem !important
    }

    .recruiters .recruiter-container .scrolling-container {
        padding: 3rem 0 !important;
        border-top: .15rem solid rgba(44, 44, 44, .5) !important;
        border-bottom: .15rem solid rgba(44, 44, 44, .5) !important
    }

    .recruiters .recruiter-container .scrolling-container .scrolling-wrapper,
    .recruiters .recruiter-container .scrolling-container .scrolling-wrapper-2 {
        gap: 1.8rem !important;
        animation-duration: 60s !important
    }

    .recruiters .recruiter-container .scrolling-container .scroll-box,
    .recruiters .recruiter-container .scrolling-container .scroll-box-2 {
        height: 5.5rem !important;
        padding: 1.8rem 1.3rem !important;
        font-size: 1.6rem !important;
        line-height: 1.8rem !important
    }

    .recruiters .recruiter-container .scrolling-container .scrolling-wrapper-2 {
        margin-top: 2.5rem !important
    }
}

@media (max-width: 1440px) {
    .recruiters {
        padding: 36px 0 !important
    }

    .recruiters .recruiter-container .recruiter-header {
        max-width: 100rem !important;
        padding: 0 5rem !important
    }

    .recruiters .recruiter-container .recruiter-header h2 {
        font-size: 2.6rem !important;
        margin-bottom: 7px !important
    }

    .recruiters .recruiter-container .recruiter-header p {
        font-size: 1.3rem !important;
        width: 55rem !important;
        line-height: 1.5rem !important
    }

    .recruiters .recruiter-container .scrolling-container {
        padding: 2.8rem 0 !important;
        border-top: .14rem solid rgba(44, 44, 44, .5) !important;
        border-bottom: .14rem solid rgba(44, 44, 44, .5) !important
    }

    .recruiters .recruiter-container .scrolling-container .scrolling-wrapper,
    .recruiters .recruiter-container .scrolling-container .scrolling-wrapper-2 {
        gap: 1.6rem !important;
        animation-duration: 60s !important
    }

    .recruiters .recruiter-container .scrolling-container .scroll-box,
    .recruiters .recruiter-container .scrolling-container .scroll-box-2 {
        height: 5.2rem !important;
        padding: 1.6rem 1.2rem !important;
        font-size: 1.2rem !important;
        line-height: 1.7rem !important
    }

    .recruiters .recruiter-container .scrolling-container .scrolling-wrapper-2 {
        margin-top: 2.2rem !important
    }
}

@media (max-width: 480px) {
    .recruiters {
        width: 100% !important;
        padding: 2% 0 !important
    }

    .recruiters .recruiter-container {
        width: 100% !important
    }

    .recruiters .recruiter-container .recruiter-header {
        padding: 16px !important
    }

    .recruiters .recruiter-container .recruiter-header h2 {
        font-size: 1.25rem !important
    }

    .recruiters .recruiter-container .recruiter-header p {
        font-size: 14px !important;
        font-style: normal !important;
        font-weight: 500 !important;
        width: 100% !important;
        margin: 0 !important
    }

    .recruiters .recruiter-container .scrolling-container {
        width: 95% !important;
        margin: auto !important;
        padding: 0 !important;
        border: none !important
    }

    .recruiters .recruiter-container .scrolling-container .scrolling-wrapper,
    .recruiters .recruiter-container .scrolling-container .scrolling-wrapper-2 {
        gap: .375rem !important;
        padding: 12px 0 0 !important;
        margin: 0 !important
    }

    .recruiters .recruiter-container .scrolling-container .scrolling-wrapper .scroll-box,
    .recruiters .recruiter-container .scrolling-container .scrolling-wrapper .scroll-box-2,
    .recruiters .recruiter-container .scrolling-container .scrolling-wrapper-2 .scroll-box,
    .recruiters .recruiter-container .scrolling-container .scrolling-wrapper-2 .scroll-box-2 {
        width: auto !important;
        height: 40px !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: .75rem !important
    }
}

.training {
    width: 100%;
    padding: 5rem 25.5rem;
    background: var(--color-red);
    box-shadow: -.833rem -.833rem 1.667rem #a02737 inset, .833rem .833rem 1.667rem #a02737 inset;
    text-align: center
}

.training .training-title {
    color: #fbc51d;
    text-shadow: 0px .333rem .333rem rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 3.125rem;
    font-weight: 400;
    margin-bottom: .833rem
}

.training .training-description {
    color: var(--color-white);
    font-size: 1.5rem;
    font-weight: 650;
    margin: 0 auto 3.33rem;
    width: 69.08rem;
    text-align: center
}

.training .training-logos {
    display: flex;
    justify-content: center;
    gap: 3.33rem
}

@media (max-width: 1536px) {
    .training {
        padding: 4rem 20rem
    }

    .training .training-title {
        font-size: 2.8rem;
        margin-bottom: .7rem
    }

    .training .training-description {
        font-size: 1.3rem;
        margin-bottom: 3rem;
        width: 50rem
    }

    .training .training-logos {
        gap: 2.5rem
    }
}

@media (max-width: 1440px) {
    .training {
        padding: 4rem 22rem
    }

    .training .training-title {
        font-size: 2.9rem;
        margin-bottom: .8rem
    }

    .training .training-description {
        font-size: 1.4rem;
        margin-bottom: 3.2rem;
        width: 55rem
    }

    .training .training-logos {
        gap: 3rem
    }
}

@media (max-width: 1280px) {
    .training {
        padding: 3rem 18rem
    }

    .training .training-title {
        font-size: 2.5rem;
        margin-bottom: .7rem
    }

    .training .training-description {
        font-size: 1.3rem;
        margin-bottom: 2.8rem;
        width: 45rem
    }

    .training .training-logos {
        gap: 2.7rem
    }
}

@media (max-width: 480px) {
    .training {
        padding: 2rem 1rem !important;
        text-align: left !important
    }

    .training-title {
        font-size: 1rem !important;
        margin-bottom: .5rem !important
    }

    .training-description {
        font-size: 1rem !important;
        width: auto !important;
        margin-bottom: 1.5rem !important;
        text-align: left !important
    }

    .training-logos {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        gap: 1rem !important
    }

    .training-logos img:nth-child(1) {
        max-width: 16% !important;
        height: auto !important
    }

    .training-logos img:nth-child(2) {
        max-width: 20% !important;
        height: auto !important
    }

    .training-logos img:nth-child(3) {
        max-width: 21% !important;
        height: auto !important
    }

    .training-logos img:nth-child(4) {
        max-width: 24% !important;
        height: auto !important
    }
}

.superstars {
    padding: 3.125rem 0;
    background-color: var(--color-white);
    margin: auto;
    width: 100%
}

.superstars .superstars-container {
    max-width: 100%;
    text-align: left;
    padding: 0 8rem;
    margin: auto
}

.superstars .superstars-container .superstars-header {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.superstars .superstars-container .superstars-header h2 {
    color: var(--color-red);
    font-size: 3rem;
    font-weight: 400;
    margin-bottom: 10px;
    text-shadow: 0px .25rem .25rem rgba(0, 0, 0, .3)
}

.superstars .superstars-container p {
    font-size: 1.5rem;
    font-weight: 650;
    color: #2c2c2c;
    margin-bottom: 27px;
    width: 78.25rem;
    line-height: normal
}

.superstars .superstars-container p span {
    color: #72bf44
}

.superstars .superstars-container .superstars-slider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1%
}

.superstars .superstars-container .superstars-slider .slider-icon {
    cursor: pointer;
    background-color: #fbc51d;
    color: #2c2c2c;
    border-radius: 50%;
    font-size: 2.25rem;
    height: 3.125rem;
    width: 3.125rem;
    padding: .9375rem 1.1875rem
}

.superstars .superstars-container .superstars-slider .superstars-cards {
    display: flex;
    gap: 1.25rem
}

.superstars .superstars-container .superstars-slider .superstars-cards .superstars-card {
    width: 25.125rem;
    height: 32.3125rem;
    border-radius: .625rem;
    background: var(--color-red);
    box-shadow: -.25rem -.25rem .625rem #a02737 inset, 0 .25rem .25rem #00000040, .25rem .25rem .625rem #a02737 inset;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden
}

.superstars .superstars-container .superstars-slider .superstars-cards .superstars-card .card-background {
    width: 25.125rem;
    height: 28.9375rem;
    border-radius: .625rem .625rem 0 0;
    background-size: cover;
    background-position: center
}

.superstars .superstars-container .superstars-slider .superstars-cards .superstars-card .profile-picture {
    width: 5.375rem;
    height: 5.375rem;
    border-radius: .625rem;
    position: absolute;
    top: 18.875rem;
    left: calc(50% - 2.375rem);
    background-color: #d3d3d3
}

.superstars .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text {
    display: flex;
    flex-direction: row;
    max-width: 24.125rem;
    padding: 1.875rem .3rem 1.25rem
}

.superstars .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text .titles {
    margin-left: .625rem
}

.superstars .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text .titles p {
    max-width: 8.6875rem;
    color: #fbc51d;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: .25rem
}

.superstars .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text .values p {
    margin-left: -1.2rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-white);
    margin-bottom: .3125rem
}

.superstars .suactive {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.5rem
}

.superstars .suactive .supage {
    height: .825rem;
    width: .825rem;
    border-radius: 50%;
    background-color: #da1e3733;
    transition: background-color .3s ease
}

.superstars .suactive .supage.suactive-page {
    background-color: #da1e37
}

@media (max-width: 1536px) {
    .superstars {
        padding: 2.8rem 0 !important;
        width: 100% !important
    }

    .superstars .superstars-container {
        padding: 0 6rem !important
    }

    .superstars .superstars-container .superstars-header h2 {
        font-size: 2.8rem !important;
        margin-bottom: 8px !important
    }

    .superstars .superstars-container p {
        font-size: 1.4rem !important;
        margin-bottom: 24px !important;
        width: 72rem !important
    }

    .superstars .superstars-container .superstars-slider .slider-icon {
        scale: .9;
        padding: .5rem 1.3rem !important
    }

    .superstars .superstars-container .superstars-slider .superstars-cards {
        gap: 1rem !important
    }

    .superstars .superstars-container .superstars-slider .superstars-cards .superstars-card {
        width: 20rem !important;
        height: 28rem !important;
        border-radius: .6rem !important
    }

    .superstars .superstars-container .superstars-slider .superstars-cards .superstars-card .card-background {
        width: 20rem !important;
        height: 27rem !important
    }

    .superstars .superstars-container .superstars-slider .superstars-cards .superstars-card .profile-picture {
        width: 4rem !important;
        height: 4rem !important;
        top: 17.5rem !important;
        left: calc(50% - 2rem) !important
    }

    .superstars .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text {
        max-width: 22rem !important;
        padding: 1.7rem .2rem 1.1rem !important
    }

    .superstars .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text .titles {
        margin-left: .6rem !important
    }

    .superstars .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text .titles p {
        max-width: 8rem !important;
        font-size: .725rem !important;
        margin-bottom: .2rem !important
    }

    .superstars .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text .values p {
        margin-left: -1.8rem !important;
        font-size: .725rem !important;
        margin-bottom: .3rem !important
    }

    .superstars .suactive {
        gap: .9rem !important;
        margin-top: 2.3rem !important
    }

    .superstars .suactive .supage {
        height: .8rem !important;
        width: .8rem !important
    }

    .superstars .suactive .supage.suactive-page {
        background-color: #da1e37 !important
    }
}

@media (max-width: 1440px) {
    .superstars {
        padding: 2.5rem 0 !important
    }

    .superstars .superstars-container {
        padding: 0 5rem !important
    }

    .superstars .superstars-container .superstars-header h2 {
        font-size: 2.6rem !important;
        margin-bottom: 7px !important
    }

    .superstars .superstars-container p {
        font-size: 1.35rem !important;
        margin-bottom: 22px !important;
        width: 68rem !important
    }

    .superstars .superstars-container .superstars-slider {
        gap: 5px
    }

    .superstars .superstars-container .superstars-slider .slider-icon {
        scale: .8
    }

    .superstars .superstars-container .superstars-slider .superstars-cards {
        gap: .5rem !important
    }

    .superstars .superstars-container .superstars-slider .superstars-cards .superstars-card {
        width: 19rem !important;
        height: 27.5rem !important;
        border-radius: .55rem !important
    }

    .superstars .superstars-container .superstars-slider .superstars-cards .superstars-card .card-background {
        width: 19rem !important;
        height: 26.5rem !important
    }

    .superstars .superstars-container .superstars-slider .superstars-cards .superstars-card .profile-picture {
        width: 3.8rem !important;
        height: 3.8rem !important;
        top: 17rem !important;
        left: calc(50% - 1.9rem) !important
    }

    .superstars .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text {
        max-width: 21rem !important;
        padding: 1.5rem .15rem 1rem !important
    }

    .superstars .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text .titles {
        margin-left: .55rem !important
    }

    .superstars .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text .titles p {
        max-width: 7.5rem !important;
        font-size: .7rem !important;
        margin-bottom: .15rem !important
    }

    .superstars .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text .values p {
        margin-left: -1.6rem !important;
        font-size: .7rem !important;
        margin-bottom: .25rem !important
    }

    .superstars .suactive {
        gap: .8rem !important;
        margin-top: 2.1rem !important
    }

    .superstars .suactive .supage {
        height: .75rem !important;
        width: .75rem !important
    }

    .superstars .suactive .supage.suactive-page {
        background-color: #da1e37 !important
    }
}

@media (max-width: 1280px) {
    .superstars {
        padding: 2rem 0 !important
    }

    .superstars .superstars-container {
        padding: 0 4rem !important
    }

    .superstars .superstars-container .superstars-header h2 {
        font-size: 2.4rem !important;
        margin-bottom: 6px !important
    }

    .superstars .superstars-container p {
        font-size: 1.25rem !important;
        margin-bottom: 20px !important;
        width: 60rem !important
    }

    .superstars .superstars-container .superstars-slider {
        gap: 0
    }

    .superstars .superstars-container .superstars-slider .slider-icon {
        scale: .8
    }

    .superstars .superstars-container .superstars-slider .superstars-cards {
        gap: .5rem !important
    }

    .superstars .superstars-container .superstars-slider .superstars-cards .superstars-card {
        width: 18rem !important;
        height: 26rem !important;
        border-radius: .5rem !important
    }

    .superstars .superstars-container .superstars-slider .superstars-cards .superstars-card .card-background {
        width: 18rem !important;
        height: 25rem !important
    }

    .superstars .superstars-container .superstars-slider .superstars-cards .superstars-card .profile-picture {
        width: 3.5rem !important;
        height: 3.5rem !important;
        top: 16.5rem !important;
        left: calc(50% - 1.75rem) !important
    }

    .superstars .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text {
        max-width: 19.5rem !important;
        padding: 1.3rem .1rem .9rem !important
    }

    .superstars .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text .titles {
        margin-left: .5rem !important
    }

    .superstars .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text .titles p {
        max-width: 7rem !important;
        font-size: .65rem !important;
        margin-bottom: .1rem !important
    }

    .superstars .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text .values p {
        margin-left: -1.5rem !important;
        font-size: .65rem !important;
        margin-bottom: .2rem !important
    }

    .superstars .suactive {
        gap: .7rem !important;
        margin-top: 2rem !important
    }

    .superstars .suactive .supage {
        height: .7rem !important;
        width: .7rem !important
    }

    .superstars .suactive .supage.suactive-page {
        background-color: #da1e37 !important
    }
}

@media (max-width: 480px) {
    .superstars {
        width: 100% !important;
        margin: 0 !important;
        padding: 2% 2% 4% !important
    }

    .superstars .superstars-container {
        margin: 0 !important;
        padding: 2% !important
    }

    .superstars .superstars-container .superstars-header h2 {
        font-size: 1.25rem !important;
        width: 100% !important
    }

    .superstars .superstars-container .superstars-header .see-more {
        display: none !important
    }

    .superstars .superstars-container p {
        font-size: 14px !important;
        font-style: normal !important;
        font-weight: 500 !important;
        width: 100% !important
    }

    .superstars .superstars-container .superstars-slider {
        width: 100% !important;
        position: relative !important;
        margin: auto !important;
        padding-top: 3% !important
    }

    .superstars .superstars-container .superstars-slider .slider-icon {
        position: absolute !important;
        transform: translateY(-50%) !important;
        padding: .8rem !important;
        height: 2.6rem !important;
        width: 2.6rem !important
    }

    .superstars .superstars-container .superstars-slider .slider-icon.left-icon {
        top: -6% !important;
        right: 21% !important
    }

    .superstars .superstars-container .superstars-slider .slider-icon.right-icon {
        top: -6% !important;
        right: 10% !important
    }

    .superstars .superstars-container .superstars-slider .superstars-cards {
        margin: auto !important;
        padding: 0 !important;
        gap: 2% !important
    }

    .superstars .superstars-container .superstars-slider .superstars-cards .superstars-card {
        width: 170px !important;
        height: 234px !important
    }

    .superstars .superstars-container .superstars-slider .superstars-cards .superstars-card .card-background {
        width: 167px !important;
        height: 134px !important
    }

    .superstars .superstars-container .superstars-slider .superstars-cards .superstars-card .profile-picture {
        top: 48% !important;
        left: 39% !important;
        height: 40px !important;
        width: 40px !important
    }

    .superstars .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text {
        padding: 20px 0 0 !important
    }

    .superstars .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text .titles {
        margin-left: .625rem !important
    }

    .superstars .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text .titles p {
        font-size: 10px !important;
        font-weight: 400 !important
    }

    .superstars .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text .values p {
        margin-bottom: 8% !important;
        margin-top: 2.5% !important;
        margin-left: .625rem !important;
        font-size: 8px !important;
        font-weight: 400 !important
    }

    .suactive {
        margin-top: 5% !important
    }

    .suactive .supage {
        width: 8px !important;
        height: 8px !important
    }
}

.student-work-section {
    position: relative;
    margin: 50px auto;
    background-color: var(--color-white)
}

.student-work-section .navigate {
    bottom: 44%;
    position: absolute;
    padding: 0 2%;
    width: 100%;
    opacity: 1;
    display: flex;
    justify-content: space-between;
    gap: 10px
}

.student-work-section .navigate .left,
.student-work-section .navigate .right {
    scale: 1
}

.student-work-section .navigate .slider-icon {
    cursor: pointer;
    background-color: #fbc51d;
    color: #2c2c2c;
    border-radius: 50%;
    font-size: 2.25rem;
    height: 3.125rem;
    width: 3.125rem;
    padding: .9375rem 1.1875rem
}

.student-work-section .top-container {
    margin: auto;
    display: flex;
    justify-content: space-between;
    padding: 0 8rem
}

.student-work-section .top-container .text-container {
    width: 67.67rem;
    display: flex;
    flex-direction: column
}

.student-work-section .top-container .text-container h2 {
    font-size: 3rem;
    font-weight: 400;
    line-height: 4.81rem;
    text-align: left;
    color: var(--color-red);
    margin-bottom: 10px;
    text-shadow: 0rem .33rem .33rem rgba(0, 0, 0, .3)
}

.student-work-section .top-container .text-container p {
    font-size: 1.5rem;
    font-weight: 650;
    line-height: 1.8rem;
    color: #2c2c2c;
    margin-bottom: 27px
}

.student-work-section .top-container .read-more-container button.read-more-btn {
    width: 15.56rem;
    height: 4rem;
    border-radius: .83rem;
    font-size: 24px;
    font-weight: 650;
    color: #2c2c2c;
    background: #fbc51d;
    cursor: pointer;
    border: none
}

.student-work-section .top-container .read-more-container button.read-more-btn:hover {
    color: var(--color-white);
    background-color: #2c2c2c
}

.student-work-section .scrolling-container {
    width: 90%;
    margin: auto
}

.student-work-section .scrolling-container .media-content {
    overflow: hidden;
    padding-left: 10rem;
    border: .08rem solid black;
    height: 52.56rem;
    flex-direction: row;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4.92rem
}

.student-work-section .scrolling-container .media-content .image-container {
    position: relative;
    width: 67.67rem;
    height: 44.25rem
}

.student-work-section .scrolling-container .media-content .image-container img,
.student-work-section .scrolling-container .media-content .image-container video {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.student-work-section .scrolling-container .media-content .image-container .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5rem;
    height: 5rem
}

.student-work-section .scrolling-container .media-content .text-content {
    width: 37.42rem;
    height: 52.56rem;
    background: var(--color-red);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.student-work-section .scrolling-container .media-content .text-content p {
    width: 22rem;
    height: 11rem;
    color: var(--color-white);
    font-size: 2rem;
    font-weight: 600;
    line-height: 2.73rem;
    text-align: center
}

.student-work-section .scrolling-container .media-content .text-content .logo {
    width: 7.84rem;
    height: 4.17rem;
    margin-bottom: 1.67rem
}

.student-work-section .scrolling-container .media-content .text-content .logo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.student-work-section .scrolling-container .navigation-dots {
    display: flex;
    margin-top: 3.33rem;
    justify-content: center
}

.student-work-section .scrolling-container .navigation-dots .dot {
    width: .825rem;
    height: .825rem;
    background: #ddd;
    border-radius: 50%;
    margin: 0 .42rem;
    cursor: pointer
}

.student-work-section .scrolling-container .navigation-dots .dot.active {
    background: var(--color-red)
}

.student-work-section .scrolling-container .read-more-container-mobile {
    display: none
}

@media (max-width: 1536px) {
    .student-work-section .navigate {
        scale: .9;
        padding: 0
    }

    .student-work-section .navigate .left {
        left: -4%;
        position: absolute
    }

    .student-work-section .navigate .right {
        right: -4%;
        position: absolute
    }

    .student-work-section .top-container {
        padding: 0 6rem
    }

    .student-work-section .top-container .text-container {
        width: 60rem
    }

    .student-work-section .top-container .text-container h2 {
        font-size: 2.5rem;
        line-height: 4rem
    }

    .student-work-section .top-container .text-container p {
        font-size: 1.3rem;
        line-height: 1.6rem
    }

    .student-work-section .top-container .read-more-container button.read-more-btn {
        width: 13rem;
        height: 3.5rem;
        font-size: 20px
    }

    .student-work-section .scrolling-container .media-content {
        height: 45rem;
        gap: 4rem
    }

    .student-work-section .scrolling-container .media-content .image-container {
        width: 60rem;
        height: 38rem
    }

    .student-work-section .scrolling-container .media-content .image-container .play-icon {
        width: 4rem;
        height: 4rem
    }

    .student-work-section .scrolling-container .media-content .text-content {
        width: 34rem;
        height: 45rem
    }

    .student-work-section .scrolling-container .media-content .text-content p {
        font-size: 1.7rem;
        line-height: 2.4rem
    }

    .student-work-section .scrolling-container .media-content .text-content .logo {
        width: 7.3rem;
        height: 3.9rem
    }
}

@media (max-width: 1440px) {
    .student-work-section .navigate {
        scale: .8;
        padding: 0
    }

    .student-work-section .navigate .left {
        left: -11%;
        position: absolute
    }

    .student-work-section .navigate .right {
        right: -11%;
        position: absolute
    }

    .student-work-section .top-container {
        padding: 0 4rem
    }

    .student-work-section .top-container .text-container {
        width: 55rem
    }

    .student-work-section .top-container .text-container h2 {
        font-size: 2.25rem;
        line-height: 3.5rem
    }

    .student-work-section .top-container .text-container p {
        font-size: 1.2rem;
        line-height: 1.5rem
    }

    .student-work-section .top-container .read-more-container button.read-more-btn {
        width: 12rem;
        height: 3.2rem;
        font-size: 18px
    }

    .student-work-section .scrolling-container .media-content {
        height: 42rem;
        gap: 3.5rem
    }

    .student-work-section .scrolling-container .media-content .image-container {
        width: 54rem;
        height: 34rem
    }

    .student-work-section .scrolling-container .media-content .image-container .play-icon {
        width: 3.5rem;
        height: 3.5rem
    }

    .student-work-section .scrolling-container .media-content .text-content {
        width: 30rem;
        height: 42rem
    }

    .student-work-section .scrolling-container .media-content .text-content p {
        font-size: 1.5rem;
        line-height: 2.2rem
    }

    .student-work-section .scrolling-container .media-content .text-content .logo {
        width: 6rem;
        height: 3.5rem
    }
}

@media (max-width: 1280px) {
    .student-work-section .top-container {
        padding: 0 3rem
    }

    .student-work-section .top-container .text-container {
        width: 50rem
    }

    .student-work-section .top-container .text-container h2 {
        font-size: 2rem;
        line-height: 3rem
    }

    .student-work-section .top-container .text-container p {
        font-size: 1.1rem;
        line-height: 1.4rem
    }

    .student-work-section .top-container .read-more-container button.read-more-btn {
        width: 11rem;
        height: 3rem;
        font-size: 16px
    }

    .student-work-section .scrolling-container .media-content {
        height: 38rem;
        gap: 3rem
    }

    .student-work-section .scrolling-container .media-content .image-container {
        width: 48rem;
        height: 30rem
    }

    .student-work-section .scrolling-container .media-content .image-container .play-icon {
        width: 3rem;
        height: 3rem
    }

    .student-work-section .scrolling-container .media-content .text-content {
        width: 28rem;
        height: 38rem
    }

    .student-work-section .scrolling-container .media-content .text-content p {
        font-size: 1.3rem;
        line-height: 2rem
    }

    .student-work-section .scrolling-container .media-content .text-content .logo {
        width: 5.5rem;
        height: 3.5rem
    }
}

@media (max-width: 480px) {
    .student-work-section {
        margin: 0rem auto !important;
        padding: 20px 0 0 !important
    }

    .student-work-section .navigate {
        position: relative;
        opacity: 1 !important;
        display: flex !important;
        pointer-events: auto !important;
        visibility: visible !important;
        padding-left: 69% !important;
        padding-bottom: 1rem
    }

    .student-work-section .navigate .left,
    .student-work-section .navigate .right {
        scale: .9
    }

    .student-work-section .top-container {
        flex-direction: column !important;
        align-items: center !important;
        text-align: left !important;
        padding: 0 1rem !important
    }

    .student-work-section .top-container .text-container {
        width: 100% !important
    }

    .student-work-section .top-container .text-container h2 {
        font-size: 1.25rem !important;
        line-height: 2.2rem !important;
        margin-bottom: 1rem !important
    }

    .student-work-section .top-container .text-container p {
        font-size: 14px !important;
        font-style: normal !important;
        font-weight: 500 !important;
        line-height: normal !important
    }

    .student-work-section .top-container .read-more-container {
        display: none !important
    }

    .student-work-section .scrolling-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding-left: 0 !important;
        height: auto !important;
        gap: 0 !important
    }

    .student-work-section .scrolling-container .media-content {
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        padding: 1rem !important;
        gap: 1rem !important;
        border-top: 1px solid rgba(15, 15, 15, .2) !important;
        border-bottom: 1px solid rgba(15, 15, 15, .2) !important;
        border-left: none !important;
        border-right: none !important;
        position: relative !important
    }

    .student-work-section .scrolling-container .media-content:before,
    .student-work-section .scrolling-container .media-content:after {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        width: 100vw !important;
        height: 1px !important;
        background: #0f0f0f33 !important
    }

    .student-work-section .scrolling-container .media-content:before {
        top: 0 !important
    }

    .student-work-section .scrolling-container .media-content:after {
        bottom: 0 !important
    }

    .student-work-section .scrolling-container .media-content .image-container {
        width: 100% !important;
        height: 14rem !important;
        position: relative !important
    }

    .student-work-section .scrolling-container .media-content .image-container img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: .5rem !important
    }

    .student-work-section .scrolling-container .media-content .image-container .play-icon {
        width: 2.5rem !important;
        height: 2.5rem !important
    }

    .student-work-section .scrolling-container .media-content .text-content {
        width: 100% !important;
        height: auto !important;
        padding: 1rem !important;
        background: transparent !important;
        border-radius: .5rem !important
    }

    .student-work-section .scrolling-container .media-content .text-content .logo {
        display: none !important
    }

    .student-work-section .scrolling-container .media-content .text-content p {
        font-size: 1rem !important;
        font-size: 14px !important;
        font-style: normal !important;
        font-weight: 500 !important;
        line-height: normal !important;
        width: 100% !important;
        height: auto !important;
        color: #dc143c !important
    }

    .student-work-section .scrolling-container .navigation-dots {
        gap: .5rem !important
    }

    .student-work-section .scrolling-container .navigation-dots .dot {
        width: .5rem !important;
        height: .5rem !important
    }
}

.courses {
    width: 100%;
    padding: 5rem 7.5rem 2.5rem;
    margin: auto;
    text-align: left;
    background-color: var(--color-white)
}

.courses .courses-container {
    width: 100%;
    margin: auto
}

.courses .courses-container .courses-header {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.courses .courses-container .courses-header h2 {
    font-size: 3rem;
    font-weight: 400;
    line-height: 3.61rem;
    text-align: left;
    color: var(--color-red);
    text-shadow: 0rem .25rem .25rem rgba(0, 0, 0, .3);
    margin-bottom: 10px
}

.courses .courses-container .courses-header button.read-more-btn {
    width: 15.56rem;
    height: 4rem;
    border-radius: .83rem;
    font-size: 24px;
    font-weight: 650;
    color: #2c2c2c;
    background: #fbc51d;
    cursor: pointer;
    border: none
}

.courses .courses-container .courses-header button.read-more-btn:hover {
    color: var(--color-white);
    background-color: #2c2c2c
}

.courses .courses-container p {
    font-size: 1.5rem;
    font-weight: 650;
    line-height: 1.35rem;
    color: #2c2c2c;
    margin-bottom: 27px
}

.courses .courses-container .courses-slider {
    width: 100%;
    height: 47rem;
    display: flex;
    padding: 30% 0;
    align-items: center;
    justify-content: center;
    gap: 30px
}

.courses .courses-container .courses-slider .slider-icon {
    cursor: pointer;
    background-color: #fbc51d;
    color: #2c2c2c;
    border-radius: 50%;
    font-size: 2.25rem;
    height: 3.125rem;
    width: 3.125rem;
    padding: .9375rem 1.1875rem
}

.courses .courses-container .courses-slider .courses-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 2.5rem;
    column-gap: 2.5rem;
    justify-content: center
}

.courses .courses-container .courses-slider .courses-grid .course-box {
    position: relative;
    width: 100%;
    height: 28.625rem;
    border-radius: .625rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: 0 .25rem .625rem #0000001a;
    transition: transform .3s, box-shadow .3s
}

.courses .courses-container .courses-slider .courses-grid .course-box .courses-grid .course-box:nth-child(7) {
    grid-column: 1/span 1;
    grid-row: 3/span 1;
    padding-left: -31.25rem
}

.courses .courses-container .courses-slider .courses-grid .course-box .course-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: opacity .3s, background-image .3s
}

.courses .courses-container .courses-slider .courses-grid .course-box .course-title {
    width: 100%;
    background: linear-gradient(180deg, #0f0f0f00, #0f0f0f);
    height: 113px;
    position: absolute;
    display: flex;
    align-items: flex-end
}

.courses .courses-container .courses-slider .courses-grid .course-box .course-title p {
    padding-left: 4%;
    line-height: 2.05rem;
    font-style: normal;
    color: var(--color-white);
    font-size: 1.5rem;
    font-weight: 600;
    z-index: 2;
    opacity: 1;
    transition: opacity .3s
}

.courses .courses-container .courses-slider .courses-grid .course-box .hover-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1.25rem;
    background: linear-gradient(180deg, #e31b2300, #e31b234f 0%, #e31b2399);
    background-size: 100% 0%;
    background-position: bottom;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity .3s ease, background-size .6s ease-out;
    z-index: 3
}

.courses .courses-container .courses-slider .courses-grid .course-box .hover-content .hover-text {
    color: var(--color-white);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 650;
    line-height: 1.35rem;
    margin-bottom: 2.5rem;
    text-align: left;
    width: 18.125rem
}

.courses .courses-container .courses-slider .courses-grid .course-box .hover-content .enquire-button {
    display: flex;
    width: 27.3125rem;
    height: 3.125rem;
    justify-content: center;
    align-items: center;
    border-radius: .625rem;
    background: #f3f3f3;
    color: #e31b23;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background-color .3s
}

.courses .courses-container .courses-slider .courses-grid .course-box .hover-content .enquire-button:hover {
    background-color: transparent;
    color: var(--color-white);
    border: 1px solid #f3f3f3
}

.courses .courses-container .courses-slider .courses-grid .course-box:hover .hover-content {
    opacity: 1;
    background-size: 100% 100%
}

.courses .courses-container .courses-slider .courses-grid .course-box:hover .course-title {
    opacity: 0
}

.courses .courses-container .courses-slider .courses-grid .course-box:hover .hover-content {
    opacity: 1
}

.courses .active {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: 2.5rem
}

.courses .active .page {
    height: .825rem;
    width: .825rem;
    border-radius: 50%;
    background-color: #da1e3733;
    transition: background-color .3s ease
}

.courses .active .page.active-page {
    background-color: #da1e37
}

@media (max-width: 1536px) {
    .courses {
        padding: 4.5rem 6rem 2rem !important
    }

    .courses .courses-container .courses-header h2 {
        font-size: 2.8rem !important;
        line-height: 3.4rem !important;
        margin-bottom: 8px !important
    }

    .courses .courses-container .courses-header button.read-more-btn {
        width: 14.5rem !important;
        height: 3.8rem !important;
        font-size: 22px !important
    }

    .courses .courses-container p {
        font-size: 1.4rem !important;
        line-height: 1.3rem !important;
        padding-bottom: 24px !important
    }

    .courses .courses-container .courses-slider {
        width: 100% !important;
        height: 46rem !important;
        margin-left: 0% !important;
        padding: 34% 0 !important
    }

    .courses .courses-container .courses-slider .slider-icon {
        font-size: 2rem !important;
        height: 2.7rem !important;
        width: 2.7rem !important;
        padding: .8rem 1rem !important;
        position: absolute !important;
        display: flex !important
    }

    .courses .courses-container .courses-slider .slider-icon.left-icon {
        margin-top: -2.5%;
        left: 3%
    }

    .courses .courses-container .courses-slider .slider-icon.right-icon {
        margin-top: -2.5%;
        right: 3%
    }

    .courses .courses-container .courses-slider .courses-grid {
        width: 100% !important;
        padding-bottom: 40px !important;
        row-gap: 2.5rem !important;
        column-gap: 2.5rem !important
    }

    .courses .courses-container .courses-slider .courses-grid .course-box {
        width: 26rem !important;
        height: 26rem !important;
        border-radius: .6rem !important
    }

    .courses .courses-container .courses-slider .courses-grid .course-box .course-title {
        height: 105px !important
    }

    .courses .courses-container .courses-slider .courses-grid .course-box .course-title p {
        font-size: 1.4rem !important;
        line-height: 1.9rem !important
    }

    .courses .courses-container .courses-slider .courses-grid .course-box .hover-content {
        padding: 1rem !important
    }

    .courses .courses-container .courses-slider .courses-grid .course-box .hover-content .hover-text {
        font-size: 1.2rem !important;
        line-height: 1.25rem !important;
        margin-bottom: 2.2rem !important;
        width: 17rem !important
    }

    .courses .courses-container .courses-slider .courses-grid .course-box .hover-content .enquire-button {
        width: 24rem !important;
        height: 3rem !important;
        font-size: .95rem !important
    }

    .courses .active {
        gap: .4rem !important;
        margin-top: 2.3rem !important
    }

    .courses .active .page {
        height: .75rem !important;
        width: .75rem !important
    }

    .courses .active .page.active-page {
        background-color: #da1e37 !important
    }
}

@media (max-width: 1440px) {
    .courses {
        padding: 4.25rem 5rem 2rem !important
    }

    .courses .courses-container .courses-header h2 {
        font-size: 2.6rem !important;
        line-height: 3.2rem !important
    }

    .courses .courses-container .courses-header button.read-more-btn {
        width: 14rem !important;
        height: 3.6rem !important;
        font-size: 22px !important
    }

    .courses .courses-container p {
        font-size: 1.35rem !important;
        line-height: 1.3rem !important;
        margin-bottom: 24px !important
    }

    .courses .courses-container .courses-slider {
        padding: 36% 0 !important;
        height: 45rem !important
    }

    .courses .courses-container .courses-slider .slider-icon {
        scale: .9
    }

    .courses .courses-container .courses-slider .slider-icon.left-icon {
        margin-top: -2.5%;
        left: 1.5%
    }

    .courses .courses-container .courses-slider .slider-icon.right-icon {
        margin-top: -2.5%;
        right: 1.5%
    }

    .courses .courses-container .courses-slider .courses-grid {
        row-gap: 2rem !important;
        column-gap: 1rem !important
    }

    .courses .courses-container .courses-slider .courses-grid .course-box {
        height: 23rem !important;
        width: 23rem !important;
        border-radius: .6rem !important
    }

    .courses .courses-container .courses-slider .courses-grid .course-box .course-title {
        height: 110px !important
    }

    .courses .courses-container .courses-slider .courses-grid .course-box .course-title p {
        font-size: 1.4rem !important;
        line-height: 2rem !important
    }

    .courses .courses-container .courses-slider .courses-grid .course-box .hover-content .hover-text {
        font-size: 1.3rem !important;
        width: 17.5rem !important
    }

    .courses .courses-container .courses-slider .courses-grid .course-box .hover-content .enquire-button {
        width: 25rem !important;
        height: 3rem !important;
        font-size: .95rem !important
    }

    .courses .active {
        gap: .45rem !important
    }

    .courses .active .page {
        height: .78rem !important;
        width: .78rem !important
    }
}

@media (max-width: 480px) {
    .courses {
        width: 100% !important;
        margin: 0 !important;
        padding: 2% 2% 4% !important
    }

    .courses .courses-container {
        margin: 0 !important;
        padding: 2% !important
    }

    .courses .courses-container .courses-header h2 {
        font-size: 1.25rem !important;
        width: 100% !important
    }

    .courses .courses-container .courses-header button.read-more-btn {
        display: none !important
    }

    .courses .courses-container p {
        font-size: 14px !important;
        font-style: normal !important;
        font-weight: 500 !important;
        width: 100% !important
    }

    .courses .courses-container .courses-slider {
        min-width: 100%;
        flex-direction: row !important;
        height: auto !important;
        padding: 1.5rem 51px !important
    }

    .courses .courses-container .courses-slider .slider-icon {
        transform: translateY(-50%) !important;
        padding: .8rem !important;
        height: 2.5rem !important;
        width: 2.5rem !important
    }

    .courses .courses-container .courses-slider .left-icon {
        left: 10px !important
    }

    .courses .courses-container .courses-slider .right-icon {
        right: 10px !important
    }

    .courses .courses-container .courses-slider .courses-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: center !important;
        gap: 1.5rem !important;
        height: 18rem !important;
        position: relative !important
    }

    .courses .courses-container .courses-slider .courses-grid .course-box {
        width: 16rem !important;
        height: 17rem !important;
        box-shadow: none !important;
        transition: none !important;
        position: relative !important;
        border-radius: 10px
    }

    .courses .courses-container .courses-slider .courses-grid .course-box .course-title {
        background: none !important;
        font-size: 1.2rem !important;
        margin-bottom: 6rem !important;
        color: #fbc51d !important;
        left: .425rem !important;
        z-index: 4 !important
    }

    .courses .courses-container .courses-slider .courses-grid .course-box .hover-content {
        background: linear-gradient(180deg, #0000 40.23%, #000000ab 61.78%, #000) !important;
        padding: 1rem !important;
        opacity: 1 !important;
        z-index: 2
    }

    .courses .courses-container .courses-slider .courses-grid .course-box .hover-content .hover-text {
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        width: auto !important;
        margin-bottom: 1rem
    }

    .courses .courses-container .courses-slider .courses-grid .course-box .hover-content .enquire-button {
        width: 100% !important;
        height: 2.5rem !important;
        font-size: .9rem !important
    }

    .active {
        gap: .5rem !important;
        margin-top: 0 !important
    }

    .active .page {
        height: .5rem !important;
        width: .5rem !important
    }
}

.testimonials {
    width: 100%;
    margin: auto;
    text-align: left;
    background-color: var(--color-white);
    display: flex;
    padding: 5rem 0
}

.testimonials .testimonial-container {
    width: 89.58%;
    margin: auto
}

.testimonials .testimonial-container .testimonials-header {
    display: flex;
    width: 100%;
    margin: auto;
    justify-content: space-between;
    align-items: center;
    padding: 0 46.78px
}

.testimonials .testimonial-container .testimonials-header h2 {
    font-size: 3rem;
    font-weight: 400;
    line-height: 3.61rem;
    text-align: left;
    color: var(--color-red);
    text-shadow: 0rem .25rem .25rem rgba(0, 0, 0, .3);
    margin-bottom: 10px
}

.testimonials .testimonial-container .testimonials-header button {
    width: 15.56rem;
    height: 4rem;
    border-radius: .83rem;
    font-size: 24px;
    font-weight: 650;
    color: #2c2c2c;
    background: #fbc51d;
    cursor: pointer;
    border: none
}

.testimonials .testimonial-container .testimonials-header button:hover {
    color: var(--color-white);
    background-color: #2c2c2c
}

.testimonials .testimonial-container .desc {
    padding: 0 46.78px;
    width: 100%;
    margin: auto
}

.testimonials .testimonial-container p {
    font-size: 1.5rem;
    font-weight: 650;
    width: 912px;
    line-height: 1.35rem;
    color: #2c2c2c
}

.testimonials .testimonial-container .slider-container {
    gap: 1%;
    display: flex;
    align-items: center;
    padding-top: 3.23125rem
}

.testimonials .testimonial-container .slider-container .slider-icon {
    cursor: pointer;
    background-color: #fbc51d;
    color: #2c2c2c;
    border-radius: 50%;
    font-size: 2.25rem;
    height: 3.125rem;
    width: 3.125rem;
    padding: .9375rem 1.1875rem
}

.testimonials .testimonial-container .testimonials-slider {
    display: flex;
    gap: 1%;
    align-items: center
}

.testimonials .testimonial-container .testimonials-slider .testimonial-card {
    width: 24%;
    height: 36rem;
    border-radius: .625rem;
    overflow: hidden;
    box-shadow: 0 .125rem .5rem #0000001a
}

.testimonials .testimonial-container .testimonials-slider .testimonial-card .video-wrapper {
    position: relative;
    width: 100%;
    height: 100%
}

.testimonials .testimonial-container .testimonials-slider .testimonial-card .video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: linear-gradient(0deg, #0003, #0003), linear-gradient(0deg, #0003, #0003)
}

.testimonials .testimonial-container .testimonials-slider .testimonial-card .video-wrapper .mute-button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: #0009;
    color: var(--color-white);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    z-index: 2
}

.testimonials .testimonial-container .testimonials-slider .testimonial-card .video-wrapper .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3.125rem;
    height: 3.125rem;
    background-color: transparent;
    border: .125rem solid white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1;
    transition: transform .3s
}

.testimonials .testimonial-container .testimonials-slider .testimonial-card .video-wrapper .play-button:hover {
    transform: translate(-50%, -50%) scale(1.2)
}

.testimonials .testimonial-container .testimonials-slider .testimonial-card .video-wrapper .play-button:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: .625rem 0 .625rem 1rem;
    border-color: transparent transparent transparent white;
    margin-left: .25rem
}

.testimonials .testimonial-container .sactive {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: 2.5rem
}

.testimonials .testimonial-container .sactive .page {
    height: .825rem;
    width: .825rem;
    border-radius: 50%;
    background-color: #da1e3733;
    transition: background-color .3s ease
}

.testimonials .testimonial-container .sactive .page.active-page {
    background-color: #da1e37
}

@media (max-width: 1536px) {
    .testimonials {
        padding: 4rem 0
    }

    .testimonials .testimonial-container {
        width: 95%
    }

    .testimonials .testimonial-container .testimonials-header {
        padding: 0 40px
    }

    .testimonials .testimonial-container .testimonials-header h2 {
        font-size: 2.5rem;
        line-height: 3.2rem
    }

    .testimonials .testimonial-container .testimonials-header button {
        width: 13rem;
        height: 3.5rem;
        font-size: 20px
    }

    .testimonials .testimonial-container .desc {
        padding: 0 40px
    }

    .testimonials .testimonial-container p {
        font-size: 1.3rem;
        width: 850px
    }

    .testimonials .testimonial-container .slider-container {
        gap: 1%;
        padding-top: 2.5rem
    }

    .testimonials .testimonial-container .slider-container .slider-icon {
        scale: .9
    }

    .testimonials .testimonial-container .testimonials-slider {
        gap: 1%
    }

    .testimonials .testimonial-container .testimonials-slider .testimonial-card {
        width: 20rem;
        height: 33rem
    }

    .testimonials .testimonial-container .sactive {
        gap: .4rem
    }

    .testimonials .testimonial-container .sactive .page {
        height: .75rem;
        width: .75rem
    }
}

@media (max-width: 1440px) {
    .testimonials {
        padding: 3.5rem 0
    }

    .testimonials .testimonial-container {
        width: 90%
    }

    .testimonials .testimonial-container .testimonials-header {
        padding: 0 36px
    }

    .testimonials .testimonial-container .testimonials-header h2 {
        font-size: 2.25rem;
        line-height: 2.9rem
    }

    .testimonials .testimonial-container .testimonials-header button {
        width: 12rem;
        height: 3.25rem;
        font-size: 18px
    }

    .testimonials .testimonial-container .desc {
        padding: 0 36px
    }

    .testimonials .testimonial-container p {
        font-size: 1.2rem;
        width: 800px
    }

    .testimonials .testimonial-container .slider-container {
        gap: 1%;
        padding-top: 2.3rem
    }

    .testimonials .testimonial-container .slider-container .slider-icon {
        scale: .8
    }

    .testimonials .testimonial-container .testimonials-slider {
        gap: 1%
    }

    .testimonials .testimonial-container .testimonials-slider .testimonial-card {
        width: 17rem;
        height: 28rem
    }

    .testimonials .testimonial-container .sactive {
        gap: .4rem
    }

    .testimonials .testimonial-container .sactive .page {
        height: .7rem;
        width: .7rem
    }
}

@media (max-width: 1280px) {
    .testimonials {
        padding: 3rem 0
    }

    .testimonials .testimonial-container {
        width: 98%
    }

    .testimonials .testimonial-container .testimonials-header {
        padding: 0 32px
    }

    .testimonials .testimonial-container .testimonials-header h2 {
        font-size: 2rem;
        line-height: 2.5rem
    }

    .testimonials .testimonial-container .testimonials-header button {
        width: 10.5rem;
        height: 3rem;
        font-size: 16px
    }

    .testimonials .testimonial-container .desc {
        padding: 0 32px
    }

    .testimonials .testimonial-container p {
        font-size: 1.1rem;
        width: 700px
    }

    .testimonials .testimonial-container .slider-container {
        gap: 12px;
        padding-top: 2rem
    }

    .testimonials .testimonial-container .slider-container .slider-icon {
        scale: .8
    }

    .testimonials .testimonial-container .testimonials-slider {
        gap: .875rem
    }

    .testimonials .testimonial-container .testimonials-slider .testimonial-card {
        width: 16.6rem;
        height: 28rem
    }

    .testimonials .testimonial-container .sactive {
        gap: .3rem
    }

    .testimonials .testimonial-container .sactive .page {
        height: .65rem;
        width: .65rem
    }
}

@media (max-width: 480px) {

    .testimonials,
    .testimonial-container {
        position: relative;
        width: 100% !important;
        margin: 0;
        padding: 0 !important
    }

    .testimonials .testimonials-header,
    .testimonial-container .testimonials-header {
        width: 100% !important;
        padding-left: 16px !important
    }

    .testimonials .testimonials-header h2,
    .testimonial-container .testimonials-header h2 {
        font-size: 1.25rem !important;
        width: 100% !important;
        margin-bottom: 0 !important
    }

    .testimonials .testimonials-header button,
    .testimonial-container .testimonials-header button {
        display: none
    }

    .testimonials .desc,
    .testimonial-container .desc {
        width: 100% !important;
        padding: 0 10px 1px 16px !important
    }

    .testimonials .desc p,
    .testimonial-container .desc p {
        font-size: .875rem !important;
        width: 100% !important;
        font-weight: 500
    }

    .testimonials .slider-container,
    .testimonial-container .slider-container {
        width: 100% !important
    }

    .testimonials .slider-container .slider-icon,
    .testimonial-container .slider-container .slider-icon {
        font-size: 2.25rem !important;
        padding: .8rem !important;
        height: 2.6rem !important;
        width: 2.6rem !important;
        display: flex
    }

    .testimonials .slider-container .slider-icon.left-icon,
    .testimonial-container .slider-container .slider-icon.left-icon {
        position: absolute;
        top: 23%;
        left: 70%
    }

    .testimonials .slider-container .slider-icon.right-icon,
    .testimonial-container .slider-container .slider-icon.right-icon {
        top: 23%;
        left: 82%;
        position: absolute
    }

    .testimonials .testimonials-slider,
    .testimonial-container .testimonials-slider {
        width: 100%;
        gap: 2% !important;
        padding: 0;
        justify-content: center
    }

    .testimonials .testimonials-slider .testimonial-card,
    .testimonial-container .testimonials-slider .testimonial-card {
        width: 166.992px !important;
        height: 225px !important
    }

    .testimonials .testimonials-slider .video-wrapper,
    .testimonial-container .testimonials-slider .video-wrapper {
        width: 100%
    }

    .testimonials .testimonials-slider .video-wrapper video,
    .testimonial-container .testimonials-slider .video-wrapper video {
        width: 166.992px;
        height: 225px
    }

    .sactive .page {
        height: .6rem !important;
        width: .6rem !important
    }
}

.STest {
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    padding: 50px 120px;
    background-color: var(--color-white)
}

.STest .stdesc {
    text-align: left
}

.STest .stdesc .heading h2 {
    color: var(--color-red);
    font-size: 3rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-shadow: 0px 5px 5px rgba(0, 0, 0, .3);
    margin-bottom: 10px
}

.STest .stdesc .desc p {
    font-size: 1.5rem;
    font-weight: 650;
    color: #2c2c2c;
    width: 1189px;
    line-height: 28px
}

.STest .slider-icon {
    opacity: 0
}

.STest .stcontainer {
    display: grid;
    grid-template-columns: 31.5% 33% 31.5%;
    column-gap: 27px;
    justify-content: space-between;
    align-items: start
}

.STest .stcontainer .image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.STest .stcontainer .image img,
.STest .stcontainer .image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px
}

.STest .stcontainer .image.image1 {
    height: 620px
}

.STest .stcontainer .image.image2,
.STest .stcontainer .image.image3 {
    height: 302px
}

.STest .stcontainer .image.image4 {
    height: 620px
}

.STest .stcontainer .image .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4.125rem;
    height: 4.125rem;
    background-color: transparent;
    border: .125rem solid white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1;
    transition: transform .3s
}

.STest .stcontainer .image .play-button:hover {
    transform: translate(-50%, -50%) scale(1.2)
}

.STest .stcontainer .image .play-button:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: .825rem 0 .825rem 1.3rem;
    border-color: transparent transparent transparent white;
    margin-left: .3rem
}

.STest .stcontainer .column-stack {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 620px
}

.STest .stcontainer .column-stack .image {
    margin-bottom: 16px
}

.STest .stcontainer .mute-button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: #000000b3;
    color: var(--color-white);
    border: none;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 14px;
    cursor: pointer;
    z-index: 5
}

.STest .navigation-dots {
    display: flex;
    margin-top: 3rem;
    justify-content: center
}

.STest .navigation-dots .dot {
    width: .825rem;
    height: .825rem;
    background: #ddd;
    border-radius: 50%;
    margin: 0 .4125rem;
    cursor: pointer
}

.STest .navigation-dots .dot.active {
    background: var(--color-red)
}

@media (max-width: 1536px) {
    .STest {
        padding: 50px 100px !important
    }

    .STest .stdesc .heading h2 {
        font-size: 2.5rem !important;
        margin-bottom: 8px !important
    }

    .STest .stdesc .desc p {
        font-size: 1.3rem !important;
        width: 1000px !important;
        line-height: 26px !important
    }

    .STest .stcontainer {
        grid-template-columns: 420px 480px 420px !important;
        column-gap: 15px !important
    }

    .STest .stcontainer .image {
        border-radius: 8px !important
    }

    .STest .stcontainer .image.image1,
    .STest .stcontainer .image.image4 {
        height: 540px !important
    }

    .STest .stcontainer .image.image2,
    .STest .stcontainer .image.image3 {
        height: 260px !important
    }

    .STest .stcontainer .image .play-button {
        width: 3.8rem !important;
        height: 3.8rem !important;
        border-width: .1rem !important
    }

    .STest .stcontainer .image .play-button:hover {
        transform: translate(-50%, -50%) scale(1.1) !important
    }

    .STest .stcontainer .image .play-button:after {
        border-width: .7rem 0 .7rem 1.1rem !important;
        margin-left: .25rem !important
    }

    .STest .stcontainer .column-stack {
        height: 550px !important
    }

    .STest .stcontainer .column-stack .image {
        margin-bottom: 12px !important
    }

    .STest .navigation-dots {
        margin-top: 2.5rem !important
    }

    .STest .navigation-dots .dot {
        width: .7rem !important;
        height: .7rem !important;
        margin: 0 .35rem !important
    }
}

@media (max-width: 1440px) {
    .STest {
        padding: 50px 80px !important
    }

    .STest .stdesc .heading h2 {
        font-size: 2.2rem !important
    }

    .STest .stdesc .desc p {
        font-size: 1.2rem !important;
        width: 900px !important;
        line-height: 24px !important
    }

    .STest .stcontainer {
        grid-template-columns: 380px 440px 380px !important;
        column-gap: 12px !important
    }

    .STest .stcontainer .image.image1,
    .STest .stcontainer .image.image4 {
        height: 500px !important
    }

    .STest .stcontainer .image.image2,
    .STest .stcontainer .image.image3 {
        height: 240px !important
    }

    .STest .stcontainer .image .play-button {
        width: 3.5rem !important;
        height: 3.5rem !important
    }

    .STest .stcontainer .image .play-button:after {
        border-width: .65rem 0 .65rem 1rem !important
    }

    .STest .stcontainer .column-stack {
        height: 500px !important
    }

    .STest .navigation-dots .dot {
        width: .65rem !important;
        height: .65rem !important
    }
}

@media (max-width: 1280px) {
    .STest {
        padding: 40px 60px !important
    }

    .STest .stdesc .heading h2 {
        font-size: 2rem !important
    }

    .STest .stdesc .desc p {
        font-size: 1.1rem !important;
        width: 100% !important;
        line-height: 22px !important
    }

    .STest .stcontainer {
        grid-template-columns: 330px 380px 330px !important;
        column-gap: 10px !important
    }

    .STest .stcontainer .image.image1,
    .STest .stcontainer .image.image4 {
        height: 460px !important
    }

    .STest .stcontainer .image.image2,
    .STest .stcontainer .image.image3 {
        height: 220px !important
    }

    .STest .stcontainer .image .play-button {
        width: 3.2rem !important;
        height: 3.2rem !important
    }

    .STest .stcontainer .image .play-button:after {
        border-width: .6rem 0 .6rem .9rem !important
    }

    .STest .stcontainer .column-stack {
        height: 460px !important
    }

    .STest .navigation-dots {
        margin-top: 2rem !important
    }

    .STest .navigation-dots .dot {
        width: .6rem !important;
        height: .6rem !important
    }
}

@media (max-width: 480px) {
    .STest {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin: auto !important;
        padding: 54px 16px 0 !important
    }

    .STest .stdesc {
        margin-top: 40px !important;
        width: 100% !important
    }

    .STest .stdesc .heading h2 {
        font-size: 1.25rem !important;
        line-height: 28.87px !important
    }

    .STest .stdesc .desc p {
        font-size: .875rem !important;
        width: 100% !important;
        font-weight: 500 !important;
        padding: 5% 0 !important
    }

    .STest .slider {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        position: absolute !important;
        top: 41% !important;
        right: 11% !important
    }

    .STest .slider .slider-icon {
        display: flex !important;
        flex-direction: row !important;
        cursor: pointer !important;
        background-color: #fbc51d !important;
        color: #2c2c2c !important;
        border-radius: 50% !important;
        font-size: 2.25rem !important;
        padding: .64rem !important;
        height: 2.1rem !important;
        width: 2.1rem !important;
        opacity: 1 !important
    }

    .STest .stcontainer {
        width: 100% !important;
        height: 223.23px !important;
        display: flex !important;
        margin-top: 10px !important;
        column-gap: 11px !important;
        align-items: center !important;
        justify-content: center !important
    }

    .STest .stcontainer .column-stack {
        margin-top: 10px !important;
        height: 203.23px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important
    }

    .STest .stcontainer .image {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important
    }

    .STest .stcontainer .image img,
    .STest .stcontainer .image video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 8px !important
    }

    .STest .stcontainer .image.image1,
    .STest .stcontainer .image.image2 {
        height: 203.23px !important;
        width: 169px !important
    }

    .STest .stcontainer .image.image3,
    .STest .stcontainer .image.image4 {
        display: none !important
    }

    .STest .stcontainer .image .play-button {
        width: 36px !important;
        height: 36px !important
    }

    .navigation-dots .dot {
        width: .525rem !important;
        height: .525rem !important
    }

    .navigation-dots .dot.active {
        margin-top: 0 !important;
        margin-bottom: 70px !important
    }
}

.gateway {
    width: 100%;
    background: #fbc51d;
    box-shadow: -.333rem -.333rem .833rem #0f0f0f33 inset, .333rem .333rem .833rem #0f0f0f33 inset;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.gateway .gateway-content {
    width: 100%;
    padding: 3.33rem 7.6rem;
    display: flex;
    margin: auto;
    justify-content: space-between;
    gap: 340px;
    align-items: center
}

.gateway .text-section h2 {
    font-family: 'Sora-SemiBold';
    font-size: 3.33rem;
    font-weight: 400;
    line-height: normal;
    color: var(--color-red);
    text-shadow: 0rem .33rem .33rem rgba(0, 0, 0, .3);
    width: 32.33rem
}

.gateway .text-section p {
    font-size: 1.5rem;
    font-weight: 650;
    line-height: normal;
    color: #2c2c2c;
    width: 34.33rem
}

.gateway .video-section {
    width: 140rem;
    height: 31.67rem;
    border-radius: .833rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.gateway .video-section video {
    height: 31rem;
    position: absolute;
    object-fit: cover;
    border-radius: inherit;
    z-index: 1
}

.gateway .video-section .play-icon {
    width: 5.17rem;
    height: 5.17rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2
}

.gateway .video-section .play-icon svg {
    position: absolute;
    z-index: 3
}

@media (max-width: 1536px) {
    .gateway .gateway-content {
        padding: 3rem 6.5rem;
        gap: 240px
    }

    .gateway .text-section h2 {
        font-size: 2.75rem;
        width: 28rem
    }

    .gateway .text-section p {
        font-size: 1.3rem;
        width: 30rem
    }

    .gateway .video-section {
        width: 100rem;
        height: 28rem
    }

    .gateway .video-section video {
        height: 27.5rem
    }

    .gateway .video-section .play-icon {
        width: 4.5rem;
        height: 4.5rem
    }
}

@media (max-width: 1440px) {
    .gateway .gateway-content {
        padding: 2.75rem 5.5rem;
        gap: 180px
    }

    .gateway .text-section h2 {
        font-size: 2.5rem;
        width: 25rem
    }

    .gateway .text-section p {
        font-size: 1.2rem;
        width: 28rem
    }

    .gateway .video-section {
        width: 95rem;
        height: 26rem
    }

    .gateway .video-section video {
        height: 25.5rem
    }

    .gateway .video-section .play-icon {
        width: 4.2rem;
        height: 4.2rem
    }
}

@media (max-width: 1280px) {
    .gateway .gateway-content {
        padding: 2.5rem 4.5rem;
        gap: 180px
    }

    .gateway .text-section h2 {
        font-size: 2.2rem;
        width: 22rem
    }

    .gateway .text-section p {
        font-size: 1.1rem;
        width: 25rem
    }

    .gateway .video-section {
        width: 80rem;
        height: 24rem
    }

    .gateway .video-section video {
        height: 23.5rem
    }

    .gateway .video-section .play-icon {
        width: 3.8rem;
        height: 3.8rem
    }
}

@media (max-width: 480px) {
    .gateway {
        width: 100%
    }

    .gateway .gateway-content {
        display: flex;
        flex-direction: column;
        width: 100% !important;
        gap: 0;
        padding: 40px 16px !important
    }

    .gateway .text-section {
        width: 100% !important
    }

    .gateway .text-section h2 {
        font-size: 1.25rem !important;
        width: 100% !important
    }

    .gateway .text-section p {
        padding-top: 20px;
        font-size: .875rem !important;
        width: 100% !important
    }

    .gateway .video-section {
        width: 100% !important;
        padding-top: 30px;
        height: 16rem
    }

    .gateway .video-section video {
        width: 21.375rem !important;
        height: 13.813rem !important
    }

    .gateway .video-section .play-icon svg {
        height: 36px;
        width: 36px
    }
}

.OurEvents {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: auto;
    height: 925px;
    overflow: hidden;
    background-color: var(--color-white)
}

.OurEvents .navigate {
    opacity: 0;
    gap: 10px
}

.OurEvents .navigate .slider-icon {
    cursor: pointer !important;
    background-color: #fbc51d !important;
    color: #2c2c2c !important;
    border-radius: 50% !important;
    font-size: 14px !important;
    font-weight: 100 !important;
    padding: 6px 12px !important
}

.OurEvents .top {
    display: flex;
    justify-content: space-between;
    padding-top: 80px
}

.OurEvents .top .left {
    padding-left: 124px;
    display: flex;
    flex-direction: column
}

.OurEvents .top .left .head,
.OurEvents .top .left .desc {
    width: 912px
}

.OurEvents .top .left .head h2,
.OurEvents .top .left .desc h2 {
    font-size: 3rem;
    font-weight: 400;
    color: var(--color-red);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3)
}

.OurEvents .top .left .head p,
.OurEvents .top .left .desc p {
    font-size: 1.5rem;
    font-weight: 650;
    color: #2c2c2c
}

.OurEvents .top .right {
    padding-right: 118.32px
}

.OurEvents .top .right .view-all {
    width: 15.56rem;
    height: 4rem;
    border-radius: .83rem;
    font-size: 24px;
    font-weight: 650;
    color: #2c2c2c;
    background: #fbc51d;
    cursor: pointer;
    border: none
}

.OurEvents .top .right .view-all:hover {
    color: var(--color-white);
    background-color: #2c2c2c
}

.OurEvents .bottom {
    display: flex;
    height: 650px;
    margin: auto;
    align-items: center;
    position: relative;
    width: 100%
}

.OurEvents .bottom .event-slider {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 80px;
    transition: transform 20s cubic-bezier(.22, 1, .36, 1)
}

.OurEvents .bottom .card {
    top: 0;
    position: absolute;
    display: flex;
    gap: 5px;
    flex-direction: column;
    align-items: center;
    width: 22%;
    height: 500px;
    padding: 20px;
    border-radius: 10px;
    background-color: #fbc51d;
    opacity: .5;
    transform: scale(.8);
    transition: transform .8s ease, opacity .8s ease
}

.OurEvents .bottom .card.left {
    transform: translate(-180%) scale(1.08);
    opacity: 1;
    z-index: 1
}

.OurEvents .bottom .card.center-left {
    transform: translate(-60%) scale(1.15);
    opacity: 1;
    z-index: 3
}

.OurEvents .bottom .card.center-right {
    transform: translate(60%) scale(1.15);
    opacity: 1;
    z-index: 3
}

.OurEvents .bottom .card.right {
    transform: translate(180%) scale(1.08);
    opacity: 1;
    z-index: 1
}

.OurEvents .bottom .card.hidden-left {
    transform: translate(-300%) scale(.7);
    opacity: 0;
    z-index: 0
}

.OurEvents .bottom .card.hidden-right {
    transform: translate(300%) scale(.7);
    opacity: 0;
    z-index: 0
}

.OurEvents .bottom .card .image {
    width: 98%;
    height: 50%
}

.OurEvents .bottom .card .image video {
    width: 100%;
    height: 100%
}

.OurEvents .bottom .card .play-button {
    position: absolute;
    top: 27%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border: 2px solid white;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform .3s
}

.OurEvents .bottom .card .play-button:hover {
    transform: translate(-50%, -50%) scale(1.2)
}

.OurEvents .bottom .card .play-button:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent white;
    position: relative;
    left: 2px
}

.OurEvents .bottom .card .title {
    font-size: 18px;
    font-weight: 650;
    color: #000
}

.OurEvents .bottom .card .card-desc {
    padding-top: 10px 30px;
    font-size: 14px;
    font-weight: 500;
    text-align: center
}

.OurEvents .bottom .card .icon {
    width: 70px;
    height: max-content
}

.OurEvents .bottom .card .icon img {
    width: 100%;
    height: 100%;
    object-fit: fill
}

.OurEvents .bottom .card .link {
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    text-decoration: underline;
    color: var(--color-red);
    padding-top: 12px
}

.OurEvents .oeactive {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 120px
}

.OurEvents .oeactive .oepage {
    height: 13px;
    width: 13px;
    border-radius: 50%;
    background-color: #da1e3733;
    transition: background-color .3s ease
}

.OurEvents .oeactive .oepage.oeactive-page {
    background-color: #da1e37
}

@media (max-width: 1536px) {
    .OurEvents {
        height: 850px
    }

    .OurEvents .top {
        padding-top: 70px
    }

    .OurEvents .top .left {
        padding-left: 100px
    }

    .OurEvents .top .left .head,
    .OurEvents .top .left .desc {
        width: 800px
    }

    .OurEvents .top .left .head h2,
    .OurEvents .top .left .desc h2 {
        font-size: 2.5rem
    }

    .OurEvents .top .left .head p,
    .OurEvents .top .left .desc p {
        font-size: 1.3rem
    }

    .OurEvents .top .right {
        padding-right: 100px
    }

    .OurEvents .top .right .view-all {
        width: 13rem;
        height: 3.5rem;
        font-size: 22px
    }

    .OurEvents .bottom {
        height: 600px
    }

    .OurEvents .bottom .card {
        height: 450px
    }

    .OurEvents .bottom .card .title {
        font-size: 16px
    }

    .OurEvents .bottom .card .card-desc {
        font-size: 13px
    }

    .OurEvents .bottom .card .link {
        font-size: 14px
    }

    .OurEvents .bottom .card .play-button {
        width: 45px;
        height: 45px
    }

    .OurEvents .oeactive {
        margin-top: 100px
    }

    .OurEvents .oeactive .oepage {
        height: 12px;
        width: 12px
    }
}

@media (max-width: 1440px) {
    .OurEvents {
        height: 800px
    }

    .OurEvents .top {
        padding-top: 60px
    }

    .OurEvents .top .left {
        padding-left: 90px
    }

    .OurEvents .top .left .head,
    .OurEvents .top .left .desc {
        width: 700px
    }

    .OurEvents .top .left .head h2,
    .OurEvents .top .left .desc h2 {
        font-size: 2.25rem
    }

    .OurEvents .top .left .head p,
    .OurEvents .top .left .desc p {
        font-size: 1.2rem
    }

    .OurEvents .top .right {
        padding-right: 90px
    }

    .OurEvents .top .right .view-all {
        width: 12rem;
        height: 3.2rem;
        font-size: 20px
    }

    .OurEvents .bottom {
        height: 600px
    }

    .OurEvents .bottom .card {
        height: 480px
    }

    .OurEvents .bottom .card .title {
        font-size: 15px
    }

    .OurEvents .bottom .card .card-desc {
        font-size: 12.5px
    }

    .OurEvents .bottom .card .link {
        font-size: 13.5px
    }

    .OurEvents .bottom .card .play-button {
        width: 42px;
        height: 42px
    }

    .OurEvents .oeactive {
        margin-top: 90px
    }

    .OurEvents .oeactive .oepage {
        height: 11px;
        width: 11px
    }
}

@media (max-width: 1280px) {
    .OurEvents {
        height: 750px
    }

    .OurEvents .top {
        padding-top: 50px
    }

    .OurEvents .top .left {
        padding-left: 70px
    }

    .OurEvents .top .left .head,
    .OurEvents .top .left .desc {
        width: 600px
    }

    .OurEvents .top .left .head h2,
    .OurEvents .top .left .desc h2 {
        font-size: 2rem
    }

    .OurEvents .top .left .head p,
    .OurEvents .top .left .desc p {
        font-size: 1.1rem
    }

    .OurEvents .top .right {
        padding-right: 70px
    }

    .OurEvents .top .right .view-all {
        width: 11rem;
        height: 3rem;
        font-size: 18px
    }

    .OurEvents .bottom {
        height: 540px
    }

    .OurEvents .bottom .card {
        height: 390px
    }

    .OurEvents .bottom .card .title {
        font-size: 14px
    }

    .OurEvents .bottom .card .card-desc {
        font-size: 12px
    }

    .OurEvents .bottom .card .link {
        font-size: 13px
    }

    .OurEvents .bottom .card .play-button {
        width: 40px;
        height: 40px
    }

    .OurEvents .oeactive {
        margin-top: 80px
    }

    .OurEvents .oeactive .oepage {
        height: 10px;
        width: 10px
    }
}

@media (max-width: 480px) {
    .OurEvents {
        height: 780px;
        padding: 5% 5% 0
    }

    .OurEvents .navigate {
        display: flex;
        opacity: 1;
        justify-content: flex-end
    }

    .OurEvents .navigate .right,
    .OurEvents .navigate .left {
        height: 33px;
        width: 34px;
        display: flex
    }

    .OurEvents .top {
        padding: 0
    }

    .OurEvents .top .left {
        width: 100%;
        padding: 0
    }

    .OurEvents .top .left .head {
        width: 100%
    }

    .OurEvents .top .left .head h2 {
        font-size: 1.25rem;
        line-height: 1.4;
        font-weight: 400;
        margin-bottom: 2%
    }

    .OurEvents .top .left .desc {
        width: 100%
    }

    .OurEvents .top .left .desc p {
        font-size: 16px !important;
        font-weight: 500 !important;
        max-width: 100%
    }

    .OurEvents .right {
        display: none
    }

    .OurEvents .bottom {
        height: 550px;
        margin: 0 !important
    }

    .OurEvents .event-slider {
        display: flex;
        justify-content: center;
        overflow: hidden
    }

    .OurEvents .event-slider .card {
        min-width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        transform: none !important;
        opacity: 1 !important;
        position: relative !important;
        margin: 0 auto;
        padding: 0 2%
    }

    .OurEvents .oeactive {
        display: flex;
        justify-content: center;
        margin-top: 10px
    }

    .OurEvents .oeactive .oepage {
        width: 8px;
        height: 8px;
        background: #ccc;
        border-radius: 50%;
        margin: 0 4px
    }

    .OurEvents .oeactive .oepage.oeactive-page {
        background: #000
    }
}

.awards {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 0;
    background-color: var(--color-white)
}

.awards .navigate {
    opacity: 0
}

.awards .navigate .slider-icon {
    cursor: pointer;
    background-color: #fbc51d;
    color: #2c2c2c;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 100;
    padding: 6px 12px
}

.awards .adesc {
    text-align: left;
    padding: 0 120px
}

.awards .adesc .heading h2 {
    width: 100%;
    color: var(--color-red);
    max-width: 1200px;
    font-size: 3rem;
    font-weight: 400;
    text-shadow: 0px 5px 5px rgba(0, 0, 0, .3);
    margin-bottom: 10px
}

.awards .adesc .desc p {
    padding: 0 600px 0 0;
    font-size: 1.5rem;
    font-weight: 650;
    color: #2c2c2c;
    margin-bottom: 27px;
    line-height: 2rem
}

.awards .acontainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 24rem;
    position: relative;
    overflow: hidden
}

.awards .award {
    position: absolute;
    transition: transform .7s ease-in-out, opacity .7s ease-in-out;
    opacity: 0;
    width: 33vw;
    height: auto;
    border-radius: 10px
}

.awards .award img {
    width: 100%;
    height: auto
}

.awards .left {
    transform: translate(-120%) scale(.9);
    opacity: 1
}

.awards .center {
    transform: translate(0) scale(1.2);
    border-radius: 10px;
    opacity: 1;
    z-index: 2
}

.awards .right {
    transform: translate(120%) scale(.9);
    opacity: 1
}

.awards .hidden {
    transform: translate(200%);
    opacity: 0
}

.awards .aActive {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 40px
}

.awards .aActive .aPage {
    height: .825rem;
    width: .825rem;
    border-radius: 50%;
    background-color: #da1e3733;
    transition: background-color .3s ease
}

.awards .aActive .aPage.aActive-page {
    background-color: #da1e37
}

@media (max-width: 1536px) {
    .awards {
        padding: 40px 0
    }

    .awards .adesc {
        padding: 0 100px
    }

    .awards .adesc .heading h2 {
        font-size: 2.5rem;
        max-width: 1000px
    }

    .awards .adesc .desc p {
        padding-right: 500px;
        font-size: 1.3rem;
        line-height: 1.8rem
    }

    .awards .acontainer {
        height: 22rem
    }

    .awards .award {
        width: 36vw
    }

    .awards .aActive {
        margin-top: 35px
    }

    .awards .aActive .aPage {
        height: 12px;
        width: 12px
    }
}

@media (max-width: 1440px) {
    .awards {
        padding: 35px 0
    }

    .awards .adesc {
        padding: 0 80px
    }

    .awards .adesc .heading h2 {
        font-size: 2.25rem;
        max-width: 900px
    }

    .awards .adesc .desc p {
        padding-right: 400px;
        font-size: 1.2rem;
        line-height: 1.7rem
    }

    .awards .acontainer {
        height: 20rem
    }

    .awards .award {
        width: 38vw
    }

    .awards .aActive {
        margin-top: 30px
    }

    .awards .aActive .aPage {
        height: 11px;
        width: 11px
    }
}

@media (max-width: 1280px) {
    .awards {
        padding: 30px 0
    }

    .awards .adesc {
        padding: 0 60px
    }

    .awards .adesc .heading h2 {
        font-size: 2rem;
        max-width: 800px
    }

    .awards .adesc .desc p {
        padding-right: 300px;
        font-size: 1.1rem;
        line-height: 1.6rem
    }

    .awards .acontainer {
        height: 18rem
    }

    .awards .award {
        width: 40vw
    }

    .awards .aActive {
        margin-top: 25px
    }

    .awards .aActive .aPage {
        height: 10px;
        width: 10px
    }
}

@media (max-width: 480px) {
    .awards {
        width: 100% !important;
        padding: 4% 2% !important
    }

    .awards .left,
    .awards .center,
    .awards .right,
    .awards .hidden {
        transform: none
    }

    .awards .navigate {
        z-index: 1;
        opacity: 1 !important;
        display: flex !important;
        pointer-events: auto !important;
        visibility: visible !important;
        padding-bottom: 1rem;
        gap: 10px !important;
        position: absolute;
        margin-top: 50%;
        right: 2%
    }

    .awards .adesc {
        text-align: left;
        padding: 0 16px;
        width: 100%
    }

    .awards .adesc .heading h2 {
        width: 100%;
        font-size: 1.25rem;
        line-height: 1.4;
        font-weight: 400
    }

    .awards .adesc .desc p {
        width: 100%;
        padding: 0 !important;
        font-size: 14px !important;
        font-style: normal !important;
        font-weight: 500 !important;
        line-height: normal !important
    }

    .awards .acontainer {
        position: relative;
        width: 100%;
        height: 17rem
    }

    .awards .acontainer .awslider-icon.left {
        position: absolute;
        top: -14% !important;
        right: 19% !important
    }

    .awards .acontainer .awslider-icon.right {
        position: absolute;
        top: -14% !important;
        right: 4% !important
    }

    .awards .acontainer .award {
        width: 100%;
        padding: 10px !important;
        transition: none;
        border-radius: 10px
    }

    .awards .acontainer .award img {
        width: 100%;
        height: auto
    }

    .awards .acontainer .award:hover {
        transform: none
    }

    .awards .aActive {
        margin: 20px 0
    }

    .awards .aActive .aPage {
        width: 8px;
        height: 8px
    }
}

.partnerWithUs {
    padding-top: 40px;
    width: 100%;
    flex-shrink: 0;
    background: var(--color-red);
    box-shadow: -.833rem -.833rem 1.67rem #a02737 inset, .833rem .833rem 1.67rem #a02737 inset;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    text-align: center;
    padding-inline: 2.67rem
}

.partnerWithUs .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%
}

.partnerWithUs .content .title {
    color: var(--color-white);
    font-family: 'Sora-SemiBold';
    font-size: 3.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 1.33rem
}

.partnerWithUs .content .description {
    color: var(--color-white);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    margin: auto;
    margin-bottom: 2rem;
    width: 1201px
}

.bottom {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: space-between
}

.bottom .leftImage {
    width: 20.42rem;
    height: 16rem
}

.bottom .ctaButton {
    display: flex;
    width: 15.33rem;
    height: 4.25rem;
    padding: 1rem 2.167rem;
    justify-content: center;
    align-items: center;
    gap: .833rem;
    flex-shrink: 0;
    border-radius: .833rem;
    background: #f3f3f3;
    color: var(--color-red);
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    border: none;
    cursor: pointer;
    transition: transform .2s ease
}

.bottom .ctaButton:hover {
    background-color: transparent;
    color: var(--color-white);
    border: .083rem solid #f3f3f3
}

.bottom .rightImage {
    width: 20.42rem;
    height: 15.42rem;
    margin-right: 1rem
}

@media (max-width: 1536px) {
    .partnerWithUs {
        padding-top: 35px;
        padding-inline: 2rem
    }

    .partnerWithUs .content .title {
        font-size: 2.75rem
    }

    .partnerWithUs .content .description {
        font-size: 1.3rem;
        width: 1000px
    }

    .bottom .leftImage,
    .bottom .rightImage {
        width: 18rem;
        height: auto
    }

    .bottom .ctaButton {
        width: 13.5rem;
        height: 4rem;
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .partnerWithUs {
        padding-top: 30px;
        padding-inline: 1.67rem
    }

    .partnerWithUs .content .title {
        font-size: 2.5rem
    }

    .partnerWithUs .content .description {
        font-size: 1.2rem;
        width: 900px
    }

    .bottom .leftImage,
    .bottom .rightImage {
        width: 16rem;
        height: auto
    }

    .bottom .ctaButton {
        width: 12.5rem;
        height: 3.75rem;
        font-size: 20px
    }
}

@media (max-width: 1280px) {
    .partnerWithUs {
        padding-top: 25px;
        padding-inline: 1.33rem
    }

    .partnerWithUs .content .title {
        font-size: 2.25rem
    }

    .partnerWithUs .content .description {
        font-size: 1.1rem;
        width: 750px
    }

    .bottom {
        gap: 1.5rem;
        align-items: center
    }

    .bottom .leftImage,
    .bottom .rightImage {
        width: 14rem;
        height: auto
    }

    .bottom .ctaButton {
        width: 12rem;
        height: 3.5rem;
        font-size: 18px
    }
}

@media (max-width: 480px) {
    .partnerWithUs {
        padding: 60px 20px !important
    }

    .partnerWithUs .content {
        width: 100% !important;
        height: 50%
    }

    .partnerWithUs .content .title {
        font-size: 20px
    }

    .partnerWithUs .content .description {
        width: 100% !important;
        font-size: 14px !important
    }

    .partnerWithUs .bottom {
        width: 100% !important;
        height: auto !important
    }

    .partnerWithUs .bottom .leftImage {
        width: 111px;
        height: 58px
    }

    .partnerWithUs .bottom .ctaButton {
        width: 117px;
        height: 32px;
        font-weight: 500;
        font-size: 14px !important;
        line-height: normal;
        padding: 20px 4px !important
    }

    .partnerWithUs .bottom .rightImage {
        width: 67px;
        height: 58px
    }
}

@media (min-width: 320px) and (max-width: 375px) {
    .partnerWithUs {
        padding: 60px 20px !important
    }

    .partnerWithUs .bottom {
        width: 100% !important;
        height: auto !important
    }

    .partnerWithUs .bottom .leftImage {
        width: 85px !important;
        height: 52px !important
    }

    .partnerWithUs .bottom .ctaButton {
        width: 117px;
        height: 32px;
        font-weight: 500;
        font-size: 14px !important;
        line-height: normal;
        padding: 20px 4px !important
    }

    .partnerWithUs .bottom .rightImage {
        width: 67px;
        height: 58px
    }
}

.careerEnquirySection {
    position: relative;
    width: 100%;
    height: 50rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.careerEnquirySection .video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1
}

.careerEnquirySection:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #1f1f1f66, #1f1f1f66);
    z-index: -1
}

.careerEnquirySection .careerEnquirySection-content {
    position: relative;
    text-align: center;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.careerEnquirySection .careerEnquirySection-content h1 {
    font-size: 3.33rem;
    color: var(--color-white);
    width: 46.42rem;
    height: 9.67rem;
    margin: 0 auto;
    opacity: 1;
    font-weight: 400;
    line-height: normal;
    display: inline-block
}

.careerEnquirySection .careerEnquirySection-content p {
    margin-top: 1.67rem;
    color: var(--color-white);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    width: 46.42rem;
    height: 3.67rem;
    display: inline-block
}

.careerEnquirySection .careerEnquirySection-content button {
    margin-top: 3.33rem;
    font-size: 1.67rem;
    color: var(--color-white);
    width: 18.75rem;
    height: 4rem;
    padding: 1rem 2.167rem;
    border-radius: .833rem;
    border: .083rem solid #f3f3f3;
    background-color: transparent;
    cursor: pointer;
    opacity: 1;
    transition: background-color .3s ease
}

.careerEnquirySection .careerEnquirySection-content button:hover {
    background-color: var(--color-white);
    color: #2c2c2c
}

@media (max-width: 1536px) {
    .careerEnquirySection {
        height: 45rem
    }

    .careerEnquirySection .careerEnquirySection-content h1 {
        font-size: 3rem;
        width: 40rem;
        height: auto
    }

    .careerEnquirySection .careerEnquirySection-content p {
        font-size: 1.4rem;
        width: 40rem;
        height: auto
    }

    .careerEnquirySection .careerEnquirySection-content button {
        font-size: 1.5rem;
        width: 17rem;
        height: 3.75rem
    }
}

@media (max-width: 1440px) {
    .careerEnquirySection {
        height: 42rem
    }

    .careerEnquirySection .careerEnquirySection-content h1 {
        font-size: 2.75rem;
        width: 36rem
    }

    .careerEnquirySection .careerEnquirySection-content p {
        font-size: 1.3rem;
        width: 36rem
    }

    .careerEnquirySection .careerEnquirySection-content button {
        font-size: 1.4rem;
        width: 16rem;
        height: 3.5rem
    }
}

@media (max-width: 1280px) {
    .careerEnquirySection {
        height: 38rem
    }

    .careerEnquirySection .careerEnquirySection-content h1 {
        font-size: 2.5rem;
        width: 32rem
    }

    .careerEnquirySection .careerEnquirySection-content p {
        font-size: 1.2rem;
        width: 32rem
    }

    .careerEnquirySection .careerEnquirySection-content button {
        font-size: 1.3rem;
        width: 15rem;
        height: 3.33rem
    }
}

@media (max-width: 480px) {
    .careerEnquirySection {
        height: auto !important;
        padding: 2rem 1rem !important;
        flex-direction: column !important
    }

    .careerEnquirySection-content {
        text-align: center !important;
        align-items: center !important
    }

    .careerEnquirySection-content h1 {
        font-size: 1.8rem !important;
        width: 100% !important;
        height: auto !important;
        text-align: center !important
    }

    .careerEnquirySection-content p {
        font-size: 1.2rem !important;
        width: 100% !important;
        height: auto !important;
        text-align: center !important;
        margin-top: 1rem !important
    }

    .careerEnquirySection-content button {
        width: auto !important;
        font-size: 1rem !important;
        height: auto !important;
        padding: .8rem 2.167rem !important;
        margin-top: 1.2rem !important
    }

    .video-background {
        height: 100% !important;
        object-fit: cover !important
    }
}

@media (max-width: 399px) {
    .careerEnquirySection-content h1 {
        font-size: 1.5rem !important
    }

    .careerEnquirySection-content p {
        font-size: 1rem !important
    }

    .careerEnquirySection-content button {
        font-size: .9rem !important;
        height: auto !important;
        padding: .6rem 2.167rem !important;
        margin-top: 1rem !important
    }
}

.studentEnquiry {
    padding: 3rem 18.5rem;
    position: relative
}

.studentEnquiry-header {
    text-align: center
}

.studentEnquiry-header h2 {
    color: var(--color-red);
    text-shadow: 0rem .33rem .33rem rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 3.33rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 100%;
    margin: 0
}

.studentEnquiry-header p {
    padding: 20px 120px 50px;
    color: #2c2c2c;
    font-size: 1.5rem;
    font-weight: 650;
    line-height: normal
}

.studentEnquiry-form {
    display: flex;
    justify-content: flex-start;
    flex-direction: column
}

.studentEnquiry-form form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3.33rem;
    row-gap: 2.5rem;
    width: 100%
}

.studentEnquiry-form form label {
    color: #2c2c2c;
    font-size: 1.33rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    margin-bottom: .33rem
}

.studentEnquiry-form form input,
.studentEnquiry-form form select {
    margin-bottom: 1.33rem;
    display: block;
    height: 4.17rem;
    padding: .83rem 1.67rem;
    align-items: center;
    border-radius: .83rem;
    border: .083rem solid rgba(255, 30, 50, .3);
    color: #2c2c2c;
    font-size: 1.17rem;
    font-weight: 500;
    background-color: transparent;
    width: 100%
}

.studentEnquiry-form form input::placeholder,
.studentEnquiry-form form select::placeholder {
    color: #2c2c2c
}

.studentEnquiry-form form .checkbox-container {
    grid-column: span 2;
    display: flex;
    align-items: center;
    gap: 1rem
}

.studentEnquiry-form form .checkbox-container input[type=checkbox] {
    width: .67rem;
    height: .67rem;
    padding: .67rem;
    border-radius: .083rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: .17rem solid #dc143c;
    cursor: pointer;
    position: relative
}

.studentEnquiry-form form .checkbox-container input[type=checkbox]:checked {
    background-color: var(--color-red);
    border: none
}

.studentEnquiry-form form .checkbox-container input[type=checkbox]:checked:before {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 700
}

.studentEnquiry-form form .checkbox-container label {
    color: #2c2c2c;
    font-size: 1rem;
    font-weight: 500;
    margin-top: .42rem
}

.studentEnquiry-form form button {
    grid-column: span 2;
    display: flex;
    width: 15.56rem;
    height: 3.33rem;
    padding: 1rem 2.17rem;
    justify-content: center;
    align-items: center;
    border-radius: .83rem;
    background: #fbc51d;
    color: #2c2c2c;
    font-size: 24px;
    font-weight: 650;
    border: none;
    cursor: pointer
}

.studentEnquiry-form form button:hover {
    color: var(--color-white);
    background-color: #2c2c2c
}

.studentEnquiry .scrollup {
    position: absolute;
    cursor: pointer;
    background-color: #2c2c2c13;
    scale: .7;
    display: flex;
    align-content: center;
    justify-content: center;
    padding: 1%;
    width: 5%;
    border: 1px solid black;
    border-radius: 50%;
    right: 4%;
    bottom: 10%;
    animation: floatUpDown 1.5s ease-in-out infinite
}

@keyframes floatUpDown {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-35px)
    }

    to {
        transform: translateY(0)
    }
}

@media (max-width: 1536px) {
    .studentEnquiry {
        padding: 3rem 15rem !important
    }

    .studentEnquiry-header h2 {
        font-size: 3rem !important
    }

    .studentEnquiry-header p {
        padding: 15px 100px 40px !important;
        font-size: 1.4rem !important
    }

    .studentEnquiry-form form {
        column-gap: 3rem !important;
        row-gap: 2rem !important
    }

    .studentEnquiry-form form label {
        font-size: 1.25rem !important
    }

    .studentEnquiry-form form input,
    .studentEnquiry-form form select {
        height: 4rem !important;
        font-size: 1.1rem !important;
        padding: .75rem 1.5rem !important
    }

    .studentEnquiry-form form .checkbox-container {
        gap: .8rem !important
    }

    .studentEnquiry-form form .checkbox-container input[type=checkbox] {
        width: .4rem !important;
        height: .4rem !important;
        padding: .8rem !important
    }

    .studentEnquiry-form form .checkbox-container label {
        font-size: .9rem !important
    }

    .studentEnquiry-form form button {
        width: 14rem !important;
        height: 3rem !important;
        font-size: 22px !important;
        padding: 0rem 2rem !important
    }
}

@media (max-width: 480px) {
    .studentEnquiry {
        padding: 30px 17px 40px !important
    }

    .studentEnquiry .scrollup {
        width: 62px;
        bottom: 28px
    }

    .studentEnquiry .scrollup img {
        scale: .7
    }

    .studentEnquiry-header {
        text-align: left !important
    }

    .studentEnquiry-header h2 {
        padding-bottom: 10px !important;
        font-size: 24px !important
    }

    .studentEnquiry-header p {
        padding: 0 0 20px !important;
        font-size: 16px !important;
        width: 100%
    }

    .studentEnquiry-form form {
        row-gap: 1rem !important;
        display: flex !important;
        flex-direction: column
    }

    .studentEnquiry-form form input,
    .studentEnquiry-form form select {
        height: 3rem !important;
        font-size: 1.1rem !important;
        padding: .6rem 1rem !important
    }

    .studentEnquiry-form form label {
        font-size: 14px !important
    }

    .studentEnquiry-form form input,
    .studentEnquiry-form form select {
        font-size: 12px !important
    }

    .studentEnquiry-form form .checkbox-container label {
        font-size: 12px !important;
        margin-bottom: 0 !important
    }

    .checkbox-container {
        gap: .8rem !important
    }

    .checkbox-container input[type=checkbox] {
        width: .2rem !important;
        height: .2rem !important;
        padding: .6rem !important
    }

    .checkbox-container form input {
        font-size: 9.6px !important;
        width: .67rem !important;
        height: .67rem !important;
        padding: 0 !important
    }

    .studentEnquiry-form form button {
        width: 50% !important;
        height: auto !important;
        padding: .5rem 1rem !important;
        font-size: 18px !important
    }
}

/*! Flickity v3.0.0
https://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled {
    position: relative
}

.flickity-enabled:focus {
    outline: none
}

.flickity-viewport {
    overflow: hidden;
    position: relative;
    height: 100%;
    touch-action: pan-y
}

.flickity-slider {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0
}

.flickity-rtl .flickity-slider {
    left: unset;
    right: 0
}

.flickity-enabled.is-draggable {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none
}

.flickity-enabled.is-draggable .flickity-viewport {
    cursor: move;
    cursor: grab
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
    cursor: grabbing
}

.flickity-cell {
    position: absolute;
    left: 0
}

.flickity-rtl .flickity-cell {
    left: unset;
    right: 0
}

.flickity-button {
    position: absolute;
    background: var(--color-white)fffbf;
    border: none;
    color: #333
}

.flickity-button:hover {
    background: var(--color-white);
    cursor: pointer
}

.flickity-button:focus {
    outline: none;
    box-shadow: 0 0 0 5px #19f
}

.flickity-button:active {
    opacity: .6
}

.flickity-button:disabled {
    opacity: .3;
    cursor: auto;
    pointer-events: none
}

.flickity-button-icon {
    fill: currentColor
}

.flickity-prev-next-button {
    top: 50%;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transform: translateY(-50%)
}

.flickity-prev-next-button.previous {
    left: 10px
}

.flickity-prev-next-button.next {
    right: 10px
}

.flickity-rtl .flickity-prev-next-button.previous {
    left: auto;
    right: 10px
}

.flickity-rtl .flickity-prev-next-button.next {
    right: auto;
    left: 10px
}

.flickity-prev-next-button .flickity-button-icon {
    position: absolute;
    left: 20%;
    top: 20%;
    width: 60%;
    height: 60%
}

.flickity-page-dots {
    position: absolute;
    width: 100%;
    bottom: -25px;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}

.flickity-rtl .flickity-page-dots {
    direction: rtl
}

.flickity-page-dot {
    display: block;
    width: 10px;
    height: 10px;
    padding: 0;
    margin: 0 8px;
    background: #33333340;
    border-radius: 50%;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    text-indent: -9999px;
    overflow: hidden
}

.flickity-rtl .flickity-page-dot {
    text-indent: 9999px
}

.flickity-page-dot:focus {
    outline: none;
    box-shadow: 0 0 0 5px #19f
}

.flickity-page-dot.is-selected {
    background: #333
}

.newEnquiryForm .input-group select.input-field {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%227%22%20viewBox%3D%220%200%2010%207%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M1%201L5%205L9%201%22%20stroke%3D%22%232C2C2C%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E);
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 12px
}

@media (max-width: 480px) {
    .newGiftForm {
        flex-direction: column-reverse;
        margin: 0;
        padding: 0
    }

    .newGiftForm .newGiftForm__container {
        flex-direction: column-reverse;
        height: auto
    }

    .newGiftForm .newGiftForm_Bvoc_image {
        width: 100%;
        height: 75vh;
        background: url(../../../../assets/landing/bvoc_campaign_banner_mobile.jpeg) no-repeat;
        background-position: center;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: start
    }

    .newGiftForm .enquiry-form {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 30px
    }

    .newGiftForm .enquiry-form .input-group {
        display: flex;
        flex-direction: column;
        gap: 20px
    }

    .newGiftForm .enquiry-form .input-group label {
        color: var(--GREY-COLOR, #2c2c2c);

        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        letter-spacing: .8px
    }

    .newGiftForm .enquiry-form .input-group .input-field {
        padding: 12px 15px;
        color: var(--GREY-COLOR, #2c2c2c);
        height: 40px;

        font-size: 16px;
        font-style: normal;
        background-color: transparent;
        font-weight: 500;
        line-height: normal;
        border-radius: 10px;
        border: 1px solid rgba(255, 30, 50, .3);
        outline: none;
        transition: border .3s ease
    }

    .newGiftForm .enquiry-form .input-group .input-field:focus {
        border-color: #f4a261
    }

    .newGiftForm .enquiry-form .input-group select.input-field {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%227%22%20viewBox%3D%220%200%2010%207%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M1%201L5%205L9%201%22%20stroke%3D%22%232C2C2C%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E);
        background-repeat: no-repeat;
        background-position: right 20px center;
        background-size: 12px
    }

    .newGiftForm .enquiry-form .checkbox-container {
        font-size: 12px;
        color: #666;
        line-height: 1.4;
        text-align: center;
        margin-top: 10px
    }

    .newGiftForm .enquiry-form .checkbox-container span {
        color: #666;
        text-decoration: underline;
        cursor: pointer
    }

    .newGiftForm .enquiry-form .buttonAlign {
        display: flex;
        justify-content: center;
        align-items: center
    }

    .newGiftForm .enquiry-form .animated-button {
        width: 187px;
        height: 50px;
        padding: 12px 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #ffc107;
        color: #000;
        font-weight: 600;
        font-size: 16px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        gap: 10px;
        flex-shrink: 0;
        position: relative;
        overflow: hidden;
        transition: background-color .3s ease
    }

    .newGiftForm .enquiry-form .animated-button:hover {
        background-color: #e6b800
    }

    .newGiftForm .enquiry-form .animated-button .btn-background {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #0000001a;
        z-index: 0
    }

    .newGiftForm .enquiry-form .animated-button .btn-text {
        z-index: 1;
        position: relative
    }

    .newGiftForm .enquiry-form .input-otp-field {
        padding: 5px 12px;
        color: var(--GREY-COLOR, #2c2c2c);
        height: 40px;

        font-size: 16px;
        font-style: normal;
        background-color: transparent;
        font-weight: 200;
        line-height: normal;
        border-radius: 10px;
        border: 1px solid rgba(255, 30, 50, .3);
        outline: none;
        transition: border .3s ease;
        margin: 10px 5px;
        width: 13%
    }

    .newGiftForm .enquiry-form .input-otp-field:focus {
        border-color: #f4a261
    }

    .newGiftForm .newGiftForm__form {
        width: 90%;
        padding: 15px
    }

    .newGiftForm .newGiftForm__form h2 {
        font-size: 1.25rem;
        margin-bottom: 15px;
        text-align: center
    }

    .newGiftForm .newGiftForm__form form {
        gap: 20px
    }

    .newGiftForm .newGiftForm__form form .form-group {
        gap: 8px
    }

    .newGiftForm .newGiftForm__form form .form-group label {
        font-size: 16px
    }

    .newGiftForm .newGiftForm__form form .form-group input,
    .newGiftForm .newGiftForm__form form .form-group select {
        font-size: 14px;
        height: 48px
    }

    .newGiftForm .newGiftForm__form form .privacy {
        font-size: 10px;
        width: 100%
    }

    .newGiftForm .newGiftForm__form form button {
        width: 100%;
        height: 45px;
        font-size: 14px
    }

    .thankYouDiv h1 {
        font-size: 40px;
        text-align: center
    }

    .thankYouDiv h3 {
        font-size: 20px;
        font-weight: 400;
        padding-top: 20px;
        text-align: center
    }

    .thankYouDiv p {
        font-size: 14px;
        font-weight: 400;
        padding-top: 20px;
        text-align: center
    }
}

.newGiftForm__form {
    width: 26%;
    padding: 15px 30px;
    background: var(--color-white);
    border-radius: 15px;
    position: absolute;
    top: 6%;
    right: 5%
}

.newGiftForm__form h2 {
    color: var(--color-red);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 20px;
    text-align: center
}

.newEnquiryForm .input-group select.input-field {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%227%22%20viewBox%3D%220%200%2010%207%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M1%201L5%205L9%201%22%20stroke%3D%22%232C2C2C%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E);
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 12px
}

@media (max-width: 480px) {
    .newGiftForm {
        flex-direction: column-reverse;
        margin: 0;
        padding: 0
    }

    .newGiftForm .newGiftForm__container {
        flex-direction: column-reverse;
        height: auto
    }

    .newGiftForm .newGiftForm_Bvoc_image {
        width: 100%;
        height: 75vh;
        background: url(../../../../assets/landing/bvoc_campaign_banner_mobile.jpeg) no-repeat;
        background-position: center;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: start
    }

    .newGiftForm .enquiry-form {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 30px
    }

    .newGiftForm .enquiry-form .input-group {
        display: flex;
        flex-direction: column;
        gap: 20px
    }

    .newGiftForm .enquiry-form .input-group label {
        color: var(--GREY-COLOR, #2c2c2c);

        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        letter-spacing: .8px
    }

    .newGiftForm .enquiry-form .input-group .input-field {
        padding: 12px 15px;
        color: var(--GREY-COLOR, #2c2c2c);
        height: 40px;

        font-size: 16px;
        font-style: normal;
        background-color: transparent;
        font-weight: 500;
        line-height: normal;
        border-radius: 10px;
        border: 1px solid rgba(255, 30, 50, .3);
        outline: none;
        transition: border .3s ease
    }

    .newGiftForm .enquiry-form .input-group .input-field:focus {
        border-color: #f4a261
    }

    .newGiftForm .enquiry-form .input-group select.input-field {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%227%22%20viewBox%3D%220%200%2010%207%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M1%201L5%205L9%201%22%20stroke%3D%22%232C2C2C%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E);
        background-repeat: no-repeat;
        background-position: right 20px center;
        background-size: 12px
    }

    .newGiftForm .enquiry-form .checkbox-container {
        font-size: 12px;
        color: #666;
        line-height: 1.4;
        text-align: center;
        margin-top: 10px
    }

    .newGiftForm .enquiry-form .checkbox-container span {
        color: #666;
        text-decoration: underline;
        cursor: pointer
    }

    .newGiftForm .enquiry-form .buttonAlign {
        display: flex;
        justify-content: center;
        align-items: center
    }

    .newGiftForm .enquiry-form .animated-button {
        width: 187px;
        height: 50px;
        padding: 12px 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #ffc107;
        color: #000;
        font-weight: 600;
        font-size: 16px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        gap: 10px;
        flex-shrink: 0;
        position: relative;
        overflow: hidden;
        transition: background-color .3s ease
    }

    .newGiftForm .enquiry-form .animated-button:hover {
        background-color: #e6b800
    }

    .newGiftForm .enquiry-form .animated-button .btn-background {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #0000001a;
        z-index: 0
    }

    .newGiftForm .enquiry-form .animated-button .btn-text {
        z-index: 1;
        position: relative
    }

    .newGiftForm .enquiry-form .input-otp-field {
        padding: 5px 12px;
        color: var(--GREY-COLOR, #2c2c2c);
        height: 40px;

        font-size: 16px;
        font-style: normal;
        background-color: transparent;
        font-weight: 200;
        line-height: normal;
        border-radius: 10px;
        border: 1px solid rgba(255, 30, 50, .3);
        outline: none;
        transition: border .3s ease;
        margin: 10px 5px;
        width: 13%
    }

    .newGiftForm .enquiry-form .input-otp-field:focus {
        border-color: #f4a261
    }

    .newGiftForm .newGiftForm__form {
        width: 90%;
        padding: 15px
    }

    .newGiftForm .newGiftForm__form h2 {
        font-size: 1.25rem;
        margin-bottom: 15px;
        text-align: center
    }

    .newGiftForm .newGiftForm__form form {
        gap: 20px
    }

    .newGiftForm .newGiftForm__form form .form-group {
        gap: 8px
    }

    .newGiftForm .newGiftForm__form form .form-group label {
        font-size: 16px
    }

    .newGiftForm .newGiftForm__form form .form-group input,
    .newGiftForm .newGiftForm__form form .form-group select {
        font-size: 14px;
        height: 48px
    }

    .newGiftForm .newGiftForm__form form .privacy {
        font-size: 10px;
        width: 100%
    }

    .newGiftForm .newGiftForm__form form button {
        width: 100%;
        height: 45px;
        font-size: 14px
    }

    .thankYouDiv h1 {
        font-size: 40px;
        text-align: center
    }

    .thankYouDiv h3 {
        font-size: 20px;
        font-weight: 400;
        padding-top: 20px;
        text-align: center
    }

    .thankYouDiv p {
        font-size: 14px;
        font-weight: 400;
        padding-top: 20px;
        text-align: center
    }
}

.stu-top-banner-container {
    position: relative;
    width: 100%
}

.stu-top-banner-container .carousel {
    background: #000;
    opacity: 0;
    transition: opacity .4s ease-in
}

.stu-top-banner-container .carousel.loaded {
    opacity: 1
}

.stu-top-banner-container .carousel-cell {
    width: 100%;
    height: 100vh;
    margin-right: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity .4s ease-in-out
}

.stu-top-banner-container .carousel-cell .carousel-cell.is-selected {
    opacity: 1
}

.stu-top-banner-container .carousel-cell img,
.stu-top-banner-container .carousel-cell .banner-video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    object-position: center;
    max-width: 100%
}

.stu-top-banner-container .carousel-cell .banner-overlay {
    position: absolute;
    bottom: 32.5%;
    left: 5%;
    max-width: 1000px;
    color: var(--color-white);
    text-align: left;
    opacity: 0;
    transform: translateY(40px);
    animation: slideUp .8s ease forwards;
    animation-delay: .3s
}

.stu-top-banner-container .carousel-cell .bg-overlay {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #00000095, #00000083)
}

.stu-top-banner-container .carousel-cell .banner-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.2;
    text-shadow: 0 4px 10px rgba(0, 0, 0, .6);
    color: #fbc51d;
}

.stu-top-banner-container .carousel-cell .banner-subtitle {
    font-size: 2.3rem;
    margin-bottom: 20px;
    line-height: 1.5;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .5);
    font-weight: 650;
}

.stu-top-banner-container .carousel-cell .banner-button {
    display: inline-block;
    padding: 12px 28px;
    background: #fbc51d;
    color: #000;
    font-weight: 600;
    font-size: 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    transition: background .3s ease;
    letter-spacing: 1px
}

.stu-top-banner-container .carousel-cell .banner-button:hover {
    background: #e23737;
    color: var(--color-white)
}

.stu-top-banner-container .lazy-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    font-size: 18px;
    color: #333
}

.flickity-page-dot {
    background: var(--color-white)fff4d;
    width: 12px;
    height: 12px
}

.flickity-page-dot.is-selected {
    background: #e2d40e
}

.flickity-button {
    background: var(--color-white)fff26;
    border: none;
    color: var(--color-white)
}

.flickity-button:focus {
    outline: none;
    box-shadow: none
}

.flickity-button:hover {
    background: var(--color-white)fff59;
    cursor: pointer
}

.flickity-page-dots {
    bottom: 20px
}

@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(40px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media screen and (max-width: 768px) {
    .stu-top-banner-container {
        height: auto
    }

    .stu-top-banner-container .carousel {
        position: relative
    }

    .stu-top-banner-container .carousel-cell {
        height: 17rem !important
    }

    .stu-top-banner-container .carousel-cell img,
    .stu-top-banner-container .carousel-cell .banner-video {
        width: 100%;
        height: 17rem !important;
        object-fit: cover;
        object-position: top
    }

    .stu-top-banner-container .carousel-cell .banner-overlay {
        bottom: 10%;
        left: 7%;
        max-width: 85%
    }

    .stu-top-banner-container .carousel-cell .banner-title {
        font-size: 1.25rem
    }

    .stu-top-banner-container .carousel-cell .banner-subtitle {
        font-size: 1rem
    }

    .stu-top-banner-container .carousel-cell .banner-button {
        font-size: .9rem;
        padding: 7px 10px
    }

    .stu-top-banner-container .flickity-prev-next-button {
        width: 25px;
        height: 25px
    }

    .stu-top-banner-container .flickity-page-dots {
        bottom: 10px
    }

    .stu-top-banner-container .flickity-page-dot {
        width: 10px;
        height: 10px;
        margin: 0 5px
    }
}

.OCHero {
    position: relative;
    height: 519px;
    width: 100%;
    overflow: hidden
}

.OCHero .background-video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: 0
}

.OCHero .overlay {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.OCHero .overlay p {
    font-family: 'Sora-SemiBold';
    font-weight: 400;
    font-size: 56px;
    line-height: 100%;
    text-align: center;
    text-transform: uppercase;
    color: var(--color-white)
}

@media (max-width: 480px) {
    .OCHero {
        width: 100%;
        height: 257px;
        top: -5px
    }

    .OCHero .overlay p {
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: uppercase
    }
}

.OCSubHero {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 40px 120px 40px 0;
    position: relative
}

.OCSubHero .left {
    width: 70%;
    height: 596px
}

.OCSubHero .left img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.OCSubHero .right {
    border-radius: 10px;
    box-shadow: 10px 10px 25px 2px #00000059;
    position: absolute;
    width: 37.4%;
    right: 5%;
    background-color: #fbc51d;
    padding: 83px 50px;
    height: 453px
}

.OCSubHero .right p {
    font-weight: 500;
    font-size: 21px;
    line-height: 100%;
    letter-spacing: .5px;
    text-align: center
}

@media (max-width: 480px) {
    .OCSubHero {
        flex-direction: column;
        padding: 16px
    }

    .OCSubHero .left {
        width: 100%;
        height: 257px
    }

    .OCSubHero .right {
        border-radius: 5px;
        background: #fbc51d;
        box-shadow: 5px 5px 15px 2px #00000040;
        right: 0;
        top: -40px;
        height: max-content;
        margin: auto;
        width: 95%;
        position: relative;
        padding: 20px
    }

    .OCSubHero .right p {
        color: var(--GREY-COLOR, #2c2c2c);
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        letter-spacing: .64px
    }
}

.OCCategories {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 40px 120px
}

.OCCategories .heading {
    color: var(--color-red);
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.OCCategories .categories {
    gap: 59px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center
}

.OCCategories .categories .category {
    width: 30%;
    row-gap: 40px;
    gap: 59px
}

.OCCategories .categories .category .top {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 26px;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 4px 14px #00000040 inset;
    height: 280px
}

.OCCategories .categories .category .top .title {
    color: var(--color-white);
    font-size: 42px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.OCCategories .categories .category .top .desc {
    color: var(--color-white);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.OCCategories .categories .category .top-1 {
    background: var(--blue, linear-gradient(104deg, #3027a0 .86%, rgba(106, 102, 157, .5) 95.86%));
    box-shadow: 0 4px 14px #00000040 inset
}

.OCCategories .categories .category .top-2 {
    background: var(--green, linear-gradient(104deg, #378509 4.41%, rgba(114, 191, 68, .5) 100%))
}

.OCCategories .categories .category .top-3 {
    background: var(--orange, linear-gradient(103deg, #d33519 2.06%, rgba(255, 99, 71, .5) 100%))
}

.OCCategories .categories .category .top-4 {
    background: var(--skyblue, linear-gradient(102deg, #075580 3.39%, #2a98d4 98.99%))
}

.OCCategories .categories .category .top-5 {
    background: var(--red, linear-gradient(102deg, #b30225 1.21%, rgba(220, 20, 60, .5) 100%))
}

.OCCategories .categories .category .top-6 {
    background: var(--darkblue, linear-gradient(249deg, #1c325b 1.17%, #3b6ac1 59.08%))
}

.OCCategories .categories .category .bottom {
    position: relative;
    margin-top: -3%;
    height: 412px
}

.OCCategories .categories .category .bottom .cimage {
    width: 100%;
    height: 100%
}

.OCCategories .categories .category .bottom .cimage img {
    border-radius: 20px;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.OCCategories .categories .category .bottom .arrow {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: #fbc51d;
    position: absolute;
    right: -1%;
    bottom: 1%
}

.OCCategories .categories .category .bottom .arrow:hover {
    scale: 1.1;
    background-color: #fbc31dbe
}

.OCCategories .categories .category .bottom .arrow img {
    width: 45%;
    height: 45%;
    object-fit: cover
}

@media (max-width: 480px) {
    .OCCategories {
        padding: 16px;
        margin-top: -20px;
        gap: 20px
    }

    .OCCategories .heading {
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: uppercase
    }

    .OCCategories .categories {
        flex-direction: column;
        gap: 20px
    }

    .OCCategories .categories .category {
        width: 100%;
        height: 440px
    }

    .OCCategories .categories .category .top {
        height: 184.933px
    }

    .OCCategories .categories .category .top .title {
        font-size: 24px;
        font-style: normal;
        font-weight: 650;
        line-height: normal
    }

    .OCCategories .categories .category .top .desc {
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal
    }

    .OCCategories .categories .category .bottom {
        height: 279.933px;
        top: -15px
    }

    .OCCategories .categories .category .bottom .arrow {
        width: 79.918px;
        height: 79.918px;
        bottom: 1%;
        right: -3px
    }
}

.OCConfused {
    display: flex;
    padding: 3.48% 6.2%;
    width: 100%
}

.OCConfused .left {
    width: 50%;
    height: 708px
}

.OCConfused .left img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.OCConfused .right {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 40px 87px 60px;
    width: 50%;
    background: var(--darkblue, linear-gradient(249deg, #1c325b 1.17%, #3b6ac1 59.08%))
}

.OCConfused .right .top {
    color: var(--color-white);
    font-size: 42px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.OCConfused .right .mid {
    color: var(--color-white);
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.OCConfused .right .bottom {
    cursor: pointer;
    display: flex;
    height: 50px;
    width: 60%;
    padding: 12px 26px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--yellow, #fbc51d)
}

@media (max-width: 480px) {
    .OCConfused {
        flex-direction: column
    }

    .OCConfused .left {
        width: 100%;
        height: 257px
    }

    .OCConfused .right {
        padding: 10px 20px;
        width: 100%
    }

    .OCConfused .right .top {
        font-size: 18px
    }

    .OCConfused .right .mid {
        font-size: 16px
    }

    .OCConfused .right .bottom {
        width: 100%;
        font-size: 13px;
        padding: 0 2px
    }
}

.MainCourseHero {
    position: relative;
    height: 519px;
    width: 100%;
    overflow: hidden
}

.MainCourseHero .background-video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: 0
}

.MainCourseHero .overlay {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.MainCourseHero .overlay p {
    font-family: 'Sora-SemiBold';
    font-weight: 400;
    font-size: 56px;
    line-height: 100%;
    text-align: center;
    text-transform: uppercase;
    color: var(--color-white)
}

@media (max-width: 480px) {
    .MainCourseHero {
        width: 100%;
        height: 257px;
        top: -5px
    }

    .MainCourseHero .overlay p {
        width: 85%;
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: uppercase
    }
}

.MainCourseSubHero {
    width: 100%;
    position: relative;
    height: 942px;
    margin-top: 80px
}

.MainCourseSubHero .back {
    height: 942px
}

.MainCourseSubHero .back img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.MainCourseSubHero .front {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 672px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    background: linear-gradient(180deg, #d9d9d900 45%, #dc143c 75%)
}

.MainCourseSubHero .front .desc1,
.MainCourseSubHero .front .desc2 {
    padding: 20px 103px;
    color: var(--color-white);
    text-align: center;
    font-size: 24px;
    letter-spacing: 1px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

@media (max-width: 1536px) {

    .MainCourseSubHero,
    .MainCourseSubHero .back {
        height: 870px
    }

    .MainCourseSubHero .front {
        height: 620px
    }

    .MainCourseSubHero .front .desc1,
    .MainCourseSubHero .front .desc2 {
        padding: 18px 90px;
        font-size: 22px
    }
}

@media (max-width: 1440px) {

    .MainCourseSubHero,
    .MainCourseSubHero .back {
        height: 800px
    }

    .MainCourseSubHero .front {
        height: 580px
    }

    .MainCourseSubHero .front .desc1,
    .MainCourseSubHero .front .desc2 {
        padding: 16px 80px;
        font-size: 20px
    }
}

@media (max-width: 1280px) {

    .MainCourseSubHero,
    .MainCourseSubHero .back {
        height: 720px
    }

    .MainCourseSubHero .front {
        height: 520px
    }

    .MainCourseSubHero .front .desc1,
    .MainCourseSubHero .front .desc2 {
        padding: 14px 70px;
        font-size: 18px
    }
}

@media (max-width: 480px) {
    .MainCourseSubHero {
        width: 100%;
        height: max-content;
        margin-top: 20px;
        display: flex;
        flex-direction: column
    }

    .MainCourseSubHero .back {
        position: relative;
        height: auto;
        width: 100%;
        background-color: var(--color-red);
        top: 0
    }

    .MainCourseSubHero .back img {
        object-fit: contain;
        background-repeat: no-repeat
    }

    .MainCourseSubHero .front {
        position: relative;
        height: max-content;
        background-color: var(--color-red);
        top: 0
    }

    .MainCourseSubHero .front .desc1,
    .MainCourseSubHero .front .desc2 {
        padding: 19px;
        font-size: 16px;
        font-style: normal;
        font-weight: 650;
        line-height: normal
    }

    .MainCourseSubHero .front .desc2 {
        background-color: #dc143c
    }
}

.MainCourseSubs {
    padding: 3.48% 5.2% 0;
    display: flex;
    flex-direction: column;
    gap: 60px
}

.MainCourseSubs .heading {
    color: var(--color-red);
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.MainCourseSubs .coursesContainer {
    gap: 59px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    row-gap: 40px
}

.MainCourseSubs .coursesContainer .course {
    width: 31%;
    display: flex;
    flex-direction: column-reverse
}

.MainCourseSubs .coursesContainer .course .top {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 26px;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 4px 14px #00000040 inset;
    height: 214px
}

.MainCourseSubs .coursesContainer .course .top .title {
    color: var(--color-white);
    font-size: 28px;
    font-style: normal;
    font-weight: 650;
    height: 60%;
    line-height: normal
}

.MainCourseSubs .coursesContainer .course .top .button {
    cursor: pointer;
    display: flex;
    padding: 12px 26px;
    align-items: center;
    justify-content: center;
    width: 40%;
    height: 50px;
    border-radius: 10px;
    background-color: var(--color-white)
}

.MainCourseSubs .coursesContainer .course .top-1 {
    background: var(--blue, linear-gradient(104deg, #3027a0 .86%, rgba(106, 102, 157, .5) 95.86%));
    box-shadow: 0 4px 14px #00000040 inset
}

.MainCourseSubs .coursesContainer .course .top-2 {
    background: var(--green, linear-gradient(104deg, #378509 4.41%, rgba(114, 191, 68, .5) 100%))
}

.MainCourseSubs .coursesContainer .course .top-3 {
    background: var(--orange, linear-gradient(103deg, #d33519 2.06%, rgba(255, 99, 71, .5) 100%))
}

.MainCourseSubs .coursesContainer .course .top-4 {
    background: var(--skyblue, linear-gradient(102deg, #075580 3.39%, #2a98d4 98.99%))
}

.MainCourseSubs .coursesContainer .course .top-5 {
    background: var(--red, linear-gradient(102deg, #b30225 1.21%, rgba(220, 20, 60, .5) 100%))
}

.MainCourseSubs .coursesContainer .course .top-6 {
    background: var(--darkblue, linear-gradient(249deg, #1c325b 1.17%, #3b6ac1 59.08%))
}

.MainCourseSubs .coursesContainer .course .bottom {
    height: 501px
}

.MainCourseSubs .coursesContainer .course .bottom .cimage {
    width: 100%;
    height: 100%
}

.MainCourseSubs .coursesContainer .course .bottom .cimage img {
    border-radius: 20px 20px 0 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media (max-width: 1536px) {
    .MainCourseSubs {
        gap: 50px
    }

    .MainCourseSubs .heading {
        font-size: 50px
    }

    .MainCourseSubs .coursesContainer {
        gap: 50px;
        row-gap: 36px
    }

    .MainCourseSubs .coursesContainer .course .top {
        height: 190px;
        padding: 18px 22px
    }

    .MainCourseSubs .coursesContainer .course .top .title {
        font-size: 26px
    }

    .MainCourseSubs .coursesContainer .course .top .button {
        width: 38%;
        height: 46px;
        font-size: 15px;
        padding: 10px 22px
    }

    .MainCourseSubs .coursesContainer .course .bottom {
        height: 460px
    }
}

@media (max-width: 1440px) {
    .MainCourseSubs {
        gap: 45px
    }

    .MainCourseSubs .heading {
        font-size: 46px
    }

    .MainCourseSubs .coursesContainer {
        gap: 44px;
        row-gap: 34px
    }

    .MainCourseSubs .coursesContainer .course .top {
        height: 178px;
        padding: 16px 20px
    }

    .MainCourseSubs .coursesContainer .course .top .title {
        font-size: 24px
    }

    .MainCourseSubs .coursesContainer .course .top .button {
        width: 36%;
        height: 44px;
        font-size: 14px;
        padding: 10px 20px
    }

    .MainCourseSubs .coursesContainer .course .bottom {
        height: 430px
    }
}

@media (max-width: 1280px) {
    .MainCourseSubs {
        gap: 40px
    }

    .MainCourseSubs .heading {
        font-size: 40px
    }

    .MainCourseSubs .coursesContainer {
        gap: 40px;
        row-gap: 30px
    }

    .MainCourseSubs .coursesContainer .course .top {
        height: 160px;
        padding: 14px 18px
    }

    .MainCourseSubs .coursesContainer .course .top .title {
        font-size: 22px
    }

    .MainCourseSubs .coursesContainer .course .top .button {
        width: 34%;
        height: 40px;
        font-size: 13px;
        padding: 8px 18px
    }

    .MainCourseSubs .coursesContainer .course .bottom {
        height: 390px
    }
}

@media (max-width: 480px) {
    .MainCourseSubs {
        gap: 10px
    }

    .MainCourseSubs .heading {
        font-size: 24px;
        font-style: normal;
        font-weight: 400
    }

    .MainCourseSubs .coursesContainer {
        gap: 20px;
        flex-direction: column;
        flex-wrap: nowrap
    }

    .MainCourseSubs .coursesContainer .course {
        width: 100%
    }

    .MainCourseSubs .coursesContainer .course .bottom {
        height: 331.485px
    }

    .MainCourseSubs .coursesContainer .course .bottom .cimage {
        height: 100%;
        z-index: 1
    }

    .MainCourseSubs .coursesContainer .course .top {
        height: 139.359px;
        position: relative;
        top: -5px;
        padding: 12px 26px
    }

    .MainCourseSubs .coursesContainer .course .top .title {
        font-size: 22px;
        font-style: normal;
        font-weight: 650
    }

    .MainCourseSubs .coursesContainer .course .top .button {
        width: 124px;
        height: 36px;
        padding: 12px 24px;
        font-size: 16px;
        font-weight: 650
    }
}

.MainCourseBenefits {
    display: flex;
    padding: 3.48% 6.2%;
    width: 100%;
    height: 833px
}

.MainCourseBenefits .left {
    width: 50%;
    height: 833px
}

.MainCourseBenefits .left img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.MainCourseBenefits .right {
    gap: auto;
    display: flex;
    height: 833px;
    flex-direction: column;
    gap: 20px;
    width: 50%;
    background: #fbc51d40
}

.MainCourseBenefits .right .top {
    padding: 30px 40px 0;
    color: var(--color-red);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.MainCourseBenefits .right .list {
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    padding: 0 0 0 80px
}

.MainCourseBenefits .right .list ul {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.MainCourseBenefits .right .button {
    cursor: pointer;
    display: flex;
    width: 181px;
    height: 50px;
    justify-content: center;
    align-items: center;
    margin-left: 60px;
    border-radius: 10px;
    background: var(--color-red);
    color: var(--color-white);
    font-size: 18px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

@media (max-width: 1536px) {

    .MainCourseBenefits,
    .MainCourseBenefits .left,
    .MainCourseBenefits .right {
        height: 740px
    }

    .MainCourseBenefits .right {
        gap: 18px
    }

    .MainCourseBenefits .right .top {
        font-size: 50px;
        padding: 26px 36px 0
    }

    .MainCourseBenefits .right .list {
        font-size: 22px;
        padding-left: 70px
    }

    .MainCourseBenefits .right .list ul {
        gap: 18px
    }

    .MainCourseBenefits .right .button {
        width: 170px;
        height: 46px;
        font-size: 17px;
        margin-left: 50px
    }
}

@media (max-width: 1440px) {

    .MainCourseBenefits,
    .MainCourseBenefits .left,
    .MainCourseBenefits .right {
        height: 680px
    }

    .MainCourseBenefits .right {
        gap: 16px
    }

    .MainCourseBenefits .right .top {
        font-size: 46px;
        padding: 24px 32px 0
    }

    .MainCourseBenefits .right .list {
        font-size: 20px;
        padding-left: 60px
    }

    .MainCourseBenefits .right .list ul {
        gap: 16px
    }

    .MainCourseBenefits .right .button {
        width: 160px;
        height: 44px;
        font-size: 16px;
        margin-left: 40px
    }
}

@media (max-width: 1280px) {

    .MainCourseBenefits,
    .MainCourseBenefits .left,
    .MainCourseBenefits .right {
        height: 620px
    }

    .MainCourseBenefits .right {
        gap: 14px
    }

    .MainCourseBenefits .right .top {
        font-size: 40px;
        padding: 22px 28px 0
    }

    .MainCourseBenefits .right .list {
        font-size: 18px;
        padding-left: 50px
    }

    .MainCourseBenefits .right .list ul {
        gap: 14px
    }

    .MainCourseBenefits .right .button {
        width: 150px;
        height: 42px;
        font-size: 15px;
        margin-left: 30px
    }
}

@media (max-width: 480px) {
    .MainCourseBenefits {
        height: max-content;
        flex-direction: column
    }

    .MainCourseBenefits .left {
        width: 100%
    }

    .MainCourseBenefits .right {
        height: max-content;
        padding: 10px;
        gap: 10px;
        width: 100%
    }

    .MainCourseBenefits .right .top {
        padding: 0;
        font-size: 24px;
        font-weight: 400
    }

    .MainCourseBenefits .right .list {
        font-size: 16px;
        font-weight: 650;
        padding-left: 26px
    }

    .MainCourseBenefits .right .list ul {
        gap: 10px
    }

    .MainCourseBenefits .right .button {
        margin: auto;
        width: 45%;
        font-size: 16px;
        height: auto;
        padding: 8px 10px
    }
}

.MainCourseCareers {
    margin-top: 180px;
    padding: 3.48% 0;
    height: 100vh;
    background: linear-gradient(0deg, #000000b3, #000000b3), url(/assets/career-Bg_0rZd0.jpeg) #d3d3d3 50%/cover no-repeat;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    height: 833px;
    flex-direction: column
}

.MainCourseCareers .top {
    color: var(--yellow, #fbc51d);
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.MainCourseCareers .wrapper {
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 45px
}

.MainCourseCareers .wrapper .arrow {
    cursor: pointer;
    width: 50px;
    height: 50px
}

.MainCourseCareers .wrapper .arrow:hover {
    transform: scale(1.1)
}

.MainCourseCareers .wrapper .images {
    display: flex;
    align-items: center;
    text-align: center;
    flex: 1;
    max-width: 82%;
    gap: 20px
}

.MainCourseCareers .wrapper .images .image {
    gap: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--color-white)
}

.MainCourseCareers .wrapper .images .image img {
    border-radius: 12px;
    object-fit: cover
}

.MainCourseCareers .wrapper .images .image .text {
    color: var(--color-white);
    font-size: 32px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.MainCourseCareers .wrapper .images .image.small {
    width: 497.925px
}

.MainCourseCareers .wrapper .images .image.small img {
    width: 100%;
    height: 290px
}

.MainCourseCareers .wrapper .images .image.small .text {
    font-size: 14px
}

.MainCourseCareers .wrapper .images .image.big {
    width: 775px
}

.MainCourseCareers .wrapper .images .image.big img {
    width: 100%;
    height: 452px
}

.MainCourseCareers .wrapper .images .image.big .text {
    font-size: 18px
}

.MainCourseCareers .button {
    cursor: pointer;
    width: max-content;
    margin: 40px auto;
    color: var(--color-white);
    font-size: 18px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    border-radius: 10px;
    background: var(--red, #dc143c);
    padding: 20px;
    display: flex;
    justify-content: space-between
}

@media (max-width: 1536px) {
    .MainCourseCareers {
        height: 750px
    }

    .MainCourseCareers .top {
        font-size: 48px
    }

    .MainCourseCareers .wrapper {
        gap: 36px
    }

    .MainCourseCareers .wrapper .arrow {
        width: 42px;
        height: 42px
    }

    .MainCourseCareers .wrapper .images,
    .MainCourseCareers .wrapper .images .image {
        gap: 16px
    }

    .MainCourseCareers .wrapper .images .image.small {
        width: 440px
    }

    .MainCourseCareers .wrapper .images .image.small img {
        height: 250px
    }

    .MainCourseCareers .wrapper .images .image.small .text {
        font-size: 12px
    }

    .MainCourseCareers .wrapper .images .image.big {
        width: 680px
    }

    .MainCourseCareers .wrapper .images .image.big img {
        height: 390px
    }

    .MainCourseCareers .wrapper .images .image.big .text {
        font-size: 16px
    }

    .MainCourseCareers .button {
        font-size: 16px;
        padding: 16px 20px
    }
}

@media (max-width: 1440px) {
    .MainCourseCareers {
        height: 700px
    }

    .MainCourseCareers .top {
        font-size: 42px
    }

    .MainCourseCareers .wrapper {
        gap: 30px
    }

    .MainCourseCareers .wrapper .arrow {
        width: 38px;
        height: 38px
    }

    .MainCourseCareers .wrapper .images,
    .MainCourseCareers .wrapper .images .image {
        gap: 14px
    }

    .MainCourseCareers .wrapper .images .image.small {
        width: 400px
    }

    .MainCourseCareers .wrapper .images .image.small img {
        height: 230px
    }

    .MainCourseCareers .wrapper .images .image.small .text {
        font-size: 11px
    }

    .MainCourseCareers .wrapper .images .image.big {
        width: 620px
    }

    .MainCourseCareers .wrapper .images .image.big img {
        height: 350px
    }

    .MainCourseCareers .wrapper .images .image.big .text {
        font-size: 15px
    }

    .MainCourseCareers .button {
        font-size: 15px;
        padding: 14px 18px
    }
}

@media (max-width: 1280px) {
    .MainCourseCareers {
        height: 640px
    }

    .MainCourseCareers .top {
        font-size: 36px
    }

    .MainCourseCareers .wrapper {
        gap: 24px
    }

    .MainCourseCareers .wrapper .arrow {
        width: 34px;
        height: 34px
    }

    .MainCourseCareers .wrapper .images,
    .MainCourseCareers .wrapper .images .image {
        gap: 12px
    }

    .MainCourseCareers .wrapper .images .image.small {
        width: 360px
    }

    .MainCourseCareers .wrapper .images .image.small img {
        height: 200px
    }

    .MainCourseCareers .wrapper .images .image.small .text {
        font-size: 10px
    }

    .MainCourseCareers .wrapper .images .image.big {
        width: 540px
    }

    .MainCourseCareers .wrapper .images .image.big img {
        height: 300px
    }

    .MainCourseCareers .wrapper .images .image.big .text {
        font-size: 14px
    }

    .MainCourseCareers .button {
        font-size: 14px;
        padding: 12px 16px
    }
}

@media (max-width: 480px) {
    .MainCourseCareers {
        margin-top: 40px;
        height: max-content;
        width: 100%;
        padding-top: 38px
    }

    .MainCourseCareers .top {
        text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
        font-size: 24px;
        font-weight: 400
    }

    .MainCourseCareers .wrapper {
        padding: 0 8px;
        gap: 10px;
        height: 289px
    }

    .MainCourseCareers .wrapper .images {
        overflow: hidden
    }

    .MainCourseCareers .wrapper .images .image {
        flex: 0 0 100%;
        gap: 10px
    }

    .MainCourseCareers .wrapper .images .text {
        font-size: 16px;
        font-weight: 650
    }

    .MainCourseCareers .wrapper .arrow {
        width: 22px;
        height: 22px
    }

    .MainCourseCareers .button {
        width: 68%;
        font-size: 16px;
        padding: 12px 14px
    }
}

.madeHero {
    background: linear-gradient(0deg, #000000a6, #000000a6), url(/assets/hero-De1FDq7R.gif) #d3d3d3 -.37vw -16.4vh/101.508% 202.425% no-repeat;
    height: 58.23vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.madeHero .navlinks {
    display: flex;
    cursor: pointer
}

.madeHero .navlinks ul {
    position: absolute;
    top: 6vh;
    left: 7%;
    display: flex;
    justify-content: space-between;
    list-style: none;
    gap: 10px
}

.madeHero .navlinks ul li {
    color: var(--color-white)
}

.madeHero .navlinks ul li a {
    font-size: 16px;
    color: var(--color-white);
    text-decoration: none
}

.madeHero .navlinks ul .nav {
    padding: 1px 2px
}

.madeHero .navlinks ul .nav img {
    width: 24px;
    height: 24px
}

.madeHero h1 {
    color: var(--color-white);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.92vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

@media (max-width: 480px) {
    .madeHero {
        height: 35vh
    }

    .madeHero .navlinks ul {
        top: 2vh;
        left: 5%;
        gap: 5px
    }

    .madeHero .navlinks ul li,
    .madeHero .navlinks ul li a {
        font-size: 12px
    }

    .madeHero .navlinks ul .nav {
        padding: 0 1px;
        scale: .6
    }

    .madeHero h1 {
        font-size: 24px
    }
}

.madeSubHero {
    border-radius: 2.08vw 2.08vw 0px 0px;
    background: url(/assets/subHero-hkNsWwg1.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: .21vw .21vw .52vw #0f0f0f33 inset;
    height: 32.28vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    margin-top: -4%;
    width: 100%;
    z-index: 1
}

.madeSubHero h1 {
    color: var(--color-red);
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.9vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.madeSubHero p {
    color: var(--GREY-COLOR, #2c2c2c);
    text-align: center;
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    width: 45%
}

@media (max-width: 480px) {
    .madeSubHero {
        border-radius: 20px 20px 0 0;
        background-position: center;
        background-size: cover;
        height: 250px;
        margin-top: -10%;
        padding: 20px 16px;
        position: relative
    }

    .madeSubHero h1 {
        font-size: 24px
    }

    .madeSubHero p {
        font-size: 16px;
        font-weight: 600;
        width: 100%;
        margin-top: 8px
    }
}

.madeCGI {
    margin-top: 14%;
    text-align: center;
    position: relative
}

.madeCGI h1 {
    color: var(--color-red);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 80px;
    font-weight: 400
}

.madeCGI h1 span {
    color: var(--color-red);
    font-size: 72px;
    font-weight: 400
}

.madeCGI .video-slider {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto
}

.madeCGI .video-container {
    transition: transform .5s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40px;
    overflow: hidden
}

.madeCGI .unmute-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 30px;
    color: var(--color-white);
    cursor: pointer;
    z-index: 20;
    transition: opacity .3s ease
}

.madeCGI .unmute-btn:hover {
    opacity: .7
}

.madeCGI .video {
    transition: all .4s ease-in-out;
    border-radius: 40px;
    overflow: hidden;
    opacity: .6;
    transform: scale(.7)
}

.madeCGI .video.center {
    opacity: 1;
    transform: scale(.9)
}

.madeCGI .fade {
    transition: opacity .4s ease-in-out, transform .4s ease-in-out
}

.madeCGI video {
    width: 491px;
    height: 693px;
    border-radius: 40px;
    object-fit: cover
}

.madeCGI .nav-btn {
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px
}

.madeCGI .nav-btn img {
    width: 30px;
    height: 30px
}

.madeCGI .nav-btn.left {
    left: 20px
}

.madeCGI .nav-btn.right {
    right: 20px
}

.madeCGI .dots {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px
}

.madeCGI .dot {
    width: 10px;
    height: 10px;
    margin: 5px;
    background-color: #d3d3d3;
    border-radius: 50%;
    display: inline-block;
    transition: background-color .3s ease-in-out
}

.madeCGI .dot.active {
    background-color: #dc143c
}

@media (max-width: 1536px) {
    .madeCGI {
        margin-top: 18%
    }

    .madeCGI h1 {
        font-size: 70px
    }

    .madeCGI h1 span {
        font-size: 62px
    }

    .madeCGI video {
        width: 440px;
        height: 620px
    }

    .madeCGI .unmute-btn {
        font-size: 26px
    }
}

@media (max-width: 1440px) {
    .madeCGI h1 {
        font-size: 64px
    }

    .madeCGI h1 span {
        font-size: 56px
    }

    .madeCGI video {
        width: 400px;
        height: 580px
    }

    .madeCGI .unmute-btn {
        font-size: 24px
    }
}

@media (max-width: 1280px) {
    .madeCGI h1 {
        font-size: 58px
    }

    .madeCGI h1 span {
        font-size: 50px
    }

    .madeCGI video {
        width: 360px;
        height: 520px
    }

    .madeCGI .unmute-btn {
        font-size: 22px
    }
}

@media (max-width: 480px) {
    .madeCGI {
        padding: 0 16px;
        margin-bottom: 10%
    }

    .madeCGI h1 {
        font-size: 34px;
        text-align: center
    }

    .madeCGI h1 span {
        display: block;
        font-size: 34px
    }

    .madeCGI .video-slider {
        flex-direction: column;
        align-items: center;
        gap: 16px
    }

    .madeCGI .video-slider .nav-btn {
        width: 32px;
        height: 32px
    }

    .madeCGI .video-slider .nav-btn img {
        width: 100%;
        height: auto
    }

    .madeCGI .video-slider .video-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 80%
    }

    .madeCGI .video-slider .video-container .unmute-btn {
        font-size: 24px;
        bottom: 8px;
        right: 8px
    }

    .madeCGI .video-slider .video-container .video {
        width: 95%
    }

    .madeCGI .video-slider .video-container .video video {
        width: 100%;
        height: auto;
        border-radius: 12px
    }

    .madeCGI .video-slider .video-container .left,
    .madeCGI .video-slider .video-container .right {
        display: none
    }

    .madeCGI .video-slider .video-container .center {
        display: block
    }

    .madeCGI .dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin: 0
    }

    .madeCGI .dots .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #ccc;
        margin: 0
    }

    .madeCGI .dots .dot.active {
        background-color: #dc143c
    }
}

.madeEnv {
    background: url(/assets/env-nDnsMk74.png);
    box-shadow: -4px -4px 10px #0f0f0f33 inset, 4px 4px 10px #0f0f0f33 inset;
    height: 936px;
    display: flex
}

.madeEnv .eleft {
    width: 50%;
    padding-left: 120px;
    padding-top: 80px
}

.madeEnv .eleft h1 {
    color: var(--color-white);
    font-family: 'Sora-SemiBold';
    font-size: 80px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.madeEnv .eleft h1 .three {
    color: var(--color-white);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-size: 76px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.madeEnv .eleft h1 .designs {
    color: var(--color-white);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: block
}

.madeEnv .eright {
    display: flex;
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: relative
}

.madeEnv .eright .scroll-column {
    overflow: hidden;
    overflow-y: scroll;
    scroll-behavior: auto;
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    row-gap: 20px
}

.madeEnv .eright .scroll-column::-webkit-scrollbar {
    display: none
}

.madeEnv .eright .image-wrapper {
    display: flex;
    justify-content: center
}

.madeEnv .eright .image-wrapper img {
    width: 420px;
    height: 382px;
    border-radius: 40px;
    object-fit: cover
}

@media (max-width: 1536px) {
    .madeEnv {
        height: 850px
    }

    .madeEnv .eleft {
        padding-left: 100px;
        padding-top: 70px
    }

    .madeEnv .eleft h1 {
        font-size: 72px
    }

    .madeEnv .eleft h1 .three {
        font-size: 68px
    }

    .madeEnv .eleft h1 .designs {
        font-size: 50px
    }

    .madeEnv .eright .image-wrapper img {
        width: 380px;
        height: 340px
    }
}

@media (max-width: 1440px) {
    .madeEnv {
        height: 780px
    }

    .madeEnv .eleft {
        padding-left: 80px;
        padding-top: 60px
    }

    .madeEnv .eleft h1 {
        font-size: 64px
    }

    .madeEnv .eleft h1 .three {
        font-size: 60px
    }

    .madeEnv .eleft h1 .designs {
        font-size: 44px
    }

    .madeEnv .eright .image-wrapper img {
        width: 340px;
        height: 300px
    }
}

@media (max-width: 1280px) {
    .madeEnv {
        height: 700px
    }

    .madeEnv .eleft {
        padding-left: 60px;
        padding-top: 50px
    }

    .madeEnv .eleft h1 {
        font-size: 56px
    }

    .madeEnv .eleft h1 .three {
        font-size: 52px
    }

    .madeEnv .eleft h1 .designs {
        font-size: 38px
    }

    .madeEnv .eright .image-wrapper img {
        width: 300px;
        height: 260px
    }
}

@media (max-width: 480px) {
    .madeEnv {
        flex-direction: column;
        height: auto;
        background-size: cover;
        padding: 20px
    }

    .madeEnv .eleft {
        width: 100%;
        padding: 20px
    }

    .madeEnv .eleft h1,
    .madeEnv .eleft h1 .three {
        font-size: 34px
    }

    .madeEnv .eleft h1 .designs {
        font-size: 32px
    }

    .madeEnv .eright {
        width: 100%;
        flex-direction: row
    }

    .madeEnv .eright .scroll-column {
        width: 100%;
        height: 400px;
        row-gap: 16px;
        padding: 0 10px
    }

    .madeEnv .eright .image-wrapper img {
        width: 100%;
        height: auto;
        max-height: 300px;
        border-radius: 20px
    }
}

.madePoster {
    text-align: left;
    padding: 4rem 6rem
}

.madePoster .title {
    color: var(--color-red);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 1rem;
    position: relative
}

.madePoster .posterContainer {
    margin-top: 5vh;
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap
}

.madePoster .posterItem {
    position: relative;
    overflow: hidden;
    transition: transform .3s ease, border .3s ease;
    border: 3px solid transparent;
    cursor: pointer
}

.madePoster .posterItem img {
    display: block;
    width: 357px;
    height: 468px;
    transition: transform .3s ease, border .3s ease;
    border: 2px solid #FBC51D
}

.madePoster .posterItem .arrow {
    position: absolute;
    top: -70px;
    left: 50%;
    transform: translate(-50%) rotate(180deg);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 20px solid #d71a1a;
    opacity: 0;
    transition: opacity .3s ease, top .3s ease;
    z-index: 1
}

.madePoster .posterItem:hover {
    transform: scale(1.1);
    border: 3px solid #d71a1a
}

.madePoster .posterItem:hover img {
    border-color: transparent
}

.madePoster .posterItem:hover .arrow {
    opacity: 1;
    top: -75px
}

@media (max-width: 1536px) {
    .madePoster {
        padding: 3.5rem 5rem
    }

    .madePoster .title {
        font-size: 50px
    }

    .madePoster .posterItem img {
        width: 320px;
        height: 420px
    }

    .madePoster .posterItem .arrow {
        border-left: 13px solid transparent;
        border-right: 13px solid transparent;
        border-top: 18px solid #d71a1a
    }
}

@media (max-width: 1440px) {
    .madePoster {
        padding: 3rem 4rem
    }

    .madePoster .title {
        font-size: 44px
    }

    .madePoster .posterItem img {
        width: 290px;
        height: 390px
    }

    .madePoster .posterItem .arrow {
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-top: 16px solid #d71a1a
    }
}

@media (max-width: 1280px) {
    .madePoster {
        padding: 2.5rem 3rem
    }

    .madePoster .title {
        font-size: 38px
    }

    .madePoster .posterItem img {
        width: 260px;
        height: 360px
    }

    .madePoster .posterItem .arrow {
        border-left: 11px solid transparent;
        border-right: 11px solid transparent;
        border-top: 14px solid #d71a1a
    }
}

@media (max-width: 480px) {
    .madePoster {
        padding: 2rem 1rem
    }

    .madePoster .title {
        font-size: 32px;
        text-align: center
    }

    .madePoster .posterContainer {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 16px;
        justify-content: flex-start;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch
    }

    .madePoster .posterItem {
        flex: 0 0 auto;
        width: 260px;
        scroll-snap-align: start
    }

    .madePoster .posterItem img {
        width: 100%;
        height: auto;
        border: 2px solid #FBC51D;
        transition: none
    }

    .madePoster .posterItem .arrow {
        display: none
    }

    .madePoster .posterItem:hover {
        transform: none;
        border: none
    }

    .madePoster .posterItem:hover img {
        border-color: #fbc51d
    }

    .madePoster .posterItem:hover .arrow {
        opacity: 0;
        top: -70px
    }
}

.MadeCharacter {
    width: 100%;
    height: 629px;
    background-image: url(/assets/characterbg-LW6T6Luj.png);
    background-size: cover;
    background-position: center;
    box-shadow: -4px -4px 10px #0f0f0f33 inset, 4px 4px 10px #0f0f0f33 inset;
    display: flex;
    justify-content: space-between;
    padding: 10px 5.2%
}

.MadeCharacter .left {
    width: 30%;
    margin: auto;
    color: var(--color-red);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-weight: 400;
    text-transform: uppercase;
    text-shadow: 0 4px 4px rgba(0, 0, 0, .3)
}

.MadeCharacter .left span {
    font-size: 52px;
    font-weight: 600;
    color: var(--color-red);
    text-shadow: 0 4px 4px rgba(0, 0, 0, .3)
}

.MadeCharacter .right {
    width: 55%;
    display: flex;
    flex-direction: column;
    align-items: center
}

.MadeCharacter .right .right-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%
}

.MadeCharacter .right .right-top .arrow {
    width: 50px;
    height: 50px;
    cursor: pointer;
    transition: transform .2s ease
}

.MadeCharacter .right .right-top .arrow:hover {
    transform: scale(1.1)
}

.MadeCharacter .right .right-bottom {
    width: 100%;
    height: 482px;
    margin-top: 20px
}

.MadeCharacter .right .right-bottom .vc {
    position: relative;
    width: 100%;
    height: 100%
}

.MadeCharacter .right .right-bottom .vc .videoplayer {
    width: 100%;
    height: 100%;
    position: relative
}

.MadeCharacter .right .right-bottom .vc .videoplayer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 40px
}

.MadeCharacter .right .right-bottom .vc .videoplayer iframe {
    width: 100%;
    height: 100%;
    border-radius: 40px
}

.MadeCharacter .right .right-bottom .vc .videoplayer .playbutton {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    cursor: pointer;
    z-index: 2
}

.MadeCharacter .right .right-bottom .vc .videoplayer .playbutton img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

@media (max-width: 1536px) {
    .MadeCharacter {
        height: 580px;
        padding: 10px 4.5%
    }

    .MadeCharacter .left {
        font-size: 50px
    }

    .MadeCharacter .left span {
        font-size: 46px
    }

    .MadeCharacter .right .right-top .arrow {
        width: 44px;
        height: 44px
    }

    .MadeCharacter .right .right-bottom {
        height: 440px
    }

    .MadeCharacter .right .right-bottom .videoplayer .playbutton {
        width: 54px;
        height: 54px
    }
}

@media (max-width: 1440px) {
    .MadeCharacter {
        height: 540px;
        padding: 10px 4%
    }

    .MadeCharacter .left {
        font-size: 44px
    }

    .MadeCharacter .left span {
        font-size: 40px
    }

    .MadeCharacter .right .right-top .arrow {
        width: 40px;
        height: 40px
    }

    .MadeCharacter .right .right-bottom {
        height: 400px
    }

    .MadeCharacter .right .right-bottom .videoplayer .playbutton {
        width: 48px;
        height: 48px
    }
}

@media (max-width: 1280px) {
    .MadeCharacter {
        height: 500px;
        padding: 10px 3.5%
    }

    .MadeCharacter .left {
        font-size: 38px
    }

    .MadeCharacter .left span {
        font-size: 34px
    }

    .MadeCharacter .right .right-top .arrow {
        width: 36px;
        height: 36px
    }

    .MadeCharacter .right .right-bottom {
        height: 360px
    }

    .MadeCharacter .right .right-bottom .videoplayer .playbutton {
        width: 42px;
        height: 42px
    }
}

@media (max-width: 480px) {
    .MadeCharacter {
        flex-direction: column;
        height: auto;
        padding: 20px
    }

    .MadeCharacter .left {
        width: 100%;
        font-size: 32px;
        text-align: center;
        margin-bottom: 20px
    }

    .MadeCharacter .left span {
        font-size: 30px
    }

    .MadeCharacter .right {
        width: 100%
    }

    .MadeCharacter .right .right-top {
        justify-content: center;
        gap: 20px;
        margin-bottom: 10px
    }

    .MadeCharacter .right .right-top .arrow {
        width: 36px;
        height: 26px
    }

    .MadeCharacter .right .right-bottom,
    .MadeCharacter .right .right-bottom .vc,
    .MadeCharacter .right .right-bottom .vc .videoplayer {
        height: auto
    }

    .MadeCharacter .right .right-bottom .vc .videoplayer img,
    .MadeCharacter .right .right-bottom .vc .videoplayer iframe {
        border-radius: 20px;
        height: auto;
        max-height: 240px
    }

    .MadeCharacter .right .right-bottom .vc .videoplayer .playbutton {
        width: 50px;
        height: 50px
    }
}

.MadeShort {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 40px;
    gap: 20px;
    background: var(--color-red);
    box-shadow: -4px -4px 10px #0f0f0f33 inset, 4px 4px 10px #0f0f0f33 inset;
    height: 935px
}

.MadeShort .top {
    width: 88%;
    color: #fbc51d;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    margin: auto;
    display: flex;
    justify-content: flex-start;
    align-items: start
}

.MadeShort .navigate {
    width: 94%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 10px;
    position: absolute;
    bottom: 40%
}

.MadeShort .navigate .slider-icon {
    cursor: pointer !important;
    background-color: #fbc51d !important;
    color: #2c2c2c !important;
    border-radius: 50% !important;
    font-size: 14px !important;
    font-weight: 100 !important;
    padding: 6px 12px !important
}

.MadeShort .bottom {
    width: 88%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    height: 674px;
    margin: auto
}

.MadeShort .bottom .left {
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 49%;
    gap: 20px
}

.MadeShort .bottom .left .leftup,
.MadeShort .bottom .left .leftdown {
    width: 100%;
    height: 49%
}

.MadeShort .bottom .left .leftup .vc,
.MadeShort .bottom .left .leftdown .vc {
    width: 100%;
    height: 100%
}

.MadeShort .bottom .left .leftup .vc .videoplayer,
.MadeShort .bottom .left .leftdown .vc .videoplayer {
    position: relative;
    width: 100%;
    height: 100%
}

.MadeShort .bottom .left .leftup .vc .videoplayer img,
.MadeShort .bottom .left .leftdown .vc .videoplayer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.MadeShort .bottom .left .leftup .vc .videoplayer iframe,
.MadeShort .bottom .left .leftdown .vc .videoplayer iframe {
    width: 100%;
    height: 100%;
    border: none
}

.MadeShort .bottom .left .leftup .vc .videoplayer .playbutton,
.MadeShort .bottom .left .leftdown .vc .videoplayer .playbutton {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 2
}

.MadeShort .bottom .left .leftup .vc .videoplayer .playbutton img,
.MadeShort .bottom .left .leftdown .vc .videoplayer .playbutton img {
    width: 60px;
    height: 60px;
    transition: transform .2s ease
}

.MadeShort .bottom .left .leftup .vc .videoplayer .playbutton:hover img,
.MadeShort .bottom .left .leftdown .vc .videoplayer .playbutton:hover img {
    transform: scale(1.1)
}

.MadeShort .bottom .right {
    width: 49%;
    height: 100%
}

.MadeShort .bottom .right .vc {
    width: 100%;
    height: 100%
}

.MadeShort .bottom .right .vc .videoplayer {
    position: relative;
    width: 100%;
    height: 100%
}

.MadeShort .bottom .right .vc .videoplayer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.MadeShort .bottom .right .vc .videoplayer iframe {
    width: 100%;
    height: 100%;
    border: none
}

.MadeShort .bottom .right .vc .videoplayer .playbutton {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 2
}

.MadeShort .bottom .right .vc .videoplayer .playbutton img {
    width: 60px;
    height: 60px;
    transition: transform .2s ease
}

.MadeShort .bottom .right .vc .videoplayer .playbutton:hover img {
    transform: scale(1.1)
}

.MadeShort .bottom .arrow {
    width: 100%;
    height: 100%;
    object-fit: contain
}

@media (max-width: 1536px) {
    .MadeShort {
        padding: 36px;
        height: 880px
    }

    .MadeShort .top {
        font-size: 50px
    }

    .MadeShort .navigate {
        bottom: 42%
    }

    .MadeShort .navigate .slider-icon {
        font-size: 13px !important;
        padding: 5px 11px !important
    }

    .MadeShort .bottom {
        height: 640px;
        gap: 30px
    }

    .MadeShort .bottom .left,
    .MadeShort .bottom .right {
        width: 48%
    }

    .MadeShort .bottom .playbutton img {
        width: 54px;
        height: 54px
    }
}

@media (max-width: 1440px) {
    .MadeShort {
        padding: 32px;
        height: 820px
    }

    .MadeShort .top {
        font-size: 44px
    }

    .MadeShort .navigate {
        bottom: 43%
    }

    .MadeShort .navigate .slider-icon {
        font-size: 12px !important;
        padding: 5px 10px !important
    }

    .MadeShort .bottom {
        height: 600px;
        gap: 25px
    }

    .MadeShort .bottom .left,
    .MadeShort .bottom .right {
        width: 47%
    }

    .MadeShort .bottom .playbutton img {
        width: 50px;
        height: 50px
    }
}

@media (max-width: 1280px) {
    .MadeShort {
        padding: 28px;
        height: 760px
    }

    .MadeShort .top {
        font-size: 38px
    }

    .MadeShort .navigate {
        bottom: 44%
    }

    .MadeShort .navigate .slider-icon {
        font-size: 11px !important;
        padding: 4px 9px !important
    }

    .MadeShort .bottom {
        height: 560px;
        gap: 20px
    }

    .MadeShort .bottom .left,
    .MadeShort .bottom .right {
        width: 46%
    }

    .MadeShort .bottom .playbutton img {
        width: 46px;
        height: 46px
    }
}

@media (max-width: 480px) {
    .MadeShort {
        padding: 20px 16px;
        height: auto
    }

    .MadeShort .top {
        font-size: 32px;
        width: 100%;
        justify-content: center;
        text-align: center
    }

    .MadeShort .bottom {
        flex-direction: column;
        height: auto;
        gap: 20px;
        width: 75%
    }

    .MadeShort .bottom .left,
    .MadeShort .bottom .right {
        width: 100%;
        height: auto
    }

    .MadeShort .bottom .left {
        flex-direction: column;
        gap: 16px
    }

    .MadeShort .bottom .left .leftup,
    .MadeShort .bottom .left .leftdown,
    .MadeShort .bottom .left .leftup .vc .videoplayer img,
    .MadeShort .bottom .left .leftup .vc .videoplayer iframe,
    .MadeShort .bottom .left .leftdown .vc .videoplayer img,
    .MadeShort .bottom .left .leftdown .vc .videoplayer iframe,
    .MadeShort .bottom .right .vc .videoplayer img,
    .MadeShort .bottom .right .vc .videoplayer iframe {
        width: 100%;
        height: auto
    }
}

.onlineHero {
    width: 100%;
    height: 61.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: linear-gradient(0deg, #000000a6, #000000a6), url(/assets/bg-image-CdVZhR2H.jpeg) #d3d3d3 -.68vw -17.29vh/101.508% 168.791% no-repeat no-repeat
}

.onlineHero .navlinks {
    display: flex;
    cursor: pointer
}

.onlineHero .navlinks ul {
    position: absolute;
    top: 16vh;
    left: 7%;
    display: flex;
    justify-content: space-between;
    list-style: none;
    gap: 10px
}

.onlineHero .navlinks ul li {
    color: var(--color-white)
}

.onlineHero .navlinks ul li a {
    font-size: 16px;
    color: var(--color-white);
    text-decoration: none
}

.onlineHero .navlinks ul .nav {
    padding: 1px 2px
}

.onlineHero .navlinks ul .nav img {
    width: 24px;
    height: 24px
}

.onlineHero h1 {
    color: var(--color-white);
    text-align: center;
    text-shadow: 0px .21vw .21vw rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.92vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.onlineHero p {
    width: 75%;
    color: var(--color-white);
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 550;
    padding-top: 2vh;
    line-height: normal
}

@media (max-width: 1536px) {
    .onlineHero {
        height: 58vh
    }

    .onlineHero .navlinks ul {
        top: 17vh;
        left: 6%;
        gap: 8px
    }

    .onlineHero .navlinks ul li a {
        font-size: 15px
    }

    .onlineHero .navlinks ul .nav {
        padding: 2px
    }

    .onlineHero .navlinks ul .nav img {
        width: 20px;
        height: 20px
    }

    .onlineHero h1 {
        font-size: 2.7vw
    }

    .onlineHero p {
        font-size: 28px;
        padding-top: 1.8vh
    }
}

@media (max-width: 1440px) {
    .onlineHero {
        height: 54vh
    }

    .onlineHero .navlinks ul {
        top: 18vh;
        left: 5.5%;
        gap: 6px
    }

    .onlineHero .navlinks ul li a {
        font-size: 14px
    }

    .onlineHero .navlinks ul .nav {
        padding: 1.5px
    }

    .onlineHero .navlinks ul .nav img {
        width: 18px;
        height: 18px
    }

    .onlineHero h1 {
        font-size: 2.5vw
    }

    .onlineHero p {
        font-size: 26px;
        padding-top: 1.6vh
    }
}

@media (max-width: 1280px) {
    .onlineHero {
        height: 50vh
    }

    .onlineHero .navlinks ul {
        top: 19vh;
        padding: 2%;
        left: 5%;
        gap: 5px
    }

    .onlineHero .navlinks ul li a {
        font-size: 13px
    }

    .onlineHero .navlinks ul .nav {
        padding: 1px
    }

    .onlineHero .navlinks ul .nav img {
        width: 16px;
        height: 16px
    }

    .onlineHero h1 {
        font-size: 2.3vw
    }

    .onlineHero p {
        font-size: 24px;
        padding-top: 1.4vh
    }
}

@media (max-width: 480px) {
    .onlineHero {
        height: 340px;
        padding: 1%
    }

    .onlineHero .navlinks ul {
        margin-left: -4%;
        top: 80px;
        gap: 5px
    }

    .onlineHero .navlinks ul li,
    .onlineHero .navlinks ul li a {
        font-size: 12px
    }

    .onlineHero .navlinks ul .nav {
        padding: 0;
        scale: .6
    }

    .onlineHero h1 {
        font-size: 24px
    }

    .onlineHero p {
        font-size: 16px;
        width: 100%
    }
}

.onlineCTA {
    width: 100%;
    padding: 3.4% 9.79%;
    height: 502px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(0deg, #0006, #0006), url(/assets/bg1-Fy0aCbqE.png) #d3d3d3 0px -589.983px/100% 252.583% no-repeat
}

.onlineCTA h2 {
    width: 50%;
    font-family: 'Sora-SemiBold';
    font-size: 2.08vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--color-white);
    margin-bottom: 2%
}

.onlineCTA .explore-btn {
    padding: 1% 3%;
    font-size: 18px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    color: var(--color-white);
    background: transparent;
    border: 2px solid #f3f3f3;
    border-radius: 10px;
    cursor: pointer;
    transition: .3s ease
}

.onlineCTA .explore-btn:hover {
    background: var(--color-white);
    color: #dc143c
}

@media (max-width: 1536px) {
    .onlineCTA {
        height: 450px
    }

    .onlineCTA h2 {
        font-size: 2vw;
        width: 75%
    }

    .onlineCTA .explore-btn {
        padding: 1% 3%;
        font-size: 17px
    }
}

@media (max-width: 1440px) {
    .onlineCTA {
        height: 420px
    }

    .onlineCTA h2 {
        font-size: 1.9vw;
        width: 80%
    }

    .onlineCTA .explore-btn {
        font-size: 16px;
        padding: 1.2% 3.2%
    }
}

@media (max-width: 1280px) {
    .onlineCTA {
        height: 390px
    }

    .onlineCTA h2 {
        font-size: 1.8vw;
        width: 85%
    }

    .onlineCTA .explore-btn {
        font-size: 15px;
        padding: 1.4% 3.4%
    }
}

@media (max-width: 480px) {
    .onlineCTA {
        padding: 10% 7%;
        height: 194px;
        background-size: cover;
        background-position: center
    }

    .onlineCTA h2 {
        width: 90%;
        font-size: 5vw;
        font-weight: 500;
        margin-bottom: 3%
    }

    .onlineCTA .explore-btn {
        padding: 2% 5%;
        font-size: 16px;
        border-width: 1.5px;
        border-radius: 1vw;
        margin-top: 8%
    }
}

.onlineBenefits {
    padding: 80px 120px
}

.onlineBenefits h1 {
    color: var(--color-red);
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.9vw;
    font-weight: 400;
    margin-bottom: 50px
}

.onlineBenefits .rowsContainer {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.onlineBenefits .rowBox {
    display: flex;
    justify-content: space-between;
    background-color: #fbc51d14;
    padding: 20px;
    border-radius: 10px
}

.onlineBenefits .itemBox {
    flex: 1;
    text-align: center
}

.onlineBenefits .itemBox img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 10px
}

.onlineBenefits .itemBox p {
    font-size: .95rem;
    font-weight: 500;
    color: #333
}

@media (max-width: 768px) {
    .onlineBenefits .rowBox {
        flex-direction: column;
        align-items: center
    }

    .onlineBenefits .itemBox {
        margin-bottom: 15px
    }

    .onlineBenefits h1 {
        font-size: 6vw
    }
}

@media (max-width: 480px) {
    .onlineBenefits {
        padding: 40px 20px
    }

    .onlineBenefits h1 {
        font-size: 7vw;
        margin-bottom: 30px
    }

    .onlineBenefits .rowBox {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 16px 0
    }

    .onlineBenefits .itemBox {
        width: 48%;
        margin-bottom: 20px
    }

    .onlineBenefits .itemBox img {
        width: 50px;
        height: 50px
    }

    .onlineBenefits .itemBox p {
        font-size: .85rem
    }
}

.creoBenefits {
    padding: 100px 120px 0
}

.creoBenefits h1 {
    color: var(--color-red);
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-weight: 400;
    text-transform: uppercase
}

.creoBenefits .points-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 20px;
    justify-content: center;
    margin-top: 50px
}

.creoBenefits .benefit-box {
    width: 405px;
    height: 379px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 40px;
    border-radius: 10px;
    overflow: hidden
}

.creoBenefits .benefit-box .benefit-text p {
    color: var(--color-white);
    font-size: 32px;
    font-style: normal;
    font-weight: 650;
    margin: 0 !important;
    line-height: normal
}

.creoBenefits .benefit-box:nth-child(1) .benefit-text {
    width: 60%;
    position: absolute;
    top: 40px;
    left: 40px
}

.creoBenefits .benefit-box:nth-child(2) .benefit-text {
    width: 65%;
    position: absolute;
    bottom: 40px;
    left: 40px
}

.creoBenefits .benefit-box:nth-child(3) .benefit-text {
    width: 70%;
    position: absolute;
    top: 40px;
    left: 40px
}

.creoBenefits .benefit-box:nth-child(4) .benefit-text {
    width: 68%;
    position: absolute;
    bottom: 40px;
    left: 40px
}

.creoBenefits .benefit-box:nth-child(5) .benefit-text {
    width: 55%;
    position: absolute;
    bottom: 40px;
    left: 40px
}

.creoBenefits .benefit-box:nth-child(6) .benefit-text {
    width: 70%;
    position: absolute;
    top: 40px;
    left: 40px
}

.creoBenefits .benefit-box:nth-child(7) .benefit-text {
    width: 70%;
    position: absolute;
    bottom: 40px;
    left: 40px
}

.creoBenefits .benefit-box:nth-child(5),
.creoBenefits .benefit-box:nth-child(6),
.creoBenefits .benefit-box:nth-child(7) {
    margin-left: 100%;
    align-items: center;
    grid-column: span 1;
    justify-self: center
}

.creoBenefits .vector {
    position: absolute;
    width: 227.429px;
    height: 112.687px
}

.creoBenefits .top-right {
    top: 0;
    right: 0
}

.creoBenefits .top-left {
    top: 0;
    left: 0
}

.creoBenefits .bottom-right {
    bottom: 0;
    right: 0
}

.creoBenefits .creoB p {
    text-align: center;
    color: #2c2c2c;
    font-size: 24px;
    font-weight: 650;
    margin-top: 50px
}

@media (max-width: 1536px) {
    .creoBenefits {
        padding: 60px 120px 0
    }

    .creoBenefits h1 {
        font-size: 48px
    }

    .creoBenefits .points-container {
        gap: 28px 15px
    }

    .creoBenefits .benefit-box {
        width: 350px;
        height: 300px;
        padding: 35px
    }

    .creoBenefits .benefit-box .benefit-text p {
        font-size: 28px
    }

    .creoBenefits .benefit-box:nth-child(1) .benefit-text,
    .creoBenefits .benefit-box:nth-child(3) .benefit-text,
    .creoBenefits .benefit-box:nth-child(6) .benefit-text {
        top: 25px;
        left: 25px
    }

    .creoBenefits .benefit-box:nth-child(2) .benefit-text,
    .creoBenefits .benefit-box:nth-child(4) .benefit-text,
    .creoBenefits .benefit-box:nth-child(5) .benefit-text,
    .creoBenefits .benefit-box:nth-child(7) .benefit-text {
        bottom: 25px;
        left: 25px
    }

    .creoBenefits .benefit-box:nth-child(5),
    .creoBenefits .benefit-box:nth-child(6),
    .creoBenefits .benefit-box:nth-child(7) {
        margin-left: 110%
    }

    .creoBenefits .vector {
        width: 200px;
        height: auto
    }

    .creoBenefits .creoB p {
        font-size: 20px
    }
}

@media (max-width: 1440px) {
    .creoBenefits {
        padding: 50px 100px 0
    }

    .creoBenefits h1 {
        font-size: 42px
    }

    .creoBenefits .points-container {
        gap: 24px 12px
    }

    .creoBenefits .benefit-box {
        width: 320px;
        height: 280px;
        padding: 30px
    }

    .creoBenefits .benefit-box .benefit-text p {
        font-size: 26px
    }

    .creoBenefits .benefit-box:nth-child(1) .benefit-text,
    .creoBenefits .benefit-box:nth-child(3) .benefit-text,
    .creoBenefits .benefit-box:nth-child(6) .benefit-text {
        top: 20px;
        left: 20px
    }

    .creoBenefits .benefit-box:nth-child(2) .benefit-text,
    .creoBenefits .benefit-box:nth-child(4) .benefit-text,
    .creoBenefits .benefit-box:nth-child(5) .benefit-text,
    .creoBenefits .benefit-box:nth-child(7) .benefit-text {
        bottom: 20px;
        left: 20px
    }

    .creoBenefits .benefit-box:nth-child(5),
    .creoBenefits .benefit-box:nth-child(6),
    .creoBenefits .benefit-box:nth-child(7) {
        margin-left: 120%
    }

    .creoBenefits .vector {
        width: 180px;
        height: auto
    }

    .creoBenefits .creoB p {
        font-size: 18px
    }
}

@media (max-width: 1280px) {
    .creoBenefits {
        padding: 40px 80px 0
    }

    .creoBenefits h1 {
        font-size: 36px
    }

    .creoBenefits .points-container {
        gap: 20px 10px
    }

    .creoBenefits .benefit-box {
        width: 290px;
        height: 250px;
        padding: 25px
    }

    .creoBenefits .benefit-box .benefit-text p {
        font-size: 24px
    }

    .creoBenefits .benefit-box:nth-child(1) .benefit-text,
    .creoBenefits .benefit-box:nth-child(3) .benefit-text,
    .creoBenefits .benefit-box:nth-child(6) .benefit-text {
        top: 15px;
        left: 15px
    }

    .creoBenefits .benefit-box:nth-child(2) .benefit-text,
    .creoBenefits .benefit-box:nth-child(4) .benefit-text,
    .creoBenefits .benefit-box:nth-child(5) .benefit-text,
    .creoBenefits .benefit-box:nth-child(7) .benefit-text {
        bottom: 15px;
        left: 15px
    }

    .creoBenefits .benefit-box:nth-child(5),
    .creoBenefits .benefit-box:nth-child(6),
    .creoBenefits .benefit-box:nth-child(7) {
        margin-left: 100%
    }

    .creoBenefits .vector {
        width: 160px;
        height: auto
    }

    .creoBenefits .creoB p {
        font-size: 16px
    }
}

@media (max-width: 480px) {
    .creoBenefits {
        padding: 40px 18px 0
    }

    .creoBenefits h1 {
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: normal
    }

    .creoBenefits .points-container {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px
    }

    .creoBenefits .benefit-box {
        width: 343px;
        height: 321.057px;
        padding: 35px 23px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        text-align: left
    }

    .creoBenefits .benefit-text p {
        font-size: 24px !important
    }

    .creoBenefits .benefit-box:nth-child(5),
    .creoBenefits .benefit-box:nth-child(6),
    .creoBenefits .benefit-box:nth-child(7) {
        margin-left: 0
    }

    .creoBenefits .vector {
        width: 170px;
        height: auto
    }

    .creoB p {
        font-size: 18px !important;
        margin-top: 20px !important
    }
}

.creoDesc {
    background: url(/assets/backdrop-CI-rV86e.png);
    height: 478px;
    flex-shrink: 0;
    box-shadow: -4px -4px 10px #0f0f0f33 inset, 4px 4px 10px #0f0f0f33 inset;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 106.5px 490px
}

.creoDesc .content {
    width: 100%
}

.creoDesc .content p {
    color: var(--color-white);
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    margin-bottom: 2%
}

.creoDesc .content p span {
    color: #fbc51d
}

@media (max-width: 1536px) {
    .creoDesc {
        height: 450px;
        padding: 100px 400px
    }

    .creoDesc .content p {
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .creoDesc {
        height: 420px;
        padding: 90px 340px
    }

    .creoDesc .content p {
        font-size: 20px
    }
}

@media (max-width: 1280px) {
    .creoDesc {
        height: 380px;
        padding: 80px 280px
    }

    .creoDesc .content p {
        font-size: 18px
    }
}

@media (max-width: 480px) {
    .creoDesc {
        height: 333px;
        padding: 28px 16px 20px;
        background-size: contain
    }

    .creoDesc .content {
        width: 100%
    }

    .creoDesc .content p {

        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal
    }
}

.creoHero {
    background: linear-gradient(180deg, #0000, #0003 37.42%), url(/assets/bg-img-DPHJBEwD.jpg) #d3d3d3 5px -99.124px/100.305% 161.133% no-repeat;
    height: 506px;
    margin-left: -1%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.creoHero .navlinks {
    display: flex;
    cursor: pointer
}

.creoHero .navlinks ul {
    position: absolute;
    top: 16vh;
    left: 7%;
    display: flex;
    justify-content: space-between;
    list-style: none;
    gap: 10px
}

.creoHero .navlinks ul li {
    color: var(--color-white)
}

.creoHero .navlinks ul li a {
    font-size: 16px;
    color: var(--color-white);
    text-decoration: none
}

.creoHero .navlinks ul .nav {
    padding: 1px 2px
}

.creoHero .navlinks ul .nav img {
    width: 24px;
    height: 24px
}

.creoHero .heading {
    width: 45%;
    flex-shrink: 0
}

.creoHero .heading h1 {
    padding-top: 10%;
    color: var(--color-white);
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

@media (max-width: 1536px) {
    .creoHero {
        height: 480px;
        margin-left: -2%;
        background-size: cover
    }

    .creoHero .navlinks ul {
        top: 18vh;
        left: 5%;
        gap: 8px
    }

    .creoHero .navlinks ul li a {
        font-size: 18px
    }

    .creoHero .navlinks ul .nav {
        padding: 4px 2px
    }

    .creoHero .navlinks ul .nav img {
        width: 18px;
        height: 18px
    }

    .creoHero .heading {
        width: 50%
    }

    .creoHero .heading h1 {
        font-size: 52px;
        padding-top: 8%
    }
}

@media (max-width: 1440px) {
    .creoHero {
        height: 450px;
        margin-left: -2.5%;
        background-size: cover
    }

    .creoHero .navlinks ul {
        top: 19vh;
        left: 4.5%;
        gap: 6px
    }

    .creoHero .navlinks ul li a {
        font-size: 16px
    }

    .creoHero .navlinks ul .nav {
        padding: 3px 1px
    }

    .creoHero .navlinks ul .nav img {
        width: 16px;
        height: 16px
    }

    .creoHero .heading {
        width: 55%
    }

    .creoHero .heading h1 {
        font-size: 48px;
        padding-top: 7%
    }
}

@media (max-width: 1280px) {
    .creoHero {
        height: 400px;
        margin-left: -3%;
        background-size: cover
    }

    .creoHero .navlinks ul {
        top: 20vh;
        left: 4%;
        gap: 5px
    }

    .creoHero .navlinks ul li a {
        font-size: 14px
    }

    .creoHero .navlinks ul .nav {
        padding: 2px 1px
    }

    .creoHero .navlinks ul .nav img {
        width: 14px;
        height: 14px
    }

    .creoHero .heading {
        width: 60%
    }

    .creoHero .heading h1 {
        font-size: 42px;
        padding-top: 6%
    }
}

@media (max-width: 480px) {
    .creoHero {
        height: 200px;
        background-size: auto
    }

    .creoHero .navlinks ul {
        padding: 1% 4%;
        margin-left: -4%;
        top: 90px;
        gap: 5px
    }

    .creoHero .navlinks ul li a {
        font-size: 14px
    }

    .creoHero .navlinks ul .nav {
        padding: 0;
        scale: .8
    }

    .creoHero .heading {
        width: 65%
    }

    .creoHero .heading h1 {
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: normal
    }
}

.placementHero {
    width: 100%;
    height: 61.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(0deg, #000000a6, #000000a6), url(/assets/hero-BJIc6l5g.png) #d3d3d3 -.68vw -17.29vh/101.508% 168.791% no-repeat no-repeat
}

.placementHero .navlinks {
    display: flex;
    cursor: pointer
}

.placementHero .navlinks ul {
    position: absolute;
    top: 16vh;
    left: 7%;
    display: flex;
    justify-content: space-between;
    list-style: none;
    gap: 10px
}

.placementHero .navlinks ul li {
    color: var(--color-white)
}

.placementHero .navlinks ul li a {
    font-size: 16px;
    color: var(--color-white);
    text-decoration: none
}

.placementHero .navlinks ul .nav {
    padding: 1px 2px
}

.placementHero .navlinks ul .nav img {
    width: 24px;
    height: 24px
}

.placementHero h1 {
    color: var(--color-white);
    width: 65%;
    text-align: center;
    text-shadow: 0px .21vw .21vw rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.92vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

@media (max-width: 1536px) {
    .placementHero {
        height: 58vh
    }

    .placementHero h1 {
        font-size: 2.6vw
    }

    .placementHero .navlinks ul {
        top: 18vh
    }

    .placementHero .navlinks ul li a {
        font-size: 15px
    }

    .placementHero .navlinks ul .nav img {
        width: 22px;
        height: 22px
    }
}

@media (max-width: 1440px) {
    .placementHero {
        height: 54vh
    }

    .placementHero h1 {
        font-size: 2.4vw
    }

    .placementHero .navlinks ul {
        top: 17vh
    }

    .placementHero .navlinks ul li a {
        font-size: 14px
    }

    .placementHero .navlinks ul .nav img {
        width: 20px;
        height: 20px
    }
}

@media (max-width: 1280px) {
    .placementHero {
        height: 50vh
    }

    .placementHero h1 {
        font-size: 2.2vw
    }

    .placementHero .navlinks ul {
        top: 17vh
    }

    .placementHero .navlinks ul li a {
        font-size: 13px
    }

    .placementHero .navlinks ul .nav img {
        width: 18px;
        height: 18px
    }
}

@media (max-width: 480px) {
    .placementHero {
        height: 30vh
    }

    .placementHero .navlinks ul {
        margin-left: -4%;
        top: 85px;
        gap: 5px
    }

    .placementHero .navlinks ul li,
    .placementHero .navlinks ul li a {
        font-size: 12px
    }

    .placementHero .navlinks ul .nav {
        padding: 0;
        scale: .6
    }

    .placementHero h1 {
        width: 75%;
        font-size: 22px;
        padding-top: 6%
    }
}

.placementSubHero {
    padding: 2.17% 8.25%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 510px;
    gap: 4.47vw;
    background: var(--color-red);
    box-shadow: .21vw .21vw .52vw #0f0f0f33 inset
}

.placementSubHero .ss-left .image img {
    width: 680px;
    height: 430px;
    border-radius: 40px
}

.placementSubHero .ss-right p {
    color: var(--color-white);
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    padding-top: 3.7vh;
    width: 90%
}

@media (max-width: 480px) {
    .placementSubHero {
        padding: 6vw 4vw;
        flex-direction: column-reverse;
        height: auto;
        gap: 6vw;
        box-shadow: none
    }

    .placementSubHero .ss-left .image img {
        width: 100%;
        height: auto;
        max-height: 50vh;
        border-radius: 5vw;
        object-fit: cover
    }

    .placementSubHero .ss-right p {
        width: 100%;
        padding-top: 0;
        font-size: 4vw;
        font-weight: 500;
        line-height: 1.5;
        text-align: center
    }
}

.placementRecruiters {
    text-align: center;
    padding: 80px 0
}

.placementRecruiters h1 {
    color: var(--color-red);
    text-align: center;
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.placementRecruiters p {
    color: var(--GREY-COLOR, #2c2c2c);
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    width: 48%;
    padding-top: 2vh;
    margin: auto;
    padding-bottom: 4vh
}

.placementRecruiters .scrolling-container {
    position: relative;
    overflow: hidden;
    padding: 4rem 0;
    border-top: .1875rem solid rgba(44, 44, 44, .5);
    border-bottom: .1875rem solid rgba(44, 44, 44, .5)
}

.placementRecruiters .scrolling-container .scrolling-wrapper {
    display: flex;
    gap: 2rem;
    animation: scroll-animation 35s linear infinite
}

.placementRecruiters .scrolling-container .scroll-box {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    height: 6rem;
    padding: 2rem 1.5rem;
    border-radius: 5px;
    border: 1px solid rgba(231, 181, 26, .8);
    color: #2c2c2c;
    font-size: 18px;
    font-weight: 700;
    line-height: 2rem
}

.placementRecruiters .scrolling-container .scrolling-wrapper-2 {
    display: flex;
    gap: 2rem;
    animation: scroll-animation 35s linear reverse infinite;
    margin-top: 3rem
}

.placementRecruiters .scrolling-container .scroll-box-2 {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 6rem;
    padding: 2rem 1.5rem;
    border-radius: 5px;
    border: 1px solid rgba(231, 181, 26, .8);
    color: #2c2c2c;
    font-size: 18px;
    font-weight: 700;
    line-height: 2rem;
    white-space: nowrap
}

@media (max-width: 1536px) {
    .placementRecruiters {
        padding: 70px 0
    }

    .placementRecruiters h1 {
        font-size: 52px
    }

    .placementRecruiters p {
        font-size: 22px;
        width: 52%
    }

    .placementRecruiters .scrolling-container {
        padding: 3.5rem 0
    }

    .placementRecruiters .scrolling-container .scroll-box,
    .placementRecruiters .scrolling-container .scroll-box-2 {
        font-size: 17px;
        padding: 1.8rem 1.2rem
    }
}

@media (max-width: 1440px) {
    .placementRecruiters {
        padding: 60px 0
    }

    .placementRecruiters h1 {
        font-size: 48px
    }

    .placementRecruiters p {
        font-size: 21px;
        width: 55%
    }

    .placementRecruiters .scrolling-container {
        padding: 3rem 0
    }

    .placementRecruiters .scrolling-container .scroll-box,
    .placementRecruiters .scrolling-container .scroll-box-2 {
        font-size: 16px;
        padding: 1.6rem 1rem
    }
}

@media (max-width: 1280px) {
    .placementRecruiters {
        padding: 50px 0
    }

    .placementRecruiters h1 {
        font-size: 44px
    }

    .placementRecruiters p {
        font-size: 20px;
        width: 60%
    }

    .placementRecruiters .scrolling-container {
        padding: 2.5rem 0
    }

    .placementRecruiters .scrolling-container .scroll-box,
    .placementRecruiters .scrolling-container .scroll-box-2 {
        font-size: 15px;
        padding: 1.5rem .8rem
    }

    .placementRecruiters .scrolling-container .scrolling-wrapper,
    .placementRecruiters .scrolling-container .scrolling-wrapper-2 {
        gap: 1.5rem
    }
}

@media (max-width: 480px) {
    .placementRecruiters {
        padding: 10vw 0;
        text-align: center
    }

    .placementRecruiters h1 {
        font-size: 6vw
    }

    .placementRecruiters p {
        font-size: 4.5vw;
        padding: 3vw 5vw 6vw;
        width: 100%
    }

    .placementRecruiters .scrolling-container {
        padding: 8vw 0 0;
        overflow: hidden;
        max-height: 65vw
    }

    .placementRecruiters .scrolling-container .scrolling-wrapper,
    .placementRecruiters .scrolling-container .scrolling-wrapper-2 {
        display: flex;
        gap: 4vw;
        animation-duration: 25s;
        white-space: nowrap
    }

    .placementRecruiters .scrolling-container .scrolling-wrapper {
        margin-bottom: 4vw
    }

    .placementRecruiters .scrolling-container .scroll-box,
    .placementRecruiters .scrolling-container .scroll-box-2 {
        flex: 0 0 auto;
        padding: 3.5vw 3vw;
        font-size: 3.5vw;
        height: auto;
        white-space: nowrap
    }

    .placementRecruiters .scrolling-wrapper~:not(.scrolling-wrapper-2):not(.scroll-box-2) {
        display: none !important
    }
}

.placementOffer {
    padding: 80px 250px 0;
    text-align: center
}

.placementOffer h1 {
    color: var(--color-red);
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-weight: 400
}

.placementOffer .offer-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 40px;
    justify-content: center;
    align-items: center
}

.placementOffer .offer-container .offer-box {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--PRIMARY-YELLOW-COLOR, #fbc51d);
    padding: 15px;
    width: 457px;
    height: 134px;
    flex-shrink: 0;
    text-align: left;
    gap: 15px
}

.placementOffer .offer-container .offer-box img {
    width: 72.316px;
    height: 72.316px
}

.placementOffer .offer-container .offer-box p {
    color: var(--Black-Color, #333);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .8px;
    margin: 0
}

.placementOffer .offer-container .last-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    grid-column: span 3;
    margin-top: 1 px
}

.placementOffer p {
    color: #2c2c2c;
    font-size: 24px;
    font-weight: 650;
    margin-top: 60px
}

@media (max-width: 1536px) {
    .placementOffer {
        padding: 70px 180px 0
    }

    .placementOffer h1 {
        font-size: 52px
    }

    .placementOffer .offer-container .offer-box {
        width: 420px;
        height: 125px
    }

    .placementOffer .offer-container .offer-box img {
        width: 68px;
        height: 68px
    }

    .placementOffer .offer-container .offer-box p {
        font-size: 18px
    }

    .placementOffer .offer-container .last-row {
        gap: 12px
    }

    .placementOffer p {
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .placementOffer {
        padding: 60px 140px 0
    }

    .placementOffer h1 {
        font-size: 48px
    }

    .placementOffer .offer-container .offer-box {
        width: 380px;
        height: 120px
    }

    .placementOffer .offer-container .offer-box img {
        width: 64px;
        height: 64px
    }

    .placementOffer .offer-container .offer-box p {
        font-size: 17px
    }

    .placementOffer p {
        font-size: 21px
    }
}

@media (max-width: 1280px) {
    .placementOffer {
        padding: 50px 100px 0
    }

    .placementOffer h1 {
        font-size: 44px
    }

    .placementOffer .offer-container {
        grid-template-columns: repeat(2, 1fr)
    }

    .placementOffer .offer-container .offer-box {
        width: 360px;
        height: 115px
    }

    .placementOffer .offer-container .offer-box img {
        width: 60px;
        height: 60px
    }

    .placementOffer .offer-container .offer-box p {
        font-size: 16px
    }

    .placementOffer .offer-container .last-row {
        flex-wrap: wrap;
        gap: 10px
    }

    .placementOffer p {
        font-size: 20px
    }
}

@media (max-width: 480px) {
    .placementOffer {
        padding: 12vw 5vw 0;
        text-align: center
    }

    .placementOffer h1 {
        font-size: 6vw;
        line-height: 1.2;
        text-align: center;
        width: 80%;
        margin: auto
    }

    .placementOffer .offer-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 8vw;
        gap: 5vw
    }

    .placementOffer .offer-container .offer-box {
        flex-direction: row;
        width: 100%;
        max-width: 90vw;
        height: auto;
        padding: 4vw;
        gap: 4vw
    }

    .placementOffer .offer-container .offer-box img {
        width: 16vw;
        height: 16vw
    }

    .placementOffer .offer-container .offer-box p {
        font-size: 4vw;
        line-height: 1.4;
        letter-spacing: .3px
    }

    .placementOffer .offer-container .last-row {
        flex-direction: column;
        gap: 5vw;
        margin-top: 0
    }

    .placementOffer p {
        font-size: 4.5vw;
        margin-top: 10vw;
        line-height: 1.4
    }
}

.placementJob {
    text-align: center;
    padding: 60px 260px 0
}

.placementJob h1 {
    color: var(--color-red);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-weight: 400
}

.placementJob .heading {
    margin: auto;
    padding-top: 1.5vh;
    width: 77%;
    font-size: 24px;
    font-weight: 650
}

.placementJob .subtext {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .8px
}

.placementJob .job-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
    gap: 20px
}

.placementJob .job-card {
    display: flex;
    overflow: hidden
}

.placementJob .job-card img {
    width: 378px;
    height: 415px;
    object-fit: cover
}

.placementJob .job-card .job-info {
    margin-top: 4vh;
    width: 1019px;
    height: 344px;
    flex-shrink: 0;
    border-radius: 0 40px 40px 0;
    background: linear-gradient(264deg, var(--color-warning) 1.85%, #fff2c8 99.61%);
    padding: 40px 50px;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    flex: 1
}

.placementJob .job-card .job-info h2 {
    font-size: 24px;
    font-weight: 700;
    padding-bottom: 20px
}

.placementJob .job-card .job-info p {
    padding-bottom: 40px;
    font-size: 18px;
    font-weight: 400;
    text-align: left
}

.placementJob .job-card .job-info button {
    margin-top: 15px;
    background: transparent;
    color: var(--color-red);
    border: 1px solid #dc143c;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: .3s
}

.placementJob .job-card .job-info button:hover {
    background: var(--color-red);
    color: var(--color-white)
}

@media (max-width: 1536px) {
    .placementJob {
        padding: 50px 200px 0
    }

    .placementJob h1 {
        font-size: 52px
    }

    .placementJob .heading {
        font-size: 22px
    }

    .placementJob .subtext {
        font-size: 19px
    }

    .placementJob .job-card img {
        width: 360px;
        height: 395px
    }

    .placementJob .job-card .job-info {
        width: 960px;
        height: 330px;
        padding: 35px 45px
    }

    .placementJob .job-card .job-info h2 {
        font-size: 22px
    }

    .placementJob .job-card .job-info p {
        font-size: 17px
    }

    .placementJob .job-card .job-info button {
        padding: 10px 18px;
        font-size: 15px
    }
}

@media (max-width: 1440px) {
    .placementJob {
        padding: 50px 140px 0
    }

    .placementJob h1 {
        font-size: 48px
    }

    .placementJob .heading {
        font-size: 21px
    }

    .placementJob .subtext {
        font-size: 18px
    }

    .placementJob .job-card img {
        width: 340px;
        height: 375px
    }

    .placementJob .job-card .job-info {
        width: 900px;
        height: 320px;
        padding: 30px 40px
    }

    .placementJob .job-card .job-info h2 {
        font-size: 21px
    }

    .placementJob .job-card .job-info p {
        font-size: 16px
    }

    .placementJob .job-card .job-info button {
        font-size: 14px
    }
}

@media (max-width: 1280px) {
    .placementJob {
        padding: 40px 100px 0
    }

    .placementJob h1 {
        font-size: 44px
    }

    .placementJob .heading {
        font-size: 20px
    }

    .placementJob .subtext {
        font-size: 17px
    }
}

@media (max-width: 480px) {
    .placementJob {
        padding: 0vw 5vw 0
    }

    .placementJob h1 {
        font-size: 6vw
    }

    .placementJob .heading {
        font-size: 4.5vw;
        width: 100%;
        padding-top: 3vw
    }

    .placementJob .subtext {
        font-size: 4vw
    }

    .placementJob .job-container {
        margin-top: 6vw;
        gap: 5vw
    }

    .placementJob .job-card {
        flex-direction: column;
        align-items: center
    }

    .placementJob .job-card img {
        width: 100%;
        height: auto;
        border-radius: 10px 10px 0 0
    }

    .placementJob .job-card .job-info {
        width: 100%;
        height: auto;
        border-radius: 0 0 10px 10px;
        padding: 5vw;
        text-align: left;
        margin-top: 0
    }

    .placementJob .job-card .job-info h2 {
        font-size: 5vw;
        padding-bottom: 3vw
    }

    .placementJob .job-card .job-info p {
        font-size: 4vw;
        padding-bottom: 5vw
    }

    .placementJob .job-card .job-info button {
        font-size: 3.8vw;
        padding: 3vw 5vw
    }
}

.awardsAccoladesHero {
    width: 100%;
    height: 61.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(0deg, #0003, #0003), url(/assets/hero-bXEIKgx3.png) #d3d3d3 -.68vw -17.29vh/101.508% 168.791% no-repeat
}

.awardsAccoladesHero .navlinks {
    display: flex;
    cursor: pointer
}

.awardsAccoladesHero .navlinks ul {
    position: absolute;
    top: 16vh;
    left: 7%;
    display: flex;
    justify-content: space-between;
    list-style: none;
    gap: 10px
}

.awardsAccoladesHero .navlinks ul li {
    color: var(--color-white)
}

.awardsAccoladesHero .navlinks ul li a {
    font-size: 16px;
    color: var(--color-white);
    text-decoration: none
}

.awardsAccoladesHero .navlinks ul .nav {
    padding: 1px 2px
}

.awardsAccoladesHero .navlinks ul .nav img {
    width: 24px;
    height: 24px
}

.awardsAccoladesHero h1 {
    color: var(--color-white);
    text-align: center;
    text-shadow: 0px .21vw .21vw rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.92vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

@media (max-width: 1536px) {
    .awardsAccoladesHero .navlinks ul {
        top: 18vh
    }

    .awardsAccoladesHero .navlinks ul li a {
        font-size: 15px
    }

    .awardsAccoladesHero .navlinks ul .nav img {
        width: 22px;
        height: 22px
    }
}

@media (max-width: 1440px) {
    .awardsAccoladesHero .navlinks ul {
        top: 17vh
    }

    .awardsAccoladesHero .navlinks ul li a {
        font-size: 14px
    }

    .awardsAccoladesHero .navlinks ul .nav img {
        width: 20px;
        height: 20px
    }
}

@media (max-width: 1280px) {
    .awardsAccoladesHero .navlinks ul {
        top: 17vh
    }

    .awardsAccoladesHero .navlinks ul li a {
        font-size: 13px
    }

    .awardsAccoladesHero .navlinks ul .nav img {
        width: 18px;
        height: 18px
    }
}

@media (max-width: 480px) {
    .awardsAccoladesHero {
        height: 30vh
    }

    .awardsAccoladesHero .navlinks ul {
        margin-left: -4%;
        top: 85px;
        gap: 5px
    }

    .awardsAccoladesHero .navlinks ul li,
    .awardsAccoladesHero .navlinks ul li a {
        font-size: 12px
    }

    .awardsAccoladesHero .navlinks ul .nav {
        padding: 0;
        scale: .6
    }

    .awardsAccoladesHero h1 {
        font-size: 24px
    }
}

.awardsAccoladesSection {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 110px;
    column-gap: 20px;
    justify-content: center;
    padding: 40px 120px
}

.awardsAccoladesSection .awardCard {
    width: 26.54vw;
    height: 73.24vh;
    border-radius: 10px;
    background: #fbc51d66;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 10px 10px;
    transition: background .3s ease
}

.awardsAccoladesSection .awardCard:hover {
    background: #fbc51d
}

.awardsAccoladesSection .awardCard img {
    width: 26.54vw;
    height: 53.15vh;
    border-radius: 10px 10px 0 0;
    align-self: center;
    object-fit: cover
}

.awardsAccoladesSection .awardCard p {
    font-size: 1.85vh;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-align: left;
    padding: 10px;
    width: 80%
}

.awardsAccoladesSection .awardCard .knowMoreBtn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    border: none;
    border-radius: 10px;
    background: var(--color-red);
    color: var(--color-white);
    font-size: 1.67vh;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    padding: 12px 26px;
    cursor: pointer;
    margin-top: auto;
    margin-left: 10px
}

.awardsAccoladesSection .awardCard .knowMoreBtn img {
    width: 16px;
    height: 16px
}

.awardsAccoladesSection .pagination {
    display: none;
    align-items: center;
    justify-content: center;
    padding-top: 2%;
    gap: 20px
}

.awardsAccoladesSection .pagination img {
    width: 45px;
    height: 30px;
    cursor: pointer;
    transition: .3s
}

.awardsAccoladesSection .pagination img.disabled {
    opacity: .5;
    cursor: not-allowed
}

.awardsAccoladesSection .pagination img:hover:not(.disabled) {
    transform: scale(1.1)
}

.awardsAccoladesSection .pagination .pages {
    display: flex;
    gap: 20px
}

.awardsAccoladesSection .pagination .pages span {
    font-size: 24px;
    height: 60px;
    width: 60px;
    padding: 15px 22px;
    border: 1px solid black;
    border-radius: 50%;
    cursor: pointer;
    transition: .3s
}

.awardsAccoladesSection .pagination .pages span:hover {
    background: #ddd
}

.awardsAccoladesSection .pagination .pages span.active {
    margin-top: 0 !important;
    border: 1px solid #dc143c;
    font-weight: 700
}

@media (max-width: 1536px) {
    .awardsAccoladesSection .awardCard .knowMoreBtn {
        font-size: 1.5vh;
        padding: 11px 18px
    }

    .awardsAccoladesSection .awardCard .knowMoreBtn img {
        width: 15px;
        height: 15px
    }
}

@media (max-width: 1440px) {
    .awardsAccoladesSection .awardCard .knowMoreBtn {
        font-size: 1.4vh;
        padding: 10px 16px
    }

    .awardsAccoladesSection .awardCard .knowMoreBtn img {
        width: 14px;
        height: 14px
    }
}

@media (max-width: 1280px) {
    .awardsAccoladesSection .awardCard .knowMoreBtn {
        font-size: 1.3vh;
        padding: 9px 14px
    }

    .awardsAccoladesSection .awardCard .knowMoreBtn img {
        width: 13px;
        height: 13px
    }
}

@media (max-width: 480px) {
    .awardsAccoladesSection {
        display: flex;
        flex-direction: column;
        padding: 16px 12px;
        row-gap: 20px
    }

    .awardsAccoladesSection .awardCard {
        width: 100%;
        padding: 0 0 10px;
        margin-bottom: 2%
    }

    .awardsAccoladesSection .awardCard img {
        width: 100%
    }

    .awardsAccoladesSection .awardCard p {
        font-size: 16px
    }

    .awardsAccoladesSection .pagination {
        display: flex;
        width: 100%;
        scale: .5
    }
}

.awardsAccoladesSubHero {
    padding: 4.17% 6.25% 2.08%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5.47%
}

.awardsAccoladesSubHero .aa-left {
    width: 43%
}

.awardsAccoladesSubHero .aa-left h1 {
    color: var(--color-red);
    text-shadow: 0px .21% .21% rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.92vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.awardsAccoladesSubHero .aa-left p {
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    padding-top: 2.08%;
    width: 95%
}

.awardsAccoladesSubHero .aa-right {
    width: 50%
}

.awardsAccoladesSubHero .aa-right .image img {
    width: 44.79vw;
    height: 27.14vw
}

@media (max-width: 480px) {
    .awardsAccoladesSubHero {
        padding: 16px;
        display: flex;
        flex-direction: column
    }

    .awardsAccoladesSubHero .aa-left,
    .awardsAccoladesSubHero .aa-right {
        width: 100%
    }

    .awardsAccoladesSubHero .aa-left {
        padding-bottom: 2%
    }

    .awardsAccoladesSubHero .aa-left h1 {
        font-size: 24px
    }

    .awardsAccoladesSubHero .aa-left p {
        font-size: 16px;
        padding-bottom: 2%
    }

    .awardsAccoladesSubHero .aa-right .image img {
        width: 100%;
        height: auto
    }
}

.FAQs {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-direction: column
}

.FAQs .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 502px;
    width: 100%;
    background: linear-gradient(0deg, #000000d9, #000000d9), url(/assets/hero-CSslgxJC.jpeg) #d3d3d3 -13.051px -182.429px/101.508% 218.554% no-repeat
}

.FAQs .hero heading {
    color: var(--color-white);
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.FAQs .hero .title {
    color: var(--color-white);
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.FAQs .accordion {
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 8rem
}

.FAQs .accordion .faq-dropdown {
    padding: 2%;
    width: 80%;
    height: 100px;
    margin-bottom: 30px;
    border-radius: 20px;
    background: var(--Color-4, #dc143c);
    color: var(--color-white);
    font-size: 32px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.FAQs .accordion .faq-item {
    width: 80%;
    margin-bottom: 1rem
}

.FAQs .accordion .faq-item .question {
    font-size: 26px;
    width: 100%;
    font-weight: 700;
    cursor: pointer;
    padding: .75rem;
    border-radius: 5px;
    background: #fbc51d12
}

.FAQs .accordion .faq-item .answer {
    background: #fbc51d12;
    padding: 1rem;
    margin-top: .5rem;
    border-radius: 5px
}

@media (max-width: 1536px) {
    .FAQs .hero {
        height: 460px
    }

    .FAQs .hero heading {
        font-size: 52px
    }

    .FAQs .hero .title {
        font-size: 30px
    }

    .FAQs .accordion {
        margin-top: 7rem
    }

    .FAQs .accordion .faq-dropdown {
        font-size: 30px;
        height: 90px
    }

    .FAQs .accordion .faq-item .question {
        font-size: 24px
    }

    .FAQs .accordion .faq-item .answer {
        font-size: 18px
    }
}

@media (max-width: 1440px) {
    .FAQs .hero {
        height: 440px
    }

    .FAQs .hero heading {
        font-size: 48px
    }

    .FAQs .hero .title {
        font-size: 28px
    }

    .FAQs .accordion {
        margin-top: 6rem
    }

    .FAQs .accordion .faq-dropdown {
        font-size: 28px;
        height: 85px
    }

    .FAQs .accordion .faq-item .question {
        font-size: 22px
    }

    .FAQs .accordion .faq-item .answer {
        font-size: 17px
    }
}

@media (max-width: 1280px) {
    .FAQs .hero {
        height: 420px
    }

    .FAQs .hero heading {
        font-size: 44px
    }

    .FAQs .hero .title {
        font-size: 26px
    }

    .FAQs .accordion {
        margin-top: 5rem
    }

    .FAQs .accordion .faq-dropdown {
        font-size: 26px;
        height: 80px
    }

    .FAQs .accordion .faq-item .question {
        font-size: 20px
    }

    .FAQs .accordion .faq-item .answer {
        font-size: 16px
    }
}

@media (max-width: 480px) {
    .FAQs .hero {
        height: 302px
    }

    .FAQs .hero .title {
        font-size: 16px
    }

    .FAQs .hero heading {
        font-size: 20px
    }

    .FAQs .accordion {
        margin-top: 2rem;
        width: 100%
    }

    .FAQs .accordion .faq-dropdown {
        font-size: 22px;
        height: 50px
    }

    .FAQs .accordion .faq-item .question {
        font-size: 18px
    }
}

.speakCTA {
    margin: 5% 0 0;
    background: linear-gradient(0deg, #0009, #0009), url(/assets/scta-Ba8nU7XX.png) #d3d3d3 50%/cover no-repeat;
    height: 373px;
    display: flex;
    align-items: center;
    justify-content: center
}

.speakCTA p {
    color: var(--color-white);
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    width: 37%
}

@media (max-width: 1536px) {
    .speakCTA {
        height: 340px
    }

    .speakCTA p {
        font-size: 30px;
        width: 42%
    }
}

@media (max-width: 1440px) {
    .speakCTA {
        height: 320px
    }

    .speakCTA p {
        font-size: 28px;
        width: 45%
    }
}

@media (max-width: 1280px) {
    .speakCTA {
        height: 300px
    }

    .speakCTA p {
        font-size: 26px;
        width: 50%
    }
}

@media (max-width: 480px) {
    .speakCTA {
        height: 194px
    }

    .speakCTA p {
        font-size: 16px;
        width: 80%
    }
}

.sSpeaksHero {
    width: 100%;
    height: 61.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(0deg, #000000a6, #000000a6), url(/assets/sSpeaksHero-Dd5QCl0Z.png) #d3d3d3 -.68vw -17.29vh/101.508% 168.791% no-repeat no-repeat
}

.sSpeaksHero .navlinks {
    display: flex;
    cursor: pointer
}

.sSpeaksHero .navlinks ul {
    position: absolute;
    top: 16vh;
    left: 7%;
    display: flex;
    justify-content: space-between;
    list-style: none;
    gap: 10px
}

.sSpeaksHero .navlinks ul li {
    color: var(--color-white)
}

.sSpeaksHero .navlinks ul li a {
    font-size: 16px;
    color: var(--color-white);
    text-decoration: none
}

.sSpeaksHero .navlinks ul .nav {
    padding: 1px 2px
}

.sSpeaksHero .navlinks ul .nav img {
    width: 24px;
    height: 24px
}

.sSpeaksHero h1 {
    color: var(--color-white);
    text-align: center;
    text-shadow: 0px .21vw .21vw rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.92vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

@media (max-width: 1536px) {
    .sSpeaksHero .navlinks ul {
        top: 18vh
    }
}

@media (max-width: 1440px) {
    .sSpeaksHero .navlinks ul {
        top: 18vh
    }
}

@media (max-width: 1281px) {
    .sSpeaksHero .navlinks ul {
        top: 18vh
    }
}

@media (max-width: 480px) {
    .sSpeaksHero {
        height: 30vh
    }

    .sSpeaksHero .navlinks ul {
        margin-left: -4%;
        top: 13%;
        gap: 5px
    }

    .sSpeaksHero .navlinks ul li,
    .sSpeaksHero .navlinks ul li a {
        font-size: 12px
    }

    .sSpeaksHero .navlinks ul .nav {
        padding: 0;
        scale: .6
    }

    .sSpeaksHero h1 {
        font-size: 24px
    }
}

.sSpeaksSubHero {
    padding: 4.17% 6.25%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5.47vw;
    background: var(--color-red);
    box-shadow: .21vw .21vw .52vw #0f0f0f33 inset
}

.sSpeaksSubHero .ss-left {
    width: 50%
}

.sSpeaksSubHero .ss-left .image img {
    width: 43.23vw;
    height: 43.89vh;
    max-width: 100%;
    height: auto
}

.sSpeaksSubHero .ss-right {
    width: 50%
}

.sSpeaksSubHero .ss-right h1 {
    color: #fbc51d;
    text-shadow: 0px .21vw .21vw rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.92vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.sSpeaksSubHero .ss-right p {
    color: var(--color-white);
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    padding-top: 3.7vh
}

@media (max-width: 480px) {
    .sSpeaksSubHero {
        flex-direction: column-reverse;
        padding: 8vw 5vw;
        gap: 6vw;
        text-align: center
    }

    .sSpeaksSubHero .ss-left,
    .sSpeaksSubHero .ss-right {
        width: 100%
    }

    .sSpeaksSubHero .ss-right h1 {
        font-size: 6vw;
        text-align: left
    }

    .sSpeaksSubHero .ss-right p {
        font-size: 4.2vw;
        padding-top: 4vw;
        text-align: left;
        font-weight: 500
    }

    .sSpeaksSubHero .ss-left .image img {
        width: 100%;
        height: auto
    }
}

.sSpeaksTestimonials {
    padding: 6.5% 4.79% 2.5%
}

.sSpeaksTestimonials .stestimonialContainer {
    width: 100%;
    display: flex;
    align-items: center
}

.sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper {
    display: flex;
    gap: 3%;
    padding: 30px
}

.sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial {
    display: flex;
    padding: 1.5%;
    gap: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 31.3%;
    min-width: 25vw;
    height: 513px;
    flex-shrink: 0;
    border-radius: 65px 65px 0 0;
    background: var(--color-white);
    box-shadow: 0 0 5px 4px #00000040;
    position: relative
}

.sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial .imageContainer img {
    object-fit: cover;
    width: 160px;
    height: 160px;
    position: absolute;
    border-radius: 160px;
    border: 8px solid #fff;
    background: url(<path-to-image>) #d3d3d3 50%/cover no-repeat;
    box-shadow: 0 0 4px 4px #00000040;
    top: -17%;
    left: 35%
}

.sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial .name {
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial .title {
    color: var(--color-red);
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial .quote p {
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial .stestimonialbutton {
    position: absolute;
    bottom: -77px;
    right: 0;
    width: 100%;
    height: 89px;
    border-radius: 0 0 65px 65px;
    background: #fbc51d;
    text-align: center
}

.sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial .stestimonialbutton p {
    margin: 30px auto;
    cursor: pointer
}

.sSpeaksTestimonials .dots {
    text-align: center;
    margin-top: 20px;
    position: relative
}

.sSpeaksTestimonials .dots .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 4% 5px 5px;
    background-color: #da1e3733;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .3s
}

.sSpeaksTestimonials .dots .dot.active {
    background-color: #da1e37;
    width: 12px;
    height: 12px
}

.sSpeaksTestimonials .modal {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: #000000b3
}

.sSpeaksTestimonials .modal-content {
    display: flex;
    width: 1559px;
    height: 492px;
    background: var(--color-white);
    position: relative;
    border-radius: 10px;
    background: var(--DC143C, #dc143c)
}

.sSpeaksTestimonials .modal-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40%;
    padding: 20px
}

.sSpeaksTestimonials .modal-left img {
    width: 120px;
    height: 120px;
    border: 8px solid #fff;
    background: url(<path-to-image>) #d3d3d3 50%/cover no-repeat;
    box-shadow: 0 0 4px 4px #00000040;
    border-radius: 50%
}

.sSpeaksTestimonials .modal-left h2 {
    color: var(--color-white);
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    margin-top: 10px
}

.sSpeaksTestimonials .modal-left h3 {
    color: var(--FBC51D, #fbc51d);
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.sSpeaksTestimonials .modal-divider {
    width: 4px;
    background: #fbc51d;
    height: 80%;
    align-self: center
}

.sSpeaksTestimonials .modal-right {
    width: 60%;
    padding: 40px;
    color: var(--color-white);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    line-height: 1.5
}

.sSpeaksTestimonials .close-button {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    cursor: pointer
}

.sSpeaksTestimonials .close-button img {
    width: 24px
}

@media (max-width: 1536px) {
    .sSpeaksTestimonials {
        padding: 5.5% 4% 2%
    }

    .sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper {
        padding: 25px;
        gap: 2.5%
    }

    .sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial {
        width: 30%;
        min-width: 400px;
        height: 470px;
        padding: 1.2%
    }

    .sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial .imageContainer img {
        width: 140px;
        height: 140px;
        top: -15%;
        left: 34%
    }

    .sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial .name,
    .sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial .title {
        font-size: 30px
    }

    .sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial .quote p {
        font-size: 22px
    }

    .sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial .stestimonialbutton {
        height: 80px
    }

    .sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial .stestimonialbutton p {
        margin: 26px auto
    }

    .sSpeaksTestimonials .modal-content {
        width: 1400px;
        height: 460px
    }

    .sSpeaksTestimonials .modal-left h2,
    .sSpeaksTestimonials .modal-left h3 {
        font-size: 30px
    }

    .sSpeaksTestimonials .modal-right {
        font-size: 18px
    }
}

@media (max-width: 1440px) {
    .sSpeaksTestimonials {
        padding: 5% 3.5% 2%
    }

    .sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper {
        padding: 20px;
        gap: 2%
    }

    .sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial {
        width: 29%;
        min-width: 368px;
        height: 440px;
        padding: 1%
    }

    .sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial .imageContainer img {
        width: 130px;
        height: 130px;
        top: -14%;
        left: 34%
    }

    .sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial .name,
    .sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial .title {
        font-size: 28px
    }

    .sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial .quote p {
        font-size: 21px
    }

    .sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial .stestimonialbutton {
        bottom: -70px;
        height: 75px
    }

    .sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial .stestimonialbutton p {
        margin: 24px auto
    }

    .sSpeaksTestimonials .modal-content {
        width: 1320px;
        height: 440px
    }

    .sSpeaksTestimonials .modal-left h2,
    .sSpeaksTestimonials .modal-left h3 {
        font-size: 28px
    }

    .sSpeaksTestimonials .modal-right {
        font-size: 17px
    }
}

@media (max-width: 1280px) {
    .sSpeaksTestimonials {
        padding: 4.5% 3% 2%
    }

    .sSpeaksTestimonials .stestimonialContainer {
        width: 100%
    }

    .sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper {
        padding: 18px;
        gap: 4.8%
    }

    .sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial {
        width: 25%;
        gap: 16px;
        min-width: 326px;
        height: 410px;
        padding: .9%
    }

    .sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial .imageContainer img {
        width: 80px;
        height: 80px;
        top: -13%;
        left: 40%
    }

    .sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial .name,
    .sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial .title {
        font-size: 26px
    }

    .sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial .quote p {
        font-size: 20px
    }

    .sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial .stestimonialbutton {
        height: 70px;
        bottom: -68px
    }

    .sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial .stestimonialbutton p {
        margin: 22px auto
    }

    .sSpeaksTestimonials .stestimonialContainer .modal-content {
        width: 1200px;
        height: 420px
    }

    .sSpeaksTestimonials .stestimonialContainer .modal-left h2,
    .sSpeaksTestimonials .stestimonialContainer .modal-left h3 {
        font-size: 26px
    }

    .sSpeaksTestimonials .stestimonialContainer .modal-right {
        font-size: 16px
    }
}

@media (max-width: 480px) {
    .sSpeaksTestimonials {
        padding: 80px 10px 0
    }

    .sSpeaksTestimonials .stestimonialContainer {
        align-items: center
    }

    .sSpeaksTestimonials .stestimonialContainer .left,
    .sSpeaksTestimonials .stestimonialContainer .right {
        width: 74.5px;
        height: 27.5px
    }

    .sSpeaksTestimonials .stestimonialContainer .left img,
    .sSpeaksTestimonials .stestimonialContainer .right img {
        object-fit: cover;
        height: 100%;
        width: 100%
    }

    .sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper {
        flex-direction: column;
        padding: 10px;
        gap: 20px
    }

    .sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial {
        width: 100%;
        gap: 20px;
        min-width: auto;
        height: auto;
        padding: 50px 10px;
        border-radius: 40px 40px 0 0
    }

    .sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial .imageContainer img {
        width: 90px;
        height: 90px;
        top: -14%;
        left: 50%;
        transform: translate(-50%)
    }

    .sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial .name,
    .sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial .title {
        font-size: 20px
    }

    .sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial .quote p {
        font-size: 16px;
        padding: 0 10px
    }

    .sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial .stestimonialbutton {
        height: 60px;
        bottom: -60px
    }

    .sSpeaksTestimonials .stestimonialContainer .stestimonialWrapper .stestimonial .stestimonialbutton p {
        margin: 18px auto;
        font-size: 16px
    }

    .sSpeaksTestimonials .dots {
        margin-top: 65px
    }

    .sSpeaksTestimonials .dots .dot {
        width: 8px;
        height: 8px
    }

    .sSpeaksTestimonials .dots .dot.active {
        width: 10px;
        height: 10px
    }

    .sSpeaksTestimonials .modal-content {
        position: sticky;
        flex-direction: column;
        width: 90%;
        height: 400px;
        overflow: scroll;
        border-radius: 15px;
        padding: 20px
    }

    .sSpeaksTestimonials .modal-left {
        width: 100%;
        padding: 10px;
        text-align: center
    }

    .sSpeaksTestimonials .modal-left img {
        width: 80px;
        height: 80px
    }

    .sSpeaksTestimonials .modal-left h2,
    .sSpeaksTestimonials .modal-left h3 {
        font-size: 20px
    }

    .sSpeaksTestimonials .modal-divider {
        display: none
    }

    .sSpeaksTestimonials .modal-right {
        width: 100%;
        padding: 20px 10px;
        font-size: 16px;
        text-align: justify
    }

    .sSpeaksTestimonials .close-button {
        position: fixed;
        top: 19%;
        right: 10px
    }

    .sSpeaksTestimonials .close-button img {
        width: 20px
    }
}

.SSpeaksWelcome {
    padding: 2.5% 4.79%;
    display: flex;
    flex-direction: column;
    gap: 40px
}

.SSpeaksWelcome .heading {
    color: var(--color-red);
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.SSpeaksWelcome .desc {
    width: 65%;
    margin: auto;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.SSpeaksWelcome .wlcmWrapper {
    display: flex;
    align-items: center;
    gap: 3%
}

.SSpeaksWelcome .wlcmWrapper .infoContainer {
    display: flex;
    width: 100%
}

.SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard {
    width: 100%;
    display: flex;
    position: relative
}

.SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .leftcard {
    position: absolute;
    top: 15%;
    display: flex;
    flex-direction: column;
    z-index: 1;
    padding: 2% 4%;
    background-color: var(--color-red);
    width: 638px;
    height: 443px;
    gap: 6%
}

.SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .leftcard .top {
    display: flex;
    justify-content: left
}

.SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .leftcard .top .nameContainer {
    display: flex;
    flex-direction: column;
    gap: 5%
}

.SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .leftcard .top .nameContainer .name {
    color: var(--color-white);
    font-size: 32px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .leftcard .top .nameContainer .desig {
    color: #fbc51d;
    font-size: 32px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .leftcard .top .profile {
    width: 120px;
    height: 120px;
    border-radius: 120px;
    border: 5px solid #fff;
    background: url(<path-to-image>) #d3d3d3 50%/cover no-repeat;
    box-shadow: 0 0 4px 4px #00000040
}

.SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .leftcard .top .profile img {
    height: 100%;
    width: 100%;
    border-radius: 50%
}

.SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .leftcard .carddesc .text {
    color: var(--color-white);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: 3
}

.SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .leftcard .carddesc span {
    color: #fbc51d;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    cursor: pointer;
    display: inline-block;
    margin-top: 8px
}

.SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .rightcard {
    width: 972px;
    height: 646px;
    position: relative;
    right: -37%
}

.SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .rightcard .thumb,
.SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .rightcard .thumb .bg {
    height: 100%;
    width: 100%
}

.SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .rightcard .thumb .playButton {
    position: absolute;
    left: 45%;
    bottom: 45%;
    cursor: pointer
}

.SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .dotsWrapper {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    gap: 10px;
    z-index: 2
}

.SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .dotsWrapper .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #da1e3733;
    cursor: pointer;
    transition: background-color .3s ease
}

.SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .dotsWrapper .dot.active {
    background-color: #dc143c
}

.SSpeaksWelcome .popupOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0009;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999
}

.SSpeaksWelcome .popupBox {
    border-radius: 10px;
    background: var(--DC143C, #dc143c);
    padding: 20px;
    width: 1559px;
    height: 492px;
    position: relative
}

.SSpeaksWelcome .closeBtn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: #fbc51d
}

.SSpeaksWelcome .popupContent {
    display: flex;
    gap: 20px;
    margin-top: 20px
}

.SSpeaksWelcome .popupLeft {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center
}

.SSpeaksWelcome .popupImage {
    width: 100%;
    max-width: 200px;
    height: auto;
    margin-bottom: 10px;
    border-radius: 160px;
    border: 8px solid #fff;
    background: url(<path-to-image>) #d3d3d3 50%/cover no-repeat;
    box-shadow: 0 0 4px 4px #00000040
}

.SSpeaksWelcome .popupLeft h2,
.SSpeaksWelcome .popupLeft h4 {
    margin: 5px 0;
    text-align: center
}

.SSpeaksWelcome .popupLeft h2 {
    color: var(--color-white);
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.SSpeaksWelcome .popupLeft h4 {
    color: var(--FBC51D, #fbc51d);
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.SSpeaksWelcome .popupDivider {
    width: 1px;
    background: #fbc51d;
    height: 419px
}

.SSpeaksWelcome .popupRight {
    flex: 2;
    padding-left: 20px;
    color: var(--color-white);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    overflow-y: auto
}

@media (max-width: 1536px) {
    .SSpeaksWelcome .heading {
        font-size: 48px
    }

    .SSpeaksWelcome .desc {
        font-size: 22px;
        width: 72%
    }

    .SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .leftcard {
        width: 580px;
        height: 400px
    }

    .SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .leftcard .name,
    .SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .leftcard .desig {
        font-size: 28px
    }

    .SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .leftcard .carddesc .text,
    .SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .leftcard .carddesc span {
        font-size: 22px
    }

    .SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .rightcard {
        width: 860px;
        height: 580px;
        right: -30%
    }

    .SSpeaksWelcome .popupBox {
        width: 1300px;
        height: 460px
    }

    .SSpeaksWelcome .popupLeft h2,
    .SSpeaksWelcome .popupLeft h4,
    .SSpeaksWelcome .popupRight {
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .SSpeaksWelcome .heading {
        font-size: 44px
    }

    .SSpeaksWelcome .desc {
        font-size: 20px;
        width: 75%
    }

    .SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .leftcard {
        width: 520px;
        height: 380px
    }

    .SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .leftcard .name,
    .SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .leftcard .desig {
        font-size: 26px
    }

    .SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .leftcard .carddesc .text,
    .SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .leftcard .carddesc span {
        font-size: 20px
    }

    .SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .rightcard {
        width: 800px;
        height: 540px;
        right: -25%
    }

    .SSpeaksWelcome .popupBox {
        width: 1200px;
        height: 440px
    }

    .SSpeaksWelcome .popupLeft h2,
    .SSpeaksWelcome .popupLeft h4,
    .SSpeaksWelcome .popupRight {
        font-size: 20px
    }
}

@media (max-width: 1280px) {
    .SSpeaksWelcome .heading {
        font-size: 40px
    }

    .SSpeaksWelcome .desc {
        font-size: 18px;
        width: 80%
    }

    .SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .leftcard {
        width: 460px;
        height: 360px
    }

    .SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .leftcard .name,
    .SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .leftcard .desig {
        font-size: 24px
    }

    .SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .leftcard .carddesc .text,
    .SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .leftcard .carddesc span {
        font-size: 18px
    }

    .SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .rightcard {
        width: 720px;
        height: 500px;
        right: -28%
    }

    .SSpeaksWelcome .popupBox {
        width: 1050px;
        height: 420px
    }

    .SSpeaksWelcome .popupLeft h2,
    .SSpeaksWelcome .popupLeft h4,
    .SSpeaksWelcome .popupRight {
        font-size: 18px
    }
}

@media (max-width: 480px) {
    .SSpeaksWelcome .heading {
        font-size: 24px
    }

    .SSpeaksWelcome .desc {
        width: 100%;
        font-size: 16px
    }

    .SSpeaksWelcome .wlcmWrapper {
        width: 100%;
        position: relative
    }

    .SSpeaksWelcome .wlcmWrapper .leftArrow,
    .SSpeaksWelcome .wlcmWrapper .rightArrow {
        z-index: 3;
        width: 40px;
        position: absolute;
        height: 40px;
        bottom: -60px
    }

    .SSpeaksWelcome .wlcmWrapper .leftArrow img,
    .SSpeaksWelcome .wlcmWrapper .rightArrow img {
        height: 100%;
        width: 100%;
        object-fit: cover
    }

    .SSpeaksWelcome .wlcmWrapper .leftArrow {
        left: 20px
    }

    .SSpeaksWelcome .wlcmWrapper .rightArrow {
        right: 20px
    }

    .SSpeaksWelcome .wlcmWrapper .infoContainer {
        width: 100%
    }

    .SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard {
        flex-direction: column;
        width: 100%
    }

    .SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .rightcard {
        right: 0;
        height: 228px;
        width: 100%
    }

    .SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .leftcard {
        top: 0;
        height: 302px;
        position: relative;
        padding-top: 20px;
        width: 100%
    }

    .SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .leftcard .top .nameContainer {
        width: 80%
    }

    .SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .leftcard .top .nameContainer .name,
    .SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .leftcard .top .nameContainer .desig {
        font-size: 24px
    }

    .SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .leftcard .top .profile {
        width: 65px;
        height: 65px
    }

    .SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .leftcard .carddesc span,
    .SSpeaksWelcome .wlcmWrapper .infoContainer .wlcmcard .leftcard .text {
        font-size: 16px
    }
}

.feeHero {
    width: 100%;
    height: 61.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(0deg, #000000a6, #000000a6), url(/assets/feeHero-U606SomP.png) #d3d3d3 -.68vw -17.29vh/101.508% 168.791% no-repeat no-repeat
}

.feeHero .navlinks {
    display: flex;
    cursor: pointer
}

.feeHero .navlinks ul {
    position: absolute;
    top: 16vh;
    left: 7%;
    display: flex;
    justify-content: space-between;
    list-style: none;
    gap: 10px
}

.feeHero .navlinks ul li {
    color: var(--color-white)
}

.feeHero .navlinks ul li a {
    font-size: 16px;
    color: var(--color-white);
    text-decoration: none
}

.feeHero .navlinks ul .nav {
    padding: 1px 2px
}

.feeHero .navlinks ul .nav img {
    width: 24px;
    height: 24px
}

.feeHero h1 {
    color: var(--color-white);
    text-align: center;
    text-shadow: 0px .21vw .21vw rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.92vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

@media (max-width: 1536px) {
    .feeHero .navlinks ul {
        top: 18vh
    }
}

@media (max-width: 1440px),
(max-width: 1280px) {
    .feeHero .navlinks ul {
        top: 17vh
    }
}

@media (max-width: 480px) {
    .feeHero {
        height: 30vh
    }

    .feeHero .navlinks ul {
        margin-left: -4%;
        top: 85px;
        gap: 5px
    }

    .feeHero .navlinks ul li,
    .feeHero .navlinks ul li a {
        font-size: 12px
    }

    .feeHero .navlinks ul .nav {
        padding: 0;
        scale: .6
    }

    .feeHero h1 {
        font-size: 24px
    }
}

.feeSub .subsection {
    padding: 56px 374px;
    height: 228px;
    background: var(--color-red);
    box-shadow: 4px 4px 10px #0f0f0f33 inset
}

.feeSub .subsection p {
    color: var(--color-white);
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.feeSub .subsection p span {
    color: #fbc51d;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    text-decoration: underline;
    cursor: pointer
}

@media (max-width: 1536px) {
    .feeSub .subsection {
        padding: 50px 250px;
        height: 200px
    }

    .feeSub .subsection p {
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .feeSub .subsection {
        padding: 40px 180px;
        height: 180px
    }

    .feeSub .subsection p {
        font-size: 20px
    }
}

@media (max-width: 1280px) {
    .feeSub .subsection {
        padding: 30px 120px;
        height: 160px
    }

    .feeSub .subsection p {
        font-size: 18px
    }
}

@media (max-width: 480px) {
    .feeSub .subsection {
        padding: 40px 20px;
        height: auto;
        text-align: center
    }

    .feeSub .subsection p,
    .feeSub .subsection p span {
        font-size: 16px
    }
}

.feeSteps {
    padding: 80px 122px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center
}

.feeSteps h1 {
    color: var(--color-red);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 40px
}

.feeSteps .img-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 30px
}

.feeSteps .img-container .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    box-shadow: 0 4px 12px #0000001a
}

.feeSteps .img-container .card .imgBox {
    border-radius: 10px;
    width: 545px;
    height: 505px
}

.feeSteps .img-container .card .imgBox img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.feeSteps .img-container .card .textBox {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3%;
    width: 547px;
    height: 107px;
    border-radius: 10px 10px 0 0;
    background: #fbc51d;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.feeSteps .instruction {
    font-size: 24px;
    font-weight: 650;
    margin-bottom: 30px
}

.feeSteps .knowMoreBtn {
    display: flex;
    align-items: center;
    gap: 10px;
    border: none;
    border-radius: 10px;
    background: var(--color-red);
    color: var(--color-white);
    font-size: 16px;
    font-weight: 650;
    padding: 18px 26px;
    cursor: pointer
}

.feeSteps .knowMoreBtn img {
    width: 16px;
    height: 16px
}

@media (max-width: 1536px) {
    .feeSteps {
        padding: 70px 100px
    }

    .feeSteps h1 {
        font-size: 50px
    }

    .feeSteps .img-container {
        gap: 30px
    }

    .feeSteps .img-container .card {
        width: 455px
    }

    .feeSteps .img-container .card .imgBox {
        width: 480px;
        height: 450px
    }

    .feeSteps .img-container .card .textBox {
        width: 490px;
        font-size: 22px
    }

    .feeSteps .instruction {
        font-size: 22px
    }

    .feeSteps .knowMoreBtn {
        font-size: 14px;
        padding: 15px 22px
    }

    .feeSteps .knowMoreBtn img {
        width: 14px;
        height: 14px
    }
}

@media (max-width: 1440px) {
    .feeSteps {
        padding: 60px 80px
    }

    .feeSteps h1 {
        font-size: 46px
    }

    .feeSteps .img-container {
        gap: 25px
    }

    .feeSteps .img-container .card {
        width: 410px
    }

    .feeSteps .img-container .card .imgBox {
        width: 420px;
        height: 400px
    }

    .feeSteps .img-container .card .textBox {
        width: 440px;
        font-size: 20px
    }

    .feeSteps .instruction {
        font-size: 20px
    }

    .feeSteps .knowMoreBtn {
        font-size: 14px;
        padding: 14px 20px
    }

    .feeSteps .knowMoreBtn img {
        width: 14px;
        height: 14px
    }
}

@media (max-width: 1280px) {
    .feeSteps {
        padding: 50px 60px
    }

    .feeSteps h1 {
        font-size: 40px
    }

    .feeSteps .img-container {
        gap: 20px
    }

    .feeSteps .img-container .card {
        width: 100%
    }

    .feeSteps .img-container .card .imgBox {
        width: 100%;
        height: 300px
    }

    .feeSteps .img-container .card .textBox {
        width: 100%;
        font-size: 18px
    }

    .feeSteps .instruction {
        font-size: 18px
    }

    .feeSteps .knowMoreBtn {
        font-size: 12px;
        padding: 12px 18px
    }

    .feeSteps .knowMoreBtn img {
        width: 12px;
        height: 12px
    }
}

@media (max-width: 480px) {
    .feeSteps {
        padding: 40px 20px
    }

    .feeSteps h1 {
        font-size: 6vw;
        margin-bottom: 24px
    }

    .feeSteps .img-container {
        flex-direction: column;
        gap: 20px
    }

    .feeSteps .img-container .card .imgBox {
        width: 100%;
        height: auto
    }

    .feeSteps .img-container .card .imgBox img {
        height: auto
    }

    .feeSteps .img-container .card .textBox {
        width: 100%;
        border-radius: 0;
        height: auto;
        font-size: 16px;
        padding: 12px
    }

    .feeSteps .instruction {
        font-size: 16px;
        margin-bottom: 20px
    }

    .feeSteps .knowMoreBtn {
        flex-direction: row;
        justify-content: center;
        font-size: 14px;
        padding: 14px 20px
    }

    .feeSteps .knowMoreBtn img {
        width: 14px;
        height: 14px
    }
}

.feePlans {
    display: flex;
    height: 827px
}

.feePlans .fp-left {
    width: 50%;
    background: #ffe07b;
    padding: 80px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #1e1e1e
}

.feePlans .fp-left h2 {
    color: var(--color-red);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 20px
}

.feePlans .fp-left p {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 24px
}

.feePlans .fp-left ul {
    margin-bottom: 32px
}

.feePlans .fp-left ul li {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 20px;
    list-style: none;
    position: relative;
    padding-left: 20px
}

.feePlans .fp-left ul li:before {
    content: "▶";
    position: absolute;
    left: 0;
    top: 2px;
    color: #000;
    font-size: 12px
}

.feePlans .fp-left ul li strong {
    font-weight: 700
}

.feePlans .fp-left button {
    background: var(--color-red);
    color: var(--color-white);
    font-size: 16px;
    font-weight: 700;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    width: fit-content;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px
}

.feePlans .fp-left button span {
    font-size: 18px
}

.feePlans .fp-left .note {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.feePlans .fp-right {
    width: 50%;
    background: url(/assets/feeplan-C7ZBJfaI.png) center/cover no-repeat
}

@media (max-width: 1536px) {
    .feePlans {
        height: 780px
    }

    .feePlans .fp-left {
        padding: 70px 50px
    }

    .feePlans .fp-left h2 {
        font-size: 50px
    }

    .feePlans .fp-left p,
    .feePlans .fp-left ul li,
    .feePlans .fp-left .note {
        font-size: 22px
    }

    .feePlans .fp-left button {
        font-size: 15px
    }

    .feePlans .fp-left button span {
        font-size: 17px
    }
}

@media (max-width: 1440px) {
    .feePlans {
        height: 720px
    }

    .feePlans .fp-left {
        padding: 60px 45px
    }

    .feePlans .fp-left h2 {
        font-size: 46px
    }

    .feePlans .fp-left p,
    .feePlans .fp-left ul li,
    .feePlans .fp-left .note {
        font-size: 20px
    }

    .feePlans .fp-left button {
        font-size: 14px
    }

    .feePlans .fp-left button span {
        font-size: 16px
    }
}

@media (max-width: 1280px) {
    .feePlans {
        height: auto
    }

    .feePlans .fp-left,
    .feePlans .fp-right {
        width: 100%
    }

    .feePlans .fp-left {
        padding: 50px 30px
    }

    .feePlans .fp-left h2 {
        font-size: 40px
    }

    .feePlans .fp-left p,
    .feePlans .fp-left ul li,
    .feePlans .fp-left .note {
        font-size: 18px
    }

    .feePlans .fp-left button {
        font-size: 13px
    }

    .feePlans .fp-left button span {
        font-size: 15px
    }

    .feePlans .fp-right {
        background-size: cover;
        background-position: center
    }
}

@media (max-width: 480px) {
    .feePlans {
        flex-direction: column;
        height: auto
    }

    .feePlans .fp-left {
        width: 100%;
        padding: 40px 20px
    }

    .feePlans .fp-left h2 {
        font-size: 6vw;
        margin-bottom: 16px
    }

    .feePlans .fp-left p,
    .feePlans .fp-left .note {
        font-size: 16px;
        margin-bottom: 16px
    }

    .feePlans .fp-left ul {
        margin-bottom: 24px
    }

    .feePlans .fp-left ul li {
        font-size: 16px;
        margin-bottom: 16px;
        padding-left: 16px
    }

    .feePlans .fp-left ul li:before {
        font-size: 10px;
        top: 4px
    }

    .feePlans .fp-left button {
        font-size: 14px;
        padding: 10px 16px
    }

    .feePlans .fp-left button span {
        font-size: 16px
    }

    .feePlans .fp-right {
        width: 100%;
        height: 300px;
        background-size: cover;
        background-position: center
    }
}

.feeLoan {
    margin: 80px 0;
    display: flex;
    height: 440px
}

.feeLoan .fl-left {
    width: 50%;
    background: url(/assets/feeLoan-B2-0bxCT.jpeg) #d3d3d3 -197.301px -182.978px/130.42% 187.955% no-repeat
}

.feeLoan .fl-right {
    padding: 93px 100px 93px 93px;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-red);
    text-align: left
}

.feeLoan .fl-right h1 {
    color: #fbc51d;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.feeLoan .fl-right p {
    color: var(--color-white);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-top: 3%
}

.feeLoan .fl-right p span {
    text-decoration: underline;
    cursor: pointer
}

.feeLoan .fl-right h5 {
    margin-top: 3%;
    color: var(--color-white);
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

@media (max-width: 1536px) {
    .feeLoan {
        height: 400px
    }

    .feeLoan .fl-right {
        padding: 80px
    }

    .feeLoan .fl-right h1 {
        font-size: 50px
    }

    .feeLoan .fl-right p,
    .feeLoan .fl-right h5 {
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .feeLoan {
        height: 380px
    }

    .feeLoan .fl-right {
        padding: 70px
    }

    .feeLoan .fl-right h1 {
        font-size: 46px
    }

    .feeLoan .fl-right p,
    .feeLoan .fl-right h5 {
        font-size: 20px
    }
}

@media (max-width: 1280px) {
    .feeLoan {
        height: auto
    }

    .feeLoan .fl-left,
    .feeLoan .fl-right {
        width: 100%
    }

    .feeLoan .fl-left {
        background-size: cover;
        background-position: center
    }

    .feeLoan .fl-right {
        padding: 50px 40px
    }

    .feeLoan .fl-right h1 {
        font-size: 42px
    }

    .feeLoan .fl-right p,
    .feeLoan .fl-right h5 {
        font-size: 18px
    }
}

@media (max-width: 480px) {
    .feeLoan {
        flex-direction: column-reverse;
        height: auto;
        margin: 40px 0
    }

    .feeLoan .fl-left {
        width: 100%;
        height: 240px;
        background-position: center;
        background-size: cover
    }

    .feeLoan .fl-right {
        width: 100%;
        padding: 40px 20px;
        text-align: center
    }

    .feeLoan .fl-right h1 {
        font-size: 6vw;
        margin-bottom: 16px
    }

    .feeLoan .fl-right p,
    .feeLoan .fl-right h5 {
        font-size: 16px;
        margin-top: 12px
    }
}

.feeCTA {
    background: linear-gradient(0deg, #0009, #0009), url(/assets/feeCTA-Ck3_MZWk.png) #d3d3d3 -2.988px -639.009px/100.104% 340.728% no-repeat;
    height: 322px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.feeCTA h1 {
    color: #fbc51d;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.feeCTA p {
    color: var(--color-white);
    width: 46%;
    margin-top: 1.5%;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

@media (max-width: 1536px) {
    .feeCTA p {
        width: 52%;
        margin-top: 2%
    }
}

@media (max-width: 1440px) {
    .feeCTA p {
        width: 58%;
        margin-top: 2.5%
    }
}

@media (max-width: 1280px) {
    .feeCTA p {
        width: 65%;
        margin-top: 3%
    }
}

@media (max-width: 480px) {
    .feeCTA {
        height: auto;
        padding: 40px 20px;
        background: linear-gradient(0deg, #0009, #0009), url(/assets/feeCTA-Ck3_MZWk.png) center/cover no-repeat
    }

    .feeCTA h1 {
        font-size: 7vw;
        text-align: center
    }

    .feeCTA p {
        width: 100%;
        font-size: 16px;
        margin-top: 12px;
        font-weight: 400
    }
}

.eventHero {
    background: linear-gradient(0deg, #000000a6, #000000a6), url(/assets/hero-DKDQyYZP.jfif) #d3d3d3 -.37vw -16.4vh/101.508% 202.425% no-repeat;
    height: 58.23vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.eventHero h1 {
    color: var(--color-white);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.92vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

@media (max-width: 480px) {
    .eventHero {
        height: 257px;
        background: linear-gradient(0deg, #000000a6, #000000a6), url(/assets/hero-DKDQyYZP.jfif) #d3d3d3 50%/cover no-repeat;
        width: 100%
    }

    .eventHero h1 {
        font-size: 24px
    }
}

.eventSubSection {
    border-radius: 2.08vw 2.08vw 0px 0px;
    background: #e23636;
    box-shadow: .21vw .21vw .52vw #0f0f0f33 inset;
    height: 28.28vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    margin-top: -4%;
    z-index: 1
}

.eventSubSection p {
    color: var(--color-white);
    text-align: center;
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    width: 60%
}

@media (max-width: 480px) {
    .eventSubSection {
        height: 255px;
        padding: 2%;
        margin-top: -12%
    }

    .eventSubSection p {
        font-size: 16px;
        width: 100%;
        font-weight: 400
    }
}

.eventMain {
    display: flex;
    flex-direction: column;
    gap: 12.52vh;
    padding: 11.25vh 9.9vw;
    margin-top: 10%
}

.eventMain .eventCard {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 64.47vh;
    border-radius: .52vw;
    overflow: hidden;
    box-shadow: 0 .21vh .52vw #0000001a
}

.eventMain .eventCard .eventLeft {
    width: 50%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative
}

.eventMain .eventCard .eventLeft iframe {
    width: 100%;
    height: 100%;
    border: none
}

.eventMain .eventCard .eventLeft .playButton {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    cursor: pointer
}

.eventMain .eventCard .eventLeft .playButton img {
    width: 3.56vw;
    height: 3.56vw
}

.eventMain .eventCard .eventLeft .videoContainer {
    position: relative;
    width: 100%;
    height: 100%
}

.eventMain .eventCard .eventLeft .closeButton {
    position: absolute;
    top: .52vh;
    right: .52vw;
    background: red;
    color: var(--color-white);
    border: none;
    font-size: 1.04vw;
    width: 1.56vw;
    height: 1.56vw;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .3s
}

.eventMain .eventCard .eventLeft .closeButton:hover {
    background: #000c
}

.eventMain .eventCard .eventRight {
    width: 55%;
    height: 100%;
    padding: 1.56vw;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.eventMain .eventCard .eventRight h2 {
    color: var(--color-red);
    text-shadow: 0px .21vh .21vw rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.92vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 1.04vh
}

.eventMain .eventCard .eventRight p {
    color: var(--GREY-COLOR, #2c2c2c);
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    margin-bottom: 4.08vh
}

.eventMain .eventCard .eventRight .knowMore {
    background: #fbc51d;
    color: #2c2c2c;
    border: none;
    padding: 1.2vh 2.6vw;
    font-size: 1vw;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    cursor: pointer;
    border-radius: .26vw;
    align-self: flex-start;
    transition: background .3s
}

.eventMain .eventCard .eventRight .knowMore:hover {
    background: #e6b800
}

.eventMain .eventCard .eventRight .eventLogo {
    width: 7.21vw;
    height: auto;
    align-self: flex-end;
    margin-top: auto
}

@media screen and (max-width: 480px) {
    .eventMain {
        padding: 5vh 5vw;
        gap: 6vh;
        margin-top: 55%
    }

    .eventMain .eventCard {
        flex-direction: column;
        height: auto
    }

    .eventMain .eventCard .eventLeft {
        width: 100%;
        height: 200px
    }

    .eventMain .eventCard .eventLeft .playButton img {
        width: 12vw;
        height: 12vw
    }

    .eventMain .eventCard .eventLeft .closeButton {
        font-size: 4vw;
        width: 6vw;
        height: 6vw;
        top: 1vh;
        right: 2vw
    }

    .eventMain .eventCard .eventRight {
        width: 100%;
        padding: 4vw;
        align-items: flex-start
    }

    .eventMain .eventCard .eventRight h2 {
        font-size: 6vw;
        margin-bottom: 1.5vh
    }

    .eventMain .eventCard .eventRight p {
        font-size: 4vw;
        margin-bottom: 3vh
    }

    .eventMain .eventCard .eventRight .knowMore {
        font-size: 3.5vw;
        padding: 1.5vh 5vw;
        border-radius: 2vw
    }

    .eventMain .eventCard .eventRight .eventLogo {
        width: 20vw;
        margin-top: 2vh
    }
}

.eventSubPageHero {
    position: relative;
    height: 67vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-white);
    overflow: hidden;
    background-size: cover;
    background-position: center
}

.eventSubPageHero:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #000000a6, #000000a6);
    z-index: 1
}

.eventSubPageHero h1 {
    color: #fbc51d;
    text-align: center;
    text-shadow: 0px .3vw .3vw rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 3.2vw;
    font-style: normal;
    font-weight: 700;
    margin-bottom: 2vh;
    text-transform: uppercase;
    z-index: 2
}

.eventSubPageHero p {
    color: var(--color-white);
    width: 55vw;
    text-align: center;
    font-size: 1.2vw;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    z-index: 2
}

@media (max-width: 480px) {
    .eventSubPageHero {
        height: 320px;
        padding: 1rem
    }

    .eventSubPageHero h1 {
        font-size: 24px
    }

    .eventSubPageHero p {
        font-size: 16px;
        width: 100%;
        font-weight: 500
    }
}

.cmSubSection {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 6vw 6vw 4vw
}

.cmSubSection .hero {
    position: relative;
    width: 100%
}

.cmSubSection .hero .hero-image {
    width: 72vw;
    height: 72.7vh;
    box-shadow: 0 .2vh 1vh #0000001a
}

.cmSubSection .hero .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    cursor: pointer
}

.cmSubSection .hero .play-button img {
    width: 3vw;
    height: auto;
    transition: transform .3s ease-in-out
}

.cmSubSection .hero .play-button:hover img {
    transform: scale(1.1)
}

.cmSubSection .hero .video-container {
    position: relative;
    width: 100%
}

.cmSubSection .hero .video-container .video-frame {
    width: 100%;
    height: 72.7vh;
    border-radius: 1vh
}

.cmSubSection .hero .video-container .close-button {
    position: absolute;
    top: 1vh;
    right: 1vh;
    background: var(--color-white)c;
    border: none;
    border-radius: 50%;
    width: 2vw;
    height: 2vw;
    font-size: 1.2vw;
    font-weight: 700;
    cursor: pointer;
    transition: background .3s ease-in-out
}

.cmSubSection .hero .video-container .close-button:hover {
    background: var(--color-white)
}

.cmSubSection .content {
    width: 100%;
    max-width: 52vw;
    margin-top: 2vh
}

.cmSubSection .content h2 {
    color: var(--color-red);
    text-shadow: 0px .2vh .2vh rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.9vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 1vh
}

.cmSubSection .content p {
    text-align: center;
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 1vh
}

.cmSubSection .cta {
    margin-top: 2vh
}

.cmSubSection .cta p,
.cmSubSection .cta .contact {
    text-align: center;
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.cmSubSection .cta .join-button {
    border-radius: 1vh;
    border: .1vw solid var(--color-red);
    background: var(--color-red);
    margin: 3vh 0;
    padding: 1.5vh 2vw;
    color: var(--color-white);
    font-size: 1vw;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    cursor: pointer;
    border-radius: .5vh;
    transition: background .3s ease-in-out
}

.cmSubSection .cta .join-button:hover {
    background: #f3f3f3;
    color: #333
}

.cmSubSection .cta .contact {
    margin-top: 1vh;
    font-weight: 700
}

@media screen and (max-width: 480px) {
    .cmSubSection {
        padding: 5vw 4vw
    }

    .cmSubSection .hero .hero-image {
        width: 100%;
        height: auto;
        box-shadow: 0 2px 8px #0000001a
    }

    .cmSubSection .hero .play-button img {
        width: 12vw
    }

    .cmSubSection .hero .video-container .video-frame {
        width: 100%;
        height: auto
    }

    .cmSubSection .hero .video-container .close-button {
        width: 8vw;
        height: 8vw;
        font-size: 4vw;
        top: 2vw;
        right: 2vw
    }

    .cmSubSection .content {
        max-width: 100%;
        margin-top: 3vh
    }

    .cmSubSection .content h2 {
        font-size: 6vw;
        margin-bottom: 1.5vh
    }

    .cmSubSection .content p {
        font-size: 4vw;
        margin-bottom: 2vh
    }

    .cmSubSection .cta {
        margin-top: 2vh
    }

    .cmSubSection .cta p,
    .cmSubSection .cta .contact {
        font-size: 4vw;
        text-align: center
    }

    .cmSubSection .cta .join-button {
        font-size: 3.5vw;
        padding: 1.5vh 5vw;
        margin: 2vh 0;
        border-radius: 1.5vh
    }
}

.cnCTA {
    padding: 0 6.25vw
}

.cnCTA .cnCTA-container {
    padding: 3.1vw 0;
    background: linear-gradient(0deg, #000000a6, #000000a6), url(/assets/cmCTA-BTYd1owQ.jpeg) #d3d3d3 -.37vw -16.4vh/101.508% 202.425% no-repeat;
    width: 87.5vw;
    height: 37vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.cnCTA .cnCTA-container p {
    color: var(--color-white);
    text-align: center;
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    width: 55%;
    margin-bottom: 2vh
}

.cnCTA .cnCTA-container .join-button {
    border-radius: 1vh;
    border: .1vw solid var(--color-red);
    background: var(--color-red);
    margin: 3vh 0;
    padding: 1.5vh 2vw;
    color: var(--color-white);
    font-size: 1vw;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    cursor: pointer;
    border-radius: .5vh;
    transition: background .3s ease-in-out
}

.cnCTA .cnCTA-container .join-button:hover {
    background: #f3f3f3;
    border: none
}

@media screen and (max-width: 480px) {
    .cnCTA {
        padding: 0 4vw
    }

    .cnCTA .cnCTA-container {
        padding: 6vw 0;
        width: 100%;
        height: auto;
        background: linear-gradient(0deg, #000000a6, #000000a6), url(/assets/cmCTA-BTYd1owQ.jpeg) #d3d3d3 center/cover no-repeat;
        background-position: center;
        background-size: cover
    }

    .cnCTA .cnCTA-container p {
        font-size: 4vw;
        width: 90%;
        margin-bottom: 2.5vh;
        font-weight: 500
    }

    .cnCTA .cnCTA-container .join-button {
        font-size: 3.5vw;
        padding: 1.5vh 6vw;
        margin: 2vh 0;
        border-radius: 1.2vh
    }
}

.nsmSubSection {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 6vw 6vw 4vw
}

.nsmSubSection .hero {
    position: relative;
    width: 100%
}

.nsmSubSection .hero .hero-image {
    width: 72vw;
    height: 72.7vh;
    box-shadow: 0 .2vh 1vh #0000001a
}

.nsmSubSection .hero .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    cursor: pointer
}

.nsmSubSection .hero .play-button img {
    width: 3vw;
    height: auto;
    transition: transform .3s ease-in-out
}

.nsmSubSection .hero .play-button:hover img {
    transform: scale(1.1)
}

.nsmSubSection .hero .video-container {
    position: relative;
    width: 100%
}

.nsmSubSection .hero .video-container .video-frame {
    width: 100%;
    height: 72.7vh;
    border-radius: 1vh
}

.nsmSubSection .hero .video-container .close-button {
    position: absolute;
    top: 1vh;
    right: 1vh;
    background: var(--color-white)c;
    border: none;
    border-radius: 50%;
    width: 2vw;
    height: 2vw;
    font-size: 1.2vw;
    font-weight: 700;
    cursor: pointer;
    transition: background .3s ease-in-out
}

.nsmSubSection .hero .video-container .close-button:hover {
    background: var(--color-white)
}

.nsmSubSection .content {
    width: 100%;
    max-width: 60vw;
    margin-top: 2vh
}

.nsmSubSection .content h2 {
    margin: 4vh 4vh 1vh;
    color: var(--color-red);
    text-shadow: 0px .2vh .2vh rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.9vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.nsmSubSection .content .head {
    width: 55vw;
    text-align: center;
    font-size: 1.3vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 4vh
}

.nsmSubSection .content .subHead {
    margin: auto;
    font-size: 1.3vw;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    width: 60%
}

.nsmSubSection .content .subHead span {
    text-decoration: underline;
    cursor: pointer
}

@media screen and (max-width: 480px) {
    .nsmSubSection {
        padding: 8vw 4vw 6vw
    }

    .nsmSubSection .hero .hero-image {
        width: 90vw;
        height: 30vh
    }

    .nsmSubSection .hero .play-button img {
        width: 10vw
    }

    .nsmSubSection .hero .video-container .video-frame {
        height: 30vh
    }

    .nsmSubSection .hero .video-container .close-button {
        width: 6vw;
        height: 6vw;
        font-size: 4vw;
        top: 2vw;
        right: 2vw
    }

    .nsmSubSection .content {
        max-width: 100%;
        margin-top: 4vh
    }

    .nsmSubSection .content h2 {
        font-size: 6vw;
        margin: 3vh 0 1vh
    }

    .nsmSubSection .content .head {
        font-size: 4vw;
        width: 100%;
        margin: 2vh auto;
        padding: 0 2vw
    }

    .nsmSubSection .content .subHead {
        font-size: 4vw;
        width: 90%;
        margin-top: 2vh
    }

    .nsmSubSection .content .subHead span {
        text-decoration: underline
    }
}

.festSubSection {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 6vw 6vw 0vw
}

.festSubSection .hero {
    position: relative;
    width: 100%
}

.festSubSection .hero .hero-image {
    width: 72vw;
    height: 72.7vh;
    box-shadow: 0 .2vh 1vh #0000001a
}

.festSubSection .hero .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    cursor: pointer
}

.festSubSection .hero .play-button img {
    width: 3vw;
    height: auto;
    transition: transform .3s ease-in-out
}

.festSubSection .hero .play-button:hover img {
    transform: scale(1.1)
}

.festSubSection .hero .video-container {
    position: relative;
    width: 100%
}

.festSubSection .hero .video-container .video-frame {
    width: 100%;
    height: 72.7vh;
    border-radius: 1vh
}

.festSubSection .hero .video-container .close-button {
    position: absolute;
    top: 1vh;
    right: 1vh;
    background: var(--color-white)c;
    border: none;
    border-radius: 50%;
    width: 2vw;
    height: 2vw;
    font-size: 1.2vw;
    font-weight: 700;
    cursor: pointer;
    transition: background .3s ease-in-out
}

.festSubSection .hero .video-container .close-button:hover {
    background: var(--color-white)
}

.festSubSection .content {
    width: 100%;
    max-width: 56vw;
    margin-top: 2vh
}

.festSubSection .content h2 {
    color: var(--color-red);
    text-shadow: 0px .2vh .2vh rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.9vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 1vh
}

.festSubSection .content p {
    text-align: center;
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 1vh
}

.festSubSection .content p span {
    font-weight: 650
}

.festSubSection .cta {
    margin-top: 2vh
}

.festSubSection .cta .join-button {
    border-radius: 1vh;
    border: .1vw solid var(--color-red);
    background: var(--color-red);
    margin: 3vh 0;
    padding: 1.5vh 2vw;
    color: var(--color-white);
    font-size: 1vw;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    cursor: pointer;
    border-radius: .5vh;
    transition: background .3s ease-in-out
}

.festSubSection .cta .join-button:hover {
    background: #f3f3f3;
    color: #333
}

@media screen and (max-width: 480px) {
    .festSubSection {
        padding: 8vw 4vw 4vw
    }

    .festSubSection .hero .hero-image {
        width: 90vw;
        height: 30vh
    }

    .festSubSection .hero .play-button img {
        width: 10vw
    }

    .festSubSection .hero .video-container .video-frame {
        height: 30vh
    }

    .festSubSection .hero .video-container .close-button {
        width: 6vw;
        height: 6vw;
        font-size: 4vw;
        top: 2vw;
        right: 2vw
    }

    .festSubSection .content {
        max-width: 100%;
        margin-top: 3vh
    }

    .festSubSection .content h2 {
        font-size: 6vw;
        margin-bottom: 2vh
    }

    .festSubSection .content p {
        font-size: 4vw;
        margin-bottom: 2vh;
        padding: 0 2vw
    }

    .festSubSection .content p span {
        font-weight: 650
    }

    .festSubSection .cta {
        margin-top: 4vh
    }

    .festSubSection .cta .join-button {
        font-size: 4vw;
        padding: 2vh 6vw;
        border: 1px solid var(--color-red);
        border-radius: 1.2vh
    }
}

.cyberSubSection {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 6vw 6vw 0vw
}

.cyberSubSection .hero {
    position: relative;
    width: 100%
}

.cyberSubSection .hero .hero-image {
    width: 72vw;
    height: 72.7vh;
    box-shadow: 0 .2vh 1vh #0000001a
}

.cyberSubSection .hero .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    cursor: pointer
}

.cyberSubSection .hero .play-button img {
    width: 3vw;
    height: auto;
    transition: transform .3s ease-in-out
}

.cyberSubSection .hero .play-button:hover img {
    transform: scale(1.1)
}

.cyberSubSection .hero .video-container {
    position: relative;
    width: 100%
}

.cyberSubSection .hero .video-container .video-frame {
    width: 100%;
    height: 72.7vh;
    border-radius: 1vh
}

.cyberSubSection .hero .video-container .close-button {
    position: absolute;
    top: 1vh;
    right: 1vh;
    background: var(--color-white)c;
    border: none;
    border-radius: 50%;
    width: 2vw;
    height: 2vw;
    font-size: 1.2vw;
    font-weight: 700;
    cursor: pointer;
    transition: background .3s ease-in-out
}

.cyberSubSection .hero .video-container .close-button:hover {
    background: var(--color-white)
}

.cyberSubSection .content {
    width: 100%;
    max-width: 56vw;
    margin-top: 2vh
}

.cyberSubSection .content h2 {
    color: var(--color-red);
    text-shadow: 0px .2vh .2vh rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.9vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 1vh
}

.cyberSubSection .content p {
    text-align: center;
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 4vh
}

.cyberSubSection .content p span {
    font-weight: 650
}

.cyberSubSection .cta {
    margin-top: 2vh
}

.cyberSubSection .cta .join-button {
    border-radius: 1vh;
    border: .1vw solid var(--color-red);
    background: var(--color-red);
    margin: 3vh 0;
    padding: 1.5vh 2vw;
    color: var(--color-white);
    font-size: 1vw;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    cursor: pointer;
    border-radius: .5vh;
    transition: background .3s ease-in-out
}

.cyberSubSection .cta .join-button:hover {
    background: #f3f3f3;
    color: #333
}

@media screen and (max-width: 480px) {
    .cyberSubSection {
        padding: 8vw 4vw 4vw
    }

    .cyberSubSection .hero .hero-image {
        width: 90vw;
        height: 30vh
    }

    .cyberSubSection .hero .play-button img {
        width: 10vw
    }

    .cyberSubSection .hero .video-container .video-frame {
        height: 30vh
    }

    .cyberSubSection .hero .video-container .close-button {
        width: 6vw;
        height: 6vw;
        font-size: 4vw;
        top: 2vw;
        right: 2vw
    }

    .cyberSubSection .content {
        max-width: 100%;
        margin-top: 3vh
    }

    .cyberSubSection .content h2 {
        font-size: 6vw;
        margin-bottom: 2vh
    }

    .cyberSubSection .content p {
        font-size: 4vw;
        margin-bottom: 3vh;
        padding: 0 2vw
    }

    .cyberSubSection .content p span {
        font-weight: 650
    }

    .cyberSubSection .cta {
        margin-top: 4vh
    }

    .cyberSubSection .cta .join-button {
        font-size: 4vw;
        padding: 2vh 6vw;
        border-radius: 1.2vh;
        border: 1px solid var(--color-red)
    }
}

.pSubSection {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 6vw 6vw 0vw
}

.pSubSection .hero {
    position: relative;
    width: 100%
}

.pSubSection .hero .hero-image {
    width: 72vw;
    height: 72.7vh;
    box-shadow: 0 .2vh 1vh #0000001a
}

.pSubSection .hero .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    cursor: pointer
}

.pSubSection .hero .play-button img {
    width: 3vw;
    height: auto;
    transition: transform .3s ease-in-out
}

.pSubSection .hero .play-button:hover img {
    transform: scale(1.1)
}

.pSubSection .hero .video-container {
    position: relative;
    width: 100%
}

.pSubSection .hero .video-container .video-frame {
    width: 100%;
    height: 72.7vh;
    border-radius: 1vh
}

.pSubSection .hero .video-container .close-button {
    position: absolute;
    top: 1vh;
    right: 1vh;
    background: var(--color-white)c;
    border: none;
    border-radius: 50%;
    width: 2vw;
    height: 2vw;
    font-size: 1.2vw;
    font-weight: 700;
    cursor: pointer;
    transition: background .3s ease-in-out
}

.pSubSection .hero .video-container .close-button:hover {
    background: var(--color-white)
}

.pSubSection .content {
    width: 100%;
    max-width: 55vw;
    margin-top: 2vh
}

.pSubSection .content h2 {
    color: var(--color-red);
    text-shadow: 0px .2vh .2vh rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.9vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 1vh
}

.pSubSection .content p {
    text-align: center;
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 1vh
}

.pSubSection .content p span {
    font-weight: 650
}

.pSubSection .cta {
    margin-top: 2vh
}

.pSubSection .cta .join-button {
    border-radius: 1vh;
    border: .1vw solid var(--color-red);
    background: var(--color-red);
    margin: 3vh 0;
    padding: 1.5vh 2vw;
    color: var(--color-white);
    font-size: 1vw;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    cursor: pointer;
    border-radius: .5vh;
    transition: background .3s ease-in-out
}

.pSubSection .cta .join-button:hover {
    background: #f3f3f3;
    color: #333
}

@media screen and (max-width: 480px) {
    .pSubSection {
        padding: 8vw 4vw 4vw
    }

    .pSubSection .hero .hero-image {
        width: 90vw;
        height: 30vh
    }

    .pSubSection .hero .play-button img {
        width: 10vw
    }

    .pSubSection .hero .video-container .video-frame {
        height: 30vh
    }

    .pSubSection .hero .video-container .close-button {
        width: 6vw;
        height: 6vw;
        font-size: 4vw;
        top: 2vw;
        right: 2vw
    }

    .pSubSection .content {
        max-width: 100%;
        margin-top: 3vh
    }

    .pSubSection .content h2 {
        font-size: 6vw;
        margin-bottom: 2vh
    }

    .pSubSection .content p {
        font-size: 4vw;
        margin-bottom: 3vh;
        padding: 0 2vw
    }

    .pSubSection .content p span {
        font-weight: 650
    }

    .pSubSection .cta {
        margin-top: 4vh
    }

    .pSubSection .cta .join-button {
        font-size: 4vw;
        padding: 2vh 6vw;
        border-radius: 1.2vh;
        border: 1px solid var(--color-red)
    }
}

.pHighlights {
    background: #fbc51d33;
    text-align: center;
    padding: 3rem 5vw
}

.pHighlights .title {
    color: var(--color-red);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.95vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: .5rem
}

.pHighlights .subtitle {
    color: var(--GREY-COLOR, #2c2c2c);
    text-align: center;
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    margin-bottom: 2rem
}

.pHighlights .cards {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
    margin: 0 auto
}

.pHighlights .cards .card {
    border-radius: 2.08rem 2.08rem .52rem .52rem;
    background: var(--color-red);
    padding: .6rem 0;
    width: 28.6vw;
    height: 28vw;
    text-align: center;
    transition: transform .3s ease-in-out
}

.pHighlights .cards .card:hover {
    transform: scale(1.05)
}

.pHighlights .cards .card .card-image {
    width: 27.5vw;
    height: 20.7vw;
    border-radius: 2.08rem
}

.pHighlights .cards .card .card-text {
    color: var(--color-white);
    text-align: center;
    font-size: 1.25;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    margin-top: .5rem
}

@media screen and (max-width: 480px) {
    .pHighlights {
        padding: 2rem 4vw
    }

    .pHighlights .title {
        font-size: 6vw;
        margin-bottom: 1rem
    }

    .pHighlights .subtitle {
        font-size: 4.2vw;
        margin-bottom: 1.5rem
    }

    .pHighlights .cards {
        flex-direction: column;
        align-items: center;
        gap: 2rem
    }

    .pHighlights .cards .card {
        width: 80vw;
        height: auto;
        padding: .5rem 0;
        border-radius: 6vw 6vw 3vw 3vw
    }

    .pHighlights .cards .card .card-image {
        width: 76vw;
        height: auto;
        border-radius: 5vw
    }

    .pHighlights .cards .card .card-text {
        font-size: 4vw;
        font-weight: 500;
        margin-top: 1rem;
        padding: 0 1vw
    }
}

.liveCTA {
    padding: 0 6.25vw;
    margin-top: 5%
}

.liveCTA .cnCTA-container {
    padding: 3.1vw 0;
    background: linear-gradient(0deg, #000000a6, #000000a6), url(/assets/cmCTA-BTYd1owQ.jpeg) #d3d3d3 -.37vw -16.4vh/101.508% 202.425% no-repeat;
    width: 87.5vw;
    height: 37vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.liveCTA .cnCTA-container h1 {
    color: #fbc51d;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.9vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.liveCTA .cnCTA-container p {
    color: var(--color-white);
    text-align: center;
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    width: 55%;
    margin-bottom: 2vh
}

.liveCTA .cnCTA-container .join-button {
    border-radius: 1vh;
    border: .1vw solid var(--color-red);
    background: var(--color-red);
    margin: 3vh 0;
    padding: 1.5vh 3vw;
    color: var(--color-white);
    font-size: 1vw;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    cursor: pointer;
    border-radius: .5vh;
    transition: background .3s ease-in-out
}

.liveCTA .cnCTA-container .join-button img {
    width: 16px;
    height: 16px
}

.liveCTA .cnCTA-container .join-button:hover {
    background: #f3f3f3;
    border: none
}

@media screen and (max-width: 480px) {
    .liveCTA {
        padding: 0 4vw;
        margin-top: 8%
    }

    .liveCTA .cnCTA-container {
        padding: 6vw 0;
        width: 92vw;
        height: auto;
        background: linear-gradient(0deg, #000000a6, #000000a6), url(/assets/cmCTA-BTYd1owQ.jpeg) #d3d3d3 center/cover no-repeat
    }

    .liveCTA .cnCTA-container h1 {
        font-size: 6vw;
        text-align: center;
        margin-bottom: 2vh
    }

    .liveCTA .cnCTA-container p {
        width: 85%;
        font-size: 4vw;
        margin-bottom: 2.5vh
    }

    .liveCTA .cnCTA-container .join-button {
        font-size: 4vw;
        padding: 1.5vh 6vw;
        margin: 2vh 0
    }

    .liveCTA .cnCTA-container .join-button img {
        width: 14px;
        height: 14px
    }
}

.liveHighlights {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 4vw 15vw 0
}

.liveHighlights h1 {
    color: var(--color-red);
    text-shadow: 0px .2vw .2vw rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.9vw;
    font-weight: 400;
    text-transform: uppercase
}

.liveHighlights p {
    font-size: 1.25vw;
    font-weight: 650
}

.liveHighlights .highlights-container {
    margin-top: 4%;
    display: flex;
    flex-direction: column;
    row-gap: 2vw;
    width: 100%
}

.liveHighlights .highlights-container .highlight-card {
    column-gap: 1vw;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.liveHighlights .highlights-container .highlight-card .text-container,
.liveHighlights .highlights-container .highlight-card .image-container {
    flex: 1;
    display: flex;
    border-radius: 1vw
}

.liveHighlights .highlights-container .highlight-card .image-container img {
    width: 33vw;
    height: 23vw;
    border-radius: 1vw
}

.liveHighlights .highlights-container .highlight-card .text-container {
    padding: 2.5vw 3vw;
    text-align: left;
    display: flex;
    width: 33vw;
    height: 23vw;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    background: #fbc51d33
}

.liveHighlights .highlights-container .highlight-card .text-container:nth-child(odd) {
    background: #d4371b26
}

.liveHighlights .highlights-container .highlight-card .text-container h2 {
    color: var(--color-red);
    font-family: 'Sora-SemiBold';
    font-size: 1.7vw;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: .5vw;
    text-align: left
}

.liveHighlights .highlights-container .highlight-card .text-container p {
    font-size: 1.25vw;
    font-weight: 650
}

.liveHighlights .ftext {
    text-align: center;
    font-size: 1.25vw;
    font-weight: 650;
    padding-top: 2%
}

@media screen and (max-width: 480px) {
    .liveHighlights {
        padding: 6vw 5vw 0;
        flex-direction: column;
        align-items: center;
        justify-content: center
    }

    .liveHighlights h1 {
        font-size: 6vw;
        text-align: center;
        text-shadow: 0 1.2vw 1.2vw rgba(0, 0, 0, .3)
    }

    .liveHighlights p {
        font-size: 4vw;
        text-align: center
    }

    .liveHighlights .highlights-container {
        margin-top: 6vw;
        row-gap: 5vw
    }

    .liveHighlights .highlights-container .highlight-card {
        flex-direction: column
    }

    .liveHighlights .highlights-container .highlight-card .image-container {
        order: 1;
        width: 100%;
        height: auto
    }

    .liveHighlights .highlights-container .highlight-card .image-container img {
        width: 100%;
        height: auto
    }

    .liveHighlights .highlights-container .highlight-card .text-container {
        order: 2;
        width: 100%;
        padding: 6vw 5vw;
        background: #fbc51d33
    }

    .liveHighlights .highlights-container .highlight-card .text-container:nth-child(odd) {
        background: #d4371b26
    }

    .liveHighlights .highlights-container .highlight-card .text-container h2 {
        font-size: 5vw;
        margin-bottom: 2vw;
        text-align: left
    }

    .liveHighlights .highlights-container .highlight-card .text-container p {
        font-size: 4vw;
        text-align: left
    }

    .liveHighlights .ftext {
        font-size: 4vw;
        padding-top: 4vw;
        text-align: center
    }
}

.kSubSection {
    padding: 4vw 6.25vw 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center
}

.kSubSection h1 {
    color: var(--color-red);
    text-shadow: 0px .2vw .2vw rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.9vw;
    font-weight: 400;
    text-transform: uppercase
}

.kSubSection p {
    font-size: 1.25vw;
    font-weight: 500;
    width: 62%;
    padding-top: 2vh
}

.kSubSection .kHighlights {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5vw;
    margin-top: 2.5vw;
    width: 100%
}

.kSubSection .kHighlights .highlight {
    position: relative;
    overflow: hidden
}

.kSubSection .kHighlights .highlight img {
    width: 43.2vw;
    height: 26.2vw
}

.kSubSection .kHighlights .highlight .highlight-text {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    width: 43.2vw;
    height: 5.5vw;
    background: #fbc51d;
    text-align: center;
    font-size: 1.25vw;
    font-weight: 650;
    line-height: normal
}

@media screen and (max-width: 480px) {
    .kSubSection {
        padding: 6vw 5vw 0;
        text-align: center
    }

    .kSubSection h1 {
        font-size: 6vw;
        text-shadow: 0 1.2vw 1.2vw rgba(0, 0, 0, .3)
    }

    .kSubSection p {
        font-size: 4vw;
        width: 100%;
        padding-top: 3vw
    }

    .kSubSection .kHighlights {
        display: flex;
        flex-direction: column;
        gap: 4vw;
        margin-top: 5vw;
        width: 100%
    }

    .kSubSection .kHighlights .highlight {
        position: relative
    }

    .kSubSection .kHighlights .highlight img {
        width: 100%;
        height: auto
    }

    .kSubSection .kHighlights .highlight .highlight-text {
        width: 100%;
        height: auto;
        padding: 4vw 2vw;
        font-size: 4vw;
        font-weight: 650;
        background: #fbc51d
    }
}

.acSubSection {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 6vw 6vw 4vw
}

.acSubSection .hero {
    position: relative;
    width: 100%
}

.acSubSection .hero .hero-image {
    width: 72vw;
    height: 72.7vh;
    box-shadow: 0 .2vh 1vh #0000001a
}

.acSubSection .hero .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    cursor: pointer
}

.acSubSection .hero .play-button img {
    width: 3vw;
    height: auto;
    transition: transform .3s ease-in-out
}

.acSubSection .hero .play-button:hover img {
    transform: scale(1.1)
}

.acSubSection .hero .video-container {
    position: relative;
    width: 100%
}

.acSubSection .hero .video-container .video-frame {
    width: 100%;
    height: 72.7vh;
    border-radius: 1vh
}

.acSubSection .hero .video-container .close-button {
    position: absolute;
    top: 1vh;
    right: 1vh;
    background: var(--color-white)c;
    border: none;
    border-radius: 50%;
    width: 2vw;
    height: 2vw;
    font-size: 1.2vw;
    font-weight: 700;
    cursor: pointer;
    transition: background .3s ease-in-out
}

.acSubSection .hero .video-container .close-button:hover {
    background: var(--color-white)
}

.acSubSection .content {
    width: 100%;
    max-width: 60vw;
    margin-top: 2vh
}

.acSubSection .content p {
    text-align: center;
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    margin-bottom: 1vh
}

@media screen and (max-width: 480px) {
    .acSubSection {
        padding: 6vw 5vw 4vw;
        text-align: center
    }

    .acSubSection .hero {
        width: 100%
    }

    .acSubSection .hero .hero-image {
        width: 100%;
        height: auto;
        box-shadow: 0 .5vw 2.5vw #00000026
    }

    .acSubSection .hero .play-button {
        top: 50%;
        left: 50%
    }

    .acSubSection .hero .play-button img {
        width: 10vw
    }

    .acSubSection .hero .video-container .video-frame {
        height: 50vh;
        border-radius: 2vw
    }

    .acSubSection .hero .video-container .close-button {
        top: 2vw;
        right: 2vw;
        width: 7vw;
        height: 7vw;
        font-size: 4vw
    }

    .acSubSection .content {
        max-width: 100%;
        margin-top: 5vw
    }

    .acSubSection .content p {
        font-size: 4.2vw;
        font-weight: 600;
        margin-bottom: 3vw;
        padding: 0 2vw
    }
}

.acHighlights {
    padding: 20px 13.85vw;
    text-align: center
}

.acHighlights h1 {
    color: var(--color-red);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.9vw;
    font-weight: 400;
    text-transform: uppercase
}

.acHighlights .ac-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2vw;
    justify-content: center;
    padding-top: 2vw
}

.acHighlights .ac-container .highlight {
    position: relative;
    overflow: hidden;
    cursor: pointer
}

.acHighlights .ac-container .highlight img {
    width: 33.02vw;
    height: 32.08vw;
    border-radius: 3.39vw
}

.acHighlights .ac-container .highlight:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 65px;
    background: linear-gradient(0deg, #0009, #0000);
    transition: opacity .3s ease;
    pointer-events: none
}

.acHighlights .ac-container .highlight .highlight-text {
    position: absolute;
    bottom: 0;
    width: 100%;
    color: var(--color-white);
    font-family: 'Sora-SemiBold';
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    padding: 10px;
    border-radius: 0 0 20px 20px;
    transition: opacity .3s ease
}

.acHighlights .ac-container .highlight .hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-red);
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: left;
    padding: 20px;
    border-radius: 65px;
    opacity: 0;
    transition: opacity .3s ease
}

.acHighlights .ac-container .highlight .hover-overlay ul {
    list-style: none;
    padding: 0
}

.acHighlights .ac-container .highlight .hover-overlay li {
    font-size: 1vw;
    margin-bottom: 10px;
    position: relative;
    padding-left: 15px
}

.acHighlights .ac-container .highlight .hover-overlay li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-white)
}

.acHighlights .ac-container .highlight:hover img,
.acHighlights .ac-container .highlight:hover .highlight-text {
    opacity: 0
}

.acHighlights .ac-container .highlight:hover .hover-overlay {
    opacity: 1
}

.acHighlights .ac-container:has(.highlight:nth-child(5)) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center
}

@media screen and (max-width: 480px) {
    .acHighlights {
        padding: 5vw
    }

    .acHighlights h1 {
        font-size: 6vw;
        text-shadow: 0px 1vw 1vw rgba(0, 0, 0, .3)
    }

    .acHighlights .ac-container {
        display: flex;
        flex-direction: column;
        gap: 5vw;
        padding-top: 5vw
    }

    .acHighlights .ac-container .highlight {
        position: relative
    }

    .acHighlights .ac-container .highlight img {
        width: 100%;
        height: auto;
        border-radius: 6vw
    }

    .acHighlights .ac-container .highlight:before {
        border-radius: 6vw
    }

    .acHighlights .ac-container .highlight .highlight-text {
        font-size: 5vw;
        padding: 3vw 2vw;
        border-radius: 0 0 4vw 4vw
    }

    .acHighlights .ac-container .highlight .hover-overlay {
        border-radius: 6vw;
        padding: 5vw 4vw
    }

    .acHighlights .ac-container .highlight .hover-overlay li {
        font-size: 3.5vw;
        margin-bottom: 3vw;
        padding-left: 4vw
    }

    .acHighlights .ac-container .highlight .hover-overlay li:before {
        font-size: 4vw;
        left: 0
    }

    .acHighlights .ac-container:has(.highlight:nth-child(5)) {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center
    }
}

.animationCTA {
    padding: 0 6.25vw;
    margin-top: 5%
}

.animationCTA .cnCTA-container {
    padding: 3.1vw 0;
    background: linear-gradient(0deg, #000000a6, #000000a6), url(/assets/cmCTA-BTYd1owQ.jpeg) #d3d3d3 -.37vw -16.4vh/101.508% 202.425% no-repeat;
    width: 87.5vw;
    height: 37vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.animationCTA .cnCTA-container h1 {
    color: #fbc51d;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.9vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.animationCTA .cnCTA-container .join-button {
    border-radius: 1vh;
    border: .1vw solid var(--color-red);
    background: var(--color-red);
    margin: 3vh 0;
    padding: 1.5vh 3vw;
    color: var(--color-white);
    font-size: 1vw;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    cursor: pointer;
    border-radius: .5vh;
    transition: background .3s ease-in-out
}

.animationCTA .cnCTA-container .join-button img {
    width: 16px;
    height: 16px
}

.animationCTA .cnCTA-container .join-button:hover {
    background: #f3f3f3;
    border: none
}

@media screen and (max-width: 480px) {
    .animationCTA {
        padding: 0 4vw;
        margin-top: 8vw
    }

    .animationCTA .cnCTA-container {
        padding: 6vw 4vw;
        width: 100%;
        height: auto;
        background: linear-gradient(0deg, #000000a6, #000000a6), url(/assets/cmCTA-BTYd1owQ.jpeg) #d3d3d3 center/cover no-repeat
    }

    .animationCTA .cnCTA-container h1 {
        font-size: 5vw;
        line-height: 1.2;
        text-align: center
    }

    .animationCTA .cnCTA-container .join-button {
        margin: 5vw 0 0;
        padding: 2.5vw 6vw;
        font-size: 3vw;
        border-radius: 1.5vw
    }

    .animationCTA .cnCTA-container .join-button img {
        width: 12px;
        height: 12px
    }
}

.admissionEnquiry .top {
    background: linear-gradient(0deg, #0006, #0006), url(/assets/admissionHero-04JJ54N6.jpeg) #d3d3d3 -28.949px -252.858px/102.057% 252.614% no-repeat;
    height: 506px;
    margin-left: -1%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.admissionEnquiry .top .navlinks {
    display: flex;
    cursor: pointer
}

.admissionEnquiry .top .navlinks ul {
    position: absolute;
    top: 16vh;
    left: 7%;
    display: flex;
    justify-content: space-between;
    list-style: none;
    gap: 10px
}

.admissionEnquiry .top .navlinks ul li {
    color: var(--color-white)
}

.admissionEnquiry .top .navlinks ul li a {
    font-size: 16px;
    color: var(--color-white);
    text-decoration: none
}

.admissionEnquiry .top .navlinks ul .nav {
    padding: 1px 2px
}

.admissionEnquiry .top .navlinks ul .nav img {
    width: 24px;
    height: 24px
}

.admissionEnquiry .top .heading {
    width: 45%;
    flex-shrink: 0
}

.admissionEnquiry .top .heading h1 {
    color: var(--color-white);
    text-align: center;
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.admissionEnquiry .top .heading p {
    color: var(--color-white);
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

@media (max-width: 1536px) {
    .admissionEnquiry .top {
        height: 480px;
        margin-left: -2%;
        background-size: cover
    }

    .admissionEnquiry .top .navlinks ul {
        top: 18vh;
        left: 5%;
        gap: 8px
    }

    .admissionEnquiry .top .navlinks ul li a {
        font-size: 18px
    }

    .admissionEnquiry .top .navlinks ul .nav {
        padding: 4px 2px
    }

    .admissionEnquiry .top .navlinks ul .nav img {
        width: 18px;
        height: 18px
    }

    .admissionEnquiry .top .heading {
        width: 50%
    }

    .admissionEnquiry .top .heading h1 {
        font-size: 52px;
        padding-top: 8%
    }
}

@media (max-width: 1440px) {
    .admissionEnquiry .top {
        height: 460px;
        margin-left: -3%;
        background-size: cover
    }

    .admissionEnquiry .top .navlinks ul {
        top: 20vh;
        left: 4%;
        gap: 7px
    }

    .admissionEnquiry .top .navlinks ul li a {
        font-size: 17px
    }

    .admissionEnquiry .top .navlinks ul .nav {
        padding: 3px 2px
    }

    .admissionEnquiry .top .navlinks ul .nav img {
        width: 16px;
        height: 16px
    }

    .admissionEnquiry .top .heading {
        width: 55%
    }

    .admissionEnquiry .top .heading h1 {
        font-size: 48px;
        padding-top: 10%
    }
}

@media (max-width: 1280px) {
    .admissionEnquiry .top {
        height: 420px;
        margin-left: -4%;
        background-size: cover
    }

    .admissionEnquiry .top .navlinks ul {
        top: 22vh;
        left: 3%;
        gap: 6px
    }

    .admissionEnquiry .top .navlinks ul li a {
        font-size: 15px
    }

    .admissionEnquiry .top .navlinks ul .nav {
        padding: 3px 1px
    }

    .admissionEnquiry .top .navlinks ul .nav img {
        width: 14px;
        height: 14px
    }

    .admissionEnquiry .top .heading {
        width: 60%
    }

    .admissionEnquiry .top .heading h1 {
        font-size: 42px;
        padding-top: 12%
    }
}

@media (max-width: 480px) {
    .admissionEnquiry .top {
        background: linear-gradient(0deg, #00000080, #00000080), url(/assets/admissionHero-04JJ54N6.jpeg) center/cover no-repeat;
        height: auto;
        padding: 40px 10px;
        margin-left: 0;
        flex-direction: column;
        justify-content: center;
        text-align: center
    }

    .admissionEnquiry .top .navlinks ul {
        top: 85px;
        gap: 5px
    }

    .admissionEnquiry .top .navlinks ul li a {
        font-size: 14px
    }

    .admissionEnquiry .top .navlinks ul .nav {
        padding: 0;
        scale: .8
    }

    .admissionEnquiry .top .heading {
        width: 100%;
        margin-top: 5%
    }

    .admissionEnquiry .top .heading h1 {
        width: 100%;
        font-size: 28px
    }

    .admissionEnquiry .top .heading p {
        font-size: 16px
    }
}

.slSubHero {
    margin: 80px 111px 0;
    display: flex;
    position: relative;
    height: 491px
}

.slSubHero .slLeft {
    padding: 50px;
    width: 50%;
    background: var(--yellow, #fbc51d)
}

.slSubHero .slLeft h1 {
    color: var(--red, #dc143c);
    font-family: 'Sora-SemiBold';
    font-size: 46px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 1rem
}

.slSubHero .slLeft p {
    color: var(--Color-5text, #333);
    width: 80%;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.slSubHero .slRight {
    width: 50%
}

.slSubHero .slRight img {
    width: 100%;
    height: 491px;
    object-fit: cover
}

@media (max-width: 1536px) {
    .slSubHero {
        margin: 60px 80px 0;
        height: 400px
    }

    .slSubHero .slLeft {
        width: 60%;
        padding: 30px
    }

    .slSubHero .slLeft h1 {
        font-size: 42px
    }

    .slSubHero .slLeft p {
        font-size: 20px;
        width: 90%
    }

    .slSubHero .slRight {
        width: 40%
    }

    .slSubHero .slRight img {
        height: 400px
    }
}

@media (max-width: 1440px) {
    .slSubHero {
        margin: 50px 70px 0;
        height: 380px
    }

    .slSubHero .slLeft {
        width: 65%;
        padding: 25px
    }

    .slSubHero .slLeft h1 {
        font-size: 38px
    }

    .slSubHero .slLeft p {
        font-size: 18px;
        width: 95%
    }

    .slSubHero .slRight {
        width: 35%
    }

    .slSubHero .slRight img {
        height: 380px
    }
}

@media (max-width: 1280px) {
    .slSubHero {
        margin: 40px 60px 0;
        height: 350px
    }

    .slSubHero .slLeft {
        width: 70%;
        padding: 20px
    }

    .slSubHero .slLeft h1 {
        font-size: 34px
    }

    .slSubHero .slLeft p {
        font-size: 16px;
        width: 100%
    }

    .slSubHero .slRight {
        width: 30%
    }

    .slSubHero .slRight img {
        height: 350px
    }
}

@media (max-width: 480px) {
    .slSubHero {
        flex-direction: column;
        margin: 40px 20px 0;
        height: auto
    }

    .slSubHero .slLeft {
        width: 100%;
        padding: 30px 20px;
        text-align: center
    }

    .slSubHero .slLeft h1 {
        font-size: 28px;
        margin-bottom: 1rem
    }

    .slSubHero .slLeft p {
        width: 100%;
        font-size: 16px
    }

    .slSubHero .slRight {
        width: 100%
    }

    .slSubHero .slRight img {
        height: 250px;
        width: 100%;
        object-fit: cover
    }
}

.slHero {
    position: relative;
    width: 100%;
    height: 58.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-direction: column
}

.slHero .bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.slHero .navlinks {
    z-index: 1;
    display: flex;
    cursor: pointer
}

.slHero .navlinks ul {
    position: absolute;
    top: 8vh;
    left: 7%;
    display: flex;
    justify-content: space-between;
    list-style: none;
    gap: 10px
}

.slHero .navlinks ul li {
    color: var(--color-white)
}

.slHero .navlinks ul li a {
    font-size: 16px;
    color: var(--color-white);
    text-decoration: none
}

.slHero .navlinks ul .nav {
    padding: 1px 2px
}

.slHero .navlinks ul .nav img {
    width: 24px;
    height: 24px
}

.slHero h1 {
    z-index: 1;
    color: var(--color-white);
    text-align: center;
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.slHero p {
    color: var(--color-white);
    text-align: center;
    width: 59.5%;
    z-index: 1;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    margin-top: 1%
}

@media (max-width: 1536px) {
    .slHero {
        height: 60vh
    }

    .slHero .navlinks ul {
        top: 4vh;
        left: 5%;
        gap: 8px
    }

    .slHero .navlinks ul li a {
        font-size: 18px
    }

    .slHero .navlinks ul .nav {
        padding: 3px 2px
    }

    .slHero .navlinks ul .nav img {
        width: 20px;
        height: 20px
    }

    .slHero h1 {
        font-size: 48px
    }

    .slHero p {
        width: 65%;
        font-size: 20px
    }
}

@media (max-width: 1440px) {
    .slHero {
        height: 58vh
    }

    .slHero .navlinks ul {
        top: 4vh;
        left: 6%;
        gap: 6px
    }

    .slHero .navlinks ul li a {
        font-size: 18px
    }

    .slHero .navlinks ul .nav {
        padding: 3px 2px
    }

    .slHero .navlinks ul .nav img {
        width: 18px;
        height: 18px
    }

    .slHero h1 {
        font-size: 45px
    }

    .slHero p {
        width: 70%;
        font-size: 18px
    }
}

@media (max-width: 1280px) {
    .slHero {
        height: 55vh
    }

    .slHero .navlinks ul {
        top: 4vh;
        left: 5%;
        gap: 5px
    }

    .slHero .navlinks ul li a {
        font-size: 16px
    }

    .slHero .navlinks ul .nav {
        padding: 2px
    }

    .slHero .navlinks ul .nav img {
        width: 16px;
        height: 16px
    }

    .slHero h1 {
        font-size: 42px
    }

    .slHero p {
        width: 75%;
        font-size: 16px
    }
}

@media (max-width: 480px) {
    .slHero {
        height: auto;
        padding: 40px 20px;
        text-align: center
    }

    .slHero .bg-video {
        object-fit: cover
    }

    .slHero .navlinks ul {
        margin-left: -2%;
        top: 20px;
        gap: 5px
    }

    .slHero .navlinks ul li a {
        font-size: 14px
    }

    .slHero .navlinks ul .nav {
        padding: 0;
        scale: .8
    }

    .slHero h1 {
        font-size: 28px;
        margin-top: 5%
    }

    .slHero p {
        font-size: 16px;
        width: 100%
    }
}

.slBenefits {
    display: flex;
    flex-direction: column
}

.slBenefits .middle {
    display: flex;
    height: 766px;
    margin: 80px 120px
}

.slBenefits .middle .vcLeft {
    width: 50%;
    background: url(/assets/sl-CCjeuITq.jpeg) #d3d3d3 50%/cover no-repeat
}

.slBenefits .middle .vcRight {
    width: 50%;
    background: var(--darkblue, linear-gradient(249deg, #1c325b 1.17%, #3b6ac1 59.08%));
    padding: 60px 50px 60px 60px
}

.slBenefits .middle .vcRight h1 {
    color: var(--yellow, #fbc51d);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.slBenefits .middle .vcRight ul {
    margin-top: 4%;
    padding-left: 4%
}

.slBenefits .middle .vcRight ul li {
    color: var(--color-white);
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    margin-bottom: 35px
}

.slBenefits p {
    color: var(--Color-5text, #333);
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    width: 40%;
    margin: auto
}

.slBenefits button {
    margin: 2% auto auto;
    width: 234px;
    height: 54px;
    display: flex;
    padding: 12px 26px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    background: var(--color-red);
    color: var(--color-white);
    font-size: 18px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    text-decoration: underline;
    border: none
}

@media (max-width: 1536px) {
    .slBenefits .middle {
        height: 650px;
        margin: 60px 90px
    }

    .slBenefits .middle .vcLeft {
        width: 50%;
        background-size: cover
    }

    .slBenefits .middle .vcRight {
        width: 50%;
        padding: 50px 40px
    }

    .slBenefits .middle .vcRight h1 {
        font-size: 50px
    }

    .slBenefits .middle .vcRight ul li {
        font-size: 22px
    }

    .slBenefits p {
        width: 50%;
        font-size: 22px
    }

    .slBenefits button {
        width: 210px;
        height: 50px;
        font-size: 16px
    }
}

@media (max-width: 1440px) {
    .slBenefits .middle {
        height: 600px;
        margin: 50px 80px
    }

    .slBenefits .middle .vcLeft {
        width: 50%;
        background-size: cover
    }

    .slBenefits .middle .vcRight {
        width: 50%;
        padding: 45px 35px
    }

    .slBenefits .middle .vcRight h1 {
        font-size: 48px
    }

    .slBenefits .middle .vcRight ul li {
        font-size: 20px
    }

    .slBenefits p {
        width: 55%;
        font-size: 20px
    }

    .slBenefits button {
        width: 200px;
        height: 48px;
        font-size: 15px
    }
}

@media (max-width: 1280px) {
    .slBenefits .middle {
        height: 550px;
        margin: 40px 60px
    }

    .slBenefits .middle .vcLeft {
        width: 50%;
        background-size: cover
    }

    .slBenefits .middle .vcRight {
        width: 50%;
        padding: 40px 30px
    }

    .slBenefits .middle .vcRight h1 {
        font-size: 45px
    }

    .slBenefits .middle .vcRight ul li {
        font-size: 18px
    }

    .slBenefits p {
        width: 60%;
        font-size: 18px
    }

    .slBenefits button {
        width: 180px;
        height: 44px;
        font-size: 14px
    }
}

@media (max-width: 480px) {
    .slBenefits .middle {
        flex-direction: column-reverse;
        margin: 20px;
        height: auto
    }

    .slBenefits .middle .vcRight {
        width: 100%;
        padding: 30px 20px
    }

    .slBenefits .middle .vcRight h1 {
        font-size: 24px;
        text-align: center
    }

    .slBenefits .middle .vcRight ul {
        margin-top: 20px;
        padding-left: 20px
    }

    .slBenefits .middle .vcRight ul li {
        font-size: 16px;
        margin-bottom: 20px
    }

    .slBenefits .middle .vcLeft {
        width: 100%;
        height: 250px;
        background-position: center;
        background-size: cover
    }

    .slBenefits p {
        font-size: 16px;
        width: 90%
    }

    .slBenefits button {
        width: 180px;
        height: 48px;
        font-size: 14px;
        margin-top: 20px
    }
}

.LACHero {
    background: linear-gradient(0deg, #000000b3, #000000b3), url(/assets/hero-BP6KFtoF.jpeg) #d3d3d3 1px -453.857px/99.773% 248.162% no-repeat;
    height: 442px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fbc51d;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

@media (max-width: 1536px) {
    .LACHero {
        font-size: 48px;
        height: 400px;
        background-size: cover;
        background-position: center
    }
}

@media (max-width: 1440px) {
    .LACHero {
        font-size: 44px;
        height: 380px;
        background-size: cover;
        background-position: center
    }
}

@media (max-width: 1280px) {
    .LACHero {
        font-size: 40px;
        height: 360px;
        background-size: cover;
        background-position: center
    }
}

@media (max-width: 480px) {
    .LACHero {
        height: 260px;
        font-size: 28px;
        padding: 0 16px;
        background: linear-gradient(0deg, #000000b3, #000000b3), url(/assets/hero-BP6KFtoF.jpeg) center/cover no-repeat
    }
}

.LACFind {
    display: flex;
    margin: 40px auto;
    align-items: center;
    justify-content: center;
    width: 65.83%;
    gap: 40px;
    flex-direction: column;
    border-radius: 15px;
    padding: 40px 70px;
    background: var(--color-red)
}

.LACFind .top {
    color: #fbc51d;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.LACFind .bottom {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.LACFind .bottom .State,
.LACFind .bottom .city {
    display: flex;
    justify-content: center;
    width: 50%
}

.LACFind .bottom .State select,
.LACFind .bottom .city select {
    display: flex;
    width: 90%;
    border-radius: 10px;
    height: 60px;
    padding: 19px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    flex-shrink: 0
}

@media (max-width: 1536px) {
    .LACFind {
        width: 75%;
        padding: 35px 60px;
        gap: 30px
    }

    .LACFind .top {
        font-size: 28px
    }

    .LACFind .bottom .State select,
    .LACFind .bottom .city select {
        height: 55px;
        font-size: 16px
    }
}

@media (max-width: 1440px) {
    .LACFind {
        width: 80%;
        padding: 30px 50px;
        gap: 25px
    }

    .LACFind .top {
        font-size: 26px
    }

    .LACFind .bottom .State select,
    .LACFind .bottom .city select {
        height: 52px;
        font-size: 15px
    }
}

@media (max-width: 1280px) {
    .LACFind {
        width: 90%;
        padding: 25px 40px;
        gap: 20px
    }

    .LACFind .top {
        font-size: 24px
    }

    .LACFind .bottom {
        gap: 20px
    }

    .LACFind .bottom .State,
    .LACFind .bottom .city {
        width: 100%
    }

    .LACFind .bottom .State select,
    .LACFind .bottom .city select {
        width: 100%;
        height: 50px;
        font-size: 14px
    }
}

@media (max-width: 480px) {
    .LACFind {
        width: 90%;
        padding: 30px 20px;
        gap: 30px
    }

    .LACFind .top {
        font-size: 20px;
        padding: 0 10px
    }

    .LACFind .bottom {
        flex-direction: column;
        gap: 20px
    }

    .LACFind .bottom .State,
    .LACFind .bottom .city {
        width: 100%
    }

    .LACFind .bottom .State select,
    .LACFind .bottom .city select {
        width: 100%;
        height: 50px;
        font-size: 16px;
        padding: 12px 16px
    }
}

.LACPopular {
    gap: 24px;
    display: flex;
    flex-direction: column;
    width: 73%;
    margin: auto;
    border-radius: 10px;
    background: #fbc51d40
}

.LACPopular .relativeContainer {
    padding: 20px 0 0;
    display: flex;
    flex-direction: column;
    gap: 20px
}

.LACPopular .relativeContainer .popularContainer {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.LACPopular .relativeContainer .popularContainer .top {
    color: var(--color-red);
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.LACPopular .relativeContainer .popularContainer .mid {
    display: flex;
    flex-wrap: wrap;
    gap: 175px;
    justify-content: center;
    align-items: center;
    row-gap: 40px
}

.LACPopular .relativeContainer .popularContainer .mid .popcity {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.LACPopular .relativeContainer .popularContainer .mid .popcity .image {
    width: max-content;
    height: max-content
}

.LACPopular .relativeContainer .popularContainer .mid .popcity .image img {
    width: max-content;
    height: max-content;
    object-fit: cover
}

.LACPopular .relativeContainer .popularContainer .mid .popcity .popcityname {
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.LACPopular .relativeContainer .bottom {
    color: var(--color-white);
    border-radius: 0 0 10px 10px;
    background: var(--color-red)d9;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    padding: 21px;
    line-height: normal;
    align-items: center;
    justify-content: center;
    display: flex
}

.LACPopular .relativeContainer .other {
    border-radius: 0 0 10px 10px;
    padding: 20px;
    background-color: #dc143cd9;
    display: flex;
    color: var(--color-white);
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.LACPopular .relativeContainer .other-less {
    cursor: pointer;
    color: #fbc51d;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    padding: 10px 40px;
    border-radius: 10px
}

.LACPopular .relativeContainer .other-less:hover {
    background-color: #fbc31d;
    color: #000000a6
}

.LACPopular .relativeContainer .otherContainer {
    padding: 20px;
    border-radius: 10px;
    background: #333
}

.LACPopular .relativeContainer .otherContainer .otherCitiesList {
    gap: 40px;
    display: flex;
    flex-direction: column;
    align-items: center
}

.LACPopular .relativeContainer .otherContainer .otherCitiesList .wrapper {
    justify-content: center;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 30px
}

.LACPopular .relativeContainer .otherContainer .otherCitiesList .wrapper .cname {
    color: var(--color-white);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    width: 25%;
    padding: 5px 40px
}

.LACPopular .relativeContainer .otherContainer .otherCitiesList .wrapper .cname:hover {
    color: #fbc51d
}

@media (max-width: 1536px) {
    .LACPopular {
        width: 80%;
        gap: 20px
    }

    .LACPopular .relativeContainer {
        padding-top: 16px;
        gap: 16px
    }

    .LACPopular .relativeContainer .popularContainer {
        gap: 16px
    }

    .LACPopular .relativeContainer .popularContainer .top {
        font-size: 28px
    }

    .LACPopular .relativeContainer .popularContainer .mid {
        gap: 140px;
        row-gap: 35px
    }

    .LACPopular .relativeContainer .popularContainer .mid .popcity .popcityname {
        font-size: 22px
    }

    .LACPopular .relativeContainer .bottom,
    .LACPopular .relativeContainer .other {
        font-size: 22px;
        padding: 18px
    }

    .LACPopular .relativeContainer .other-less {
        font-size: 22px;
        padding: 8px 36px
    }

    .LACPopular .relativeContainer .otherContainer {
        padding: 16px
    }

    .LACPopular .relativeContainer .otherContainer .otherCitiesList {
        gap: 35px
    }

    .LACPopular .relativeContainer .otherContainer .otherCitiesList .wrapper {
        gap: 25px
    }

    .LACPopular .relativeContainer .otherContainer .otherCitiesList .wrapper .cname {
        font-size: 22px;
        padding: 5px 30px
    }
}

@media (max-width: 1440px) {
    .LACPopular {
        width: 85%;
        gap: 18px
    }

    .LACPopular .relativeContainer {
        padding-top: 14px;
        gap: 14px
    }

    .LACPopular .relativeContainer .popularContainer {
        gap: 14px
    }

    .LACPopular .relativeContainer .popularContainer .top {
        font-size: 26px
    }

    .LACPopular .relativeContainer .popularContainer .mid {
        gap: 120px;
        row-gap: 30px
    }

    .LACPopular .relativeContainer .popularContainer .mid .popcity .popcityname {
        font-size: 20px
    }

    .LACPopular .relativeContainer .bottom,
    .LACPopular .relativeContainer .other {
        font-size: 20px;
        padding: 16px
    }

    .LACPopular .relativeContainer .other-less {
        font-size: 20px;
        padding: 8px 32px
    }

    .LACPopular .relativeContainer .otherContainer {
        padding: 14px
    }

    .LACPopular .relativeContainer .otherContainer .otherCitiesList {
        gap: 30px
    }

    .LACPopular .relativeContainer .otherContainer .otherCitiesList .wrapper {
        gap: 22px
    }

    .LACPopular .relativeContainer .otherContainer .otherCitiesList .wrapper .cname {
        font-size: 20px;
        padding: 5px 28px
    }
}

@media (max-width: 1280px) {
    .LACPopular {
        width: 90%;
        gap: 16px
    }

    .LACPopular .relativeContainer {
        padding-top: 12px;
        gap: 12px
    }

    .LACPopular .relativeContainer .popularContainer {
        gap: 12px
    }

    .LACPopular .relativeContainer .popularContainer .top {
        font-size: 24px
    }

    .LACPopular .relativeContainer .popularContainer .mid {
        gap: 100px;
        row-gap: 25px
    }

    .LACPopular .relativeContainer .popularContainer .mid .popcity .popcityname {
        font-size: 18px
    }

    .LACPopular .relativeContainer .bottom,
    .LACPopular .relativeContainer .other {
        font-size: 18px;
        padding: 14px
    }

    .LACPopular .relativeContainer .other-less {
        font-size: 18px;
        padding: 8px 28px
    }

    .LACPopular .relativeContainer .otherContainer {
        padding: 12px
    }

    .LACPopular .relativeContainer .otherContainer .otherCitiesList {
        gap: 25px
    }

    .LACPopular .relativeContainer .otherContainer .otherCitiesList .wrapper {
        gap: 20px
    }

    .LACPopular .relativeContainer .otherContainer .otherCitiesList .wrapper .cname {
        font-size: 18px;
        padding: 5px 24px
    }
}

@media (max-width: 480px) {
    .LACPopular {
        width: 90%;
        gap: 20px
    }

    .LACPopular .relativeContainer .popularContainer .top {
        font-size: 24px;
        padding: 10px
    }

    .LACPopular .relativeContainer .popularContainer .mid {
        flex-direction: row;
        gap: 30px;
        row-gap: 30px
    }

    .LACPopular .relativeContainer .popularContainer .mid .popcity .popcityname {
        font-size: 18px
    }

    .LACPopular .relativeContainer .popularContainer .mid .popcity .image img {
        width: 20vw;
        height: 20vw
    }

    .LACPopular .relativeContainer .other {
        font-size: 18px;
        text-align: center;
        padding: 16px
    }

    .LACPopular .relativeContainer .otherContainer .otherCitiesList {
        gap: 4vw
    }

    .LACPopular .relativeContainer .otherContainer .otherCitiesList .other-less {
        padding: 0;
        font-size: 18px
    }

    .LACPopular .relativeContainer .otherContainer .otherCitiesList .wrapper {
        gap: 5vw
    }

    .LACPopular .relativeContainer .otherContainer .otherCitiesList .wrapper .cname {
        width: 25vw;
        padding: 0;
        font-size: 14px;
        text-align: center
    }
}

.LACCards {
    margin: 80px 0;
    padding: 80px;
    display: flex;
    background: #fbc51d;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 60px;
    row-gap: 30px
}

.LACCards .card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 42%;
    background-color: var(--color-white);
    border-radius: 10px;
    padding: 28px 28px 53px
}

.LACCards .card .top {
    display: flex;
    justify-content: space-between
}

.LACCards .card .top .name {
    color: var(--BLACK-PRIMARY-COLOR, #000);
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.LACCards .card .top .image {
    cursor: pointer;
    width: 28.5px;
    height: 35px
}

.LACCards .card .top .image img {
    height: 100%;
    width: 100%;
    object-fit: cover
}

.LACCards .card .mid {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.LACCards .card .mid p {
    display: flex;
    flex-direction: column;
    color: var(--BLACK-PRIMARY-COLOR, #000);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.LACCards .card .mid .address,
.LACCards .card .mid .phone {
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.LACCards .card .logos {
    display: flex;
    justify-content: center;
    gap: 20px
}

.LACCards .card .logos .sms {
    display: flex;
    width: 100%;
    gap: 20px;
    cursor: pointer;
    align-items: center
}

.LACCards .card .logos .sms .smslogo {
    display: flex
}

.LACCards .card .logos .sms .smstext {
    width: 100%;
    color: var(--RED-PRIMAEY-COLOR, #bc2329);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.LACCards .card .logos .form {
    display: flex;
    width: 100%;
    gap: 20px;
    cursor: pointer;
    align-items: center
}

.LACCards .card .logos .form .formlogo {
    display: flex
}

.LACCards .card .logos .form .formtext {
    width: 70%;
    color: var(--RED-PRIMAEY-COLOR, #bc2329);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.LACCards .card .laccardButton .button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 60%;
    border-radius: 10px;
    text-align-last: left;
    height: 48px;
    padding: 5px 16px;
    color: var(--color-white);
    border: 1px solid #bc2329;
    background-color: #bc2329;
    transition: none
}

@media (max-width: 1536px) {
    .LACCards {
        padding: 70px;
        gap: 50px;
        row-gap: 28px
    }

    .LACCards .card {
        gap: 18px;
        padding: 24px 24px 48px
    }

    .LACCards .card .top .name {
        font-size: 28px
    }

    .LACCards .card .top .image {
        width: 26px;
        height: 32px
    }

    .LACCards .card .mid {
        gap: 18px
    }

    .LACCards .card .mid p,
    .LACCards .card .mid .address,
    .LACCards .card .mid .phone {
        font-size: 18px
    }

    .LACCards .card .logos {
        gap: 18px
    }

    .LACCards .card .logos .sms .smstext,
    .LACCards .card .logos .form .formtext {
        font-size: 22px
    }

    .LACCards .card .laccardButton .button {
        height: 46px;
        font-size: 16px
    }
}

@media (max-width: 1440px) {
    .LACCards {
        padding: 60px;
        gap: 45px;
        row-gap: 25px
    }

    .LACCards .card {
        gap: 16px;
        padding: 22px 22px 44px
    }

    .LACCards .card .top .name {
        font-size: 26px
    }

    .LACCards .card .top .image {
        width: 24px;
        height: 30px
    }

    .LACCards .card .mid {
        gap: 16px
    }

    .LACCards .card .mid p,
    .LACCards .card .mid .address,
    .LACCards .card .mid .phone {
        font-size: 17px
    }

    .LACCards .card .logos {
        gap: 16px
    }

    .LACCards .card .logos .sms .smstext,
    .LACCards .card .logos .form .formtext {
        font-size: 20px
    }

    .LACCards .card .laccardButton .button {
        height: 44px;
        font-size: 15px
    }
}

@media (max-width: 1280px) {
    .LACCards {
        padding: 50px;
        gap: 40px;
        row-gap: 22px
    }

    .LACCards .card {
        gap: 14px;
        padding: 20px 20px 40px
    }

    .LACCards .card .top .name {
        font-size: 24px
    }

    .LACCards .card .top .image {
        width: 22px;
        height: 28px
    }

    .LACCards .card .mid {
        gap: 14px
    }

    .LACCards .card .mid p,
    .LACCards .card .mid .address,
    .LACCards .card .mid .phone {
        font-size: 16px
    }

    .LACCards .card .logos {
        gap: 14px
    }

    .LACCards .card .logos .sms .smstext,
    .LACCards .card .logos .form .formtext {
        font-size: 18px
    }

    .LACCards .card .laccardButton .button {
        height: 42px;
        font-size: 14px
    }
}

@media (max-width: 480px) {
    .LACCards {
        padding: 40px 20px;
        gap: 20px;
        row-gap: 20px
    }

    .LACCards .card {
        width: 100%;
        padding: 20px 16px 40px
    }

    .LACCards .card .top .name {
        font-size: 18px
    }

    .LACCards .card .top .image {
        width: 16px;
        height: 20px
    }

    .LACCards .card .mid {
        gap: 12px
    }

    .LACCards .card .mid p {
        font-size: 16px
    }

    .LACCards .card .mid .address,
    .LACCards .card .mid .phone {
        font-size: 14px
    }

    .LACCards .card .logos {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px
    }

    .LACCards .card .logos .sms,
    .LACCards .card .logos .form {
        width: 100%;
        gap: 12px
    }

    .LACCards .card .logos .sms .smstext,
    .LACCards .card .logos .sms .formtext,
    .LACCards .card .logos .form .smstext,
    .LACCards .card .logos .form .formtext {
        font-size: 16px
    }

    .LACCards .card .logos .sms .smslogo,
    .LACCards .card .logos .sms .formlogo,
    .LACCards .card .logos .form .smslogo,
    .LACCards .card .logos .form .formlogo {
        width: 24px;
        height: 24px
    }

    .LACCards .card .logos .sms .smslogo img,
    .LACCards .card .logos .sms .formlogo img,
    .LACCards .card .logos .form .smslogo img,
    .LACCards .card .logos .form .formlogo img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .LACCards .card .laccardButton {
        margin-top: 16px
    }

    .LACCards .card .laccardButton .button {
        width: 100%;
        padding: 10px 12px;
        font-size: 16px
    }
}

.selected-center {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 1rem;
    text-align: center;
    color: #2c3e50
}

.sms-popup-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0009;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999
}

.sms-popup-modal .modal-content {
    background: var(--color-white);
    padding: 2rem;
    border-radius: 20px;
    width: 95%;
    max-width: 550px;
    box-shadow: 0 10px 25px #0003;
    position: relative;
    animation: scaleFade .3s ease-in-out
}

.sms-popup-modal .modal-content h3 {
    font-size: 1.75rem;
    font-weight: 600;
    color: #bc2329;
    margin-bottom: .5rem;
    text-align: center
}

.sms-popup-modal .modal-content .close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 1.75rem;
    cursor: pointer;
    color: #aaa;
    transition: color .2s ease
}

.sms-popup-modal .modal-content .close-btn:hover {
    color: #333
}

.sms-popup-modal .modal-content form {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.sms-popup-modal .modal-content form .option-menu {
    max-width: 100px !important
}

.sms-popup-modal .modal-content form input,
.sms-popup-modal .modal-content form select {
    width: 100%;
    padding: .8rem 1rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 10px;
    outline: none;
    background-color: #f9f9f9;
    transition: border-color .2s, box-shadow .2s
}

.sms-popup-modal .modal-content form .custom-dropdown {
    position: relative;
    width: 100%;
    font-size: 1rem
}

.sms-popup-modal .modal-content form .custom-dropdown .dropdown-header {
    padding: .8rem 1rem;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #f9f9f9;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.sms-popup-modal .modal-content form .custom-dropdown .dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    border: 1px solid #ccc;
    border-radius: 10px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1;
    box-shadow: 0 5px 15px #0000001a;
    margin-top: 5px
}

.sms-popup-modal .modal-content form .custom-dropdown .dropdown-list .dropdown-item {
    padding: .75rem 1rem;
    cursor: pointer;
    transition: background .2s
}

.sms-popup-modal .modal-content form .custom-dropdown .dropdown-list .dropdown-item:hover {
    background-color: #f0f0f0
}

.sms-popup-modal .modal-content form .custom-dropdown .arrow {
    font-size: 1rem;
    color: #555
}

.sms-popup-modal .modal-content form button {
    padding: .75rem;
    font-size: 1rem;
    background-color: #bc2329;
    color: var(--color-white);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background .3s, transform .2s
}

.sms-popup-modal .modal-content form button:hover:not(:disabled) {
    background-color: #a81e24;
    transform: translateY(-1px)
}

.sms-popup-modal .modal-content form button:disabled {
    background: #ccc;
    cursor: not-allowed
}

@media (max-width: 480px) {
    .sms-popup-modal .modal-content {
        padding: 1.5rem
    }

    .sms-popup-modal .modal-content h3 {
        font-size: 1.5rem
    }

    .sms-popup-modal .modal-content .selected-center {
        font-size: .95rem
    }

    .sms-popup-modal .modal-content form input,
    .sms-popup-modal .modal-content form select {
        font-size: .95rem;
        padding: .65rem .9rem
    }

    .sms-popup-modal .modal-content form button {
        font-size: .95rem
    }
}

.admission-popup-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0009;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999
}

.admission-popup-modal .modal-content {
    background: var(--color-white);
    padding: 2rem;
    border-radius: 20px;
    width: 95%;
    max-width: 550px;
    box-shadow: 0 10px 25px #0003;
    position: relative;
    animation: scaleFade .3s ease-in-out
}

.admission-popup-modal .modal-content h3 {
    font-size: 1.75rem;
    font-weight: 600;
    color: #bc2329;
    margin-bottom: .5rem;
    text-align: center
}

.admission-popup-modal .modal-content .selected-center {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 1rem;
    text-align: center;
    color: #2c3e50
}

.admission-popup-modal .modal-content .close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 1.75rem;
    cursor: pointer;
    color: #aaa;
    transition: color .2s ease
}

.admission-popup-modal .modal-content .close-btn:hover {
    color: #333
}

.admission-popup-modal .modal-content form {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.admission-popup-modal .modal-content form input,
.admission-popup-modal .modal-content form select {
    width: 100%;
    padding: .8rem 1rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 10px;
    outline: none;
    background-color: #f9f9f9;
    transition: border-color .2s, box-shadow .2s;
    overflow: scroll
}

.admission-popup-modal .modal-content form .custom-dropdown {
    position: relative;
    width: 100%;
    font-size: 1rem
}

.admission-popup-modal .modal-content form .custom-dropdown .dropdown-header {
    padding: .8rem 1rem;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #f9f9f9;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.admission-popup-modal .modal-content form .custom-dropdown .dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    border: 1px solid #ccc;
    border-radius: 10px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1;
    box-shadow: 0 5px 15px #0000001a;
    margin-top: 5px
}

.admission-popup-modal .modal-content form .custom-dropdown .dropdown-list .dropdown-item {
    padding: .75rem 1rem;
    cursor: pointer;
    transition: background .2s
}

.admission-popup-modal .modal-content form .custom-dropdown .dropdown-list .dropdown-item:hover {
    background-color: #f0f0f0
}

.admission-popup-modal .modal-content form .custom-dropdown .arrow {
    font-size: 1rem;
    color: #555
}

.admission-popup-modal .modal-content form button {
    padding: .85rem;
    font-size: 1rem;
    font-weight: 500;
    background-color: #bc2329;
    color: var(--color-white);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background .3s, transform .2s
}

.admission-popup-modal .modal-content form button:hover:not(:disabled) {
    background-color: #a81e24;
    transform: translateY(-1px)
}

.admission-popup-modal .modal-content form button:disabled {
    background: #ccc;
    cursor: not-allowed
}

@keyframes scaleFade {
    0% {
        opacity: 0;
        transform: scale(.95)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@media (max-width: 480px) {
    .admission-popup-modal .modal-content {
        padding: 1.5rem
    }

    .admission-popup-modal .modal-content h3 {
        font-size: 1.5rem
    }

    .admission-popup-modal .modal-content .selected-center {
        font-size: .95rem
    }

    .admission-popup-modal .modal-content form input,
    .admission-popup-modal .modal-content form select {
        font-size: .95rem;
        padding: .65rem .9rem
    }

    .admission-popup-modal .modal-content form button {
        font-size: .95rem
    }
}

.setUpHero {
    background: linear-gradient(0deg, #000000b3, #000000b3), url(/assets/hero-Dgg2hXYi.jpeg) #d3d3d3 .998px -277.996px/99.948% 189.771% no-repeat;
    height: 578px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.setUpHero h1 {
    color: #fbc51d;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.setUpHero p {
    color: var(--color-white);
    text-align: center;
    width: 60%;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    padding-top: 3vh
}

@media (max-width: 1536px) {
    .setUpHero {
        height: 520px
    }

    .setUpHero h1 {
        font-size: 48px
    }

    .setUpHero p {
        font-size: 22px;
        width: 65%;
        padding-top: 2.5vh
    }
}

@media (max-width: 1440px) {
    .setUpHero {
        height: 480px
    }

    .setUpHero h1 {
        font-size: 44px
    }

    .setUpHero p {
        font-size: 20px;
        width: 70%;
        padding-top: 2vh
    }
}

@media (max-width: 1280px) {
    .setUpHero {
        height: 440px
    }

    .setUpHero h1 {
        font-size: 40px
    }

    .setUpHero p {
        font-size: 18px;
        width: 75%;
        padding-top: 1.5vh
    }
}

@media (max-width: 480px) {
    .setUpHero {
        height: auto;
        padding: 40px 20px;
        background: linear-gradient(0deg, #000000b3, #000000b3), url(/assets/hero-Dgg2hXYi.jpeg) center center/cover no-repeat
    }

    .setUpHero h1 {
        font-size: 32px;
        line-height: 1.2;
        padding: 0 10px
    }

    .setUpHero p {
        width: 100%;
        font-size: 16px;
        font-weight: 500;
        padding-top: 20px
    }
}

.setLegacy {
    display: flex;
    justify-content: center;
    gap: 150px;
    padding: 100px 0 50px
}

.setLegacy .counter-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.setLegacy .counter-shadow {
    position: absolute;
    width: 286.126px;
    height: 286.126px;
    background: var(--arena-red, #DC143C);
    border-radius: 20px;
    transform: translate(10px, 10px)
}

.setLegacy .counter-card {
    position: relative;
    width: 286.126px;
    height: 286.126px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 20px;
    border: 2.5px solid #DC143C;
    overflow: hidden
}

.setLegacy .counter-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center
}

.setLegacy .counter-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center
}

.setLegacy .counter-content .number span {
    color: #dc143c !important;
    font-size: 150px !important
}

.setLegacy .counter-content span {
    color: var(--color-red);
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

@media (max-width: 1536px) {
    .setLegacy {
        gap: 120px;
        padding: 80px 0 40px
    }

    .setLegacy .counter-shadow,
    .setLegacy .counter-card {
        width: 250px;
        height: 250px
    }

    .setLegacy .counter-content .number span {
        font-size: 120px !important
    }

    .setLegacy .counter-content span {
        font-size: 28px
    }
}

@media (max-width: 1440px) {
    .setLegacy {
        gap: 100px;
        padding: 70px 0 35px
    }

    .setLegacy .counter-shadow,
    .setLegacy .counter-card {
        width: 220px;
        height: 220px
    }

    .setLegacy .counter-content .number span {
        font-size: 100px !important
    }

    .setLegacy .counter-content span {
        font-size: 24px
    }
}

@media (max-width: 1280px) {
    .setLegacy {
        gap: 80px;
        padding: 60px 0 30px
    }

    .setLegacy .counter-shadow,
    .setLegacy .counter-card {
        width: 190px;
        height: 190px
    }

    .setLegacy .counter-content .number span {
        font-size: 80px !important
    }

    .setLegacy .counter-content span {
        font-size: 20px
    }
}

@media (max-width: 480px) {
    .setLegacy {
        flex-direction: column;
        gap: 50px;
        padding: 50px 20px
    }

    .setLegacy .counter-wrapper {
        flex-direction: column
    }

    .setLegacy .counter-shadow,
    .setLegacy .counter-card {
        width: 200px;
        height: 200px;
        border-radius: 16px
    }

    .setLegacy .counter-shadow {
        transform: translate(6px, 6px)
    }

    .setLegacy .counter-content .number span {
        font-size: 80px !important
    }

    .setLegacy .counter-content span {
        font-size: 20px;
        font-weight: 600
    }
}

.setUpWhy {
    display: flex;
    padding: 50px 125px;
    gap: 140px
}

.setUpWhy .sw-left {
    width: 60%;
    display: flex;
    flex-direction: column;
    text-align: left
}

.setUpWhy .sw-left h1 {
    color: var(--color-red);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 2vh
}

.setUpWhy .sw-left p {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 2vh
}

.setUpWhy .sw-left .join-button {
    width: 60%;
    position: relative;
    overflow: hidden;
    border-radius: .5vh;
    border: .1vw solid var(--color-red);
    background: transparent;
    margin: 3vh 0;
    padding: 1.5vh 3vw;
    color: var(--color-red);
    font-size: 1vw;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    cursor: pointer;
    transition: color .3s ease-in-out, border .3s ease-in-out;
    display: flex;
    align-items: center;
    gap: .6vw;
    justify-content: center
}

.setUpWhy .sw-left .join-button img {
    width: 16px;
    height: 16px;
    position: relative;
    z-index: 2
}

.setUpWhy .sw-left .join-button .btn-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--color-red);
    transform: translateY(100%);
    transition: transform .5s ease;
    z-index: 1
}

.setUpWhy .sw-left .join-button .btn-text {
    position: relative;
    z-index: 2;
    transition: color .3s ease
}

.setUpWhy .sw-left .join-button .btn-text:after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: transparent;
    transform: translateY(0);
    transition: transform .5s ease;
    z-index: 1
}

.setUpWhy .sw-left .join-button:hover .btn-background {
    transform: translateY(0)
}

.setUpWhy .sw-left .join-button:hover .btn-text {
    color: var(--color-white)
}

.setUpWhy .sw-left .join-button:hover .btn-text:after {
    transform: translateY(100%)
}

.setUpWhy .sw-left .join-button:not(:hover) .btn-background {
    transform: translateY(100%)
}

.setUpWhy .sw-left .join-button:not(:hover) .btn-text:after {
    transform: translateY(0)
}

.setUpWhy .sw-right {
    width: 40%;
    position: relative
}

.setUpWhy .sw-right .shape1 {
    width: 403px;
    height: 566px;
    background: #fbc51d;
    position: absolute;
    right: 0
}

.setUpWhy .sw-right .sImg {
    position: absolute;
    width: 626px;
    height: 465px;
    top: 8%;
    right: 8%
}

@media (max-width: 1536px) {
    .setUpWhy {
        padding: 50px 100px
    }

    .setUpWhy .sw-left {
        width: 50%
    }

    .setUpWhy .sw-left h1 {
        font-size: 48px
    }

    .setUpWhy .sw-left p {
        font-size: 22px
    }

    .setUpWhy .sw-left .join-button {
        width: 65%;
        font-size: .95vw;
        padding: 1.4vh 2.8vw
    }

    .setUpWhy .sw-right .shape1 {
        width: 360px;
        height: 520px
    }

    .setUpWhy .sw-right .sImg {
        width: 560px;
        height: 420px
    }
}

@media (max-width: 1440px) {
    .setUpWhy {
        padding: 40px 80px
    }

    .setUpWhy .sw-left h1 {
        font-size: 42px
    }

    .setUpWhy .sw-left p {
        font-size: 20px
    }

    .setUpWhy .sw-left .join-button {
        width: 70%;
        font-size: .9vw;
        padding: 1.2vh 2.6vw
    }

    .setUpWhy .sw-right .shape1 {
        width: 320px;
        height: 480px
    }

    .setUpWhy .sw-right .sImg {
        width: 520px;
        height: 390px
    }
}

@media (max-width: 1280px) {
    .setUpWhy {
        padding: 40px 60px;
        gap: 60px
    }

    .setUpWhy .sw-left {
        width: 100%
    }

    .setUpWhy .sw-left h1 {
        font-size: 36px
    }

    .setUpWhy .sw-left p {
        font-size: 18px
    }

    .setUpWhy .sw-left .join-button {
        width: 80%;
        font-size: .85vw;
        padding: 1vh 2.4vw
    }

    .setUpWhy .sw-right {
        width: 100%
    }

    .setUpWhy .sw-right .sImg {
        width: 100%;
        height: auto
    }
}

@media (max-width: 480px) {
    .setUpWhy {
        flex-direction: column;
        padding: 20px 10px;
        gap: 40px
    }

    .setUpWhy .sw-left {
        width: 100%;
        text-align: center;
        align-items: center
    }

    .setUpWhy .sw-left h1 {
        font-size: 22px;
        text-align: center;
        width: 100%
    }

    .setUpWhy .sw-left p {
        font-size: 16px;
        text-align: center
    }

    .setUpWhy .sw-left .join-button {
        width: 100%;
        padding: 1rem 1.5rem;
        font-size: 12px;
        gap: 10px
    }

    .setUpWhy .sw-left .join-button img {
        width: 14px;
        height: 14px
    }

    .setUpWhy .sw-right {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative
    }

    .setUpWhy .sw-right .shape1 {
        display: none
    }

    .setUpWhy .sw-right .sImg {
        position: relative;
        width: 100%;
        height: auto;
        top: unset;
        right: unset
    }
}

.setUpWhat {
    display: flex;
    padding: 50px 125px;
    gap: 140px
}

.setUpWhat .sw-right {
    width: 40%;
    position: relative
}

.setUpWhat .sw-right .shape1 {
    width: 405px;
    height: 1161px;
    background: #fbc51d;
    position: absolute;
    left: 0
}

.setUpWhat .sw-right .sImg {
    position: absolute;
    width: 550px;
    object-fit: cover;
    height: 809px;
    top: 8%;
    left: 8%
}

.setUpWhat .sw-left {
    width: 60%;
    display: flex;
    flex-direction: column;
    text-align: left
}

.setUpWhat .sw-left h1 {
    color: var(--color-red);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 2vh
}

.setUpWhat .sw-left p {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 2vh
}

.setUpWhat .sw-left ul {
    list-style: disc;
    padding-left: 20px
}

.setUpWhat .sw-left ul li {
    font-size: 22px;
    margin-bottom: 1.5vh
}

.setUpWhat .sw-left ul li strong {
    font-weight: 650
}

.setUpWhat .sw-left .join-button {
    width: 40%;
    border-radius: 1vh;
    border: .1vw solid #dc143c;
    background: var(--color-red);
    margin: 3vh 0;
    padding: 1.5vh 3vw;
    color: var(--color-white);
    font-size: 1vw;
    font-weight: 650;
    cursor: pointer;
    border-radius: .5vh;
    transition: background .3s ease-in-out
}

.setUpWhat .sw-left .join-button img {
    width: 16px;
    height: 16px
}

.setUpWhat .sw-left .join-button:hover {
    background: #f3f3f3;
    color: #333
}

@media (max-width: 1536px) {
    .setUpWhat {
        padding: 50px 100px;
        gap: 100px
    }

    .setUpWhat .sw-left h1 {
        font-size: 48px
    }

    .setUpWhat .sw-left p {
        font-size: 22px
    }

    .setUpWhat .sw-left ul li {
        font-size: 20px
    }

    .setUpWhat .sw-left .join-button {
        width: 45%;
        font-size: .95vw;
        padding: 1.4vh 2.8vw
    }

    .setUpWhat .sw-right .shape1 {
        width: 360px;
        height: 900px
    }

    .setUpWhat .sw-right .sImg {
        width: 500px;
        height: 740px
    }
}

@media (max-width: 1440px) {
    .setUpWhat {
        padding: 50px 80px;
        gap: 90px
    }

    .setUpWhat .sw-left h1 {
        font-size: 42px
    }

    .setUpWhat .sw-left p {
        font-size: 20px
    }

    .setUpWhat .sw-left ul li {
        font-size: 18px
    }

    .setUpWhat .sw-left .join-button {
        width: 50%;
        font-size: .9vw;
        padding: 1.2vh 2.6vw
    }

    .setUpWhat .sw-right .shape1 {
        width: 330px;
        height: 820px
    }

    .setUpWhat .sw-right .sImg {
        width: 460px;
        height: 680px
    }
}

@media (max-width: 1280px) {
    .setUpWhat {
        padding: 40px 60px;
        gap: 70px
    }

    .setUpWhat .sw-left h1 {
        font-size: 36px
    }

    .setUpWhat .sw-left p {
        font-size: 18px
    }

    .setUpWhat .sw-left ul li {
        font-size: 16px
    }

    .setUpWhat .sw-left .join-button {
        width: 55%;
        font-size: .85vw;
        padding: 1.2vh 2.4vw
    }

    .setUpWhat .sw-right .shape1 {
        width: 300px;
        height: 780px
    }

    .setUpWhat .sw-right .sImg {
        width: 420px;
        height: 640px
    }
}

@media (max-width: 480px) {
    .setUpWhat {
        flex-direction: column-reverse;
        padding: 40px 20px 0;
        gap: 40px
    }

    .setUpWhat .sw-right {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative
    }

    .setUpWhat .sw-right .shape1 {
        display: none
    }

    .setUpWhat .sw-right .sImg {
        position: relative;
        width: 100%;
        height: auto;
        top: unset;
        left: unset;
        object-fit: contain
    }

    .setUpWhat .sw-left {
        width: 100%;
        text-align: center;
        align-items: center
    }

    .setUpWhat .sw-left h1 {
        font-size: 24px;
        text-align: center
    }

    .setUpWhat .sw-left p {
        font-size: 16px;
        text-align: center
    }

    .setUpWhat .sw-left ul {
        padding-left: 0;
        list-style-position: inside
    }

    .setUpWhat .sw-left ul li {
        font-size: 16px;
        margin-bottom: 1rem
    }

    .setUpWhat .sw-left .join-button {
        width: 100%;
        padding: 1rem 1.5rem;
        font-size: 14px;
        margin-top: 2rem
    }

    .setUpWhat .sw-left .join-button img {
        width: 14px;
        height: 14px
    }
}

.spinner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000000b3;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    z-index: 999
}

.pos-rel {
    position: relative
}

.input-amt {
    margin-top: 8px;
    width: 100%
}

.amt-txt {
    position: absolute;
    width: 100%;
    bottom: -5px;
    left: 0;
    font-size: .85rem;
    font-style: italic;
    font-weight: 500
}

.SetupForm {
    padding: 4rem 1.5rem;
    max-width: 1440px;
    margin: 120px auto 0
}

.SetupForm .form-title {
    color: var(--color-red);
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 5%
}

.SetupForm .form-description {
    color: var(--GREY-COLOR, #2c2c2c);
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    max-width: 600px;
    margin: 0 auto 2rem;
    text-align: center
}

.SetupForm .privacy-label {
    font-style: italic;
    font-size: .95rem
}

.SetupForm .enquiry-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem
}

@media (max-width: 768px) {
    .SetupForm .enquiry-form {
        grid-template-columns: 1fr
    }
}

.SetupForm .enquiry-form .input-group {
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.SetupForm .enquiry-form .input-group label {
    color: var(--GREY-COLOR, #2c2c2c);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: .8px;
    padding-bottom: 0
}

.SetupForm .enquiry-form .input-group .input-field {
    background-color: transparent;
    margin-bottom: 1rem;
    color: var(--GREY-COLOR, #2c2c2c);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border-radius: 10px;
    border: 1px solid rgba(255, 30, 50, .3);
    padding: .75rem 1rem;
    height: 3.5rem
}

.SetupForm .enquiry-form .input-group .input-field::placeholder {
    color: var(--GREY-COLOR, #999);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    opacity: 1
}

.SetupForm .enquiry-form .input-group textarea.input-field {
    height: 5rem;
    padding-top: 1rem;
    resize: none
}

.SetupForm .enquiry-form .input-group select.input-field {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    color: var(--GREY-COLOR, #2c2c2c);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.SetupForm .enquiry-form .input-group select.input-field option {
    color: #000
}

.SetupForm .enquiry-form .privacy-checkbox {
    grid-column: span 2;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    color: #d1d1d1
}

.SetupForm .enquiry-form .privacy-checkbox .checkbox-input {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: .125rem;
    border: 1px solid #f3f3f3;
    background-color: transparent;
    position: relative
}

.SetupForm .enquiry-form .privacy-checkbox .checkbox-input:after {
    content: "";
    position: absolute;
    top: .1rem;
    left: .25rem;
    width: .3rem;
    height: .6rem;
    border: solid black;
    border-width: 0 .125rem .125rem 0;
    transform: rotate(45deg);
    opacity: 0
}

.SetupForm .enquiry-form .privacy-checkbox .checkbox-input:checked {
    background-color: var(--color-white);
    border-color: var(--color-white)
}

.SetupForm .enquiry-form .privacy-checkbox .checkbox-input:checked:after {
    opacity: 1
}

.SetupForm .enquiry-form .privacy-checkbox label {
    color: var(--GREY-COLOR, #2c2c2c);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: .8px
}

.SetupForm .enquiry-form .verify {
    font-size: 16px;
    padding-left: .1rem;
    font-style: italic
}

.SetupForm .enquiry-form .otp {
    font-size: 16px;
    color: #bc2329;
    margin-top: -1rem
}

.SetupForm .enquiry-form .input-group-otp {
    display: flex;
    flex-direction: column;
    gap: .8rem
}

.SetupForm .enquiry-form .input-group-otp .input-field {
    background-color: transparent;
    color: var(--GREY-COLOR, #2c2c2c);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border-radius: 10px;
    border: 1px solid rgba(255, 30, 50, .3);
    padding: .75rem 1rem;
    height: 3.5rem
}

.SetupForm .enquiry-form .input-group-otp .input-field::placeholder {
    color: var(--GREY-COLOR, #2c2c2c);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    opacity: 1
}

.SetupForm .image-container {
    display: flex;
    justify-content: center;
    margin-top: 2rem
}

.SetupForm .image-container .enquiry-image {
    width: 100%;
    max-width: 350px;
    height: auto
}

.SetupForm button {
    grid-column: span 2;
    display: flex;
    width: 15.56rem;
    height: 3.33rem;
    padding: 1rem 2.17rem;
    justify-content: center;
    align-items: center;
    border-radius: .83rem;
    background: #fbc51d;
    color: #2c2c2c;
    font-size: 24px;
    font-weight: 650;
    border: none;
    cursor: pointer
}

.SetupForm button:hover {
    color: var(--color-white);
    background-color: #2c2c2c
}

.SetupForm .scrollup {
    position: absolute;
    right: 4%;
    bottom: 10%;
    background-color: var(--color-white);
    border-radius: 50%;
    width: 5%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid white;
    cursor: pointer;
    animation: floatUpDown 1.5s ease-in-out infinite
}

@media (max-width: 1536px) {
    .SetupForm {
        padding: 3.5rem 6rem;
        margin-top: 100px
    }

    .SetupForm .form-title {
        font-size: 48px
    }

    .SetupForm .form-description {
        font-size: 22px
    }

    .SetupForm .enquiry-form {
        gap: .65rem 2.5rem
    }

    .SetupForm .enquiry-form .input-group label {
        font-size: 18px
    }

    .SetupForm .enquiry-form .input-group .input-field {
        font-size: 15px;
        height: 3.2rem
    }

    .SetupForm .enquiry-form .input-group textarea.input-field {
        height: 4.5rem
    }

    .SetupForm .enquiry-form .input-group select.input-field {
        font-size: 15px
    }

    .SetupForm .enquiry-form .privacy-checkbox label {
        font-size: 18px
    }

    .SetupForm button {
        font-size: 22px;
        width: 14rem;
        height: 3rem
    }
}

@media (max-width: 1440px) {
    .SetupForm {
        padding: 3rem 5rem;
        margin-top: 90px
    }

    .SetupForm .form-title {
        font-size: 42px
    }

    .SetupForm .form-description {
        font-size: 20px
    }

    .SetupForm .enquiry-form {
        gap: 1.5rem
    }

    .SetupForm .enquiry-form .input-group label {
        font-size: 17px
    }

    .SetupForm .enquiry-form .input-group .input-field {
        font-size: 14.5px;
        height: 3rem
    }

    .SetupForm .enquiry-form .input-group textarea.input-field {
        height: 4.2rem
    }

    .SetupForm .enquiry-form .input-group select.input-field {
        font-size: 14.5px
    }

    .SetupForm .enquiry-form .privacy-checkbox label {
        font-size: 17px
    }

    .SetupForm button {
        font-size: 20px;
        width: 13rem;
        height: 2.9rem
    }
}

@media (max-width: 1280px) {
    .SetupForm {
        padding: 2.5rem 4rem;
        margin-top: 80px
    }

    .SetupForm .form-title {
        font-size: 36px
    }

    .SetupForm .form-description {
        font-size: 18px
    }

    .SetupForm .enquiry-form {
        gap: 1.2rem
    }

    .SetupForm .enquiry-form .input-group label {
        font-size: 16px
    }

    .SetupForm .enquiry-form .input-group .input-field {
        font-size: 14px;
        height: 2.8rem
    }

    .SetupForm .enquiry-form .input-group textarea.input-field {
        height: 4rem
    }

    .SetupForm .enquiry-form .input-group select.input-field {
        font-size: 14px
    }

    .SetupForm .enquiry-form .privacy-checkbox label {
        font-size: 16px
    }

    .SetupForm button {
        font-size: 18px;
        width: 12rem;
        height: 2.8rem
    }

    .SetupForm .image-container .enquiry-image {
        max-width: 300px
    }

    .SetupForm .scrollup {
        width: 6%
    }
}

@media (max-width: 480px) {
    .SetupForm {
        padding: 2rem 1rem;
        margin-top: 0
    }

    .SetupForm .enquiry-form-container {
        padding: 2rem 0rem;
        margin: 0 auto;
        max-width: 100%
    }

    .SetupForm .enquiry-form-container .form-title {
        font-size: 24px;
        margin-bottom: 1.25rem
    }

    .SetupForm .enquiry-form-container .form-description {
        font-size: 1rem;
        margin-bottom: 2rem;
        max-width: 100%
    }

    .SetupForm .enquiry-form-container .enquiry-form {
        display: flex;
        flex-direction: column;
        gap: .5rem
    }

    .SetupForm .enquiry-form-container .enquiry-form .input-group {
        display: flex;
        flex-direction: column;
        gap: .35rem
    }

    .SetupForm .enquiry-form-container .enquiry-form .input-group label {
        font-size: 12px;
        font-weight: 500;
        margin-bottom: .1rem;
        display: none
    }

    .SetupForm .enquiry-form-container .enquiry-form .input-group .input-field {
        height: 3rem;
        padding: .5rem 1rem;
        border-radius: .5rem
    }

    .SetupForm .enquiry-form-container .enquiry-form .input-group textarea.input-field {
        height: 4rem;
        padding-top: 1rem
    }

    .SetupForm .enquiry-form-container .enquiry-form .privacy-checkbox {
        font-size: .875rem;
        margin-top: 1rem;
        display: flex;
        align-items: center;
        gap: .5rem
    }

    .SetupForm .enquiry-form-container .enquiry-form .privacy-checkbox .checkbox-input {
        width: 1rem;
        height: 1rem;
        border-radius: .125rem;
        background-color: transparent;
        position: relative;
        transition: all .3s ease
    }

    .SetupForm .enquiry-form-container .enquiry-form .privacy-checkbox .checkbox-input:after {
        content: "";
        position: absolute;
        top: .1rem;
        left: .25rem;
        width: .3rem;
        height: .6rem;
        border: solid #fff;
        border-width: 0 .125rem .125rem 0;
        transform: rotate(45deg);
        opacity: 0;
        transition: opacity .3s ease
    }

    .SetupForm .enquiry-form-container .enquiry-form .privacy-checkbox .checkbox-input:checked:after {
        opacity: 1
    }

    .SetupForm .enquiry-form-container .enquiry-form .privacy-checkbox .checkbox-input:checked {
        background-color: #bc2329;
        border-color: #bc2329
    }

    .SetupForm .enquiry-form-container .enquiry-form .privacy-checkbox label {
        font-size: .875rem
    }

    .SetupForm .enquiry-form-container button {
        width: 50% !important;
        height: auto !important;
        padding: .5rem 1rem !important;
        font-size: 18px !important
    }

    .SetupForm .image-container {
        padding-top: 2rem;
        margin-top: 4rem !important;
        display: flex;
        justify-content: flex-start;
        margin-left: 0 !important
    }

    .SetupForm .image-container .enquiry-image {
        width: 290px !important;
        height: 241px !important
    }
}

.hireTalent {
    text-align: left;
    padding: 0 124px 0 129px
}

.hireTalent h1 {
    width: 50%;
    color: var(--color-red);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 46px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.hireTalent h1 span {
    color: var(--color-red);
    font-size: 46px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase
}

.hireTalent .steps-ht {
    display: flex;
    justify-content: space-between;
    margin-top: 60px
}

.hireTalent .steps-ht .step-flow {
    display: flex;
    flex-direction: column;
    align-items: center
}

.hireTalent .steps-ht .step-flow .step-title {
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    margin-bottom: 20px;
    margin-left: -42%
}

.hireTalent .steps-ht .step-flow .flow-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.hireTalent .steps-ht .step-flow .yellow-box {
    border-radius: 10px;
    background: #fbc51dd9;
    box-shadow: 0 4px 25px #000c;
    width: 306px;
    height: 259px;
    display: flex;
    align-items: center;
    justify-content: center
}

.hireTalent .steps-ht .step-flow .yellow-box img {
    width: 143px;
    height: 143px
}

.hireTalent .steps-ht .step-flow .line {
    width: 80px;
    height: 2px;
    background: #000
}

.hireTalent .steps-ht .step-flow .step-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 91px;
    height: 89px;
    border-radius: 10px;
    background: var(--Color-4, #dc143c);
    padding: 12px 26px;
    color: var(--color-white);
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.hireTalent .steps-ht .step-flow .step-box .step-label {
    font-size: 16px
}

.hireTalent .steps-ht .step-flow .step-box .step-number {
    font-size: 42px
}

.hireTalent .steps-ht .step-flow .arrow {
    font-size: 42px;
    color: #000
}

.hireTalent .steps-ht .step-flow .step-description {
    text-align: center;
    width: 60%;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    margin-top: 40px;
    margin-left: -40%
}

.hireTalent button {
    display: flex;
    padding: 12px 26px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    background: var(--color-red);
    color: var(--color-white);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border: none;
    margin: 3% auto;
    cursor: pointer;
    transition: all .3s ease
}

.hireTalent button:hover {
    background: #b01032;
    box-shadow: 0 4px 12px #0003
}

@media (max-width: 1536px) {
    .hireTalent {
        padding: 10px 4%
    }

    .hireTalent h1 {
        padding-left: 90px;
        font-size: 42px;
        width: 60%
    }

    .hireTalent .steps-ht {
        margin-top: 50px
    }

    .hireTalent .steps-ht .step-flow .step-title {
        font-size: 28px;
        margin-left: -40%
    }

    .hireTalent .steps-ht .step-flow .step-description {
        font-size: 16px;
        margin-left: -42%
    }

    .hireTalent .steps-ht .step-flow .yellow-box {
        width: 270px;
        height: 220px
    }

    .hireTalent .steps-ht .step-flow .yellow-box img {
        width: 120px;
        height: 120px
    }

    .hireTalent .steps-ht .step-flow .step-box {
        width: 80px;
        height: 80px
    }

    .hireTalent .steps-ht .step-flow .step-box .step-number {
        font-size: 38px
    }

    .hireTalent .steps-ht .step-flow .step-box .step-label {
        font-size: 14px
    }

    .hireTalent .steps-ht .step-flow .line {
        width: 70px
    }

    .hireTalent button {
        font-size: 16px
    }
}

@media (max-width: 1440px) {
    .hireTalent {
        padding: 20px
    }

    .hireTalent h1 {
        font-size: 38px;
        width: 70%
    }

    .hireTalent .steps-ht {
        margin-top: 45px
    }

    .hireTalent .steps-ht .step-flow .step-title {
        font-size: 26px;
        margin-left: -45%
    }

    .hireTalent .steps-ht .step-flow .step-description {
        font-size: 20px;
        margin-left: -40%
    }

    .hireTalent .steps-ht .step-flow .yellow-box {
        width: 240px;
        height: 200px
    }

    .hireTalent .steps-ht .step-flow .yellow-box img {
        width: 110px;
        height: 110px
    }

    .hireTalent .steps-ht .step-flow .step-box {
        width: 75px;
        height: 75px
    }

    .hireTalent .steps-ht .step-flow .step-box .step-number {
        font-size: 34px
    }

    .hireTalent .steps-ht .step-flow .step-box .step-label {
        font-size: 12px
    }

    .hireTalent .steps-ht .step-flow .line {
        width: 60px
    }

    .hireTalent button {
        font-size: 14px
    }
}

@media (max-width: 1280px) {
    .hireTalent {
        padding: 20px
    }

    .hireTalent h1 {
        font-size: 34px;
        width: 80%
    }

    .hireTalent .steps-ht {
        margin-top: 40px
    }

    .hireTalent .steps-ht .step-flow .step-title {
        font-size: 24px;
        margin-left: -40%
    }

    .hireTalent .steps-ht .step-flow .step-description {
        font-size: 18px;
        margin-left: -40%
    }

    .hireTalent .steps-ht .step-flow .yellow-box {
        width: 210px;
        height: 180px
    }

    .hireTalent .steps-ht .step-flow .yellow-box img {
        width: 100px;
        height: 100px
    }

    .hireTalent .steps-ht .step-flow .step-box {
        width: 70px;
        height: 70px
    }

    .hireTalent .steps-ht .step-flow .step-box .step-number {
        font-size: 30px
    }

    .hireTalent .steps-ht .step-flow .step-box .step-label {
        font-size: 10px
    }

    .hireTalent .steps-ht .step-flow .line {
        width: 50px
    }

    .hireTalent button {
        font-size: 12px
    }
}

@media (max-width: 768px) {
    .hireTalent {
        padding: 0 20px;
        text-align: left
    }

    .hireTalent h1 {
        padding-left: 0;
        width: 100%;
        font-size: 24px;
        text-align: center
    }

    .hireTalent h1 span {
        font-size: 28px
    }

    .hireTalent .steps-ht {
        flex-direction: column;
        align-items: center;
        margin-top: 30px
    }

    .hireTalent .steps-ht .step-flow {
        margin-bottom: 40px
    }

    .hireTalent .steps-ht .step-flow .step-title {
        font-size: 20px;
        margin-left: 0
    }

    .hireTalent .steps-ht .step-flow .flow-inline {
        flex-direction: column;
        gap: 16px
    }

    .hireTalent .steps-ht .step-flow .yellow-box {
        width: 200px;
        height: 200px
    }

    .hireTalent .steps-ht .step-flow .yellow-box img {
        width: 100px;
        height: 100px
    }

    .hireTalent .steps-ht .step-flow .line {
        display: none
    }

    .hireTalent .steps-ht .step-flow .step-box {
        width: 70px;
        height: 70px;
        padding: 8px 20px
    }

    .hireTalent .steps-ht .step-flow .step-box .step-label {
        font-size: 14px
    }

    .hireTalent .steps-ht .step-flow .step-box .step-number {
        font-size: 28px
    }

    .hireTalent .steps-ht .step-flow .arrow {
        display: none
    }

    .hireTalent .steps-ht .step-flow .step-description {
        width: 90%;
        font-size: 16px;
        margin-left: 0
    }

    .hireTalent button {
        font-size: 16px;
        padding: 10px 20px;
        margin: 20px auto 0
    }
}

.hireWho {
    padding: 100px 120px 80px;
    text-align: center
}

.hireWho h1 {
    color: var(--color-red);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.hireWho p {
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    width: 70%;
    margin: auto
}

.hireWho .box-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    margin-top: 60px
}

.hireWho .box {
    box-shadow: 0 0 4px #fbc51d80;
    padding: 40px 20px;
    text-align: center;
    text-shadow: 0px 4px 10px rgba(251, 197, 29, .25);
    font-size: 32px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    text-decoration: none;
    width: 100%;
    height: 100%;
    transition: all .3s ease
}

.hireWho .note {
    text-align: center;
    margin-top: 40px;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

@media (max-width: 1536px) {
    .hireWho {
        padding: 80px 100px 60px
    }

    .hireWho h1 {
        font-size: 48px
    }

    .hireWho p {
        font-size: 22px;
        width: 80%;
        font-weight: 500
    }

    .hireWho .box-container {
        grid-template-columns: repeat(4, 1fr);
        margin-top: 40px
    }

    .hireWho .box {
        font-size: 22px;
        padding: 30px 15px;
        transition: all .3s ease
    }

    .hireWho .note {
        font-size: 22px;
        font-weight: 500
    }
}

@media (max-width: 1440px) {
    .hireWho {
        padding: 60px 90px 50px
    }

    .hireWho h1 {
        font-size: 44px
    }

    .hireWho p {
        font-size: 20px;
        width: 85%
    }

    .hireWho .box-container {
        grid-template-columns: repeat(4, 1fr);
        margin-top: 30px
    }

    .hireWho .box {
        font-size: 24px;
        padding: 25px 10px;
        transition: all .3s ease
    }

    .hireWho .note {
        font-size: 20px
    }
}

@media (max-width: 1280px) {
    .hireWho {
        padding: 50px 70px 40px
    }

    .hireWho h1 {
        font-size: 40px
    }

    .hireWho p {
        font-size: 18px;
        width: 90%
    }

    .hireWho .box-container {
        grid-template-columns: repeat(4, 1fr);
        margin-top: 20px
    }

    .hireWho .box {
        font-size: 22px;
        padding: 20px 10px;
        transition: all .3s ease
    }

    .hireWho .note {
        font-size: 18px
    }
}

@media (max-width: 480px) {
    .hireWho {
        padding: 60px 20px 40px
    }

    .hireWho h1 {
        font-size: 24px
    }

    .hireWho p {
        width: 100%;
        font-size: 16px;
        margin-top: 24px
    }

    .hireWho .box-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 40px
    }

    .hireWho .box {
        font-size: 18px;
        padding: 24px 10px
    }

    .hireWho .note {
        font-size: 16px;
        margin-top: 30px
    }
}

.hireHero {
    position: relative;
    width: 100%;
    height: 58.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.hireHero .bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.hireHero .navlinks {
    z-index: 1;
    display: flex;
    cursor: pointer
}

.hireHero .navlinks ul {
    position: absolute;
    top: 6vh;
    left: 7%;
    display: flex;
    justify-content: space-between;
    list-style: none;
    gap: 10px
}

.hireHero .navlinks ul li {
    color: var(--color-white)
}

.hireHero .navlinks ul li a {
    font-size: 16px;
    color: var(--color-white);
    text-decoration: none
}

.hireHero .navlinks ul .nav {
    padding: 1px 2px
}

.hireHero .navlinks ul .nav img {
    width: 24px;
    height: 24px
}

.hireHero h1 {
    z-index: 1;
    color: var(--yellow, #FBC51D);
    text-align: center;
    text-shadow: 0px .21vw .21vw rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.92vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

@media (max-width: 1536px) {
    .hireHero {
        height: 55vh
    }

    .hireHero .navlinks ul {
        top: 5.5vh
    }

    .hireHero .navlinks ul li a {
        font-size: 15px
    }

    .hireHero .navlinks ul .nav img {
        width: 22px;
        height: 22px
    }

    .hireHero h1 {
        font-size: 2.6vw
    }
}

@media (max-width: 1440px) {
    .hireHero {
        height: 52vh
    }

    .hireHero .navlinks ul {
        top: 5vh
    }

    .hireHero .navlinks ul li a {
        font-size: 14px
    }

    .hireHero .navlinks ul .nav img {
        width: 20px;
        height: 20px
    }

    .hireHero h1 {
        font-size: 2.4vw
    }
}

@media (max-width: 1280px) {
    .hireHero {
        height: 50vh
    }

    .hireHero .navlinks ul {
        top: 4.5vh;
        left: 6%
    }

    .hireHero .navlinks ul li a {
        font-size: 13px
    }

    .hireHero .navlinks ul .nav img {
        width: 18px;
        height: 18px
    }

    .hireHero h1 {
        font-size: 2.2vw
    }
}

@media (max-width: 480px) {
    .hireHero {
        height: 35vh
    }

    .hireHero .navlinks ul {
        top: 20px;
        gap: 5px
    }

    .hireHero .navlinks ul li a {
        font-size: 14px
    }

    .hireHero .navlinks ul .nav {
        padding: 0;
        scale: .8
    }

    .hireHero h1 {
        font-size: 24px;
        padding: 0 20px;
        text-align: center;
        text-shadow: 0px 2px 4px rgba(0, 0, 0, .4)
    }
}

.hireSub {
    height: 529px;
    margin: 80px 120px;
    display: flex;
    justify-content: center;
    align-items: center
}

.hireSub .hsLeft {
    width: 50%;
    border-radius: 10px 0 0 10px
}

.hireSub .hsLeft img {
    width: 834px;
    height: 520px
}

.hireSub .hsRight {
    width: 50%;
    border-radius: 0 10px 10px 0;
    background: #fbc51d33;
    display: flex;
    flex-direction: column;
    padding: 60px 20px 170px 40px
}

.hireSub .hsRight h1 {
    color: var(--color-red);
    font-family: 'Sora-SemiBold';
    font-size: 46px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 40px
}

.hireSub .hsRight p {
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

@media (max-width: 1536px) {
    .hireSub {
        height: 500px;
        margin: 70px 100px
    }

    .hireSub .hsLeft img {
        width: 660px;
        height: 455px
    }

    .hireSub .hsRight {
        padding: 50px 20px 140px 30px
    }

    .hireSub .hsRight h1 {
        font-size: 42px;
        margin-bottom: 36px
    }

    .hireSub .hsRight p {
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .hireSub {
        height: 480px;
        margin: 60px 80px
    }

    .hireSub .hsLeft img {
        width: 605px;
        height: 440px
    }

    .hireSub .hsRight {
        padding: 45px 20px 120px 25px
    }

    .hireSub .hsRight h1 {
        font-size: 38px;
        margin-bottom: 32px
    }

    .hireSub .hsRight p {
        font-size: 21px
    }
}

@media (max-width: 1280px) {
    .hireSub {
        height: 450px;
        margin: 50px 60px
    }

    .hireSub .hsLeft img {
        width: 580px;
        height: 370px
    }

    .hireSub .hsRight {
        padding: 40px 15px 100px 20px
    }

    .hireSub .hsRight h1 {
        font-size: 34px;
        margin-bottom: 28px
    }

    .hireSub .hsRight p {
        font-size: 20px
    }
}

@media (max-width: 480px) {
    .hireSub {
        flex-direction: column-reverse;
        height: auto;
        margin: 40px 20px
    }

    .hireSub .hsRight {
        width: 100%;
        border-radius: 10px 10px 0 0;
        padding: 40px 20px;
        background: #fbc51d33
    }

    .hireSub .hsRight h1 {
        font-size: 24px;
        margin-bottom: 20px;
        text-align: center
    }

    .hireSub .hsRight p {
        font-size: 16px;
        text-align: center
    }

    .hireSub .hsLeft {
        width: 100%;
        border-radius: 0 0 10px 10px
    }

    .hireSub .hsLeft img {
        width: 100%;
        height: auto;
        border-radius: 0 0 10px 10px
    }
}

.hireCTA {
    background: linear-gradient(0deg, #000c, #000c), url(/assets/hireCTA-lI4lYwak.jpeg) #d3d3d3 0px -180.631px/100% 228.8% no-repeat;
    height: 250px;
    margin: 0 123px;
    padding: 44px 155px
}

.hireCTA h1 {
    color: var(--yellow, #fbc51d);
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

@media (max-width: 1536px) {
    .hireCTA {
        height: 230px;
        margin: 0 100px;
        padding: 40px 130px
    }

    .hireCTA h1 {
        font-size: 50px
    }
}

@media (max-width: 1440px) {
    .hireCTA {
        height: 220px;
        margin: 0 80px;
        padding: 36px 110px
    }

    .hireCTA h1 {
        font-size: 46px
    }
}

@media (max-width: 1280px) {
    .hireCTA {
        height: 200px;
        margin: 0 60px;
        padding: 30px 90px
    }

    .hireCTA h1 {
        font-size: 42px
    }
}

@media (max-width: 480px) {
    .hireCTA {
        margin: 0 20px;
        padding: 30px 20px;
        height: auto;
        background: linear-gradient(0deg, #000c, #000c), url(/assets/hireCTA-lI4lYwak.jpeg) #d3d3d3 center/cover no-repeat
    }

    .hireCTA h1 {
        font-size: 24px;
        text-align: center;
        line-height: 1.4
    }
}

.hfa-form-container {
    max-width: 87%;
    margin: 60px auto;
    padding: 45px 10%;
    background: #fcfbf6
}

.hfa-form-container h2 {
    color: var(--color-red);
    text-shadow: 0rem .2rem .33rem rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.13;
    width: 100%;
    margin: 0;
    text-align: center;
    margin-bottom: 1.5rem
}

.hfa-form-container .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

@media (max-width: 768px) {
    .hfa-form-container .form-grid {
        grid-template-columns: 1fr
    }
}

.hfa-form-container .form-group {
    display: flex;
    flex-direction: column
}

.hfa-form-container .form-group label {
    font-weight: 700;
    margin-bottom: 5px
}

.hfa-form-container .form-group input {
    padding: .83rem 1.67rem;
    align-items: center;
    border: none;
    border: 1px solid rgba(255, 30, 50, .3);
    border-radius: 12px;
    color: #2c2c2c;
    font-size: 1.17rem;
    font-weight: 500;
    background-color: transparent;
    width: 100%
}

.hfa-form-container .error {
    color: red;
    font-size: .85rem;
    margin-top: 2px;
    margin-bottom: 0
}

.hfa-form-container .form-actions {
    grid-column: 1/-1;
    text-align: center
}

.hfa-form-container .submit-btn {
    min-width: 190px;
    background-color: #fbc51d;
    color: #000;
    padding: 12px 20px;
    border: none;
    border-radius: 50em;
    cursor: pointer;
    font-size: 1.5rem;
    transition: background-color .3s ease, transform .2s ease
}

.hfa-form-container .submit-btn:hover {
    background-color: #2c2c2c;
    color: var(--color-white);
    transform: translateY(-2px)
}

.hfa-form-container .progress-container {
    grid-column: 1/-1;
    text-align: center
}

.hfa-form-container .progress-bar {
    height: 6px;
    background-color: var(--color-red);
    width: 100%;
    animation: loading 1s infinite
}

@keyframes loading {
    0% {
        opacity: .3
    }

    50% {
        opacity: 1
    }

    to {
        opacity: .3
    }
}

.hfa-form-container .success-message {
    background-color: #d4edda;
    padding: 15px;
    border-radius: 4px;
    text-align: center
}

.hfa-form-container .success-message h3 {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #155724
}

.hfa-form-container .success-message p {
    font-size: .85rem;
    margin-bottom: 20px;
    color: #000
}

@media screen and (max-width: 767px) {
    .hfa-form-container {
        max-width: 89%;
        padding: 30px 5%
    }

    .hfa-form-container .form-grid {
        gap: 10px
    }
}

.aboutHero {
    background: linear-gradient(0deg, #dc143c80, #dc143c80), url(/assets/aboutHero-BTvHmA1R.png) #d3d3d3 50%/cover no-repeat;
    height: 71vh;
    background-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center
}

.aboutHero .navlinks {
    display: flex;
    cursor: pointer
}

.aboutHero .navlinks ul {
    position: absolute;
    top: 16vh;
    left: 7%;
    display: flex;
    justify-content: space-between;
    list-style: none;
    gap: 10px
}

.aboutHero .navlinks ul li {
    color: var(--color-white)
}

.aboutHero .navlinks ul li a {
    color: var(--color-white);
    text-decoration: none
}

.aboutHero .navlinks ul .nav {
    height: 10%
}

.aboutHero .title h1 {
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--color-white)
}

@media (max-width: 1536px) {
    .aboutHero {
        height: 65vh;
        background-size: cover;
        text-align: center
    }

    .aboutHero .navlinks ul {
        top: 18vh;
        left: 5.5%;
        gap: 8px
    }

    .aboutHero .navlinks ul li a {
        font-size: 18px
    }

    .aboutHero .navlinks ul .nav {
        height: 8%
    }

    .aboutHero .title h1 {
        font-size: 50px
    }
}

@media (max-width: 1440px) {
    .aboutHero {
        height: 60vh;
        background-size: cover
    }

    .aboutHero .navlinks ul {
        top: 17vh;
        left: 5%;
        gap: 7px
    }

    .aboutHero .navlinks ul li a {
        font-size: 16px
    }

    .aboutHero .navlinks ul .nav {
        height: 7%
    }

    .aboutHero .title h1 {
        font-size: 46px
    }
}

@media (max-width: 1280px) {
    .aboutHero {
        height: 55vh;
        background-size: cover
    }

    .aboutHero .navlinks ul {
        top: 18vh;
        left: 4.5%;
        gap: 6px
    }

    .aboutHero .navlinks ul li a {
        font-size: 15px
    }

    .aboutHero .navlinks ul .nav {
        height: 6%
    }

    .aboutHero .title h1 {
        font-size: 42px
    }
}

@media (max-width: 480px) {
    .aboutHero {
        height: 225px;
        background-size: cover;
        background-position: center
    }

    .aboutHero .navlinks ul {
        top: 12vh;
        left: 5%;
        gap: 5px
    }

    .aboutHero .navlinks ul li,
    .aboutHero .navlinks ul li a {
        font-size: 12px
    }

    .aboutHero .navlinks ul .nav {
        padding: 0 1px;
        scale: .7
    }

    .aboutHero .title h1 {
        font-size: 28px;
        text-align: center;
        max-width: 100%
    }
}

.aboutLegacy {
    padding: 2% 2.25%;
    text-align: center
}

.aboutLegacy h2 {
    color: var(--color-red);
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-weight: 400;
    margin-bottom: .5rem
}

.aboutLegacy h3 {
    color: #2c2c2c;
    font-size: 24px;
    font-weight: 650;
    margin-bottom: 1rem
}

.aboutLegacy p {
    color: #2c2c2c;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .8px;
    width: 55%;
    margin: auto;
    margin-bottom: 2rem
}

.aboutLegacy .note {
    margin-top: 3%;
    color: #2c2c2c;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .8px
}

@media (max-width: 1536px) {
    .aboutLegacy {
        padding: 2%
    }

    .aboutLegacy h2 {
        font-size: 50px;
        margin-bottom: .4rem
    }

    .aboutLegacy h3 {
        font-size: 22px;
        margin-bottom: .8rem
    }

    .aboutLegacy p {
        font-size: 18px;
        letter-spacing: .6px;
        width: 60%
    }

    .aboutLegacy .note {
        font-size: 18px;
        letter-spacing: .6px
    }
}

@media (max-width: 1440px) {
    .aboutLegacy {
        padding: 2% 1.75%
    }

    .aboutLegacy h2 {
        font-size: 46px;
        margin-bottom: .35rem
    }

    .aboutLegacy h3 {
        font-size: 20px;
        margin-bottom: .7rem
    }

    .aboutLegacy p {
        font-size: 17px;
        letter-spacing: .6px;
        width: 62%;
        margin-bottom: 1.8rem
    }

    .aboutLegacy .note {
        font-size: 17px;
        letter-spacing: .6px
    }
}

@media (max-width: 1280px) {
    .aboutLegacy {
        padding: 2% 1.5%
    }

    .aboutLegacy h2 {
        font-size: 42px;
        margin-bottom: .3rem
    }

    .aboutLegacy h3 {
        font-size: 18px;
        margin-bottom: .6rem
    }

    .aboutLegacy p {
        font-size: 16px;
        letter-spacing: .5px;
        width: 65%;
        margin-bottom: 1.5rem
    }

    .aboutLegacy .note {
        font-size: 16px;
        letter-spacing: .5px
    }
}

@media (max-width: 480px) {
    .aboutLegacy {
        padding: 5% 2%
    }

    .aboutLegacy .container {
        max-width: 100%
    }

    .aboutLegacy h2 {
        font-size: 24px;
        margin-bottom: .8rem
    }

    .aboutLegacy h3 {
        font-size: 18px;
        margin-bottom: .8rem
    }

    .aboutLegacy p {
        font-size: 16px;
        width: 100%;
        margin-bottom: 1.5rem
    }

    .aboutLegacy .note {
        font-size: 16px;
        margin-top: 5%
    }
}

.edge {
    padding: 5% 8%;
    background: linear-gradient(0deg, #dc143c80, #dc143c80), url(/assets/bg-image-BJWqE2gj.png) #d3d3d3 50%/cover no-repeat;
    text-align: center;
    color: var(--color-white)
}

.edge .container {
    max-width: 1200px;
    margin: auto
}

.edge h2 {
    color: #fbc51d;
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-weight: 400;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    text-align: center;
    margin-bottom: 2rem
}

.edge .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem
}

.edge .edge-content {
    flex: 1;
    text-align: left
}

.edge .edge-content ul {
    list-style: none;
    padding: 0
}

.edge .edge-content .edge-item {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
    position: relative
}

.edge .edge-content .edge-item .number {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c2c2c;
    position: relative;
    z-index: 2
}

.edge .edge-content .edge-item .number:before {
    content: "";
    position: absolute;
    width: 60px;
    height: 60px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60' fill='none'%3E%3Ccircle cx='30' cy='30' r='30' fill='url(%23paint0_linear_2858_2315)'/%3E%3Ccircle cx='30' cy='30' r='24' fill='%23FBC51D'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_2858_2315' x1='30' y1='0' x2='30' y2='60' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF200' stop-opacity='0.4'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat center/contain;
    z-index: -1
}

.edge .edge-content .edge-item .text {
    color: var(--color-white);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .8px;
    text-align: left
}

.edge .edge-content .edge-item .text p {
    margin-top: 4px
}

.edge .edge-content .edge-item strong {
    color: var(--color-white);
    font-size: 24px;
    font-weight: 650
}

.edge .edge-image {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative
}

.edge .edge-image img {
    max-width: 680px;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px #0003;
    z-index: 3
}

.edge .edge-image:before {
    content: "";
    position: absolute;
    border-radius: 10px;
    top: 4%;
    left: 20%;
    width: 500px;
    height: 600.2px;
    border: 6px solid #fbc51d;
    z-index: 2
}

.edge .video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000c;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000
}

.edge .video-modal .video-modal-content {
    position: relative;
    border-radius: 10px;
    box-shadow: 0 4px 10px #0000004d
}

.edge .video-modal .video-modal-content iframe {
    display: block;
    max-width: 100%;
    border-radius: 10px
}

.edge .video-modal .close-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--color-red);
    color: var(--color-white);
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: .2rem .5rem;
    border-radius: 50%
}

@media (max-width: 1536px) {
    .edge {
        padding: 4% 7%
    }

    .edge h2 {
        font-size: 50px;
        margin-bottom: 1.8rem
    }

    .edge .content {
        gap: 1.8rem
    }

    .edge .edge-content ul {
        padding: 0
    }

    .edge .edge-content .edge-item {
        gap: 1.5rem;
        margin-bottom: 1.2rem
    }

    .edge .edge-content .edge-item .number {
        width: 55px;
        height: 55px;
        font-size: 1.4rem
    }

    .edge .edge-content .edge-item .text {
        font-size: 18px;
        letter-spacing: .7px
    }

    .edge .edge-content .edge-item .text p {
        margin-top: 3px
    }

    .edge .edge-content .edge-item strong {
        font-size: 22px
    }

    .edge .edge-image img {
        max-width: 550px;
        border-radius: 8px
    }

    .edge .edge-image:before {
        width: 460px;
        height: 550px;
        border: 5px solid #fbc51d
    }
}

@media (max-width: 1440px) {
    .edge {
        padding: 3.5% 6%
    }

    .edge h2 {
        font-size: 44px;
        margin-bottom: 1.6rem
    }

    .edge .content {
        gap: 1.5rem
    }

    .edge .edge-content .edge-item {
        gap: 1.3rem;
        margin-bottom: 1rem
    }

    .edge .edge-content .edge-item .number {
        width: 50px;
        height: 50px;
        font-size: 1.3rem
    }

    .edge .edge-content .edge-item .text {
        font-size: 17px;
        letter-spacing: .6px
    }

    .edge .edge-content .edge-item .text p {
        margin-top: 2px
    }

    .edge .edge-content .edge-item strong {
        font-size: 20px
    }

    .edge .edge-image img {
        max-width: 500px;
        border-radius: 8px
    }

    .edge .edge-image:before {
        width: 440px;
        height: 500px;
        border: 4px solid #fbc51d
    }
}

@media (max-width: 1280px) {
    .edge {
        padding: 3% 5%
    }

    .edge h2 {
        font-size: 40px;
        margin-bottom: 1.4rem
    }

    .edge .content {
        gap: 1.2rem
    }

    .edge .edge-content .edge-item {
        gap: 1.2rem;
        margin-bottom: .9rem
    }

    .edge .edge-content .edge-item .number {
        width: 45px;
        height: 45px;
        font-size: 1.2rem
    }

    .edge .edge-content .edge-item .text {
        font-size: 16px;
        letter-spacing: .5px
    }

    .edge .edge-content .edge-item .text p {
        margin-top: 2px
    }

    .edge .edge-content .edge-item strong {
        font-size: 18px
    }

    .edge .edge-image img {
        max-width: 440px;
        border-radius: 7px
    }

    .edge .edge-image:before {
        width: 410px;
        height: 450px;
        border: 3px solid #fbc51d
    }
}

@media (max-width: 480px) {
    .edge {
        padding: 8% 5%;
        text-align: center;
        background-position: top right
    }

    .edge h2 {
        font-size: 24px;
        margin-bottom: 1.5rem
    }

    .edge .content {
        flex-direction: column;
        align-items: center;
        gap: 2rem
    }

    .edge .edge-content {
        text-align: center
    }

    .edge .edge-content .edge-item {
        flex-direction: row;
        align-items: center;
        text-align: center;
        gap: 2rem
    }

    .edge .edge-content .edge-item .number {
        font-size: 18px
    }

    .edge .edge-content .edge-item .text {
        font-size: 14px
    }

    .edge .edge-content .edge-item strong {
        font-size: 16px
    }

    .edge .video-modal {
        padding: 4%
    }

    .edge .edge-image {
        order: -1;
        width: 100%;
        justify-content: center
    }

    .edge .edge-image img {
        width: 326.119px;
        height: 333.792px;
        border-radius: 10px
    }

    .edge .edge-image:before {
        width: 80%;
        height: 80%;
        top: 22%;
        left: 22%;
        border-width: 4px
    }
}

.ourStory {
    padding: 3.4% 6.25% 2%
}

.ourStory .container {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center
}

.ourStory .heading {
    text-align: center
}

.ourStory .heading h2 {
    color: var(--color-red);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3)
}

.ourStory .heading h3 {
    text-align: center;
    color: #2c2c2c;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.ourStory .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4rem
}

.ourStory .image-content {
    display: flex;
    justify-content: center;
    align-items: center
}

.ourStory .image-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px #0003
}

.ourStory .text-content {
    flex: 1;
    text-align: left;
    margin-top: 2%
}

.ourStory .text-content p {
    color: #2c2c2c;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    margin-bottom: 40px
}

@media (max-width: 1536px) {
    .ourStory {
        padding: 3% 5%
    }

    .ourStory .heading h2 {
        font-size: 50px
    }

    .ourStory .heading h3 {
        font-size: 22px;
        margin-bottom: 2rem
    }

    .ourStory .content {
        gap: 0rem
    }

    .ourStory .image-content img {
        max-width: 80%;
        border-radius: 8px
    }

    .ourStory .text-content p {
        font-size: 16px;
        letter-spacing: .2px;
        margin-bottom: 20px
    }

    .ourStory .text-content .strong {
        font-size: 18px;
        margin-bottom: 30px
    }
}

@media (max-width: 1440px) {
    .ourStory {
        padding: 2.8% 4.5%
    }

    .ourStory .heading h2 {
        font-size: 46px
    }

    .ourStory .heading h3 {
        font-size: 20px;
        margin-bottom: 1.8rem
    }

    .ourStory .content {
        gap: 2rem
    }

    .ourStory .image-content img {
        max-width: 75%;
        border-radius: 8px
    }

    .ourStory .text-content p {
        font-size: 15px;
        margin-bottom: 18px
    }

    .ourStory .text-content .strong {
        font-size: 17px;
        margin-bottom: 25px
    }
}

@media (max-width: 1280px) {
    .ourStory {
        padding: 2.5% 4%
    }

    .ourStory .heading h2 {
        font-size: 42px
    }

    .ourStory .heading h3 {
        font-size: 18px;
        margin-bottom: 1.5rem
    }

    .ourStory .content {
        gap: 1.5rem
    }

    .ourStory .image-content img {
        max-width: 70%;
        border-radius: 6px
    }

    .ourStory .text-content p {
        font-size: 14px;
        margin-bottom: 16px
    }

    .ourStory .text-content .strong {
        font-size: 16px;
        margin-bottom: 22px
    }
}

@media (max-width: 480px) {
    .ourStory {
        padding: 10% 3% 5%
    }

    .ourStory .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center
    }

    .ourStory .heading h2 {
        font-size: 24px;
        text-align: center;
        margin-bottom: 2%
    }

    .ourStory .heading h3 {
        font-size: 18px;
        margin-bottom: 1rem
    }

    .ourStory .content {
        flex-direction: column;
        gap: 2rem;
        text-align: center
    }

    .ourStory .image-content {
        width: 100%;
        display: flex;
        justify-content: center
    }

    .ourStory .image-content img {
        width: 100%;
        max-width: 350px;
        height: auto
    }

    .ourStory .text-content {
        text-align: center
    }

    .ourStory .text-content p {
        font-size: 14px;
        margin-bottom: 12px
    }

    .ourStory .text-content .strong {
        font-size: 16px;
        margin-bottom: 20px
    }
}

.story {
    padding: 2% 6.25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center
}

.story .heading {
    width: 100%
}

.story .heading h1 {
    color: var(--color-red);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    padding-bottom: 1.21%
}

.story .heading p {
    width: 80%;
    margin: 0 auto 0 10%;
    color: #2c2c2c;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: .8px;
    padding-bottom: 1.21%
}

.story .heading h2 {
    color: #2c2c2c;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    padding-bottom: 2.41%
}

.story .heading button {
    color: #2c2c2c;
    font-size: 18px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    padding: 12px 26px;
    border-radius: 10px;
    background-color: #fbc51d;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 0 auto
}

.story .heading button:hover {
    background-color: #2c2c2c;
    color: var(--color-white)
}

.story .navigate {
    opacity: 0;
    gap: 10px
}

.story .navigate .slider-icon {
    cursor: pointer !important;
    background-color: #fbc51d !important;
    color: #2c2c2c !important;
    border-radius: 50% !important;
    font-size: 14px !important;
    font-weight: 100 !important;
    padding: 6px 12px !important
}

.story .superstars-container {
    width: 100%;
    max-width: 100%;
    text-align: left;
    padding: 3% 6.25% 0;
    margin: -5% auto auto
}

.story .superstars-container .superstars-slider {
    display: flex;
    align-items: center;
    justify-content: center
}

.story .superstars-container .superstars-slider .slider-icon {
    cursor: pointer;
    background-color: #fbc51d;
    color: #2c2c2c;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 100;
    height: 3.125rem;
    padding: .4rem 1.1875rem
}

.story .superstars-container .superstars-slider .superstars-cards {
    display: flex;
    gap: 1.25rem
}

.story .superstars-container .superstars-slider .superstars-cards .superstars-card {
    width: 25.125rem;
    height: 33.3125rem;
    border-radius: .625rem;
    background: var(--color-red);
    box-shadow: -.25rem -.25rem .625rem #a02737 inset, 0 .25rem .25rem #00000040, .25rem .25rem .625rem #a02737 inset;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden
}

.story .superstars-container .superstars-slider .superstars-cards .superstars-card .card-background {
    width: 25.125rem;
    height: 30.9375rem;
    border-radius: .625rem .625rem 0 0;
    background-size: cover;
    background-position: center
}

.story .superstars-container .superstars-slider .superstars-cards .superstars-card .profile-picture {
    width: 5.375rem;
    height: 5.375rem;
    border-radius: .625rem;
    position: absolute;
    top: 19.875rem;
    left: calc(50% - 2.375rem);
    background-color: #d3d3d3
}

.story .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text {
    display: flex;
    flex-direction: row;
    max-width: 24.125rem;
    padding: 1.875rem .625rem 1.25rem
}

.story .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text .titles {
    margin-left: .625rem
}

.story .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text .titles p {
    max-width: 8.6875rem;
    color: #fbc51d;
    font-size: .9rem;
    font-weight: 500;
    margin-bottom: .25rem
}

.story .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text .values p {
    margin-left: .9375rem;
    font-size: .92rem;
    font-weight: 500;
    color: var(--color-white);
    margin-bottom: .3125rem
}

@media (max-width: 1536px) {
    .story {
        padding: 2% 5%
    }

    .story .heading h1 {
        font-size: 50px;
        padding-bottom: 1rem
    }

    .story .heading p {
        font-size: 18px;
        width: 75%;
        letter-spacing: .7px
    }

    .story .heading h2 {
        font-size: 22px;
        padding-bottom: 2rem
    }

    .story .heading button {
        font-size: 17px;
        padding: 10px 24px;
        border-radius: 8px
    }

    .story .navigate {
        gap: 8px
    }

    .story .navigate .slider-icon {
        font-size: 13px;
        padding: 5px 11px
    }

    .story .superstars-container {
        padding: 3% 4% 0;
        margin-top: -4%
    }

    .story .superstars-container .superstars-slider {
        gap: 1rem
    }

    .story .superstars-container .superstars-slider .superstars-cards {
        gap: .8rem
    }

    .story .superstars-container .superstars-slider .superstars-cards .superstars-card {
        width: 22rem;
        height: 30rem;
        border-radius: 10px
    }

    .story .superstars-container .superstars-slider .superstars-cards .superstars-card .card-background {
        width: 100%;
        height: 29rem
    }

    .story .superstars-container .superstars-slider .superstars-cards .superstars-card .profile-picture {
        width: 4.5rem;
        height: 4.5rem;
        top: 18rem;
        left: 50%;
        transform: translate(-50%)
    }

    .story .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text {
        padding: 1.5rem
    }

    .story .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text .titles p {
        font-size: 13px
    }

    .story .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text .values p {
        font-size: 12px;
        margin-left: .5rem
    }
}

@media (max-width: 1440px) {
    .story {
        padding: 2% 4%
    }

    .story .heading h1 {
        font-size: 44px;
        padding-bottom: .9rem
    }

    .story .heading p {
        font-size: 17px;
        width: 72%;
        letter-spacing: .7px
    }

    .story .heading h2 {
        font-size: 20px;
        padding-bottom: 1.8rem
    }

    .story .heading button {
        font-size: 16px;
        padding: 9px 22px;
        border-radius: 8px
    }

    .story .navigate {
        gap: 7px
    }

    .story .navigate .slider-icon {
        font-size: 12px;
        padding: 5px 10px
    }

    .story .superstars-container {
        padding: 3% 3% 0;
        margin-top: -3.5%
    }

    .story .superstars-container .superstars-slider .superstars-cards {
        gap: .75rem
    }

    .story .superstars-container .superstars-slider .superstars-cards .superstars-card {
        width: 20rem;
        height: 28rem
    }

    .story .superstars-container .superstars-slider .superstars-cards .superstars-card .card-background {
        height: 27rem
    }

    .story .superstars-container .superstars-slider .superstars-cards .superstars-card .profile-picture {
        width: 4.25rem;
        height: 4.25rem;
        top: 17rem
    }

    .story .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text {
        padding: 1.25rem 1.25rem 1rem
    }

    .story .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text .titles p {
        font-size: 12.5px
    }

    .story .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text .values p {
        font-size: 11.5px;
        margin-left: .5rem
    }
}

@media (max-width: 1280px) {
    .story {
        padding: 2% 3%
    }

    .story .heading h1 {
        font-size: 38px;
        padding-bottom: .8rem
    }

    .story .heading p {
        font-size: 16px;
        width: 70%;
        letter-spacing: .6px
    }

    .story .heading h2 {
        font-size: 18px;
        padding-bottom: 1.6rem
    }

    .story .heading button {
        font-size: 15px;
        padding: 8px 20px;
        border-radius: 7px
    }

    .story .navigate {
        gap: 6px
    }

    .story .navigate .slider-icon {
        font-size: 11px;
        padding: 4px 9px
    }

    .story .superstars-container {
        padding: 2.5% 2.5% 0;
        margin-top: -3%
    }

    .story .superstars-container .superstars-slider .superstars-cards {
        gap: .6rem
    }

    .story .superstars-container .superstars-slider .superstars-cards .superstars-card {
        width: 18rem;
        height: 26rem
    }

    .story .superstars-container .superstars-slider .superstars-cards .superstars-card .card-background {
        height: 25rem
    }

    .story .superstars-container .superstars-slider .superstars-cards .superstars-card .profile-picture {
        width: 4rem;
        height: 4rem;
        top: 16rem
    }

    .story .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text {
        padding: 1rem 1rem .2rem
    }

    .story .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text .titles p {
        font-size: 12px
    }

    .story .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text .values p {
        font-size: 11px;
        margin-left: .4rem
    }
}

@media (max-width: 480px) {
    .story {
        padding: 6% 5%;
        text-align: center
    }

    .story .heading h1 {
        font-size: 24px;
        padding-bottom: 1rem
    }

    .story .heading p {
        width: 100%;
        font-size: 16px;
        margin-left: 0
    }

    .story .heading h2 {
        font-size: 18px;
        padding-bottom: 1.5rem
    }

    .story .heading button {
        font-size: 18px;
        padding: 12px 26px;
        border-radius: 10px
    }

    .story .navigate {
        gap: 8px !important;
        opacity: 1 !important;
        display: flex;
        flex-direction: row;
        padding-top: 4%;
        padding-left: 70%
    }

    .story .navigate .slider-icon {
        font-size: 13px !important;
        padding: 5px 11px !important
    }

    .story .superstars-container {
        padding: 8% 3% 0;
        overflow: hidden
    }

    .story .superstars-container .superstars-slider {
        display: flex;
        flex-direction: row;
        gap: 0;
        overflow: hidden;
        width: 100%;
        position: relative
    }

    .story .superstars-container .superstars-slider .superstars-cards {
        display: flex;
        flex-direction: row;
        transition: transform .3s ease-in-out;
        width: 100%
    }

    .story .superstars-container .superstars-slider .superstars-cards .superstars-card {
        flex: 0 0 100%;
        width: 100%;
        height: auto;
        border-radius: 10px
    }

    .story .superstars-container .superstars-slider .superstars-cards .superstars-card .card-background {
        width: 100%;
        height: 14rem
    }

    .story .superstars-container .superstars-slider .superstars-cards .superstars-card .profile-picture {
        width: 4.5rem;
        height: 4.5rem;
        top: 12rem;
        left: 50%;
        transform: translate(-50%)
    }

    .story .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text {
        flex-direction: row;
        padding: 1rem;
        margin-top: 1.8rem
    }

    .story .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text .titles p {
        font-size: 14px
    }

    .story .superstars-container .superstars-slider .superstars-cards .superstars-card .card-text .values p {
        font-size: 14px;
        margin-left: .5rem
    }

    .sauactive {
        display: flex;
        justify-content: center;
        gap: 1rem;
        margin-top: 2.5rem
    }

    .sauactive .saupage {
        height: 8px;
        width: 8px;
        border-radius: 50%;
        background-color: #da1e3733;
        transition: background-color .3s ease
    }

    .sauactive .saupage.sauactive-page {
        background-color: #da1e37
    }
}

.AllianceHero {
    background-image: url(/assets/h1-B4GYP1HL.jpeg);
    height: 73vh;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #0009;
    background-blend-mode: multiply
}

.AllianceHero .navlinks {
    display: flex;
    cursor: pointer
}

.AllianceHero .navlinks ul {
    position: absolute;
    top: 16vh;
    left: 7%;
    display: flex;
    justify-content: space-between;
    list-style: none;
    gap: 10px
}

.AllianceHero .navlinks ul li {
    font-size: 16px;
    color: var(--color-white)
}

.AllianceHero .navlinks ul li a {
    font-size: 16px;
    color: var(--color-white);
    text-decoration: none
}

.AllianceHero .navlinks ul .nav {
    padding: 1px 2px
}

.AllianceHero .navlinks ul .nav img {
    width: 20px;
    height: 20px
}

.AllianceHero .content {
    position: relative
}

.AllianceHero .content h1 {
    position: absolute;
    top: 25vh;
    left: 40%;
    color: var(--color-white);
    font-size: 3rem;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 10px;
    text-shadow: 0 .3rem .3rem rgba(0, 0, 0, .3)
}

.AllianceHero .content p {
    position: absolute;
    top: 35vh;
    left: 15%;
    width: 70%;
    color: var(--color-white);
    font-weight: 650;
    font-size: 24px;
    line-height: 28.8px;
    letter-spacing: 0%;
    text-align: center
}

.AllianceHero .content p a {
    text-decoration: none
}

@media (max-width: 1536px) {
    .AllianceHero {
        height: 70vh;
        background-size: cover
    }

    .AllianceHero .navlinks ul {
        top: 18vh;
        left: 6%;
        gap: 8px
    }

    .AllianceHero .navlinks ul li a {
        font-size: 18px
    }

    .AllianceHero .navlinks ul .nav {
        padding: 4px 1px
    }

    .AllianceHero .navlinks ul .nav img {
        width: 22px;
        height: 22px
    }

    .AllianceHero .content h1 {
        top: 25vh;
        left: 38%;
        font-size: 2.8rem;
        text-shadow: 0 .25rem .25rem rgba(0, 0, 0, .3)
    }

    .AllianceHero .content p {
        top: 35vh;
        left: 12%;
        width: 75%;
        font-size: 22px;
        line-height: 26px
    }
}

@media (max-width: 1440px) {
    .AllianceHero {
        height: 68vh;
        background-size: cover
    }

    .AllianceHero .navlinks ul {
        top: 17vh;
        left: 5.5%;
        gap: 7px
    }

    .AllianceHero .navlinks ul li,
    .AllianceHero .navlinks ul li a {
        font-size: 15px
    }

    .AllianceHero .navlinks ul .nav {
        padding: 2px
    }

    .AllianceHero .navlinks ul .nav img {
        width: 18px;
        height: 18px
    }

    .AllianceHero .content h1 {
        top: 24vh;
        left: 36%;
        font-size: 2.5rem;
        text-shadow: 0 .25rem .25rem rgba(0, 0, 0, .3)
    }

    .AllianceHero .content p {
        top: 34vh;
        left: 11%;
        width: 78%;
        font-size: 21px;
        line-height: 26px
    }
}

@media (max-width: 1280px) {
    .AllianceHero {
        height: 65vh;
        background-size: cover
    }

    .AllianceHero .navlinks ul {
        top: 18vh;
        left: 5%;
        gap: 6px
    }

    .AllianceHero .navlinks ul li,
    .AllianceHero .navlinks ul li a {
        font-size: 14px
    }

    .AllianceHero .navlinks ul .nav {
        padding: 2px
    }

    .AllianceHero .navlinks ul .nav img {
        width: 16px;
        height: 16px
    }

    .AllianceHero .content h1 {
        top: 23vh;
        left: 34%;
        font-size: 2.2rem;
        text-shadow: 0 .2rem .2rem rgba(0, 0, 0, .3)
    }

    .AllianceHero .content p {
        top: 33vh;
        left: 10%;
        width: 80%;
        font-size: 20px;
        line-height: 24px
    }
}

@media (max-width: 480px) {
    .AllianceHero {
        padding: 0 2% !important;
        height: 335.73px;
        background-size: cover;
        background-position: center
    }

    .AllianceHero .navlinks ul {
        top: 12vh;
        left: 5%;
        gap: 5px
    }

    .AllianceHero .navlinks ul li,
    .AllianceHero .navlinks ul li a {
        font-size: 12px
    }

    .AllianceHero .navlinks ul .nav {
        padding: 0 1px;
        scale: .6
    }

    .AllianceHero .content h1 {
        top: 6vh;
        left: 50%;
        transform: translate(-50%);
        font-size: 24px;
        text-align: center;
        width: 100%
    }

    .AllianceHero .content p {
        top: 11vh;
        left: 50%;
        transform: translate(-50%);
        width: 85%;
        font-size: 14px;
        line-height: 22px;
        width: 100%
    }
}

.industry-section {
    width: 100%;
    padding: 3.7% 6.25%;
    text-align: center;
    display: flex;
    flex-direction: column
}

.industry-section .industry-title {
    margin: auto;
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--color-red);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3)
}

.industry-section .industry-description {
    margin: auto;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    color: #2c2c2c;
    max-width: 70%
}

.industry-section .industry-description a {
    text-decoration: none
}

.industry-section .bottom {
    padding-top: 2%
}

.industry-section .bottom .bottomleft {
    width: 80%
}

.industry-section .bottom .bottomleft .industry-logos {
    display: flex;
    justify-content: flex-start;
    gap: 3%;
    margin-bottom: 3%
}

.industry-section .bottom .bottomleft .industry-logos img {
    height: 175px;
    width: fit-content;
    border-radius: 10px;
    box-shadow: 0 4px 16px #00000040
}

.industry-section .bottom .bottomleft .industry-accreditation {
    text-align: left;
    width: 90%
}

.industry-section .bottom .bottomleft .industry-accreditation h3 {
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    color: #2c2c2c;
    margin-bottom: 1%
}

.industry-section .bottom .bottomleft .industry-accreditation .para {
    margin-bottom: 2%;
    width: 100%
}

.industry-section .bottom .bottomleft .industry-accreditation .para p {
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: .8px;
    color: #2c2c2c
}

.industry-section .bottom .bottomleft .industry-accreditation .join-btn {
    background: #fbc51d;
    border: none;
    padding: 1.2% 2.8%;
    font-size: 18px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    cursor: pointer;
    margin-top: 1.5%;
    border-radius: .5vw;
    transition: .3s ease
}

.industry-section .bottom .bottomleft .industry-accreditation .join-btn:hover {
    background: #fbc51d
}

.industry-section .bottom .bottomright .industry-image {
    margin-top: 3%;
    display: flex;
    justify-content: center;
    position: relative
}

.industry-section .bottom .bottomright .industry-image img {
    width: 95%;
    height: 530.48px;
    border-radius: 1vw
}

.industry-section .bottom .bottomright .industry-image .corner {
    position: absolute;
    width: 25%;
    height: 25%;
    border: 2px solid #fbc51d
}

.industry-section .bottom .bottomright .industry-image .top-left {
    top: -3%;
    left: -1%;
    border-right: none;
    border-bottom: none
}

.industry-section .bottom .bottomright .industry-image .bottom-right {
    bottom: -3%;
    right: -1%;
    border-left: none;
    border-top: none
}

@media (max-width: 1536px) {
    .industry-section {
        padding: 3.5% 5.5%
    }

    .industry-section .industry-title {
        font-size: 52px;
        text-shadow: 0px 3px 3px rgba(0, 0, 0, .3)
    }

    .industry-section .industry-description {
        font-size: 22px;
        max-width: 75%
    }

    .industry-section .bottom {
        padding-top: 1.8%
    }

    .industry-section .bottom .bottomleft {
        width: 85%
    }

    .industry-section .bottom .bottomleft .industry-logos {
        gap: 2.5%
    }

    .industry-section .bottom .bottomleft .industry-logos img {
        height: 160px;
        border-radius: 8px
    }

    .industry-section .bottom .bottomleft .industry-accreditation {
        width: 92%;
        text-align: left
    }

    .industry-section .bottom .bottomleft .industry-accreditation h3 {
        font-size: 22px;
        margin-bottom: .8%
    }

    .industry-section .bottom .bottomleft .industry-accreditation .para p {
        font-size: 18px;
        letter-spacing: .6px
    }

    .industry-section .bottom .bottomleft .industry-accreditation .join-btn {
        padding: 1% 2.5%;
        font-size: 16px;
        border-radius: .4vw
    }

    .industry-section .bottom .bottomright .industry-image {
        margin-top: 2%
    }

    .industry-section .bottom .bottomright .industry-image img {
        width: 90%;
        height: auto;
        border-radius: .8vw
    }

    .industry-section .bottom .bottomright .industry-image .corner {
        width: 20%;
        height: 20%
    }
}

@media (max-width: 1440px) {
    .industry-section {
        padding: 3.2% 5%
    }

    .industry-section .industry-title {
        font-size: 48px;
        text-shadow: 0px 2.5px 2.5px rgba(0, 0, 0, .3)
    }

    .industry-section .industry-description {
        font-size: 20px;
        max-width: 78%
    }

    .industry-section .bottom {
        padding-top: 1.5%
    }

    .industry-section .bottom .bottomleft {
        width: 88%
    }

    .industry-section .bottom .bottomleft .industry-logos {
        gap: 2%
    }

    .industry-section .bottom .bottomleft .industry-logos img {
        height: 140px;
        border-radius: 7px
    }

    .industry-section .bottom .bottomleft .industry-accreditation {
        width: 94%
    }

    .industry-section .bottom .bottomleft .industry-accreditation h3 {
        font-size: 20px
    }

    .industry-section .bottom .bottomleft .industry-accreditation .para p {
        font-size: 17px;
        letter-spacing: .6px
    }

    .industry-section .bottom .bottomleft .industry-accreditation .join-btn {
        padding: .9% 2.2%;
        font-size: 15px;
        border-radius: .4vw
    }

    .industry-section .bottom .bottomright .industry-image {
        margin-top: 2%
    }

    .industry-section .bottom .bottomright .industry-image img {
        width: 88%;
        height: auto;
        border-radius: .7vw
    }

    .industry-section .bottom .bottomright .industry-image .corner {
        width: 18%;
        height: 18%
    }
}

@media (max-width: 1280px) {
    .industry-section {
        padding: 3% 4.5%
    }

    .industry-section .industry-title {
        font-size: 44px;
        text-shadow: 0px 2px 2px rgba(0, 0, 0, .3)
    }

    .industry-section .industry-description {
        font-size: 18px;
        max-width: 80%
    }

    .industry-section .bottom {
        padding-top: 1.2%
    }

    .industry-section .bottom .bottomleft {
        width: 90%
    }

    .industry-section .bottom .bottomleft .industry-logos {
        gap: 1.8%
    }

    .industry-section .bottom .bottomleft .industry-logos img {
        height: 130px;
        border-radius: 6px
    }

    .industry-section .bottom .bottomleft .industry-accreditation {
        width: 95%
    }

    .industry-section .bottom .bottomleft .industry-accreditation h3 {
        font-size: 18px
    }

    .industry-section .bottom .bottomleft .industry-accreditation .para p {
        font-size: 16px;
        letter-spacing: .5px
    }

    .industry-section .bottom .bottomleft .industry-accreditation .join-btn {
        padding: .8% 2%;
        font-size: 14px;
        border-radius: .35vw
    }

    .industry-section .bottom .bottomright .industry-image {
        margin-top: 2%
    }

    .industry-section .bottom .bottomright .industry-image img {
        width: 85%;
        height: auto;
        border-radius: .6vw
    }

    .industry-section .bottom .bottomright .industry-image .corner {
        width: 16%;
        height: 16%
    }
}

@media (max-width: 480px) {
    .industry-section {
        padding: 6% 3%
    }

    .industry-section .industry-title {
        font-size: 20px;
        padding-bottom: 2%
    }

    .industry-section .industry-description {
        font-size: 18px;
        max-width: 100%;
        margin-bottom: 5%
    }

    .industry-section .bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 4%
    }

    .industry-section .bottom .bottomright {
        order: -1;
        width: 100%
    }

    .industry-section .bottom .bottomright .industry-image {
        display: flex;
        justify-content: center;
        position: relative
    }

    .industry-section .bottom .bottomright .industry-image img {
        width: 95%;
        height: auto;
        border-radius: 2vw
    }

    .industry-section .bottom .bottomright .industry-image .corner {
        width: 15%;
        height: 15%
    }

    .industry-section .bottom .bottomleft {
        width: 100%;
        display: flex;
        flex-direction: column
    }

    .industry-section .bottom .bottomleft .industry-logos {
        flex-wrap: wrap;
        gap: 1%;
        margin-top: 10%
    }

    .industry-section .bottom .bottomleft .industry-logos img:nth-of-type(1) {
        width: 20%;
        height: auto
    }

    .industry-section .bottom .bottomleft .industry-logos img:nth-of-type(2) {
        width: 23%;
        height: auto
    }

    .industry-section .bottom .bottomleft .industry-logos img:nth-of-type(3) {
        width: 28%;
        height: auto
    }

    .industry-section .bottom .bottomleft .industry-logos img:nth-of-type(4) {
        width: 26%;
        height: auto
    }

    .industry-section .bottom .bottomleft .industry-accreditation {
        width: 100%;
        text-align: center;
        margin-top: 5%
    }

    .industry-section .bottom .bottomleft .industry-accreditation h3 {
        font-size: 18px
    }

    .industry-section .bottom .bottomleft .industry-accreditation .para p {
        font-size: 16px
    }

    .industry-section .bottom .bottomleft .industry-accreditation .join-btn {
        padding: 4% 12%;
        font-size: 16px;
        border-radius: 2vw;
        margin-top: 5%
    }

    .industry-section .bottom strong {
        font-size: 18px !important
    }
}

.alliances-section {
    width: 100%;
    padding: 3.74% 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(0deg, #dc143c66, #dc143c66), url(/assets/bg1-Fy0aCbqE.png) no-repeat center center;
    background-size: cover
}

.alliances-section h2 {
    font-family: 'Sora-SemiBold';
    font-size: 2.08vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--color-white);
    max-width: 80%
}

@media (max-width: 1536px) {
    .alliances-section {
        padding: 3.5% 0;
        background-size: cover
    }

    .alliances-section h2 {
        font-size: 2vw;
        max-width: 75%
    }
}

@media (max-width: 480px) {
    .alliances-section {
        padding: 6% 5%;
        background-position: center;
        background-size: cover
    }

    .alliances-section h2 {

        font-size: 18px;
        font-style: normal;
        font-weight: 650;
        line-height: normal;
        max-width: 90%
    }
}

.NMHero {
    background: linear-gradient(0deg, #0003, #0003), url(/assets/bg-DzyJ7xVV.png) #d3d3d3 50%/cover no-repeat;
    height: 666px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #0009;
    background-blend-mode: multiply;
    padding: 5% 6.5%
}

.NMHero .navlinks {
    display: flex;
    cursor: pointer
}

.NMHero .navlinks ul {
    position: absolute;
    top: 16vh;
    left: 7%;
    display: flex;
    justify-content: space-between;
    list-style: none;
    gap: 10px
}

.NMHero .navlinks ul li a {
    font-size: 16px;
    color: var(--color-white);
    text-decoration: none
}

.NMHero .navlinks ul .nav {
    padding: 1px 2px
}

.NMHero .navlinks ul .nav img {
    width: 24px;
    height: 24px
}

.NMHero .content {
    text-align: center;
    width: 100%;
    margin: 10% auto;
    display: flex;
    flex-direction: column
}

.NMHero .content .title h1 {
    text-align: center;
    color: var(--color-white);
    font-size: 3rem;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 10px;
    text-shadow: 0 .3rem .3rem rgba(0, 0, 0, .3)
}

.NMHero .content .desc p {
    margin: auto;
    width: 55%;
    color: var(--color-white);
    font-weight: 650;
    font-size: 24px;
    line-height: 28.8px;
    letter-spacing: 0%
}

@media (max-width: 1536px) {
    .NMHero {
        height: 640px;
        padding: 4.5% 6%
    }

    .NMHero .navlinks ul {
        top: 18vh;
        left: 6%;
        gap: 8px
    }

    .NMHero .navlinks ul li a {
        font-size: 18px
    }

    .NMHero .navlinks ul .nav {
        padding: 4px 1px
    }

    .NMHero .navlinks ul .nav img {
        width: 22px;
        height: 22px
    }

    .NMHero .content {
        margin: 12% auto
    }

    .NMHero .content .title h1 {
        font-size: 2.8rem
    }

    .NMHero .content .desc p {
        width: 60%;
        font-size: 22px;
        line-height: 26px
    }
}

@media (max-width: 1440px) {
    .NMHero {
        height: 620px;
        padding: 4% 5.5%
    }

    .NMHero .navlinks ul {
        top: 20vh;
        left: 5%;
        gap: 7px
    }

    .NMHero .navlinks ul li a {
        font-size: 17px
    }

    .NMHero .navlinks ul .nav {
        padding: 3px 1px
    }

    .NMHero .navlinks ul .nav img {
        width: 20px;
        height: 20px
    }

    .NMHero .content {
        margin: 14% auto
    }

    .NMHero .content .title h1 {
        font-size: 2.6rem
    }

    .NMHero .content .desc p {
        width: 65%;
        font-size: 21px;
        line-height: 25px
    }
}

@media (max-width: 1280px) {
    .NMHero {
        height: 580px;
        padding: 3.5% 5%
    }

    .NMHero .navlinks ul {
        top: 22vh;
        left: 4%;
        gap: 6px
    }

    .NMHero .navlinks ul li a {
        font-size: 16px
    }

    .NMHero .navlinks ul .nav {
        padding: 2px 1px
    }

    .NMHero .navlinks ul .nav img {
        width: 18px;
        height: 18px
    }

    .NMHero .content {
        margin: 16% auto
    }

    .NMHero .content .title h1 {
        font-size: 2.4rem
    }

    .NMHero .content .desc p {
        width: 70%;
        font-size: 20px;
        line-height: 24px
    }
}

@media (max-width: 480px) {
    .NMHero {
        background: linear-gradient(180deg, #0003, #00000080), url(/assets/bg-DzyJ7xVV.png) #d3d3d3 50%/cover no-repeat;
        background-size: cover;
        height: 335.73px;
        width: 100%
    }

    .NMHero .navlinks ul {
        top: 12vh;
        left: 5%;
        gap: 5px
    }

    .NMHero .navlinks ul li a {
        font-size: 12px
    }

    .NMHero .navlinks ul .nav {
        padding: 3px 1px;
        scale: .6
    }

    .NMHero .content {
        margin: 40px auto
    }

    .NMHero .content .title h1 {
        font-size: 24px
    }

    .NMHero .content .desc p {
        width: 100%;
        font-size: 16px
    }
}

.News {
    padding: 2% 6.5%
}

.News .newsContainer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, auto);
    gap: 2%;
    row-gap: 50px;
    justify-content: center;
    align-items: start
}

.News .newsContainer .newsCard {
    border-radius: 10px;
    background: #fbc51d;
    height: 557px
}

.News .newsContainer .newsCard:nth-child(2n) {
    background: #fbc51d33
}

.News .newsContainer .newsCard .top .bgImage img {
    border-radius: 10px 10px 0 0;
    height: 371px;
    width: 100%
}

.News .newsContainer .newsCard .bottom {
    height: 186px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between
}

.News .newsContainer .newsCard .bottom .desc {
    height: 50%;
    padding: 2% 10%;
    font-weight: 400;
    font-size: 24px;
    line-height: 28.8px;
    text-align: center
}

.News .newsContainer .newsCard .bottom .knowmore {
    width: 34.375%;
    padding-bottom: 18px
}

.News .newsContainer .newsCard .bottom .knowmore button {
    cursor: pointer;
    color: var(--color-white);
    padding: auto;
    background-color: #2c2c2c;
    border-radius: 10px;
    height: 50px;
    width: 100%
}

.News .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2%;
    gap: 20px
}

.News .pagination img {
    width: 45px;
    height: 30px;
    cursor: pointer;
    transition: .3s
}

.News .pagination img.disabled {
    opacity: .5;
    cursor: not-allowed
}

.News .pagination img:hover:not(.disabled) {
    transform: scale(1.1)
}

.News .pagination .pages {
    display: flex;
    gap: 20px
}

.News .pagination .pages span {
    font-size: 24px;
    height: 60px;
    width: 60px;
    padding: 15px 22px;
    border: 1px solid black;
    border-radius: 50%;
    cursor: pointer;
    transition: .3s
}

.News .pagination .pages span:hover {
    background: #ddd
}

.News .pagination .pages span.active {
    margin-top: 0 !important;
    border: 1px solid #dc143c;
    font-weight: 700
}

@media (max-width: 1536px) {
    .News {
        padding: 2% 5%
    }

    .News .newsContainer {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, auto);
        gap: 1.5%;
        row-gap: 40px
    }

    .News .newsContainer .newsCard {
        height: 520px;
        border-radius: 8px
    }

    .News .newsContainer .newsCard .top .bgImage img {
        height: 350px;
        border-radius: 8px 8px 0 0
    }

    .News .newsContainer .newsCard .bottom {
        height: 170px
    }

    .News .newsContainer .newsCard .bottom .desc {
        font-size: 22px;
        padding: 2% 8%
    }

    .News .newsContainer .newsCard .bottom .knowmore {
        width: 38%
    }

    .News .newsContainer .newsCard .bottom .knowmore button {
        height: 45px
    }

    .News .pagination {
        padding-top: 1.8%;
        gap: 18px
    }

    .News .pagination img {
        width: 42px;
        height: 28px
    }

    .News .pagination .pages {
        gap: 18px
    }

    .News .pagination .pages span {
        font-size: 22px;
        height: 55px;
        width: 55px;
        padding: 12px 20px
    }
}

@media (max-width: 1440px) {
    .News {
        padding: 2% 5%
    }

    .News .newsContainer {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, auto);
        gap: 1.8%;
        row-gap: 45px
    }

    .News .newsContainer .newsCard {
        height: 530px;
        border-radius: 9px
    }

    .News .newsContainer .newsCard .top .bgImage img {
        height: 360px;
        border-radius: 9px 9px 0 0
    }

    .News .newsContainer .newsCard .bottom {
        height: 175px
    }

    .News .newsContainer .newsCard .bottom .desc {
        font-size: 18px;
        padding: 2% 9%
    }

    .News .newsContainer .newsCard .bottom .knowmore {
        width: 37%
    }

    .News .newsContainer .newsCard .bottom .knowmore button {
        height: 47px
    }

    .News .pagination {
        padding-top: 1.9%;
        gap: 19px
    }

    .News .pagination img {
        width: 43px;
        height: 29px
    }

    .News .pagination .pages {
        gap: 19px
    }

    .News .pagination .pages span {
        font-size: 23px;
        height: 57px;
        width: 57px;
        padding: 13px 21px
    }
}

@media (max-width: 1280px) {
    .News {
        padding: 2% 4.5%
    }

    .News .newsContainer {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5%;
        row-gap: 40px
    }

    .News .newsContainer .newsCard {
        height: 510px;
        border-radius: 8px
    }

    .News .newsContainer .newsCard .top .bgImage img {
        height: 340px;
        border-radius: 8px 8px 0 0
    }

    .News .newsContainer .newsCard .bottom {
        height: 160px
    }

    .News .newsContainer .newsCard .bottom .desc {
        font-size: 16px;
        padding: 2% 7%
    }

    .News .newsContainer .newsCard .bottom .knowmore {
        width: 40%
    }

    .News .newsContainer .newsCard .bottom .knowmore button {
        height: 45px
    }

    .News .pagination {
        padding-top: 1.7%;
        gap: 17px
    }

    .News .pagination img {
        width: 41px;
        height: 27px
    }

    .News .pagination .pages {
        gap: 17px
    }

    .News .pagination .pages span {
        font-size: 21px;
        height: 54px;
        width: 54px;
        padding: 11px 19px
    }
}

@media (max-width: 480px) {
    .News .newsContainer {
        display: flex;
        flex-direction: column
    }

    .News .newsContainer .newsCard {
        height: 400px;
        width: 100%
    }

    .News .newsContainer .newsCard .top .bgImage img {
        border-radius: 10px 10px 0 0;
        height: 214px;
        width: 100%
    }

    .News .newsContainer .newsCard .bottom .desc {
        font-size: 18px;
        font-weight: 650;
        line-height: normal
    }

    .News .newsContainer .newsCard .bottom .knowmore {
        width: 45.375%;
        padding-bottom: 18px
    }

    .News .newsContainer .newsCard .bottom .knowmore button {
        font-size: 18px;
        font-weight: 650;
        background-color: #2c2c2c;
        border-radius: 10px;
        height: 50px;
        width: 100%
    }

    .pagination {
        width: 100%;
        scale: .5
    }
}

.NCTA-section {
    width: 100%;
    padding: 3.74% 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(0deg, #0006, #0006), url(/assets/bg1-Fy0aCbqE.png) #d3d3d3 50%/cover no-repeat;
    height: 502px;
    background-size: cover
}

.NCTA-section h2 {
    font-family: 'Sora-SemiBold';
    font-size: 2.08vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--color-white);
    max-width: 80%
}

.NCTA-section .explore-btn {
    margin-top: 2%;
    padding: 1% 3%;
    font-size: 18px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    color: var(--color-white);
    background: transparent;
    border: 1px solid #f3f3f3;
    border-radius: 10px;
    cursor: pointer;
    transition: .3s ease
}

.NCTA-section .explore-btn:hover {
    background: var(--color-white);
    color: #dc143c
}

@media (max-width: 1536px) {
    .NCTA-section {
        height: 400px;
        padding: 3.5% 0;
        background-size: cover
    }

    .NCTA-section h2 {
        font-size: 2vw;
        max-width: 75%
    }

    .NCTA-section .explore-btn {
        margin-top: 1.8%;
        padding: .9% 2.8%;
        font-size: 17px
    }
}

@media (max-width: 1440px) {
    .NCTA-section {
        height: 450px;
        padding: 4% 0;
        background-size: cover
    }

    .NCTA-section h2 {
        font-size: 2.2vw;
        max-width: 78%
    }

    .NCTA-section .explore-btn {
        margin-top: 2.5%;
        padding: 1.2% 3.2%;
        font-size: 18px
    }
}

@media (max-width: 1280px) {
    .NCTA-section {
        height: 400px;
        padding: 4.5% 0;
        background-size: cover
    }

    .NCTA-section h2 {
        font-size: 2.5vw;
        max-width: 75%
    }

    .NCTA-section .explore-btn {
        margin-top: 2.8%;
        padding: 1.3% 3.4%;
        font-size: 17px
    }
}

@media (max-width: 480px) {
    .NCTA-section {
        padding: 6% 5%;
        background-position: center;
        background-size: cover;
        height: auto
    }

    .NCTA-section h2 {

        font-size: 18px;
        font-style: normal;
        font-weight: 650;
        line-height: normal;
        max-width: 90%
    }

    .NCTA-section .explore-btn {
        margin-top: 5%;
        padding: 2% 5%
    }
}

.contact-subhero {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 92px 134px 80px 120px;
    flex-wrap: wrap;
    gap: 40px
}

.contact-subhero__image {
    position: relative;
    flex: 0 1 300px
}

.contact-subhero__image .shape {
    position: absolute;
    bottom: -20px;
    left: 55px;
    width: 600px;
    height: 353px;
    opacity: .9;
    background: var(--red, #dc143c);
    z-index: 1
}

.contact-subhero__image img {
    position: relative;
    width: 766px;
    height: 443px;
    object-fit: contain;
    z-index: 2
}

.contact-subhero__content {
    flex: 1
}

.contact-subhero__content h2 {
    color: var(--color-red);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 16px
}

.contact-subhero__content h2 span {
    color: #dc143c
}

.contact-subhero__content .line {
    width: 273px;
    height: 3px;
    background: var(--yellow, #fbc51d);
    margin-top: 33px;
    margin-bottom: 40px
}

.contact-subhero__content p {
    text-align: left;
    padding-bottom: 40px;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.contact-subhero__content .note {
    padding-top: 40px;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.contact-subhero__content button {
    background-color: transparent;
    color: var(--color-red);
    border: 1.5px solid #dc143c;
    padding: 12px 26px;
    color: var(--red, #dc143c);
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    border-radius: 4px;
    cursor: pointer;
    margin: 12px 0;
    transition: all .3s ease
}

.contact-subhero__content button:hover {
    background-color: var(--color-red);
    color: var(--color-white)
}

@media (max-width: 1536px) {
    .contact-subhero {
        padding: 70px 90px 60px 80px;
        gap: 30px;
        flex-wrap: wrap
    }

    .contact-subhero__image {
        flex: 0 1 280px
    }

    .contact-subhero__image .shape {
        width: 500px;
        height: 300px;
        left: 50px;
        bottom: -15px
    }

    .contact-subhero__image img {
        width: 700px;
        height: 400px
    }

    .contact-subhero__content h2 {
        font-size: 50px
    }

    .contact-subhero__content .line {
        width: 230px;
        margin-top: 30px;
        margin-bottom: 35px
    }

    .contact-subhero__content p,
    .contact-subhero__content .note {
        font-size: 22px
    }

    .contact-subhero__content button {
        font-size: 20px;
        padding: 10px 24px
    }
}

@media (max-width: 1440px) {
    .contact-subhero {
        padding: 60px 80px 50px 70px;
        gap: 25px;
        flex-wrap: wrap
    }

    .contact-subhero__image {
        flex: 0 1 260px
    }

    .contact-subhero__image .shape {
        width: 450px;
        height: 270px;
        left: 45px;
        bottom: -10px
    }

    .contact-subhero__image img {
        width: 650px;
        height: 380px
    }

    .contact-subhero__content h2 {
        font-size: 48px
    }

    .contact-subhero__content .line {
        width: 200px;
        margin-top: 28px;
        margin-bottom: 30px
    }

    .contact-subhero__content p,
    .contact-subhero__content .note {
        font-size: 20px
    }

    .contact-subhero__content button {
        font-size: 18px;
        padding: 8px 22px
    }
}

@media (max-width: 1280px) {
    .contact-subhero {
        padding: 50px 60px 40px 50px;
        gap: 20px;
        flex-wrap: wrap
    }

    .contact-subhero__image {
        flex: 0 1 240px
    }

    .contact-subhero__image .shape {
        width: 400px;
        height: 250px;
        left: 40px;
        bottom: -10px
    }

    .contact-subhero__image img {
        width: 600px;
        height: 350px
    }

    .contact-subhero__content h2 {
        font-size: 45px
    }

    .contact-subhero__content .line {
        width: 180px;
        margin-top: 25px;
        margin-bottom: 25px
    }

    .contact-subhero__content p,
    .contact-subhero__content .note {
        font-size: 18px
    }

    .contact-subhero__content button {
        font-size: 16px;
        padding: 6px 20px
    }
}

@media (max-width: 480px) {
    .contact-subhero {
        flex-direction: column-reverse;
        padding: 40px 20px;
        gap: 30px
    }

    .contact-subhero__image {
        flex: 1;
        width: 100%;
        display: flex;
        justify-content: center
    }

    .contact-subhero__image .shape {
        bottom: -10px;
        left: 20px;
        width: 250px;
        height: 150px
    }

    .contact-subhero__image img {
        width: 100%;
        height: auto;
        max-width: 100%
    }

    .contact-subhero__content {
        width: 100%
    }

    .contact-subhero__content h2 {
        font-size: 24px;
        text-align: center
    }

    .contact-subhero__content .line {
        width: 150px;
        margin: 24px auto
    }

    .contact-subhero__content p,
    .contact-subhero__content .note {
        font-size: 16px;
        padding-bottom: 24px;
        padding-top: 0;
        text-align: center
    }

    .contact-subhero__content button {
        font-size: 16px;
        padding: 10px 20px;
        display: block;
        margin: 12px auto
    }
}

.contactHero {
    width: 100%;
    height: 61.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: linear-gradient(0deg, #0000008c, #0000008c), url(/assets/contactHero-DecLrL0Z.jpeg) #d3d3d3 0px -452.804px/100% 207.37% no-repeat
}

.contactHero .navlinks {
    display: flex;
    cursor: pointer
}

.contactHero .navlinks ul {
    position: absolute;
    top: 16vh;
    left: 7%;
    display: flex;
    justify-content: space-between;
    list-style: none;
    gap: 10px
}

.contactHero .navlinks ul li {
    color: var(--color-white)
}

.contactHero .navlinks ul li a {
    font-size: 16px;
    color: var(--color-white);
    text-decoration: none
}

.contactHero .navlinks ul .nav {
    padding: 1px 2px
}

.contactHero .navlinks ul .nav img {
    width: 24px;
    height: 24px
}

.contactHero h1 {
    color: var(--color-white);
    text-align: center;
    text-shadow: 0px .21vw .21vw rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.92vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.contactHero p {
    width: 75%;
    color: var(--color-white);
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    padding-top: 2vh
}

.contactHero button {
    display: inline-flex;
    height: 40px;
    padding: 12px 26px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--PRIMARY-YELLOW-COLOR, #fbc51d);
    color: var(--Black-Color, #333);
    margin-top: 49px;
    font-size: 18px;
    font-style: normal;
    font-weight: 650;
    cursor: pointer;
    line-height: normal
}

.contactHero button:hover {
    color: var(--color-white);
    background-color: #333
}

@media (max-width: 1536px) {
    .contactHero {
        height: 55vh;
        background-size: cover
    }

    .contactHero .navlinks ul {
        top: 18vh;
        left: 6%;
        gap: 8px
    }

    .contactHero .navlinks ul li a {
        font-size: 18px
    }

    .contactHero .navlinks ul .nav {
        padding: 4px 1px
    }

    .contactHero .navlinks ul .nav img {
        width: 22px;
        height: 22px
    }

    .contactHero h1 {
        font-size: 3.5rem
    }

    .contactHero p {
        width: 80%;
        font-size: 22px;
        padding-top: 3vh
    }

    .contactHero button {
        font-size: 16px;
        padding: 10px 20px;
        margin-top: 40px
    }
}

@media (max-width: 1440px) {
    .contactHero {
        height: 50vh
    }

    .contactHero .navlinks ul {
        top: 20vh;
        left: 5%;
        gap: 8px
    }

    .contactHero .navlinks ul li a {
        font-size: 16px
    }

    .contactHero .navlinks ul .nav {
        padding: 4px 1px
    }

    .contactHero .navlinks ul .nav img {
        width: 20px;
        height: 20px
    }

    .contactHero h1 {
        font-size: 3rem
    }

    .contactHero p {
        width: 85%;
        font-size: 20px;
        padding-top: 3vh
    }

    .contactHero button {
        font-size: 15px;
        padding: 8px 18px;
        margin-top: 35px
    }
}

@media (max-width: 1280px) {
    .contactHero {
        height: 45vh
    }

    .contactHero .navlinks ul {
        top: 22vh;
        left: 5%;
        gap: 8px
    }

    .contactHero .navlinks ul li a {
        font-size: 15px
    }

    .contactHero .navlinks ul .nav {
        padding: 4px 1px
    }

    .contactHero .navlinks ul .nav img {
        width: 18px;
        height: 18px
    }

    .contactHero h1 {
        font-size: 2.8rem
    }

    .contactHero p {
        width: 90%;
        font-size: 18px;
        padding-top: 4vh
    }

    .contactHero button {
        font-size: 14px;
        padding: 8px 16px;
        margin-top: 30px
    }
}

@media (max-width: 480px) {
    .contactHero {
        height: auto;
        padding: 40px 20px;
        background: linear-gradient(0deg, #0000008c, #0000008c), url(/assets/contactHero-DecLrL0Z.jpeg) #d3d3d3 center/cover no-repeat
    }

    .contactHero .navlinks ul {
        margin-left: -4%;
        top: 84px;
        gap: 5px
    }

    .contactHero .navlinks ul li a {
        font-size: 14px
    }

    .contactHero .navlinks ul .nav {
        padding: 0;
        scale: .8
    }

    .contactHero h1 {
        font-size: 6vw
    }

    .contactHero p {
        width: 80%;
        font-size: 16px;
        padding-top: 16px
    }

    .contactHero button {
        font-size: 16px;
        padding: 10px 20px;
        margin-top: 30px;
        height: auto
    }
}

.contact-profanity {
    text-align: center
}

.contact-profanity__heading {
    border-radius: 10px;
    background: #fbc51d33;
    display: inline-block;
    width: 1680px;
    height: 363px;
    padding-top: 20px;
    position: relative
}

.contact-profanity__heading h2 {
    color: var(--color-red);
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    margin: 0
}

.contact-profanity__cards {
    display: flex;
    justify-content: center;
    justify-self: center;
    padding-left: 280px;
    gap: 40px;
    align-items: center;
    position: relative;
    margin-top: -10%
}

.contact-profanity__cards .card {
    padding: 0 50px 20px;
    overflow: hidden;
    text-align: center
}

.contact-profanity__cards .card .image {
    position: relative
}

.contact-profanity__cards .card .image img {
    object-fit: cover;
    width: 546px;
    height: 607px;
    display: block;
    z-index: 2
}

.contact-profanity__cards .card .image:before {
    content: "";
    position: absolute;
    top: 0;
    left: -20px;
    width: 20px;
    height: 299px;
    background-color: var(--color-red);
    z-index: 1
}

.contact-profanity__cards .card p {
    padding: 20px 10px 40px;
    font-size: 32px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    width: 70%;
    text-align: left
}

.contact-profanity__cards .card a {
    text-decoration: none
}

.contact-profanity__cards .card button {
    background-color: var(--color-red);
    color: var(--color-white);
    border: none;
    padding: 12px 26px;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    font-size: 18px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    cursor: pointer;
    transition: background .3s ease
}

.contact-profanity__cards .card button:hover {
    background-color: #b01232
}

@media (max-width: 1536px) {
    .contact-profanity__heading {
        width: 95%;
        height: auto;
        padding: 20px
    }

    .contact-profanity__heading h2 {
        font-size: 48px;
        line-height: 1.3
    }

    .contact-profanity__cards {
        flex-direction: row;
        padding-left: 150px;
        gap: 30px;
        margin-top: 0
    }

    .contact-profanity__cards .card {
        width: 580px;
        padding: 0 40px 20px
    }

    .contact-profanity__cards .card .image img {
        width: 500px;
        height: 550px
    }

    .contact-profanity__cards .card p {
        font-size: 24px
    }

    .contact-profanity__cards .card button {
        font-size: 16px;
        padding: 10px 22px
    }
}

@media (max-width: 1280px) {
    .contact-profanity__heading {
        width: 85%;
        height: auto;
        padding: 20px 10px
    }

    .contact-profanity__heading h2 {
        font-size: 40px;
        line-height: 1.3
    }

    .contact-profanity__cards {
        flex-direction: row;
        padding-left: 80px;
        gap: 20px;
        margin-top: 0
    }

    .contact-profanity__cards .card {
        width: 440px;
        padding: 0 25px 20px
    }

    .contact-profanity__cards .card .image img {
        width: 460px;
        height: 470px
    }

    .contact-profanity__cards .card p {
        font-size: 20px
    }

    .contact-profanity__cards .card button {
        font-size: 14px;
        padding: 8px 18px
    }
}

@media (max-width: 480px) {
    .contact-profanity__heading {
        width: 90%;
        height: auto;
        padding: 20px 10px
    }

    .contact-profanity__heading h2 {
        font-size: 24px;
        line-height: 1.2
    }

    .contact-profanity__cards {
        flex-direction: column;
        padding-left: 0;
        margin-top: 20px;
        gap: 24px
    }

    .contact-profanity__cards .card {
        padding: 0 20px 20px;
        width: 100%
    }

    .contact-profanity__cards .card .image:before {
        display: none
    }

    .contact-profanity__cards .card .image img {
        width: 100%;
        height: auto;
        max-width: 100%
    }

    .contact-profanity__cards .card p {
        width: 100%;
        font-size: 16px;
        text-align: center;
        padding: 16px 0
    }

    .contact-profanity__cards .card button {
        font-size: 16px;
        padding: 10px 20px;
        margin: 0 auto
    }
}

.contactCTA {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 261px;
    margin: 80px 120px 0;
    border-radius: 10px;
    background: linear-gradient(0deg, #0009, #0009), url(/assets/contactCTA-ClfEm69v.jpeg) #d3d3d3 50%/cover no-repeat
}

.contactCTA h2 {
    color: var(--color-white);
    font-size: 42px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    margin-bottom: 20px
}

.contactCTA p {
    width: 60%;
    color: var(--color-white);
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.contactCTA p span {
    text-decoration: underline
}

.contactCTA p span a {
    text-decoration: none;
    color: var(--color-white)
}

@media (max-width: 1536px) {
    .contactCTA {
        height: 240px;
        margin: 70px 110px 0
    }

    .contactCTA h2 {
        font-size: 40px
    }

    .contactCTA p {
        width: 65%;
        font-size: 30px
    }
}

@media (max-width: 1440px) {
    .contactCTA {
        height: 230px;
        margin: 60px 100px 0
    }

    .contactCTA h2 {
        font-size: 38px
    }

    .contactCTA p {
        width: 70%;
        font-size: 28px
    }
}

@media (max-width: 1280px) {
    .contactCTA {
        height: 210px;
        margin: 50px 80px 0
    }

    .contactCTA h2 {
        font-size: 34px
    }

    .contactCTA p {
        width: 80%;
        font-size: 24px
    }
}

@media (max-width: 480px) {
    .contactCTA {
        height: auto;
        margin: 40px 16px 0;
        padding: 32px 16px;
        text-align: center;
        border-radius: 8px;
        background-size: cover;
        background-position: center
    }

    .contactCTA h2 {
        font-size: 24px;
        margin-bottom: 12px
    }

    .contactCTA p {
        width: 100%;
        font-size: 16px
    }

    .contactCTA p span {
        text-decoration: underline
    }
}

.BlogsHero .hero {
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 58.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.BlogsHero .hero .bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.BlogsHero .hero .navlinks {
    z-index: 1;
    display: flex;
    cursor: pointer
}

.BlogsHero .hero .navlinks ul {
    position: absolute;
    top: 6vh;
    left: 7%;
    display: flex;
    justify-content: space-between;
    list-style: none;
    gap: 10px
}

.BlogsHero .hero .navlinks ul li {
    color: var(--color-white)
}

.BlogsHero .hero .navlinks ul li a {
    font-size: 16px;
    color: var(--color-white);
    text-decoration: none
}

.BlogsHero .hero .navlinks ul .nav {
    padding: 1px 2px
}

.BlogsHero .hero .navlinks ul .nav img {
    width: 24px;
    height: 24px
}

.BlogsHero .hero .content {
    z-index: 3
}

.BlogsHero .hero .content h1 {
    z-index: 1;
    color: var(--color-white);
    text-align: center;
    text-shadow: 0px .21vw .21vw rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.92vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.BlogsHero .hero .content p {
    color: var(--color-white);
    text-align: center;
    font-size: 1.3vw;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

@media (max-width: 480px) {
    .BlogsHero .hero {
        height: 30vh
    }

    .BlogsHero .hero .navlinks ul {
        top: 2vh;
        left: 5%;
        gap: 5px
    }

    .BlogsHero .hero .navlinks ul li,
    .BlogsHero .hero .navlinks ul li a {
        font-size: 12px
    }

    .BlogsHero .hero .navlinks ul .nav {
        padding: 0 1px;
        scale: .6
    }

    .BlogsHero .hero .content h1 {
        font-size: 6vw;
        padding: 0 10px
    }

    .BlogsHero .hero .content p {
        font-size: 3vw
    }
}

.BlogsMain {
    display: flex;
    padding: 3.28% 5.2%;
    gap: 40px
}

.BlogsMain .left {
    width: 30%;
    display: flex;
    gap: 40px;
    flex-direction: column
}

.BlogsMain .left .left_top {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%
}

.BlogsMain .left .left_top .search,
.BlogsMain .left .left_top .searchYear {
    height: 60px;
    width: 100%;
    display: flex;
    padding: 10px;
    border-radius: 10px;
    background: #fbc51d80;
    align-items: center
}

.BlogsMain .left .left_top .search img,
.BlogsMain .left .left_top .searchYear img {
    width: 16px;
    height: 16px;
    object-fit: cover
}

.BlogsMain .left .left_top .search input,
.BlogsMain .left .left_top .search select,
.BlogsMain .left .left_top .searchYear input,
.BlogsMain .left .left_top .searchYear select {
    background-color: transparent;
    border: none;
    width: 95%
}

.BlogsMain .left .left_top .search input,
.BlogsMain .left .left_top .searchYear input {
    padding: 10px
}

.BlogsMain .left .left_top .search input:focus,
.BlogsMain .left .left_top .searchYear input:focus {
    outline: none
}

.BlogsMain .left .left_top .search select,
.BlogsMain .left .left_top .searchYear select {
    width: 100%;
    letter-spacing: 5px;
    border: none
}

.BlogsMain .left .left_top .search select:focus,
.BlogsMain .left .left_top .searchYear select:focus {
    outline: none
}

.BlogsMain .left .left_bottom {
    border-radius: 10px;
    box-shadow: 0 4px 10px #00000040;
    width: 100%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 25px
}

.BlogsMain .left .left_bottom .recentTitle {
    font-size: 32px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.BlogsMain .left .left_bottom hr {
    height: 1px;
    background: #333
}

.BlogsMain .left .left_bottom .recent {
    border-radius: 10px;
    width: 100%;
    display: flex;
    height: 147px;
    padding: 10px;
    cursor: pointer
}

.BlogsMain .left .left_bottom .recent:hover {
    background: #fbc51d26
}

.BlogsMain .left .left_bottom .recent .image {
    padding: 10px;
    width: 100%;
    height: 100%
}

.BlogsMain .left .left_bottom .recent .image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.BlogsMain .left .left_bottom .recent .rdesc {
    padding: 10px;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize
}

.BlogsMain .right {
    width: 60%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px
}

.BlogsMain .right .post {
    width: 49%;
    height: 424px;
    display: flex;
    flex-direction: column
}

.BlogsMain .right .post .image {
    height: 293px;
    width: 100%
}

.BlogsMain .right .post .image img {
    border-radius: 10px 10px 0 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.BlogsMain .right .post .info {
    border-radius: 0 0 10px 10px;
    padding: 20px;
    display: flex;
    background: var(--blue, linear-gradient(104deg, #3027a0 .86%, rgba(106, 102, 157, .5) 95.86%));
    box-shadow: 0 4px 14px #00000040 inset
}

.BlogsMain .right .post .info .ileft {
    width: 60%
}

.BlogsMain .right .post .info .ileft .title {
    text-align: left;
    color: var(--color-white);
    font-size: 32px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.BlogsMain .right .post .info .ileft .number {
    text-align: left;
    color: var(--color-white);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.BlogsMain .right .post .info .iright {
    width: 40%
}

.BlogsMain .right .post .info .iright .button {
    cursor: pointer;
    display: flex;
    width: 80%;
    height: 39.078px;
    border-radius: 10px;
    background: var(--red, #dc143c);
    padding: 12px 26px;
    justify-content: center;
    align-items: center;
    color: var(--color-white);
    gap: 10px;
    flex-shrink: 0
}

.BlogsMain .right .post .info-2 {
    background: var(--green, linear-gradient(104deg, #378509 4.41%, rgba(114, 191, 68, .5) 100%))
}

.BlogsMain .right .post .info-3 {
    background: var(--skyblue, linear-gradient(102deg, #075580 3.39%, #2a98d4 98.99%))
}

.BlogsMain .right .post .info-4 {
    background: var(--orange, linear-gradient(103deg, #d33519 2.06%, rgba(255, 99, 71, .5) 100%))
}

.BlogsMain .right .post .info-5 {
    background: var(--red, linear-gradient(102deg, #b30225 1.21%, rgba(220, 20, 60, .5) 100%))
}

.BlogsMain .right .post .info-6 {
    background: var(--darkblue, linear-gradient(249deg, #1c325b 1.17%, #3b6ac1 59.08%))
}

.giftHero {
    position: relative;
    width: 100%;
    height: 58.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.giftHero .bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.giftHero .navlinks {
    z-index: 1;
    display: flex;
    cursor: pointer
}

.giftHero .navlinks ul {
    position: absolute;
    top: 8vh;
    left: 7%;
    display: flex;
    justify-content: space-between;
    list-style: none;
    gap: 10px
}

.giftHero .navlinks ul li {
    color: var(--color-white)
}

.giftHero .navlinks ul li a {
    font-size: 16px;
    color: var(--color-white);
    text-decoration: none
}

.giftHero .navlinks ul .nav {
    padding: 1px 2px
}

.giftHero .navlinks ul .nav img {
    width: 24px;
    height: 24px
}

.giftHero h1 {
    z-index: 1;
    color: var(--color-white);
    text-align: center;
    text-shadow: 0px .21vw .21vw rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.92vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

@media (max-width: 1536px) {
    .giftHero {
        height: 55vh
    }

    .giftHero h1 {
        font-size: 2.5vw
    }

    .giftHero .navlinks ul {
        top: 7vh;
        left: 6%
    }
}

@media (max-width: 1440px) {
    .giftHero {
        height: 52vh
    }

    .giftHero h1 {
        font-size: 2.4vw
    }

    .giftHero .navlinks ul {
        top: 6.5vh;
        left: 6%
    }
}

@media (max-width: 1280px) {
    .giftHero {
        height: 50vh
    }

    .giftHero h1 {
        font-size: 2.2vw
    }

    .giftHero .navlinks ul {
        top: 6vh;
        left: 5%
    }

    .giftHero .navlinks ul li a {
        font-size: 14px
    }

    .giftHero .navlinks ul .nav img {
        width: 20px;
        height: 20px
    }
}

@media (max-width: 480px) {
    .giftHero {
        height: 40vh
    }

    .giftHero .bg-video {
        object-fit: cover
    }

    .giftHero .navlinks ul {
        top: 20px;
        gap: 5px
    }

    .giftHero .navlinks ul li a {
        font-size: 14px
    }

    .giftHero .navlinks ul .nav {
        padding: 0;
        scale: .8
    }

    .giftHero h1 {
        font-size: 6.5vw;
        padding: 0 20px;
        text-shadow: 0px 2px 2px rgba(0, 0, 0, .3)
    }
}

.giftForm {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    margin: 83px 120px
}

.giftForm .giftForm__container {
    display: flex;
    height: 1114px;
    width: 100%;
    background: #fbc51d12;
    box-shadow: 0 0 20px #0000000d;
    border-radius: 10px;
    overflow: hidden
}

.giftForm .giftForm__image {
    width: 50%
}

.giftForm .giftForm__image img {
    width: 100%;
    height: auto
}

.giftForm .giftForm__form {
    width: 50%;
    padding: 15px
}

.giftForm .giftForm__form h2 {
    color: var(--color-red);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 42px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 40px
}

.giftForm .giftForm__form form {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.giftForm .giftForm__form form .form-group {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.giftForm .giftForm__form form .form-group label {
    color: var(--GREY-COLOR, #2c2c2c);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: .8px
}

.giftForm .giftForm__form form .form-group input {
    color: var(--GREY-COLOR, #2c2c2c);
    height: 60px;
    padding: 4px 20px;
    font-size: 16px;
    font-style: normal;
    background-color: transparent;
    font-weight: 500;
    line-height: normal;
    border-radius: 10px;
    border: 1px solid rgba(255, 30, 50, .3);
    outline: none;
    transition: border .3s ease
}

.giftForm .giftForm__form form .form-group input:focus {
    border-color: #f4a261
}

.giftForm .giftForm__form form .privacy {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    text-align: center;
    width: 50%;
    margin: auto
}

.giftForm .giftForm__form form .privacy span {
    color: #666;
    text-decoration: underline;
    cursor: pointer
}

.giftForm .giftForm__form form .cta {
    background: none
}

.giftForm .giftForm__form form .newbutton {
    width: 100%;
    display: flex;
    margin: auto;
    width: 187px;
    height: 50px;
    padding: 12px 26px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    background-color: #ffc107;
    color: #000;
    font-weight: 600;
    font-size: 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color .3s ease
}

.giftForm .giftForm__form form .newbutton:hover {
    background-color: #e6b800
}

@media (max-width: 1536px) {
    .giftForm {
        margin: 60px 80px;
        padding: 30px
    }

    .giftForm .giftForm__container {
        height: auto
    }

    .giftForm .giftForm__form h2 {
        font-size: 38px
    }

    .giftForm .giftForm__form form .form-group label {
        font-size: 18px
    }

    .giftForm .giftForm__form form .form-group input {
        height: 56px;
        font-size: 15px
    }

    .giftForm .giftForm__form form .newbutton {
        font-size: 15px;
        height: 48px
    }
}

@media (max-width: 1440px) {
    .giftForm {
        margin: 50px 60px
    }

    .giftForm .giftForm__form h2 {
        font-size: 36px
    }

    .giftForm .giftForm__form form .form-group label {
        font-size: 17px
    }

    .giftForm .giftForm__form form .form-group input {
        height: 54px;
        font-size: 14px
    }

    .giftForm .giftForm__form form .newbutton {
        font-size: 14px;
        height: 46px
    }
}

@media (max-width: 1280px) {
    .giftForm {
        margin: 40px
    }

    .giftForm .giftForm__container {
        height: auto
    }

    .giftForm .giftForm__image,
    .giftForm .giftForm__form {
        width: 100%
    }

    .giftForm .giftForm__form {
        padding: 20px
    }

    .giftForm .giftForm__form h2 {
        font-size: 32px
    }

    .giftForm .giftForm__form form {
        gap: 12px
    }

    .giftForm .giftForm__form form .form-group label {
        font-size: 16px
    }

    .giftForm .giftForm__form form .form-group input {
        height: 50px;
        font-size: 14px
    }

    .giftForm .giftForm__form form .privacy {
        width: 80%;
        font-size: 11px
    }

    .giftForm .giftForm__form form .newbutton {
        font-size: 14px;
        height: 44px
    }
}

@media (max-width: 480px) {
    .giftForm {
        margin: 20px;
        padding: 20px
    }

    .giftForm .giftForm__container {
        flex-direction: column;
        height: auto
    }

    .giftForm .giftForm__image {
        width: 100%
    }

    .giftForm .giftForm__image img {
        width: 100%;
        height: auto
    }

    .giftForm .giftForm__form {
        width: 100%;
        padding: 20px 10px
    }

    .giftForm .giftForm__form h2 {
        font-size: 24px;
        margin-bottom: 24px
    }

    .giftForm .giftForm__form form {
        gap: 10px
    }

    .giftForm .giftForm__form form .form-group label {
        font-size: 14px
    }

    .giftForm .giftForm__form form .form-group input {
        height: 48px;
        font-size: 13px
    }

    .giftForm .giftForm__form form .privacy {
        font-size: 10px;
        width: 90%
    }

    .giftForm .giftForm__form form .newbutton {
        width: 100%;
        font-size: 14px;
        height: 44px
    }
}

@media (max-width: 480px) {
    .giftForm {
        flex-direction: column-reverse;
        margin: 0;
        padding: 24px
    }

    .giftForm .giftForm__container {
        flex-direction: column-reverse;
        height: auto
    }

    .giftForm .giftForm__image {
        width: 100%;
        height: 200px;
        background-position: center;
        background-size: cover
    }

    .giftForm .giftForm__form {
        width: 100%;
        padding: 24px
    }

    .giftForm .giftForm__form h2 {
        font-size: 24px;
        margin-bottom: 24px;
        text-align: center
    }

    .giftForm .giftForm__form form {
        gap: 20px
    }

    .giftForm .giftForm__form form .form-group {
        gap: 8px
    }

    .giftForm .giftForm__form form .form-group label {
        font-size: 16px
    }

    .giftForm .giftForm__form form .form-group input {
        font-size: 14px;
        height: 48px
    }

    .giftForm .giftForm__form form .privacy {
        font-size: 10px;
        width: 100%
    }

    .giftForm .giftForm__form form button {
        width: 100%;
        height: 45px;
        font-size: 14px
    }
}

.giftSub {
    padding: 0;
    margin: 0 120px 40px
}

.giftSub .giftSub__headerBox {
    background-color: #d32f2f;
    padding: 60px 43px;
    height: 283px;
    text-align: center
}

.giftSub .giftSub__headerBox h2 {
    color: var(--color-white);
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

@media (max-width: 768px) {
    .giftSub .giftSub__headerBox h2 {
        font-size: 1.4rem
    }
}

.giftSub .giftSub__container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    background: #fbc51d1a;
    height: 607px;
    margin: auto
}

.giftSub .giftSub__container .giftSub__left {
    width: 850px;
    flex: 1;
    padding: 0 130px 0 70px
}

.giftSub .giftSub__container .giftSub__left p {
    margin-bottom: 1rem;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.giftSub .giftSub__container .giftSub__left button {
    background: var(--color-red);
    border: none;
    padding: .75rem 1.5rem;
    color: var(--color-white);
    text-decoration: none;
    font-size: 18px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 1rem;
    transition: background-color .3s
}

.giftSub .giftSub__container .giftSub__right img {
    width: 850px;
    height: 607px
}

@media (max-width: 1536px) {
    .giftSub {
        margin: 0 80px 40px
    }

    .giftSub .giftSub__headerBox {
        padding: 50px 30px;
        height: 260px
    }

    .giftSub .giftSub__headerBox h2 {
        font-size: 48px
    }

    .giftSub .giftSub__container {
        height: 580px
    }

    .giftSub .giftSub__container .giftSub__left {
        padding: 0 100px 0 60px
    }

    .giftSub .giftSub__container .giftSub__left p {
        font-size: 22px
    }

    .giftSub .giftSub__container .giftSub__left button {
        font-size: 16px
    }

    .giftSub .giftSub__container .giftSub__right img {
        width: 700px;
        height: 580px
    }
}

@media (max-width: 1440px) {
    .giftSub {
        margin: 0 60px 40px
    }

    .giftSub .giftSub__headerBox {
        padding: 40px 25px;
        height: 240px
    }

    .giftSub .giftSub__headerBox h2 {
        font-size: 42px
    }

    .giftSub .giftSub__container {
        gap: 1.5rem;
        height: 520px
    }

    .giftSub .giftSub__container .giftSub__left {
        padding: 0 60px 0 40px
    }

    .giftSub .giftSub__container .giftSub__left p {
        font-size: 20px
    }

    .giftSub .giftSub__container .giftSub__left button {
        font-size: 15px
    }

    .giftSub .giftSub__container .giftSub__right img {
        width: 600px;
        height: 520px
    }
}

@media (max-width: 1280px) {
    .giftSub {
        margin: 0 40px 40px
    }

    .giftSub .giftSub__headerBox {
        padding: 30px 20px;
        height: auto
    }

    .giftSub .giftSub__headerBox h2 {
        font-size: 36px
    }

    .giftSub .giftSub__container {
        flex-direction: column-reverse;
        height: auto;
        padding: 30px 20px;
        gap: 2rem
    }

    .giftSub .giftSub__container .giftSub__left {
        width: 100%;
        padding: 0
    }

    .giftSub .giftSub__container .giftSub__left p {
        font-size: 18px;
        text-align: center
    }

    .giftSub .giftSub__container .giftSub__left button {
        font-size: 14px;
        display: block;
        margin: 1rem auto 0
    }

    .giftSub .giftSub__container .giftSub__right img {
        width: 100%;
        height: auto;
        max-width: 600px
    }
}

@media (max-width: 480px) {
    .giftSub {
        margin: 0 20px 40px
    }

    .giftSub .giftSub__headerBox {
        padding: 40px 20px;
        height: auto
    }

    .giftSub .giftSub__headerBox h2 {
        font-size: 1.2rem;
        line-height: 1.2
    }

    .giftSub .giftSub__container {
        flex-direction: column;
        height: auto;
        gap: 1.5rem;
        padding: 20px
    }

    .giftSub .giftSub__container .giftSub__left {
        width: 100%;
        padding: 0
    }

    .giftSub .giftSub__container .giftSub__left p {
        font-size: 16px;
        text-align: center
    }

    .giftSub .giftSub__container .giftSub__left button {
        font-size: 16px;
        padding: 10px 20px;
        display: block;
        margin: 1rem auto 0
    }

    .giftSub .giftSub__container .giftSub__right {
        width: 100%
    }

    .giftSub .giftSub__container .giftSub__right img {
        width: 100%;
        height: auto
    }
}

.giftHire {
    padding: 40px 126px 0;
    text-align: center
}

.giftHire h1 {
    color: var(--color-red);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 46px;
    font-weight: 400;
    text-transform: uppercase
}

.giftHire h1 span {
    color: var(--color-red);
    font-weight: 1000
}

.giftHire .steps-ht {
    display: flex;
    justify-content: space-between;
    margin-top: 60px
}

.giftHire .steps-ht .step-flow {
    display: flex;
    flex-direction: column;
    align-items: center
}

.giftHire .steps-ht .step-flow .flow-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px
}

.giftHire .steps-ht .step-flow .yellow-box {
    border-radius: 10px;
    background: #fbc51dd9;
    box-shadow: 0 4px 25px #000c;
    width: 306px;
    height: 259px;
    display: flex;
    align-items: center;
    justify-content: center
}

.giftHire .steps-ht .step-flow .yellow-box img {
    width: 143px;
    height: 143px
}

.giftHire .steps-ht .step-flow .line {
    width: 80px;
    height: 2px;
    background: #000
}

.giftHire .steps-ht .step-flow .step-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 91px;
    height: 89px;
    border-radius: 10px;
    background: var(--Color-4, #dc143c);
    padding: 12px 26px;
    color: var(--color-white);
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.giftHire .steps-ht .step-flow .step-box .step-label {
    font-size: 16px
}

.giftHire .steps-ht .step-flow .step-box .step-number {
    font-size: 42px
}

.giftHire .steps-ht .step-flow .arrow {
    font-size: 42px;
    color: #000
}

.giftHire .steps-ht .step-flow .step-description {
    text-align: center;
    width: 60%;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    margin-top: 40px;
    padding-left: 6%;
    margin-left: -48%
}

.giftHire .cta {
    margin-top: 40px;
    background: none !important
}

.giftHire .cta button {
    background-color: var(--color-red);
    color: var(--color-white);
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color .3s
}

.giftHire .cta button:hover {
    background-color: #b90f2e
}

@media (max-width: 1536px) {
    .giftHire {
        padding: 40px 0 0
    }

    .giftHire h1 {
        font-size: 42px
    }

    .giftHire .steps-ht {
        gap: 0px
    }

    .giftHire .steps-ht .step-flow .yellow-box {
        width: 240px;
        height: 200px
    }

    .giftHire .steps-ht .step-flow .yellow-box img {
        width: 130px;
        height: 130px
    }

    .giftHire .steps-ht .step-flow .step-box {
        width: 75px;
        height: 75px
    }

    .giftHire .steps-ht .step-flow .step-box .step-label {
        font-size: 15px
    }

    .giftHire .steps-ht .step-flow .step-box .step-number {
        font-size: 36px
    }

    .giftHire .steps-ht .step-flow .step-description {
        font-size: 22px;
        width: 70%
    }
}

@media (max-width: 1280px) {
    .giftHire {
        padding: 40px 0 0
    }

    .giftHire h1 {
        font-size: 34px
    }

    .giftHire .steps-ht {
        gap: 0px
    }

    .giftHire .steps-ht .step-flow .yellow-box {
        width: 200px;
        height: 200px
    }

    .giftHire .steps-ht .step-flow .yellow-box img {
        width: 110px;
        height: 110px
    }

    .giftHire .steps-ht .step-flow .step-box {
        width: 75px;
        height: 75px
    }

    .giftHire .steps-ht .step-flow .step-box .step-label {
        font-size: 13px
    }

    .giftHire .steps-ht .step-flow .step-box .step-number {
        font-size: 28px
    }

    .giftHire .steps-ht .step-flow .step-description {
        font-size: 18px;
        width: 80%
    }

    .giftHire .cta button {
        font-size: 13px;
        padding: 9px 20px
    }
}

@media (max-width: 480px) {
    .giftHire {
        padding: 40px 20px 0
    }

    .giftHire h1 {
        font-size: 1.6rem;
        line-height: 1.3
    }

    .giftHire h1 span {
        font-size: inherit
    }

    .giftHire .steps-ht {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        margin-top: 40px
    }

    .giftHire .steps-ht .step-flow .flow-inline {
        flex-direction: column;
        gap: 10px
    }

    .giftHire .steps-ht .step-flow .yellow-box {
        width: 100%;
        height: auto;
        padding: 1.5rem
    }

    .giftHire .steps-ht .step-flow .yellow-box img {
        width: 120px;
        height: 120px
    }

    .giftHire .steps-ht .step-flow .line {
        width: 60px
    }

    .giftHire .steps-ht .step-flow .step-box {
        width: auto;
        height: auto;
        padding: 10px 16px
    }

    .giftHire .steps-ht .step-flow .step-box .step-label {
        font-size: 14px
    }

    .giftHire .steps-ht .step-flow .step-box .step-number {
        font-size: 28px
    }

    .giftHire .steps-ht .step-flow .arrow {
        font-size: 30px
    }

    .giftHire .steps-ht .step-flow .step-description {
        font-size: 16px;
        width: 100%;
        padding: 0;
        margin: 1rem 0 0
    }

    .giftHire .cta {
        margin-top: 2rem
    }

    .giftHire .cta button {
        font-size: 14px;
        padding: 10px 20px
    }
}

.singleHero {
    background: linear-gradient(180deg, #0003, #00000080), url(/assets/bg-Bj0qJkQy.jpeg) #d3d3d3 50%/cover no-repeat;
    height: 666px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: multiply;
    display: flex;
    justify-content: center;
    align-items: center
}

.singleHero .navlinks {
    display: flex;
    cursor: pointer
}

.singleHero .navlinks ul {
    position: absolute;
    top: 16vh;
    left: 7%;
    display: flex;
    justify-content: space-between;
    list-style: none;
    gap: 10px
}

.singleHero .navlinks ul li,
.singleHero .navlinks ul li a {
    font-size: 16px;
    color: var(--color-white);
    text-decoration: none
}

.singleHero .navlinks ul .nav {
    padding: 1px 2px
}

.singleHero .navlinks ul .nav img {
    width: 24px;
    height: 24px
}

.singleHero .content {
    text-align: center;
    width: 100%;
    margin: 10% auto;
    display: flex;
    flex-direction: column
}

.singleHero .content .title {
    width: 100%
}

.singleHero .content .title h1 {
    text-align: center;
    color: var(--color-white);
    margin: auto auto 10px;
    width: 40%;
    font-size: 3rem;
    font-weight: 400;
    line-height: normal;
    text-shadow: 0 .3rem .3rem rgba(0, 0, 0, .3)
}

@media (max-width: 1536px) {
    .singleHero {
        height: 600px;
        background-size: cover
    }

    .singleHero .navlinks ul {
        top: 18vh;
        left: 6%;
        gap: 8px
    }

    .singleHero .navlinks ul li,
    .singleHero .navlinks ul li a {
        font-size: 18px
    }

    .singleHero .navlinks ul .nav {
        padding: 4px 1px
    }

    .singleHero .navlinks ul .nav img {
        width: 22px;
        height: 22px
    }

    .singleHero .content {
        margin: 10% auto
    }

    .singleHero .content .title h1 {
        width: 50%;
        font-size: 2.8rem;
        margin-bottom: 8px
    }
}

@media (max-width: 1440px) {
    .singleHero {
        height: 580px;
        background-size: cover
    }

    .singleHero .navlinks ul {
        top: 20vh;
        left: 5%;
        gap: 7px
    }

    .singleHero .navlinks ul li,
    .singleHero .navlinks ul li a {
        font-size: 17px
    }

    .singleHero .navlinks ul .nav {
        padding: 3px 1px
    }

    .singleHero .navlinks ul .nav img {
        width: 20px;
        height: 20px
    }

    .singleHero .content {
        margin: 12% auto
    }

    .singleHero .content .title h1 {
        width: 55%;
        font-size: 2.6rem;
        margin-bottom: 6px
    }
}

@media (max-width: 1280px) {
    .singleHero {
        height: 550px;
        background-size: cover
    }

    .singleHero .navlinks ul {
        top: 22vh;
        left: 4%;
        gap: 6px
    }

    .singleHero .navlinks ul li,
    .singleHero .navlinks ul li a {
        font-size: 16px
    }

    .singleHero .navlinks ul .nav {
        padding: 2px 1px
    }

    .singleHero .navlinks ul .nav img {
        width: 18px;
        height: 18px
    }

    .singleHero .content {
        margin: 14% auto
    }

    .singleHero .content .title h1 {
        width: 60%;
        font-size: 2.4rem;
        margin-bottom: 5px
    }
}

@media (max-width: 480px) {
    .singleHero {
        background-size: cover;
        height: 335.73px;
        width: 100%
    }

    .singleHero .navlinks ul {
        top: 13vh;
        left: 5%;
        gap: 5px
    }

    .singleHero .navlinks ul li,
    .singleHero .navlinks ul li a {
        font-size: 10px
    }

    .singleHero .navlinks ul .nav {
        padding: 0;
        scale: .6
    }

    .singleHero .content {
        width: 80%
    }

    .singleHero .content .title h1 {
        margin: -60px auto;
        width: 100%;
        font-size: 24px
    }
}

.SingleInfo {
    padding: 2% 6.5%;
    border-radius: 50px 50px 0 0;
    height: 628px;
    margin-top: -45px
}

.SingleInfo p {
    color: #222;
    width: 100%;
    margin-top: 40px;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: .8px
}

.SingleInfo ul {
    color: #222;
    margin-top: 40px;
    margin-left: 20px;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: .8px
}

@media (max-width: 1536px) {
    .SingleInfo {
        padding: 2.5% 7%;
        height: 600px;
        margin-top: -40px
    }

    .SingleInfo p {
        font-size: 18px;
        margin-top: 35px;
        letter-spacing: .7px
    }

    .SingleInfo ul {
        font-size: 18px;
        margin-top: 35px;
        margin-left: 18px;
        letter-spacing: .7px
    }
}

@media (max-width: 1440px) {
    .SingleInfo {
        padding: 3% 6%;
        height: 580px;
        margin-top: -35px
    }

    .SingleInfo p {
        font-size: 17px;
        margin-top: 30px;
        letter-spacing: .6px
    }

    .SingleInfo ul {
        font-size: 17px;
        margin-top: 30px;
        margin-left: 16px;
        letter-spacing: .6px
    }
}

@media (max-width: 1280px) {
    .SingleInfo {
        padding: 3.5% 5.5%;
        height: 550px;
        margin-top: -30px
    }

    .SingleInfo p {
        font-size: 16px;
        margin-top: 25px;
        letter-spacing: .5px
    }

    .SingleInfo ul {
        font-size: 16px;
        margin-top: 25px;
        margin-left: 14px;
        letter-spacing: .5px
    }
}

@media (max-width: 480px) {
    .SingleInfo {
        height: 840px;
        margin-top: 2%
    }

    .SingleInfo p {
        font-size: 16px;
        font-weight: 500;
        margin-top: 12px;
        line-height: normal;
        letter-spacing: normal
    }

    .SingleInfo ul {
        margin-top: 12px;
        font-size: 16px
    }
}

.ViewMore {
    padding: 2% 6.5%;
    background-color: #fbc51d33
}

.ViewMore .top {
    display: flex;
    flex-direction: column
}

.ViewMore .top .title {
    color: var(--color-red);
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.ViewMore .top .desc {
    color: #2c2c2c;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    width: 60%;
    margin: auto;
    padding-top: 2%;
    line-height: normal
}

.ViewMore .ViewMoreContainer {
    padding-top: 2%;
    display: flex;
    gap: 2%;
    justify-content: center;
    align-items: start
}

.ViewMore .ViewMoreContainer .ViewMoreCard {
    border-radius: 10px;
    background: #fbc51d;
    width: 33%;
    height: 557px;
    box-shadow: 0 10px 20px #0003
}

.ViewMore .ViewMoreContainer .ViewMoreCard:nth-child(2n) {
    background: #fbc51d33
}

.ViewMore .ViewMoreContainer .ViewMoreCard .top .bgImage img {
    border-radius: 10px 10px 0 0;
    height: 371px;
    width: 100%
}

.ViewMore .ViewMoreContainer .ViewMoreCard .bottom {
    height: 186px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between
}

.ViewMore .ViewMoreContainer .ViewMoreCard .bottom .desc {
    height: 50%;
    padding: 2% 10%;
    font-weight: 400;
    font-size: 24px;
    line-height: 28.8px;
    text-align: center
}

.ViewMore .ViewMoreContainer .ViewMoreCard .bottom .knowmore {
    width: 34.375%;
    padding-bottom: 18px
}

.ViewMore .ViewMoreContainer .ViewMoreCard .bottom .knowmore button {
    color: var(--color-white);
    padding: auto;
    background-color: #2c2c2c;
    border-radius: 10px;
    height: 50px;
    width: 100%
}

@media (max-width: 1536px) {
    .ViewMore {
        padding: 2.5% 7%
    }

    .ViewMore .top .title {
        font-size: 52px
    }

    .ViewMore .top .desc {
        font-size: 22px;
        width: 65%
    }

    .ViewMore .ViewMoreContainer {
        gap: 1.5%
    }

    .ViewMore .ViewMoreContainer .ViewMoreCard {
        width: 32%;
        height: 540px
    }

    .ViewMore .ViewMoreContainer .ViewMoreCard .bottom {
        height: 180px
    }

    .ViewMore .ViewMoreContainer .ViewMoreCard .bottom .desc {
        font-size: 22px
    }

    .ViewMore .ViewMoreContainer .ViewMoreCard .bottom .knowmore {
        width: 36%
    }

    .ViewMore .ViewMoreContainer .ViewMoreCard .bottom .knowmore button {
        height: 48px
    }
}

@media (max-width: 1440px) {
    .ViewMore {
        padding: 3% 6%
    }

    .ViewMore .top .title {
        font-size: 50px
    }

    .ViewMore .top .desc {
        font-size: 20px;
        width: 70%
    }

    .ViewMore .ViewMoreContainer {
        gap: 1.25%
    }

    .ViewMore .ViewMoreContainer .ViewMoreCard {
        width: 31%;
        height: 540px
    }

    .ViewMore .ViewMoreContainer .ViewMoreCard .bottom {
        height: 170px
    }

    .ViewMore .ViewMoreContainer .ViewMoreCard .bottom .desc {
        font-size: 20px
    }

    .ViewMore .ViewMoreContainer .ViewMoreCard .bottom .knowmore {
        width: 37%
    }

    .ViewMore .ViewMoreContainer .ViewMoreCard .bottom .knowmore button {
        height: 45px
    }
}

@media (max-width: 1280px) {
    .ViewMore {
        padding: 3.5% 5.5%
    }

    .ViewMore .top .title {
        font-size: 48px
    }

    .ViewMore .top .desc {
        font-size: 18px;
        width: 75%
    }

    .ViewMore .ViewMoreContainer {
        gap: 1%
    }

    .ViewMore .ViewMoreContainer .ViewMoreCard {
        width: 30%;
        height: 530px
    }

    .ViewMore .ViewMoreContainer .ViewMoreCard .bottom {
        height: 160px
    }

    .ViewMore .ViewMoreContainer .ViewMoreCard .bottom .desc {
        font-size: 18px
    }

    .ViewMore .ViewMoreContainer .ViewMoreCard .bottom .knowmore {
        width: 38%
    }

    .ViewMore .ViewMoreContainer .ViewMoreCard .bottom .knowmore button {
        height: 42px
    }
}

@media (max-width: 480px) {
    .ViewMore .top {
        padding-top: 20px
    }

    .ViewMore .top .title {
        font-size: 20px !important
    }

    .ViewMore .top .desc {
        font-size: 18px !important;
        width: 100% !important;
        font-weight: 650
    }

    .ViewMore .ViewMoreContainer .ViewMoreCard {
        height: 400px;
        width: 100%
    }

    .ViewMore .ViewMoreContainer .ViewMoreCard .top {
        padding: 0
    }

    .ViewMore .ViewMoreContainer .ViewMoreCard .top .bgImage img {
        border-radius: 10px 10px 0 0;
        height: 214px;
        width: 100%
    }

    .ViewMore .ViewMoreContainer .ViewMoreCard .bottom {
        gap: 15px !important;
        padding: 0% !important
    }

    .ViewMore .ViewMoreContainer .ViewMoreCard .bottom .desc {
        font-size: 18px;
        font-weight: 650;
        line-height: normal
    }

    .ViewMore .ViewMoreContainer .ViewMoreCard .bottom .knowmore {
        width: 45.375%;
        padding-bottom: 18px
    }

    .ViewMore .ViewMoreContainer .ViewMoreCard .bottom .knowmore button {
        font-size: 18px;
        font-weight: 650;
        background-color: #2c2c2c;
        border-radius: 10px;
        height: 50px;
        width: 100%
    }

    .vmActive {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin: 20px 0
    }

    .vmActive .vmPage {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #da1e3733;
        transition: background-color .3s ease
    }

    .vmActive .vmPage.vmActive-page {
        background-color: #da1e37
    }
}

.popupWrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #00000079;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999
}

.Popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.8);
    background-color: var(--color-white);
    z-index: 1000;
    display: flex;
    justify-content: center;
    width: 80%;
    margin: auto;
    border-radius: 30px;
    padding: 15px;
    max-width: 1030px
}

.Popup .pos_rel {
    position: relative
}

.Popup .left {
    position: relative;
    border-radius: 40px 0 0 40px;
    background-color: #dc143c
}

.Popup .right {
    position: relative;
    width: 100%;
    padding: 2% 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.Popup .right .heading h1 {
    color: var(--color-red);
    text-shadow: 0rem .33rem .33rem rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 100%;
    margin: 0
}

.Popup .right .desc p {
    padding: 10px;
    color: #2c2c2c;
    font-size: 1.25rem;
    font-weight: 650;
    line-height: normal;
    text-align: center
}

.Popup .right .popup-form {
    display: flex;
    justify-content: flex-start;
    flex-direction: column
}

.Popup .right .popup-form form {
    padding: 0 4%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
    row-gap: 20px;
    width: 100%
}

.Popup .right .popup-form form label {
    color: #2c2c2c;
    font-size: 1.33rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    margin-bottom: .33rem
}

.Popup .right .popup-form form input,
.Popup .right .popup-form form select {
    display: block;
    height: 3.57rem;
    padding: .83rem 1.67rem;
    align-items: center;
    border: none;
    border: 1px solid rgba(255, 30, 50, .3);
    border-radius: 12px;
    color: #2c2c2c;
    font-size: 1.17rem;
    font-weight: 500;
    background-color: transparent;
    width: 100%
}

.Popup .right .popup-form form .privacy-checkbox {
    display: flex;
    gap: 10px;
    align-items: center
}

.Popup .right .popup-form form .privacy-checkbox input {
    height: 22px;
    width: 22px
}

.Popup .right .popup-form form input::placeholder {
    color: #999
}

.Popup .right .popup-form form select::placeholder {
    color: #2c2c2c
}

.Popup .right .popup-form form label {
    color: #2c2c2c;
    font-size: 1rem;
    font-weight: 500;
    margin-top: .42rem
}

.Popup .right .submit {
    padding: 3% 0 0
}

.Popup .right .submit button {
    grid-column: span 2;
    display: flex;
    width: 15.56rem;
    height: 3.33rem;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    background: #fbc51d;
    color: #2c2c2c;
    font-size: 24px;
    font-weight: 650;
    border: none;
    cursor: pointer
}

.Popup .right .submit button:hover {
    color: var(--color-white);
    background-color: #2c2c2c
}

.Popup .right .checkbox-container {
    grid-column: span 2;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 20px 15px 10px;
    font-style: italic;
    font-size: 1rem
}

.Popup .close {
    position: absolute;
    right: 1%;
    top: 2%;
    width: 35px;
    height: 35px;
    background: #000000f2;
    color: var(--color-white);
    font-size: 1.5rem;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    font-weight: 600;
    cursor: pointer;
    transition: transform .3s ease, opacity .3s ease
}

.Popup .close:hover {
    transform: scale(1.2) rotate(90deg);
    opacity: .7
}

@media screen and (max-width: 1024px) {
    .Popup .right .popup-form form {
        column-gap: 20px;
        row-gap: 10px
    }
}

@media screen and (max-width: 767px) {
    .popupWrapper .Popup {
        width: 100%;
        height: auto;
        padding: 10px
    }

    .Popup .right {
        padding: 2% 0
    }

    .Popup .right .popup-form form {
        padding: 0 4%;
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 0px;
        row-gap: 5px;
        width: 100%
    }

    .Popup .close {
        right: -4%;
        top: -2%
    }

    .Popup .right .popup-form form input,
    .Popup .right .popup-form form select {
        height: 3.07rem;
        padding: .5rem .85rem;
        border-radius: 10px;
        font-size: 1.07rem
    }

    .Popup .right .checkbox-container {
        font-size: .8rem
    }
}

.LACSingleHero {
    width: 90%;
    margin: 80px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 898px
}

.LACSingleHero .left {
    height: 100%;
    width: 830px;
    flex-shrink: 0
}

.LACSingleHero .left img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.LACSingleHero .right {
    height: 100%;
    padding: 20px 0;
    background: #fbc51d12;
    width: 50%;
    display: flex;
    gap: 20px;
    flex-direction: column
}

.LACSingleHero .right .top {
    text-align: center;
    color: var(--color-red);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 42px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.LACSingleHero .right form {
    padding: 30px 60px;
    gap: 40px
}

.LACSingleHero .right form label {
    padding: 20px;
    gap: 10px;
    display: flex;
    flex-direction: column;
    color: var(--GREY-COLOR, #2c2c2c);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: .8px
}

.LACSingleHero .right form input,
.LACSingleHero .right form select {
    color: var(--GREY-COLOR, #2c2c2c);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid rgba(255, 30, 50, .3);
    width: 80%
}

.LACSingleHero .right .disclaimer {
    display: flex;
    justify-content: center
}

.LACSingleHero .right .disclaimer p {
    width: 60%;
    color: var(--GREY-COLOR, #2c2c2c);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.LACSingleHero .right .submit {
    display: flex;
    justify-content: center;
    align-items: center
}

.LACSingleHero .right .submit button {
    cursor: pointer;
    border-radius: 10px;
    background: var(--PRIMARY-YELLOW-COLOR, #fbc51d);
    color: var(--GREY-COLOR, #2c2c2c);
    font-size: 18px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    width: 187px;
    height: 50px;
    padding: 12px 26px;
    gap: 10px;
    flex-shrink: 0
}

@media (max-width: 1536px) {
    .LACSingleHero {
        margin: 70px auto;
        height: 800px
    }

    .LACSingleHero .left {
        width: 780px
    }

    .LACSingleHero .right {
        width: 55%;
        padding: 15px 0
    }

    .LACSingleHero .right .top {
        font-size: 38px
    }

    .LACSingleHero .right form {
        padding: 25px 50px
    }

    .LACSingleHero .right form label {
        font-size: 18px
    }

    .LACSingleHero .right form input,
    .LACSingleHero .right form select {
        font-size: 15px;
        padding: 12px
    }

    .LACSingleHero .right .disclaimer p {
        font-size: 15px;
        width: 70%
    }

    .LACSingleHero .right .submit button {
        font-size: 16px;
        width: 180px;
        height: 45px;
        padding: 10px 20px
    }
}

@media (max-width: 1440px) {
    .LACSingleHero {
        margin: 60px auto;
        height: 750px
    }

    .LACSingleHero .left {
        width: 730px
    }

    .LACSingleHero .right {
        width: 60%;
        padding: 10px 0
    }

    .LACSingleHero .right .top {
        font-size: 34px
    }

    .LACSingleHero .right form {
        padding: 20px 40px
    }

    .LACSingleHero .right form label {
        font-size: 17px
    }

    .LACSingleHero .right form input,
    .LACSingleHero .right form select {
        font-size: 14px;
        padding: 10px
    }

    .LACSingleHero .right .disclaimer p {
        font-size: 14px;
        width: 75%
    }

    .LACSingleHero .right .submit button {
        font-size: 15px;
        width: 175px;
        height: 45px;
        padding: 10px 18px
    }
}

@media (max-width: 1280px) {
    .LACSingleHero {
        margin: 50px auto;
        height: 700px
    }

    .LACSingleHero .left {
        width: 680px
    }

    .LACSingleHero .right {
        width: 65%;
        padding: 10px 0
    }

    .LACSingleHero .right .top {
        font-size: 30px
    }

    .LACSingleHero .right form {
        padding: 20px 35px
    }

    .LACSingleHero .right form label {
        font-size: 16px
    }

    .LACSingleHero .right form input,
    .LACSingleHero .right form select {
        font-size: 14px;
        padding: 10px
    }

    .LACSingleHero .right .disclaimer p {
        font-size: 13px;
        width: 80%
    }

    .LACSingleHero .right .submit button {
        font-size: 14px;
        width: 160px;
        height: 40px;
        padding: 8px 15px
    }
}

@media (max-width: 480px) {
    .LACSingleHero {
        flex-direction: column;
        height: auto;
        margin: 40px auto;
        width: 95%;
        gap: 30px
    }

    .LACSingleHero .left {
        width: 100%;
        height: auto
    }

    .LACSingleHero .left img {
        height: auto;
        max-height: 300px;
        object-fit: contain
    }

    .LACSingleHero .right {
        width: 100%;
        padding: 20px 10px;
        gap: 20px
    }

    .LACSingleHero .right .top {
        font-size: 28px;
        padding: 0 10px
    }

    .LACSingleHero .right form {
        padding: 20px;
        gap: 20px
    }

    .LACSingleHero .right form label {
        font-size: 16px;
        padding: 10px 0
    }

    .LACSingleHero .right form input,
    .LACSingleHero .right form select {
        width: 100%;
        font-size: 14px;
        padding: 12px
    }

    .LACSingleHero .right .disclaimer p {
        width: 90%;
        font-size: 14px
    }

    .LACSingleHero .right .submit button {
        width: 100%;
        height: 45px;
        font-size: 16px
    }
}

.LACSingleCard {
    display: flex;
    width: 88.5%;
    justify-content: center;
    align-items: center;
    margin: 80px auto;
    height: 494px
}

.LACSingleCard .left {
    width: 60%
}

.LACSingleCard .left .card {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    border-radius: 10px 0 0 10px;
    background: #fbc51d;
    padding: 48px 90px 51px
}

.LACSingleCard .left .card .top {
    display: flex;
    justify-content: space-between
}

.LACSingleCard .left .card .top .name {
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.LACSingleCard .left .card .top .image {
    width: 28.5px;
    height: 35px
}

.LACSingleCard .left .card .top .image img {
    height: 100%;
    width: 100%;
    object-fit: cover
}

.LACSingleCard .left .card .mid {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.LACSingleCard .left .card .mid p {
    display: flex;
    flex-direction: column;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.LACSingleCard .left .card .mid .address,
.LACSingleCard .left .card .mid .phone {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.LACSingleCard .left .card .logos {
    display: flex;
    justify-content: center;
    gap: 20px
}

.LACSingleCard .left .card .logos .sms {
    display: flex;
    width: 30%;
    gap: 20px
}

.LACSingleCard .left .card .logos .sms .smstext {
    width: 100%;
    color: var(--color-red);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.LACSingleCard .left .card .logos .form {
    display: flex;
    width: 100%;
    gap: 20px
}

.LACSingleCard .left .card .logos .form .formtext {
    cursor: pointer;
    width: 70%;
    color: var(--color-red);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.LACSingleCard .right {
    width: 40%;
    height: 494px
}

.LACSingleCard .right img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media (max-width: 1536px) {
    .LACSingleCard {
        height: 470px;
        margin: 70px auto
    }

    .LACSingleCard .left .card {
        padding: 40px 70px 45px;
        gap: 40px
    }

    .LACSingleCard .left .card .top .name {
        font-size: 30px
    }

    .LACSingleCard .left .card .top .image {
        width: 26px;
        height: 32px
    }

    .LACSingleCard .left .card .mid {
        gap: 16px
    }

    .LACSingleCard .left .card .mid p,
    .LACSingleCard .left .card .mid .address,
    .LACSingleCard .left .card .mid .phone {
        font-size: 22px
    }

    .LACSingleCard .left .card .logos {
        gap: 16px
    }

    .LACSingleCard .left .card .logos .sms .smstext,
    .LACSingleCard .left .card .logos .form .formtext {
        font-size: 22px
    }

    .LACSingleCard .right {
        height: 470px
    }
}

@media (max-width: 1440px) {
    .LACSingleCard {
        height: 440px;
        margin: 60px auto
    }

    .LACSingleCard .left .card {
        padding: 35px 60px 40px;
        gap: 36px
    }

    .LACSingleCard .left .card .top .name {
        font-size: 28px
    }

    .LACSingleCard .left .card .top .image {
        width: 24px;
        height: 30px
    }

    .LACSingleCard .left .card .mid {
        gap: 14px
    }

    .LACSingleCard .left .card .mid p,
    .LACSingleCard .left .card .mid .address,
    .LACSingleCard .left .card .mid .phone {
        font-size: 20px
    }

    .LACSingleCard .left .card .logos {
        gap: 14px
    }

    .LACSingleCard .left .card .logos .sms .smstext,
    .LACSingleCard .left .card .logos .form .formtext {
        font-size: 20px
    }

    .LACSingleCard .right {
        height: 440px
    }
}

@media (max-width: 1280px) {
    .LACSingleCard {
        height: 410px;
        margin: 50px auto
    }

    .LACSingleCard .left .card {
        padding: 30px 50px 35px;
        gap: 30px
    }

    .LACSingleCard .left .card .top .name {
        font-size: 26px
    }

    .LACSingleCard .left .card .top .image {
        width: 22px;
        height: 28px
    }

    .LACSingleCard .left .card .mid {
        gap: 12px
    }

    .LACSingleCard .left .card .mid p,
    .LACSingleCard .left .card .mid .address,
    .LACSingleCard .left .card .mid .phone {
        font-size: 18px
    }

    .LACSingleCard .left .card .logos {
        gap: 12px
    }

    .LACSingleCard .left .card .logos .sms .smstext,
    .LACSingleCard .left .card .logos .form .formtext {
        font-size: 18px
    }

    .LACSingleCard .right {
        height: 410px
    }
}

@media (max-width: 480px) {
    .LACSingleCard {
        flex-direction: column;
        width: 95%;
        height: auto;
        margin: 40px auto;
        gap: 20px
    }

    .LACSingleCard .left,
    .LACSingleCard .right {
        width: 100%;
        height: auto
    }

    .LACSingleCard .left .card {
        padding: 24px 20px;
        gap: 32px;
        border-radius: 10px
    }

    .LACSingleCard .left .card .top {
        flex-direction: column;
        align-items: center;
        gap: 10px
    }

    .LACSingleCard .left .card .top .name {
        font-size: 24px;
        text-align: left
    }

    .LACSingleCard .left .card .top .image {
        width: 15px;
        height: 20px
    }

    .LACSingleCard .left .card .mid {
        gap: 12px
    }

    .LACSingleCard .left .card .mid p {
        font-size: 18px;
        text-align: left
    }

    .LACSingleCard .left .card .mid .address,
    .LACSingleCard .left .card .mid .phone {
        font-size: 16px;
        text-align: left
    }

    .LACSingleCard .left .card .logos {
        flex-direction: column;
        align-items: center;
        gap: 15px
    }

    .LACSingleCard .left .card .logos .sms,
    .LACSingleCard .left .card .logos .form {
        width: 100%;
        justify-content: start
    }

    .LACSingleCard .left .card .logos .sms .smstext,
    .LACSingleCard .left .card .logos .sms .formtext,
    .LACSingleCard .left .card .logos .form .smstext,
    .LACSingleCard .left .card .logos .form .formtext {
        font-size: 16px;
        text-align: left;
        width: 100%
    }

    .LACSingleCard .right img {
        max-height: 250px;
        object-fit: contain;
        border-radius: 10px
    }
}

.LACSingleHeroBanner {
    background: linear-gradient(0deg, #0000008c, #0000008c), url(/assets/banner-DiFUmmCz.jpeg) #d3d3d3 0px -309.738px/100% 452.555% no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 89%;
    height: 209px;
    margin: 40px auto
}

.LACSingleHeroBanner p {
    padding: 61px 253px;
    color: var(--color-white);
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

@media (max-width: 1536px) {
    .LACSingleHeroBanner {
        height: 180px;
        margin: 30px auto
    }

    .LACSingleHeroBanner p {
        padding: 50px 150px;
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .LACSingleHeroBanner {
        height: 160px;
        margin: 25px auto
    }

    .LACSingleHeroBanner p {
        padding: 40px 120px;
        font-size: 20px
    }
}

@media (max-width: 1280px) {
    .LACSingleHeroBanner {
        height: 140px;
        margin: 20px auto
    }

    .LACSingleHeroBanner p {
        padding: 30px 100px;
        font-size: 18px
    }
}

@media (max-width: 480px) {
    .LACSingleHeroBanner {
        width: 95%;
        height: auto;
        margin: 20px auto;
        padding: 20px 10px;
        background: linear-gradient(0deg, #0000008c, #0000008c), url(/assets/banner-DiFUmmCz.jpeg) center/cover no-repeat;
        background-position: center
    }

    .LACSingleHeroBanner p {
        padding: 20px;
        font-size: 16px;
        line-height: 1.4
    }
}

.LACSingleCourses {
    display: flex;
    padding: 72px 0S;
    margin: 80px auto;
    width: 100%;
    background: #fbc51d40;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.LACSingleCourses .heading {
    color: var(--color-red);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.LACSingleCourses .coursesContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 31px;
    padding: 3.48% 3.84%
}

.LACSingleCourses .coursesContainer .course {
    width: 31%;
    height: 780px
}

.LACSingleCourses .coursesContainer .course .top {
    width: 100%;
    height: 50%
}

.LACSingleCourses .coursesContainer .course .top img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.LACSingleCourses .coursesContainer .course .bottom {
    height: 51.5%;
    padding: 40px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start
}

.LACSingleCourses .coursesContainer .course .bottom .name {
    font-size: 48px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.LACSingleCourses .coursesContainer .course .bottom .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.LACSingleCourses .coursesContainer .course .bottom .bcorner {
    position: absolute;
    left: 0;
    top: 0
}

.LACSingleCourses .coursesContainer .course .bottom .button {
    cursor: pointer;
    align-items: center;
    height: 48px;
    width: 35%;
    padding: 13px;
    color: var(--color-white);
    font-size: 18px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    display: flex;
    justify-content: space-between;
    border-radius: 10px;
    background: var(--color-red)
}

.LACSingleCourses .coursesContainer .course .bottom .button img {
    width: 27px;
    height: 12px
}

@media (max-width: 1536px) {
    .LACSingleCourses {
        padding: 64px 0;
        margin: 70px auto
    }

    .LACSingleCourses .heading {
        font-size: 52px
    }

    .LACSingleCourses .coursesContainer {
        gap: 28px
    }

    .LACSingleCourses .coursesContainer .course {
        width: 32%;
        height: 740px
    }

    .LACSingleCourses .coursesContainer .course .bottom {
        padding: 36px
    }

    .LACSingleCourses .coursesContainer .course .bottom .name {
        font-size: 44px
    }

    .LACSingleCourses .coursesContainer .course .bottom .desc {
        font-size: 22px
    }

    .LACSingleCourses .coursesContainer .course .bottom .button {
        height: 46px;
        font-size: 17px;
        padding: 12px
    }

    .LACSingleCourses .coursesContainer .course .bottom .button img {
        width: 25px;
        height: 11px
    }
}

@media (max-width: 1440px) {
    .LACSingleCourses {
        padding: 60px 0;
        margin: 60px auto
    }

    .LACSingleCourses .heading {
        font-size: 48px
    }

    .LACSingleCourses .coursesContainer {
        gap: 24px
    }

    .LACSingleCourses .coursesContainer .course {
        width: 32.5%;
        height: 700px
    }

    .LACSingleCourses .coursesContainer .course .bottom {
        padding: 32px
    }

    .LACSingleCourses .coursesContainer .course .bottom .name {
        font-size: 40px
    }

    .LACSingleCourses .coursesContainer .course .bottom .desc {
        font-size: 20px
    }

    .LACSingleCourses .coursesContainer .course .bottom .button {
        height: 44px;
        font-size: 16px;
        padding: 11px
    }

    .LACSingleCourses .coursesContainer .course .bottom .button img {
        width: 24px;
        height: 10px
    }
}

@media (max-width: 1280px) {
    .LACSingleCourses {
        padding: 56px 0;
        margin: 50px auto
    }

    .LACSingleCourses .heading {
        font-size: 44px
    }

    .LACSingleCourses .coursesContainer {
        gap: 20px
    }

    .LACSingleCourses .coursesContainer .course {
        width: 33%;
        height: 660px
    }

    .LACSingleCourses .coursesContainer .course .bottom {
        padding: 28px
    }

    .LACSingleCourses .coursesContainer .course .bottom .name {
        font-size: 36px
    }

    .LACSingleCourses .coursesContainer .course .bottom .desc {
        font-size: 18px
    }

    .LACSingleCourses .coursesContainer .course .bottom .button {
        height: 42px;
        font-size: 15px;
        padding: 10px
    }

    .LACSingleCourses .coursesContainer .course .bottom .button img {
        width: 22px;
        height: 9px
    }
}

@media (max-width: 480px) {
    .LACSingleCourses {
        padding: 40px 0;
        margin: 40px auto
    }

    .LACSingleCourses .heading {
        font-size: 28px;
        text-align: center
    }

    .LACSingleCourses .coursesContainer {
        flex-direction: column;
        padding: 20px 10px;
        gap: 24px
    }

    .LACSingleCourses .coursesContainer .course {
        width: 100%;
        height: auto;
        border-radius: 10px;
        overflow: hidden
    }

    .LACSingleCourses .coursesContainer .course .top {
        height: 200px
    }

    .LACSingleCourses .coursesContainer .course .top img {
        object-fit: cover
    }

    .LACSingleCourses .coursesContainer .course .bottom {
        padding: 20px;
        gap: 16px
    }

    .LACSingleCourses .coursesContainer .course .bottom .name {
        font-size: 24px
    }

    .LACSingleCourses .coursesContainer .course .bottom .desc {
        font-size: 16px
    }

    .LACSingleCourses .coursesContainer .course .bottom .button {
        width: 100%;
        font-size: 16px;
        padding: 12px;
        justify-content: center;
        gap: 10px
    }

    .LACSingleCourses .coursesContainer .course .bottom .button img {
        width: 18px;
        height: 8px
    }
}

.LACSingleEvents {
    display: flex;
    width: 89%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 80px auto;
    gap: 40px;
    position: relative
}

.LACSingleEvents .heading {
    color: var(--color-red);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.LACSingleEvents .desc {
    width: 60%;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.LACSingleEvents .EventContainer {
    display: flex;
    margin: auto;
    width: 100%;
    height: 940px
}

.LACSingleEvents .EventContainer .left {
    position: absolute;
    left: 0;
    top: 50%
}

.LACSingleEvents .EventContainer .right {
    position: absolute;
    right: 0;
    top: 50%
}

.LACSingleEvents .EventContainer .event {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    gap: 40px
}

.LACSingleEvents .EventContainer .event .title {
    font-size: 48px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.LACSingleEvents .EventContainer .event .image {
    position: relative;
    width: 80%;
    height: 748px
}

.LACSingleEvents .EventContainer .event .image .play {
    position: absolute;
    top: 43%;
    right: 46%
}

.LACSingleEvents .EventContainer .event .image img {
    height: 100%;
    width: 100%;
    object-fit: cover
}

.LACSingleEvents .EventContainer .event .edesc {
    width: 70%;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.LACSingleEvents .button {
    cursor: pointer;
    width: 25%;
    color: var(--color-white);
    font-size: 18px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    border-radius: 10px;
    background: var(--red, #dc143c);
    padding: 20px;
    display: flex;
    justify-content: space-between
}

@media (max-width: 1536px) {
    .LACSingleEvents {
        margin: 70px auto;
        gap: 36px
    }

    .LACSingleEvents .heading {
        font-size: 52px
    }

    .LACSingleEvents .desc {
        width: 65%;
        font-size: 22px
    }

    .LACSingleEvents .EventContainer {
        height: 900px
    }

    .LACSingleEvents .EventContainer .event {
        gap: 36px
    }

    .LACSingleEvents .EventContainer .event .title {
        font-size: 44px
    }

    .LACSingleEvents .EventContainer .event .image {
        height: 720px
    }

    .LACSingleEvents .EventContainer .event .image .play {
        top: 44%;
        right: 45.5%
    }

    .LACSingleEvents .EventContainer .event .edesc {
        font-size: 22px
    }

    .LACSingleEvents .button {
        width: 27%;
        font-size: 17px;
        padding: 18px
    }
}

@media (max-width: 1440px) {
    .LACSingleEvents {
        margin: 60px auto;
        gap: 32px
    }

    .LACSingleEvents .heading {
        font-size: 48px
    }

    .LACSingleEvents .desc {
        width: 70%;
        font-size: 21px
    }

    .LACSingleEvents .EventContainer {
        height: 860px
    }

    .LACSingleEvents .EventContainer .event {
        gap: 32px
    }

    .LACSingleEvents .EventContainer .event .title {
        font-size: 40px
    }

    .LACSingleEvents .EventContainer .event .image {
        height: 680px
    }

    .LACSingleEvents .EventContainer .event .image .play {
        top: 45%;
        right: 45%
    }

    .LACSingleEvents .EventContainer .event .edesc {
        font-size: 21px
    }

    .LACSingleEvents .button {
        width: 29%;
        font-size: 16px;
        padding: 17px
    }
}

@media (max-width: 1280px) {
    .LACSingleEvents {
        margin: 50px auto;
        gap: 28px
    }

    .LACSingleEvents .heading {
        font-size: 44px
    }

    .LACSingleEvents .desc {
        width: 75%;
        font-size: 20px
    }

    .LACSingleEvents .EventContainer {
        height: 820px
    }

    .LACSingleEvents .EventContainer .event {
        gap: 28px
    }

    .LACSingleEvents .EventContainer .event .title {
        font-size: 36px
    }

    .LACSingleEvents .EventContainer .event .image {
        height: 640px
    }

    .LACSingleEvents .EventContainer .event .image .play {
        top: 46%;
        right: 44.5%
    }

    .LACSingleEvents .EventContainer .event .edesc {
        font-size: 20px
    }

    .LACSingleEvents .button {
        width: 30%;
        font-size: 15px;
        padding: 16px
    }
}

@media (max-width: 480px) {
    .LACSingleEvents {
        width: 95%;
        margin: 40px auto;
        gap: 24px
    }

    .LACSingleEvents .heading {
        font-size: 28px;
        text-align: center
    }

    .LACSingleEvents .desc {
        width: 100%;
        font-size: 16px;
        padding: 0 12px
    }

    .LACSingleEvents .EventContainer {
        flex-direction: column;
        height: auto;
        position: relative
    }

    .LACSingleEvents .EventContainer .left,
    .LACSingleEvents .EventContainer .right {
        position: absolute;
        top: 58%;
        transform: translateY(-50%);
        width: 30px;
        height: 30px;
        z-index: 2
    }

    .LACSingleEvents .EventContainer .left img,
    .LACSingleEvents .EventContainer .right img {
        width: 100%;
        height: 100%;
        object-fit: contain
    }

    .LACSingleEvents .EventContainer .left {
        left: 10px
    }

    .LACSingleEvents .EventContainer .right {
        right: 10px
    }

    .LACSingleEvents .EventContainer .event {
        gap: 24px
    }

    .LACSingleEvents .EventContainer .event .title {
        font-size: 20px;
        text-align: center;
        padding: 0 12px
    }

    .LACSingleEvents .EventContainer .event .image {
        width: 100%;
        height: 200px
    }

    .LACSingleEvents .EventContainer .event .image .play {
        top: 43%;
        right: 43%;
        width: 30px;
        height: 30px
    }

    .LACSingleEvents .EventContainer .event .image img {
        object-fit: cover
    }

    .LACSingleEvents .EventContainer .event .edesc {
        width: 100%;
        font-size: 16px;
        padding: 0 12px
    }

    .LACSingleEvents .button {
        width: 100%;
        font-size: 16px;
        justify-content: center;
        gap: 10px;
        padding: 16px
    }
}

.LacSingleWorkshop {
    background: #fbc51d40;
    padding: 3.48% 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
    justify-content: center;
    align-items: center
}

.LacSingleWorkshop .heading {
    color: var(--color-red);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.LacSingleWorkshop .title {
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.LacSingleWorkshop .workshops {
    width: 80%;
    display: flex;
    height: 546px;
    align-items: flex-end
}

.LacSingleWorkshop .workshops .left {
    height: 100%;
    width: 55%
}

.LacSingleWorkshop .workshops .left img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.LacSingleWorkshop .workshops .right {
    background: var(--color-red);
    width: 45%;
    height: 65%;
    padding: 68px 83px 81px 30px
}

.LacSingleWorkshop .workshops .right .wtitle {
    color: var(--color-white);
    font-size: 32px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.LacSingleWorkshop .workshops .right .wdesc {
    color: var(--color-white);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.LacSingleWorkshop .wbutton {
    cursor: pointer;
    width: 25%;
    font-size: 18px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    border-radius: 10px;
    background: var(--red, #fbc51d);
    padding: 20px;
    display: flex;
    justify-content: space-between
}

@media (max-width: 1536px) {
    .LacSingleWorkshop {
        padding: 5% 0
    }

    .LacSingleWorkshop .heading {
        font-size: 48px;
        padding: 0 20px
    }

    .LacSingleWorkshop .title {
        font-size: 20px;
        padding: 0 20px
    }

    .LacSingleWorkshop .workshops {
        flex-direction: column;
        gap: 30px;
        width: 90%
    }

    .LacSingleWorkshop .workshops .left {
        height: 350px
    }

    .LacSingleWorkshop .workshops .right {
        height: 50%;
        width: 100%;
        padding: 30px
    }

    .LacSingleWorkshop .workshops .right .wtitle {
        font-size: 28px
    }

    .LacSingleWorkshop .workshops .right .wdesc {
        font-size: 20px
    }

    .LacSingleWorkshop .wbutton {
        width: 30%;
        font-size: 16px;
        padding: 18px
    }
}

@media (max-width: 1440px) {
    .LacSingleWorkshop {
        padding: 6% 0
    }

    .LacSingleWorkshop .heading {
        font-size: 44px
    }

    .LacSingleWorkshop .title {
        font-size: 18px
    }

    .LacSingleWorkshop .workshops .left {
        height: 300px
    }

    .LacSingleWorkshop .workshops .right {
        height: 45%;
        padding: 25px
    }

    .LacSingleWorkshop .workshops .right .wtitle {
        font-size: 26px
    }

    .LacSingleWorkshop .workshops .right .wdesc {
        font-size: 18px
    }

    .LacSingleWorkshop .wbutton {
        width: 35%;
        font-size: 15px;
        padding: 16px
    }
}

@media (max-width: 1280px) {
    .LacSingleWorkshop {
        padding: 7% 0
    }

    .LacSingleWorkshop .heading {
        font-size: 40px
    }

    .LacSingleWorkshop .title {
        font-size: 16px
    }

    .LacSingleWorkshop .workshops .left {
        height: 280px
    }

    .LacSingleWorkshop .workshops .right {
        height: 40%;
        padding: 20px
    }

    .LacSingleWorkshop .workshops .right .wtitle {
        font-size: 24px
    }

    .LacSingleWorkshop .workshops .right .wdesc {
        font-size: 16px
    }

    .LacSingleWorkshop .wbutton {
        width: 40%;
        font-size: 14px;
        padding: 14px
    }
}

@media (max-width: 480px) {
    .LacSingleWorkshop {
        gap: 30px;
        padding: 40px 16px
    }

    .LacSingleWorkshop .heading {
        font-size: 32px;
        text-align: center
    }

    .LacSingleWorkshop .title {
        font-size: 18px;
        padding: 0 8px
    }

    .LacSingleWorkshop .workshops {
        flex-direction: column;
        height: auto;
        align-items: center;
        gap: 20px
    }

    .LacSingleWorkshop .workshops .left {
        width: 100%;
        height: 200px
    }

    .LacSingleWorkshop .workshops .left img {
        height: 100%;
        object-fit: cover
    }

    .LacSingleWorkshop .workshops .right {
        width: 100%;
        height: auto;
        padding: 30px 20px;
        border-radius: 10px
    }

    .LacSingleWorkshop .workshops .right .wtitle {
        font-size: 22px
    }

    .LacSingleWorkshop .workshops .right .wdesc {
        font-size: 18px
    }

    .LacSingleWorkshop .wbutton {
        width: 75%;
        font-size: 16px;
        padding: 16px;
        justify-content: center;
        text-align: center
    }
}

.LACNandM {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3.48% 0;
    gap: 40px
}

.LACNandM .heading {
    color: var(--color-red);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.LACNandM .title {
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.LACNandM .nmcards {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 0 5.2%
}

.LACNandM .nmcards .nmcard {
    display: flex;
    flex-direction: column;
    width: 32%;
    height: 689px
}

.LACNandM .nmcards .nmcard .top {
    height: 50%
}

.LACNandM .nmcards .nmcard .top img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.LACNandM .nmcards .nmcard .bottom {
    display: flex;
    flex-direction: column;
    padding: 40px;
    background: var(--PRIMARY-YELLOW-COLOR, #fbc51d);
    height: 50%;
    align-items: flex-start
}

.LACNandM .nmcards .nmcard .bottom .nmtitle {
    color: var(--GREY-COLOR, #2c2c2c);
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.LACNandM .nmcards .nmcard .bottom .nmdesc {
    color: var(--GREY-COLOR, #2c2c2c);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.LACNandM .nmcards .nmcard .bottom .nmbutton {
    cursor: pointer;
    border-radius: 10px;
    display: flex;
    width: 187px;
    height: 50px;
    padding: 12px 26px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    background: var(--GREY-COLOR, #2c2c2c);
    color: var(--color-white);
    font-size: 18px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    width: 50%
}

.LACNandM .nmcards .nmcard .bottom-2 {
    background: #fbc51d66
}

@media (max-width: 1536px) {
    .LACNandM {
        gap: 36px
    }

    .LACNandM .heading {
        font-size: 52px
    }

    .LACNandM .title {
        font-size: 22px
    }

    .LACNandM .nmcards {
        gap: 22px;
        padding: 0 4.5%
    }

    .LACNandM .nmcards .nmcard {
        height: 650px
    }

    .LACNandM .nmcards .nmcard .bottom {
        padding: 36px
    }

    .LACNandM .nmcards .nmcard .bottom .nmtitle,
    .LACNandM .nmcards .nmcard .bottom .nmdesc {
        font-size: 22px
    }

    .LACNandM .nmcards .nmcard .bottom .nmbutton {
        height: 48px;
        font-size: 16px
    }
}

@media (max-width: 1440px) {
    .LACNandM {
        gap: 32px
    }

    .LACNandM .heading {
        font-size: 48px
    }

    .LACNandM .title {
        font-size: 21px
    }

    .LACNandM .nmcards {
        gap: 20px;
        padding: 0 4%
    }

    .LACNandM .nmcards .nmcard {
        height: 620px
    }

    .LACNandM .nmcards .nmcard .bottom {
        padding: 34px
    }

    .LACNandM .nmcards .nmcard .bottom .nmtitle,
    .LACNandM .nmcards .nmcard .bottom .nmdesc {
        font-size: 20px
    }

    .LACNandM .nmcards .nmcard .bottom .nmbutton {
        height: 46px;
        font-size: 15px
    }
}

@media (max-width: 1280px) {
    .LACNandM {
        gap: 28px
    }

    .LACNandM .heading {
        font-size: 44px
    }

    .LACNandM .title {
        font-size: 20px
    }

    .LACNandM .nmcards {
        gap: 18px;
        padding: 0 3.5%
    }

    .LACNandM .nmcards .nmcard {
        height: 590px
    }

    .LACNandM .nmcards .nmcard .bottom {
        padding: 30px
    }

    .LACNandM .nmcards .nmcard .bottom .nmtitle,
    .LACNandM .nmcards .nmcard .bottom .nmdesc {
        font-size: 18px
    }

    .LACNandM .nmcards .nmcard .bottom .nmbutton {
        height: 44px;
        font-size: 14px
    }
}

@media (max-width: 480px) {
    .LACNandM {
        padding: 40px 16px;
        gap: 30px
    }

    .LACNandM .heading {
        font-size: 32px;
        text-align: center
    }

    .LACNandM .title {
        font-size: 18px;
        padding: 0 8px
    }

    .LACNandM .nmcards {
        flex-direction: column;
        gap: 20px;
        padding: 0
    }

    .LACNandM .nmcards .nmcard {
        width: 100%;
        height: auto
    }

    .LACNandM .nmcards .nmcard .top {
        height: 200px
    }

    .LACNandM .nmcards .nmcard .top img {
        height: 100%;
        object-fit: cover
    }

    .LACNandM .nmcards .nmcard .bottom {
        padding: 20px;
        height: auto
    }

    .LACNandM .nmcards .nmcard .bottom .nmtitle {
        font-size: 20px
    }

    .LACNandM .nmcards .nmcard .bottom .nmdesc {
        font-size: 16px
    }

    .LACNandM .nmcards .nmcard .bottom .nmbutton {
        width: 100%;
        height: 44px;
        font-size: 16px;
        padding: 10px;
        margin: 10px 0
    }

    .LACNandM .nmcards .nmcard .bottom-2 {
        background: #fbc51d66
    }
}

.LACAlumini {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3.48% 0;
    gap: 40px
}

.LACAlumini .heading {
    color: var(--color-red);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.LACAlumini .lacAluminiCards {
    padding: 0 12.83%;
    display: flex;
    flex-direction: column;
    row-gap: 40px
}

.LACAlumini .lacAluminiCards .aluminicard {
    display: flex;
    height: 585px;
    gap: 30px
}

.LACAlumini .lacAluminiCards .aluminicard .left {
    width: 45%
}

.LACAlumini .lacAluminiCards .aluminicard .left img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.LACAlumini .lacAluminiCards .aluminicard .right {
    display: flex;
    flex-direction: column;
    width: 54%;
    gap: 20px;
    padding: 29px;
    border-radius: 15px;
    background: var(--color-white);
    box-shadow: 0 4px 20px #00000040
}

.LACAlumini .lacAluminiCards .aluminicard .right .cname {
    padding-bottom: 20px;
    font-size: 48px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.LACAlumini .lacAluminiCards .aluminicard .right .ctitle {
    font-size: 32px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.LACAlumini .lacAluminiCards .aluminicard .right .projects,
.LACAlumini .lacAluminiCards .aluminicard .right .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.LACAlumini .lacAluminiCards .aluminicard .right .projects u,
.LACAlumini .lacAluminiCards .aluminicard .right .desc u {
    font-weight: 650
}

.LACAlumini .lacAluminiCards .aluminicard-2 {
    flex-direction: row-reverse
}

.LACAlumini .view {
    cursor: pointer;
    color: var(--color-red);
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

@media (max-width: 1536px) {
    .LACAlumini {
        gap: 36px
    }

    .LACAlumini .heading {
        font-size: 50px
    }

    .LACAlumini .lacAluminiCards {
        padding: 0 10%
    }

    .LACAlumini .lacAluminiCards .aluminicard {
        height: 530px;
        gap: 26px
    }

    .LACAlumini .lacAluminiCards .aluminicard .right {
        padding: 26px;
        gap: 18px
    }

    .LACAlumini .lacAluminiCards .aluminicard .right .cname {
        font-size: 42px;
        padding-bottom: 18px
    }

    .LACAlumini .lacAluminiCards .aluminicard .right .ctitle {
        font-size: 28px
    }

    .LACAlumini .lacAluminiCards .aluminicard .right .projects,
    .LACAlumini .lacAluminiCards .aluminicard .right .desc,
    .LACAlumini .view {
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .LACAlumini {
        gap: 32px
    }

    .LACAlumini .heading {
        font-size: 46px
    }

    .LACAlumini .lacAluminiCards {
        padding: 0 8%
    }

    .LACAlumini .lacAluminiCards .aluminicard {
        height: 480px;
        gap: 24px
    }

    .LACAlumini .lacAluminiCards .aluminicard .right {
        padding: 24px;
        gap: 16px
    }

    .LACAlumini .lacAluminiCards .aluminicard .right .cname {
        font-size: 38px;
        padding-bottom: 16px
    }

    .LACAlumini .lacAluminiCards .aluminicard .right .ctitle {
        font-size: 26px
    }

    .LACAlumini .lacAluminiCards .aluminicard .right .projects,
    .LACAlumini .lacAluminiCards .aluminicard .right .desc,
    .LACAlumini .view {
        font-size: 20px
    }
}

@media (max-width: 1280px) {
    .LACAlumini {
        gap: 28px
    }

    .LACAlumini .heading {
        font-size: 42px
    }

    .LACAlumini .lacAluminiCards {
        padding: 0 6%
    }

    .LACAlumini .lacAluminiCards .aluminicard {
        height: 440px;
        gap: 20px
    }

    .LACAlumini .lacAluminiCards .aluminicard .right {
        padding: 22px;
        gap: 14px
    }

    .LACAlumini .lacAluminiCards .aluminicard .right .cname {
        font-size: 34px;
        padding-bottom: 14px
    }

    .LACAlumini .lacAluminiCards .aluminicard .right .ctitle {
        font-size: 24px
    }

    .LACAlumini .lacAluminiCards .aluminicard .right .projects,
    .LACAlumini .lacAluminiCards .aluminicard .right .desc,
    .LACAlumini .view {
        font-size: 18px
    }
}

@media (max-width: 480px) {
    .LACAlumini {
        padding: 40px 16px;
        gap: 30px
    }

    .LACAlumini .heading {
        font-size: 32px;
        text-align: center
    }

    .LACAlumini .lacAluminiCards {
        padding: 0;
        row-gap: 30px
    }

    .LACAlumini .lacAluminiCards .aluminicard {
        flex-direction: column;
        height: auto;
        gap: 20px
    }

    .LACAlumini .lacAluminiCards .aluminicard .left {
        width: 100%
    }

    .LACAlumini .lacAluminiCards .aluminicard .left img {
        width: 100%;
        height: 250px;
        object-fit: cover
    }

    .LACAlumini .lacAluminiCards .aluminicard .right {
        width: 100%;
        padding: 20px;
        gap: 16px
    }

    .LACAlumini .lacAluminiCards .aluminicard .right .cname {
        font-size: 24px;
        padding-bottom: 12px
    }

    .LACAlumini .lacAluminiCards .aluminicard .right .ctitle {
        font-size: 20px
    }

    .LACAlumini .lacAluminiCards .aluminicard .right .projects,
    .LACAlumini .lacAluminiCards .aluminicard .right .desc {
        font-size: 16px
    }

    .LACAlumini .lacAluminiCards .aluminicard-2 {
        flex-direction: column
    }

    .LACAlumini .view {
        font-size: 18px
    }
}

.LACAwards {
    display: flex;
    flex-direction: column;
    gap: 60px;
    column-gap: 20px;
    align-items: center;
    justify-content: center;
    padding: 40px 120px
}

.LACAwards .Heading {
    color: var(--color-red);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.LACAwards .LACcards {
    display: flex;
    gap: 40px
}

.LACAwards .awardCard {
    width: 26.54vw;
    height: 67.24vh;
    border-radius: 10px;
    background: #fbc51d66;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 10px 10px;
    transition: background .3s ease
}

.LACAwards .awardCard:hover {
    background: #fbc51d
}

.LACAwards .awardCard img {
    width: 26.54vw;
    height: 53.15vh;
    border-radius: 10px 10px 0 0;
    align-self: center
}

.LACAwards .awardCard p {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85vh;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-align: center;
    padding: 30px;
    width: 100%
}

.LACAwards .awardCard .knowMoreBtn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    border: none;
    border-radius: 10px;
    background: var(--color-red);
    color: var(--color-white);
    font-size: 1.67vh;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    padding: 12px 20px;
    cursor: pointer;
    margin-top: auto;
    margin-left: 10px
}

.LACAwards .awardCard .knowMoreBtn img {
    width: 16px;
    height: 16px
}

.LACAwards .pagination {
    display: none;
    align-items: center;
    justify-content: center;
    padding-top: 2%;
    gap: 20px
}

.LACAwards .pagination img {
    width: 45px;
    height: 30px;
    cursor: pointer;
    transition: .3s
}

.LACAwards .pagination img.disabled {
    opacity: .5;
    cursor: not-allowed
}

.LACAwards .pagination img:hover:not(.disabled) {
    transform: scale(1.1)
}

.LACAwards .pagination .pages {
    display: flex;
    gap: 20px
}

.LACAwards .pagination .pages span {
    font-size: 24px;
    height: 60px;
    width: 60px;
    padding: 15px 22px;
    border: 1px solid black;
    border-radius: 50%;
    cursor: pointer;
    transition: .3s
}

.LACAwards .pagination .pages span:hover {
    background: #ddd
}

.LACAwards .pagination .pages span.active {
    margin-top: 0 !important;
    border: 1px solid #dc143c;
    font-weight: 700
}

.LACAwards .wbutton {
    cursor: pointer;
    width: 25%;
    align-items: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    border-radius: 10px;
    background: var(--red, #fbc51d);
    padding: 20px;
    display: flex;
    justify-content: space-between
}

@media (max-width: 1536px) {
    .LACAwards {
        gap: 50px;
        padding: 30px 100px
    }

    .LACAwards .Heading {
        font-size: 50px
    }

    .LACAwards .LACcards {
        gap: 32px
    }

    .LACAwards .awardCard {
        width: 25vw;
        height: 60vh
    }

    .LACAwards .awardCard img {
        width: 25vw;
        height: 47vh
    }

    .LACAwards .awardCard p {
        font-size: 1.6vh;
        padding: 24px
    }

    .LACAwards .awardCard .knowMoreBtn {
        font-size: 1.5vh;
        padding: 10px 18px
    }

    .LACAwards .awardCard .knowMoreBtn img {
        width: 14px;
        height: 14px
    }

    .LACAwards .pagination {
        gap: 16px
    }

    .LACAwards .pagination img {
        width: 40px;
        height: 26px
    }

    .LACAwards .pagination .pages span {
        font-size: 20px;
        height: 52px;
        width: 52px;
        padding: 12px 18px
    }

    .LACAwards .wbutton {
        width: 28%;
        font-size: 16px;
        padding: 18px
    }
}

@media (max-width: 1440px) {
    .LACAwards {
        gap: 44px;
        padding: 25px 80px
    }

    .LACAwards .Heading {
        font-size: 46px
    }

    .LACAwards .LACcards {
        gap: 30px
    }

    .LACAwards .awardCard {
        width: 23vw;
        height: 55vh
    }

    .LACAwards .awardCard img {
        width: 23vw;
        height: 42vh
    }

    .LACAwards .awardCard p {
        font-size: 1.4vh;
        padding: 20px
    }

    .LACAwards .awardCard .knowMoreBtn {
        font-size: 1.4vh;
        padding: 9px 16px
    }

    .LACAwards .awardCard .knowMoreBtn img {
        width: 13px;
        height: 13px
    }

    .LACAwards .pagination {
        gap: 14px
    }

    .LACAwards .pagination img {
        width: 36px;
        height: 24px
    }

    .LACAwards .pagination .pages span {
        font-size: 18px;
        height: 48px;
        width: 48px;
        padding: 10px 16px
    }

    .LACAwards .wbutton {
        width: 30%;
        font-size: 15px;
        padding: 16px
    }
}

@media (max-width: 1280px) {
    .LACAwards {
        gap: 36px;
        padding: 20px 60px
    }

    .LACAwards .Heading {
        font-size: 42px
    }

    .LACAwards .LACcards {
        gap: 24px
    }

    .LACAwards .awardCard {
        width: 21vw;
        height: 50vh
    }

    .LACAwards .awardCard img {
        width: 21vw;
        height: 38vh
    }

    .LACAwards .awardCard p {
        font-size: 1.2vh;
        padding: 16px
    }

    .LACAwards .awardCard .knowMoreBtn {
        font-size: 1.2vh;
        padding: 8px 14px
    }

    .LACAwards .awardCard .knowMoreBtn img {
        width: 12px;
        height: 12px
    }

    .LACAwards .pagination {
        gap: 12px
    }

    .LACAwards .pagination img {
        width: 32px;
        height: 22px
    }

    .LACAwards .pagination .pages span {
        font-size: 16px;
        height: 44px;
        width: 44px;
        padding: 8px 14px
    }

    .LACAwards .wbutton {
        width: 32%;
        font-size: 14px;
        padding: 14px
    }
}

@media (max-width: 480px) {
    .LACAwards {
        padding: 32px 16px;
        gap: 30px
    }

    .LACAwards .Heading {
        font-size: 32px;
        text-align: center
    }

    .LACAwards .LACcards {
        flex-direction: column;
        gap: 24px;
        width: 100%
    }

    .LACAwards .awardCard {
        width: 100%;
        height: auto;
        padding: 0 0 12px;
        border-radius: 10px
    }

    .LACAwards .awardCard img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 10px 10px 0 0
    }

    .LACAwards .awardCard p {
        font-size: 14px;
        padding: 16px
    }

    .LACAwards .awardCard .knowMoreBtn {
        font-size: 14px;
        padding: 10px 16px;
        gap: 8px;
        margin-left: 10px
    }

    .LACAwards .awardCard .knowMoreBtn img {
        width: 14px;
        height: 14px
    }

    .LACAwards .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        padding-top: 20px;
        flex-wrap: wrap
    }

    .LACAwards .pagination img {
        width: 30px;
        height: 20px
    }

    .LACAwards .pagination .pages {
        gap: 10px
    }

    .LACAwards .pagination .pages span {
        font-size: 16px;
        width: 40px;
        height: 40px;
        padding: 10px
    }

    .LACAwards .wbutton {
        width: 100%;
        font-size: 16px;
        padding: 14px 16px;
        justify-content: center;
        text-align: center
    }
}

.LACRecruiters {
    padding: 20px 0;
    text-align: left;
    background-color: var(--color-white);
    display: flex;
    flex-direction: column;
    gap: 40px
}

.LACRecruiters .recruiter-container .recruiter-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 120rem;
    gap: 20px;
    padding: 20px
}

.LACRecruiters .recruiter-container .recruiter-header h2 {
    color: var(--color-red);
    font-size: 3rem;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 10px;
    text-shadow: 0 .3rem .3rem rgba(0, 0, 0, .3)
}

.LACRecruiters .recruiter-container .recruiter-header p {
    font-size: 1.5rem;
    font-weight: 650;
    color: #2c2c2c;
    margin-bottom: 27px;
    width: 82rem;
    text-align: center;
    line-height: 1.75rem
}

.LACRecruiters .recruiter-container .scrolling-container {
    position: relative;
    overflow: hidden;
    padding: 4rem 0;
    border-top: .1875rem solid rgba(44, 44, 44, .5);
    border-bottom: .1875rem solid rgba(44, 44, 44, .5)
}

.LACRecruiters .recruiter-container .scrolling-container .scrolling-wrapper {
    display: flex;
    gap: 2rem;
    animation: scroll-animation 15s linear infinite
}

.LACRecruiters .recruiter-container .scrolling-container .scroll-box {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    height: 6rem;
    padding: 2rem 1.5rem;
    border-radius: 5px;
    border: 1px solid rgba(231, 181, 26, .8);
    color: #2c2c2c;
    font-size: 18px;
    font-weight: 700;
    line-height: 2rem
}

.LACRecruiters .recruiter-container .scrolling-container .scrolling-wrapper-2 {
    display: flex;
    gap: 2rem;
    animation: scroll-animation 15s linear reverse infinite;
    margin-top: 3rem
}

.LACRecruiters .recruiter-container .scrolling-container .scroll-box-2 {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 6rem;
    padding: 2rem 1.5rem;
    border-radius: 5px;
    border: 1px solid rgba(231, 181, 26, .8);
    color: #2c2c2c;
    font-size: 18px;
    font-weight: 700;
    line-height: 2rem;
    white-space: nowrap
}

@media (max-width: 1536px) {
    .LACRecruiters {
        padding: 40px 0 !important
    }

    .LACRecruiters .recruiter-container .recruiter-header {
        max-width: 110rem !important;
        padding: 0 6rem !important
    }

    .LACRecruiters .recruiter-container .recruiter-header h2 {
        font-size: 2.8rem !important;
        margin-bottom: 8px !important
    }

    .LACRecruiters .recruiter-container .recruiter-header p {
        font-size: 1.4rem !important;
        width: 60rem !important;
        line-height: 1.6rem !important
    }

    .LACRecruiters .recruiter-container .scrolling-container {
        padding: 3rem 0 !important;
        border-top: .15rem solid rgba(44, 44, 44, .5) !important;
        border-bottom: .15rem solid rgba(44, 44, 44, .5) !important
    }

    .LACRecruiters .recruiter-container .scrolling-container .scrolling-wrapper,
    .LACRecruiters .recruiter-container .scrolling-container .scrolling-wrapper-2 {
        gap: 1.8rem !important;
        animation-duration: 14s !important
    }

    .LACRecruiters .recruiter-container .scrolling-container .scroll-box,
    .LACRecruiters .recruiter-container .scrolling-container .scroll-box-2 {
        height: 5.5rem !important;
        padding: 1.8rem 1.3rem !important;
        font-size: 1.6rem !important;
        line-height: 1.8rem !important
    }

    .LACRecruiters .recruiter-container .scrolling-container .scrolling-wrapper-2 {
        margin-top: 2.5rem !important
    }
}

@media (max-width: 1440px) {
    .LACRecruiters {
        padding: 36px 0 !important
    }

    .LACRecruiters .recruiter-container .recruiter-header {
        max-width: 100rem !important;
        padding: 0 5rem !important
    }

    .LACRecruiters .recruiter-container .recruiter-header h2 {
        font-size: 2.6rem !important;
        margin-bottom: 7px !important
    }

    .LACRecruiters .recruiter-container .recruiter-header p {
        font-size: 1.3rem !important;
        width: 55rem !important;
        line-height: 1.5rem !important
    }

    .LACRecruiters .recruiter-container .scrolling-container {
        padding: 2.8rem 0 !important;
        border-top: .14rem solid rgba(44, 44, 44, .5) !important;
        border-bottom: .14rem solid rgba(44, 44, 44, .5) !important
    }

    .LACRecruiters .recruiter-container .scrolling-container .scrolling-wrapper,
    .LACRecruiters .recruiter-container .scrolling-container .scrolling-wrapper-2 {
        gap: 1.6rem !important;
        animation-duration: 13s !important
    }

    .LACRecruiters .recruiter-container .scrolling-container .scroll-box,
    .LACRecruiters .recruiter-container .scrolling-container .scroll-box-2 {
        height: 5.2rem !important;
        padding: 1.6rem 1.2rem !important;
        font-size: 1.5rem !important;
        line-height: 1.7rem !important
    }

    .LACRecruiters .recruiter-container .scrolling-container .scrolling-wrapper-2 {
        margin-top: 2.2rem !important
    }
}

@media (max-width: 1280px) {
    .LACRecruiters {
        padding: 32px 0 !important
    }

    .LACRecruiters .recruiter-container .recruiter-header {
        max-width: 90rem !important;
        padding: 0 4rem !important
    }

    .LACRecruiters .recruiter-container .recruiter-header h2 {
        font-size: 2.4rem !important;
        margin-bottom: 6px !important
    }

    .LACRecruiters .recruiter-container .recruiter-header p {
        font-size: 1.2rem !important;
        width: 48rem !important;
        line-height: 1.4rem !important
    }

    .LACRecruiters .recruiter-container .scrolling-container {
        padding: 2.5rem 0 !important;
        border-top: .13rem solid rgba(44, 44, 44, .5) !important;
        border-bottom: .13rem solid rgba(44, 44, 44, .5) !important
    }

    .LACRecruiters .recruiter-container .scrolling-container .scrolling-wrapper,
    .LACRecruiters .recruiter-container .scrolling-container .scrolling-wrapper-2 {
        gap: 1.4rem !important;
        animation-duration: 12s !important
    }

    .LACRecruiters .recruiter-container .scrolling-container .scroll-box,
    .LACRecruiters .recruiter-container .scrolling-container .scroll-box-2 {
        height: 4.8rem !important;
        padding: 1.5rem 1.1rem !important;
        font-size: 1.4rem !important;
        line-height: 1.6rem !important
    }

    .LACRecruiters .recruiter-container .scrolling-container .scrolling-wrapper-2 {
        margin-top: 2rem !important
    }
}

@media (max-width: 480px) {
    .LACRecruiters {
        width: 100% !important;
        padding: 2% 0 5% !important
    }

    .LACRecruiters .recruiter-container {
        width: 100% !important
    }

    .LACRecruiters .recruiter-container .recruiter-header {
        padding: 16px !important
    }

    .LACRecruiters .recruiter-container .recruiter-header h2 {
        font-size: 1.5rem !important
    }

    .LACRecruiters .recruiter-container .recruiter-header p {
        font-size: 14px !important;
        font-style: normal !important;
        font-weight: 500 !important;
        width: 100% !important;
        margin: 0 !important
    }

    .LACRecruiters .recruiter-container .scrolling-container {
        width: 95% !important;
        margin: auto !important;
        padding: 0 !important;
        border: none !important
    }

    .LACRecruiters .recruiter-container .scrolling-container .scrolling-wrapper,
    .LACRecruiters .recruiter-container .scrolling-container .scrolling-wrapper-2 {
        gap: .375rem !important;
        padding: 12px 0 0 !important;
        margin: 0 !important
    }

    .LACRecruiters .recruiter-container .scrolling-container .scrolling-wrapper .scroll-box,
    .LACRecruiters .recruiter-container .scrolling-container .scrolling-wrapper .scroll-box-2,
    .LACRecruiters .recruiter-container .scrolling-container .scrolling-wrapper-2 .scroll-box,
    .LACRecruiters .recruiter-container .scrolling-container .scrolling-wrapper-2 .scroll-box-2 {
        width: auto !important;
        height: 40px !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: .75rem !important
    }
}

.LACCTA {
    width: 100%;
    padding: 3.4% 9.79%;
    height: 502px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: normal;
    text-align: center;
    background: linear-gradient(0deg, #0006, #0006), url(/assets/laccta-GhZ67iUY.jpeg) #d3d3d3 0px -589.983px/100% 252.583% no-repeat
}

.LACCTA h2 {
    width: 80%;
    font-family: 'Sora-SemiBold';
    font-size: 2.08vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--color-white);
    margin-bottom: 2%
}

.LACCTA .explore-btn {
    padding: 1% 3%;
    font-size: 18px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    color: var(--color-white);
    background: transparent;
    border: 2px solid #f3f3f3;
    border-radius: 10px;
    cursor: pointer;
    transition: .3s ease
}

.LACCTA .explore-btn:hover {
    background: var(--color-white);
    color: #dc143c
}

@media (max-width: 1536px) {
    .LACCTA {
        height: 450px
    }

    .LACCTA h2 {
        font-size: 2vw;
        width: 75%
    }

    .LACCTA .explore-btn {
        padding: 1% 3%;
        font-size: 17px
    }
}

@media (max-width: 1440px) {
    .LACCTA {
        height: 400px
    }

    .LACCTA h2 {
        font-size: 1.85vw;
        width: 72%
    }

    .LACCTA .explore-btn {
        font-size: 16px;
        padding: .9% 2.8%
    }
}

@media (max-width: 1280px) {
    .LACCTA {
        height: 360px
    }

    .LACCTA h2 {
        font-size: 1.7vw;
        width: 70%
    }

    .LACCTA .explore-btn {
        font-size: 15px;
        padding: .8% 2.5%
    }
}

@media (max-width: 480px) {
    .LACCTA {
        padding: 10% 7%;
        height: 243px;
        background-size: cover;
        background-position: center
    }

    .LACCTA h2 {
        width: 90%;
        font-size: 5vw;
        margin-bottom: 3%
    }

    .LACCTA .explore-btn {
        padding: 2% 5%;
        font-size: 16px;
        border-width: 1.5px;
        border-radius: 1vw;
        margin-top: 8%
    }
}

.lacHeader {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #000;
    padding: 28px 5.2%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.lacHeader .logo {
    width: 113px;
    height: 50px
}

.lacHeader .logo img {
    width: 100%;
    height: 100%
}

.lacHeader .headerTitles {
    display: flex;
    align-items: center;
    gap: 40px
}

.lacHeader .headerTitles .links {
    color: var(--color-white);
    cursor: pointer;
    font-size: 20px;
    font-weight: 500
}

.lacHeader .headerTitles .links:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: .125rem;
    background-color: #fbc51d;
    transition: width .3s ease
}

.lacHeader .headerTitles .links:hover {
    color: #fbc51d
}

.lacHeader .hamburger {
    display: none;
    cursor: pointer
}

@media (max-width: 1536px) {
    .lacHeader {
        padding: 26px 5%
    }

    .lacHeader .logo {
        width: 105px;
        height: 46px
    }

    .lacHeader .headerTitles {
        gap: 36px
    }

    .lacHeader .headerTitles .links {
        font-size: 19px
    }
}

@media (max-width: 1440px) {
    .lacHeader {
        padding: 24px 4.5%
    }

    .lacHeader .logo {
        width: 100px;
        height: 44px
    }

    .lacHeader .headerTitles {
        gap: 32px
    }

    .lacHeader .headerTitles .links {
        font-size: 18px
    }
}

@media (max-width: 1280px) {
    .lacHeader {
        padding: 20px 4%
    }

    .lacHeader .logo {
        width: 90px;
        height: 40px
    }

    .lacHeader .headerTitles {
        gap: 28px
    }

    .lacHeader .headerTitles .links {
        font-size: 16px
    }
}

@media (max-width: 480px) {
    .lacHeader {
        flex-wrap: wrap;
        padding: 16px 20px;
        gap: 10px;
        position: relative
    }

    .lacHeader .hamburger {
        display: block;
        cursor: pointer;
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 1100
    }

    .lacHeader .headerTitles {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        background: #000;
        padding: 10px 0;
        margin-top: 60px
    }

    .lacHeader .headerTitles .links {
        width: 100%;
        padding: 10px 20px;
        font-size: 16px;
        border-top: 1px solid #222
    }

    .lacHeader .headerTitles .links:last-child {
        border-bottom: 1px solid #222
    }

    .lacHeader .headerTitles.show {
        display: flex
    }
}

.SubCourseHero {
    height: 519px;
    width: 100%;
    background: linear-gradient(0deg, #000000b3, #000000b3), url(/assets/hero-BvGWY0et.jpeg) #d3d3d3 50%/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    text-align: center;
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

@media (max-width: 480px) {
    .SubCourseHero {
        width: 100%;
        height: 257px;
        top: -5px;
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: uppercase
    }
}

.SubCourseSubHero {
    margin-top: 120px;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 40px 120px;
    position: relative
}

.SubCourseSubHero .block {
    position: absolute;
    background: var(--red, #dc143c);
    width: 300px;
    height: 386px;
    left: 81px;
    bottom: 2px;
    z-index: 1
}

.SubCourseSubHero .left {
    position: relative;
    width: 55.4%;
    background-color: #fbc51d;
    padding: 64px 23px;
    height: 418px;
    z-index: 1
}

.SubCourseSubHero .left p {
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.SubCourseSubHero .right {
    position: absolute;
    right: 5%;
    width: 48%;
    height: 596px
}

.SubCourseSubHero .right img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media (max-width: 1536px) {
    .SubCourseSubHero {
        padding: 40px 100px
    }

    .SubCourseSubHero .block {
        width: 260px;
        height: 340px;
        left: 65px
    }

    .SubCourseSubHero .left {
        padding: 56px 20px
    }

    .SubCourseSubHero .left p {
        font-size: 22px
    }

    .SubCourseSubHero .right {
        height: 520px
    }
}

@media (max-width: 1440px) {
    .SubCourseSubHero {
        padding: 40px 80px
    }

    .SubCourseSubHero .block {
        width: 240px;
        height: 310px;
        left: 60px
    }

    .SubCourseSubHero .left {
        padding: 48px 18px
    }

    .SubCourseSubHero .left p {
        font-size: 20px
    }

    .SubCourseSubHero .right {
        height: 480px
    }
}

@media (max-width: 1280px) {
    .SubCourseSubHero {
        padding: 30px 60px
    }

    .SubCourseSubHero .block {
        width: 200px;
        height: 280px;
        left: 45px
    }

    .SubCourseSubHero .left {
        padding: 40px 16px
    }

    .SubCourseSubHero .left p {
        font-size: 18px
    }

    .SubCourseSubHero .right {
        height: 440px
    }
}

@media (max-width: 480px) {
    .SubCourseSubHero {
        margin-top: 58px;
        flex-direction: column;
        padding: 0;
        justify-content: center;
        align-items: center
    }

    .SubCourseSubHero .left {
        width: 80%;
        padding: 40px 17px;
        height: max-content
    }

    .SubCourseSubHero .left p {
        font-size: 16px
    }

    .SubCourseSubHero .right {
        right: 0;
        top: -35px;
        z-index: 0;
        height: 321px;
        width: 90%;
        position: relative
    }

    .SubCourseSubHero .block {
        width: 45%;
        height: 192px;
        z-index: 0;
        top: -18px;
        left: 20px
    }
}

.SubCourseHighlights {
    display: flex;
    margin-top: 80px;
    padding: 3.48% 6.2%;
    width: 100%;
    height: 833px
}

.SubCourseHighlights .left {
    width: 50%;
    height: 833px
}

.SubCourseHighlights .left img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.SubCourseHighlights .right {
    gap: auto;
    display: flex;
    height: 833px;
    flex-direction: column;
    gap: 20px;
    width: 50%;
    background: var(--dark-red, linear-gradient(102deg, #b30225 1.21%, rgba(220, 20, 60, .8) 100%))
}

.SubCourseHighlights .right .top {
    padding: 30px 40px 0;
    color: var(--yellow, #fbc51d);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.SubCourseHighlights .right .list {
    color: var(--color-white);
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    padding: 0 0 0 80px
}

.SubCourseHighlights .right .list ul {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.SubCourseHighlights .right .button {
    cursor: pointer;
    display: flex;
    width: 181px;
    height: 50px;
    justify-content: center;
    align-items: center;
    margin-left: 60px;
    border-radius: 10px;
    background: var(--yellow, #fbc51d);
    font-size: 18px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

@media (max-width: 1536px) {

    .SubCourseHighlights,
    .SubCourseHighlights .left {
        height: 750px
    }

    .SubCourseHighlights .right {
        height: 750px;
        gap: 16px
    }

    .SubCourseHighlights .right .top {
        font-size: 48px;
        padding: 25px 35px 0
    }

    .SubCourseHighlights .right .list {
        font-size: 20px;
        padding-left: 70px
    }

    .SubCourseHighlights .right .list ul {
        gap: 16px
    }

    .SubCourseHighlights .right .button {
        width: 170px;
        height: 45px;
        font-size: 17px;
        margin-left: 55px
    }
}

@media (max-width: 1440px) {

    .SubCourseHighlights,
    .SubCourseHighlights .left {
        height: 700px
    }

    .SubCourseHighlights .right {
        height: 700px;
        gap: 14px
    }

    .SubCourseHighlights .right .top {
        font-size: 42px;
        padding: 22px 30px 0
    }

    .SubCourseHighlights .right .list {
        font-size: 18px;
        padding-left: 60px
    }

    .SubCourseHighlights .right .list ul {
        gap: 14px
    }

    .SubCourseHighlights .right .button {
        width: 160px;
        height: 42px;
        font-size: 16px;
        margin-left: 50px
    }
}

@media (max-width: 1280px) {
    .SubCourseHighlights {
        height: 750px
    }

    .SubCourseHighlights .left {
        height: 650px
    }

    .SubCourseHighlights .right {
        height: 650px;
        gap: 12px
    }

    .SubCourseHighlights .right .top {
        font-size: 36px;
        padding: 20px 24px 0
    }

    .SubCourseHighlights .right .list {
        font-size: 16px;
        padding-left: 50px
    }

    .SubCourseHighlights .right .list ul {
        gap: 12px
    }

    .SubCourseHighlights .right .button {
        width: 150px;
        height: 40px;
        font-size: 15px;
        margin-left: 45px
    }
}

@media (max-width: 480px) {
    .SubCourseHighlights {
        flex-direction: column-reverse;
        margin-top: 20px;
        padding: 0 6.28%;
        height: max-content
    }

    .SubCourseHighlights .right {
        gap: 0;
        width: 100%;
        height: max-content;
        padding: 15px
    }

    .SubCourseHighlights .right .top {
        font-size: 24px;
        padding: 0
    }

    .SubCourseHighlights .right .list {
        padding: 15px;
        font-size: 16px
    }

    .SubCourseHighlights .right .list ul {
        gap: 10px
    }

    .SubCourseHighlights .right .button {
        font-size: 16px;
        height: 38px;
        padding: 4px 16px
    }

    .SubCourseHighlights .left {
        height: 321px;
        width: 100%
    }
}

.SubCourseWhat {
    margin-top: 80px;
    padding: 3.48% 6.2%;
    width: 100%;
    height: 949px;
    display: flex;
    gap: 1%
}

.SubCourseWhat .left {
    width: 52%
}

.SubCourseWhat .left .top {
    color: var(--color-red);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.SubCourseWhat .left .termTabs {
    width: max-content
}

.SubCourseWhat .left .termTabs button {
    padding: 10px 36.1px;
    border-radius: 10px 10px 0 0;
    border-bottom: none;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.SubCourseWhat .left .termContent {
    height: 100%;
    background: var(--darkblue, linear-gradient(249deg, #1c325b 1.17%, #3b6ac1 59.08%));
    padding: 40px
}

.SubCourseWhat .left .termContent h2 {
    padding: 20px;
    color: var(--color-white);
    font-size: 42px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.SubCourseWhat .left .termContent ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-left: 40px
}

.SubCourseWhat .left .termContent ul li {
    letter-spacing: 1px;
    color: var(--color-white);
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.SubCourseWhat .left .termContent-1 {
    background: linear-gradient(249deg, #1c325b 1.17%, #3b6ac1 59.08%)
}

.SubCourseWhat .left .termContent-2 {
    background: linear-gradient(103deg, #d33519 2.06%, #ff634780)
}

.SubCourseWhat .left .termContent-3 {
    background: linear-gradient(104deg, #378509 4.41%, #72bf4480)
}

.SubCourseWhat .left .termContent-4 {
    background: linear-gradient(102deg, #b30225 1.21%, #dc143c80)
}

.SubCourseWhat .left .termTab-1.active {
    background: #3b6ac1;
    color: var(--color-white)
}

.SubCourseWhat .left .termTab-2.active {
    background: #d64026e6;
    color: var(--color-white)
}

.SubCourseWhat .left .termTab-3.active {
    background: #3a9506cf;
    color: var(--color-white)
}

.SubCourseWhat .left .termTab-4.active {
    background: #d50a33c1;
    color: var(--color-white)
}

.SubCourseWhat .right {
    width: 47%;
    height: 943px
}

.SubCourseWhat .right img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media (max-width: 1536px) {
    .SubCourseWhat {
        height: 880px
    }

    .SubCourseWhat .left .top {
        font-size: 48px
    }

    .SubCourseWhat .left .termTabs button {
        padding: 9px 25.5px;
        font-size: 22px
    }

    .SubCourseWhat .left .termContent {
        padding: 35px
    }

    .SubCourseWhat .left .termContent h2 {
        font-size: 36px
    }

    .SubCourseWhat .left .termContent ul {
        gap: 18px;
        margin-left: 35px
    }

    .SubCourseWhat .left .termContent ul li {
        font-size: 22px
    }

    .SubCourseWhat .right {
        height: 880px
    }
}

@media (max-width: 1440px) {
    .SubCourseWhat {
        height: 830px
    }

    .SubCourseWhat .left .top {
        font-size: 42px
    }

    .SubCourseWhat .left .termTabs button {
        padding: .8vw 1.6vw;
        font-size: 20px
    }

    .SubCourseWhat .left .termContent {
        padding: 30px
    }

    .SubCourseWhat .left .termContent h2 {
        font-size: 32px
    }

    .SubCourseWhat .left .termContent ul {
        gap: 16px;
        margin-left: 30px
    }

    .SubCourseWhat .left .termContent ul li {
        font-size: 20px
    }

    .SubCourseWhat .right {
        height: 830px
    }
}

@media (max-width: 1280px) {
    .SubCourseWhat {
        height: 780px
    }

    .SubCourseWhat .left .top {
        font-size: 36px
    }

    .SubCourseWhat .left .termTabs button {
        padding: .5vw 1.68vw;
        font-size: 18px
    }

    .SubCourseWhat .left .termContent {
        padding: 25px
    }

    .SubCourseWhat .left .termContent h2 {
        font-size: 28px
    }

    .SubCourseWhat .left .termContent ul {
        gap: 14px;
        margin-left: 25px
    }

    .SubCourseWhat .left .termContent ul li {
        font-size: 18px
    }

    .SubCourseWhat .right {
        height: 780px
    }
}

@media (max-width: 480px) {
    .SubCourseWhat {
        margin-top: 30px;
        flex-direction: column;
        height: max-content;
        gap: 15px
    }

    .SubCourseWhat .left {
        width: 100%;
        height: max-content
    }

    .SubCourseWhat .left .top {
        padding-bottom: 10px;
        font-size: 24px
    }

    .SubCourseWhat .left .termTabs .termTab {
        padding: 5px 6px;
        font-size: 14px;
        width: 65px;
        height: 40px
    }

    .SubCourseWhat .left .termContent {
        padding: 15px
    }

    .SubCourseWhat .left .termContent h2 {
        padding: 0;
        font-size: 18px
    }

    .SubCourseWhat .left .termContent ul {
        padding: 10px;
        gap: 10px;
        margin-left: 20px
    }

    .SubCourseWhat .left .termContent ul li {
        font-size: 16px
    }

    .SubCourseWhat .right {
        width: 100%;
        height: 321px
    }
}

.SubCourseTools {
    display: flex;
    margin-top: 80px;
    padding: 3.48% 6.2%;
    width: 100%;
    height: 1057px
}

.SubCourseTools .left {
    height: 1057px;
    width: 42%
}

.SubCourseTools .left img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.SubCourseTools .right {
    gap: 30px;
    height: 1057px;
    background: #fbc51d1a;
    width: 57%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center
}

.SubCourseTools .right .top {
    color: var(--color-red);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.SubCourseTools .right .bottom {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    row-gap: 20px;
    gap: 20px
}

.SubCourseTools .right .bottom .tool {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 30%;
    gap: 10px
}

.SubCourseTools .right .bottom .tool img {
    width: 78px;
    height: 65px;
    object-fit: contain
}

.SubCourseTools .right .bottom .tool p {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 1536px) {

    .SubCourseTools,
    .SubCourseTools .left {
        height: 980px
    }

    .SubCourseTools .right {
        height: 980px;
        gap: 25px
    }

    .SubCourseTools .right .top {
        font-size: 48px
    }

    .SubCourseTools .right .bottom {
        row-gap: 18px;
        gap: 18px
    }

    .SubCourseTools .right .bottom .tool {
        gap: 8px
    }

    .SubCourseTools .right .bottom .tool img {
        width: 68px;
        height: 58px
    }

    .SubCourseTools .right .bottom .tool p {
        font-size: 22px
    }
}

@media (max-width: 1440px) {

    .SubCourseTools,
    .SubCourseTools .left {
        height: 920px
    }

    .SubCourseTools .right {
        height: 920px;
        gap: 22px
    }

    .SubCourseTools .right .top {
        font-size: 42px
    }

    .SubCourseTools .right .bottom {
        row-gap: 16px;
        gap: 16px
    }

    .SubCourseTools .right .bottom .tool {
        gap: 7px
    }

    .SubCourseTools .right .bottom .tool img {
        width: 60px;
        height: 50px
    }

    .SubCourseTools .right .bottom .tool p {
        font-size: 20px
    }
}

@media (max-width: 1280px) {

    .SubCourseTools,
    .SubCourseTools .left {
        height: 860px
    }

    .SubCourseTools .right {
        height: 860px;
        gap: 20px
    }

    .SubCourseTools .right .top {
        font-size: 36px
    }

    .SubCourseTools .right .bottom {
        row-gap: 14px;
        gap: 14px
    }

    .SubCourseTools .right .bottom .tool {
        gap: 6px
    }

    .SubCourseTools .right .bottom .tool img {
        width: 52px;
        height: 44px
    }

    .SubCourseTools .right .bottom .tool p {
        font-size: 18px
    }
}

@media (max-width: 480px) {
    .SubCourseTools {
        flex-direction: column-reverse;
        height: max-content;
        margin-top: 20px
    }

    .SubCourseTools .right {
        padding: 10px;
        width: 100%;
        gap: 5px;
        height: max-content
    }

    .SubCourseTools .right .top {
        font-size: 24px
    }

    .SubCourseTools .right .bottom {
        gap: 20px !important
    }

    .SubCourseTools .right .bottom .tool {
        width: 45%
    }

    .SubCourseTools .right .bottom .tool img {
        height: 36px;
        width: 36px
    }

    .SubCourseTools .right .bottom .tool p {
        text-align: center;
        font-size: 14px
    }

    .SubCourseTools .left {
        width: 100%;
        height: 321px
    }
}

.SubCourseCertification {
    margin: 160px auto 0;
    width: 88.5%;
    display: flex;
    padding: 61px 120px;
    gap: 40px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(102deg, #b30225 1.21%, #dc143ccc);
    box-shadow: 0 4px 10px #0003
}

.SubCourseCertification .top {
    color: var(--yellow, #fbc51d);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.SubCourseCertification .certificates {
    gap: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 60px
}

.SubCourseCertification .certificates .certificate {
    width: 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.SubCourseCertification .certificates .certificate img {
    width: 185.608px;
    height: 185.608px;
    object-fit: cover
}

.SubCourseCertification .certificates .certificate p {
    color: var(--color-white);
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

@media (max-width: 1536px) {
    .SubCourseCertification {
        padding: 50px 100px;
        gap: 30px
    }

    .SubCourseCertification .top {
        font-size: 48px
    }

    .SubCourseCertification .certificates {
        row-gap: 50px;
        gap: 16px
    }

    .SubCourseCertification .certificates .certificate img {
        width: 160px;
        height: 160px
    }

    .SubCourseCertification .certificates .certificate p {
        font-size: 28px
    }
}

@media (max-width: 1440px) {
    .SubCourseCertification {
        padding: 45px 80px;
        gap: 25px
    }

    .SubCourseCertification .top {
        font-size: 42px
    }

    .SubCourseCertification .certificates {
        row-gap: 40px;
        gap: 14px
    }

    .SubCourseCertification .certificates .certificate img {
        width: 140px;
        height: 140px
    }

    .SubCourseCertification .certificates .certificate p {
        font-size: 24px
    }
}

@media (max-width: 1280px) {
    .SubCourseCertification {
        padding: 40px 60px;
        gap: 20px
    }

    .SubCourseCertification .top {
        font-size: 36px
    }

    .SubCourseCertification .certificates {
        row-gap: 35px;
        gap: 12px
    }

    .SubCourseCertification .certificates .certificate img {
        width: 120px;
        height: 120px
    }

    .SubCourseCertification .certificates .certificate p {
        font-size: 20px
    }
}

@media (max-width: 480px) {
    .SubCourseCertification {
        margin-top: 40px;
        padding: 40px 35px;
        gap: 10px
    }

    .SubCourseCertification .top {
        font-size: 24px
    }

    .SubCourseCertification .certificates {
        gap: 20px
    }

    .SubCourseCertification .certificates .certificate {
        width: 100%
    }

    .SubCourseCertification .certificates .certificate img {
        width: 93px;
        height: 93px
    }

    .SubCourseCertification .certificates .certificate p {
        font-size: 16px
    }
}

.SubCoursesPerk {
    display: flex;
    padding: 3.48% 5.2%;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 120px auto 0;
    gap: 40px;
    background: var(--color-primary-light);
}

.SubCoursesPerk .perks {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap
}

.SubCoursesPerk .perks .perk {
    height: 500px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 31%
}

.SubCoursesPerk .perks .perk .top {
    color: var(--color-red);
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 1.12vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.SubCoursesPerk .perks .perk .mid {
    height: 259px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px 40px;
    background: var(--color-warning);
    box-shadow: 0 4px 10px #0003;
    padding: 40px
}

.SubCoursesPerk .perks .perk .mid img {
    object-fit: cover
}

.SubCoursesPerk .perks .perk .text {
    height: 180px;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.SubCoursesPerk .button {
    cursor: pointer;
    display: flex;
    width: max-content;
    height: 50px;
    padding: 12px 26px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    color: var(--color-white);
    font-size: 18px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    border-radius: 10px;
    background: var(--color-red)
}

@media (max-width: 1536px) {
    .SubCoursesPerk {
        margin-top: 100px;
        gap: 36px;
        padding: 3% 4.5%
    }

    .SubCoursesPerk .perks {
        gap: 36px
    }

    .SubCoursesPerk .perks .perk {
        height: 450px;
        gap: 36px
    }

    .SubCoursesPerk .perks .perk .top {
        font-size: 1vw
    }

    .SubCoursesPerk .perks .perk .mid {
        height: 230px;
        padding: 32px
    }

    .SubCoursesPerk .perks .perk .mid img {
        width: 160px;
        height: 160px
    }

    .SubCoursesPerk .perks .perk .text {
        height: 160px;
        font-size: 22px
    }

    .SubCoursesPerk .button {
        height: 45px;
        padding: 10px 22px;
        font-size: 16px
    }
}

@media (max-width: 1440px) {
    .SubCoursesPerk {
        margin-top: 90px;
        gap: 32px;
        padding: 2.8% 4%
    }

    .SubCoursesPerk .perks {
        gap: 32px
    }

    .SubCoursesPerk .perks .perk {
        height: 420px;
        gap: 32px
    }

    .SubCoursesPerk .perks .perk .top {
        font-size: .95vw
    }

    .SubCoursesPerk .perks .perk .mid {
        height: 210px;
        padding: 28px
    }

    .SubCoursesPerk .perks .perk .mid img {
        width: 150px;
        height: 150px
    }

    .SubCoursesPerk .perks .perk .text {
        height: 150px;
        font-size: 20px
    }

    .SubCoursesPerk .button {
        height: 42px;
        padding: 10px 20px;
        font-size: 15px
    }
}

@media (max-width: 1280px) {
    .SubCoursesPerk {
        margin-top: 80px;
        gap: 28px;
        padding: 2.5% 3.5%
    }

    .SubCoursesPerk .perks {
        gap: 28px
    }

    .SubCoursesPerk .perks .perk {
        height: 390px;
        gap: 28px
    }

    .SubCoursesPerk .perks .perk .top {
        font-size: .9vw
    }

    .SubCoursesPerk .perks .perk .mid {
        height: 190px;
        padding: 24px
    }

    .SubCoursesPerk .perks .perk .mid img {
        width: 140px;
        height: 140px
    }

    .SubCoursesPerk .perks .perk .text {
        height: 140px;
        font-size: 18px
    }

    .SubCoursesPerk .button {
        height: 40px;
        padding: 10px 18px;
        font-size: 14px
    }
}

@media (max-width: 575px) {
    .SubCoursesPerk {
        margin-top: 30px;
        gap: 40px
    }

    .SubCoursesPerk .perks {
        flex-direction: column;
        gap: 20px
    }

    .SubCoursesPerk .perks .perk {
        height: max-content;
        width: 100%;
        gap: 20px
    }

    .SubCoursesPerk .perks .perk .top h2 {
        font-size: 6.7vw
    }

    .SubCoursesPerk .perks .perk .mid {
        height: 223px
    }

    .SubCoursesPerk .perks .perk .mid img {
        width: 150px;
        height: 150px
    }

    .SubCoursesPerk .perks .perk .text {
        height: max-content
    }

    .SubCoursesPerk .perks .perk .text p {
        font-size: 16px
    }

    .SubCoursesPerk .button {
        width: 75%;
        height: 35px;
        padding: 12px 26px;
        font-size: 14px
    }
}

@media (max-width: 355px) {
    .SubCoursesPerk .button {
        width: 90%;
    }
}

.SubCourseSimilar {
    padding: 3.48% 5.2% 0;
    display: flex;
    flex-direction: column;
    gap: 60px
}

.SubCourseSimilar .heading {
    color: var(--color-red);
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.SubCourseSimilar .coursesContainer {
    gap: 59px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    row-gap: 40px
}

.SubCourseSimilar .coursesContainer .course {
    width: 31%;
    display: flex;
    flex-direction: column-reverse
}

.SubCourseSimilar .coursesContainer .course .top {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 26px;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 4px 14px #00000040 inset;
    height: 214px
}

.SubCourseSimilar .coursesContainer .course .top .title {
    color: var(--color-white);
    font-size: 36px;
    font-style: normal;
    font-weight: 650;
    height: 60%;
    line-height: normal
}

.SubCourseSimilar .coursesContainer .course .top .button {
    cursor: pointer;
    display: flex;
    padding: 12px 26px;
    align-items: center;
    justify-content: center;
    width: 40%;
    height: 50px;
    border-radius: 10px;
    background-color: var(--color-white)
}

.SubCourseSimilar .coursesContainer .course .top-1 {
    background: var(--blue, linear-gradient(104deg, #3027a0 .86%, rgba(106, 102, 157, .5) 95.86%));
    box-shadow: 0 4px 14px #00000040 inset
}

.SubCourseSimilar .coursesContainer .course .top-2 {
    background: var(--green, linear-gradient(104deg, #378509 4.41%, rgba(114, 191, 68, .5) 100%))
}

.SubCourseSimilar .coursesContainer .course .top-3 {
    background: var(--orange, linear-gradient(103deg, #d33519 2.06%, rgba(255, 99, 71, .5) 100%))
}

.SubCourseSimilar .coursesContainer .course .top-4 {
    background: var(--skyblue, linear-gradient(102deg, #075580 3.39%, #2a98d4 98.99%))
}

.SubCourseSimilar .coursesContainer .course .top-5 {
    background: var(--red, linear-gradient(102deg, #b30225 1.21%, rgba(220, 20, 60, .5) 100%))
}

.SubCourseSimilar .coursesContainer .course .top-6 {
    background: var(--darkblue, linear-gradient(249deg, #1c325b 1.17%, #3b6ac1 59.08%))
}

.SubCourseSimilar .coursesContainer .course .bottom {
    height: 501px
}

.SubCourseSimilar .coursesContainer .course .bottom .cimage {
    width: 100%;
    height: 100%
}

.SubCourseSimilar .coursesContainer .course .bottom .cimage img {
    border-radius: 20px 20px 0 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media (max-width: 1536px) {
    .SubCourseSimilar {
        padding: 3% 4.5% 0;
        gap: 50px
    }

    .SubCourseSimilar .heading {
        font-size: 50px
    }

    .SubCourseSimilar .coursesContainer {
        gap: 50px;
        row-gap: 36px
    }

    .SubCourseSimilar .coursesContainer .course {
        width: 31%
    }

    .SubCourseSimilar .coursesContainer .course .top {
        height: 190px;
        gap: 18px;
        padding: 18px 24px
    }

    .SubCourseSimilar .coursesContainer .course .top .title {
        font-size: 32px
    }

    .SubCourseSimilar .coursesContainer .course .top .button {
        height: 45px;
        padding: 10px 22px;
        font-size: 15px
    }

    .SubCourseSimilar .coursesContainer .course .bottom {
        height: 460px
    }
}

@media (max-width: 1440px) {
    .SubCourseSimilar {
        padding: 2.8% 4% 0;
        gap: 45px
    }

    .SubCourseSimilar .heading {
        font-size: 46px
    }

    .SubCourseSimilar .coursesContainer {
        gap: 45px;
        row-gap: 32px
    }

    .SubCourseSimilar .coursesContainer .course {
        width: 31%
    }

    .SubCourseSimilar .coursesContainer .course .top {
        height: 175px;
        gap: 16px;
        padding: 16px 22px
    }

    .SubCourseSimilar .coursesContainer .course .top .title {
        font-size: 30px
    }

    .SubCourseSimilar .coursesContainer .course .top .button {
        height: 42px;
        padding: 10px 20px;
        font-size: 14px
    }

    .SubCourseSimilar .coursesContainer .course .bottom {
        height: 430px
    }
}

@media (max-width: 1280px) {
    .SubCourseSimilar {
        padding: 2.5% 3.5% 0;
        gap: 40px
    }

    .SubCourseSimilar .heading {
        font-size: 42px
    }

    .SubCourseSimilar .coursesContainer {
        gap: 40px;
        row-gap: 28px
    }

    .SubCourseSimilar .coursesContainer .course {
        width: 31%
    }

    .SubCourseSimilar .coursesContainer .course .top {
        height: 160px;
        gap: 14px;
        padding: 14px 20px
    }

    .SubCourseSimilar .coursesContainer .course .top .title {
        font-size: 28px
    }

    .SubCourseSimilar .coursesContainer .course .top .button {
        height: 40px;
        padding: 8px 18px;
        font-size: 13px
    }

    .SubCourseSimilar .coursesContainer .course .bottom {
        height: 400px
    }
}

@media (max-width: 480px) {
    .SubCourseSimilar {
        gap: 10px
    }

    .SubCourseSimilar .heading {
        font-size: 24px;
        font-style: normal;
        font-weight: 400
    }

    .SubCourseSimilar .coursesContainer {
        gap: 20px;
        flex-direction: column;
        flex-wrap: nowrap
    }

    .SubCourseSimilar .coursesContainer .course {
        width: 100%
    }

    .SubCourseSimilar .coursesContainer .course .bottom {
        height: 331.485px
    }

    .SubCourseSimilar .coursesContainer .course .bottom .cimage {
        height: 100%;
        z-index: 1
    }

    .SubCourseSimilar .coursesContainer .course .top {
        height: 139.359px;
        position: relative;
        top: -5px;
        padding: 12px 26px
    }

    .SubCourseSimilar .coursesContainer .course .top .title {
        font-size: 24px;
        font-style: normal;
        font-weight: 650
    }

    .SubCourseSimilar .coursesContainer .course .top .button {
        width: 124px;
        height: 36px;
        padding: 12px 24px;
        font-size: 16px;
        font-weight: 650
    }
}

.privacyPolicy .hero {
    position: relative;
    width: 100%;
    height: 58.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.privacyPolicy .hero .bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.privacyPolicy .hero .navlinks {
    z-index: 1;
    display: flex;
    cursor: pointer
}

.privacyPolicy .hero .navlinks ul {
    position: absolute;
    top: 8vh;
    left: 7%;
    display: flex;
    justify-content: space-between;
    list-style: none;
    gap: 10px
}

.privacyPolicy .hero .navlinks ul li {
    color: var(--color-white)
}

.privacyPolicy .hero .navlinks ul li a {
    font-size: 16px;
    color: var(--color-white);
    text-decoration: none
}

.privacyPolicy .hero .navlinks ul .nav {
    padding: 1px 2px
}

.privacyPolicy .hero .navlinks ul .nav img {
    width: 24px;
    height: 24px
}

.privacyPolicy .hero h1 {
    z-index: 1;
    color: var(--color-white);
    text-align: center;
    text-shadow: 0px .21vw .21vw rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.92vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.privacyPolicy .info {
    background: #fbc51d1a;
    padding: 82px;
    margin: 80px 120px 0
}

.privacyPolicy .info p {
    color: var(--Color-5text, #333);
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.privacyPolicy .info h1 {
    color: var(--color-red);
    text-align: left;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 46px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    margin: 3% 0
}

@media (max-width: 1536px) {
    .privacyPolicy .hero {
        height: 55vh
    }

    .privacyPolicy .hero .navlinks ul {
        top: 6vh;
        left: 6%;
        gap: 8px
    }

    .privacyPolicy .hero .navlinks ul li a {
        font-size: 15px
    }

    .privacyPolicy .hero .navlinks ul .nav {
        padding: 2px 3px
    }

    .privacyPolicy .hero .navlinks ul .nav img {
        width: 22px;
        height: 22px
    }

    .privacyPolicy .hero h1 {
        font-size: 2.5vw;
        text-shadow: 0px .2vw .2vw rgba(0, 0, 0, .3)
    }

    .privacyPolicy .info {
        padding: 72px;
        margin: 70px 100px 0
    }

    .privacyPolicy .info h1 {
        font-size: 42px
    }

    .privacyPolicy .info p {
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .privacyPolicy .hero {
        height: 52vh
    }

    .privacyPolicy .hero .navlinks ul {
        top: 5vh;
        left: 5%;
        gap: 7px
    }

    .privacyPolicy .hero .navlinks ul li a {
        font-size: 14px
    }

    .privacyPolicy .hero .navlinks ul .nav {
        padding: 1px 2px
    }

    .privacyPolicy .hero .navlinks ul .nav img {
        width: 20px;
        height: 20px
    }

    .privacyPolicy .hero h1 {
        font-size: 2.3vw;
        text-shadow: 0px .18vw .18vw rgba(0, 0, 0, .3)
    }

    .privacyPolicy .info {
        padding: 60px;
        margin: 60px 90px 0
    }

    .privacyPolicy .info h1 {
        font-size: 38px
    }

    .privacyPolicy .info p {
        font-size: 20px
    }
}

@media (max-width: 1280px) {
    .privacyPolicy .hero {
        height: 50vh
    }

    .privacyPolicy .hero .navlinks ul {
        top: 4vh;
        left: 4%;
        gap: 6px
    }

    .privacyPolicy .hero .navlinks ul li a {
        font-size: 13px
    }

    .privacyPolicy .hero .navlinks ul .nav {
        padding: 1px
    }

    .privacyPolicy .hero .navlinks ul .nav img {
        width: 18px;
        height: 18px
    }

    .privacyPolicy .hero h1 {
        font-size: 2.1vw;
        text-shadow: 0px .15vw .15vw rgba(0, 0, 0, .3)
    }

    .privacyPolicy .info {
        padding: 50px;
        margin: 50px 80px 0
    }

    .privacyPolicy .info h1 {
        font-size: 36px
    }

    .privacyPolicy .info p {
        font-size: 18px
    }
}

@media (max-width: 480px) {
    .privacyPolicy .hero {
        height: 30vh
    }

    .privacyPolicy .hero .navlinks ul {
        top: 2vh;
        left: 5%;
        gap: 5px
    }

    .privacyPolicy .hero .navlinks ul li,
    .privacyPolicy .hero .navlinks ul li a {
        font-size: 12px
    }

    .privacyPolicy .hero .navlinks ul .nav {
        padding: 0 1px;
        scale: .6
    }

    .privacyPolicy .hero h1 {
        font-size: 6vw;
        padding: 0 10px
    }

    .privacyPolicy .info {
        padding: 40px 20px;
        margin: 40px 20px 0
    }

    .privacyPolicy .info h1 {
        font-size: 7vw;
        margin: 24px 0
    }

    .privacyPolicy .info p {
        font-size: 16px
    }
}

.profanityPolicy .hero {
    position: relative;
    width: 100%;
    height: 58.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.profanityPolicy .hero .bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.profanityPolicy .hero .navlinks {
    z-index: 1;
    display: flex;
    cursor: pointer
}

.profanityPolicy .hero .navlinks ul {
    position: absolute;
    top: 8vh;
    left: 7%;
    display: flex;
    justify-content: space-between;
    list-style: none;
    gap: 10px
}

.profanityPolicy .hero .navlinks ul li {
    color: var(--color-white)
}

.profanityPolicy .hero .navlinks ul li a {
    font-size: 16px;
    color: var(--color-white);
    text-decoration: none
}

.profanityPolicy .hero .navlinks ul .nav {
    padding: 1px 2px
}

.profanityPolicy .hero .navlinks ul .nav img {
    width: 24px;
    height: 24px
}

.profanityPolicy .hero h1 {
    z-index: 1;
    color: var(--color-white);
    text-align: center;
    text-shadow: 0px .21vw .21vw rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.92vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.profanityPolicy .info {
    background: #fbc51d1a;
    padding: 82px;
    margin: 80px 120px 0
}

.profanityPolicy .info p {
    color: var(--Color-5text, #333);
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    padding: 2rem 0
}

.profanityPolicy .info p span {
    text-decoration: underline
}

@media (max-width: 1536px) {
    .profanityPolicy .hero {
        height: 55vh
    }

    .profanityPolicy .hero .navlinks ul {
        top: 6vh;
        left: 6%;
        gap: 8px
    }

    .profanityPolicy .hero .navlinks ul li a {
        font-size: 15px
    }

    .profanityPolicy .hero .navlinks ul .nav {
        padding: 2px 3px
    }

    .profanityPolicy .hero .navlinks ul .nav img {
        width: 22px;
        height: 22px
    }

    .profanityPolicy .hero h1 {
        font-size: 2.5vw;
        text-shadow: 0px .2vw .2vw rgba(0, 0, 0, .3)
    }

    .profanityPolicy .info {
        padding: 72px;
        margin: 70px 100px 0
    }

    .profanityPolicy .info p {
        font-size: 22px;
        padding: 1.8rem 0
    }
}

@media (max-width: 1440px) {
    .profanityPolicy .hero {
        height: 52vh
    }

    .profanityPolicy .hero .navlinks ul {
        top: 5vh;
        left: 5%;
        gap: 7px
    }

    .profanityPolicy .hero .navlinks ul li a {
        font-size: 14px
    }

    .profanityPolicy .hero .navlinks ul .nav {
        padding: 1px 2px
    }

    .profanityPolicy .hero .navlinks ul .nav img {
        width: 20px;
        height: 20px
    }

    .profanityPolicy .hero h1 {
        font-size: 2.3vw;
        text-shadow: 0px .18vw .18vw rgba(0, 0, 0, .3)
    }

    .profanityPolicy .info {
        padding: 60px;
        margin: 60px 90px 0
    }

    .profanityPolicy .info p {
        font-size: 20px;
        padding: 1.6rem 0
    }
}

@media (max-width: 1280px) {
    .profanityPolicy .hero {
        height: 50vh
    }

    .profanityPolicy .hero .navlinks ul {
        top: 4vh;
        left: 4%;
        gap: 6px
    }

    .profanityPolicy .hero .navlinks ul li a {
        font-size: 13px
    }

    .profanityPolicy .hero .navlinks ul .nav {
        padding: 1px
    }

    .profanityPolicy .hero .navlinks ul .nav img {
        width: 18px;
        height: 18px
    }

    .profanityPolicy .hero h1 {
        font-size: 2.1vw;
        text-shadow: 0px .15vw .15vw rgba(0, 0, 0, .3)
    }

    .profanityPolicy .info {
        padding: 50px;
        margin: 50px 80px 0
    }

    .profanityPolicy .info p {
        font-size: 18px;
        padding: 1.4rem 0
    }
}

@media (max-width: 480px) {
    .profanityPolicy .hero {
        height: 30vh
    }

    .profanityPolicy .hero .navlinks ul {
        top: 2vh;
        left: 5%;
        gap: 5px
    }

    .profanityPolicy .hero .navlinks ul li,
    .profanityPolicy .hero .navlinks ul li a {
        font-size: 12px
    }

    .profanityPolicy .hero .navlinks ul .nav {
        padding: 0 1px;
        scale: .6
    }

    .profanityPolicy .hero h1 {
        font-size: 6vw;
        padding: 0 10px
    }

    .profanityPolicy .info {
        padding: 40px 20px;
        margin: 40px 20px 0
    }

    .profanityPolicy .info h1 {
        font-size: 6vw;
        margin: 24px 0
    }

    .profanityPolicy .info p {
        font-size: 16px;
        padding: 1% 0
    }
}

.termsOfUse .hero {
    position: relative;
    width: 100%;
    height: 58.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.termsOfUse .hero .bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.termsOfUse .hero .navlinks {
    z-index: 1;
    display: flex;
    cursor: pointer
}

.termsOfUse .hero .navlinks ul {
    position: absolute;
    top: 8vh;
    left: 7%;
    display: flex;
    justify-content: space-between;
    list-style: none;
    gap: 10px
}

.termsOfUse .hero .navlinks ul li {
    color: var(--color-white)
}

.termsOfUse .hero .navlinks ul li a {
    font-size: 16px;
    color: var(--color-white);
    text-decoration: none
}

.termsOfUse .hero .navlinks ul .nav {
    padding: 1px 2px
}

.termsOfUse .hero .navlinks ul .nav img {
    width: 24px;
    height: 24px
}

.termsOfUse .hero h1 {
    z-index: 1;
    color: var(--color-white);
    text-align: center;
    text-shadow: 0px .21vw .21vw rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.92vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.termsOfUse .info {
    padding: 61px 81px;
    background: #fbc51d1a;
    margin: 80px 120px 0
}

.termsOfUse .info h2 {
    color: var(--color-red);
    text-align: left;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 46px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 1.2rem
}

.termsOfUse .info p {
    color: var(--Color-5text, #333);
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    margin-bottom: 1.5rem
}

.termsOfUse .info ul {
    padding-left: 1.5rem;
    margin-bottom: 1.5rem
}

.termsOfUse .info ul li {
    color: var(--Color-5text, #333);
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    list-style-type: disc;
    margin-bottom: 1.5rem
}

@media (max-width: 1536px) {
    .termsOfUse .hero {
        height: 55vh
    }

    .termsOfUse .hero .navlinks ul {
        top: 6vh;
        left: 6%;
        gap: 8px
    }

    .termsOfUse .hero .navlinks ul li a {
        font-size: 15px
    }

    .termsOfUse .hero .navlinks ul .nav {
        padding: 2px 3px
    }

    .termsOfUse .hero .navlinks ul .nav img {
        width: 22px;
        height: 22px
    }

    .termsOfUse .hero h1 {
        font-size: 2.5vw;
        text-shadow: 0px .2vw .2vw rgba(0, 0, 0, .3)
    }

    .termsOfUse .info {
        padding: 55px 75px;
        margin: 70px 100px 0
    }

    .termsOfUse .info h2 {
        font-size: 42px;
        margin-bottom: 1rem
    }

    .termsOfUse .info p {
        font-size: 22px;
        margin-bottom: 1.2rem
    }

    .termsOfUse .info ul {
        padding-left: 1.2rem;
        margin-bottom: 1.2rem
    }

    .termsOfUse .info ul li {
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .termsOfUse .hero {
        height: 52vh
    }

    .termsOfUse .hero .navlinks ul {
        top: 5vh;
        left: 5%;
        gap: 7px
    }

    .termsOfUse .hero .navlinks ul li a {
        font-size: 14px
    }

    .termsOfUse .hero .navlinks ul .nav {
        padding: 1px 2px
    }

    .termsOfUse .hero .navlinks ul .nav img {
        width: 20px;
        height: 20px
    }

    .termsOfUse .hero h1 {
        font-size: 2.3vw;
        text-shadow: 0px .18vw .18vw rgba(0, 0, 0, .3)
    }

    .termsOfUse .info {
        padding: 50px 70px;
        margin: 60px 90px 0
    }

    .termsOfUse .info h2 {
        font-size: 40px;
        margin-bottom: 1rem
    }

    .termsOfUse .info p {
        font-size: 20px;
        margin-bottom: 1rem
    }

    .termsOfUse .info ul {
        padding-left: 1.2rem;
        margin-bottom: 1rem
    }

    .termsOfUse .info ul li {
        font-size: 20px
    }
}

@media (max-width: 1280px) {
    .termsOfUse .hero {
        height: 48vh
    }

    .termsOfUse .hero .navlinks ul {
        top: 4vh;
        left: 4%;
        gap: 6px
    }

    .termsOfUse .hero .navlinks ul li a {
        font-size: 13px
    }

    .termsOfUse .hero .navlinks ul .nav {
        padding: 1px
    }

    .termsOfUse .hero .navlinks ul .nav img {
        width: 18px;
        height: 18px
    }

    .termsOfUse .hero h1 {
        font-size: 2.1vw;
        text-shadow: 0px .15vw .15vw rgba(0, 0, 0, .3)
    }

    .termsOfUse .info {
        padding: 40px 60px;
        margin: 50px 80px 0
    }

    .termsOfUse .info h2 {
        font-size: 36px;
        margin-bottom: 1rem
    }

    .termsOfUse .info p {
        font-size: 18px;
        margin-bottom: .8rem
    }

    .termsOfUse .info ul {
        padding-left: 1rem;
        margin-bottom: 1rem
    }

    .termsOfUse .info ul li {
        font-size: 18px
    }
}

@media (max-width: 480px) {
    .termsOfUse .hero {
        height: 30vh
    }

    .termsOfUse .hero .navlinks ul {
        top: 2vh;
        left: 5%;
        gap: 5px
    }

    .termsOfUse .hero .navlinks ul li,
    .termsOfUse .hero .navlinks ul li a {
        font-size: 12px
    }

    .termsOfUse .hero .navlinks ul .nav {
        padding: 0 1px;
        scale: .6
    }

    .termsOfUse .hero h1 {
        font-size: 6vw;
        padding: 0 10px
    }

    .termsOfUse .info {
        padding: 40px 20px;
        margin: 40px 20px 0
    }

    .termsOfUse .info h2 {
        width: 100%;
        font-size: 6vw;
        margin-bottom: 16px
    }

    .termsOfUse .info p {
        font-size: 16px;
        margin-bottom: 16px
    }

    .termsOfUse .info ul {
        padding-left: 1rem;
        margin-bottom: 16px
    }

    .termsOfUse .info ul li {
        font-size: 16px;
        margin-bottom: 12px
    }
}

.vcHero {
    position: relative;
    width: 100%;
    height: 58.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-direction: column
}

.vcHero .bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.vcHero .navlinks {
    z-index: 1;
    display: flex;
    cursor: pointer
}

.vcHero .navlinks ul {
    position: absolute;
    top: 8vh;
    left: 7%;
    display: flex;
    justify-content: space-between;
    list-style: none;
    gap: 10px
}

.vcHero .navlinks ul li {
    color: var(--color-white)
}

.vcHero .navlinks ul li a {
    font-size: 16px;
    color: var(--color-white);
    text-decoration: none
}

.vcHero .navlinks ul .nav {
    padding: 1px 2px
}

.vcHero .navlinks ul .nav img {
    width: 24px;
    height: 24px
}

.vcHero h1 {
    z-index: 1;
    color: var(--yellow, #fbc51d);
    text-align: center;
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.vcHero p {
    color: var(--color-white);
    text-align: center;
    width: 65%;
    z-index: 1;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    margin-top: 1%
}

@media (max-width: 1536px) {
    .vcHero h1 {
        font-size: 48px
    }

    .vcHero p {
        font-size: 20px;
        width: 75%
    }

    .vcHero .navlinks ul {
        top: 9vh;
        left: 6%
    }

    .vcHero .navlinks ul li a {
        font-size: 14px
    }

    .vcHero .navlinks ul .nav img {
        width: 20px;
        height: 20px
    }
}

@media (max-width: 1440px) {
    .vcHero h1 {
        font-size: 44px
    }

    .vcHero p {
        font-size: 18px;
        width: 80%
    }

    .vcHero .navlinks ul {
        top: 10vh;
        left: 5%
    }

    .vcHero .navlinks ul li a {
        font-size: 13px
    }

    .vcHero .navlinks ul .nav img {
        width: 18px;
        height: 18px
    }
}

@media (max-width: 1280px) {
    .vcHero h1 {
        font-size: 40px
    }

    .vcHero p {
        font-size: 16px;
        width: 85%
    }

    .vcHero .navlinks ul {
        top: 11vh;
        left: 4%
    }

    .vcHero .navlinks ul li a {
        font-size: 12px
    }

    .vcHero .navlinks ul .nav img {
        width: 16px;
        height: 16px
    }
}

@media (max-width: 480px) {
    .vcHero {
        height: 35vh;
        width: 100%
    }

    .vcHero .navlinks ul {
        top: 2vh;
        left: 5%;
        gap: 5px
    }

    .vcHero .navlinks ul li,
    .vcHero .navlinks ul li a {
        font-size: 12px
    }

    .vcHero .navlinks ul .nav {
        padding: 0 1px;
        scale: .6
    }

    .vcHero h1 {
        font-size: 6vw;
        padding: 0 10px
    }

    .vcHero p {
        font-size: 14px;
        width: 90%;

        font-weight: 400
    }
}

.vcHow {
    padding: 80px 218px 0
}

.vcHow h1 {
    color: var(--color-red);
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 46px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 60px
}

.vcHow .steps-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 60px
}

.vcHow .steps-section .step {
    flex: 1;
    text-align: center
}

.vcHow .steps-section .step .step-img-box {
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 40px;
    background: var(--color-warning);
    box-shadow: 0 4px 10px #0003;
    width: 470px;
    height: 259px
}

.vcHow .steps-section .step .step-img-box img {
    width: 180px;
    height: 180px
}

.vcHow .steps-section .step p {
    margin-top: 20px;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.vcHow .steps-section .step p a {
    text-decoration: underline
}

.vcHow .vcBottom {
    width: 60%;
    margin: auto;
    text-align: center;
    font-size: 24px;
    font-weight: 650
}

@media (max-width: 1536px) {
    .vcHow {
        padding: 60px 100px 0
    }

    .vcHow h1 {
        font-size: 40px
    }

    .vcHow .steps-section {
        gap: 30px
    }

    .vcHow .steps-section .step .step-img-box {
        width: 420px;
        height: 230px
    }

    .vcHow .steps-section .step .step-img-box img {
        width: 160px;
        height: 160px
    }

    .vcHow .steps-section .step p {
        font-size: 20px
    }

    .vcHow .vcBottom {
        font-size: 20px;
        width: 70%
    }
}

@media (max-width: 1440px) {
    .vcHow {
        padding: 50px 90px 0
    }

    .vcHow h1 {
        font-size: 36px
    }

    .vcHow .steps-section {
        gap: 25px
    }

    .vcHow .steps-section .step .step-img-box {
        width: 380px;
        height: 210px
    }

    .vcHow .steps-section .step .step-img-box img {
        width: 150px;
        height: 150px
    }

    .vcHow .steps-section .step p {
        font-size: 18px
    }

    .vcHow .vcBottom {
        font-size: 18px;
        width: 75%
    }
}

@media (max-width: 1280px) {
    .vcHow {
        padding: 40px 100px 0
    }

    .vcHow h1 {
        font-size: 32px
    }

    .vcHow .steps-section {
        gap: 20px
    }

    .vcHow .steps-section .step .step-img-box {
        width: 340px;
        height: 190px
    }

    .vcHow .steps-section .step .step-img-box img {
        width: 130px;
        height: 130px
    }

    .vcHow .steps-section .step p {
        font-size: 16px
    }

    .vcHow .vcBottom {
        font-size: 16px;
        width: 80%
    }
}

@media (max-width: 480px) {
    .vcHow {
        padding: 20px
    }

    .vcHow h1 {
        font-size: 18px;
        margin-bottom: 40px;
        width: 100%;
        text-align: left
    }

    .vcHow .steps-section {
        flex-direction: column;
        gap: 30px;
        padding-left: 10%
    }

    .vcHow .steps-section .step .step-img-box {
        padding: 20px;
        width: 250px;
        height: 250px
    }

    .vcHow .steps-section .step .step-img-box img {
        width: 80%;
        height: auto
    }

    .vcHow .steps-section .step p {
        text-align: center;
        font-size: 16px;
        margin-top: 15px;
        padding-right: 10%
    }

    .vcHow .steps-section .step p a {
        font-size: 16px
    }

    .vcHow .vcBottom {
        width: 100%;
        font-size: 16px
    }
}

.vcSkills {
    height: 766px;
    margin: 80px 120px 108px;
    display: flex
}

.vcSkills .vcLeft {
    width: 50%;
    background: url(/assets/what-CGg93c-L.jpeg) #d3d3d3 50%/cover no-repeat
}

.vcSkills .vcRight {
    width: 50%;
    background: var(--darkblue, linear-gradient(249deg, #1C325B 1.17%, #3B6AC1 59.08%));
    padding: 60px 50px 60px 60px
}

.vcSkills .vcRight h1 {
    color: var(--yellow, #FBC51D);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.vcSkills .vcRight ul {
    margin-top: 4%;
    padding-left: 4%
}

.vcSkills .vcRight ul li {
    color: var(--color-white);
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    margin-bottom: 35px
}

@media (max-width: 1536px) {
    .vcSkills {
        height: 700px;
        margin: 70px 100px 100px
    }

    .vcSkills .vcRight {
        padding: 50px 40px 50px 50px
    }

    .vcSkills .vcRight h1 {
        font-size: 48px
    }

    .vcSkills .vcRight ul li {
        font-size: 20px;
        margin-bottom: 30px
    }
}

@media (max-width: 1440px) {
    .vcSkills {
        height: 640px;
        margin: 60px 80px 90px
    }

    .vcSkills .vcRight {
        padding: 45px 35px 45px 45px
    }

    .vcSkills .vcRight h1 {
        font-size: 42px
    }

    .vcSkills .vcRight ul li {
        font-size: 18px;
        margin-bottom: 28px
    }
}

@media (max-width: 1280px) {
    .vcSkills {
        height: 580px;
        margin: 50px 60px 80px
    }

    .vcSkills .vcRight {
        padding: 40px 30px 40px 40px
    }

    .vcSkills .vcRight h1 {
        font-size: 36px
    }

    .vcSkills .vcRight ul li {
        font-size: 16px;
        margin-bottom: 25px
    }
}

@media (max-width: 480px) {
    .vcSkills {
        flex-direction: column;
        height: auto;
        margin: 40px 20px
    }

    .vcSkills .vcLeft,
    .vcSkills .vcRight {
        width: 100%
    }

    .vcSkills .vcLeft {
        height: 200px;
        background-size: cover;
        background-position: center
    }

    .vcSkills .vcRight {
        padding: 30px 20px
    }

    .vcSkills .vcRight h1 {
        font-size: 24px;
        text-align: center
    }

    .vcSkills .vcRight ul {
        margin-top: 20px;
        padding-left: 20px
    }

    .vcSkills .vcRight ul li {
        font-size: 16px;
        margin-bottom: 20px
    }
}

.vcLast {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 120px
}

.vcLast .vcTop {
    position: relative;
    width: 100%;
    height: 566px
}

.vcLast .vcTop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.vcLast .vcTop:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg, #d9d9d900 71.58%, #dc143c 99.83%);
    pointer-events: none
}

.vcLast .middle {
    font-size: 46px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    margin: 34px 0
}

.vcLast .vcBottom {
    height: 407px;
    background: var(--red, #dc143c);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 41px 100px
}

.vcLast .vcBottom p {
    color: var(--color-white);
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.vcLast .vcBottom button {
    cursor: pointer;
    margin-top: 2%;
    display: flex;
    padding: 12px 26px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: none;
    border-radius: 10px;
    background: #fbc51d;
    color: var(--Color-5text, #333);
    font-size: 18px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    text-decoration: underline
}

@media (max-width: 1536px) {
    .vcLast {
        margin: 0 100px
    }

    .vcLast .vcTop {
        height: 500px
    }

    .vcLast .middle {
        font-size: 40px;
        margin: 30px 0
    }

    .vcLast .vcBottom {
        height: 370px;
        padding: 35px 80px
    }

    .vcLast .vcBottom p {
        font-size: 20px
    }

    .vcLast .vcBottom button {
        font-size: 16px;
        padding: 10px 22px
    }
}

@media (max-width: 1440px) {
    .vcLast {
        margin: 0 80px
    }

    .vcLast .vcTop {
        height: 460px
    }

    .vcLast .middle {
        font-size: 36px;
        margin: 28px 0
    }

    .vcLast .vcBottom {
        height: 340px;
        padding: 30px 70px
    }

    .vcLast .vcBottom p {
        font-size: 18px
    }

    .vcLast .vcBottom button {
        font-size: 15px;
        padding: 9px 20px
    }
}

@media (max-width: 1280px) {
    .vcLast {
        margin: 0 60px
    }

    .vcLast .vcTop {
        height: 420px
    }

    .vcLast .middle {
        font-size: 32px;
        margin: 25px 0
    }

    .vcLast .vcBottom {
        height: 310px;
        padding: 25px 60px
    }

    .vcLast .vcBottom p {
        font-size: 16px
    }

    .vcLast .vcBottom button {
        font-size: 14px;
        padding: 8px 18px
    }
}

@media (max-width: 480px) {
    .vcLast {
        margin: 0 20px
    }

    .vcLast .vcTop {
        height: 220px
    }

    .vcLast .vcTop img {
        height: 100%;
        object-fit: cover
    }

    .vcLast .middle {
        font-size: 24px;
        text-align: center;
        margin: 20px 0
    }

    .vcLast .vcBottom {
        height: auto;
        padding: 30px 20px
    }

    .vcLast .vcBottom p {
        font-size: 16px
    }

    .vcLast .vcBottom button {
        font-size: 16px;
        padding: 10px 20px;
        margin-top: 20px
    }
}

.ftHero {
    position: relative;
    width: 100%;
    height: 58.5vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.ftHero .bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.ftHero h1 {
    z-index: 1;
    color: var(--color-white);
    text-align: center;
    text-shadow: 0px .21vw .21vw rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.92vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.ftHero p {
    margin-top: 9px;
    width: 62%;
    color: var(--color-white);
    text-align: center;
    z-index: 1;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.ftHero p span {
    text-decoration: underline
}

@media (max-width: 480px) {
    .ftHero {
        height: 45vh
    }

    .ftHero h1 {
        font-size: 6.5vw;
        padding: 0 10px
    }

    .ftHero p {
        font-size: 14px;
        width: 90%;
        margin-top: 6px;
        padding: 0 10px
    }
}

.ftCourses {
    padding: 80px 118px 0 124px
}

.ftCourses h1 {
    color: var(--color-red);
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.ftCourses .ft-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 60px;
    row-gap: 84px;
    margin-top: 64px
}

.ftCourses .course-card {
    display: flex;
    flex-direction: column;
    align-items: center
}

.ftCourses .course-img {
    width: 519px;
    height: 501px;
    object-fit: cover;
    border-radius: 20px 20px 0 0
}

.ftCourses .text-box {
    width: 519px;
    height: 319px;
    padding: 24px;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 4px 14px #00000040 inset
}

.ftCourses .text-box h2 {
    color: var(--color-white);
    font-size: 42px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    margin-bottom: 16px
}

.ftCourses .text-box p {
    color: var(--color-white);
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.ftCourses .blue-box {
    background: linear-gradient(104deg, #3027a0 .86%, #6a669d80 95.86%)
}

.ftCourses .green-box {
    background: linear-gradient(104deg, #378509 4.41%, #72bf4480)
}

.ftCourses .orange-box {
    background: linear-gradient(103deg, #d33519 2.06%, #ff634780)
}

.ftCourses .skyblue-box {
    background: linear-gradient(102deg, #075580 3.39%, #2a98d4 98.99%)
}

.ftCourses .red-box {
    background: linear-gradient(102deg, #b30225 1.21%, #dc143c80)
}

.ftCourses .darkblue-box {
    background: linear-gradient(249deg, #1c325b 1.17%, #3b6ac1 59.08%)
}

@media (max-width: 480px) {
    .ftCourses {
        padding: 40px 20px 0
    }

    .ftCourses h1 {
        font-size: 24px;
        text-align: center
    }

    .ftCourses .ft-container {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 40px;
        margin-top: 40px
    }

    .ftCourses .course-img {
        width: 100%;
        height: 321px
    }

    .ftCourses .course-img img {
        width: 100%;
        height: auto;
        object-fit: cover
    }

    .ftCourses .course-img:last-of-type {
        object-fit: none
    }

    .ftCourses .text-box {
        width: 100%;
        height: 200px;
        padding: 40px 20px
    }

    .ftCourses .text-box h2 {
        font-size: 24px;
        margin-bottom: 8px
    }

    .ftCourses .text-box p {
        font-size: 16px
    }
}

.giftSub {
    padding: 0;
    margin: 60px 6.25vw 3.7vh
}

.giftSub .giftSub__headerBox {
    background-color: #d32f2f;
    padding: 15px 30px;
    height: auto;
    text-align: center
}

.giftSub .giftSub__headerBox h2 {
    color: var(--color-white);
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.92vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.giftSub .giftSub__container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    background: #fbc51d1a;
    margin: auto;
    height: auto;
    overflow: hidden
}

.giftSub .giftSub__container .giftSub__left {
    width: 44.27vw;
    flex: 1;
    padding: 30px 5%
}

.giftSub .giftSub__container .giftSub__left p {
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 500
}

.giftSub .giftSub__container .giftSub__left button {
    display: flex;
    padding: 15px 30px;
    font-size: 1.05rem;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: none;
    border-radius: 10px;
    background: var(--color-red);
    color: var(--color-white);
    font-weight: 650;
    text-transform: uppercase;
    transition: background .3s ease, transform .3s ease;
    cursor: pointer
}

.giftSub .giftSub__container .giftSub__left button:hover {
    background: #b01031
}

.giftSub .giftSub__container .giftSub__right {
    flex: 1;
    display: flex;
    justify-content: center
}

.giftSub .giftSub__container .giftSub__right img {
    width: 44.27vw;
    height: auto;
    object-fit: cover;
    animation: zoomSlide 10s ease-in-out infinite;
    transform-origin: left center
}

@keyframes zoomSlide {
    0% {
        transform: scale(1) translate(0)
    }

    50% {
        transform: scale(1.1) translate(5%)
    }

    to {
        transform: scale(1) translate(0)
    }
}

@media (max-width: 992px) {
    .giftSub {
        margin: 45px 15px 30px
    }

    .giftSub .giftSub__headerBox {
        padding: 15px 10px;
        height: auto
    }

    .giftSub .giftSub__headerBox h2 {
        font-size: 1.2rem;
        line-height: 1.2
    }

    .giftSub .giftSub__container {
        flex-direction: column;
        height: auto;
        gap: 1.5rem;
        padding: 20px
    }

    .giftSub .giftSub__container .giftSub__left {
        width: 100%;
        padding: 0
    }

    .giftSub .giftSub__container .giftSub__left p {
        font-size: 1.1rem;
        text-align: left
    }

    .giftSub .giftSub__container .giftSub__left button {
        font-size: 16px;
        padding: 10px 20px;
        display: block;
        margin: 1rem auto 0
    }

    .giftSub .giftSub__container .giftSub__right {
        width: 100%
    }

    .giftSub .giftSub__container .giftSub__right img {
        width: 100%;
        height: auto
    }
}

@media (max-width: 480px) {
    .giftSub {
        margin: 45px 15px 30px
    }

    .giftSub .giftSub__headerBox {
        padding: 15px 10px;
        height: auto
    }

    .giftSub .giftSub__headerBox h2 {
        font-size: 1.2rem;
        line-height: 1.2
    }

    .giftSub .giftSub__container {
        flex-direction: column;
        height: auto;
        gap: 1.5rem;
        padding: 20px
    }

    .giftSub .giftSub__container .giftSub__left {
        width: 100%;
        padding: 0
    }

    .giftSub .giftSub__container .giftSub__left p {
        font-size: 1.1rem;
        text-align: left
    }

    .giftSub .giftSub__container .giftSub__left button {
        font-size: 16px;
        padding: 10px 20px;
        display: block;
        margin: 1rem auto 0
    }

    .giftSub .giftSub__container .giftSub__right {
        width: 100%
    }

    .giftSub .giftSub__container .giftSub__right img {
        width: 100%;
        height: auto
    }
}

.giftForm {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    margin: 54px 120px 80px
}

.giftForm .giftForm__container {
    display: flex;
    height: 1114px;
    width: 100%;
    background: #fbc51d12;
    box-shadow: 0 0 20px #0000000d;
    overflow: hidden
}

.giftForm .giftForm__image {
    width: 50%;
    background: url(/assets/form-b6UBCqJI.jpeg) no-repeat center center;
    background-size: cover
}

.giftForm .enquiry-form h2 {
    color: var(--color-red);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 42px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 40px
}

.giftForm .enquiry-form .input-group {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.giftForm .enquiry-form .input-group .input-field {
    padding: 12px 15px;
    color: var(--GREY-COLOR, #2c2c2c);
    height: 60px;
    font-size: 16px;
    font-style: normal;
    background-color: transparent;
    font-weight: 500;
    line-height: normal;
    border-radius: 10px;
    border: 1px solid rgba(255, 30, 50, .3);
    outline: none;
    transition: border .3s ease
}

.giftForm .enquiry-form .input-group select.input-field {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%227%22%20viewBox%3D%220%200%2010%207%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M1%201L5%205L9%201%22%20stroke%3D%22%232C2C2C%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E);
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 12px
}

.giftForm .enquiry-form .checkbox-container {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    text-align: center;
    margin-top: 10px
}

@media (max-width: 480px) {
    .giftForm {
        flex-direction: column-reverse;
        margin: 0;
        padding: 24px
    }

    .giftForm .giftForm__container {
        flex-direction: column-reverse;
        height: auto
    }

    .giftForm .giftForm__image {
        width: 100%;
        height: 440px;
        background-position: center;
        background-size: cover
    }

    .giftForm .giftForm__form {
        width: 100%;
        padding: 24px
    }

    .giftForm .giftForm__form h2 {
        font-size: 24px;
        margin-bottom: 24px;
        text-align: center
    }

    .giftForm .giftForm__form form {
        gap: 20px
    }

    .giftForm .giftForm__form form .form-group {
        gap: 8px
    }

    .giftForm .giftForm__form form .form-group label {
        font-size: 16px
    }

    .giftForm .giftForm__form form .form-group input,
    .giftForm .giftForm__form form .form-group select {
        font-size: 14px;
        height: 48px
    }

    .giftForm .giftForm__form form .privacy {
        font-size: 10px;
        width: 100%
    }

    .giftForm .giftForm__form form button {
        width: 100%;
        height: 45px;
        font-size: 14px
    }
}

.LCourses {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.08vw;
    padding: 2.08vw 6.25vw
}

.LCourses .heading {
    color: var(--color-red);
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.92vw;
    font-weight: 400;
    text-transform: uppercase
}

.LCourses .categories {
    gap: 59px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.LCourses .categories .category {
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 0
}

.LCourses .categories .category .image-container {
    position: relative;
    width: 27.07vw;
    height: 43vh;
    overflow: hidden
}

.LCourses .categories .category .image-container .main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .5s ease;
    filter: grayscale(0%)
}

.LCourses .categories .category .image-container .main-img:hover {
    filter: grayscale(100%);
    transform: scale(1.05)
}

.LCourses .categories .category .image-container .arrow {
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.25vw;
    height: 6.25vw;
    right: -1vw;
    top: -.9vw;
    border-radius: 50%;
    background-color: #fbc51d;
    position: absolute;
    transition: all .5s ease
}

.LCourses .categories .category .image-container .arrow:hover {
    scale: 1.1;
    background-color: #fbc31dbe
}

.LCourses .categories .category .image-container .arrow img {
    width: 45%;
    height: 45%;
    object-fit: cover;
    display: none
}

.LCourses .categories .category .top {
    padding: 1.04vw 1.35vw;
    width: 27.08vw;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 4px 14px #0000001a;
    display: flex;
    flex-direction: column
}

.LCourses .categories .category .top .title {
    color: var(--color-white);
    font-weight: 650;
    font-size: 1.65rem;
    margin-bottom: 15px;
    letter-spacing: 1px
}

.LCourses .categories .category .top .desc {
    color: var(--color-white);
    font-weight: 500;
    font-size: 1.25rem;
    margin-bottom: 4.63vh
}

.LCourses .categories .category .top .ulbox {
    border-radius: 20px;
    background: var(--color-white);
    margin: .52vw;
    padding: 1.56vw;
    width: 23.59vw;
    height: 62.96vh
}

.LCourses .categories .category .top .ulbox ul {
    list-style: disc;
    font-weight: 650;
    font-size: 1.25vw;
    padding-left: 2.08vw
}

.LCourses .categories .category .top .ulbox ul li {
    margin-bottom: 2.78vh
}

.LCourses .top.variant-1 {
    border-radius: 20px 20px 0 0;
    background: linear-gradient(74deg, #3027a0 20.93%, #6a669d80 105.37%);
    box-shadow: inset 0 4px 14px #00000040
}

.LCourses .top.variant-2 {
    border-radius: 20px 20px 0 0;
    background: linear-gradient(91deg, #378509 5.36%, #72bf4480 175.45%);
    box-shadow: inset 0 4px 14px #00000040
}

.LCourses .top.variant-3 {
    border-radius: 20px 20px 0 0;
    background: linear-gradient(102deg, #d33519 2.67%, #ff634780 132.1%);
    box-shadow: inset 0 4px 14px #00000040
}

.LCourses .top.variant-4 {
    border-radius: 20px 20px 0 0;
    background: linear-gradient(106deg, #075580 3.57%, #2a98d4 119.99%);
    box-shadow: inset 0 4px 14px #00000040
}

.LCourses .top.variant-5 {
    border-radius: 20px 20px 0 0;
    background: linear-gradient(101deg, #b30225 1.12%, #dc143c80 126.08%);
    box-shadow: inset 0 4px 14px #00000040
}

.LCourses .top.variant-6 {
    border-radius: 20px 20px 0 0;
    background: var(--darkblue, linear-gradient(249deg, #1c325b 1.17%, #3b6ac1 59.08%));
    box-shadow: inset 0 4px 14px #00000040
}

.LCourses .top.variant-7 {
    border-radius: 20px 20px 0 0;
    background: linear-gradient(74deg, #3027a0 20.93%, #6a669d80 105.37%);
    box-shadow: inset 0 4px 14px #00000040
}

.LCourses .top.variant-8 {
    border-radius: 20px 20px 0 0;
    background: linear-gradient(91deg, #378509 5.36%, #72bf4480 175.45%);
    box-shadow: inset 0 4px 14px #00000040
}

.LCourses .top.variant-9 {
    border-radius: 20px 20px 0 0;
    background: linear-gradient(102deg, #d33519 2.67%, #ff634780 132.1%);
    box-shadow: inset 0 4px 14px #00000040
}

.LCourses .bottom {
    font-size: 1.5rem;
    justify-content: center;
    font-weight: 650
}

.LCourses button {
    display: flex;
    padding: 15px 30px;
    font-size: 1.5rem;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: none;
    border-radius: 10px;
    background: var(--color-red);
    color: var(--color-white);
    font-weight: 650;
    text-transform: uppercase;
    transition: background .3s ease, transform .3s ease;
    cursor: pointer
}

.LCourses button:hover {
    background: #b01031
}

@media (max-width: 992px) {
    .LCourses {
        padding: 20px 15px;
        gap: 4vw
    }

    .LCourses .heading {
        font-size: 32px
    }

    .LCourses .categories {
        gap: 30px
    }

    .LCourses .categories .category {
        width: 46%
    }

    .LCourses .categories .category .image-container {
        width: 100%;
        height: 220px
    }

    .LCourses .categories .category .image-container .arrow {
        width: 60px;
        height: 60px;
        top: -4%;
        right: -.5%
    }

    .LCourses .categories .category .image-container .arrow img {
        width: 50%;
        height: 50%
    }

    .LCourses .categories .category .top {
        width: 100%;
        height: auto;
        padding: 20px;
        justify-content: center
    }

    .LCourses .categories .category .top .desc {
        margin-bottom: 5px
    }

    .LCourses .categories .category .top .ulbox {
        width: 100%;
        height: auto
    }

    .LCourses .categories .category .top .ulbox ul {
        font-size: 16px;
        padding-left: 20px
    }

    .LCourses .categories .category .top .ulbox ul li {
        margin-bottom: 15px
    }

    .LCourses .top.variant-1,
    .LCourses .top.variant-2,
    .LCourses .top.variant-3,
    .LCourses .top.variant-4,
    .LCourses .top.variant-5,
    .LCourses .top.variant-6,
    .LCourses .top.variant-7,
    .LCourses .top.variant-8,
    .LCourses .top.variant-9 {
        border-radius: 20px
    }

    .LCourses .bottom,
    .LCourses button {
        font-size: 16px
    }
}

@media (max-width: 480px) {
    .LCourses {
        padding: 20px 15px;
        gap: 4vw
    }

    .LCourses .heading {
        font-size: 32px
    }

    .LCourses .categories {
        gap: 30px
    }

    .LCourses .categories .category {
        width: 100%
    }

    .LCourses .categories .category .image-container {
        width: 100%;
        height: 220px
    }

    .LCourses .categories .category .image-container .arrow {
        width: 60px;
        height: 60px;
        top: -4%;
        right: -.5%
    }

    .LCourses .categories .category .image-container .arrow img {
        width: 50%;
        height: 50%
    }

    .LCourses .categories .category .top {
        width: 100%;
        height: auto;
        padding: 20px;
        justify-content: center
    }

    .LCourses .categories .category .top .desc {
        margin-bottom: 5px
    }

    .LCourses .categories .category .top .ulbox {
        width: 100%;
        height: auto
    }

    .LCourses .categories .category .top .ulbox ul {
        font-size: 16px;
        padding-left: 20px
    }

    .LCourses .categories .category .top .ulbox ul li {
        margin-bottom: 15px
    }

    .LCourses .top.variant-1,
    .LCourses .top.variant-2,
    .LCourses .top.variant-3,
    .LCourses .top.variant-4,
    .LCourses .top.variant-5,
    .LCourses .top.variant-6,
    .LCourses .top.variant-7,
    .LCourses .top.variant-8,
    .LCourses .top.variant-9 {
        border-radius: 20px
    }

    .LCourses .bottom,
    .LCourses button {
        font-size: 16px
    }
}

.why {
    padding: 45px 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center
}

.why h1 {
    color: var(--red, #dc143c);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-weight: 400
}

.why .why-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin: 30px 0
}

.why .why-container .why-card {
    width: 405px;
    height: 300px;
    background: #fbc51d1a;
    border-radius: 10px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: background .3s ease
}

.why .why-container .why-card:hover {
    background: #fbc51d80
}

.why .why-container .why-card img {
    width: 60px;
    height: 60px;
    margin-bottom: 20px
}

.why .why-container .why-card h2 {
    font-size: 24px;
    font-weight: 650;
    margin-bottom: 10px
}

.why .why-container .why-card p {
    font-size: 1.25rem;
    font-weight: 500
}

.why .b {
    font-size: 24px;
    font-weight: 650;
    margin-bottom: 30px
}

.why button {
    display: flex;
    padding: 15px 30px;
    font-size: 1.5rem;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: none;
    border-radius: 10px;
    background: var(--color-red);
    color: var(--color-white);
    font-weight: 650;
    text-transform: uppercase;
    transition: background .3s ease, transform .3s ease;
    cursor: pointer
}

.why button:hover {
    background: #b01031
}

@media (max-width: 992px) {
    .why h1 {
        font-size: 24px
    }

    .why .why-container {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 10px;
        width: 100%;
        padding-bottom: 16px
    }

    .why .why-container .why-card {
        width: 30%;
        height: auto;
        scroll-snap-align: start;
        flex-shrink: 0
    }

    .why .why-container .why-card img {
        width: 42px;
        height: 42px
    }

    .why .why-container .why-card h2 {
        font-size: 18px
    }

    .why .why-container .why-card p,
    .why .b,
    .why button {
        font-size: 16px
    }
}

@media (max-width: 480px) {
    .why h1 {
        font-size: 24px
    }

    .why .why-container {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 10px;
        width: 100%;
        padding-bottom: 16px
    }

    .why .why-container .why-card {
        flex: 0 0 95%;
        height: 256px;
        scroll-snap-align: start;
        flex-shrink: 0
    }

    .why .why-container .why-card img {
        width: 42px;
        height: 42px
    }

    .why .why-container .why-card h2 {
        font-size: 18px
    }

    .why .why-container .why-card p,
    .why .b,
    .why button {
        font-size: 16px
    }
}

.landing-cta {
    height: auto;
    background: var(--skyblue, linear-gradient(102deg, #075580 3.39%, #2a98d4 98.99%));
    padding: 15px;
    margin: 30px 0 0
}

.landing-cta p {
    color: var(--color-white);
    text-align: center;
    font-size: .85rem;
    font-style: italic;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 1px
}

.landing-cta .cta-address {
    font-size: .95rem;
    margin-bottom: 20px
}

@media (max-width: 480px) {
    .cta {
        height: auto;
        padding: 24px 16px;
        margin: 40px 16px
    }

    .cta p {
        font-size: 16px;
        text-align: center
    }
}

.careerHero .hero {
    position: relative;
    width: 100%;
    height: 58.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.careerHero .hero .bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.careerHero .hero .navlinks {
    z-index: 1;
    display: flex;
    cursor: pointer
}

.careerHero .hero .navlinks ul {
    position: absolute;
    top: 6vh;
    left: 7%;
    display: flex;
    justify-content: space-between;
    list-style: none;
    gap: 10px
}

.careerHero .hero .navlinks ul li {
    color: var(--color-white)
}

.careerHero .hero .navlinks ul li a {
    font-size: 16px;
    color: var(--color-white);
    text-decoration: none
}

.careerHero .hero .navlinks ul .nav {
    padding: 1px 2px
}

.careerHero .hero .navlinks ul .nav img {
    width: 24px;
    height: 24px
}

.careerHero .hero h1 {
    z-index: 1;
    color: var(--color-white);
    text-align: center;
    text-shadow: 0px .21vw .21vw rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.92vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

@media (max-width: 1536px) {
    .careerHero .hero {
        height: 54vh
    }

    .careerHero .hero .navlinks ul {
        top: 5.5vh
    }

    .careerHero .hero .navlinks ul li a {
        font-size: 15px
    }

    .careerHero .hero .navlinks ul .nav img {
        width: 22px;
        height: 22px
    }

    .careerHero .hero h1 {
        font-size: 2.6vw
    }
}

@media (max-width: 1440px) {
    .careerHero .hero {
        height: 50vh
    }

    .careerHero .hero .navlinks ul {
        top: 5vh
    }

    .careerHero .hero .navlinks ul li a {
        font-size: 14px
    }

    .careerHero .hero .navlinks ul .nav img {
        width: 20px;
        height: 20px
    }

    .careerHero .hero h1 {
        font-size: 2.3vw
    }
}

@media (max-width: 1280px) {
    .careerHero .hero {
        height: 46vh
    }

    .careerHero .hero .navlinks ul {
        top: 4.5vh;
        gap: 8px
    }

    .careerHero .hero .navlinks ul li a {
        font-size: 13px
    }

    .careerHero .hero .navlinks ul .nav img {
        width: 18px;
        height: 18px
    }

    .careerHero .hero h1 {
        font-size: 2vw
    }
}

@media (max-width: 480px) {
    .careerHero .hero {
        height: 30vh
    }

    .careerHero .hero .navlinks ul {
        top: 2vh;
        left: 5%;
        gap: 5px
    }

    .careerHero .hero .navlinks ul li,
    .careerHero .hero .navlinks ul li a {
        font-size: 12px
    }

    .careerHero .hero .navlinks ul .nav {
        padding: 0 1px;
        scale: .6
    }

    .careerHero .hero h1 {
        font-size: 6vw;
        padding: 0 10px
    }
}

.careerLast {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 120px
}

.careerLast .vcTop {
    position: relative;
    width: 100%;
    height: 566px
}

.careerLast .vcTop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.careerLast .vcTop:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg, #d9d9d900 71.58%, #dc143c 99.83%);
    pointer-events: none
}

.careerLast .middle {
    font-size: 46px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    margin: 34px 0
}

.careerLast .vcBottom {
    height: 407px;
    background: var(--red, #dc143c);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 41px 100px
}

.careerLast .vcBottom p {
    color: var(--color-white);
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    margin-bottom: 4vh
}

.careerLast .vcBottom button {
    cursor: pointer;
    margin-top: 2%;
    display: flex;
    padding: 12px 26px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: none;
    border-radius: 10px;
    background: #fbc51d;
    color: var(--Color-5text, #333);
    font-size: 18px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    text-decoration: underline
}

@media (max-width: 1536px) {
    .careerLast {
        margin: 0 100px
    }

    .careerLast .vcTop {
        height: 520px
    }

    .careerLast .middle {
        font-size: 42px;
        margin: 30px 0
    }

    .careerLast .vcBottom {
        height: 380px;
        padding: 36px 80px
    }

    .careerLast .vcBottom p {
        font-size: 22px;
        margin-bottom: 3.5vh
    }

    .careerLast .vcBottom button {
        padding: 10px 22px;
        font-size: 17px
    }
}

@media (max-width: 1440px) {
    .careerLast {
        margin: 0 80px
    }

    .careerLast .vcTop {
        height: 490px
    }

    .careerLast .middle {
        font-size: 38px;
        margin: 28px 0
    }

    .careerLast .vcBottom {
        height: 360px;
        padding: 32px 70px
    }

    .careerLast .vcBottom p {
        font-size: 20px;
        margin-bottom: 3vh
    }

    .careerLast .vcBottom button {
        padding: 9px 20px;
        font-size: 16px
    }
}

@media (max-width: 1280px) {
    .careerLast {
        margin: 0 60px
    }

    .careerLast .vcTop {
        height: 440px
    }

    .careerLast .middle {
        font-size: 34px;
        margin: 24px 0
    }

    .careerLast .vcBottom {
        height: 330px;
        padding: 28px 60px
    }

    .careerLast .vcBottom p {
        font-size: 18px;
        margin-bottom: 2.5vh
    }

    .careerLast .vcBottom button {
        padding: 8px 18px;
        font-size: 15px
    }
}

@media (max-width: 480px) {
    .careerLast {
        margin: 0 20px
    }

    .careerLast .vcTop {
        height: 220px
    }

    .careerLast .vcTop img {
        height: 100%;
        object-fit: cover
    }

    .careerLast .middle {
        font-size: 24px;
        text-align: center;
        margin: 20px 0
    }

    .careerLast .vcBottom {
        height: auto;
        padding: 30px 20px
    }

    .careerLast .vcBottom p {
        font-size: 16px
    }

    .careerLast .vcBottom button {
        font-size: 16px;
        padding: 10px 20px;
        margin-top: 20px
    }
}

.careerWhy {
    height: 529px;
    margin: 80px 120px;
    display: flex;
    justify-content: center;
    align-items: center
}

.careerWhy .hsLeft {
    width: 50%;
    border-radius: 10px 0 0 10px
}

.careerWhy .hsLeft img {
    width: 834px;
    height: 529px;
    object-fit: cover
}

.careerWhy .hsRight {
    height: 531.5px;
    width: 50%;
    border-radius: 0 10px 10px 0;
    background: #fbc51d33;
    display: flex;
    flex-direction: column;
    padding: 60px 20px 170px 40px
}

.careerWhy .hsRight h1 {
    font-size: 46px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    margin-bottom: 40px
}

.careerWhy .hsRight p {
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.careerWhy .hsRight button {
    width: 60%;
    margin-top: 4vh;
    display: flex;
    border: none;
    border-radius: 10px;
    background: var(--color-red);
    padding: 12px 26px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: var(--color-white);
    font-size: 18px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

@media (max-width: 1536px) {
    .careerWhy {
        margin: 60px 80px;
        height: 450px;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .careerWhy .hsLeft {
        width: 60%;
        border-radius: 10px 0 0 10px
    }

    .careerWhy .hsLeft img {
        width: 750px;
        height: 450px;
        object-fit: cover
    }

    .careerWhy .hsRight {
        height: 450px;
        width: 50%;
        border-radius: 0 10px 10px 0;
        background: #fbc51d33;
        display: flex;
        flex-direction: column;
        padding: 50px 20px 100px 40px
    }

    .careerWhy .hsRight h1 {
        font-size: 36px;
        margin-bottom: 30px
    }

    .careerWhy .hsRight p {
        font-size: 22px
    }

    .careerWhy .hsRight button {
        width: 50%
    }
}

@media (max-width: 1440px) {
    .careerWhy {
        margin: 50px 80px;
        height: 400px;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .careerWhy .hsLeft {
        width: 60%;
        border-radius: 10px 0 0 10px
    }

    .careerWhy .hsLeft img {
        width: 700px;
        height: 400px;
        object-fit: cover
    }

    .careerWhy .hsRight {
        height: 400px;
        width: 60%;
        border-radius: 0 10px 10px 0;
        background: #fbc51d33;
        display: flex;
        flex-direction: column;
        padding: 40px 20px 80px 40px
    }

    .careerWhy .hsRight h1 {
        font-size: 28px;
        margin-bottom: 15px
    }

    .careerWhy .hsRight p {
        font-size: 16px
    }

    .careerWhy .hsRight button {
        width: 65%
    }
}

@media (max-width: 1280px) {
    .careerWhy {
        margin: 40px 60px;
        height: 350px;
        display: flex
    }

    .careerWhy .hsLeft {
        width: 100%;
        border-radius: 10px 10px 0 0
    }

    .careerWhy .hsLeft img {
        width: 100%;
        height: 350px;
        object-fit: cover
    }

    .careerWhy .hsRight {
        width: 100%;
        height: 350px;
        background: #fbc51d33;
        padding: 30px 20px
    }

    .careerWhy .hsRight h1 {
        font-size: 30px;
        margin-bottom: 20px
    }

    .careerWhy .hsRight p {
        font-size: 18px
    }

    .careerWhy .hsRight button {
        width: 50%;
        margin-top: 3vh
    }
}

@media (max-width: 480px) {
    .careerWhy {
        flex-direction: column;
        height: auto;
        margin: 40px 20px
    }

    .careerWhy .hsRight {
        height: 430px;
        width: 100%;
        border-radius: 10px 10px 0 0;
        padding: 20px;
        background: #fbc51d33
    }

    .careerWhy .hsRight h1 {
        font-size: 24px;
        margin-bottom: 20px;
        text-align: left
    }

    .careerWhy .hsRight p {
        text-align: left;
        font-size: 16px
    }

    .careerWhy .hsRight button {
        width: 100%;
        margin-bottom: 0;
        padding: 12px 10px;
        font-size: 14px
    }

    .careerWhy .hsLeft {
        width: 100%;
        border-radius: 0 0 10px 10px
    }

    .careerWhy .hsLeft img {
        width: 100%;
        height: auto;
        border-radius: 0 0 10px 10px
    }
}

.careerNew {
    height: 529px;
    margin: 80px 120px;
    display: flex;
    justify-content: center;
    align-items: center
}

.careerNew .hsLeft {
    width: 50%;
    border-radius: 10px 0 0 10px
}

.careerNew .hsLeft img {
    width: 834px;
    height: 529px;
    object-fit: cover
}

.careerNew .hsRight {
    height: 531.5px;
    width: 60%;
    border-radius: 0 10px 10px 0;
    display: flex;
    flex-direction: column;
    padding: 20px 20px 170px 40px
}

.careerNew .hsRight h1 {
    color: var(--color-red);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    padding-bottom: 3vh
}

.careerNew .hsRight p {
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.careerNew .hsRight button {
    width: 30%;
    margin-top: 4vh;
    display: flex;
    border: none;
    border-radius: 10px;
    background: var(--yellow, #FBC51D);
    padding: 12px 26px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

@media (max-width: 1536px) {
    .careerNew {
        height: 500px;
        margin: 70px 100px
    }

    .careerNew .hsLeft img {
        width: 760px;
        height: 500px
    }

    .careerNew .hsRight {
        height: 500px;
        padding: 20px 20px 140px 30px
    }

    .careerNew .hsRight h1 {
        font-size: 50px;
        padding-bottom: 2.5vh
    }

    .careerNew .hsRight p {
        font-size: 22px
    }

    .careerNew .hsRight button {
        width: 32%;
        font-size: 17px;
        padding: 10px 24px
    }
}

@media (max-width: 1440px) {
    .careerNew {
        height: 470px;
        margin: 60px 80px
    }

    .careerNew .hsLeft img {
        width: 700px;
        height: 470px
    }

    .careerNew .hsRight {
        height: 470px;
        padding: 20px 20px 120px 26px
    }

    .careerNew .hsRight h1 {
        font-size: 46px;
        padding-bottom: 2.3vh
    }

    .careerNew .hsRight p {
        font-size: 20px
    }

    .careerNew .hsRight button {
        width: 34%;
        font-size: 16px;
        padding: 9px 22px
    }
}

@media (max-width: 1280px) {
    .careerNew {
        height: 440px;
        margin: 50px 60px
    }

    .careerNew .hsLeft img {
        width: 640px;
        height: 440px
    }

    .careerNew .hsRight {
        height: 440px;
        padding: 20px 20px 100px 24px
    }

    .careerNew .hsRight h1 {
        font-size: 40px;
        padding-bottom: 2vh
    }

    .careerNew .hsRight p {
        font-size: 18px
    }

    .careerNew .hsRight button {
        width: 36%;
        font-size: 15px;
        padding: 8px 20px
    }
}

@media (max-width: 480px) {
    .careerNew {
        flex-direction: column-reverse;
        height: auto;
        margin: 40px 20px
    }

    .careerNew .hsRight {
        height: 430px;
        width: 100%;
        border-radius: 10px 10px 0 0;
        padding: 20px
    }

    .careerNew .hsRight h1 {
        font-size: 24px;
        margin-bottom: 20px;
        text-align: left;
        padding-bottom: 0
    }

    .careerNew .hsRight p {
        font-size: 16px;
        text-align: left;
        width: 100%
    }

    .careerNew .hsRight button {
        width: 100%;
        margin-bottom: 0;
        padding: 12px 10px;
        font-size: 14px
    }

    .careerNew .hsLeft {
        width: 100%;
        border-radius: 0 0 10px 10px
    }

    .careerNew .hsLeft img {
        width: 100%;
        height: auto;
        border-radius: 0 0 10px 10px
    }
}

.careerSub {
    margin: 80px 123px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left
}

.careerSub .csLeft {
    padding: 50px;
    height: 1035px;
    border-radius: 10px 0 10px 10px;
    background: #fbc51d80
}

.careerSub .csLeft p {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 3vh
}

.careerSub .csLeft p span {
    font-weight: 650
}

.careerSub .csLeft button {
    width: 20%;
    margin-top: 4vh;
    display: flex;
    border: none;
    border-radius: 10px;
    background: var(--color-red);
    padding: 12px 26px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: var(--color-white);
    font-size: 18px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.careerSub .csRight {
    margin-top: -12vh
}

.careerSub .csRight img {
    height: 918px;
    width: 752px;
    object-fit: cover
}

@media (max-width: 1536px) {
    .careerSub {
        margin: 60px 100px 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: left
    }

    .careerSub .csLeft {
        padding: 45px;
        height: 1100px;
        border-radius: 10px 0 10px 10px;
        background: #fbc51d80
    }

    .careerSub .csLeft p {
        font-size: 22px;
        margin-bottom: 0
    }

    .careerSub .csLeft button {
        width: 25%
    }

    .careerSub .csRight {
        margin-top: 0vh
    }

    .careerSub .csRight img {
        height: 1100px;
        width: 700px
    }
}

@media (max-width: 1440px) {
    .careerSub {
        margin: 50px 80px 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: left
    }

    .careerSub .csLeft {
        padding: 40px;
        height: 1000px;
        border-radius: 10px 0 10px 10px;
        background: #fbc51d80
    }

    .careerSub .csLeft p {
        font-size: 20px
    }

    .careerSub .csLeft button {
        width: 30%
    }

    .careerSub .csRight {
        margin-top: .5vh
    }

    .careerSub .csRight img {
        height: 1000px;
        width: 650px
    }
}

@media (max-width: 1280px) {
    .careerSub {
        margin: 40px 60px 15px;
        display: flex
    }

    .careerSub .csLeft {
        padding: 30px;
        height: auto;
        border-radius: 10px 0 10px 10px;
        background: #fbc51d80
    }

    .careerSub .csLeft p {
        font-size: 18px;
        margin-bottom: 2vh
    }

    .careerSub .csLeft button {
        width: 40%
    }

    .careerSub .csRight {
        margin-top: 0vh
    }

    .careerSub .csRight img {
        height: 800px;
        width: 500px
    }
}

@media (max-width: 480px) {
    .careerSub {
        margin: 40px 20px;
        flex-direction: column;
        text-align: left
    }

    .careerSub .csLeft {
        padding: 30px 20px;
        height: auto;
        border-radius: 10px;
        background: #fbc51d80
    }

    .careerSub .csLeft p {
        font-size: 18px
    }

    .careerSub .csLeft button {
        width: 100%;
        font-size: 16px;
        padding: 10px 16px;
        margin-top: 20px
    }

    .careerSub .csRight {
        margin-top: 0
    }

    .careerSub .csRight img {
        width: 320px;
        height: 321px;
        border-radius: 0 0 10px 10px;
        object-fit: cover
    }
}

.careerStep {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    padding: 2rem
}

.careerStep .navigate {
    display: none;
    gap: 10px
}

.careerStep .navigate .slider-icon {
    cursor: pointer !important;
    background-color: #fbc51d !important;
    color: #2c2c2c !important;
    border-radius: 50% !important;
    font-size: 14px !important;
    font-weight: 100 !important;
    padding: 6px 12px !important
}

.careerStep .stepBox {
    width: 530px;
    min-height: 375px;
    height: auto;
    flex-shrink: 0;
    border-radius: 10px;
    border: 2px solid var(--red, #DC143C);
    padding: 2rem;
    transition: all .3s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem
}

.careerStep .stepBox h3 {
    font-size: 32px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center
}

.careerStep .stepBox h3 .tick {
    color: #000;
    margin-right: 10px;
    font-weight: 700
}

.careerStep .stepBox .divider {
    width: 100%;
    height: 3px;
    background: #333c;
    border-radius: 2px;
    transition: background-color .3s ease-in-out
}

.careerStep .stepBox p {
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.careerStep .stepBox:hover {
    background: var(--red, #DC143C);
    border-color: var(--red, #DC143C)
}

.careerStep .stepBox:hover h3,
.careerStep .stepBox:hover h3 .tick {
    color: var(--color-white)
}

.careerStep .stepBox:hover .divider {
    background-color: var(--color-white)
}

.careerStep .stepBox:hover p {
    color: var(--color-white)
}

.careerStep .oeactive {
    display: none;
    justify-content: center !important;
    gap: 8px;
    margin-top: 120px
}

.careerStep .oeactive .oepage {
    height: 13px;
    width: 13px;
    border-radius: 50%;
    background-color: #da1e3733;
    transition: background-color .3s ease
}

.careerStep .oeactive .oepage.oeactive-page {
    background-color: #da1e37
}

@media (max-width: 1536px) {
    .careerStep {
        padding: 2% 4%;
        gap: 1.5rem
    }

    .careerStep .stepBox {
        width: 480px;
        min-height: 340px;
        padding: 1.5rem
    }

    .careerStep .stepBox h3 {
        font-size: 28px
    }

    .careerStep .stepBox p {
        font-size: 22px
    }

    .careerStep .oeactive {
        margin-top: 100px
    }

    .careerStep .oeactive .oepage {
        height: 12px;
        width: 12px
    }
}

@media (max-width: 1440px) {
    .careerStep {
        padding: 2% 3.5%;
        gap: 1.3rem
    }

    .careerStep .stepBox {
        width: 460px;
        min-height: 320px;
        padding: 1.4rem
    }

    .careerStep .stepBox h3 {
        font-size: 26px
    }

    .careerStep .stepBox p {
        font-size: 20px
    }

    .careerStep .oeactive {
        margin-top: 80px
    }

    .careerStep .oeactive .oepage {
        height: 11px;
        width: 11px
    }
}

@media (max-width: 1280px) {
    .careerStep {
        padding: 2% 2.5%;
        gap: 1.1rem
    }

    .careerStep .stepBox {
        width: 440px;
        min-height: 300px;
        padding: 1.2rem
    }

    .careerStep .stepBox h3 {
        font-size: 24px
    }

    .careerStep .stepBox p {
        font-size: 18px
    }

    .careerStep .oeactive {
        margin-top: 60px
    }

    .careerStep .oeactive .oepage {
        height: 10px;
        width: 10px
    }
}

@media (max-width: 480px) {
    .careerStep {
        padding: 1rem 1rem 3rem;
        gap: 1.5rem;
        justify-content: flex-end;
        height: 450px
    }

    .careerStep .navigate {
        display: flex
    }

    .careerStep .navigate .right {
        height: 33px;
        width: 34px;
        display: flex
    }

    .careerStep .stepBox {
        width: 100%;
        min-height: auto;
        padding: 1.5rem;
        gap: .75rem;
        overflow: visible !important
    }

    .careerStep .stepBox h3 {
        font-size: 20px
    }

    .careerStep .stepBox h3 .tick {
        margin-right: 6px
    }

    .careerStep .stepBox .divider {
        height: 2px
    }

    .careerStep .stepBox p {
        font-size: 16px
    }

    .careerStep .oeactive {
        display: flex;
        justify-content: center !important;
        margin-top: 10px;
        margin-right: 25vw
    }

    .careerStep .oeactive .oepage {
        width: 8px;
        height: 8px;
        background: #ccc;
        border-radius: 50%;
        margin: 0 4px
    }
}

.CareerRoles {
    display: flex;
    padding: 3.28% 5.2%;
    justify-content: space-between
}

.CareerRoles .left {
    display: flex;
    flex-direction: column;
    gap: 36px;
    width: 43%
}

.CareerRoles .left .title {
    color: var(--color-red);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.CareerRoles .left .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.CareerRoles .left .image {
    width: 100%;
    height: 1018px
}

.CareerRoles .left .image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.CareerRoles .right {
    width: 55%;
    display: flex;
    flex-wrap: wrap;
    gap: 24px
}

.CareerRoles .right .navigate {
    display: none;
    gap: 10px
}

.CareerRoles .right .navigate .slider-icon {
    cursor: pointer !important;
    background-color: #fbc51d !important;
    color: #2c2c2c !important;
    border-radius: 50% !important;
    font-size: 14px !important;
    font-weight: 100 !important;
    padding: 6px 12px !important
}

.CareerRoles .right .role {
    position: relative;
    width: 48.7%;
    height: 312px;
    overflow: hidden
}

.CareerRoles .right .role .svg-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.CareerRoles .right .role .svg-bg svg {
    width: 100%;
    height: 100%;
    display: block
}

.CareerRoles .right .role .content {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-evenly;
    z-index: 1;
    padding: 20px;
    color: var(--color-white)
}

.CareerRoles .right .role .content .title {
    color: var(--color-white);
    width: 70%;
    font-size: 32px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.CareerRoles .right .role .content .desc {
    color: var(--color-white);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.CareerRoles .right .role .content .icon {
    position: absolute;
    top: 5px;
    right: 10px
}

.CareerRoles .right .role .content .icon img {
    width: 63px;
    height: 63px;
    object-fit: cover
}

@media (max-width: 1536px) {
    .CareerRoles {
        padding: 3% 1%
    }

    .CareerRoles .left {
        gap: 32px;
        width: 45%
    }

    .CareerRoles .left .title {
        font-size: 50px
    }

    .CareerRoles .left .desc {
        font-size: 22px
    }

    .CareerRoles .left .image {
        height: 900px
    }

    .CareerRoles .right {
        width: 52%;
        gap: 20px
    }

    .CareerRoles .right .role {
        height: 290px
    }

    .CareerRoles .right .role .content {
        padding: 18px
    }

    .CareerRoles .right .role .content .title {
        font-size: 28px
    }

    .CareerRoles .right .role .content .desc {
        font-size: 22px
    }

    .CareerRoles .right .role .content .icon img {
        width: 56px;
        height: 56px
    }
}

@media (max-width: 1440px) {
    .CareerRoles {
        padding: 2.8% 1%;
        gap: 10px
    }

    .CareerRoles .left {
        gap: 10px;
        width: 45%
    }

    .CareerRoles .left .title {
        font-size: 44px
    }

    .CareerRoles .left .desc {
        font-size: 20px
    }

    .CareerRoles .left .image {
        height: 800px
    }

    .CareerRoles .right {
        width: 60%;
        gap: 18px
    }

    .CareerRoles .right .role {
        height: 270px
    }

    .CareerRoles .right .role .content {
        padding: 16px
    }

    .CareerRoles .right .role .content .title {
        font-size: 26px
    }

    .CareerRoles .right .role .content .desc {
        font-size: 20px
    }

    .CareerRoles .right .role .content .icon img {
        width: 52px;
        height: 52px
    }
}

@media (max-width: 1280px) {
    .CareerRoles {
        padding: 2.5% 1%
    }

    .CareerRoles .left {
        gap: 24px;
        width: 49%
    }

    .CareerRoles .left .title {
        font-size: 40px
    }

    .CareerRoles .left .desc {
        font-size: 18px
    }

    .CareerRoles .left .image {
        height: 700px
    }

    .CareerRoles .right {
        width: 58%;
        gap: 16px
    }

    .CareerRoles .right .role {
        height: 250px
    }

    .CareerRoles .right .role .content {
        padding: 14px
    }

    .CareerRoles .right .role .content .title {
        font-size: 24px
    }

    .CareerRoles .right .role .content .desc {
        font-size: 18px
    }

    .CareerRoles .right .role .content .icon img {
        width: 48px;
        height: 48px
    }
}

@media (max-width: 480px) {
    .CareerRoles {
        flex-direction: column;
        gap: 5px
    }

    .CareerRoles .left {
        width: 100%;
        gap: 10px
    }

    .CareerRoles .left .title {
        font-size: 24px
    }

    .CareerRoles .left .desc {
        font-size: 16px
    }

    .CareerRoles .left .image {
        height: 321px
    }

    .CareerRoles .right {
        width: 100%;
        gap: 10px
    }

    .CareerRoles .right .navigate {
        display: flex;
        position: relative
    }

    .CareerRoles .right .role {
        width: 100%;
        height: 244px
    }

    .CareerRoles .right .role .content .title {
        font-size: 20px
    }

    .CareerRoles .right .role .content .desc {
        font-size: 18px
    }

    .CareerRoles .right .role .content .icon img {
        width: 42px;
        height: 42px
    }
}

.error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: linear-gradient(to right, #ffecd2, #fcb69f);
    color: #333
}

.error-container {
    text-align: center;
    padding: 2rem;
    background-color: var(--color-white)fffe6;
    border-radius: 20px;
    box-shadow: 0 8px 20px #0000001a
}

.error-code {
    font-size: 8rem;
    font-weight: 800;
    margin-bottom: .5rem;
    color: #ff6f61
}

.error-message {
    font-size: 2rem;
    margin-bottom: 1rem
}

.error-description {
    font-size: 1rem;
    margin-bottom: 2rem;
    color: #666
}

.home-link {
    display: inline-block;
    padding: .75rem 1.5rem;
    background-color: #ff6f61;
    color: var(--color-white);
    text-decoration: none;
    border-radius: 8px;
    transition: background .3s ease
}

.home-link:hover {
    background-color: #e55b4e
}

.siteHero {
    width: 100%;
    height: 61.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: linear-gradient(0deg, #0000008c, #0000008c), url(/assets/sitemap-OOqpXmJC.jpeg) #d3d3d3 0px -452.804px/100% 207.37% no-repeat
}

.siteHero .navlinks {
    display: flex;
    cursor: pointer
}

.siteHero .navlinks ul {
    position: absolute;
    top: 16vh;
    left: 7%;
    display: flex;
    justify-content: space-between;
    list-style: none;
    gap: 10px
}

.siteHero .navlinks ul li {
    color: var(--color-white)
}

.siteHero .navlinks ul li a {
    font-size: 16px;
    color: var(--color-white);
    text-decoration: none
}

.siteHero .navlinks ul .nav {
    padding: 1px 2px
}

.siteHero .navlinks ul .nav img {
    width: 24px;
    height: 24px
}

.siteHero h1 {
    color: var(--color-white);
    text-align: center;
    text-shadow: 0px .21vw .21vw rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.92vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

@media (max-width: 1536px) {
    .siteHero {
        height: 58vh;
        background-size: cover;
        background-position: center
    }

    .siteHero .navlinks ul {
        top: 18vh;
        left: 6%;
        gap: 8px
    }

    .siteHero .navlinks ul li a {
        font-size: 15px
    }

    .siteHero .navlinks ul .nav {
        padding: 2px 3px
    }

    .siteHero .navlinks ul .nav img {
        width: 22px;
        height: 22px
    }

    .siteHero h1 {
        font-size: 2.5vw;
        text-shadow: 0px .18vw .18vw rgba(0, 0, 0, .3)
    }
}

@media (max-width: 1440px) {
    .siteHero {
        height: 55vh;
        background-size: cover
    }

    .siteHero .navlinks ul {
        top: 18vh;
        left: 5%;
        gap: 7px
    }

    .siteHero .navlinks ul li a {
        font-size: 14px
    }

    .siteHero .navlinks ul .nav {
        padding: 2px
    }

    .siteHero .navlinks ul .nav img {
        width: 20px;
        height: 20px
    }

    .siteHero h1 {
        font-size: 2.2vw;
        text-shadow: 0px .15vw .15vw rgba(0, 0, 0, .3)
    }
}

@media (max-width: 1280px) {
    .siteHero {
        height: 50vh;
        background-size: cover
    }

    .siteHero .navlinks ul {
        top: 18vh;
        left: 4%;
        gap: 6px
    }

    .siteHero .navlinks ul li a {
        font-size: 13px
    }

    .siteHero .navlinks ul .nav {
        padding: 1px
    }

    .siteHero .navlinks ul .nav img {
        width: 18px;
        height: 18px
    }

    .siteHero h1 {
        font-size: 2vw;
        text-shadow: 0px .12vw .12vw rgba(0, 0, 0, .3)
    }
}

@media (max-width: 480px) {
    .siteHero {
        height: 25vh;
        padding: 40px 20px;
        background: linear-gradient(0deg, #0000008c, #0000008c), url(/assets/sitemap-OOqpXmJC.jpeg) #d3d3d3 center/cover no-repeat
    }

    .siteHero .navlinks ul {
        padding: 2%;
        margin-left: -4%;
        top: 12%;
        gap: 5px
    }

    .siteHero .navlinks ul li a {
        font-size: 14px
    }

    .siteHero .navlinks ul .nav {
        padding: 0;
        scale: .8
    }

    .siteHero h1 {
        font-size: 6vw
    }
}

.siteMain {
    padding: 2rem;
    color: #d0011b;
}

.siteMain a,
.siteMain a:link,
.siteMain a:visited,
.siteMain a:active {
    color: #d0011b;
    text-decoration: none
}

.siteMain a:hover {
    color: #a10015
}

.siteMain .container {
    max-width: 1200px;
    margin: auto
}

.siteMain .mainList {
    list-style: none;
    padding: 0
}

.siteMain .mainList>li {
    margin-bottom: 1.5rem
}

.siteMain .mainList>li>a,
.siteMain .mainList>li>span {
    font-weight: 700;
    font-size: 1.1rem;
    display: inline-block;
    margin-bottom: .5rem
}

.siteMain .mainList>li .submenu,
.siteMain .mainList>li .subLinks {
    margin-left: 1rem;
    margin-top: .5rem;
    color: #000
}

.siteMain .mainList>li .submenu ul,
.siteMain .mainList>li .subLinks ul {
    list-style: disc;
    margin-left: 1.5rem;
    margin-bottom: 1rem
}

.siteMain .mainList>li .submenu ul li,
.siteMain .mainList>li .subLinks ul li {
    margin-bottom: .25rem
}

.siteMain .mainList>li .submenu ul li a,
.siteMain .mainList>li .subLinks ul li a {
    font-size: .95rem;
    color: #333
}

.siteMain .mainList>li .submenu ul li a:hover,
.siteMain .mainList>li .subLinks ul li a:hover {
    color: #000
}

.siteMain .mainList>li .submenu ul li strong,
.siteMain .mainList>li .subLinks ul li strong {
    display: block;
    margin-top: 1rem;
    color: #000;
    font-weight: 600
}

.siteMain .mainList>li .submenu li,
.siteMain .mainList>li .subLinks li {
    font-size: .95rem
}

.BlogCategoryHero .hero {
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 58.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.BlogCategoryHero .hero .bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.BlogCategoryHero .hero .navlinks {
    z-index: 1;
    display: flex;
    cursor: pointer
}

.BlogCategoryHero .hero .navlinks ul {
    position: absolute;
    top: 6vh;
    left: 7%;
    display: flex;
    justify-content: space-between;
    list-style: none;
    gap: 10px
}

.BlogCategoryHero .hero .navlinks ul li {
    color: var(--color-white)
}

.BlogCategoryHero .hero .navlinks ul li a {
    font-size: 16px;
    color: var(--color-white);
    text-decoration: none
}

.BlogCategoryHero .hero .navlinks ul .nav {
    padding: 1px 2px
}

.BlogCategoryHero .hero .navlinks ul .nav img {
    width: 24px;
    height: 24px
}

.BlogCategoryHero .hero .content {
    z-index: 3
}

.BlogCategoryHero .hero .content h1 {
    z-index: 1;
    color: var(--color-white);
    text-align: center;
    text-shadow: 0px .21vw .21vw rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.92vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

@media (max-width: 480px) {
    .BlogCategoryHero .hero {
        height: 30vh
    }

    .BlogCategoryHero .hero .navlinks ul {
        top: 2vh;
        left: 5%;
        gap: 5px
    }

    .BlogCategoryHero .hero .navlinks ul li,
    .BlogCategoryHero .hero .navlinks ul li a {
        font-size: 12px
    }

    .BlogCategoryHero .hero .navlinks ul .nav {
        padding: 0 1px;
        scale: .6
    }

    .BlogCategoryHero .hero .content h1 {
        font-size: 6vw;
        padding: 0 10px
    }
}

.BlogCategoryMain {
    display: flex;
    padding: 3.28% 5.2%;
    gap: 40px
}

.BlogCategoryMain .left {
    width: 30%;
    display: flex;
    gap: 40px;
    flex-direction: column
}

.BlogCategoryMain .left .left_top {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%
}

.BlogCategoryMain .left .left_top .search,
.BlogCategoryMain .left .left_top .searchYear,
.BlogCategoryMain .left .left_top .searchCategory {
    height: 60px;
    width: 100%;
    display: flex;
    padding: 10px;
    border-radius: 10px;
    background: #fbc51d80;
    align-items: center
}

.BlogCategoryMain .left .left_top .search img,
.BlogCategoryMain .left .left_top .searchYear img,
.BlogCategoryMain .left .left_top .searchCategory img {
    width: 16px;
    height: 16px;
    object-fit: cover
}

.BlogCategoryMain .left .left_top .search input,
.BlogCategoryMain .left .left_top .search select,
.BlogCategoryMain .left .left_top .searchYear input,
.BlogCategoryMain .left .left_top .searchYear select,
.BlogCategoryMain .left .left_top .searchCategory input,
.BlogCategoryMain .left .left_top .searchCategory select {
    background-color: transparent;
    border: none;
    width: 95%
}

.BlogCategoryMain .left .left_top .search input,
.BlogCategoryMain .left .left_top .searchYear input,
.BlogCategoryMain .left .left_top .searchCategory input {
    padding: 10px
}

.BlogCategoryMain .left .left_top .search input:focus,
.BlogCategoryMain .left .left_top .searchYear input:focus,
.BlogCategoryMain .left .left_top .searchCategory input:focus {
    outline: none
}

.BlogCategoryMain .left .left_top .search select,
.BlogCategoryMain .left .left_top .searchYear select,
.BlogCategoryMain .left .left_top .searchCategory select {
    width: 100%;
    letter-spacing: 2px;
    border: none
}

.BlogCategoryMain .left .left_top .search select:focus,
.BlogCategoryMain .left .left_top .searchYear select:focus,
.BlogCategoryMain .left .left_top .searchCategory select:focus {
    outline: none
}

.BlogCategoryMain .left .left_bottom {
    border-radius: 10px;
    box-shadow: 0 4px 10px #00000040;
    width: 100%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 25px
}

.BlogCategoryMain .left .left_bottom .recentTitle {
    font-size: 32px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.BlogCategoryMain .left .left_bottom hr {
    height: 1px;
    background: #333
}

.BlogCategoryMain .left .left_bottom .recent {
    border-radius: 10px;
    width: 100%;
    display: flex;
    height: 147px;
    padding: 10px;
    cursor: pointer
}

.BlogCategoryMain .left .left_bottom .recent:hover {
    background: #fbc51d26
}

.BlogCategoryMain .left .left_bottom .recent .image {
    padding: 10px;
    width: 100%;
    height: 100%
}

.BlogCategoryMain .left .left_bottom .recent .image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.BlogCategoryMain .left .left_bottom .recent .rdesc {
    padding: 10px;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize
}

.BlogCategoryMain .right {
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 80px
}

.BlogCategoryMain .right .postsContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 20px
}

.BlogCategoryMain .right .postsContainer .post {
    gap: 20px;
    width: 49%;
    height: 604px;
    display: flex;
    flex-direction: column
}

.BlogCategoryMain .right .postsContainer .post .image {
    height: 300px;
    width: 100%
}

.BlogCategoryMain .right .postsContainer .post .image img {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.BlogCategoryMain .right .postsContainer .post .title {
    padding: 1% 4%;
    font-size: 32px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.BlogCategoryMain .right .postsContainer .post .desc {
    padding: 1% 4%;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.BlogCategoryMain .right .postsContainer .post .button {
    margin-left: 4%;
    cursor: pointer;
    display: flex;
    width: 30%;
    height: 39.078px;
    border-radius: 10px;
    background: var(--red, #dc143c);
    padding: 12px 26px;
    justify-content: center;
    align-items: center;
    color: var(--color-white);
    gap: 10px;
    flex-shrink: 0
}

.BlogCategoryMain .right .postsContainer .post:hover {
    border-radius: 10px;
    background: var(--color-white);
    box-shadow: 0 4px 10px #00000040
}

.BlogCategoryMain .right .totalpages {
    padding-left: 40px;
    justify-content: start;
    display: flex;
    width: 80%
}

.BlogCategoryMain .right .totalpages .page {
    display: flex;
    gap: 20px
}

.BlogCategoryMain .right .totalpages .page button {
    display: flex;
    border: none;
    background: var(--color-white);
    padding: 5px 10px;
    box-shadow: 0 0 5px #00000040;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize
}

.BlogCategoryMain .right .totalpages .page button.active {
    background-color: #fbc51d
}

.BlogPostHero .hero {
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 58.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.BlogPostHero .hero .bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.BlogPostHero .hero .navlinks {
    z-index: 1;
    display: flex;
    cursor: pointer
}

.BlogPostHero .hero .navlinks ul {
    position: absolute;
    top: 6vh;
    left: 7%;
    display: flex;
    justify-content: space-between;
    list-style: none;
    gap: 10px
}

.BlogPostHero .hero .navlinks ul li {
    color: var(--color-white)
}

.BlogPostHero .hero .navlinks ul li a {
    font-size: 16px;
    color: var(--color-white);
    text-decoration: none
}

.BlogPostHero .hero .navlinks ul .nav {
    padding: 1px 2px
}

.BlogPostHero .hero .navlinks ul .nav img {
    width: 24px;
    height: 24px
}

.BlogPostHero .hero .content {
    z-index: 3;
    width: 60%
}

.BlogPostHero .hero .content h1 {
    z-index: 1;
    color: var(--color-white);
    text-align: center;
    text-shadow: 0px .21vw .21vw rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.92vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.BlogPostHero .hero .content p {
    color: var(--color-white);
    text-align: center;
    font-size: 1.3vw;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

@media (max-width: 480px) {
    .BlogPostHero .hero {
        height: 30vh
    }

    .BlogPostHero .hero .navlinks ul {
        top: 2vh;
        left: 5%;
        gap: 5px
    }

    .BlogPostHero .hero .navlinks ul li,
    .BlogPostHero .hero .navlinks ul li a {
        font-size: 12px
    }

    .BlogPostHero .hero .navlinks ul .nav {
        padding: 0 1px;
        scale: .6
    }

    .BlogPostHero .hero .content {
        width: 100%
    }

    .BlogPostHero .hero .content h1 {
        font-size: 6vw;
        padding: 0 10px
    }
}

.BlogPostMain {
    display: flex;
    padding: 3.28% 5.2%;
    gap: 40px
}

.BlogPostMain .left {
    width: 30%;
    display: flex;
    gap: 40px;
    flex-direction: column
}

.BlogPostMain .left .left_top {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%
}

.BlogPostMain .left .left_top .search,
.BlogPostMain .left .left_top .searchYear,
.BlogPostMain .left .left_top .searchCategory {
    height: 60px;
    width: 100%;
    display: flex;
    padding: 10px;
    border-radius: 10px;
    background: #fbc51d80;
    align-items: center
}

.BlogPostMain .left .left_top .search img,
.BlogPostMain .left .left_top .searchYear img,
.BlogPostMain .left .left_top .searchCategory img {
    width: 16px;
    height: 16px;
    object-fit: cover
}

.BlogPostMain .left .left_top .search input,
.BlogPostMain .left .left_top .search select,
.BlogPostMain .left .left_top .searchYear input,
.BlogPostMain .left .left_top .searchYear select,
.BlogPostMain .left .left_top .searchCategory input,
.BlogPostMain .left .left_top .searchCategory select {
    background-color: transparent;
    border: none;
    width: 95%
}

.BlogPostMain .left .left_top .search input,
.BlogPostMain .left .left_top .searchYear input,
.BlogPostMain .left .left_top .searchCategory input {
    padding: 10px
}

.BlogPostMain .left .left_top .search input:focus,
.BlogPostMain .left .left_top .searchYear input:focus,
.BlogPostMain .left .left_top .searchCategory input:focus {
    outline: none
}

.BlogPostMain .left .left_top .search select,
.BlogPostMain .left .left_top .searchYear select,
.BlogPostMain .left .left_top .searchCategory select {
    width: 100%;
    letter-spacing: 2px;
    border: none
}

.BlogPostMain .left .left_top .search select:focus,
.BlogPostMain .left .left_top .searchYear select:focus,
.BlogPostMain .left .left_top .searchCategory select:focus {
    outline: none
}

.BlogPostMain .left .left_bottom {
    border-radius: 10px;
    box-shadow: 0 4px 10px #00000040;
    width: 100%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 25px
}

.BlogPostMain .left .left_bottom .recentTitle {
    font-size: 32px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.BlogPostMain .left .left_bottom hr {
    height: 1px;
    background: #333
}

.BlogPostMain .left .left_bottom .recent {
    border-radius: 10px;
    width: 100%;
    display: flex;
    height: 147px;
    padding: 10px;
    cursor: pointer
}

.BlogPostMain .left .left_bottom .recent:hover {
    background: #fbc51d26
}

.BlogPostMain .left .left_bottom .recent .image {
    padding: 10px;
    width: 100%;
    height: 100%
}

.BlogPostMain .left .left_bottom .recent .image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.BlogPostMain .left .left_bottom .recent .rdesc {
    padding: 10px;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize
}

.BlogPostMain .right {
    width: 68%;
    display: flex;
    flex-direction: column;
    gap: 80px
}

.BlogPostMain .right .postsContainer {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px
}

.BlogPostMain .right .postsContainer .BlogImage {
    width: 100%;
    height: 62vh
}

.BlogPostMain .right .postsContainer .BlogImage img {
    width: 100%;
    height: 100%;
    object-fit: fill
}

.BlogPostMain .right .postsContainer .BlogDesc {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-left: 20px
}

.chat-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999
}

.chat-container .chat-icon {
    scale: .8;
    cursor: pointer;
    transition: transform .2s ease
}

.chat-container .chat-icon:hover {
    transform: scale(1.05)
}

.chat-container .chat-ui {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 23vw;
    height: 60vh;
    background: var(--color-white);
    box-shadow: 0 4px 20px #0000004d;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.chat-container .chat-ui .chat-header {
    background: var(--red, linear-gradient(102deg, #fbc51d 1.21%, rgba(251, 197, 29, .5) 100%));
    color: #000;
    padding: 2px 40px 2px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative
}

.chat-container .chat-ui .chat-header h4 {
    margin: 0;
    font-size: 1.1rem
}

.chat-container .chat-ui .chat-header img {
    width: 70px;
    height: 68px;
    object-fit: cover
}

.chat-container .chat-ui .chat-header .chat-close {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 1.2rem;
    cursor: pointer;
    color: #000
}

.chat-container .chat-ui .chat-header .chat-minimize {
    position: absolute;
    top: 0;
    right: 33px;
    font-size: 1.2rem;
    cursor: pointer;
    color: #000
}

.chat-container .chat-ui .chat-messages {
    flex: 1;
    padding: 15px;
    background: var(--color-white);
    overflow-y: auto;
    display: flex;
    flex-direction: column
}

.chat-container .chat-ui .chat-messages::-webkit-scrollbar {
    width: 4px;
    background-color: #b70a2d
}

.chat-container .chat-ui .chat-messages::-webkit-scrollbar-thumb {
    background-color: #fbc51d
}

.chat-container .chat-ui .chat-messages .message {
    max-width: max-content;
    margin-bottom: 10px;
    padding: 10px 20px;
    border-radius: 5px;
    position: relative;
    font-size: .9rem;
    color: #333
}

.chat-container .chat-ui .chat-messages .message.bot {
    background: var(--red, linear-gradient(102deg, #fbc51d 1.21%, rgba(251, 197, 29, .5) 100%));
    align-self: flex-start;
    border-bottom-left-radius: 0
}

.chat-container .chat-ui .chat-messages .message.user {
    background: var(--red, linear-gradient(102deg, #fbc51d 1.21%, rgba(251, 197, 29, .5) 100%));
    align-self: flex-end;
    border-bottom-right-radius: 0
}

.chat-container .chat-ui .chat-input {
    display: flex;
    align-items: center;
    border-top: 1px solid #ccc;
    padding: 10px;
    background: var(--color-white)
}

.chat-container .chat-ui .chat-input input {
    flex: 1;
    border: 1px solid #fbc51d;
    border-radius: 5px;
    padding: 10px;
    font-size: .9rem;
    outline: none
}

.chat-container .chat-ui .chat-input img {
    width: 30px;
    height: 30px;
    margin-left: 10px;
    cursor: pointer
}

@media (max-width: 1536px) {
    .chat-container {
        bottom: 10px;
        right: 10px
    }

    .chat-container .chat-icon {
        position: absolute;
        bottom: -20px;
        right: -20px;
        scale: .6
    }

    .chat-container .chat-ui {
        width: 20vw;
        height: 55vh
    }

    .chat-container .chat-ui .chat-header {
        padding: 2px 36px 2px 10px
    }

    .chat-container .chat-ui .chat-header h4 {
        font-size: 1rem
    }

    .chat-container .chat-ui .chat-header img {
        width: 60px;
        height: 58px
    }

    .chat-container .chat-ui .chat-header .chat-close,
    .chat-container .chat-ui .chat-header .chat-minimize {
        font-size: 1.1rem
    }

    .chat-container .chat-ui .chat-messages {
        padding: 12px
    }

    .chat-container .chat-ui .chat-messages .message {
        font-size: .85rem;
        padding: 8px 16px
    }

    .chat-container .chat-ui .chat-input {
        padding: 8px
    }

    .chat-container .chat-ui .chat-input input {
        font-size: .85rem;
        padding: 8px
    }

    .chat-container .chat-ui .chat-input img {
        width: 26px;
        height: 26px
    }
}

@media (max-width: 1440px) {
    .chat-container .chat-icon {
        position: absolute;
        bottom: -40px;
        right: -40px;
        scale: .5
    }

    .chat-container .chat-ui {
        width: 19vw;
        height: 50vh
    }

    .chat-container .chat-ui .chat-header {
        padding: 2px 32px 2px 10px
    }

    .chat-container .chat-ui .chat-header h4 {
        font-size: .95rem
    }

    .chat-container .chat-ui .chat-header img {
        width: 55px;
        height: 53px
    }

    .chat-container .chat-ui .chat-header .chat-close,
    .chat-container .chat-ui .chat-header .chat-minimize {
        font-size: 1rem
    }

    .chat-container .chat-ui .chat-messages {
        padding: 10px
    }

    .chat-container .chat-ui .chat-messages .message {
        font-size: .8rem;
        padding: 7px 14px
    }

    .chat-container .chat-ui .chat-input {
        padding: 7px
    }

    .chat-container .chat-ui .chat-input input {
        font-size: .8rem;
        padding: 7px
    }

    .chat-container .chat-ui .chat-input img {
        width: 24px;
        height: 24px
    }
}

@media (max-width: 1280px) {
    .chat-container .chat-icon {
        position: absolute;
        bottom: -40px;
        right: -40px;
        scale: .5
    }

    .chat-container .chat-ui {
        width: 18vw;
        height: 45vh
    }

    .chat-container .chat-ui .chat-header {
        padding: 2px 28px 2px 10px
    }

    .chat-container .chat-ui .chat-header h4 {
        font-size: .9rem
    }

    .chat-container .chat-ui .chat-header img {
        width: 40px;
        height: 38px
    }

    .chat-container .chat-ui .chat-header .chat-close,
    .chat-container .chat-ui .chat-header .chat-minimize {
        font-size: .95rem
    }

    .chat-container .chat-ui .chat-messages {
        padding: 8px
    }

    .chat-container .chat-ui .chat-messages .message {
        font-size: .75rem;
        padding: 6px 12px
    }

    .chat-container .chat-ui .chat-input {
        padding: 6px
    }

    .chat-container .chat-ui .chat-input input {
        font-size: .75rem;
        padding: 6px
    }

    .chat-container .chat-ui .chat-input img {
        width: 22px;
        height: 22px
    }
}

@media (max-width: 480px) {
    .chat-container .chat-icon {
        width: 100px;
        bottom: -10px;
        left: -80px
    }

    .chat-container .chat-ui {
        width: 300px;
        height: 400px
    }
}

.SingleAward {
    padding: 3.48% 5.2%;
    display: flex;
    flex-direction: column
}

.SingleAward .title {
    color: var(--red, #dc143c);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.SingleAward .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.giftForm .giftForm__image {
    width: 100%;
    background: url(/assets/campaign_banner-CeQBC7d2.jpg) no-repeat;
    background-size: cover;
    position: relative;
    height: 95vh;
    display: flex;
    justify-content: end;
    background-position: center
}

.giftForm .enquiry-form .input-group select.input-field {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%227%22%20viewBox%3D%220%200%2010%207%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M1%201L5%205L9%201%22%20stroke%3D%22%232C2C2C%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E);
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 12px
}

@media (max-width: 1536px) {
    .giftForm {
        margin: 60px 80px;
        padding: 30px
    }

    .giftForm .giftForm__container {
        height: auto
    }

    .giftForm .giftForm__form h2 {
        font-size: 30px
    }

    .giftForm .giftForm__form form .form-group label {
        font-size: 18px
    }

    .giftForm .giftForm__form form .form-group input {
        height: 56px;
        font-size: 15px
    }

    .giftForm .giftForm__form form .newbutton {
        font-size: 15px;
        height: 48px
    }
}

@media (max-width: 1440px) {
    .giftForm {
        margin: 50px 60px
    }

    .giftForm .giftForm__form h2 {
        font-size: 25px
    }

    .giftForm .giftForm__form form .form-group label {
        font-size: 17px
    }

    .giftForm .giftForm__form form .form-group input {
        height: 54px;
        font-size: 14px
    }

    .giftForm .giftForm__form form .newbutton {
        font-size: 14px;
        height: 46px
    }
}

@media (max-width: 1280px) {
    .giftForm {
        margin: 40px
    }

    .giftForm .giftForm__container {
        height: auto
    }

    .giftForm .giftForm__image,
    .giftForm .giftForm__form {
        width: 100%
    }

    .giftForm .giftForm__form {
        padding: 15px
    }

    .giftForm .giftForm__form h2 {
        font-size: 18px
    }

    .giftForm .giftForm__form .input-group {
        display: flex;
        flex-direction: column;
        gap: 8px
    }

    .giftForm .giftForm__form .input-group label {
        color: var(--GREY-COLOR, #2c2c2c);

        font-size: 15px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        letter-spacing: .8px
    }

    .giftForm .giftForm__form .input-group .input-field {
        padding: 12px 15px;
        color: var(--GREY-COLOR, #2c2c2c);
        height: 40px;

        font-size: 14px;
        font-style: normal;
        background-color: transparent;
        font-weight: 500;
        line-height: normal;
        border-radius: 10px;
        border: 1px solid rgba(255, 30, 50, .3);
        outline: none;
        transition: border .3s ease
    }

    .giftForm .giftForm__form .input-group .input-field:focus {
        border-color: #f4a261
    }

    .giftForm .giftForm__form form {
        gap: 12px
    }

    .giftForm .giftForm__form form .form-group label {
        font-size: 16px
    }

    .giftForm .giftForm__form form .form-group input {
        height: 50px;
        font-size: 14px
    }

    .giftForm .giftForm__form form .privacy {
        width: 80%;
        font-size: 11px
    }

    .giftForm .giftForm__form form .newbutton {
        font-size: 14px;
        height: 44px
    }

    .whiteDiv {
        background-color: var(--color-white);
        position: absolute;
        width: 35% !important;
        margin: 25px 30px
    }
}

@media (max-width: 480px) {
    .giftForm {
        flex-direction: column-reverse;
        margin: 0;
        padding: 0
    }

    .giftForm .giftForm__container {
        flex-direction: column-reverse;
        height: auto
    }

    .giftForm .giftForm__image {
        width: 100%;
        height: 75vh;
        background: url(/assets/campaign_banner_mobile-CCswASOf.jpg) no-repeat;
        background-position: center;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: start
    }

    .giftForm .enquiry-form {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 30px
    }

    .giftForm .enquiry-form h2 {
        color: var(--color-red);
        text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
        font-family: 'Sora-SemiBold';
        font-size: 35px;
        font-style: normal;
        font-weight: 200;
        line-height: normal;
        text-transform: uppercase;
        margin-bottom: 40px
    }

    .giftForm .enquiry-form .input-group {
        display: flex;
        flex-direction: column;
        gap: 10px
    }

    .giftForm .enquiry-form .input-group label {
        color: var(--GREY-COLOR, #2c2c2c);

        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        letter-spacing: .8px
    }

    .giftForm .enquiry-form .input-group .input-field {
        padding: 12px 15px;
        color: var(--GREY-COLOR, #2c2c2c);
        height: 40px;

        font-size: 16px;
        font-style: normal;
        background-color: transparent;
        font-weight: 500;
        line-height: normal;
        border-radius: 10px;
        border: 1px solid rgba(255, 30, 50, .3);
        outline: none;
        transition: border .3s ease
    }

    .giftForm .enquiry-form .input-group .input-field:focus {
        border-color: #f4a261
    }

    .giftForm .enquiry-form .input-group select.input-field {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%227%22%20viewBox%3D%220%200%2010%207%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M1%201L5%205L9%201%22%20stroke%3D%22%232C2C2C%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E);
        background-repeat: no-repeat;
        background-position: right 20px center;
        background-size: 12px
    }

    .giftForm .enquiry-form .checkbox-container {
        font-size: 12px;
        color: #666;
        line-height: 1.4;
        text-align: center;
        margin-top: 10px
    }

    .giftForm .enquiry-form .checkbox-container span {
        color: #666;
        text-decoration: underline;
        cursor: pointer
    }

    .giftForm .enquiry-form .buttonAlign {
        display: flex;
        justify-content: center;
        align-items: center
    }

    .giftForm .enquiry-form .animated-button {
        width: 187px;
        height: 50px;
        padding: 12px 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #ffc107;
        color: #000;
        font-weight: 600;
        font-size: 16px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        gap: 10px;
        flex-shrink: 0;
        position: relative;
        overflow: hidden;
        transition: background-color .3s ease
    }

    .giftForm .enquiry-form .animated-button:hover {
        background-color: #e6b800
    }

    .giftForm .enquiry-form .animated-button .btn-background {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #0000001a;
        z-index: 0
    }

    .giftForm .enquiry-form .animated-button .btn-text {
        z-index: 1;
        position: relative
    }

    .giftForm .enquiry-form .input-otp-field {
        padding: 5px 12px;
        color: var(--GREY-COLOR, #2c2c2c);
        height: 40px;

        font-size: 16px;
        font-style: normal;
        background-color: transparent;
        font-weight: 200;
        line-height: normal;
        border-radius: 10px;
        border: 1px solid rgba(255, 30, 50, .3);
        outline: none;
        transition: border .3s ease;
        margin: 10px 5px;
        width: 13%
    }

    .giftForm .enquiry-form .input-otp-field:focus {
        border-color: #f4a261
    }

    .giftForm .giftForm__form {
        width: 100%;
        padding: 10px
    }

    .giftForm .giftForm__form h2 {
        font-size: 24px;
        margin-bottom: 24px;
        text-align: center
    }

    .giftForm .giftForm__form form {
        gap: 10px
    }

    .giftForm .giftForm__form form .form-group {
        gap: 8px
    }

    .giftForm .giftForm__form form .form-group label {
        font-size: 16px
    }

    .giftForm .giftForm__form form .form-group input,
    .giftForm .giftForm__form form .form-group select {
        font-size: 14px;
        height: 48px
    }

    .giftForm .giftForm__form form .privacy {
        font-size: 10px;
        width: 100%
    }

    .giftForm .giftForm__form form button {
        width: 100%;
        height: 45px;
        font-size: 14px
    }

    .thankYouDiv h1 {
        font-size: 40px;

        text-align: center
    }

    .thankYouDiv h3 {
        font-size: 20px;
        font-weight: 400;

        padding-top: 20px;
        text-align: center
    }

    .thankYouDiv p {
        font-size: 14px;
        font-weight: 400;

        padding-top: 20px;
        text-align: center
    }

    .whiteDiv {
        background-color: var(--color-white);
        position: absolute;
        width: 95%;
        margin: 0
    }

    .giftForm__form {
        background-color: #fbc51d12;
        width: 100% !important
    }
}

.BvocCourses {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.08vw;
    padding: 2.08vw 6.25vw
}

.BvocCourses .heading {
    color: var(--color-red);
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.92vw;
    font-weight: 400;
    text-transform: uppercase
}

.BvocCourses .categories {
    gap: 59px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.BvocCourses .categories .category {
    width: 96%;
    display: flex;
    flex-direction: row;
    gap: 0;
    align-items: center
}

.BvocCourses .categories .category .image-container {
    position: relative;
    width: 50%;
    height: auto;
    overflow: hidden
}

.BvocCourses .categories .category .image-container .main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .5s ease;
    filter: grayscale(0%)
}

.BvocCourses .categories .category .image-container .main-img:hover {
    filter: grayscale(100%);
    transform: scale(1.05)
}

.BvocCourses .categories .category .image-container .arrow {
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.25vw;
    height: 6.25vw;
    right: -1vw;
    top: -.9vw;
    border-radius: 50%;
    background-color: #fbc51d;
    position: absolute;
    transition: all .5s ease
}

.BvocCourses .categories .category .image-container .arrow:hover {
    scale: 1.1;
    background-color: #fbc31dbe
}

.BvocCourses .categories .category .image-container .arrow img {
    width: 45%;
    height: 45%;
    object-fit: cover;
    display: none
}

.BvocCourses .categories .category .top {
    padding: 5vw;
    width: 50%;
    border-radius: 0;
    box-shadow: 0 4px 14px #0000001a;
    display: flex;
    flex-direction: column
}

.BvocCourses .categories .category .top .title {
    color: var(--color-white);
    font-weight: 650;
    font-size: 1.65rem;
    margin-bottom: 15px;
    letter-spacing: 1px
}

.BvocCourses .categories .category .top .desc {
    color: var(--color-white);
    font-weight: 500;
    font-size: 1.25rem;
    margin-bottom: 4.63vh
}

.BvocCourses .categories .category .top .ulbox {
    border-radius: 20px;
    background: var(--color-white);
    margin: .52vw;
    padding: 1.56vw;
    width: 23.59vw;
    height: 62.96vh
}

.BvocCourses .categories .category .top .ulbox ul {
    list-style: disc;
    font-weight: 650;
    font-size: 1.25vw;
    padding-left: 2.08vw
}

.BvocCourses .categories .category .top .ulbox ul li {
    margin-bottom: 2.78vh
}

.BvocCourses .top.variant-1 {
    border-radius: 20px 20px 0 0;
    background: linear-gradient(74deg, #3027a0 20.93%, #6a669d80 105.37%);
    box-shadow: inset 0 4px 14px #00000040
}

.BvocCourses .top.variant-2 {
    border-radius: 20px 20px 0 0;
    background: linear-gradient(91deg, #378509 5.36%, #72bf4480 175.45%);
    box-shadow: inset 0 4px 14px #00000040
}

.BvocCourses .top.variant-3 {
    border-radius: 20px 20px 0 0;
    background: linear-gradient(102deg, #d33519 2.67%, #ff634780 132.1%);
    box-shadow: inset 0 4px 14px #00000040
}

.BvocCourses .top.variant-4 {
    border-radius: 20px 20px 0 0;
    background: linear-gradient(106deg, #075580 3.57%, #2a98d4 119.99%);
    box-shadow: inset 0 4px 14px #00000040
}

.BvocCourses .top.variant-5 {
    border-radius: 20px 20px 0 0;
    background: linear-gradient(101deg, #b30225 1.12%, #dc143c80 126.08%);
    box-shadow: inset 0 4px 14px #00000040
}

.BvocCourses .top.variant-6 {
    border-radius: 20px 20px 0 0;
    background: var(--darkblue, linear-gradient(249deg, #1c325b 1.17%, #3b6ac1 59.08%));
    box-shadow: inset 0 4px 14px #00000040
}

.BvocCourses .top.variant-7 {
    border-radius: 20px 20px 0 0;
    background: linear-gradient(74deg, #3027a0 20.93%, #6a669d80 105.37%);
    box-shadow: inset 0 4px 14px #00000040
}

.BvocCourses .top.variant-8 {
    border-radius: 20px 20px 0 0;
    background: linear-gradient(91deg, #378509 5.36%, #72bf4480 175.45%);
    box-shadow: inset 0 4px 14px #00000040
}

.BvocCourses .top.variant-9 {
    border-radius: 20px 20px 0 0;
    background: linear-gradient(102deg, #d33519 2.67%, #ff634780 132.1%);
    box-shadow: inset 0 4px 14px #00000040
}

.BvocCourses .bottom {
    font-size: 1.5rem;
    justify-content: center;
    font-weight: 650
}

.BvocCourses button {
    display: flex;
    padding: 15px 30px;
    font-size: 1.5rem;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: none;
    border-radius: 10px;
    background: var(--color-red);
    color: var(--color-white);
    font-weight: 650;
    text-transform: uppercase;
    transition: background .3s ease, transform .3s ease;
    cursor: pointer
}

.BvocCourses button:hover {
    background: #b01031
}

@media (max-width: 480px) {
    .BvocCourses {
        padding: 20px 15px;
        gap: 4vw
    }

    .BvocCourses .heading {
        font-size: 32px
    }

    .BvocCourses .categories {
        gap: 30px
    }

    .BvocCourses .categories .category {
        width: 100%;
        flex-direction: column
    }

    .BvocCourses .categories .category .image-container {
        width: 100%;
        height: 220px
    }

    .BvocCourses .categories .category .image-container .arrow {
        width: 60px;
        height: 60px;
        top: -4%;
        right: -.5%
    }

    .BvocCourses .categories .category .image-container .arrow img {
        width: 50%;
        height: 50%
    }

    .BvocCourses .categories .category .top {
        width: 100%;
        height: auto;
        padding: 20px;
        justify-content: center;
        border-radius: 0 0 20px 20px
    }

    .BvocCourses .categories .category .top .desc {
        margin-bottom: 5px
    }

    .BvocCourses .categories .category .top .ulbox {
        width: 100%;
        height: auto
    }

    .BvocCourses .categories .category .top .ulbox ul {
        font-size: 16px;
        padding-left: 20px
    }

    .BvocCourses .categories .category .top .ulbox ul li {
        margin-bottom: 15px
    }

    .BvocCourses .top.variant-1,
    .BvocCourses .top.variant-2,
    .BvocCourses .top.variant-3,
    .BvocCourses .top.variant-4,
    .BvocCourses .top.variant-5,
    .BvocCourses .top.variant-6,
    .BvocCourses .top.variant-7,
    .BvocCourses .top.variant-8,
    .BvocCourses .top.variant-9 {
        border-radius: 20px
    }

    .BvocCourses .bottom,
    .BvocCourses button {
        font-size: 16px
    }
}

.BvocJnuCourses {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.08vw;
    padding: 2.08vw 6.25vw
}

.BvocJnuCourses .heading {
    color: var(--color-red);
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.92vw;
    font-weight: 400;
    text-transform: uppercase
}

.BvocJnuCourses .categories {
    gap: 59px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.BvocJnuCourses .categories .category {
    width: 96%;
    display: flex;
    flex-direction: row;
    gap: 0;
    align-items: center
}

.BvocJnuCourses .categories .category .image-container {
    position: relative;
    width: 50%;
    height: auto;
    overflow: hidden
}

.BvocJnuCourses .categories .category .image-container .main-img {
    width: 100%;
    height: 101%;
    object-fit: cover;
    transition: all .5s ease;
    filter: grayscale(0%)
}

.BvocJnuCourses .categories .category .image-container .main-img:hover {
    filter: grayscale(100%);
    transform: scale(1.05)
}

.BvocJnuCourses .categories .category .image-container .arrow {
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.25vw;
    height: 6.25vw;
    right: -1vw;
    top: -.9vw;
    border-radius: 50%;
    background-color: #fbc51d;
    position: absolute;
    transition: all .5s ease
}

.BvocJnuCourses .categories .category .image-container .arrow:hover {
    scale: 1.1;
    background-color: #fbc31dbe
}

.BvocJnuCourses .categories .category .image-container .arrow img {
    width: 45%;
    height: 45%;
    object-fit: cover;
    display: none
}

.BvocJnuCourses .categories .category .top {
    padding: 2rem;
    width: 50%;
    border-radius: 0;
    box-shadow: 0 4px 14px #0000001a;
    display: flex;
    flex-direction: column
}

.BvocJnuCourses .categories .category .top .title {
    color: var(--color-white);
    font-weight: 650;
    font-size: 1.5rem;
    margin-bottom: 15px;
    letter-spacing: 1px
}

.BvocJnuCourses .categories .category .top .desc {
    color: var(--color-white);
    font-weight: 500;
    font-size: 1.2rem;
    margin-bottom: 4.63vh
}

.BvocJnuCourses .categories .category .top .ulbox {
    border-radius: 20px;
    background: var(--color-white);
    margin: .52vw;
    padding: 1.56vw;
    width: 23.59vw;
    height: 62.96vh
}

.BvocJnuCourses .categories .category .top .ulbox ul {
    list-style: disc;
    font-weight: 650;
    font-size: 1.25vw;
    padding-left: 2.08vw
}

.BvocJnuCourses .categories .category .top .ulbox ul li {
    margin-bottom: 2.78vh
}

.BvocJnuCourses .top.variant-1 {
    border-radius: 20px 20px 0 0;
    background: linear-gradient(74deg, #3027a0 20.93%, #6a669d80 105.37%);
    box-shadow: inset 0 4px 14px #00000040
}

.BvocJnuCourses .top.variant-2 {
    border-radius: 20px 20px 0 0;
    background: linear-gradient(91deg, #378509 5.36%, #72bf4480 175.45%);
    box-shadow: inset 0 4px 14px #00000040
}

.BvocJnuCourses .top.variant-3 {
    border-radius: 20px 20px 0 0;
    background: linear-gradient(102deg, #d33519 2.67%, #ff634780 132.1%);
    box-shadow: inset 0 4px 14px #00000040
}

.BvocJnuCourses .top.variant-4 {
    border-radius: 20px 20px 0 0;
    background: linear-gradient(106deg, #075580 3.57%, #2a98d4 119.99%);
    box-shadow: inset 0 4px 14px #00000040
}

.BvocJnuCourses .top.variant-5 {
    border-radius: 20px 20px 0 0;
    background: linear-gradient(101deg, #b30225 1.12%, #dc143c80 126.08%);
    box-shadow: inset 0 4px 14px #00000040
}

.BvocJnuCourses .top.variant-6 {
    border-radius: 20px 20px 0 0;
    background: var(--darkblue, linear-gradient(249deg, #1c325b 1.17%, #3b6ac1 59.08%));
    box-shadow: inset 0 4px 14px #00000040
}

.BvocJnuCourses .top.variant-7 {
    border-radius: 20px 20px 0 0;
    background: linear-gradient(74deg, #3027a0 20.93%, #6a669d80 105.37%);
    box-shadow: inset 0 4px 14px #00000040
}

.BvocJnuCourses .top.variant-8 {
    border-radius: 20px 20px 0 0;
    background: linear-gradient(91deg, #378509 5.36%, #72bf4480 175.45%);
    box-shadow: inset 0 4px 14px #00000040
}

.BvocJnuCourses .top.variant-9 {
    border-radius: 20px 20px 0 0;
    background: linear-gradient(102deg, #d33519 2.67%, #ff634780 132.1%);
    box-shadow: inset 0 4px 14px #00000040
}

.BvocJnuCourses .bottom {
    font-size: 1.5rem;
    justify-content: center;
    font-weight: 650
}

.BvocJnuCourses button {
    display: flex;
    padding: 15px 30px;
    font-size: 1.5rem;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: none;
    border-radius: 10px;
    background: var(--color-red);
    color: var(--color-white);
    font-weight: 650;
    text-transform: uppercase;
    transition: background .3s ease, transform .3s ease;
    cursor: pointer
}

.BvocJnuCourses button:hover {
    background: #b01031
}

@media (max-width: 480px) {
    .BvocJnuCourses {
        padding: 20px 15px;
        gap: 4vw
    }

    .BvocJnuCourses .heading {
        font-size: 32px
    }

    .BvocJnuCourses .categories {
        gap: 30px
    }

    .BvocJnuCourses .categories .category {
        width: 100%;
        flex-direction: column
    }

    .BvocJnuCourses .categories .category .image-container {
        width: 100%;
        height: 220px
    }

    .BvocJnuCourses .categories .category .image-container .arrow {
        width: 60px;
        height: 60px;
        top: -4%;
        right: -.5%
    }

    .BvocJnuCourses .categories .category .image-container .arrow img {
        width: 50%;
        height: 50%
    }

    .BvocJnuCourses .categories .category .top {
        width: 100%;
        height: auto;
        padding: 20px;
        justify-content: center;
        border-radius: 0 0 20px 20px
    }

    .BvocJnuCourses .categories .category .top .desc {
        margin-bottom: 5px
    }

    .BvocJnuCourses .categories .category .top .ulbox {
        width: 100%;
        height: auto
    }

    .BvocJnuCourses .categories .category .top .ulbox ul {
        font-size: 16px;
        padding-left: 20px
    }

    .BvocJnuCourses .categories .category .top .ulbox ul li {
        margin-bottom: 15px
    }

    .BvocJnuCourses .top.variant-1,
    .BvocJnuCourses .top.variant-2,
    .BvocJnuCourses .top.variant-3,
    .BvocJnuCourses .top.variant-4,
    .BvocJnuCourses .top.variant-5,
    .BvocJnuCourses .top.variant-6,
    .BvocJnuCourses .top.variant-7,
    .BvocJnuCourses .top.variant-8,
    .BvocJnuCourses .top.variant-9 {
        border-radius: 20px
    }

    .BvocJnuCourses .bottom,
    .BvocJnuCourses button {
        font-size: 16px
    }
}

.newGiftForm {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0
}

.newGiftForm .newGiftForm__container {
    display: flex;
    width: 100%;
    height: 100vh;
    background: #fbc51d12;
    box-shadow: 0 0 20px #0000000d;
    overflow: hidden;
    border-radius: 0
}

.newGiftForm .newGiftForm_Bvoc_image {
    width: 100%;
    background: url(/assets/B.Voc-Landing-Page-Banner-CTZXlmd2.jpeg) no-repeat;
    background-size: cover;
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: end
}

.newGiftForm .newGiftForm__form {
    width: 26%;
    padding: 15px 30px;
    background: var(--color-white);
    border-radius: 15px;
    position: absolute;
    top: 6%;
    right: 5%
}

.newGiftForm .newGiftForm__form h2 {
    color: var(--color-red);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 20px;
    text-align: center
}

.newGiftForm .newEnquiryForm {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px
}

.newGiftForm .newEnquiryForm .input-group {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.newGiftForm .newEnquiryForm .input-group label {
    color: var(--GREY-COLOR, #2c2c2c);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: .8px
}

.newGiftForm .newEnquiryForm .input-group .input-field {
    padding: 12px 15px;
    color: var(--GREY-COLOR, #2c2c2c);
    height: 45px;
    font-size: 16px;
    font-style: normal;
    background-color: transparent;
    font-weight: 500;
    line-height: normal;
    border-radius: 10px;
    border: 1px solid rgba(255, 30, 50, .3);
    outline: none;
    transition: border .3s ease
}

.newGiftForm .newEnquiryForm .input-group .input-field:focus {
    border-color: #f4a261
}

.newGiftForm .newEnquiryForm .input-group select.input-field {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%227%22%20viewBox%3D%220%200%2010%207%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M1%201L5%205L9%201%22%20stroke%3D%22%232C2C2C%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E);
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 12px
}

.newGiftForm .newEnquiryForm .checkbox-container {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    text-align: left;
    font-style: italic
}

.newGiftForm .newEnquiryForm .checkbox-container span {
    color: #666;
    text-decoration: underline;
    cursor: pointer
}

.newGiftForm .newEnquiryForm .buttonAlign {
    display: flex;
    justify-content: start;
    align-items: center
}

.newGiftForm .newEnquiryForm .animated-button {
    width: 187px;
    height: 50px;
    padding: 12px 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffc107;
    color: #000;
    font-weight: 600;
    font-size: 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    gap: 10px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    transition: background-color .3s ease
}

.newGiftForm .newEnquiryForm .animated-button:hover {
    background-color: #e6b800
}

.newGiftForm .newEnquiryForm .animated-button .btn-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #0000001a;
    z-index: 0
}

.newGiftForm .newEnquiryForm .animated-button .btn-text {
    z-index: 1;
    position: relative
}

.newGiftForm .newEnquiryForm .input-otp-field {
    padding: 5px 12px;
    color: var(--GREY-COLOR, #2c2c2c);
    height: 40px;
    font-size: 16px;
    font-style: normal;
    background-color: transparent;
    font-weight: 200;
    line-height: normal;
    border-radius: 10px;
    border: 1px solid rgba(255, 30, 50, .3);
    outline: none;
    transition: border .3s ease;
    margin: 10px 5px;
    width: 13%
}

.newGiftForm .newEnquiryForm .input-otp-field:focus {
    border-color: #f4a261
}

@media (max-width: 480px) {
    .newGiftForm {
        flex-direction: column-reverse;
        margin: 0;
        padding: 0
    }

    .newGiftForm .newGiftForm__container {
        flex-direction: column-reverse;
        height: auto
    }

    .newGiftForm .newGiftForm_Bvoc_image {
        width: 100%;
        height: 75vh;
        background: url(/assets/bvoc_campaign_banner_mobile-BoSJ4odi.jpeg) no-repeat;
        background-position: center;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: start
    }

    .newGiftForm .enquiry-form {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 30px
    }

    .newGiftForm .enquiry-form .input-group {
        display: flex;
        flex-direction: column;
        gap: 20px
    }

    .newGiftForm .enquiry-form .input-group label {
        color: var(--GREY-COLOR, #2c2c2c);

        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        letter-spacing: .8px
    }

    .newGiftForm .enquiry-form .input-group .input-field {
        padding: 12px 15px;
        color: var(--GREY-COLOR, #2c2c2c);
        height: 40px;

        font-size: 16px;
        font-style: normal;
        background-color: transparent;
        font-weight: 500;
        line-height: normal;
        border-radius: 10px;
        border: 1px solid rgba(255, 30, 50, .3);
        outline: none;
        transition: border .3s ease
    }

    .newGiftForm .enquiry-form .input-group .input-field:focus {
        border-color: #f4a261
    }

    .newGiftForm .enquiry-form .input-group select.input-field {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%227%22%20viewBox%3D%220%200%2010%207%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M1%201L5%205L9%201%22%20stroke%3D%22%232C2C2C%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E);
        background-repeat: no-repeat;
        background-position: right 20px center;
        background-size: 12px
    }

    .newGiftForm .enquiry-form .checkbox-container {
        font-size: 12px;
        color: #666;
        line-height: 1.4;
        text-align: center;
        margin-top: 10px
    }

    .newGiftForm .enquiry-form .checkbox-container span {
        color: #666;
        text-decoration: underline;
        cursor: pointer
    }

    .newGiftForm .enquiry-form .buttonAlign {
        display: flex;
        justify-content: center;
        align-items: center
    }

    .newGiftForm .enquiry-form .animated-button {
        width: 187px;
        height: 50px;
        padding: 12px 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #ffc107;
        color: #000;
        font-weight: 600;
        font-size: 16px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        gap: 10px;
        flex-shrink: 0;
        position: relative;
        overflow: hidden;
        transition: background-color .3s ease
    }

    .newGiftForm .enquiry-form .animated-button:hover {
        background-color: #e6b800
    }

    .newGiftForm .enquiry-form .animated-button .btn-background {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #0000001a;
        z-index: 0
    }

    .newGiftForm .enquiry-form .animated-button .btn-text {
        z-index: 1;
        position: relative
    }

    .newGiftForm .enquiry-form .input-otp-field {
        padding: 5px 12px;
        color: var(--GREY-COLOR, #2c2c2c);
        height: 40px;

        font-size: 16px;
        font-style: normal;
        background-color: transparent;
        font-weight: 200;
        line-height: normal;
        border-radius: 10px;
        border: 1px solid rgba(255, 30, 50, .3);
        outline: none;
        transition: border .3s ease;
        margin: 10px 5px;
        width: 13%
    }

    .newGiftForm .enquiry-form .input-otp-field:focus {
        border-color: #f4a261
    }

    .newGiftForm .newGiftForm__form {
        width: 90%;
        padding: 15px
    }

    .newGiftForm .newGiftForm__form h2 {
        font-size: 1.25rem;
        margin-bottom: 15px;
        text-align: center
    }

    .newGiftForm .newGiftForm__form form {
        gap: 20px
    }

    .newGiftForm .newGiftForm__form form .form-group {
        gap: 8px
    }

    .newGiftForm .newGiftForm__form form .form-group label {
        font-size: 16px
    }

    .newGiftForm .newGiftForm__form form .form-group input,
    .newGiftForm .newGiftForm__form form .form-group select {
        font-size: 14px;
        height: 48px
    }

    .newGiftForm .newGiftForm__form form .privacy {
        font-size: 10px;
        width: 100%
    }

    .newGiftForm .newGiftForm__form form button {
        width: 100%;
        height: 45px;
        font-size: 14px
    }

    .thankYouDiv h1 {
        font-size: 40px;

        text-align: center
    }

    .thankYouDiv h3 {
        font-size: 20px;
        font-weight: 400;

        padding-top: 20px;
        text-align: center
    }

    .thankYouDiv p {
        font-size: 14px;
        font-weight: 400;

        padding-top: 20px;
        text-align: center
    }
}

.giftForm {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0
}

.giftForm .giftForm__container {
    display: flex;
    width: 100%;
    height: 100vh;
    background: #fbc51d12;
    box-shadow: 0 0 20px #0000000d;
    overflow: hidden
}

.giftForm .giftForm__image {
    width: 100%;
    background: url(/assets/campaign_banner-CeQBC7d2.jpg) no-repeat;
    background-size: cover;
    position: relative;
    height: 95vh;
    display: flex;
    justify-content: end;
    background-position: center
}

.giftForm .enquiry-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px
}

.giftForm .enquiry-form h2 {
    color: var(--color-red);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 35px;
    font-style: normal;
    font-weight: 200;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 40px
}

.giftForm .enquiry-form .input-group {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.giftForm .enquiry-form .input-group label {
    color: var(--GREY-COLOR, #2c2c2c);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: .8px
}

.giftForm .enquiry-form .input-group .input-field {
    padding: 12px 15px;
    color: var(--GREY-COLOR, #2c2c2c);
    height: 55px;
    font-size: 16px;
    font-style: normal;
    background-color: transparent;
    font-weight: 500;
    line-height: normal;
    border-radius: 10px;
    border: 1px solid rgba(255, 30, 50, .3);
    outline: none;
    transition: border .3s ease
}

.giftForm .enquiry-form .input-group .input-field:focus {
    border-color: #f4a261
}

.giftForm .enquiry-form .input-group select.input-field {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%227%22%20viewBox%3D%220%200%2010%207%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M1%201L5%205L9%201%22%20stroke%3D%22%232C2C2C%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E);
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 12px
}

.giftForm .enquiry-form .checkbox-container {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    text-align: left;
    margin-top: 10px
}

.giftForm .enquiry-form .checkbox-container span {
    color: #666;
    text-decoration: underline;
    cursor: pointer
}

.giftForm .enquiry-form .buttonAlign {
    display: flex;
    justify-content: start;
    align-items: center
}

.giftForm .enquiry-form .animated-button {
    width: 187px;
    height: 50px;
    padding: 12px 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffc107;
    color: #000;
    font-weight: 600;
    font-size: 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    gap: 10px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    transition: background-color .3s ease
}

.giftForm .enquiry-form .animated-button:hover {
    background-color: #e6b800
}

.giftForm .enquiry-form .animated-button .btn-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #0000001a;
    z-index: 0
}

.giftForm .enquiry-form .animated-button .btn-text {
    z-index: 1;
    position: relative
}

.giftForm .enquiry-form .input-otp-field {
    padding: 5px 12px;
    color: var(--GREY-COLOR, #2c2c2c);
    height: 40px;
    font-size: 16px;
    font-style: normal;
    background-color: transparent;
    font-weight: 200;
    line-height: normal;
    border-radius: 10px;
    border: 1px solid rgba(255, 30, 50, .3);
    outline: none;
    transition: border .3s ease;
    margin: 10px 5px;
    width: 13%
}

.giftForm .enquiry-form .input-otp-field:focus {
    border-color: #f4a261
}

.whiteDiv {
    background-color: var(--color-white);
    position: absolute;
    width: 30% !important;
    margin: 30px
}

.giftForm__form {
    background-color: #fbc51d12;
    width: 100% !important
}

.giftForm__form h2 {
    margin-bottom: 15px !important
}

@media (max-width: 1536px) {
    .giftForm .giftForm__container {
        height: auto
    }

    .giftForm .giftForm__form h2 {
        font-size: 30px
    }

    .giftForm .giftForm__form form .form-group label {
        font-size: 18px
    }

    .giftForm .giftForm__form form .form-group input {
        height: 56px;
        font-size: 15px
    }

    .giftForm .giftForm__form form .newbutton {
        font-size: 15px;
        height: 48px
    }
}

@media (max-width: 1440px) {
    .giftForm .giftForm__form h2 {
        font-size: 25px
    }

    .giftForm .giftForm__form form .form-group label {
        font-size: 17px
    }

    .giftForm .giftForm__form form .form-group input {
        height: 54px;
        font-size: 14px
    }

    .giftForm .giftForm__form form .newbutton {
        font-size: 14px;
        height: 46px
    }
}

@media (max-width: 1280px) {
    .giftForm .giftForm__container {
        height: auto
    }

    .giftForm .giftForm__image,
    .giftForm .giftForm__form {
        width: 100%
    }

    .giftForm .giftForm__form {
        padding: 15px
    }

    .giftForm .giftForm__form h2 {
        font-size: 18px
    }

    .giftForm .giftForm__form .input-group {
        display: flex;
        flex-direction: column;
        gap: 8px
    }

    .giftForm .giftForm__form .input-group label {
        color: var(--GREY-COLOR, #2c2c2c);

        font-size: 15px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        letter-spacing: .8px
    }

    .giftForm .giftForm__form .input-group .input-field {
        padding: 12px 15px;
        color: var(--GREY-COLOR, #2c2c2c);
        height: 40px;

        font-size: 14px;
        font-style: normal;
        background-color: transparent;
        font-weight: 500;
        line-height: normal;
        border-radius: 10px;
        border: 1px solid rgba(255, 30, 50, .3);
        outline: none;
        transition: border .3s ease
    }

    .giftForm .giftForm__form .input-group .input-field:focus {
        border-color: #f4a261
    }

    .giftForm .giftForm__form form {
        gap: 12px
    }

    .giftForm .giftForm__form form .form-group label {
        font-size: 16px
    }

    .giftForm .giftForm__form form .form-group input {
        height: 50px;
        font-size: 14px
    }

    .giftForm .giftForm__form form .privacy {
        width: 80%;
        font-size: 11px
    }

    .giftForm .giftForm__form form .newbutton {
        font-size: 14px;
        height: 44px
    }

    .whiteDiv {
        background-color: var(--color-white);
        position: absolute;
        width: 35% !important;
        margin: 25px 30px
    }
}

@media (max-width: 480px) {
    .giftForm {
        flex-direction: column-reverse;
        margin: 0;
        padding: 0
    }

    .giftForm .giftForm__container {
        flex-direction: column-reverse;
        height: auto
    }

    .giftForm .giftForm__image {
        width: 100%;
        height: 75vh;
        background: url(/assets/campaign_banner_mobile-CCswASOf.jpg) no-repeat;
        background-position: center;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: start
    }

    .giftForm .enquiry-form {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 30px
    }

    .giftForm .enquiry-form h2 {
        color: var(--color-red);
        text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
        font-family: 'Sora-SemiBold';
        font-size: 35px;
        font-style: normal;
        font-weight: 200;
        line-height: normal;
        text-transform: uppercase;
        margin-bottom: 40px
    }

    .giftForm .enquiry-form .input-group {
        display: flex;
        flex-direction: column;
        gap: 10px
    }

    .giftForm .enquiry-form .input-group label {
        color: var(--GREY-COLOR, #2c2c2c);

        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        letter-spacing: .8px
    }

    .giftForm .enquiry-form .input-group .input-field {
        padding: 12px 15px;
        color: var(--GREY-COLOR, #2c2c2c);
        height: 40px;

        font-size: 16px;
        font-style: normal;
        background-color: transparent;
        font-weight: 500;
        line-height: normal;
        border-radius: 10px;
        border: 1px solid rgba(255, 30, 50, .3);
        outline: none;
        transition: border .3s ease
    }

    .giftForm .enquiry-form .input-group .input-field:focus {
        border-color: #f4a261
    }

    .giftForm .enquiry-form .input-group select.input-field {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%227%22%20viewBox%3D%220%200%2010%207%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M1%201L5%205L9%201%22%20stroke%3D%22%232C2C2C%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E);
        background-repeat: no-repeat;
        background-position: right 20px center;
        background-size: 12px
    }

    .giftForm .enquiry-form .checkbox-container {
        font-size: 12px;
        color: #666;
        line-height: 1.4;
        text-align: center;
        margin-top: 10px
    }

    .giftForm .enquiry-form .checkbox-container span {
        color: #666;
        text-decoration: underline;
        cursor: pointer
    }

    .giftForm .enquiry-form .buttonAlign {
        display: flex;
        justify-content: center;
        align-items: center
    }

    .giftForm .enquiry-form .animated-button {
        width: 187px;
        height: 50px;
        padding: 12px 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #ffc107;
        color: #000;
        font-weight: 600;
        font-size: 16px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        gap: 10px;
        flex-shrink: 0;
        position: relative;
        overflow: hidden;
        transition: background-color .3s ease
    }

    .giftForm .enquiry-form .animated-button:hover {
        background-color: #e6b800
    }

    .giftForm .enquiry-form .animated-button .btn-background {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #0000001a;
        z-index: 0
    }

    .giftForm .enquiry-form .animated-button .btn-text {
        z-index: 1;
        position: relative
    }

    .giftForm .enquiry-form .input-otp-field {
        padding: 5px 12px;
        color: var(--GREY-COLOR, #2c2c2c);
        height: 40px;

        font-size: 16px;
        font-style: normal;
        background-color: transparent;
        font-weight: 200;
        line-height: normal;
        border-radius: 10px;
        border: 1px solid rgba(255, 30, 50, .3);
        outline: none;
        transition: border .3s ease;
        margin: 10px 5px;
        width: 13%
    }

    .giftForm .enquiry-form .input-otp-field:focus {
        border-color: #f4a261
    }

    .giftForm .giftForm__form {
        width: 100%;
        padding: 10px
    }

    .giftForm .giftForm__form h2 {
        font-size: 24px;
        margin-bottom: 24px;
        text-align: center
    }

    .giftForm .giftForm__form form {
        gap: 10px
    }

    .giftForm .giftForm__form form .form-group {
        gap: 8px
    }

    .giftForm .giftForm__form form .form-group label {
        font-size: 16px
    }

    .giftForm .giftForm__form form .form-group input,
    .giftForm .giftForm__form form .form-group select {
        font-size: 14px;
        height: 48px
    }

    .giftForm .giftForm__form form .privacy {
        font-size: 10px;
        width: 100%
    }

    .giftForm .giftForm__form form button {
        width: 100%;
        height: 45px;
        font-size: 14px
    }

    .thankYouDiv h1 {
        font-size: 40px;

        text-align: center
    }

    .thankYouDiv h3 {
        font-size: 20px;
        font-weight: 400;

        padding-top: 20px;
        text-align: center
    }

    .thankYouDiv p {
        font-size: 14px;
        font-weight: 400;

        padding-top: 20px;
        text-align: center
    }

    .whiteDiv {
        background-color: var(--color-white);
        position: absolute;
        width: 95%;
        margin: 0
    }

    .giftForm__form {
        background-color: #fbc51d12;
        width: 100% !important
    }
}

.thank-you-page {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f4f7fa;
    padding: 1rem
}

.thank-you-page .card {
    background: var(--color-white);
    padding: 2rem 3rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px #0000001a;
    text-align: center
}

.thank-you-page .card h1 {
    color: var(--color-red);
    margin-bottom: 1rem
}

.thank-you-page .card p {
    margin: .5rem 0;
    color: #555
}

.thank-you-page .card .buttons {
    margin-top: 2rem
}

.thank-you-page .card .buttons button {
    margin: 0 .5rem;
    padding: .6rem 1.5rem;
    border: none;
    background-color: #dc143ccf;
    color: var(--color-white);
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color .3s ease
}

.thank-you-page .card .buttons button:hover {
    background-color: #dc143c
}

@media (max-width: 480px) {
    .thank-you-page {
        padding: 4vw
    }

    .thank-you-page .card {
        padding: 6vw 8vw;
        border-radius: 3vw;
        box-shadow: 0 1.5vw 4vw #0000001a
    }

    .thank-you-page .card h1 {
        font-size: 6vw;
        margin-bottom: 4vw
    }

    .thank-you-page .card p {
        font-size: 4vw;
        margin: 2vw 0
    }

    .thank-you-page .card .buttons {
        margin-top: 6vw
    }

    .thank-you-page .card .buttons button {
        margin: 0 2vw;
        padding: 3vw 6vw;
        font-size: 4vw;
        border-radius: 2vw
    }
}

.header {
    background-color: #000;
    padding: 3.24vh 6.25vw;
    display: flex;
    align-items: center
}

.header .logo img {
    height: 7.63vh;
    object-fit: contain
}

@media (max-width: 1366px) {

    .top-banner-container .carousel-cell,
    .top-banner-container .carousel-cell img {
        min-height: 700px
    }
}

@media screen and (max-width: 768px) {
    .top-banner-container {
        height: auto;
        min-height: 510px
    }

    .top-banner-container .carousel {
        position: relative
    }

    .top-banner-container .carousel-cell {
        height: auto;
        min-height: inherit
    }

    .top-banner-container .carousel-cell img {
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: top;
        min-height: inherit
    }

    .top-banner-container .flickity-prev-next-button {
        width: 30px;
        height: 30px
    }
}

.newGiftForm__container {
    display: flex;
    width: 100%;
    height: 100vh;
    background: #fbc51d12;
    box-shadow: 0 0 20px #0000000d;
    overflow: hidden;
    border-radius: 0
}

.newGiftForm__form {
    width: 26%;
    padding: 15px 30px;
    background: var(--color-white);
    border-radius: 15px;
    position: absolute;
    top: 5%;
    right: 5%;
    z-index: 9
}

.newGiftForm__form h2 {
    color: var(--color-red);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: center
}

.newEnquiryForm .input-group {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.newEnquiryForm .input-group .input-field {
    padding: 12px 15px;
    color: var(--GREY-COLOR, #2c2c2c);
    height: 45px;
    font-size: 16px;
    font-style: normal;
    background-color: transparent;
    font-weight: 500;
    line-height: normal;
    border-radius: 10px;
    border: 1px solid rgba(255, 30, 50, .3);
    outline: none;
    transition: border .3s ease;
    margin-bottom: 0
}

.newEnquiryForm .input-group select.input-field {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%227%22%20viewBox%3D%220%200%2010%207%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M1%201L5%205L9%201%22%20stroke%3D%22%232C2C2C%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E);
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 12px
}

@media (max-width: 1366px) {
    .newGiftForm__form {
        top: 4%
    }
}

@media screen and (max-width: 992px) {
    .newGiftForm__form {
        width: 90%;
        max-width: 430px;
        padding: 15px;
        position: relative;
        top: inherit;
        right: inherit;
        margin: 45px auto
    }
}

@media (max-width: 480px) {
    .newGiftForm {
        flex-direction: column-reverse;
        margin: 0;
        padding: 0
    }

    .newGiftForm .newGiftForm__container {
        flex-direction: column-reverse;
        height: auto
    }

    .newGiftForm .newGiftForm_Bvoc_image {
        width: 100%;
        height: 75vh;
        background: url(../../../../assets/landing/bvoc_campaign_banner_mobile.jpeg) no-repeat;
        background-position: center;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: start
    }

    .newGiftForm .enquiry-form {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 30px
    }

    .newGiftForm .enquiry-form .input-group {
        display: flex;
        flex-direction: column;
        gap: 20px
    }

    .newGiftForm .enquiry-form .input-group label {
        color: var(--GREY-COLOR, #2c2c2c);

        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        letter-spacing: .8px
    }

    .newGiftForm .enquiry-form .input-group .input-field {
        padding: 12px 15px;
        color: var(--GREY-COLOR, #2c2c2c);
        height: 40px;

        font-size: 16px;
        font-style: normal;
        background-color: transparent;
        font-weight: 500;
        line-height: normal;
        border-radius: 10px;
        border: 1px solid rgba(255, 30, 50, .3);
        outline: none;
        transition: border .3s ease
    }

    .newGiftForm .enquiry-form .input-group .input-field:focus {
        border-color: #f4a261
    }

    .newGiftForm .enquiry-form .input-group select.input-field {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%227%22%20viewBox%3D%220%200%2010%207%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M1%201L5%205L9%201%22%20stroke%3D%22%232C2C2C%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E);
        background-repeat: no-repeat;
        background-position: right 20px center;
        background-size: 12px
    }

    .newGiftForm .enquiry-form .checkbox-container {
        font-size: 12px;
        color: #666;
        line-height: 1.4;
        text-align: center;
        margin-top: 10px
    }

    .newGiftForm .enquiry-form .checkbox-container span {
        color: #666;
        text-decoration: underline;
        cursor: pointer
    }

    .newGiftForm .enquiry-form .buttonAlign {
        display: flex;
        justify-content: center;
        align-items: center
    }

    .newGiftForm .enquiry-form .animated-button {
        width: 187px;
        height: 50px;
        padding: 12px 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #ffc107;
        color: #000;
        font-weight: 600;
        font-size: 16px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        gap: 10px;
        flex-shrink: 0;
        position: relative;
        overflow: hidden;
        transition: background-color .3s ease
    }

    .newGiftForm .enquiry-form .animated-button:hover {
        background-color: #e6b800
    }

    .newGiftForm .enquiry-form .animated-button .btn-background {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #0000001a;
        z-index: 0
    }

    .newGiftForm .enquiry-form .animated-button .btn-text {
        z-index: 1;
        position: relative
    }

    .newGiftForm .enquiry-form .input-otp-field {
        padding: 5px 12px;
        color: var(--GREY-COLOR, #2c2c2c);
        height: 40px;

        font-size: 16px;
        font-style: normal;
        background-color: transparent;
        font-weight: 200;
        line-height: normal;
        border-radius: 10px;
        border: 1px solid rgba(255, 30, 50, .3);
        outline: none;
        transition: border .3s ease;
        margin: 10px 5px;
        width: 13%
    }

    .newGiftForm .enquiry-form .input-otp-field:focus {
        border-color: #f4a261
    }

    .newGiftForm .newGiftForm__form {
        width: 90%;
        padding: 15px
    }

    .newGiftForm .newGiftForm__form h2 {
        font-size: 1.25rem;
        margin-bottom: 15px;
        text-align: center
    }

    .newGiftForm .newGiftForm__form form {
        gap: 20px
    }

    .newGiftForm .newGiftForm__form form .form-group {
        gap: 8px
    }

    .newGiftForm .newGiftForm__form form .form-group label {
        font-size: 16px
    }

    .newGiftForm .newGiftForm__form form .form-group input,
    .newGiftForm .newGiftForm__form form .form-group select {
        font-size: 14px;
        height: 48px
    }

    .newGiftForm .newGiftForm__form form .privacy {
        font-size: 10px;
        width: 100%
    }

    .newGiftForm .newGiftForm__form form button {
        width: 100%;
        height: 45px;
        font-size: 14px
    }

    .thankYouDiv h1 {
        font-size: 40px;

        text-align: center
    }

    .thankYouDiv h3 {
        font-size: 20px;
        font-weight: 400;

        padding-top: 20px;
        text-align: center
    }

    .thankYouDiv p {
        font-size: 14px;
        font-weight: 400;

        padding-top: 20px;
        text-align: center
    }
}

.newGiftFormOtp__container {
    display: flex;
    width: 100%;
    height: 100vh;
    background: #fbc51d12;
    box-shadow: 0 0 20px #0000000d;
    overflow: hidden;
    border-radius: 0
}

.newGiftFormOtp__form {
    width: 26%;
    padding: 15px 30px;
    background: var(--color-white);
    border-radius: 15px;
    position: absolute;
    top: 5%;
    right: 5%;
    z-index: 9
}

.newGiftFormOtp__form h2 {
    color: var(--color-red);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: center
}

.newEnquiryForm {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px
}

.newEnquiryForm .input-group {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.newEnquiryForm .input-group label {
    color: var(--GREY-COLOR, #2c2c2c);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: .8px
}

.newEnquiryForm .input-group .input-field {
    padding: 12px 15px;
    color: var(--GREY-COLOR, #2c2c2c);
    height: 45px;
    font-size: 16px;
    font-style: normal;
    background-color: transparent;
    font-weight: 500;
    line-height: normal;
    border-radius: 10px;
    border: 1px solid rgba(255, 30, 50, .3);
    outline: none;
    transition: border .3s ease
}

.newEnquiryForm .input-group .input-field:focus {
    border-color: #f4a261
}

.newEnquiryForm .input-group select.input-field {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%227%22%20viewBox%3D%220%200%2010%207%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M1%201L5%205L9%201%22%20stroke%3D%22%232C2C2C%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E);
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 12px
}

.newEnquiryForm .input-group .input-amt {
    margin-top: 0;
    width: 100%;
    margin-bottom: 15px
}

.newEnquiryForm .input-group .amt-txt {
    position: absolute;
    width: 100%;
    bottom: -5px;
    left: 0;
    font-size: .75rem;
    font-style: italic;
    font-weight: 500
}

.newEnquiryForm .checkbox-container {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    text-align: left;
    font-style: italic
}

.newEnquiryForm .checkbox-container span {
    color: #666;
    text-decoration: underline;
    cursor: pointer
}

.newEnquiryForm .buttonAlign {
    display: flex;
    justify-content: start;
    align-items: center
}

.newEnquiryForm .animated-button {
    width: 100%;
    min-width: 190px;
    height: 50px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffc107;
    color: #000;
    font-weight: 600;
    font-size: 1.5rem;
    text-transform: uppercase;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    gap: 10px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    transition: background-color .3s ease
}

.newEnquiryForm .animated-button:hover {
    background-color: #e6b800
}

.newEnquiryForm .animated-button .btn-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #0000001a;
    z-index: 0
}

.newEnquiryForm .animated-button .btn-text {
    z-index: 1;
    position: relative
}

.newEnquiryForm .input-otp-field {
    padding: 5px 12px;
    color: var(--GREY-COLOR, #2c2c2c);
    height: 40px;
    font-size: 16px;
    font-style: normal;
    background-color: transparent;
    font-weight: 200;
    line-height: normal;
    border-radius: 10px;
    border: 1px solid rgba(255, 30, 50, .3);
    outline: none;
    transition: border .3s ease;
    margin: 10px 5px;
    width: 13%
}

.newEnquiryForm .input-otp-field:focus {
    border-color: #f4a261
}

.thankYouDiv h1 {
    font-size: 60px;
    text-align: center
}

.thankYouDiv h3 {
    font-size: 40px;
    font-weight: 400;
    padding-top: 20px;
    text-align: center
}

.thankYouDiv p {
    font-size: 25px;
    font-weight: 400;
    padding-top: 20px;
    text-align: center
}

@media screen and (max-width: 992px) {
    .newGiftFormOtp__form {
        width: 90%;
        max-width: 430px;
        padding: 15px;
        position: relative;
        top: inherit;
        right: inherit;
        margin: 45px auto
    }
}

@media (max-width: 480px) {
    .newGiftForm {
        flex-direction: column-reverse;
        margin: 0;
        padding: 0
    }

    .newGiftForm .newGiftFormOtp__container {
        flex-direction: column-reverse;
        height: auto
    }

    .newGiftForm .newGiftForm_Bvoc_image {
        width: 100%;
        height: 75vh;
        background: url(../../../../assets/landing/bvoc_campaign_banner_mobile.jpeg) no-repeat;
        background-position: center;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: start
    }

    .newGiftForm .enquiry-form {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 30px
    }

    .newGiftForm .enquiry-form .input-group {
        display: flex;
        flex-direction: column;
        gap: 20px
    }

    .newGiftForm .enquiry-form .input-group label {
        color: var(--GREY-COLOR, #2c2c2c);

        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        letter-spacing: .8px
    }

    .newGiftForm .enquiry-form .input-group .input-field {
        padding: 12px 15px;
        color: var(--GREY-COLOR, #2c2c2c);
        height: 40px;

        font-size: 16px;
        font-style: normal;
        background-color: transparent;
        font-weight: 500;
        line-height: normal;
        border-radius: 10px;
        border: 1px solid rgba(255, 30, 50, .3);
        outline: none;
        transition: border .3s ease
    }

    .newGiftForm .enquiry-form .input-group .input-field:focus {
        border-color: #f4a261
    }

    .newGiftForm .enquiry-form .input-group select.input-field {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%227%22%20viewBox%3D%220%200%2010%207%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M1%201L5%205L9%201%22%20stroke%3D%22%232C2C2C%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E);
        background-repeat: no-repeat;
        background-position: right 20px center;
        background-size: 12px
    }

    .newGiftForm .enquiry-form .checkbox-container {
        font-size: 12px;
        color: #666;
        line-height: 1.4;
        text-align: center;
        margin-top: 10px
    }

    .newGiftForm .enquiry-form .checkbox-container span {
        color: #666;
        text-decoration: underline;
        cursor: pointer
    }

    .newGiftForm .enquiry-form .buttonAlign {
        display: flex;
        justify-content: center;
        align-items: center
    }

    .newGiftForm .enquiry-form .animated-button {
        width: 187px;
        height: 50px;
        padding: 12px 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #ffc107;
        color: #000;
        font-weight: 600;
        font-size: 16px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        gap: 10px;
        flex-shrink: 0;
        position: relative;
        overflow: hidden;
        transition: background-color .3s ease
    }

    .newGiftForm .enquiry-form .animated-button:hover {
        background-color: #e6b800
    }

    .newGiftForm .enquiry-form .animated-button .btn-background {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #0000001a;
        z-index: 0
    }

    .newGiftForm .enquiry-form .animated-button .btn-text {
        z-index: 1;
        position: relative
    }

    .newGiftForm .enquiry-form .input-otp-field {
        padding: 5px 12px;
        color: var(--GREY-COLOR, #2c2c2c);
        height: 40px;

        font-size: 16px;
        font-style: normal;
        background-color: transparent;
        font-weight: 200;
        line-height: normal;
        border-radius: 10px;
        border: 1px solid rgba(255, 30, 50, .3);
        outline: none;
        transition: border .3s ease;
        margin: 10px 5px;
        width: 13%
    }

    .newGiftForm .enquiry-form .input-otp-field:focus {
        border-color: #f4a261
    }

    .newGiftForm .newGiftFormOtp__form {
        width: 90%;
        padding: 15px
    }

    .newGiftForm .newGiftFormOtp__form h2 {
        font-size: 1.25rem;
        margin-bottom: 15px;
        text-align: center
    }

    .newGiftForm .newGiftFormOtp__form form {
        gap: 20px
    }

    .newGiftForm .newGiftFormOtp__form form .form-group {
        gap: 8px
    }

    .newGiftForm .newGiftFormOtp__form form .form-group label {
        font-size: 16px
    }

    .newGiftForm .newGiftFormOtp__form form .form-group input,
    .newGiftForm .newGiftFormOtp__form form .form-group select {
        font-size: 14px;
        height: 48px
    }

    .newGiftForm .newGiftFormOtp__form form .privacy {
        font-size: 10px;
        width: 100%
    }

    .newGiftForm .newGiftFormOtp__form form button {
        width: 100%;
        height: 45px;
        font-size: 14px
    }

    .thankYouDiv h1 {
        font-size: 40px;

        text-align: center
    }

    .thankYouDiv h3 {
        font-size: 20px;
        font-weight: 400;

        padding-top: 20px;
        text-align: center
    }

    .thankYouDiv p {
        font-size: 14px;
        font-weight: 400;

        padding-top: 20px;
        text-align: center
    }
}

.why-arena-bp {
    background-color: #fbc51d;
    padding: 2rem .95rem;
    text-align: center
}

.why-arena-heading {
    color: var(--color-red);
    font-size: 2rem;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 20px;
    text-shadow: 0 .2rem .3rem rgba(0, 0, 0, .3)
}

.why-arena-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    max-width: 100%;
    margin: 0 auto
}

.why-arena-image {
    max-width: 350px;
    margin: 0 auto
}

.why-arena-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover
}

.why-arena-text {
    max-width: 700px;
    color: #000;
    line-height: 1.7;
    font-size: 1rem;
    text-align: left
}

.why-arena-text p {
    margin-bottom: 1.2rem;
    font-size: 1.15rem
}

.why-arena-btn {
    background-color: #f2f2f2;
    color: #e30613;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease
}

.why-arena-btn:hover {
    background-color: #e6e6e6;
    transform: translateY(-2px)
}

@media (min-width: 992px) {
    .why-arena-bp {
        padding: 2.5rem 0rem
    }

    .why-arena-content {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-align: left;
        gap: 3rem;
        max-width: 1520px;
        margin-left: 6.5%;
        margin-right: 6.5%
    }

    .why-arena-image,
    .why-arena-text {
        flex: 1
    }

    .why-arena-image {
        min-width: 30%
    }

    .why-arena-text {
        min-width: 66.5%
    }

    .why-arena-text p {
        font-size: 1.25rem
    }

    .why-arena-heading {
        font-size: 3rem;
        max-width: 1520px;
        margin: 0 auto
    }
}

.advantages-section {
    position: relative;
    background: url(/images/bpcampaign/advantages.jpg) no-repeat center center;
    background-size: cover;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--color-white);
    overflow: hidden
}

.advantages-section .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--color-red)e6;
    z-index: 0
}

.advantages-section .advantages-heading {
    position: relative;
    font-size: 2.5rem;
    font-weight: 400;
    color: #fc0;
    margin-bottom: 2rem;
    z-index: 1;
    line-height: normal;
    text-shadow: 0 .3rem .3rem rgba(0, 0, 0, .3)
}

.advantages-section .carousel {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto 2rem
}

.advantages-section .carousel-cell {
    width: 100%;
    padding: 0 10px
}

.advantages-section .video-wrapper {
    position: relative;
    width: 100%;
    border-radius: 20px;
    overflow: hidden
}

.advantages-section .video-wrapper iframe,
.advantages-section .video-wrapper .video-thumb,
.advantages-section .video-wrapper video {
    width: 100%;
    height: 500px;
    border-radius: 20px;
    object-fit: cover;
    box-shadow: 0 6px 20px #0006
}

.advantages-section .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    background: #e30613;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 2;
    animation: pulse 1.5s infinite
}

.advantages-section .play-button:before {
    content: "";
    position: absolute;
    left: 32px;
    top: 22px;
    width: 0;
    height: 0;
    border-left: 24px solid #fff;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 #e30613b3
    }

    70% {
        box-shadow: 0 0 0 25px #e3061300
    }

    to {
        box-shadow: 0 0 #e3061300
    }
}

.advantages-section .advantages-btn {
    position: relative;
    z-index: 1;
    background-color: #fc0;
    color: #000;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease
}

.advantages-section .advantages-btn:hover {
    background-color: #e6b800;
    transform: translateY(-2px)
}

.advantages-section .flickity-prev-next-button {
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: none;
    border: none
}

.advantages-section .flickity-prev-next-button svg {
    fill: var(--color-white);
    width: 30px;
    height: 30px
}

.advantages-section .flickity-prev-next-button:hover {
    background: var(--color-white)3;
    border-radius: 50%
}

.advantages-section .flickity-prev-next-button.previous {
    left: -60px
}

.advantages-section .flickity-prev-next-button.next {
    right: -60px
}

.advantages-section .flickity-page-dots {
    bottom: -20px
}

.advantages-section .flickity-page-dots .dot {
    background: #fc0;
    opacity: 1
}

.advantages-section .flickity-page-dots .dot.is-selected {
    background: var(--color-white)
}

@media (max-width: 768px) {
    .advantages-section .advantages-heading {
        font-size: 1.8rem
    }

    .advantages-section .play-button {
        width: 60px;
        height: 60px
    }

    .advantages-section .play-button:before {
        left: 24px;
        top: 16px;
        border-left: 18px solid #fff;
        border-top: 11px solid transparent;
        border-bottom: 11px solid transparent
    }

    .advantages-section .video-wrapper iframe,
    .advantages-section .video-wrapper .video-thumb,
    .advantages-section .video-wrapper video {
        min-height: 280px;
        height: auto
    }

    .advantages-section .advantages-btn {
        padding: 15px;
        border-radius: 10px
    }

    .advantages-section .flickity-prev-next-button.previous {
        left: -25px
    }

    .advantages-section .flickity-prev-next-button.next {
        right: -25px
    }

    .advantages-section .flickity-prev-next-button svg {
        width: 24px;
        height: 24px
    }
}

.bp-awards-section {
    padding: 3rem 1rem;
    text-align: center;
    background: var(--color-white)
}

.bp-awards-section .awards-heading {
    font-size: 2.5rem;
    font-weight: 400;
    color: #e30613;
    margin-bottom: 2rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .2)
}

.bp-awards-section .carousel {
    position: relative;
    max-width: 1260px;
    margin: 0 auto
}

.bp-awards-section .carousel-cell {
    width: 60%;
    margin-right: 20px;
    border-radius: 15px;
    overflow: hidden;
    transition: transform .4s ease, opacity .4s ease;
    opacity: .6;
    transform: scale(.8)
}

.bp-awards-section .carousel-cell img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block
}

.bp-awards-section .carousel-cell.is-active {
    transform: scale(1);
    opacity: 1;
    z-index: 2
}

.bp-awards-section .flickity-prev-next-button {
    top: 50%;
    transform: translateY(-50%);
    background: #0009;
    border-radius: 50%;
    width: 45px;
    height: 45px
}

.bp-awards-section .flickity-prev-next-button svg {
    fill: var(--color-white)
}

.bp-awards-section .flickity-prev-next-button:hover {
    background: #000c
}

.bp-awards-section .flickity-prev-next-button.previous {
    left: -60px
}

.bp-awards-section .flickity-prev-next-button.next {
    right: -60px
}

.bp-awards-section .flickity-page-dots {
    bottom: -20px
}

.bp-awards-section .flickity-page-dots .dot {
    background: #e30613;
    opacity: .5
}

.bp-awards-section .flickity-page-dots .flickity-page-dot {
    background: #0d02024d;
    width: 12px;
    height: 12px
}

.bp-awards-section .flickity-page-dots .flickity-page-dot.is-selected {
    opacity: 1;
    background: #fc0
}

@media (max-width: 1366px) {
    .bp-awards-section .carousel-cell {
        width: 50%
    }

    .bp-awards-section .flickity-prev-next-button.previous {
        left: -10px
    }

    .bp-awards-section .flickity-prev-next-button.next {
        right: -10px
    }
}

@media (max-width: 1024px) {
    .bp-awards-section .carousel-cell {
        width: 70%
    }

    .bp-awards-section .flickity-prev-next-button.previous {
        left: -10px
    }

    .bp-awards-section .flickity-prev-next-button.next {
        right: -10px
    }
}

@media (max-width: 768px) {
    .bp-awards-section .awards-heading {
        font-size: 1.8rem
    }

    .bp-awards-section .carousel-cell {
        width: 85%
    }

    .bp-awards-section .flickity-prev-next-button {
        width: 30px;
        height: 30px
    }

    .bp-awards-section .flickity-prev-next-button.previous {
        left: -10px
    }

    .bp-awards-section .flickity-prev-next-button.next {
        right: -10px
    }
}

.bp-recruiters {
    padding: 50px 0;
    text-align: left;
    background-color: var(--color-white)
}

.bp-recruiters .bp-recruiter-container .bp-recruiter-header {
    margin: auto;
    display: flex;
    flex-direction: column;
    max-width: 80rem;
    padding: 0 8rem;
    text-align: center
}

.bp-recruiters .bp-recruiter-container .bp-recruiter-header h2 {
    color: var(--color-red);
    font-size: 3rem;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 10px;
    text-shadow: 0 .2rem .3rem rgba(0, 0, 0, .3)
}

.bp-recruiters .bp-recruiter-container .bp-recruiter-header p {
    font-size: 1.15rem;
    font-weight: 650;
    color: #2c2c2c;
    margin-bottom: 27px;
    line-height: 1.75rem
}

.bp-recruiters .bp-recruiter-container .scrolling-container {
    position: relative;
    overflow: hidden;
    padding: 3rem 0;
    border-top: .02rem solid rgba(44, 44, 44, .5);
    border-bottom: .02rem solid rgba(44, 44, 44, .5)
}

.bp-recruiters .bp-recruiter-container .scrolling-container .scrolling-wrapper {
    width: max-content;
    white-space: nowrap;
    display: flex;
    gap: 2rem;
    animation: scroll-right 60s linear infinite
}

.bp-recruiters .bp-recruiter-container .scrolling-container .scroll-box {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 4rem;
    padding: 2rem 1.5rem;
    border-radius: 5px;
    border: 1px solid rgba(231, 181, 26, .8);
    white-space: nowrap;
    color: #2c2c2c;
    font-size: 18px;
    font-weight: 700;
    line-height: 2rem
}

.bp-recruiters .bp-recruiter-container .scrolling-container .scrolling-wrapper-2 {
    display: flex;
    width: max-content;
    gap: 2rem;
    animation: scroll-left 60s linear infinite;
    margin-top: 2rem
}

.bp-recruiters .bp-recruiter-container .scrolling-container .scroll-box-2 {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 6rem;
    padding: 2rem 1.5rem;
    border-radius: 5px;
    border: 1px solid rgba(231, 181, 26, .8);
    color: #2c2c2c;
    font-size: 18px;
    font-weight: 700;
    line-height: 2rem;
    white-space: nowrap
}

@keyframes scroll-left {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(-20%)
    }
}

@keyframes scroll-right {
    0% {
        transform: translate(-20%)
    }

    to {
        transform: translate(0)
    }
}

@keyframes scroll-animation {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(-100%)
    }
}

@media (max-width: 768px) {
    .bp-recruiters {
        width: 100% !important;
        padding: 0 0 40px !important
    }

    .bp-recruiters .bp-recruiter-container {
        width: 100% !important
    }

    .bp-recruiters .bp-recruiter-container .bp-recruiter-header {
        padding: 16px !important
    }

    .bp-recruiters .bp-recruiter-container .bp-recruiter-header h2 {
        font-size: 2rem !important
    }

    .bp-recruiters .bp-recruiter-container .bp-recruiter-header p {
        font-style: normal !important;
        font-weight: 500 !important;
        width: 100% !important;
        margin: 0 !important
    }

    .bp-recruiters .bp-recruiter-container .scrolling-container {
        width: 95% !important;
        margin: auto !important;
        padding: 0 !important;
        border: none !important
    }

    .bp-recruiters .bp-recruiter-container .scrolling-container .scrolling-wrapper,
    .bp-recruiters .bp-recruiter-container .scrolling-container .scrolling-wrapper-2 {
        gap: .375rem !important;
        padding: 12px 0 0 !important;
        margin: 0 !important
    }

    .bp-recruiters .bp-recruiter-container .scrolling-container .scrolling-wrapper .scroll-box,
    .bp-recruiters .bp-recruiter-container .scrolling-container .scrolling-wrapper .scroll-box-2,
    .bp-recruiters .bp-recruiter-container .scrolling-container .scrolling-wrapper-2 .scroll-box,
    .bp-recruiters .bp-recruiter-container .scrolling-container .scrolling-wrapper-2 .scroll-box-2 {
        width: auto;
        height: 3rem;
        font-size: .85rem;
        font-weight: 700;
        line-height: .75rem;
        padding: 1rem
    }
}

.bp-courses {
    background: #f7f7f7;
    padding: 60px 0;
    text-align: center
}

.bp-courses .bp-container {
    max-width: 88%;
    margin: 0 auto;
    padding: 0 20px
}

.bp-courses .heading {
    font-size: 3rem;
    font-weight: 400;
    color: var(--color-red);
    text-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    margin-bottom: 20px;
    text-align: left
}

.bp-courses .course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, max-content));
    gap: 28px;
    justify-content: center
}

.bp-courses .course-carousel .course-card {
    width: 85%;
    margin: 0 10px
}

.bp-courses .course-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 18px #00000026;
    cursor: pointer;
    transition: transform .3s ease
}

.bp-courses .course-card img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity .4s ease
}

.bp-courses .course-card .hover-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

.bp-courses .course-card .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .7), transparent);
    color: var(--color-white);
    padding: 16px;
    text-align: left
}

.bp-courses .course-card .overlay h3 {
    font-size: 1.5rem;
    margin: 0 0 6px
}

.bp-courses .course-card .overlay p {
    font-size: .95rem;
    margin: 0
}

.bp-courses .course-card:hover {
    transform: translateY(-4px)
}

.bp-courses .course-card:hover .default-img {
    opacity: 0
}

.bp-courses .course-card:hover .hover-img {
    opacity: 1
}

.bp-courses .course-cta {
    margin-top: 50px;
    background: #facc15;
    color: #111;
    font-weight: 700;
    padding: 14px 36px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: background .3s, transform .2s;
    box-shadow: 0 4px 10px #00000026;
    font-size: 1rem
}

.bp-courses .course-cta:hover {
    background: #eab308;
    transform: translateY(-2px)
}

@media screen and (max-width: 1366px) {
    .bp-courses .course-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 24px
    }
}

@media (max-width: 1024px) {
    .bp-courses .bp-container {
        max-width: 96%
    }

    .bp-courses .heading {
        text-align: center;
        font-size: 2.4rem
    }

    .bp-courses .course-carousel .course-card {
        position: inherit;
        width: 50%
    }

    .bp-courses .flickity-page-dot {
        background: #b0abab4d;
        width: 10px;
        height: 10px
    }

    .bp-courses .flickity-page-dot.is-selected {
        background: #e2d40e
    }

    .bp-courses .flickity-page-dots {
        bottom: -30px
    }

    .bp-courses .flickity-prev-next-button.next {
        right: 5px
    }

    .bp-courses .flickity-prev-next-button.previous {
        left: 5px
    }
}

@media (max-width: 768px) {
    .bp-courses {
        padding: 40px 0
    }

    .bp-courses .bp-container {
        padding: 0;
        max-width: 90%
    }

    .bp-courses .heading {
        font-size: 2rem
    }

    .bp-courses .course-cta {
        padding: 15px
    }

    .bp-courses .course-carousel .flickity-prev-next-button {
        width: 35px;
        height: 35px
    }

    .bp-courses .course-carousel .course-card {
        position: inherit;
        width: 50%
    }
}

@media (max-width: 420px) {
    .bp-courses {
        padding: 40px 0
    }

    .bp-courses .bp-container {
        padding: 0;
        max-width: 90%
    }

    .bp-courses .heading {
        font-size: 2rem
    }

    .bp-courses .course-carousel .flickity-prev-next-button {
        width: 35px;
        height: 35px
    }

    .bp-courses .course-carousel .course-card {
        position: inherit;
        width: 100%
    }
}

.bp-whatWeOffer {
    display: flex;
    justify-content: space-between;
    position: relative;
    max-width: 100%;
    margin: auto auto 0;
    align-items: flex-start;
    overflow: hidden;
    padding: 5% 6%;
    background: #d7d3d0
}

.bp-whatWeOffer .bp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px
}

.bp-whatWeOffer .flickity-container {
    width: 100%
}

.bp-whatWeOffer .carousel-cell {
    width: 90%;
    margin-right: 16px
}

.bp-whatWeOffer .bp-whyarena-btn {
    position: relative;
    z-index: 1;
    background-color: #fc0;
    color: #000;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease
}

.bp-whatWeOffer .bp-whyarena-btn:hover {
    background-color: #e6b800;
    transform: translateY(-2px)
}

.bp-whatWeOffer .bp-video-background {
    position: absolute;
    padding: 0;
    width: 50%;
    height: 100%;
    scale: 2;
    opacity: .4;
    z-index: 1;
    pointer-events: none;
    top: 0;
    left: 0
}

.bp-whatWeOffer .what-we-offer-left {
    flex: 1;
    margin: auto 2.5% auto auto;
    width: 40%;
    z-index: 1;
    position: relative
}

.bp-whatWeOffer .what-we-offer-left h2 {
    color: var(--color-red);
    font-size: 3rem;
    font-style: normal;
    font-weight: 400;
    line-height: 3.60875rem;
    margin-bottom: 1.25rem;
    text-shadow: 0rem .25rem .25rem rgba(0, 0, 0, .3)
}

.bp-whatWeOffer .what-we-offer-left p {
    font-size: 1.13rem;
    font-style: normal;
    font-weight: 650;
    line-height: 1.35rem;
    color: #2c2c2c;
    margin-bottom: 1rem
}

.bp-whatWeOffer .what-we-offer-right {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .8rem;
    z-index: 1;
    position: relative
}

.bp-whatWeOffer .what-we-offer-right .bp-card {
    position: relative;
    width: 15.25rem;
    height: 13.25rem;
    border-radius: .625rem;
    perspective: 62.5rem
}

.bp-whatWeOffer .what-we-offer-right .bp-card .bp-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform .6s;
    transform-style: preserve-3d;
    border-radius: .625rem
}

.bp-whatWeOffer .what-we-offer-right .bp-card:hover .bp-card-inner {
    transform: rotateY(180deg)
}

.bp-whatWeOffer .what-we-offer-right .bp-card .bp-card-front,
.bp-whatWeOffer .what-we-offer-right .bp-card .bp-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem;
    border-radius: .625rem;
    text-align: left
}

.bp-whatWeOffer .what-we-offer-right .bp-card .bp-card-front {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 2.5rem;
    border: .0625rem solid rgba(255, 242, 0, .4)
}

.bp-whatWeOffer .what-we-offer-right .bp-card .bp-card-front .bp-card-title {
    color: var(--color-white)
}

.bp-whatWeOffer .what-we-offer-right .bp-card .bp-card-back {
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    text-align: left;
    padding: .8rem;
    position: relative
}

.bp-whatWeOffer .what-we-offer-right .bp-card .bp-card-title {
    font-size: 1.13rem;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    color: var(--color-white)
}

.bp-whatWeOffer .what-we-offer-right .bp-card .bp-card-description {
    font-size: .95rem;
    margin-top: .3125rem;
    font-weight: 200;
    color: var(--color-white)
}

.bp-whatWeOffer .what-we-offer-right .bp-card:nth-child(3) .bp-card-back,
.bp-whatWeOffer .what-we-offer-right .bp-card:nth-child(5) .bp-card-back,
.bp-whatWeOffer .what-we-offer-right .bp-card:nth-child(7) .bp-card-back {
    color: #2c2c2c
}

.bp-whatWeOffer .what-we-offer-right .bp-card:nth-child(3) .bp-card-back .bp-card-title,
.bp-whatWeOffer .what-we-offer-right .bp-card:nth-child(5) .bp-card-back .bp-card-title,
.bp-whatWeOffer .what-we-offer-right .bp-card:nth-child(7) .bp-card-back .bp-card-title {
    color: #2c2c2c
}

.bp-whatWeOffer .what-we-offer-right .bp-card:nth-child(3) .bp-card-back .bp-card-description,
.bp-whatWeOffer .what-we-offer-right .bp-card:nth-child(5) .bp-card-back .bp-card-description,
.bp-whatWeOffer .what-we-offer-right .bp-card:nth-child(7) .bp-card-back .bp-card-description {
    color: #2c2c2c
}

.bp-whatWeOffer .what-we-offer-right .bp-card:nth-child(3) .bp-card-back .bp-card-image,
.bp-whatWeOffer .what-we-offer-right .bp-card:nth-child(5) .bp-card-back .bp-card-image,
.bp-whatWeOffer .what-we-offer-right .bp-card:nth-child(7) .bp-card-back .bp-card-image {
    filter: brightness(0) invert(0)
}

.bp-whatWeOffer .what-we-offer-right .bp-card .bp-card-image {
    position: absolute;
    top: 1.225rem;
    left: 1.225rem;
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
    transition: filter .3s ease;
    z-index: 2
}

.bp-whatWeOffer .what-we-offer-right .bp-card .bp-card-back .bp-card-image {
    position: absolute;
    top: 1.225rem;
    left: 1.225rem;
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover
}

.bp-whatWeOffer .what-we-offer-right .bp-card .bp-card-back .bp-card-title {
    font-size: 1.125rem;
    margin-top: 2.5rem;
    line-height: 1.35rem
}

.bp-whatWeOffer .bp-pagination-buttons {
    display: flex;
    gap: 10px;
    position: absolute;
    right: 3%;
    bottom: 28%;
    z-index: 2
}

.bp-whatWeOffer .bp-slider-icon .bp-left-icon,
.bp-whatWeOffer .bp-slider-icon .bp-right-icon {
    cursor: pointer;
    background-color: #fbc51d;
    color: #2c2c2c;
    border-radius: 50%;
    font-size: 2.25rem;
    padding: .5rem;
    height: 2rem;
    width: 2rem;
    display: flex;
    opacity: 0
}

.bp-whatWeOffer .bp-sactive {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    margin: 2rem auto;
    opacity: 0
}

.bp-whatWeOffer .bp-sactive .bp-page {
    height: .5rem;
    width: .5rem;
    border-radius: 50%;
    background-color: #da1e3733;
    transition: background-color .3s ease
}

.bp-whatWeOffer .bp-sactive .bp-page.bp-active-page {
    background-color: #da1e37
}

@media (max-width: 1366px) {
    .bp-whatWeOffer {
        padding: 3% 6%
    }
}

@media (max-width: 1024px) {
    .bp-whatWeOffer {
        padding: 5% 3%
    }

    .bp-whatWeOffer .what-we-offer-left {
        margin-right: .5%
    }

    .bp-whatWeOffer .what-we-offer-left h2 {
        font-size: 2rem;
        line-height: 2.60875rem
    }
}

@media (max-width: 768px) {
    .bp-whatWeOffer {
        flex-direction: column;
        text-align: left;
        position: relative;
        width: 100%;
        padding-bottom: 12%
    }

    .bp-whatWeOffer .carousel-cell {
        width: 56%;
        margin-right: 10px
    }

    .bp-whatWeOffer .flickity-page-dots {
        bottom: -25px
    }

    .bp-whatWeOffer .flickity-page-dot {
        margin: 0 5px
    }

    .bp-whatWeOffer .flickity-prev-next-button {
        width: 30px;
        height: 30px
    }

    .bp-whatWeOffer .flickity-prev-next-button.next {
        right: -10px
    }

    .bp-whatWeOffer .flickity-prev-next-button.previous {
        left: -10px
    }

    .bp-whatWeOffer .bp-whyarena-btn {
        padding: 15px;
        border-radius: 10px;
        font-size: 1rem
    }

    .bp-whatWeOffer .bp-video-background {
        width: 100%;
        height: auto;
        scale: 1.2;
        position: relative;
        margin-bottom: 20px
    }

    .bp-whatWeOffer .what-we-offer-left {
        width: 100%;
        text-align: left;
        margin: 15px auto
    }

    .bp-whatWeOffer .what-we-offer-left h2 {
        font-size: 2rem;
        line-height: normal
    }

    .bp-whatWeOffer .what-we-offer-left p {
        font-size: 1.15rem;
        line-height: 1.7
    }

    .bp-whatWeOffer .what-we-offer-right {
        grid-template-columns: repeat(1, 1fr)
    }

    .bp-whatWeOffer .what-we-offer-right .bp-card {
        flex: 0 0 48%;
        scroll-snap-align: start;
        width: 100%;
        padding-top: 10%;
        height: 280px
    }

    .bp-whatWeOffer .what-we-offer-right .bp-card .bp-card-back .bp-card-title {
        font-size: 1.05rem;
        padding-top: 2rem;
        margin-bottom: 10px
    }

    .bp-whatWeOffer .what-we-offer-right .bp-card .bp-card-back .bp-card-description {
        font-size: .9rem
    }

    .bp-whatWeOffer .what-we-offer-right .bp-card .bp-card-back .bp-card-image {
        position: absolute;
        top: 1.225rem;
        left: 1.225rem;
        object-fit: cover
    }

    .bp-whatWeOffer .what-we-offer-right .bp-card .bp-card-inner {
        transform: rotateY(180deg)
    }

    .bp-whatWeOffer .what-we-offer-right .bp-card:nth-child(1) .bp-card-back,
    .bp-whatWeOffer .what-we-offer-right .bp-card:nth-child(5) .bp-card-back,
    .bp-whatWeOffer .what-we-offer-right .bp-card:nth-child(7) .bp-card-back {
        color: #2c2c2c
    }

    .bp-whatWeOffer .what-we-offer-right .bp-card:nth-child(1) .bp-card-back .bp-card-title,
    .bp-whatWeOffer .what-we-offer-right .bp-card:nth-child(5) .bp-card-back .bp-card-title,
    .bp-whatWeOffer .what-we-offer-right .bp-card:nth-child(7) .bp-card-back .bp-card-title {
        color: #2c2c2c
    }

    .bp-whatWeOffer .what-we-offer-right .bp-card:nth-child(1) .bp-card-back .bp-card-description,
    .bp-whatWeOffer .what-we-offer-right .bp-card:nth-child(5) .bp-card-back .bp-card-description,
    .bp-whatWeOffer .what-we-offer-right .bp-card:nth-child(7) .bp-card-back .bp-card-description {
        color: #2c2c2c
    }

    .bp-whatWeOffer .what-we-offer-right .bp-card:nth-child(1) .bp-card-back .bp-card-image,
    .bp-whatWeOffer .what-we-offer-right .bp-card:nth-child(5) .bp-card-back .bp-card-image,
    .bp-whatWeOffer .what-we-offer-right .bp-card:nth-child(7) .bp-card-back .bp-card-image {
        filter: brightness(0) invert(0)
    }

    .bp-whatWeOffer .bp-pagination-buttons .bp-slider-icon,
    .bp-whatWeOffer .bp-sactive {
        opacity: 1
    }
}

.partner-testimonials {
    text-align: center;
    position: relative;
    max-width: 100%;
    margin: auto;
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: var(--color-white)
}

.partner-testimonials .bp-container {
    max-width: 88%;
    margin: 0 auto
}

.partner-testimonials .heading {
    font-size: 3rem;
    font-weight: 400;
    line-height: 4.5rem;
    color: var(--color-red);
    text-shadow: 0 .2rem .3rem rgba(0, 0, 0, .3);
    margin-bottom: 20px;
    text-align: left
}

.partner-testimonials .testimonial-carousel {
    width: 100%
}

.partner-testimonials .testimonial-carousel .testimonial-card {
    flex: 0 0 auto;
    margin: 0 12px 15px;
    width: calc(33.3333333333% - 30px)
}

.partner-testimonials .testimonial-carousel .flickity-viewport {
    overflow: hidden
}

.partner-testimonials .testimonial-carousel .flickity-button {
    background: #facc15;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    opacity: .95;
    box-shadow: 0 4px 6px #0003;
    transition: transform .2s ease
}

.partner-testimonials .testimonial-carousel .flickity-prev-next-button .flickity-button-icon {
    left: 26%;
    top: 26%
}

.partner-testimonials .testimonial-carousel .flickity-button:hover {
    background: #eab308
}

.partner-testimonials .testimonial-carousel .flickity-button-icon {
    fill: var(--color-white);
    width: 20px;
    height: 20px
}

.partner-testimonials .testimonial-carousel .flickity-page-dots {
    bottom: -30px
}

.partner-testimonials .testimonial-carousel .flickity-page-dots .dot {
    width: 12px;
    height: 12px;
    margin: 0 6px;
    background: #f87171;
    opacity: .5;
    border-radius: 50%;
    transition: opacity .3s, transform .3s
}

.partner-testimonials .testimonial-carousel .flickity-page-dots .dot.is-selected {
    opacity: 1;
    transform: scale(1.3)
}

.partner-testimonials .testimonial-card {
    background: var(--color-white);
    border-radius: 12px;
    padding: 28px 24px;
    width: 360px;
    min-height: 410px;
    box-shadow: 0 6px 10px #00000014;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 10px 16px;
    height: auto
}

.partner-testimonials .testimonial-card p {
    color: #2c2c2c;
    font-size: .95rem;
    line-height: 1.6;
}

.partner-testimonials .testimonial-card .quote-mark {
    color: #facc15;
    font-size: 22px;
    font-weight: 700;
    padding: 0 5px
}

.partner-testimonials .testimonial-card .read-more {
    color: #fbc51d;
    font-weight: 600;
    margin-left: 4px;
    background: none;
    border: none;
    cursor: pointer;
    transition: color .2s
}

.partner-testimonials .testimonial-card .read-more:hover {
    color: #000;
    text-decoration: underline
}

.partner-testimonials .partner-info {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center
}

.partner-testimonials .partner-info img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 2px solid #FBC51D;
    box-shadow: 0 2px 6px #00000026
}

.partner-testimonials .partner-info p {
    margin-top: 8px;
    font-weight: 600;
    color: var(--color-red);
    font-size: 1rem;
    letter-spacing: 1px
}

.partner-testimonials .partner-cta {
    margin-top: 50px;
    background: #facc15;
    color: #111;
    font-size: 1rem;
    font-weight: 700;
    padding: 14px 36px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: background .3s, transform .2s;
    box-shadow: 0 4px 10px #00000026
}

.partner-testimonials .partner-cta:hover {
    background: #e6b800;
    transform: translateY(-2px)
}

.partner-testimonials .modal-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #0009;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50
}

.partner-testimonials .modal-content {
    background: var(--color-red);
    padding: 28px;
    border-radius: 16px;
    max-width: 640px;
    width: 90%;
    position: relative;
    box-shadow: 0 6px 20px #0003;
    animation: scaleUp .3s ease;
    text-align: left
}

.partner-testimonials .modal-content p {
    color: var(--color-white)
}

.partner-testimonials .close-btn {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    font-size: 22px;
    color: var(--color-white);
    cursor: pointer;
    transition: color .2s
}

.partner-testimonials .close-btn:hover {
    color: #111
}

.partner-testimonials .modal-partner {
    margin-top: 24px
}

@keyframes scaleUp {
    0% {
        transform: scale(.9);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

@media (max-width: 1024px) {
    .partner-testimonials .bp-container {
        max-width: 90%
    }

    .partner-testimonials .testimonial-carousel .testimonial-card {
        width: calc(50% - 24px)
    }
}

@media (max-width: 768px) {
    .partner-testimonials {
        padding-top: 40px;
        padding-bottom: 40px
    }

    .partner-testimonials .bp-container {
        max-width: 88%
    }

    .partner-testimonials .heading {
        font-size: 2rem;
        line-height: 2.75rem;
        text-align: center
    }

    .partner-testimonials .partner-cta {
        padding: 15px
    }

    .partner-testimonials .testimonial-carousel .flickity-prev-next-button.next {
        right: -10px
    }

    .partner-testimonials .testimonial-carousel .flickity-prev-next-button.previous {
        left: -10px
    }

    .partner-testimonials .testimonial-carousel .flickity-button {
        width: 35px;
        height: 35px
    }

    .partner-testimonials .testimonial-carousel .flickity-prev-next-button .flickity-button-icon {
        left: 20%;
        top: 20%
    }

    .partner-testimonials .testimonial-carousel .testimonial-card {
        width: calc(100% - 24px);
        margin: 0 10px 10px;
        padding: 24px 20px;
        min-height: 280px
    }
}

@media (max-width: 420px) {
    .partner-testimonials .testimonial-carousel .testimonial-card {
        min-height: 480px
    }
}

.section-thankyou {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0
}

.section-thankyou .thankyou__container {
    width: 100%;
    height: calc(100vh - 200px);
    padding: 2rem 1.5rem;
    background: #fbc51d12;
    box-shadow: 0 0 20px #0000000d;
    overflow: hidden
}

.section-thankyou .thankyou-content h1 {
    font-size: 3.5rem;
    text-align: center
}

.section-thankyou .thankyou-content h3 {
    font-size: 2.75rem;
    font-weight: 400;
    text-align: center;
    margin-bottom: 30px
}

.section-thankyou .thankyou-content p {
    font-size: 1.5rem;
    font-weight: 400;
    padding-bottom: 20px;
    text-align: center
}

.section-thankyou .text-redirect {
    font-style: italic
}

.section-thankyou .text-redirect span {
    color: red
}

.header {
    padding: .5rem
}

.header .logo img {
    height: 66px;
    object-fit: contain;
    width: auto;
    margin: 0 10px
}

@media screen and (max-width: 768px) {
    .section-thankyou .thankyou__container {
        height: calc(100vh - 200px)
    }

    .section-thankyou .thankyou-content h1 {
        font-size: 2.95rem
    }

    .section-thankyou .thankyou-content h3 {
        font-size: 2.25rem
    }

    .section-thankyou .thankyou-content p {
        font-size: 1.5rem
    }
}

.AAIPPHero .hero {
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 58.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.AAIPPHero .hero .bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.AAIPPHero .hero .navlinks {
    z-index: 1;
    display: flex;
    cursor: pointer
}

.AAIPPHero .hero .navlinks ul {
    position: absolute;
    top: 6vh;
    left: 7%;
    display: flex;
    justify-content: space-between;
    list-style: none;
    gap: 10px
}

.AAIPPHero .hero .navlinks ul li {
    color: var(--color-white)
}

.AAIPPHero .hero .navlinks ul li a {
    font-size: 16px;
    color: var(--color-white);
    text-decoration: none
}

.AAIPPHero .hero .navlinks ul .nav {
    padding: 1px 2px
}

.AAIPPHero .hero .navlinks ul .nav img {
    width: 24px;
    height: 24px
}

.AAIPPHero .hero .content {
    z-index: 3;
    width: 60%
}

.AAIPPHero .hero .content h1 {
    z-index: 1;
    color: var(--color-white);
    text-align: center;
    text-shadow: 0px .21vw .21vw rgba(0, 0, 0, .3);
    /* font-family: 'Sora-SemiBold'; */
    font-size: 2.92vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.AAIPPHero .hero .content p {
    color: var(--color-white);
    text-align: center;
    font-size: 1.3vw;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

@media (max-width: 1536px) {
    .AAIPPHero .hero {
        height: 55vh
    }

    .AAIPPHero .hero .content {
        width: 65%
    }

    .AAIPPHero .hero .content h1 {
        font-size: 3.25vw
    }

    .AAIPPHero .hero .content p {
        font-size: 1.4vw
    }

    .AAIPPHero .hero .navlinks ul {
        top: 5.5vh
    }

    .AAIPPHero .hero .navlinks ul li a {
        font-size: 15px
    }

    .AAIPPHero .hero .navlinks ul .nav img {
        width: 22px;
        height: 22px
    }
}

@media (max-width: 1440px) {
    .AAIPPHero .hero {
        height: 52vh
    }

    .AAIPPHero .hero .content {
        width: 70%
    }

    .AAIPPHero .hero .content h1 {
        font-size: 3.5vw
    }

    .AAIPPHero .hero .content p {
        font-size: 1.5vw
    }

    .AAIPPHero .hero .navlinks ul {
        top: 5vh
    }

    .AAIPPHero .hero .navlinks ul li a {
        font-size: 14px
    }

    .AAIPPHero .hero .navlinks ul .nav img {
        width: 21px;
        height: 21px
    }
}

@media (max-width: 1280px) {
    .AAIPPHero .hero {
        height: 48vh
    }

    .AAIPPHero .hero .content {
        width: 75%
    }

    .AAIPPHero .hero .content h1 {
        font-size: 3.75vw
    }

    .AAIPPHero .hero .content p {
        font-size: 1.6vw
    }

    .AAIPPHero .hero .navlinks ul {
        top: 4.5vh;
        left: 6%
    }

    .AAIPPHero .hero .navlinks ul li a {
        font-size: 13px
    }

    .AAIPPHero .hero .navlinks ul .nav img {
        width: 20px;
        height: 20px
    }
}

@media (max-width: 480px) {
    .AAIPPHero .hero {
        height: 30vh
    }

    .AAIPPHero .hero .navlinks ul {
        top: 2vh;
        left: 5%;
        gap: 5px
    }

    .AAIPPHero .hero .navlinks ul li,
    .AAIPPHero .hero .navlinks ul li a {
        font-size: 12px
    }

    .AAIPPHero .hero .navlinks ul .nav {
        padding: 0 1px;
        scale: .6
    }

    .AAIPPHero .hero .content {
        width: 100%
    }

    .AAIPPHero .hero .content h1 {
        font-size: 6vw;
        padding: 0 10px
    }

    .AAIPPHero .hero .content h1 span {
        font-size: 6vw
    }
}

.AAIPPSubHero {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 120px;
    position: relative;
    background: var(--color-medium-light);
}

.AAIPPSubHero .block {
    position: absolute;
    background: var(--color-red);
    width: 300px;
    height: 386px;
    right: 81px;
    bottom: 94px;
    z-index: 1
}

.AAIPPSubHero .right {
    position: relative;
    width: 55.4%;
    background-color: var(--color-warning);
    padding: 64px 23px;
    height: 418px;
    z-index: 2
}

.AAIPPSubHero .right p {
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.AAIPPSubHero .right p a {
    text-decoration: none
}

.AAIPPSubHero .left {
    position: relative;
    left: 5%;
    width: 48%;
    height: 596px
}

.AAIPPSubHero .left img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media (max-width: 1536px) {
    .AAIPPSubHero {
        padding: 40px 100px
    }

    .AAIPPSubHero .block {
        width: 280px;
        height: 360px;
        right: 70px;
        bottom: 80px
    }

    .AAIPPSubHero .right {
        width: 58%;
        padding: 56px 20px;
        height: 400px
    }

    .AAIPPSubHero .right p {
        font-size: 22px
    }

    .AAIPPSubHero .left {
        width: 45%;
        height: 570px
    }
}

@media (max-width: 1440px) {
    .AAIPPSubHero {
        padding: 40px 80px
    }

    .AAIPPSubHero .block {
        width: 260px;
        height: 340px;
        right: 60px;
        bottom: 70px
    }

    .AAIPPSubHero .right {
        width: 60%;
        padding: 48px 18px;
        height: 380px
    }

    .AAIPPSubHero .right p {
        font-size: 21px
    }

    .AAIPPSubHero .left {
        width: 44%;
        height: 540px
    }
}

@media (max-width: 1280px) {
    .AAIPPSubHero {
        padding: 30px 60px
    }

    .AAIPPSubHero .block {
        width: 240px;
        height: 300px;
        right: 50px;
        bottom: 60px
    }

    .AAIPPSubHero .right {
        width: 62%;
        padding: 40px 16px;
        height: 360px
    }

    .AAIPPSubHero .right p {
        font-size: 20px
    }

    .AAIPPSubHero .left {
        width: 42%;
        height: 500px
    }
}

@media (max-width: 991px) {
    .AAIPPSubHero .right p {
        font-size: 18px
    }
}

@media (max-width: 850px) {
    .AAIPPSubHero {
        flex-direction: column-reverse;
        padding: 40px 0;
        justify-content: center;
        align-items: center
    }

    .AAIPPSubHero .right {
        width: 80%;
        padding: 40px 17px;
        height: max-content
    }

    .AAIPPSubHero .right p {
        font-size: 16px
    }

    .AAIPPSubHero .left {
        left: 0;
        top: -35px;
        z-index: 0;
        height: 321px;
        width: 90%;
        position: relative
    }

    .AAIPPSubHero .left img {
        object-fit: inherit;
        margin-top: 20px;
    }

    .AAIPPSubHero .block {
        width: 45%;
        height: 192px;
        z-index: 0;
        top: 15px;
        left: 20px
    }
}

@media (max-width: 575px) {
    .AAIPPSubHero .left img {
        object-fit: cover;
    }
}

.AAIPPSkills {
    margin-top: 80px;
    padding: 3.48% 6.2%;
    width: 100%;
    height: 949px;
    display: flex;
    gap: 1%
}

.AAIPPSkills .left {
    width: 52%
}

.AAIPPSkills .left .top {
    color: var(--color-red);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.AAIPPSkills .left .termTabs {
    width: max-content
}

.AAIPPSkills .left .termTabs button {
    padding: 10px 30.1px;
    border-radius: 10px 10px 0 0;
    border-bottom: none;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.AAIPPSkills .left .termContent {
    height: 100%;
    background: var(--darkblue, linear-gradient(249deg, #1c325b 1.17%, #3b6ac1 59.08%));
    padding: 40px
}

.AAIPPSkills .left .termContent h2 {
    padding: 20px;
    color: var(--color-white);
    font-size: 37px;
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    margin-bottom: 0px;
}

.AAIPPSkills .left .termContent ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-left: 15px
}

.AAIPPSkills .left .termContent ul li {
    letter-spacing: 1px;
    color: var(--color-white);
    font-size: 22px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.AAIPPSkills .left .termContent-1, .AAIPPSkills .left .termContent-5 {
    background: linear-gradient(249deg, #1c325b 1.17%, #3b6ac1 59.08%)
}

.AAIPPSkills .left .termContent-2, .AAIPPSkills .left .termContent-6 {
    background: linear-gradient(103deg, #d33519 2.06%, #ff634780)
}

.AAIPPSkills .left .termContent-3, .AAIPPSkills .left .termContent-7 {
    background: linear-gradient(104deg, #378509 4.41%, #72bf4480)
}

.AAIPPSkills .left .termContent-4, .AAIPPSkills .left .termContent-8 {
    background: linear-gradient(102deg, #b30225 1.21%, #dc143c80)
}

.AAIPPSkills .left .termTab-1.active, .AAIPPSkills .left .termTab-5.active {
    background: #3b6ac1;
    color: var(--color-white)
}

.AAIPPSkills .left .termTab-2.active, .AAIPPSkills .left .termTab-6.active {
    background: #d64026e6;
    color: var(--color-white)
}

.AAIPPSkills .left .termTab-3.active, .AAIPPSkills .left .termTab-7.active {
    background: #3a9506cf;
    color: var(--color-white)
}

.AAIPPSkills .left .termTab-4.active, .AAIPPSkills .left .termTab-8.active {
    background: #d50a33c1;
    color: var(--color-white)
}

.AAIPPSkills .right {
    width: 47%;
    height: 943px
}

.AAIPPSkills .right img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media (max-width: 1536px) {
    .AAIPPSkills {
        height: max-content;
        padding: 3% 5%
    }

    .AAIPPSkills .left {
        width: 54%;
        height: 730px
    }

    .AAIPPSkills .left .top {
        font-size: 52px
    }

    .AAIPPSkills .left .termTabs button {
        padding: 9px 25.5px;
        font-size: 22px
    }

    .AAIPPSkills .left .termContent {
        padding: 35px
    }

    .AAIPPSkills .left .termContent ul {
        gap: 16px
    }

    .AAIPPSkills .left .termContent ul li {
        font-size: 22px
    }

    .AAIPPSkills .right {
        width: 45%;
        height: 850px
    }
}

@media (max-width: 1440px) {
    .AAIPPSkills {
        height: 800px;
        padding: 2.5% 4.5%
    }

    .AAIPPSkills .left {
        width: 55%;
        height: 680px
    }

    .AAIPPSkills .left .top {
        font-size: 48px
    }

    .AAIPPSkills .left .termTabs button {
        padding: .8vw 1.6vw;
        font-size: 20px
    }

    .AAIPPSkills .left .termContent {
        padding: 30px
    }

    .AAIPPSkills .left .termContent h2 {
        font-size: 34px
    }

    .AAIPPSkills .left .termContent ul {
        gap: 14px
    }

    .AAIPPSkills .left .termContent ul li {
        font-size: 20px
    }

    .AAIPPSkills .right {
        width: 44%;
        height: 800px
    }
}

@media (max-width: 1280px) {
    .AAIPPSkills {
        height: 700px;
        padding: 2.5% 4%
    }

    .AAIPPSkills .left {
        width: 56%;
        height: 600px
    }

    .AAIPPSkills .left .top {
        font-size: 44px
    }

    .AAIPPSkills .left .termTabs button {
        padding: 0.5vw 1vw;
        font-size: 18px
    }

    .AAIPPSkills .left .termContent {
        padding: 25px
    }

    .AAIPPSkills .left .termContent h2 {
        font-size: 30px
    }

    .AAIPPSkills .left .termContent ul {
        gap: 12px
    }

    .AAIPPSkills .left .termContent ul li {
        font-size: 17px
    }

    .AAIPPSkills .right {
        width: 43%;
        height: 700px
    }
}

@media (max-width: 991px) {
    .AAIPPSkills {
        margin-top: 30px;
        flex-direction: column;
        height: max-content;
        gap: 15px
    }

    .AAIPPSkills .left {
        width: 100%;
        height: max-content
    }

    .AAIPPSkills .left .top {
        padding-bottom: 10px;
    }

    .AAIPPSkills .left .termTabs .termTab {
        padding: 5px 6px;
        font-size: 18px;
        width: 85px;
        height: 40px
    }

    .AAIPPSkills .left .termContent {
        padding: 15px
    }

    .AAIPPSkills .left .termContent h2 {
        padding: 4px;
        margin: 0;
    }

    .AAIPPSkills .left .termContent ul {
        padding: 10px;
        gap: 10px;
        margin-left: 20px
    }

    .AAIPPSkills .right {
        width: 100%;
        height: 560px
    }

    .AAIPPSkills .right img {
        object-fit: inherit;
    }
}

@media (max-width: 767px) {
    .AAIPPSkills .right {
        height: 460px
    }
}

@media (max-width: 575px) {
    .AAIPPSkills .right {
        height: 321px
    }

    .AAIPPSkills .left .top {
        font-size: 24px
    }

    .AAIPPSkills .left .termTabs .termTab {
        font-size: 14px;
        width: 65px;
    }

    .AAIPPSkills .left .termContent h2 {
        padding: 0;
        font-size: 18px;
        margin: 8px;
    }

    .AAIPPSkills .left .termContent ul li {
        font-size: 16px
    }
}

@media (max-width: 450px) {
    .AAIPPSkills .left .termTabs .termTab {
        font-size: 14px;
        width: 46px;
        height: 46px;
    }
}

.AAIPPTools {
    display: flex;
    margin-top: 80px;
    padding: 3.48% 6.2%;
    width: 100%;
    background: var(--color-medium-light);
}

.AAIPPTools .left {
    height: 800px;
    width: 42%
}

.AAIPPTools .left img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.AAIPPTools .right {
    gap: 30px;
    height: 800px;
    background: var(--color-secondary-light);
    width: 57%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center
}

.AAIPPTools .right .top {
    padding: 10px 40px;
    color: var(--color-red);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.AAIPPTools .right .bottom {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    overflow-y: scroll;
    scroll-behavior: smooth;
    height: 520px;
    justify-content: center;
    align-items: center;
    row-gap: 20px;
    gap: 20px
}

.AAIPPTools .right .bottom .tool {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 30%;
    gap: 10px
}

.AAIPPTools .right .bottom .tool img {
    width: 78px;
    height: 65px;
    object-fit: contain
}

.AAIPPTools .right .bottom .tool p {
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 1536px) {
    .AAIPPTools {
        padding: 3.2% 5.8%
    }

    .AAIPPTools .left {
        height: 750px;
        width: 43%
    }

    .AAIPPTools .right {
        height: 750px;
        width: 56%;
        gap: 25px
    }

    .AAIPPTools .right .top {
        font-size: 50px;
        padding: 10px 35px
    }

    .AAIPPTools .right .bottom {
        gap: 18px;
        height: 600px;
        padding: 2%
    }

    .AAIPPTools .right .bottom .tool {
        width: 30%
    }

    .AAIPPTools .right .bottom .tool img {
        object-fit: contain;
        width: 65px;
        height: 63px
    }

    .AAIPPTools .right .bottom .tool p {
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .AAIPPTools {
        padding: 3% 5%
    }

    .AAIPPTools .left {
        height: 700px;
        width: 44%
    }

    .AAIPPTools .right {
        height: 700px;
        width: 55%;
        gap: 22px
    }

    .AAIPPTools .right .top {
        font-size: 46px;
        padding: 10px 30px
    }

    .AAIPPTools .right .bottom {
        gap: 12px;
        height: 470px
    }

    .AAIPPTools .right .bottom .tool {
        width: 32%
    }

    .AAIPPTools .right .bottom .tool img {
        object-fit: contain;
        width: 54px;
        height: 54px
    }

    .AAIPPTools .right .bottom .tool p {
        font-size: 20px
    }
}

@media (max-width: 1280px) {
    .AAIPPTools {
        padding: 5% 4%
    }

    .AAIPPTools .left {
        height: 650px;
        width: 45%
    }

    .AAIPPTools .right {
        height: 650px;
        width: 54%;
        gap: 20px
    }

    .AAIPPTools .right .top {
        font-size: 42px;
        padding: 10px 25px
    }

    .AAIPPTools .right .bottom {
        gap: 10px;
        height: 450px
    }

    .AAIPPTools .right .bottom .tool {
        width: 32%
    }

    .AAIPPTools .right .bottom .tool img {
        object-fit: contain;
        width: 45px;
        height: 45px
    }

    .AAIPPTools .right .bottom .tool p {
        font-size: 18px
    }
}

@media (max-width: 991px) {
    .AAIPPTools .right .top {
        font-size: 32px;
    }

    .AAIPPTools .left img {
        object-fit: inherit;
    }
}

@media (max-width: 575px) {
    .AAIPPTools {
        flex-direction: column-reverse;
        height: max-content;
        margin-top: 20px;
        padding: 8% 4%
    }

    .AAIPPTools .right {
        padding: 10px;
        width: 100%;
        gap: 5px;
        height: max-content
    }

    .AAIPPTools .right .top {
        padding: 0 10px;
        font-size: 24px
    }

    .AAIPPTools .right .bottom {
        gap: 20px !important
    }

    .AAIPPTools .right .bottom .tool {
        width: 45%
    }

    .AAIPPTools .right .bottom .tool img {
        height: 36px;
        width: 36px
    }

    .AAIPPTools .right .bottom .tool p {
        text-align: center;
        font-size: 14px
    }

    .AAIPPTools .left {
        width: 100%;
        height: 321px
    }

    .AAIPPTools .left img {
        object-fit: cover;
    }
}

.AAIPPLearner {
    height: 481px;
    width: 100%;
    margin-top: 120px;
    padding: 0 5.2%;
    display: flex;
    gap: 20px
}

.AAIPPLearner .left {
    border: none;
    border-left: 2px solid #dc143c;
    width: 50%;
    padding-left: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px
}

.AAIPPLearner .left .title {
    text-align: left;
    color: var(--color-red);
    font-family: 'Sora-SemiBold';
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.AAIPPLearner .left .desc {
    text-align: left;
    height: max-content;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.AAIPPLearner .left .desc a {
    text-decoration: none
}

.AAIPPLearner .right {
    width: 49%;
    height: 100%
}

.AAIPPLearner .right img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media (max-width: 1536px) {
    .AAIPPLearner {
        height: 440px;
        margin-top: 100px;
        padding: 0 5%
    }

    .AAIPPLearner .left {
        padding-left: 18px
    }

    .AAIPPLearner .left .title {
        font-size: 42px
    }

    .AAIPPLearner .left .desc {
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .AAIPPLearner {
        height: 400px;
        margin-top: 80px;
        padding: 0 4.5%
    }

    .AAIPPLearner .left {
        padding-left: 15px
    }

    .AAIPPLearner .left .title {
        font-size: 36px
    }

    .AAIPPLearner .left .desc {
        font-size: 20px
    }
}

@media (max-width: 1280px) {
    .AAIPPLearner {
        height: 360px;
        margin-top: 60px;
        padding: 0 4%
    }

    .AAIPPLearner .left {
        padding-left: 12px
    }

    .AAIPPLearner .left .title {
        font-size: 30px
    }

    .AAIPPLearner .left .desc {
        font-size: 18px
    }
}

@media (max-width: 991px) {
    .AAIPPLearner .left .title {
        font-size: 24px;
    }

    .AAIPPLearner .left .desc {
        font-size: 16px
    }
}

@media (max-width: 800px) {
    .AAIPPLearner .left .desc {
        font-size: 15px
    }
}

@media (max-width: 767px) {
    .AAIPPLearner {
        margin-top: 40px;
        flex-direction: column;
        height: 100%
    }

    .AAIPPLearner .left {
        height: max-content;
        padding-left: 10px;
        width: 100%;
        gap: 10px
    }

    .AAIPPLearner .left .title {
        font-weight: 400
    }

    .AAIPPLearner .left .desc {
        font-size: 16px
    }

    .AAIPPLearner .right {
        height: 321px;
        width: 100%
    }
}

.AAIPPCareer {
    display: flex;
    margin-top: 80px;
    padding: 3.48% 6.2%;
    width: 100%;
    height: max-content;
    background: var(--color-primary-light);
}

.AAIPPCareer .left {
    height: 800px;
    width: 42%
}

.AAIPPCareer .left img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.AAIPPCareer .right {
    gap: 30px;
    height: 800px;
    background: var(--color-secondary-light);
    width: 57%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center
}

.AAIPPCareer .right .top {
    padding: 10px 40px;
    color: var(--color-red);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.AAIPPCareer .right .bottom {
    padding-bottom: 4%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    overflow-y: scroll;
    scroll-behavior: smooth;
    height: max-content;
    justify-content: center;
    align-items: flex-start;
    row-gap: 20px;
    gap: 20px
}

.AAIPPCareer .right .bottom .career {
    border-radius: 10px;
    border: 1px solid var(--color-red);
    background: var(--color-warning);
    height: 105px;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 30%;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

@media (max-width: 1536px) {
    .AAIPPCareer {
        height: max-content;
        padding: 3.2% 5.8%
    }

    .AAIPPCareer .left,
    .AAIPPCareer .right {
        height: 750px
    }

    .AAIPPCareer .right .top {
        font-size: 48px;
        padding: 10px 32px
    }

    .AAIPPCareer .right .bottom .career {
        height: 95px;
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .AAIPPCareer {
        height: max-content;
        padding: 3% 5%
    }

    .AAIPPCareer .left,
    .AAIPPCareer .right {
        height: 730px
    }

    .AAIPPCareer .right .top {
        font-size: 42px;
        padding: 8px 28px
    }

    .AAIPPCareer .right .bottom .career {
        height: 90px;
        font-size: 20px
    }
}

@media (max-width: 1280px) {
    .AAIPPCareer {
        height: max-content;
        padding: 2.8% 4.5%
    }

    .AAIPPCareer .left,
    .AAIPPCareer .right {
        height: 600px
    }

    .AAIPPCareer .right .top {
        font-size: 36px;
        padding: 6px 24px
    }

    .AAIPPCareer .right .bottom .career {
        height: 80px;
        font-size: 18px
    }
}

@media (max-width: 1060px) {
    .AAIPPCareer .right .bottom .career {
        font-size: 16px
    }
}

@media (max-width: 991px) {
    .AAIPPCareer {
        flex-direction: column-reverse;
        height: max-content;
        margin-top: 20px;
        padding: 5% 4.5%
    }

    .AAIPPCareer .right {
        padding: 10px;
        width: 100%;
        gap: 5px;
        height: max-content
    }

    .AAIPPCareer .right .top {
        padding: 15px;
        font-size: 24px;
        font-weight: 400
    }

    .AAIPPCareer .right .bottom {
        gap: 20px !important
    }

    .AAIPPCareer .right .bottom .career {
        width: 45%;
        height: 55px;
        text-align: center;
        font-size: 18px
    }

    .AAIPPCareer .left {
        width: 100%;
        height: 500px;
    }
}

@media (max-width: 767px) {
    .AAIPPCareer .left {
        height: 400px;
    }
}

@media (max-width: 575px) {
    .AAIPPCareer {
        padding: 8% 4.5%
    }

    .AAIPPCareer .right .bottom .career {
        font-size: 16px
    }

    .AAIPPCareer .left {
        width: 100%;
        height: 321px;
    }
}

@media (max-width: 380px) {
    .AAIPPCareer .right .bottom .career {
        font-size: 14px
    }
}

.Brochure {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 48px;
    background: var(--color-medium-light);
}

.Brochure .download {
    text-decoration: none;
    cursor: pointer;
    display: flex;
    width: 15%;
    height: 50px;
    padding: 12px 26px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    background: var(--color-red);
    color: var(--color-white);
    font-size: 18px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

@media (max-width: 1536px) {
    .Brochure .download {
        width: 18%;
        height: 48px;
        font-size: 17px;
        padding: 10px 22px
    }
}

@media (max-width: 1440px) {
    .Brochure .download {
        width: 20%;
        height: 46px;
        font-size: 16px;
        padding: 10px 20px
    }
}

@media (max-width: 1280px) {
    .Brochure .download {
        width: 22%;
        height: 44px;
        font-size: 15px;
        padding: 8px 18px
    }
}

@media (max-width: 850px) {
    .Brochure {
        padding-bottom: 30px;
    }

    .Brochure .download {
        width: 32%;
    }
}

@media (max-width: 575px) {
    .Brochure .download {
        width: 70%;
        font-size: 16px
    }
}

.AAIPPRightFit {
    display: flex;
    flex-direction: row-reverse;
    padding: 3.28% 2.2%;
    justify-content: space-between
}

.AAIPPRightFit .left {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 43%
}

.AAIPPRightFit .left .title {
    color: var(--color-red);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

.AAIPPRightFit .left .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.AAIPPRightFit .left .image {
    width: 100%;
    height: 628px
}

.AAIPPRightFit .left .image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.AAIPPRightFit .right {
    width: 55%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px
}

.AAIPPRightFit .right .navigate {
    display: none;
    gap: 10px
}

.AAIPPRightFit .right .navigate .slider-icon {
    cursor: pointer !important;
    background-color: #fbc51d !important;
    color: #2c2c2c !important;
    border-radius: 50% !important;
    font-size: 14px !important;
    font-weight: 100 !important;
    padding: 6px 12px !important
}

.AAIPPRightFit .right .role {
    position: relative;
    width: 48.7%;
    height: 250px;
    overflow: hidden
}

.AAIPPRightFit .right .role .svg-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.AAIPPRightFit .right .role .svg-bg svg {
    width: 100%;
    height: 100%;
    display: block
}

.AAIPPRightFit .right .role .content {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-evenly;
    z-index: 1;
    padding: 20px;
    color: var(--color-white)
}

.AAIPPRightFit .right .role .content .title {
    color: var(--color-white);
    width: 70%;
    font-size: 32px;
    font-style: normal;
    font-weight: 650;
    line-height: normal
}

.AAIPPRightFit .right .role .content .desc {
    color: var(--color-white);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.AAIPPRightFit .right .role .content .icon {
    position: absolute;
    top: 5px;
    right: 10px
}

.AAIPPRightFit .right .role .content .icon img {
    width: 63px;
    height: 63px;
    object-fit: cover
}

@media (max-width: 1536px) {
    .AAIPPRightFit {
        padding: 3% 4.5%
    }

    .AAIPPRightFit .left {
        width: 45%;
        height: auto
    }

    .AAIPPRightFit .left .title {
        font-size: 48px
    }

    .AAIPPRightFit .left .desc {
        font-size: 22px
    }

    .AAIPPRightFit .left .image {
        height: 580px
    }

    .AAIPPRightFit .right {
        width: 52%;
        gap: 15px
    }

    .AAIPPRightFit .right .role {
        height: 230px
    }

    .AAIPPRightFit .right .role .content .title {
        font-size: 28px
    }

    .AAIPPRightFit .right .role .content .desc {
        font-size: 22px
    }

    .AAIPPRightFit .right .role .content .icon img {
        width: 56px;
        height: 56px
    }
}

@media (max-width: 1440px) {
    .AAIPPRightFit {
        padding: 2.8% 4.2%
    }

    .AAIPPRightFit .left {
        width: 47%;
        height: auto
    }

    .AAIPPRightFit .left .title {
        font-size: 42px
    }

    .AAIPPRightFit .left .desc {
        font-size: 20px
    }

    .AAIPPRightFit .left .image {
        height: 530px
    }

    .AAIPPRightFit .right {
        width: 50%;
        gap: 15px
    }

    .AAIPPRightFit .right .role {
        height: 215px
    }

    .AAIPPRightFit .right .role .content .title {
        font-size: 26px
    }

    .AAIPPRightFit .right .role .content .desc {
        font-size: 20px
    }

    .AAIPPRightFit .right .role .content .icon img {
        width: 42px;
        height: 42px
    }
}

@media (max-width: 1280px) {
    .AAIPPRightFit {
        padding: 2.6% 3.8%
    }

    .AAIPPRightFit .left {
        width: 48%;
        height: auto
    }

    .AAIPPRightFit .left .title {
        font-size: 36px
    }

    .AAIPPRightFit .left .desc {
        font-size: 18px
    }

    .AAIPPRightFit .left .image {
        height: 490px
    }

    .AAIPPRightFit .right {
        width: 50%;
        gap: 10px
    }

    .AAIPPRightFit .right .role {
        height: 200px
    }

    .AAIPPRightFit .right .role .content .title {
        font-size: 22px
    }

    .AAIPPRightFit .right .role .content .desc {
        font-size: 18px
    }
}

@media (max-width: 1199px) {
    .AAIPPRightFit .right .role .content .icon img {
        width: 36px;
        height: 36px
    }
    
    .AAIPPRightFit .right .role .content .title {
        font-size: 20px;
    }
    
    .AAIPPRightFit .right .role .content .desc {
        font-size: 16px;
    }
}

@media (max-width: 991px) {
    .AAIPPRightFit {
        flex-direction: column;
        gap: 5px
    }

    .AAIPPRightFit .left {
        width: 100%;
        gap: 10px;
        margin-bottom: 15px;
    }

    .AAIPPRightFit .left .title {
        font-size: 24px
    }

    .AAIPPRightFit .left .desc {
        font-size: 16px
    }

    .AAIPPRightFit .right {
        width: 100%;
        gap: 10px
    }

    .AAIPPRightFit .right .navigate {
        position: relative
    }

    .AAIPPRightFit .right .role {
        width: 49%;
    }

    .AAIPPRightFit .right .role .content .title {
        font-size: 20px
    }

    .AAIPPRightFit .right .role .content .desc {
        font-size: 18px
    }

    .AAIPPRightFit .right .role .content .icon img {
        width: 42px;
        height: 42px
    }

    .AAIPPRightFit .right .role .content .title {
        font-size: 22px
    }

    .AAIPPRightFit .right .role .content .desc {
        font-size: 18px
    }
}

@media (max-width: 575px) {
    .AAIPPRightFit {
        padding: 20px 3.8%;
    }

    .AAIPPRightFit .left .image {
        height: 321px
    }

    .AAIPPRightFit .right .role {
        width: 100%;
        height: 244px
    }
}

.BpPopupWrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #00000079;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 15px
}

.BpPopupWrapper .spinner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000000b3;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    z-index: 999
}

.BpPopupWrapper .BpPopup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.8);
    background-color: #f0f8ff;
    z-index: 1000;
    display: flex;
    justify-content: center;
    width: 90%;
    margin: auto;
    border-radius: 30px;
    max-width: 1030px
}

.BpPopupWrapper .BpPopup .BpClose {
    position: absolute;
    right: 2%;
    top: 2%;
    width: 35px;
    height: 35px;
    background: #000000f2;
    color: var(--color-white);
    font-size: 1.5rem;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    font-weight: 600;
    cursor: pointer;
    transition: transform .3s ease, opacity .3s ease
}

.BpPopupWrapper .BpPopup .BpClose:hover {
    transform: scale(1.2) rotate(90deg);
    opacity: .7
}

.BpPopupWrapper .BpPopup .enquiry-form-container {
    padding: 1rem .5rem;
    margin: 10px
}

.BpPopupWrapper .BpPopup .enquiry-form-container .form-title {
    color: var(--color-red);
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 2%
}

.BpPopupWrapper .BpPopup .enquiry-form-container .privacy-label {
    font-style: italic;
    font-size: .95rem
}

.BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem 2rem
}

@media (max-width: 768px) {
    .BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form {
        grid-template-columns: 1fr
    }
}

.BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form .input-group {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 450px
}

.BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form .input-group label {
    color: var(--GREY-COLOR, #2c2c2c);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: .8px;
    padding-bottom: .5rem
}

.BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form .input-group .input-field {
    background-color: transparent;
    margin-bottom: 1rem;
    color: var(--GREY-COLOR, #2c2c2c);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border-radius: 10px;
    border: 1px solid rgba(255, 30, 50, .3);
    padding: .75rem 1rem;
    height: 3.5rem
}

.BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form .input-group .input-field::placeholder {
    color: var(--GREY-COLOR, #999);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    opacity: 1
}

.BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form .input-group textarea.input-field {
    height: 5rem;
    padding-top: 1rem;
    resize: none
}

.BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form .input-group select.input-field {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    color: var(--GREY-COLOR, #2c2c2c);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form .input-group select.input-field option {
    color: #000
}

.BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form .privacy-checkbox {
    grid-column: span 2;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    color: #d1d1d1
}

.BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form .privacy-checkbox .checkbox-input {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: .125rem;
    border: 1px solid #f3f3f3;
    background-color: transparent;
    position: relative
}

.BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form .privacy-checkbox .checkbox-input:after {
    content: "";
    position: absolute;
    top: .1rem;
    left: .25rem;
    width: .3rem;
    height: .6rem;
    border: solid black;
    border-width: 0 .125rem .125rem 0;
    transform: rotate(45deg);
    opacity: 0
}

.BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form .privacy-checkbox .checkbox-input:checked {
    background-color: var(--color-white);
    border-color: var(--color-white)
}

.BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form .privacy-checkbox .checkbox-input:checked:after {
    opacity: 1
}

.BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form .privacy-checkbox label {
    color: var(--GREY-COLOR, #2c2c2c);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: .8px
}

.BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form .verify {
    font-size: 16px;
    padding-left: .1rem
}

.BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form .otp {
    font-size: 16px;
    color: #bc2329;
    margin-top: -1rem
}

.BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form .input-group-otp {
    display: flex;
    flex-direction: column;
    gap: .8rem
}

.BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form .input-group-otp .input-field {
    background-color: transparent;
    color: var(--GREY-COLOR, #2c2c2c);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border-radius: 10px;
    border: 1px solid rgba(255, 30, 50, .3);
    padding: .75rem 1rem;
    height: 3.5rem
}

.BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form .input-group-otp .input-field::placeholder {
    color: var(--GREY-COLOR, #2c2c2c);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    opacity: 1
}

.BpPopupWrapper .BpPopup .enquiry-form-container .image-container {
    display: flex;
    justify-content: center;
    margin-top: 2rem
}

.BpPopupWrapper .BpPopup .enquiry-form-container .image-container .enquiry-image {
    width: 100%;
    max-width: 350px;
    height: auto
}

.BpPopupWrapper .BpPopup .enquiry-form-container button {
    grid-column: span 2;
    display: flex;
    width: 15.56rem;
    height: 3.33rem;
    padding: 1rem 2.17rem;
    justify-content: center;
    align-items: center;
    border-radius: .83rem;
    background: #fbc51d;
    color: #2c2c2c;
    font-size: 24px;
    font-weight: 650;
    border: none;
    cursor: pointer
}

.BpPopupWrapper .BpPopup .enquiry-form-container button:hover {
    color: var(--color-white);
    background-color: #2c2c2c
}

.BpPopupWrapper .BpPopup .enquiry-form-container .scrollup {
    position: absolute;
    right: 4%;
    bottom: 10%;
    background-color: var(--color-white);
    border-radius: 50%;
    width: 5%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid white;
    cursor: pointer;
    animation: floatUpDown 1.5s ease-in-out infinite
}

@keyframes floatUpDown {

    0%,
    to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-35px)
    }
}

.BpPopupWrapper .BpPopup .pos-rel {
    position: relative
}

.BpPopupWrapper .BpPopup .pos-rel .amt-txt {
    position: absolute;
    width: 100%;
    bottom: -5px;
    left: 0;
    font-size: .85rem;
    font-style: italic;
    font-weight: 500
}

.BpPopupWrapper .BpPopup .input-amt {
    width: 100%;
    margin-top: 0
}

@media (max-width: 1024px) {
    .BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form .input-group {
        min-width: 335px
    }
}

@media (max-width: 768px) {
    .BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form .input-group {
        min-width: inherit
    }

    .BpPopupWrapper .BpPopup .pos-rel .amt-txt {
        bottom: -2px
    }
}

@media (max-width: 480px) {
    .BpPopupWrapper .BpPopup {
        top: 50%;
        left: 50%;
        width: 110%;
        max-width: 110%;
        margin: 0;
        overflow: scroll;
        padding: 10px
    }

    .BpPopupWrapper .BpPopup .enquiry-form-container {
        padding: .5rem 0rem
    }

    .BpPopupWrapper .BpPopup .enquiry-form-container .form-title {
        font-size: 24px;
        margin-bottom: 1.25rem
    }

    .BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form {
        display: flex;
        flex-direction: column;
        gap: .5rem
    }

    .BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form .input-group {
        display: flex;
        flex-direction: column;
        gap: .5rem !important
    }

    .BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form .input-group label {
        font-size: 12px;
        font-weight: 500;
        margin-bottom: 0rem !important
    }

    .BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form .input-group .input-field {
        height: 3rem;
        padding: .5rem;
        border-radius: .5rem
    }

    .BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form .input-group textarea.input-field {
        height: 4rem;
        padding-top: 1rem
    }

    .BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form .privacy-checkbox {
        font-size: .875rem;
        margin-top: 1rem;
        display: flex;
        align-items: center;
        gap: .5rem
    }

    .BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form .privacy-checkbox .checkbox-input {
        width: 1rem;
        height: 1rem;
        border-radius: .125rem;
        background-color: transparent;
        position: relative;
        transition: all .3s ease
    }

    .BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form .privacy-checkbox .checkbox-input:after {
        content: "";
        position: absolute;
        top: .1rem;
        left: .25rem;
        width: .3rem;
        height: .6rem;
        border: solid #fff;
        border-width: 0 .125rem .125rem 0;
        transform: rotate(45deg);
        opacity: 0;
        transition: opacity .3s ease
    }

    .BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form .privacy-checkbox .checkbox-input:checked:after {
        opacity: 1
    }

    .BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form .privacy-checkbox .checkbox-input:checked {
        background-color: #bc2329;
        border-color: #bc2329
    }

    .BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form .privacy-checkbox label {
        font-size: .875rem
    }

    .BpPopupWrapper .BpPopup .enquiry-form-container button {
        width: 50% !important;
        height: auto !important;
        padding: .5rem 1rem !important;
        font-size: 18px !important;
        margin-bottom: .5rem
    }

    .BpPopupWrapper .BpPopup .image-container {
        padding-top: 2rem;
        margin-top: 4rem !important;
        display: flex;
        justify-content: flex-start;
        margin-left: 0 !important
    }

    .BpPopupWrapper .BpPopup .image-container .enquiry-image {
        width: 290px !important;
        height: 241px !important
    }

    .BpPopupWrapper .pos-rel .amt-txt {
        font-size: .7rem
    }

    .BpPopupWrapper .BpPopup .input-amt {
        margin-bottom: 20px !important
    }

    .BpPopupWrapper .BpPopup .pos-rel .amt-txt {
        bottom: -2px
    }
}

@media (max-width: 480px) {
    .BpPopup .right .popup-form form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 16px;
        row-gap: 12px;
        padding: 0
    }

    .BpPopupWrapper .BpPopup .enquiry-form-container .enquiry-form .input-group .input-field {
        margin-bottom: .35rem
    }
}

.hero {
    padding: 0;
    text-align: center;
    color: var(--color-white)
}

.hero-overlay {
    padding: 0
}

.hero-overlay img {
    max-width: 100%;
    height: auto;
    width: 100%;
    object-fit: contain
}

.wcel-logo {
    width: 120px;
    margin: 20px auto
}

.prize-text {
    font-size: 18px;
    margin-top: 10px
}

.formsection {
    background: #f7f7f7;
    color: #000;
    padding: 0 20px 60px
}

.formsection-container {
    background: #000;
    box-shadow: 9px 9px #ff2d55;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    max-width: 90%;
    margin: auto;
    border-radius: 30px;
    overflow: hidden
}

.form-container {
    width: 44%;
    margin: 4% 9% 4% 1%;
    max-width: 600px
}

.form-image {
    position: relative;
    width: 40%
}

.form-image img {
    max-height: 100%;
    max-width: 100%;
    object-fit: cover;
    display: block;
    height: 100%;
    width: auto;
    transition: transform .5s ease, filter .5s ease;
    transform-style: preserve-3d;
    will-change: transform
}

.form-image img:hover {
    transform: rotateY(15deg) scale(1.05);
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .25))
}

.form-box {
    flex: 1;
    background: #1e1e1ebf;
    padding: 30px;
    min-width: 300px;
    border-radius: 20px
}

.form-box h3 {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #ffd000
}

.form-box p {
    font-size: .85rem;
    margin-bottom: 20px;
    color: var(--color-white)
}

form button,
.form-box button {
    background: #ffd000;
    color: #000;
    padding: 10px 20px;
    border: none;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer
}

.error {
    display: block;
    color: #ffd000;
    font-size: 12px;
    margin-top: -8px;
    margin-bottom: 10px
}

.box-logo {
    display: flex;
    gap: 10px 20px;
    position: absolute;
    bottom: 20px;
    right: 20px
}

.box-logo img {
    max-width: 100%;
    height: 70px;
    object-fit: contain;
    width: auto
}

.progress-bar {
    height: 20px;
    background: #444;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 20px
}

.progress {
    width: 100%;
    height: 100%;
    background: #ffd000;
    animation: progressAnim 3s linear forwards
}

@keyframes progressAnim {
    0% {
        width: 0%
    }

    to {
        width: 100%
    }
}

@media screen and (max-width:769px) {
    .formsection {
        padding: 10px 0 50px
    }

    .formsection-container {
        box-shadow: 5px 5px #ff2d55;
        border-radius: 20px
    }

    .form-container {
        width: 90%;
        margin: 10px auto;
        max-width: inherit
    }

    .form-box {
        padding: 15px
    }

    .form-image {
        width: 100%
    }

    .form-box h3 {
        font-size: 1.55rem
    }

    .box-logo {
        bottom: 15px;
        right: 15px
    }
}

.about {
    text-align: center;
    padding: 60px 20px;
    background: var(--color-white)
}

.about h2 {
    color: var(--color-red);
    text-shadow: 0px .2vh .2vh rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.8rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 20px
}

.about p {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 700px;
    margin: 12px auto
}

.date-box {
    display: inline-block;
    background: #ffd000;
    color: #000;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 15px;
    margin-top: 25px;
    border: 2px solid #000
}

@media (max-width: 600px) {
    .about h2 {
        font-size: 22px
    }

    .about p {
        font-size: 14px
    }

    .date-box {
        font-size: 14px;
        padding: 8px 16px
    }
}

.categories {
    padding: 60px 20px;
    text-align: center;
    background: #f7f7f7
}

.categories h2 {
    color: var(--color-red);
    text-shadow: 0px .2vh .2vh rgba(0, 0, 0, .3);
    font-family: 'Sora-SemiBold';
    font-size: 2.9rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 10px
}

.categories p {
    font-size: 1rem;
    color: #333
}

.category-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 25px 0
}

.tag {
    background: #111;
    color: var(--color-white);
    padding: 8px 14px;
    border-radius: 5px;
    font-size: 14px;
    transition: transform .3s ease-in-out;
    text-transform: uppercase
}

.tag:hover {
    background: #ff2d55;
    transform: rotate(-10deg)
}

.download-btn {
    display: inline-block;
    margin-top: 20px;
    background: #ffd000;
    color: #000;
    padding: 10px 20px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 5px;
    transition: transform .3s ease, box-shadow .3s ease
}

.download-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 16px #0003
}

.icon-calendar {
    max-width: 20px;
    height: auto;
    object-fit: contain;
    margin-right: 5px;
    display: inline
}

@media (max-width: 600px) {
    .categories h2 {
        font-size: 22px
    }

    .categories p {
        font-size: 14px
    }

    .tag {
        font-size: 13px;
        padding: 6px 10px
    }

    .download-btn {
        font-size: 14px;
        padding: 8px 16px
    }
}

.top-banner-container {
    position: relative;
    width: 100%
}

.top-banner-container .carousel {
    background: #000;
    opacity: 0;
    transition: opacity .4s ease-in
}

.top-banner-container .carousel.loaded {
    opacity: 1
}

.top-banner-container .carousel-cell {
    width: 100%;
    height: 100vh;
    margin-right: 0;
    overflow: hidden
}

.top-banner-container .carousel-cell img {
    width: 100vw;
    height: 100vh;
    object-fit: fill;
    object-position: center;
    max-width: 100%
}

.top-banner-container .lazy-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    font-size: 18px;
    color: #333
}

@media screen and (max-width: 768px) {
    .top-banner-container {
        height: auto;
        min-height: 510px
    }

    .top-banner-container .carousel {
        position: relative
    }

    .top-banner-container .carousel-cell {
        height: auto
    }

    .top-banner-container .carousel-cell img {
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: top
    }

    .top-banner-container .flickity-prev-next-button {
        width: 30px;
        height: 30px
    }
}